Shooting Stars
A beautiful animated starfield background with shooting stars effect. Perfect for hero sections, landing pages, and space-themed designs.
Preview
Shooting Stars
Installation
Use the CLI to add this component to your project.
Usage
tsx
17 linesCopy
Color Schemes
White (Default)
White Stars
Cyan
Cyan Stars
Purple
Purple Stars
Rainbow
Rainbow Stars
Background Options
Midnight Background
Midnight Theme
Transparent Background (Overlay Mode)
Overlay on Gradient
Animation Options
Fast Animation (2x speed)
2x Speed
High Density Stars
High Density
Long Trail Effect
Long Trails
Props
| Prop | Type | Default | Description |
|---|---|---|---|
starCount | number | 50 | Number of twinkling background stars |
shootingStarCount | number | 5 | Number of shooting stars |
colorScheme | 'white' | 'cyan' | 'purple' | 'rainbow' | 'custom' | white | Color theme preset for shooting stars |
customColors | string[] | undefined | Array of custom colors (used when colorScheme is 'custom') |
speed | number | 1 | Animation speed multiplier |
starSize | number | 1 | Size of twinkling stars in pixels |
trailLength | number | 100 | Length of shooting star trail in pixels |
background | 'default' | 'dark' | 'midnight' | 'none' | string | default | Background gradient preset or custom CSS value |
showStars | boolean | true | Whether to show twinkling background stars |
minDelay | number | 0 | Minimum delay between shooting star animations (seconds) |
maxDelay | number | 5 | Maximum delay between shooting star animations (seconds) |
className | string | undefined | Additional CSS classes |