ShootingStars — Animated night sky with shooting stars
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.
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
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
Hamim Reza
