Rows of thin vertical slats that turn and catch the light in a rolling wave. A bright crest follows the pointer across them.
Venetian Hours
Mara Quell · Low Tide Sessions
npx shadcn@latest add https://hyperblur.dev/r/bg-slats.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-slats.tsx.
import { BgSlats } from "@/components/hyperblur/bg-slats"
<div className="relative h-96"><BgSlats><h1>Hello</h1></BgSlats></div>| Prop | Type | Default | Description |
|---|---|---|---|
| slatWidth | number | 6 | Width of each slat in pixels when it faces forward. |
| gap | number | 4 | Space between slats in pixels. |
| color | string | "#ffffff" | Base slat color. Its brightness changes with the tilt. |
| accent | string | "#2f7bff" | Color of the crest under the pointer. |
| amplitude | number | 0.75 | Maximum tilt of the wave in radians. |
| skew | number | 12 | How far the slat ends lean as they turn, in pixels. |
| radius | number | 90 | Width of the bright crest in pixels. |
| fade | number | 0.22 | Fraction of the height faded out at the top and bottom. |
| speed | number | 1 | Speed of the wave and the idle sweep. |
| children | ReactNode | Content rendered on top of the slats. |