A sheet of satin rippling in a slow breeze, lit per facet with soft diffuse light and a narrow sheen that slides along the folds.
The silk
collection
npx shadcn@latest add https://hyperblur.dev/r/bg-cloth.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-cloth.tsx.
import { BgCloth } from "@/components/hyperblur/bg-cloth"
<div className="relative h-96"><BgCloth><h1>The silk collection</h1></BgCloth></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#1a2b52" | Fabric color. Hex color. |
| accent | string | "#9cc2ff" | Sheen color. Hex color. |
| background | string | "#05060a" | Color behind the fabric edges. Hex color. |
| folds | number | 1 | Frequency of the folds. |
| sheen | number | 1 | Strength of the sheen highlight. |
| detail | number | 1 | Mesh density. Higher is smoother and heavier. |
| speed | number | 1 | Speed of the breeze. |
| 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. |