Shooting Stars
A twinkling star field with brand-tinted streaks shooting across at random.
- 3.0 KB gzipped
- Zero dependencies
- Reduced-motion safe
- Base UI & Radix compatible
Make a wish
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/shooting-stars.jsonAdds components/velora/shooting-stars.tsx.
Examples
Night sky hero
A dark hero with a horizon glow, dense stars, frequent streaks and a call to action.
Observatory
Watch your metrics light up the sky
Real-time dashboards that stay calm until something is worth your attention.
Start stargazingProps
StarsBackground
| Prop | Type | Default |
|---|---|---|
densityStars per 10,000 px² | number | 5 |
Also accepts every <div> attribute, forwarded to the root element.
ShootingStars
| Prop | Type | Default |
|---|---|---|
delayAverage pause between streaks in ms; each pause varies ±60% | number | 2400 |
speedTravel speed in px per second; each streak varies ±30% | number | 900 |
angleDirection in degrees below horizontal; each streak varies ±12° | number | 25 |
lengthTrail length in px | number | 150 |
colorAny CSS colour or custom property name | string | "--brand-to" |
Also accepts every <div> attribute, forwarded to the root element.
Accessibility
- Reduced motion
- Stars stop twinkling and no streaks launch; one streak is painted frozen mid-flight. Both canvases repaint that still frame on resize and theme change.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- Decorative; both layers are aria-hidden, so only the content above them is announced.