Introducing Aceternity UI Pro - 70+ premium component packs and templates to build amazing websites.
Logo

Shooting Stars and Stars Background

A shooting star animation on top of a starry background, as seen on figmaplug.in

Open in

Shooting StarxStar Background

Installation

Run the following command

npx shadcn@latest add https://ui.aceternity.com/registry/shooting-stars stars-background.json

Props

Shooting Stars

PropTypeDefaultDescription
minSpeednumber10Minimum speed of the shooting stars
maxSpeednumber30Maximum speed of the shooting stars
minDelaynumber4200Minimum delay between shooting stars (in milliseconds)
maxDelaynumber8700Maximum delay between shooting stars (in milliseconds)
starColorstring"#9E00FF"Color of the star (end of the gradient)
trailColorstring"#2EB9DF"Color of the star's trail (start of the gradient)
starWidthnumber10Width of the shooting star
starHeightnumber1Height of the shooting star
classNamestringundefinedAdditional CSS classes to apply to the SVG container

Stars Background

PropTypeDefaultDescription
starDensitynumber0.00015Determines the number of stars per pixel area. Higher values create more stars.
allStarsTwinklebooleantrueIf true, all stars will twinkle. If false, only a portion of stars will twinkle based on twinkleProbability.
twinkleProbabilitynumber0.7The probability (0-1) that a star will twinkle when allStarsTwinkle is false.
minTwinkleSpeednumber0.5The minimum duration (in seconds) for a star's twinkle animation.
maxTwinkleSpeednumber1The maximum duration (in seconds) for a star's twinkle animation.
classNamestringundefinedAdditional 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.

Go Pro
Manu was such a pleasure to work with. Talented, communicative and fast. Highly recommend!

Jonathan Barshop

Founder at Barshop Studios

A product by Aceternity
Building in public at @mannupaaji