Action Label Cursor

Create an action-label cursor. Keep the native cursor exactly as it is. When the pointer is over an element that declares an action (via a data-label attribute, e.g. data-label="Copy prompt", data-label="View demo", data-label="Play"), a small accent-colored pill appears next to the cursor showing that label, and follows the mouse while it stays over the element. It is a cursor effect that doubles as microcopy: the user knows what a click will do before clicking. Implementation: render one fixed-position pill (border-radius: 999px, padding 4px 10px, 11px semibold text, accent background, white text, white-space: nowrap, pointer-events: none), hidden by default at opacity 0 and scale(0.7). On document mousemove, check event.target.closest('[data-label]'): if found, set the pill's text from the attribute, position it at clientX + 14 / clientY + 14, and show it with opacity 1 over 180ms plus a spring-flavored scale to 1 using transition transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1). If not found, fade back to opacity 0 and scale(0.7). Flip the pill to the left of the cursor when within 120px of the right viewport edge so it never clips. Accessibility: the pill is aria-hidden (the same action must also be conveyed by the element's own accessible name); gate behind (hover: hover) and (pointer: fine); under prefers-reduced-motion show/hide with opacity only, no scale. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.