Diagonal light beams sweeping slowly across a dark background, with soft edges and a gentle shimmer. Canvas 2D, additive blending.
npx shadcn@latest add https://hyperblur.dev/r/beams.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/beams.tsx.
import { Beams } from "@/components/hyperblur/beams"
<div className="relative"><Beams /><h1>...</h1></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#2f7bff" | Beam color. Any CSS color; the core is lightened toward white. |
| count | number | 6 | How many beams. |
| speed | number | 1 | Sweep speed multiplier. |
| angle | number | 25 | Tilt of the beams in degrees; each beam varies a little around it. |
| blur | number | 0.6 | Edge softness from 0 (crisp) to 1 (very soft). |
| seed | number | 1 | Same seed, same picture. |