A starfield tunnel: stars streak out from a vanishing point with blurred trails, and accelerate on press or boost.
npx shadcn@latest add https://hyperblur.dev/r/hyperspeed.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hyperspeed.tsx.
import { Hyperspeed } from "@/components/hyperblur/hyperspeed"
<div className="relative"><Hyperspeed /><h1>...</h1></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#ffffff" | Main star color. |
| accent | string | "#2f7bff" | Color for about a quarter of the stars and the central glow. |
| count | number | 300 | Number of stars. |
| speed | number | 1 | Cruising speed multiplier. |
| boost | boolean | false | Ramp up to warp speed. Pressing the pointer on the parent element does the same. |
| seed | number | 1 | Same seed, same starting field. |