A spider web strung to the edges with a knot in the middle. Moving the pointer across a thread plucks it, and the vibration travels through the web before it settles.
Every thread counts
Map how your team really connects
npx shadcn@latest add https://hyperblur.dev/r/bg-web-threads.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-web-threads.tsx.
import { BgWebThreads } from "@/components/hyperblur/bg-web-threads"
<div className="relative h-96"><BgWebThreads><h1>Hello</h1></BgWebThreads></div>| Prop | Type | Default | Description |
|---|---|---|---|
| spokes | number | 14 | Number of threads running from the knot to the edges. |
| rings | number | 8 | Number of rings around the knot. |
| color | string | "rgba(255,255,255,0.22)" | Thread color at rest. |
| accent | string | "#7fb3ff" | Color of vibrating threads and the knot. |
| pluck | number | 0.8 | How hard a crossing plucks the threads. |
| damping | number | 2.5 | How quickly vibrations die out. Higher settles faster. |
| breeze | number | 1 | Strength of the gentle idle sway. 0 keeps the web still. |
| seed | number | 4 | Seed for the web layout. |
| speed | number | 1 | Speed of the idle path and sway. |
| children | ReactNode | Content rendered on top of the web. |