Out-of-focus light discs with bright rims that drift upward while a slow focus pull sweeps through the depth, turning near discs into crisp points and far ones into soft glows.
Winter Market
npx shadcn@latest add https://hyperblur.dev/r/bg-bokeh.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-bokeh.tsx.
import { BgBokeh } from "@/components/hyperblur/bg-bokeh"
<div className="relative h-96"><BgBokeh shape="hexagon"><h1>Holiday edit</h1></BgBokeh></div>| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#ffb86b", "#ff7a8a", "#7fb3ff", "#ffe2a8"] | Light colors. Hex colors. |
| background | string | "#07060a" | Backdrop color. Hex color. |
| count | number | 38 | Number of discs, from 4 to 160. |
| shape | "circle" | "hexagon" | "circle" | Aperture shape of the discs. |
| focusPull | boolean | true | Sweeps the focus back and forth. Set false to keep everything soft. |
| speed | number | 1 | Speed of the drift and the focus pull. |
| children | ReactNode | Content rendered above the background. | |
| className | string | "" | Extra classes for the root element. |