Shooting Stars

MAX

Animated shooting stars background effect with customizable properties

Demo

Shooting Stars Effect

Watch the animated shooting stars in the background

Exclusive Launch 50% offspots left: 0 / 50
3D Cube - happy face3D Cube - Happy Face
$39.99

$19.99

Payment once and get lifetime access
Access to all animations
All updates
All animations
No subscriptions

Usage Example


// Custom golden shooting stars
<div className="relative min-h-screen bg-gradient-to-br from-zinc-900 to-zinc-700">
<ShootingStars
  count={15}
  speed={0.7}
  color="#ffd700"
  opacity={0.9}
  size={3}
  trailLength={400}
  direction={315}
  enableGlow={true}
  glowIntensity={0.8}
/>
<div className="relative z-10">
  // Your content here 
</div>
</div>

// -------------------------------------------
<ShootingStars
  count={5}
  speed={2}
  color="#00bfff"
  opacity={0.8}
  size={6}
  trailLength={500}
  direction={300}
  enableGlow={true}
  glowIntensity={0.9}
/>
// -------------------------------------------
<ShootingStars
  count={20}
  speed={0.5}
  color="#ff69b4"
  opacity={0.7}
  size={2}
  trailLength={200}
  direction={330}
  enableGlow={true}
  glowIntensity={0.5}
/>

Properties

The ShootingStars component accepts the following props:

PropertyTypeDefaultDescription
countnumber10Number of shooting stars to display
speednumber1Animation speed multiplier (higher = faster)
colorstring"#ffffff"Star color (hex or Tailwind color)
opacitynumber1Star opacity (0-1)
sizenumber4Star size in pixels
trailLengthnumber300Trail length in pixels
directionnumber315Animation direction in degrees (0-360)
minDurationnumber1Minimum animation duration in seconds
maxDurationnumber3Maximum animation duration in seconds
classNamestring""Additional CSS classes for the container
enableGlowbooleantrueEnable/disable glow effect
glowIntensitynumber0.6Glow intensity (0-1)

Direction Guide

The direction prop controls the angle of the shooting stars:

  • : Horizontal left to right →
  • 90°: Vertical top to bottom ↓
  • 180°: Horizontal right to left ←
  • 270°: Vertical bottom to top ↑
  • 315°: Diagonal top-right to bottom-left ↙ (default)
  • 45°: Diagonal bottom-left to top-right ↗

Demo Features:

  • Basic Settings: Count, speed, and color controls
  • Appearance: Opacity, size, and trail length adjustments
  • Animation: Direction control and glow effects
  • Presets: Classic, Golden Rain, Blue Comet, and Pink Dreams

Usage Examples

Golden Rain

15 golden stars with glow

Blue Comet

Fast blue comets

Pink Dreams

Dreamy pink stars

Emerald Rush

Upward green meteors