Layered sine waves filled with soft gradients that drift and breathe, like folded fabric.
npx shadcn@latest add https://hyperblur.dev/r/silk.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/silk.tsx.
import { Silk } from "@/components/hyperblur/silk"
<div className="relative"><Silk /><h1>...</h1></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#2f7bff" | Color of the first layer. |
| secondary | string | "#19c3f5" | Color of the last layer; layers blend between the two. |
| layers | number | 4 | How many stacked waves. |
| speed | number | 1 | Drift speed multiplier. |
| amplitude | number | 0.5 | Wave height from 0 (flat) to 1 (tall). |
| seed | number | 1 | Same seed, same folds. |