Fluent Flex · Chapter 07
Motion
Motion is a functional layer, not decoration: it explains what changed, why, and where to look next, and for AI it shows work happening without pretending to think. Underneath is a small shared vocabulary, a scalar duration scale and a set of easing curves named by intent, so every transition draws from one system rather than being hand-authored per component.
6
Duration steps, ~50ms to a full second on a scalar scale
2
Easing intents: functional for utility, expressive for brand moments
4
Easing patterns: enter, exit, transition, linear
Why it matters
Motion Explains Change
Motion is a functional layer of the system, not decoration. Good motion answers three questions: what changed, why it changed, and where to look next. It reduces cognitive load, preserves orientation, and confirms that an action landed.
In AI experiences it does more. Motion shows progress, distinguishes new content from the stable context around it, and marks when generation, refinement, or completion happens, describing system activity without implying emotion or human thought.
And it only works against stillness. Navigation, headers, and surrounding content usually hold still so the one thing that moves is the thing that changed. The guiding feel is calm over attention-seeking, purposeful over decorative, clear over clever.
The system
Duration and Easing
Motion runs on a small shared vocabulary, so no component hand-authors its own transitions. Two questions, two answers.
Duration decides how long a change takes. It is a scalar scale from a near-instant tick up to a full second, and the rule is proportional: the more of the screen a change moves, the more time it earns. A press state is quick; a full-page transition is not.
Easing decides how a change accelerates and settles, named for the moment it is in. Enter decelerates, so arriving content lands rather than slams. Exit accelerates, so leaving content commits and gets out of the way. Transition eases both ends for movement that stays on screen. Linear holds a constant rate for time-proportional things like a progress bar.
Each dot travels on its real token curve. Watch the ends: Enter coasts to a stop, Exit lunges away, Transition softens both sides, Linear never changes pace. Motion pauses if your system prefers reduced motion.
Easing ships in two intents, functional for everyday utility and expressive for brand moments. They share curves today; the split is a reserved seam, so expressive motion can diverge later without renaming a single reference. Linear is functional only, because a constant rate carries no expressive tone.
Accessibility
Reduced Motion Is a First-Class Path
Because timing and easing run through named tokens rather than inline transitions, a reduced-motion preference is honored in one place instead of audited per component. When someone asks their system to minimize motion, transitions collapse to a near-instant cross-fade rather than travel, everywhere at once. The demo above respects it: with reduced motion on, the dots hold still.
Collaboration
How This Came Together
This one was mostly the team's craft. I oversaw and consulted, and I brought the motion tokens into Figma.
Looking ahead
What's Next
- Duration tiers and intent-named easing are AI-inferable: a model maps 'a dialog opening' to the right tier and 'entering' to the right curve without control points.
- The functional and expressive split is a reserved seam: expressive curves can diverge for brand moments without renaming references or forking the set.
- Routing all motion through tokens keeps reduced-motion a single system-wide switch, so accessibility holds by construction.