Motion is information
The instinct, when learning a design system, is to treat motion as decoration: little flourishes that make the interface feel "alive." This is the wrong frame. Motion is information. It tells the user three specific things — what is changing, where it came from, and how it relates to what was there before — and it does this faster than text or color can.
A modal that fades in conveys hierarchy: it is above the page; it took over focus; the page is still there underneath. A modal that snaps in instantly conveys none of that. The user has to figure out the new state from layout alone. The fade is not aesthetic; it is bandwidth.
A toast that slides in from the bottom-right conveys causality: it came from an action you just performed; it is transient; it will leave the same way it arrived. A toast that pops in place conveys "system message of unknown origin." Different motion, different information.
A page that transitions with a brief cross-fade between routes conveys continuity: this is still the same site; the chrome you were looking at is still here; only the content changed. A hard cut conveys "new tab" — a different mental model entirely.
Three jobs motion does
Every motion in this system has to earn its keep by doing one of three jobs. If it does none of them, it is decoration and it gets cut.
1. Hierarchy
Motion conveys which layer of the interface you are operating on. The
elevation tokens (--ds-shadow-1 through
--ds-shadow-5) give static depth; transitions on appear/dismiss
give the layer change a verb. A dropdown drops down. A toast
slides in from below. A modal fades up. The direction is part of the
information.
2. Causality
Motion connects the click to the result. When a user presses a "Save" button and a green toast appears at the bottom of the screen with no animation, they cannot tell whether the toast is from their click or from something else. With even a 200ms slide, the connection is automatic. The toast came from the button. They caused it. They can move on.
3. Continuity
Motion smooths transitions between states. Page transitions, list re-orderings, expand/collapse — all benefit from continuity-motion that shows the user where things went. Without it, the user has to re-orient after every change. With it, the brain tracks the moving objects and arrives at the new state already oriented.
What gets cut
Anything that does not do one of those three jobs is decoration and gets cut. Specifically, these are out:
- Hover wiggles on cards. A card that animates on hover purely because "it feels alive" pulls attention without paying for it.
- Infinite-loop background gradients. Drains battery, drains attention, conveys nothing.
- Auto-rotating carousels. User did not initiate; user does not control; user gets motion-sick.
- Stagger-everything reveals on scroll. The first time it is novel; the tenth time it is friction. Reveal once per first-paint; never again.
- Parallax on the entire viewport. The reading surface stays still. Parallax breaks the contract that words are where you left them.
The reduced-motion contract
The other half of "earning its keep" is graceful degradation. Motion that is necessary in the default case must still convey its information when motion is off. The Week-5 contract makes this enforceable.
Every transition reads from the motion-token layer:
--ds-motion-duration-fast, --ds-motion-duration-base,
--ds-motion-easing-standard, and the rest. The duration tokens
are wired up so that when the user's OS has
prefers-reduced-motion: reduce set, the tokens themselves
resolve to zero. Every component picks up the change automatically — no
per-component opt-in, no missed transitions.
The contract:
- Components must use
--ds-motion-*tokens for every transition. - Components must not rely on the animation completing for state to be correct. The final state must be valid the instant the user takes the action.
- Decorative motion that cannot survive duration-zero gets the
data-motion="decorative"attribute and is removed wholesale under reduced-motion. - Continuity motion (page transitions, list re-orderings) drops to instant under reduced-motion. The user gets a hard cut; the system does not lie about what happened.
What this commits us to
Every new transition arrives with a written justification. Reviewers ask: which of the three jobs? If none, the PR gets re-scoped. We do not ship motion because it "feels right" — we ship motion because it conveys information that the user otherwise has to infer.
Operationally, the Reveal, Stagger, and PageTransition primitives ship
with reduced-motion behavior baked in, so a careless engineer cannot
accidentally violate the contract. They use data-motion
attributes the global rule reads. Adding new motion-bearing components
goes through the same primitives.
The payoff is that motion in this system is trustworthy. When a user sees a transition, they can assume it means something. When they have asked for reduced motion, they can assume the system honored them. Both assumptions are rare enough on the web that satisfying them is itself a competitive advantage.
Motion is not free. Battery, attention, and accessibility all pay for it. The system makes us pay attention to the bill — and removes anything that does not earn the cost.