One shape, many lives

Build 'One shape, many lives' for an invented Sampleton Motion Studio. One drawn body becomes a button, loader, toggle, player, chart, search panel and toast across a 21 second sequence. Interpolate its width, height, corner radius and colour; choreograph each state's own content and a drawn cursor around those changes. These are illustrative interface states, not a real search or music service. Add Choreography scrubbing, Jump to state, Next shape, Run the sequence, Play, Pause, Reset and a PNG keep. A stage tap may advance to the next shape, with a native button offering the same action. Fit the complete body inside the popup and full page without cropping, keep text at least 12px and allow narrow layouts to scroll. Reduced motion starts on a still state. Optional transition tones start off, use the site's audio helpers and close on leaving the plate.

1. Define seven geometry and colour keyframes, three seconds apart, and interpolate between each body near the end of its interval.
2. Draw each state's contents relative to that body's centre and dimensions. Keep the state selector and scrub value in sync with automatic playback.
3. Switch to manual timeline mode when the visitor scrubs, selects a state or requests the next shape. Preserve backward scrubbing rather than chaining irreversible effects.
4. Fit the full composition to the available canvas, keep the controls in the plate's usual positions, and export the held state as a PNG.
5. Freeze time on Pause and under reduced motion, but redraw direct edits. Remove the stage tap listener and close opt in sound when the plate is destroyed.