---
title: "ShootingStars — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Hamim Reza · Backgrounds. Animated night sky with shooting stars"
canonical: "https://framer.elliotli.dev/component/shootingstars"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/ShootingStars

# ShootingStars

Animated night sky with shooting stars

[View on Framer](https://framer.com/marketplace/components/shootingstars/?via=elliot-li)

![ShootingStars preview image 1](https://framer.elliotli.dev/og/component/shootingstars/52f4654574e18c02/1600x1200.jpg)

## Summary

Animated night sky with shooting stars

## Description

An animated night sky background with shooting stars traversing the screen and a twinkling starfield. Stars spawn randomly from any screen edge, grow larger as they travel, and leave a gradient trail behind them. Built for hero sections, space-themed designs, and atmospheric backgrounds that need motion without complexity.

## Features

-   Shooting stars spawn randomly from all four screen edges
    
-   Four travel angles — 45°, 135°, 225°, 315°
    
-   Distance-based scaling — stars grow larger as they travel
    
-   Gradient trail from transparent to solid color per star
    
-   Twinkling background starfield with sine wave opacity animation
    
-   SVG Gaussian blur glow effect on background stars
    
-   Configurable spawn speed, delay, star color and trail color
    
-   Configurable background star count, color and size
    
-   Animations pause when component leaves viewport
    
-   Canvas-optimized — static single star preview in Framer editor
    
-   No external dependencies — pure SVG and RAF animation
    

## Use Cases

Hero sections · Space-themed designs · Atmospheric backgrounds · Landing pages · Coming soon pages · Portfolio intros · Night sky effects · Sci-fi interfaces

**SEO Keywords**

framer shooting stars · framer animated background · framer night sky · framer star background · framer space background · framer particle effect · framer starfield · framer background component · animated stars framer · framer meteor shower · framer cosmic background · framer hero background · framer motion background · framer code component · framer space effect

## Rank history [How rankings work →](/terms#rankings)

-   All · #8296

## Details

- **Author**: Hamim Reza
- **Price**: $10.00
- **Published**: 2026-03-03
- **Updated**: 2026-04-12
- **Added**: 2026-02-26
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background