Shooting Stars and Stars Background

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

Shooting StarxStar Background

npx shadcn@latest add @aceternity/shooting-stars stars-background

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

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

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

200+ templates and blocks combined

Ready to copy paste component blocks, save days of development time