Cursor Text Label Effect — HTML CSS JS Snippet

Direct assignment produces a cursor glued to the pointer — technically fine, but visually identical to the native cursor and prone to jitter, since mousemove events fire at input-device rate (often 125–1000Hz) out of sync with display refresh. The target/rendered split fixes both: mousemove merely records intent (tx, ty), and a requestAnimationFrame loop — locked to the display — moves the rendered position a fixed fraction of the remaining distance each frame. That exponential approach curve is what reads as elasticity: the gap grows during fast movement (the trail) and closes smoothly at rest, with the EASE fraction controlling the time constant. It also creates the architecture bonus the how-to exploits: because everything downstream works on targets, effects like magnetic attraction or freeze-on-zone are two-line interceptions of the target rather than rewrites of the render path.

On touch there is no persistent pointer, so a custom cursor is meaningless — worse, cursor: none left active would suppress nothing (no cursor exists) while the follower element could still flash at its last position. Two complementary queries handle the two halves: @media (hover: none), (pointer: coarse) hides the follower element entirely, and — the half most implementations forget — the cursor: none suppression is itself wrapped in the positive @media (hover: hover) and (pointer: fine), so touch, stylus, and hybrid users keep fully native cursor behaviour rather than inheriting cursor: none from a stylesheet written for mice. Hybrid devices (Surface, iPad with trackpad) resolve per the active input: the queries re-evaluate when a trackpad attaches. The interaction remains functional throughout because the follower is decorative — zones are still real links and draggable regions with native semantics underneath.

The follower itself is aria-hidden decoration with pointer-events: none — screen readers and keyboards never encounter it. The accessibility risks are in what implementations remove around it, and this snippet deliberately removes nothing: keyboard focus outlines stay (keyboard users never see the cursor, so suppressing :focus-visible styling to "match the aesthetic" is pure harm); zones remain semantic elements (the Visit zone is a real <a>, the gallery a real scrollable region), so the cursor label supplements rather than replaces affordance; and the native cursor is only hidden where the replacement is guaranteed present. Two additions worth making in production: honour prefers-reduced-motion by snapping EASE to 1 (position still follows, elasticity removed), and ensure any information the label conveys ("Play", "Drag") is also available non-cursor ways — visible on focus, or implicit in the element's role — since the label is invisible to keyboard and touch users by design.

React: create the follower once in a component mounted at the app root; run the rAF loop inside useEffect (returning cancelAnimationFrame cleanup), and keep tx/ty/x/y in refs — routing them through useState would schedule 60 renders per second for an element React doesn't need to reconcile. Zone state can stay delegated exactly as in the vanilla version (one document listener in the same effect), which conveniently keeps it working across route changes without per-component wiring; alternatively expose a useCursorLabel(label) hook that sets data-cursor via a ref for component-scoped ergonomics. Angular: a CursorDirective with @HostListener is tempting but per-element; better is a singleton service starting the rAF loop outside the zone (NgZone.runOutsideAngular — critical, or change detection runs per frame) with the delegated listener, plus an optional [cursorLabel] attribute directive that just writes the data attribute. Tailwind: the follower is fixed left-0 top-0 z-[999] size-3 bg-slate-100 rounded-full pointer-events-none -translate-x-1/2 -translate-y-1/2 transition-[width,height,background] with the pill state as data-[text]:w-auto data-[text]:h-8 data-[text]:px-3, per-zone colours as data-[style=drag]:bg-indigo-500 — only the back-eased timing function needs an arbitrary value or config entry.