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. 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

Animated night sky with shooting stars