A perspective sea of dots rolling under interfering swells, with crests brightening toward the accent color and the far rows fading into fog at the horizon.
Sound that moves with you
Tidewave Buds · adaptive spatial audioListen to a sample
npx shadcn@latest add https://hyperblur.dev/r/bg-dot-swell.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-dot-swell.tsx.
import { BgDotSwell } from "@/components/hyperblur/bg-dot-swell"
<div className="relative h-96"><BgDotSwell><h1>Sound that moves</h1></BgDotSwell></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#5b6a86" | Color of dots in the troughs. Hex color. |
| accent | string | "#7fb3ff" | Color of dots on the crests. Hex color. |
| background | string | "#05060a" | Sky and fog color. Hex color. |
| columns | number | 80 | Dots per row, from 12 to 140. |
| rows | number | 40 | Rows of dots from near to far, from 8 to 90. |
| height | number | 1 | Height of the swells. |
| horizon | number | 0.34 | Vertical position of the horizon, from 0 (top) to 1 (bottom). |
| speed | number | 1 | Speed of the swells. |
| className | string | "" | Extra classes for the root. The root is absolutely positioned and fills its parent. |
| children | ReactNode | Content rendered on top of the background. |