Shooting Stars
Animated shooting stars over a twinkling star field canvas background.
Preview
Shooting Stars
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Hero sections and dramatic landing page backgrounds.
Why this component matters
Creates a sense of depth and motion that makes flat dark backgrounds feel three-dimensional.
Usage guidance
Layer with a dark background. Use star density of 0.00015 for subtlety. Combine with a centered headline and CTA.
Installation
bash
npx shadcn@latest add @aceternity/shooting-stars-and-stars-backgroundUsage
example.tsxtsx
import { ShootingStars } from "@/components/ui/shooting-stars-and-stars-background";
export default function Example() {
return (
<ShootingStars>
{/* Your content here */}
</ShootingStars>
);
}Source
shooting-stars-and-stars-background.tsx
components/ui/shooting-stars-and-stars-background.tsx