A bundle of SVG curves that crosses the frame and twists through a pinch point, with bright glints racing along random strands. The whole bundle breathes slowly.
Every event, one pipeline
npx shadcn@latest add https://hyperblur.dev/r/bg-flow-paths.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-flow-paths.tsx.
import { BgFlowPaths } from "@/components/hyperblur/bg-flow-paths"
<div className="relative h-96"><BgFlowPaths count={32}><h1>Every signal, one stream</h1></BgFlowPaths></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#7fb3ff" | Color of the strands. |
| accent | string | "#2f7bff" | Color of the glints and the center glow. |
| background | string | "#05070c" | Fill color behind the strands. |
| count | number | 28 | Number of strands, from 4 to 80. |
| pinch | number | 0.6 | How tightly the strands gather in the middle, from 0 (parallel) to 1 (a single point). |
| speed | number | 1 | Speed multiplier for the glints and the breathing. |
| children | ReactNode | Content rendered above the background. | |
| className | string | "" | Extra classes for the root element. |