Seven verbs, six timings and three easings. A surface in this console moves in one of seven ways. Each of the seven has one implementation, used everywhere, so a reader who has watched a row arrive already knows what a panel will do. This page draws every timing to scale before you trigger it.
Six durations, not a free number. Three for arriving and three for leaving, and the two sets differ on purpose. An entrance introduces something and can afford the reader watching it. An exit happens after the reader has moved on. An exit that mirrors its entrance feels slow to dismiss.
Drawn against a 320 ms domain
Arriving
Leaving
No exit may exceed 250 ms. The token generator refuses a longer value and the system gate proves it, so the ceiling is enforced where the tokens live rather than reviewed on each screen.
Three easings carry every one of them: ease-out for an
arrival, ease-in for a departure, and
ease-standard for a change that happens in place. The
browser keywords are absent on purpose. ease and
ease-in-out are what a curve looks like when nobody chose
one, and the gate fails a layer that reaches for them.
Each of these has exactly one implementation. A component that invents a second way to collapse something has meant one of these verbs and spelled it differently, and the reader pays for the difference.
Something arrived and you did not put it there. Opacity from zero, with a 4 px rise so it reads as settling rather than appearing.
200 ms enter‑base ease‑out
Something left. Opacity to zero with 2 px of drop, half the travel of the entrance, and shorter, because you have already stopped looking at it.
160 ms exit‑base ease‑in
One element, two timings. It opens at the entrance rung and closes
at the exit rung, on the element's own block-size, so
nothing has to measure a height in script.
200 ms open 160 ms close
The district reads its board agenda into the register two weeks ahead. Their engineer asked for the response in writing. Nobody has priced the second phase.
The tick arrives under whatever is current: a tab, a destination in the rail, the column a table sorts on. It is the fastest rung in the set, because selection is something you do constantly and a slow answer reads as lag.
120 ms enter‑fast, leaving at 90 ms
38 rows.
6 rows.
130 rows.
Hover, focus and press are one layer at three opacities, over the control's own colour. Press is instant: feedback that arrives after the finger has lifted is not feedback. Put a pointer on Add a prospect, then tab to it, then hold it down.
120 ms in, 90 ms out, 0 ms pressed
The third control does nothing, and says so without moving.
Navigation narrows to its icons and widens back. The labels leave before the track closes and arrive after it opens, so the words never sit in a column too narrow to hold them.
200 ms widening 160 ms narrowing
The work area keeps every column it had.
A sheet rising is the eighth verb and belongs to the Field layer, which this page does not load. It enters at 200 ms and leaves at 160 ms, and returns focus to whatever opened it.
How often somebody triggers a verb decides its rung. How the animation looks the first time decides nothing. Cost compounds and delight does not: an animation is judged once and lived a thousand times.
More than 20 times a session
Row selection, hover, a keystroke. 120 ms, and ideally no movement at all. Colour only.
Five to twenty times a session
Opening a menu, switching a tab, expanding a row. 200 ms, functional easing, nothing springy.
One to five times a session
Moving between destinations, a dialog, a list opening into a record. 320 ms, and this is where the good one goes.
Do the arithmetic when the choice is close. A 400 ms transition on an action somebody takes 40 times a day costs 16 seconds a day, which is about 1.6 hours a year per person. That is a real budget, and it should buy something.
The corollary catches most consoles: the more central an action is to the work, the less it should move. The thing a person does all day is the thing that should be instant.
Four animations built correctly and spent on an event that cannot carry them. Each pair runs the same event twice. Once misapplied, then once as this system specifies it.
Counting a figure up to its value makes it unreadable for the whole duration and slightly inaccurate for most of it. A person reading a pipeline total is reading it to act on it.
The same refresh, set in one frame.
Overshoot reads as cheerful, and there is nothing cheerful here. The damped entrance is the ordinary enter verb, and it is the correct answer even in a product that is expressive elsewhere.
A staggered entrance looks considered in a review and costs half a second on every navigation for the life of the product. Static content that was always going to be there does not need an entrance.
The same three, already there.
This one is not doctrine. This firm shipped a moving entrance on its own marketing pages four times, at 32, then 48, then 64 px of travel, at 1000, 800, 700 and 900 ms, on two different curves, and the owner reported every version as arriving in place. Each one measured as running correctly. The cause is not the duration or the curve: an element entering on a page the reader is already scrolling has to compete with the scroll, which moves the same element further and faster in the same moment. A fade has nothing to compete with, because opacity is the one channel scrolling does not already use.
Both run 600 ms. The ceiling on that number is the scroll rather than taste: measured at 600 px per second in a 567 px viewport, an 800 ms fade started with the card at 53% of the screen and finished with it a third of a screen past the top edge, so it was never once fully opaque while the reader could see it. A fade longer than an element's time on screen is not a slower reveal, it is an invisible one.
Two more belong on this list and are hard to stage: an error message that shakes before it can be read, and a scroll-triggered reveal inside a working tool. Both delay the one thing the reader came for.
Every value in this table was read out of the system's own published package by its generator, listed underneath. Three of the four separate their entrances from their exits and give the exit the shorter one; the numbers differ and the reasoning does not.
| System | Entrance | Exit | Longest published | Reduced motion |
|---|---|---|---|---|
| Centauri | 200 ms, ease-out | 160 ms, ease-in | 320 ms entrance | 0.01 ms, shortened |
| Carbon | entrance-productive | exit-productive | 700 ms, slow-02 | 1 ms, shortened |
| Primer | 300 ms, ease-out | 200 ms, ease-in | 1000 ms base step | — |
| Material 3 | 317 ms spatial | 231 ms effects | 599 ms spatial-slow | — |
Two things worth carrying away. Carbon reaches 700 ms
in its expressive set, which is longer than anything this console
permits at all, because a system's ceiling belongs to the kind of product it
serves, and a number copied between systems carries the half that cannot
travel. And Carbon shortens to 1 ms rather than removing, which is
the same conclusion Centauri reached separately: a transition set to
none never fires its completion event, and whatever was
waiting on that event stays on the screen.
Where a cell in that table shows an em dash, the system publishes no reduced-motion behaviour in its tokens. It is a gap in the token set rather than a decision, and a product on that system owes the answer itself.
carbon_tokens.py --motion
primer_tokens.py --scales
md3_spring_css.py --table
centauri_tokens.py --listconsole profile, unchanged: 11 / 12 / 13 / 14 px,
28 px controls. Touch targets expand to 44 px on a coarse
pointer, and no visual dimension moves with them.@carbon/motion, @primer/primitives and
Material 3's spring tokens, through the three generators this page names.
Nobody wrote a timing on this page from memory.linear, which this system's
gate refuses inside a layer. Both are deliberate: that specimen is a
marketing surface's motion rather than a console verb, and linear is
the point of it, because a fade is the one property a reader is meant to
watch, and every eased curve spends most of its opacity in the first
third. Measured on this firm's own pages: ease-out
reaches 0.75 opacity in 108 ms.muted on surface at 11 px is 6.84:1
light and 8.43:1 dark; prose on surface at
13 px is 12.17:1 light and 13.98:1 dark.