Translucent strands that drift on smooth noise and leave faint trails behind them. Strands thicken and glow where the pointer passes.
Sync that feels like silk
Realtime state for every device you ship
npx shadcn@latest add https://hyperblur.dev/r/bg-ghost-fibers.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-ghost-fibers.tsx.
import { BgGhostFibers } from "@/components/hyperblur/bg-ghost-fibers"
<div className="relative h-96"><BgGhostFibers><h1>Hello</h1></BgGhostFibers></div>| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 22 | Number of strands, up to 80. |
| color | string | "rgba(200,220,255,0.55)" | Strand color. |
| accent | string | "#7fb3ff" | Color of the glow near the pointer and of a few tinted strands. |
| thickness | number | 1 | Base strand width in pixels. |
| amplitude | number | 0.28 | How far strands wander, as a fraction of the height. |
| trail | number | 3 | Number of fading copies drawn behind each strand, up to 6. |
| radius | number | 120 | Reach of the pointer in pixels. |
| seed | number | 7 | Seed for the strand layout and noise. |
| speed | number | 1 | Speed of the drift. |
| children | ReactNode | Content rendered on top of the strands. |