Glow
A wide, soft glow drifting after the pointer through shifting color. Gathers tight over anything clickable.
npx shadcn@latest add https://hoverui.fun/Adds components/cursors/glow.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 wide, soft glow that drifts after the pointer through slowly shifting color; over anything clickable it gathers in tight and bright.
Usage
import { GlowCursor } from "@/components/cursors/glow";
export function Section() {
return (
<section>
<GlowCursor />
{/* this section now wears Glow */}
</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";
/** A wide, soft glow that drifts after the pointer through slowly shifting color; over anything clickable it gathers in tight and bright. */
export function GlowCursor({ className = "" }: { className?: string }) {
const s = useRef({ x: 0, y: 0, size: 1, hue: 0 });
const ref = useCursor((p, el) => {
const st = s.current;
st.x += (p.x - st.x) * p.ease(6);
st.y += (p.y - st.y) * p.ease(6);
st.size += ((p.down ? 0.35 : p.hover ? 0.5 : 1) - st.size) * p.ease(10);
if (!p.reduced) st.hue = (st.hue + p.dt * 40) % 360;
const [glow, dot] = el.children as HTMLCollectionOf<HTMLElement>;
glow.style.transform = `translate(${st.x}px, ${st.y}px) scale(${st.size})`;
glow.style.filter = `hue-rotate(${st.hue}deg)`;
glow.style.opacity = String(Math.min(1, 1.3 - st.size * 0.5));
dot.style.transform = `translate(${p.x}px, ${p.y}px)`;
});
return (
<div ref={ref} aria-hidden className={`${cursorRoot} ${className}`}>
<div
className="absolute size-60 -translate-1/2 rounded-full"
style={{ background: "radial-gradient(circle, rgb(255 80 150 / 0.55), rgb(120 90 255 / 0.3) 40%, transparent 70%)" }}
/>
<div className="absolute size-1.5 -translate-1/2 rounded-full bg-current" />
</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.
- RibbonA rainbow ribbon drawn by your path. It fattens and cycles faster over anything clickable.
- ConfettiSheds confetti as you move, pops a little over each control, and throws a handful on click.
- 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