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