ShootingStars

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