Saturated ribbons of color that flow across the area, twisting as they go and bending around a warp field that follows the pointer.
Chromatic 27
The color and motion design conference
npx shadcn@latest add https://hyperblur.dev/r/bg-color-bends.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-color-bends.tsx.
import { BgColorBends } from "@/components/hyperblur/bg-color-bends"
<div className="relative h-96"><BgColorBends bands={7}><h1>Loud</h1></BgColorBends></div>| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#ff2e88", "#ff7a1a", "#ffd60a", "#21e6a5", "#1f8bff", "#8b3dff"] | Palette the ribbons cycle through. Each ribbon blends three neighbors. |
| background | string | "#07070a" | Fill color behind the ribbons, also used for the edge vignette. |
| bands | number | 6 | Number of ribbons, from 1 to 14. |
| thickness | number | 1 | Ribbon width multiplier. |
| warp | number | 1 | Strength of the bend and twist around the pointer. |
| speed | number | 1 | Speed of the flow. |
| children | ReactNode | Content rendered on top of the ribbons. |