Components›Shooting Stars

Shooting Stars

Two Aceternity components that work together: ShootingStars renders animated shooting star trails via SVG, and StarsBackground renders a twinkling star field via Canvas. Layer them over a dark background for a cosmic effect.

AceternityAnimationBackgroundCanvas

Full Demo

Elevate Your Wellness

A comprehensive platform for health professionals and their clients, designed to track progress and deliver personalized programs.

tsx

import { ShootingStars } from "@/components/ui/shooting-stars";
import { StarsBackground } from "@/components/ui/stars-background";

<div className="relative h-[400px] rounded-2xl bg-neutral-950 overflow-hidden">
  <StarsBackground />
  <ShootingStars />
  <div className="relative z-10 flex items-center justify-center h-full">
    <h2 className="text-white text-2xl">Your Content Here</h2>
  </div>
</div>

Custom Colors & Speed

Green palette with larger, faster shooting stars

tsx

<div className="relative h-[300px] rounded-2xl bg-neutral-950 overflow-hidden">
  <StarsBackground starDensity={0.0003} />
  <ShootingStars
    starColor="#1db954"
    trailColor="#4caf50"
    minSpeed={15}
    maxSpeed={35}
    starWidth={15}
    starHeight={2}
  />
</div>

Stars Background Only

Dense twinkling star field without shooting stars

tsx

<div className="relative h-[200px] rounded-2xl bg-neutral-950 overflow-hidden">
  <StarsBackground
    starDensity={0.0004}
    twinkleProbability={0.9}
    minTwinkleSpeed={0.3}
    maxTwinkleSpeed={0.8}
  />
</div>

ShootingStars Props

Prop	Type	Default	Description	Required
minSpeed	`number`	10	Minimum speed of the shooting star (pixels per frame).	No
maxSpeed	`number`	30	Maximum speed of the shooting star.	No
minDelay	`number`	1200	Minimum delay between shooting stars (ms).	No
maxDelay	`number`	4200	Maximum delay between shooting stars (ms).	No
starColor	`string`	'#9E00FF'	Color of the shooting star head.	No
trailColor	`string`	'#2EB9DF'	Color of the shooting star trail gradient.	No
starWidth	`number`	10	Width of the shooting star SVG rect.	No
starHeight	`number`	1	Height of the shooting star SVG rect.	No
className	`string`	--	Additional classes on the SVG container.	Yes

StarsBackground Props

Prop	Type	Default	Description	Required
starDensity	`number`	0.00015	Stars per pixel of area. Higher values = more stars.	No
allStarsTwinkle	`boolean`	true	When true, all stars animate their opacity.	No
twinkleProbability	`number`	0.7	Probability each star twinkles (only used when allStarsTwinkle is false).	No
minTwinkleSpeed	`number`	0.5	Minimum twinkle animation speed.	No
maxTwinkleSpeed	`number`	1	Maximum twinkle animation speed.	No
className	`string`	--	Additional classes on the canvas element.	Yes

Usage Guidelines

Use as a hero section background or landing page decoration.
Layer StarsBackground first, then ShootingStars, then your content with relative z-10.
The parent container needs position: relative and overflow: hidden.
Keep starDensity between 0.0001 and 0.0005 for best performance and aesthetics.
Both components are canvas/SVG-based and run at 60fps with minimal CPU impact.
For reduced motion preferences, consider wrapping in a prefers-reduced-motion check.