Dozens of long, thin threads flowing across the area in offset waves, with a highlight that slides along each one. The pointer combs through them and pushes them apart.
Fabric, woven to order.
npx shadcn@latest add https://hyperblur.dev/r/bg-silk-threads.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-silk-threads.tsx.
import { BgSilkThreads } from "@/components/hyperblur/bg-silk-threads"
<div className="relative h-96 bg-black"><BgSilkThreads /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 40 | Number of threads, from 4 to 160. |
| color | string | "#d9e2ff" | Color of most threads. |
| accent | string | "#2f7bff" | Color of every third thread. |
| amplitude | number | 18 | Wave height of each thread in pixels. |
| thickness | number | 1 | Line width multiplier. |
| push | number | 34 | How far threads part around the pointer, in pixels. |
| radius | number | 90 | Width of the combed area in pixels. |
| speed | number | 1 | Flow speed multiplier. |
| children | ReactNode | Content rendered on top of the threads. |