Rows of thin lines in perspective that ripple like a sheet of fabric, with near rows hiding the far ones. A swell travels across and lights the crests in the accent color.
Sound, shaped by you
npx shadcn@latest add https://hyperblur.dev/r/bg-wave-lines.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-wave-lines.tsx.
import { BgWaveLines } from "@/components/hyperblur/bg-wave-lines"
<div className="relative h-96"><BgWaveLines><h1>Signal</h1></BgWaveLines></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#ededed" | Line color. |
| accent | string | "#2f7bff" | Color of the lit crests. |
| background | string | "#060608" | Fill color, also used to hide lines behind nearer ones. |
| lines | number | 40 | Number of rows, from 8 to 90. |
| amplitude | number | 1 | Height of the waves. |
| horizon | number | 0.3 | Vertical position of the farthest row, from 0 (top) to 0.8. |
| speed | number | 1 | Speed of the waves. |
| children | ReactNode | Content rendered above the background. | |
| className | string | "" | Extra classes for the root element. |