Shooting Stars and Stars Background
A shooting star animation on top of a starry background, as seen on figmaplug.in
Installation
Run the following command
npx shadcn@latest add @aceternity/shooting-stars stars-backgroundProps
Shooting Stars
| Prop | Type | Default | Description |
|---|---|---|---|
| minSpeed | number | 10 | Minimum speed of the shooting stars |
| maxSpeed | number | 30 | Maximum speed of the shooting stars |
| minDelay | number | 4200 | Minimum delay between shooting stars (in milliseconds) |
| maxDelay | number | 8700 | Maximum delay between shooting stars (in milliseconds) |
| starColor | string | "#9E00FF" | Color of the star (end of the gradient) |
| trailColor | string | "#2EB9DF" | Color of the star's trail (start of the gradient) |
| starWidth | number | 10 | Width of the shooting star |
| starHeight | number | 1 | Height of the shooting star |
| className | string | undefined | Additional CSS classes to apply to the SVG container |
Stars Background
| Prop | Type | Default | Description |
|---|---|---|---|
| starDensity | number | 0.00015 | Determines the number of stars per pixel area. Higher values create more stars. |
| allStarsTwinkle | boolean | true | If true, all stars will twinkle. If false, only a portion of stars will twinkle based on twinkleProbability. |
| twinkleProbability | number | 0.7 | The probability (0-1) that a star will twinkle when allStarsTwinkle is false. |
| minTwinkleSpeed | number | 0.5 | The minimum duration (in seconds) for a star's twinkle animation. |
| maxTwinkleSpeed | number | 1 | The maximum duration (in seconds) for a star's twinkle animation. |
| className | string | undefined | Additional CSS classes to apply to the container div. |
This component is created by Vijay Verma for figmaplug.in. You can checkout the original code here
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time
