Cursor Ribbons React component
Silky, tapered ribbons of colour that chase the pointer on springs of different stiffness, fanning apart when you move fast and gathering when you slow down, glowing where they cross and wandering on their own when idle.
About the Cursor Ribbons component
Cursor Ribbons fills an area with silky ribbons of colour that chase the pointer. Each ribbon hangs on a spring of its own stiffness, so a quick flick fans them apart into a rainbow and they gather back into one bundle as you slow down.
The ribbons taper to a point, fade from one colour to the next along their tails and glow where they cross. With no pointer around they keep wandering on a looping path, so the area never looks dead.
When to use it
Use it for playful hero sections, music and event sites, creative portfolios and launch pages where motion is part of the brand.
It's loud by design: keep the copy short and give it a quiet corner.
Installation
Add the Cursor Ribbons component to your project with the shadcn CLI. It lands in components/cursor-ribbons.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/cursor-ribbonsOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<CursorRibbons /> accepts 7 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| colors One colour per ribbon; the ribbon fades from this colour to the next one along its tail. | string[] | ["#ff4d8d", "#ff9a3c", "#ffe14d", "#4dffb8", "#4db8ff", "#a64dff"] |
| background | string | "#07070a" |
| count Number of ribbons (1–8). | number | 6 |
| width Width of a ribbon at its head, in px. | number | 14 |
| length Number of points in each ribbon; more points make longer tails. | number | 56 |
| glow Blend the ribbons additively so overlaps glow (best on dark backgrounds). | boolean | true |
| idle Let the ribbons wander on their own while no pointer is over them. | boolean | true |
- colors
One colour per ribbon; the ribbon fades from this colour to the next one along its tail.
string[]Default: ["#ff4d8d", "#ff9a3c", "#ffe14d", "#4dffb8", "#4db8ff", "#a64dff"] - backgroundstringDefault: "#07070a"
- count
Number of ribbons (1–8).
numberDefault: 6 - width
Width of a ribbon at its head, in px.
numberDefault: 14 - length
Number of points in each ribbon; more points make longer tails.
numberDefault: 56 - glow
Blend the ribbons additively so overlaps glow (best on dark backgrounds).
booleanDefault: true - idle
Let the ribbons wander on their own while no pointer is over them.
booleanDefault: true
npm dependencies
Installed for you by the shadcn CLI.
Cursor Ribbons FAQ
- Why do the ribbons spread apart?
- Each ribbon's head is a spring with a different stiffness and damping. When you move slowly they all keep up and overlap; when you move fast the looser springs lag and swing wider.
- Can I change the colours?
- colors takes one colour per ribbon; each fades into the next colour along its tail. background sets the colour behind, and glow blends overlaps additively, which looks best on dark backgrounds.
- How do I make them longer or thicker?
- length is the number of points per ribbon (longer tails) and width the width at the head in pixels. count sets how many ribbons there are.
- What about phones and reduced motion?
- The ribbons wander on their own, and a tap or a drag sends them after your finger. With reduced motion turned on a single still frame is drawn.
