Ribbon
A rainbow ribbon drawn by your path. It fattens and cycles faster over anything clickable.
npx shadcn@latest add https://hoverui.fun/Adds components/cursors/ribbon.tsx. The CLI also installs the useCursor hook it runs on, once, into your hooks folder. The files are yours from there.
Move through the preview, then hover the controls and press.Open this on a computer to move it around: it follows a mouse, not a finger.
- Kind
- Colorful
- Hook
- useCursor
- Dependencies
- None
- License
- MIT
How it behaves
A rainbow ribbon drawn by your path, tapering to its tail and cycling through the hues; it fattens over anything clickable.
Usage
import { RibbonCursor } from "@/components/cursors/ribbon";
export function Section() {
return (
<section>
<RibbonCursor />
{/* this section now wears Ribbon */}
</section>
);
}Put it inside <body> in your root layout to wear it on every page. Nested cursors take over inside their own element.
Props
- className
- Extra classes for the cursor's root. It draws in its own colors, set in the file; any outline or pointer dot it has follows currentColor, e.g. text-pink-500. Leave mix-blend-difference off: it would turn those colors to negatives.
- Hover targets
- a, button, input, select, textarea, label, [role=button], [data-cursor-label]
Source
"use client";
import { useRef } from "react";
import { cursorRoot, useCursor } from "@/hooks/use-cursor";
const POINTS = 24;
/** A rainbow ribbon drawn by your path, tapering to its tail and cycling through the hues; it fattens over anything clickable. */
export function RibbonCursor({ className = "" }: { className?: string }) {
const s = useRef({ pts: [] as { x: number; y: number }[], hue: 0, w: 1 });
const ref = useCursor((p, el) => {
const st = s.current;
// Collapsed on entry, and always collapsed under reduced motion: only the head is drawn.
if (!p.dt || p.reduced) st.pts = Array.from({ length: POINTS }, () => ({ x: p.x, y: p.y }));
else {
st.pts.unshift({ x: p.x, y: p.y });
st.pts.length = POINTS;
}
st.w += ((p.down ? 0.6 : p.hover ? 1.8 : 1) - st.w) * p.ease(10);
if (!p.reduced) st.hue = (st.hue + p.dt * (p.hover ? 240 : 60)) % 360;
el.querySelectorAll("line").forEach((line, i) => {
const [a, b] = [st.pts[i], st.pts[i + 1]];
line.setAttribute("x1", String(a.x));
line.setAttribute("y1", String(a.y));
line.setAttribute("x2", String(b.x));
line.setAttribute("y2", String(b.y));
line.setAttribute("stroke", `hsl(${(st.hue + i * 14) % 360} 90% 58%)`);
line.setAttribute("stroke-width", String((8 * (1 - i / POINTS) + 1) * st.w));
});
});
return (
<div ref={ref} aria-hidden className={`${cursorRoot} ${className}`}>
<svg className="absolute top-0 left-0 h-screen w-screen overflow-visible">
{Array.from({ length: POINTS - 1 }, (_, i) => (
<line key={i} strokeLinecap="round" />
))}
</svg>
</div>
);
}
It runs on the useCursor hook, which has its own source and API.
More colorful cursors
- OffsetCyan, magenta and yellow rings that slip out of register as you move. Over a control they grow and misregister.
- ConfettiSheds confetti as you move, pops a little over each control, and throws a handful on click.
- GlowA wide, soft glow drifting after the pointer through shifting color. Gathers tight over anything clickable.
- NeonA humming neon tube that stutters now and then. Swells and switches color over anything clickable.
- SparkleStars twinkle out along your path, keep coming over controls, and burst in a ring on click.
- SplatA loaded brush: every click leaves a fading splat of paint, each a new color.
- FireworksHold to pack a shell, let go to launch it: a peony, a ring, a willow or a crackle in turn. Entering a control pops a ring of sparks.
- LanternA paper sky lantern held above the pointer. Click to let it go and it rises, sways and drifts off while the next one lights; hold to send them up one after another.
- FluidDye in a real fluid simulation, stirred by the pointer: the swirls keep curling after you stop, a click splashes a ring of color, and controls send up plumes of it.
Made a cursor of your own? Contributed cursors carry their maker's name on their page.
Contribute a cursor