Motion Grammar for Humane Interfaces

Motion is part of what an interface says. If every component picks its own timing, the interface talks over itself; if nothing moves, changes of state arrive without warning. A motion grammar is a small set of durations and springs that everything draws from.

Rhythm

I sort motion into three tiers. Immediate feedback, like a press or a toggle, takes 100–180ms. A change of state, like a row opening, takes 220–320ms. A large move, like a sheet or a page, takes 350–500ms.

What It Looks Like Here

On this site the grammar lives in one file: duration tokens of 100, 150, 250 and 400ms for everyday work, 600ms kept for rare large moves, and six named springs. A button press uses snappy; content arriving as you scroll uses gentle. Most components start from a token. The exceptions are tuned by hand on purpose: the studies on the Craft page exaggerate their springs so the behavior is easy to see, and the project rows use the timed curve described in the first essay.

Three Rules

1. Every animation has a job: feedback, orientation or continuity. If it has none, it goes.
2. Related changes move alike: the same kind of change gets the same token.
3. Reduced motion is respected: with it on, movement and stagger are removed and only opacity still fades.