Reading progress of “Motion choreography systems”: 0%
Advanced · The advanced practice
Motion choreography systems
A page with forty micro-animations is a page at war with itself. The system is the antidote: one duration scale, one easing family, and a reduced-motion pass that removes the movement without removing the meaning.
Advanced1 min read (computed · recorded 4)updated 2026-09-14motionsystemschoreographyadvanced
by Motif Editors
revised 2026-09-14 — First publication in the bank completeness pass.
— A motion system is three decisions: a duration scale, an easing family, and the rule that stagger is a layout, not a flourish.
— Reduced motion is part of the system: the still branch shows the same content, never less.
— Every JS-driven motion must name its preference branch, or the audit flags it before it ships.
The system is three decisions
A coherent motion language is not a library, it is three decisions held everywhere: a duration scale (fast / standard / slow, not 137 ms and 412 ms), an easing family (one for entrances, one for exits, one for the physics of drag), and the rule that a stagger is part of the layout — its order is content, so it reads correctly even when the movement is removed.
The audit keeps the promise
This site's demo harness counts every scene that drives motion from JavaScript and fails it unless the scene names a reduced-motion branch. The audit is the enforcement arm of the system: a designer can hold the rule in their head, but only a check can hold it across a catalog of three hundred scenes.
The curves and the sampling helper are the Lab's own, so a curve picked here and a curve drawn there are the same numbers. The glyph is generated from each curve's progress at 25% and 75%, and the inspect panel prints those two samples — check the drawing against them.