Neon
A humming neon tube that stutters now and then. Swells and switches color over anything clickable.
npx shadcn@latest add https://hoverui.fun/Adds components/cursors/neon.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 humming neon tube that trails an exact dot and stutters now and then; over anything clickable it swells and switches color.
Usage
import { NeonCursor } from "@/components/cursors/neon";
export function Section() {
return (
<section>
<NeonCursor />
{/* this section now wears Neon */}
</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 PINK = "#ff2bd6";
const CYAN = "#14d8ff";
/** A humming neon tube that trails an exact dot and stutters now and then; over anything clickable it swells and switches color. */
export function NeonCursor({ className = "" }: { className?: string }) {
const s = useRef({ x: 0, y: 0, size: 1, out: 0, wasDown: false });
const ref = useCursor((p, el) => {
const st = s.current;
st.x += (p.x - st.x) * p.ease(14);
st.y += (p.y - st.y) * p.ease(14);
st.size += ((p.down ? 0.8 : p.hover ? 1.6 : 1) - st.size) * p.ease(14);
// Now and then the tube stutters, the way old neon does; a click knocks it too.
st.out = Math.max(st.out - p.dt, 0);
if (!p.reduced && !st.out && (Math.random() < p.dt * 0.4 || (p.down && !st.wasDown))) st.out = 0.18;
st.wasDown = p.down;
const [tube, dot] = el.children as HTMLCollectionOf<HTMLElement>;
tube.style.transform = `translate(${st.x}px, ${st.y}px) scale(${st.size})`;
tube.style.opacity = String(st.out && Math.sin(st.out * 90) > 0 ? 0.25 : 1);
tube.style.color = p.hover ? CYAN : PINK;
dot.style.transform = `translate(${p.x}px, ${p.y}px)`;
});
return (
<div ref={ref} aria-hidden className={`${cursorRoot} ${className}`}>
<div
className="absolute size-8 -translate-1/2 rounded-full border-2 border-current shadow-[0_0_10px_currentColor,inset_0_0_6px_currentColor] transition-colors duration-200"
style={{ color: PINK }}
/>
<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.
- GlowA wide, soft glow drifting after the pointer through shifting color. Gathers tight 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