Several glowing ribbons chase the pointer through spring-chained segments, taper to a point and blend where they cross.
Velvet Hours
Mira Sol · Low Tide Sessions
npx shadcn@latest add https://hyperblur.dev/r/cursor-ribbons.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cursor-ribbons.tsx.
import { CursorRibbons } from "@/components/hyperblur/cursor-ribbons"
<CursorRibbons className="h-72" count={4} />| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#2f7bff", "#7fb3ff", "#c084fc", "#22d3ee"] | Ribbon colors, used in order. |
| count | number | 4 | Number of ribbons, up to 10. |
| length | number | 26 | Segments per ribbon. More segments give longer ribbons. |
| width | number | 7 | Ribbon width at the head in pixels. |
| idle | boolean | true | Play a slow scripted path while the pointer is away. The effect hands over to the real pointer when it enters and eases back when it leaves. |
| children | ReactNode | Content rendered inside the stage. The stage fills its parent, so give the parent a height. |