Stacked translucent waves in depth with gradient fills and soft crest lines, rolling gently. The wave closest to the pointer rises toward it.
npx shadcn@latest add https://hyperblur.dev/r/bg-layered-waves.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-layered-waves.tsx.
import { BgLayeredWaves } from "@/components/hyperblur/bg-layered-waves"
<div className="relative h-96 bg-black"><BgLayeredWaves /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| layers | number | 5 | Number of waves, from 2 to 9. |
| accent | string | "#2f7bff" | Color of the front wave. Hex only. |
| accentTo | string | "#a855f7" | Color of the back wave. Layers in between blend the two. Hex only. |
| amplitude | number | 14 | Base wave height in pixels. Front waves are taller. |
| lift | number | 34 | How far the nearest wave rises toward the pointer, in pixels. |
| crest | boolean | true | Draw a thin light line along each crest. |
| speed | number | 1 | Rolling speed multiplier. |
| children | ReactNode | Content rendered on top of the waves. |