Choreography is the timing plan for an interaction: which element moves first, how other elements respond, and when everything comes to rest. The aim is to turn a state change into one coherent move instead of a handful of unrelated transitions.
Exit → resize → enter, staggered by character
The demo above uses a single pill that cycles through a few strings:
- Synchronized: text opacity and container width animate together as a single tween.
- Choreographed: text exits first (dropping and fading out, staggered by character), then the container resizes to the next label, then the new text enters with the inverse move, again staggered by character.
The element and content stay constant; only the order and grouping of motion change. The implementation simply breaks the label into characters, applies staggered timing to a parent container, and uses per‑character enter and exit states to create a sequence of exit, resize, and enter.
Viewed frame by frame, choreographed motion produces a specific order of events: the text exits, the container resizes, and the new text enters. This order creates a single, continuous visual path for the eye instead of several simultaneous changes. The pattern also matches how physical systems behave, where a primary mass moves first and secondary pieces respond with delay and follow‑through. Cause and effect remain explicit, and multiple property updates are grouped into one perceived gesture rather than separate, competing transitions.
A few constraints keep this pattern predictable. Choreography defines when each part of the interface changes state, with secondary pieces acting as follow‑through rather than leading the interaction. Timing offsets stay small relative to the overall duration so the sequence remains tight. Per‑character stagger operates at the presentation layer only and does not change layout, content order, or information density.