Copy to Clipboard
A code chip whose copy button morphs to a check with a popping tooltip
npm i acme-uiCreate a copy-to-clipboard button with feedback. A dark ink code chip (monospace text, e.g. 'npm i acme-ui') with a copy button on its trailing edge, separated by a faint divider line. Clicking it writes the text to the clipboard (navigator.clipboard.writeText wrapped in try/catch) and plays the confirmation: the clipboard icon morphs to a check - the old icon swaps out and the check springs in from 40% scale with a -40deg rotation (spring stiffness 520, damping 20) - the button's color tints to the accent, and a small accent tooltip pill ('Copied!') pops up above the button (spring from 80% scale and 6px down, stiffness 480, damping 24). Everything reverts after 1.5s; re-clicking during that window restarts the timer instead of stacking states. The pressed button squashes to 88% for tactile feedback. Accessibility: the button's aria-label switches between 'Copy to clipboard' and 'Copied', announced via aria-live="polite"; the tooltip itself is aria-hidden since the live label already announces the state. If prefers-reduced-motion is set, swap the icon and show the tooltip instantly with no springs. 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.