Context label cursor

Use it for

• Galleries and case study grids where each item has one action
• Media blocks where the action (play, drag) is not obvious

Avoid

• Forms and dense product UI, where the native cursor is faster
• Items with several actions, since one word cannot describe them

How it works

Each item carries a data-cursor attribute with its word. A pointermove listener on the root finds the closest element with that attribute, writes the word into the bubble and toggles a class that grows the bubble from a 12px dot to a 68px circle with a width and height transition. The position is smoothed in a requestAnimationFrame loop that stops once it settles.

Accessibility

The native cursor is hidden only inside the demo and only for mouse and pen. The words are a visual hint; the items stay normal links with their own text. Touch users see the label briefly where they tap. Reduced motion removes the custom cursor and shows each word as a static badge on its item.