Slanted bars streaking across a container. Drop it behind a hero or a card.
npx shadcn@latest add https://hyperblur.dev/r/speed-lines.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/speed-lines.tsx.
import { SpeedLines } from "@/components/hyperblur/speed-lines"
<div className="relative"><SpeedLines /><h1>...</h1></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#2f7bff" | Bar color. |
| count | number | 14 | How many bars. |
| speed | number | 1 | Speed multiplier. |
| angle | number | 20 | Tilt in degrees. |
| opacity | number | 0.35 | Bar opacity. |