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

$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:

Property	Type	Default	Description
`count`	`number`	`10`	Number of shooting stars to display
`speed`	`number`	`1`	Animation speed multiplier (higher = faster)
`color`	`string`	`"#ffffff"`	Star color (hex or Tailwind color)
`opacity`	`number`	`1`	Star opacity (0-1)
`size`	`number`	`4`	Star size in pixels
`trailLength`	`number`	`300`	Trail length in pixels
`direction`	`number`	`315`	Animation direction in degrees (0-360)
`minDuration`	`number`	`1`	Minimum animation duration in seconds
`maxDuration`	`number`	`3`	Maximum animation duration in seconds
`className`	`string`	`""`	Additional CSS classes for the container
`enableGlow`	`boolean`	`true`	Enable/disable glow effect
`glowIntensity`	`number`	`0.6`	Glow intensity (0-1)

Direction Guide

The direction prop controls the angle of the shooting stars:

0°: 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

Documentation

Animations