Label cursor follower

Demo

A decorative label follows a fine pointer while the real cursor and touch targets stay intact.

How it works

Hover· 8 sites

Reference: Pointer events, MDN contributors

How it works

A decorative label follows a fine pointer while the real cursor and touch targets stay intact.In 5 steps.

A small label can explain what a large media target does. Keep it decorative: never hide the operating-system pointer, never make it the only action label, and never make a finger chase it. The follower eases by elapsed time, so refresh rate does not change its weight.

The controls below are authored demonstration values, not measurements of the linked sites. The stored fits currently describe scroll smoothing and intro curves, not this effect's geometry; see each site's spec sheet for those separately measured values and fit errors.

01
Keep a real control

The artwork includes a conventional button with a persistent label. The follower is aria-hidden and pointer-events: none.
02
Gate pointer input

Only fine pointers with hover can move the label. Touch and keyboard receive the same action without a moving decoration.
03
Interpolate with time

Read the UI duration token and compute a time-correct exponential approach to the pointer. Snap the initial position so it never flies in from a corner.
04
Reset on exit

Hide on pointer leave, blur and touch; the frame loop sleeps when the follower has settled.
05
Dispose cleanly

Call destroy() on unmount to remove pointer and button listeners, disconnect observers and cancel the pending frame. This also makes development remounts safe.

Code

The code

The engine is the file the demo above runs, framework-agnostic; the Svelte and React tabs wire it into a component.

Pro

Copy the engine, React or Svelte version.

Unlock code with Pro

US$60/year or US$8/month. Cancel anytime.

Prompt

Prompt pack

A decorative label follows a fine pointer while the real cursor and touch targets stay intact.

1 prompts in Pro Generated 25 Sep 2026

Build it with a coding agentA framework-independent implementation brief with authored controls.

Pro opens every prompt, with the measured values filled in and ready to paste into your coding agent.

Unlock prompts with Pro

US$60/year or US$8/month. Cancel anytime.

Performance & accessibility

Performance

One cached pointer coordinate and one transform write while settling. Bounds are read on pointer input, never after the transform write. No global mousemove handler, cursor replacement, filter or framework rerender. The demo targets a frame budget suitable for phone displays; profile on the target device rather than treating an unloaded desktop frame counter as a guarantee. The host pauses the demo off screen. The standalone engine removes its observers and listeners on destroy.

Reduced motion

Reduced motion hides the follower, not the artwork or action. Live preference changes are respected. Touch and keyboard use the persistent button; neither starts follower motion. The operating-system cursor remains visible. The decorative label is hidden from assistive technology.

Source

Source, credited

Original teaching implementation and CSS artwork, informed by the credited Pointer events documentation and the library's linked site observations. No source site's code or assets are reproduced. A site link describes the observed visual pattern, not proof that the site uses this engine or browser API.