Play Morph

Create a play/pause morph button. A large round button whose icon MORPHS between play and pause rather than swapping: draw the play triangle as two SVG polygons (left body and right tip) and animate each path's d attribute to the corresponding pause bar (350ms, easing cubic-bezier(0.22, 1, 0.36, 1)), so the triangle visibly splits and straightens into two bars, and reverses on pause. Keep both shapes' point counts identical so the interpolation is smooth. State styling: paused shows an accent button with white icon; playing inverts to an ink button with accent icon (background transition 350ms) and emits a soft repeating pulse (box-shadow ring expanding from 0 to 16px of accent at 35% opacity fading to 0, 1.4s loop). Hover scales to 106%, press to 92%. A small monospace status line below flips between "paused" and "now playing". Accessibility: the button uses aria-pressed and swaps aria-label between Play and Pause; the status line is aria-live="polite". If prefers-reduced-motion is set, swap icons instantly and skip the pulse. 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.