A shower of shooting stars with fading tails over a faint, twinkling star field. Pure CSS, fills its positioned parent.
“We are all in the gutter, but some of us are looking at the stars.”
Oscar Wilde · 1892
npx shadcn@latest add https://hyperblur.dev/r/meteors.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/meteors.tsx.
import { Meteors } from "@/components/hyperblur/meteors"
<div className="relative h-80 bg-[#060914]"><Meteors count={20} /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 20 | Number of meteors in the shower. Roughly a third are in flight at any moment. |
| angle | number | 145 | Direction of travel in degrees. 0 moves right, 90 falls straight down, 145 heads down and to the left. |
| speed | number | 1 | Speed multiplier. 2 is twice as fast. |
| color | string | "#ffffff" | Color of the meteors and stars. |
| stars | number | 60 | Number of twinkling background stars. 0 hides the star field. |
| seed | number | 7 | Changes the deterministic layout of meteors and stars. |