Shooting Stars and Stars Background
A shooting star animation on top of a starry background, as seen on figmaplug.in
Shooting StarxStar Background
Installation
Run the following command
npx shadcn@latest add https://ui.aceternity.com/registry/shooting-stars stars-background.jsonProps
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
With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.
Manu was such a pleasure to work with. Talented, communicative and fast. Highly recommend!
Jonathan Barshop
Founder at Barshop Studios