Speed1×
Slow motion multiplier
Reduced motion
Show
Against the published page
1 reversals1 reversals3 extensions2 alignedSeverity is about the document, not the code: a reversal means the published page has to change before the proposal is legitimate.
Exit optional
overreachMovement PrinciplesPublished today — Movement Principles
“Not everything needs an animated exit. Elements the user is moving away from, such as tooltips, hover cards, and dropdown menus, can disappear instantly. The user has already shifted their attention. Animate the exit only when it helps orient the user, like a panel closing or a dialog dismissing to reveal what’s underneath.”
Tooltip content
Proposed in the brief
“Presence surfaces animate both directions. A surface that animates in and vanishes out fails. (Rubric criterion 7, Blocker for overlays.)”
Tooltip content
ReadingThe eleven layer components are not drift. They are the published guidance, correctly followed — and it names tooltips, hover cards and dropdown menus specifically, which is most of the list. This is also the one conflict the sources settle: Emil’s guidance, which the brief cites as a reference, says high-frequency UI often should not animate its exit at all. Both sources agree with the page; neither supports the criterion.
ResolutionNarrow the criterion rather than rewrite the paragraph. An exit is warranted when it aids orientation — a panel closing, a dialog revealing what was underneath — and is not warranted on a surface the user has already looked away from. The published paragraph mostly stands; what it lacks is the direction rule, which is the next conflict.
Exit shorter
overreachMovement PrinciplesPublished today — Movement Principles
“The page says nothing about exit duration. It asks only that the exit match the entrance.”
Proposed in the brief
“--duration-exit is 175ms against --duration-enter at 230ms: every exit is shorter than every entrance, by construction.”
ReadingThe token mapping encodes a universal law and the sources do not carry one. beUI states it plainly — "let old content leave faster than new content arrives" — but Emil argues asymmetric timing around deliberate actions versus system responses, a distinction the brief drops. A dismissal the user deliberately triggered and is watching is not the same as one the system performs on their behalf, and only the second clearly wants to be quick.
ResolutionKeep both tokens — the values are good defaults — but stop asserting the ratio as a rule. Name which dismissals are system responses (a toast expiring, a menu closing after a pick) and which are deliberate (a dialog the user chose to close), and let the second kind reach for --duration-enter without failing a review.
Reduced motion delete
reversalRespecting User PreferencesPublished today — Respecting User Preferences
“When it’s enabled, replace animations with instant state changes.”
Delete: every loop stops. What the published page instructs — and a spinner that does not spin says nothing at all unless it is replaced with a determinate state.
Proposed in the brief
“Honoured, and degraded rather than deleted. Keep opacity and colour, drop movement and position change. (Rubric criterion 10, Blocker.)”
Degrade: loops stop and are replaced with a static determinate state. Opacity and colour feedback survive; movement does not.
ReadingDeleting motion is not an oversight in the components either — it is what the page instructs. The open question in the brief already asks degrade-or-delete; what the brief does not say is that "delete" is the currently published answer, so degrading is a change of policy rather than a fix.
ResolutionNeeds a designer and accessibility sign-off, then a rewrite of this paragraph. The 39-file sweep writes whichever branch is chosen 39 times, so it cannot start first.
Exit matches entrance
extensionMovement PrinciplesPublished today — Movement Principles
“When you do animate exit, match the entrance. A panel that slides in from the right should slide back out to the right.”
Proposed in the brief
“The exit retraces the entry path and is no slower than it, on the exit curve rather than the entry curve.”
ReadingThe strongest rule in the proposal, and the only exit claim both sources state outright — the page says match the entrance, Emil says exit the way it entered. It survives the narrowing criterion 7 needs: whenever an exit IS animated, this governs it. The proposal adds the part the page leaves out, the curve — matching the entrance exactly is what produced the sheet’s measured problem, where a decelerate curve spent the travel in the first 59ms of a 410ms close.
ResolutionExtend the paragraph rather than replace it: same path, opposite curve. Leave duration out of it — see the exit-timing conflict.
Trigger anchored
alignedMovement PrinciplesPublished today — Movement Principles
“Contextual UI should feel connected to its trigger. A dropdown should expand from the button that opened it. A popover should appear near the element it describes. This doesn’t apply to global UI like command palettes or toasts, which have their own fixed positions.”
Proposed in the brief
“Trigger-anchored surfaces scale from their trigger, not their centre. Modals are exempt. (Rubric criterion 8.)”
ReadingThe same rule, and the page already carries the exemption the rubric needs. Criterion 8 can cite this paragraph instead of re-arguing it.
ResolutionNo change needed. Cite the published text in the rubric.
Frequency
alignedWhere Motion HurtsPublished today — Where Motion Hurts
“Table row hovers. List item highlights. Anything the user does dozens of times per minute. Adding perceptible duration to these interactions makes the interface feel like it’s catching up to the cursor.”
Proposed in the brief
“Motion is scaled to how often it is seen. Keyboard-initiated and 100+/day actions get none. (Rubric criterion 2, Blocker.)”
ReadingAligned, and the page is the stronger statement of the two because it names the surfaces. Worth noting against the nine hardcoded 150ms values in Table: those are on exactly the interaction this paragraph is about, so the sweep should ask whether they want a token or want deleting.
ResolutionNo change needed. The rubric formalises what the page already says.
Direction
extensionMovement PrinciplesPublished today — Movement Principles
“Direction should match the action. Navigating deeper into content should feel like moving forward. Going back should feel like returning. This keeps the user oriented in the structure of the application.”
Proposed in the brief
“Nothing in the twelve criteria covers directionality.”
ReadingA published principle the rubric drops on the floor. It is the rule Pagination and Calendar month-change would be measured against, and both are listed as gaps in the audit with no criterion to fail.
ResolutionAdd a directionality criterion, or fold it into criterion 4 (semantic correctness) so the rubric is a superset of the published guidance rather than a divergent list.
Blocking
extensionWhere Motion HurtsPublished today — Where Motion Hurts
“Animations that block interaction are worse. If a user has to wait for a panel to finish sliding before they can click something inside it, the animation has become an obstacle.”
Proposed in the brief
“Stagger must never block interaction; and useLayer awaits its exit transition rather than hiding synchronously.”
ReadingThis is the paragraph the exit work has to be careful about. Keeping an element alive through its exit is exactly the shape of thing this warns against, and the answer has to be that the surface stops accepting input the moment dismissal starts, not when the animation ends.
ResolutionWrite the input-during-exit rule into the presence primitive’s contract, and cite this paragraph when doing it.
Where the exit rules come from
Two of the conflicts above are marked overreach rather than reversal, which is a claim about evidence and so it should show its working. The brief cites Emil Kowalski’s animation guidance and beUI as references, so those are the standard it can be held to. Read against them the word “exit” comes apart into two rules with very different support.An exit should retrace the entrance path.
Astryx, Movement Principles“When you do animate exit, match the entrance. A panel that slides in from the right should slide back out to the right.”
Emil Kowalski, animation guidance“Exit the way it entered.”
Unanimous, and the published page already says it. This half of the rule is safe to enforce.An exit should be shorter than its entrance.
beUI, motion guidance“Let old content leave faster than new content arrives.”
Emil Kowalski, animation guidance“Asymmetric timing, argued around deliberate actions versus system responses — not as a universal rule.”
One source states it plainly; the other scopes it to a distinction the brief drops. Nothing supports it as a law that applies to every exit, which is how the token mapping encodes it.Every presence surface should animate out.
Emil Kowalski, animation guidance“High-frequency UI often should not animate its exit at all.”
Astryx, Movement Principles“Elements the user is moving away from — tooltips, hover cards, and dropdown menus — can disappear instantly. The user has already shifted their attention.”
Both sources say the opposite of the proposal, and one of them is the brief’s own reference. Criterion 7 as written is not supported by anything cited.Scope of the doc rewrite
6 of the 8 sections of the live page need something. Two of them are the reversals above and cannot be deferred: the rubric has no authority while the page contradicts it. The rest are additions — the page is accurate about what exists, and silent about how to choose.| Section | What it says today | Scope | Note |
|---|---|---|---|
| Overview | Why motion, in two sentences: comprehension and craft. | No change | — |
| Duration | The nine primitives, as a table of token and value. Three bands, min/max derived from base x ratio. | Add to | Accurate, and it is the whole of what the page says about choosing one. No job is named against any token, which is the gap the semantic layer fills. |
| Easing | One row: --ease-standard, cubic-bezier(0.24, 1, 0.4, 1). | Add to | Accurate. The page cannot say what the curve is for, because it is for everything. |
| Where Motion Helps / Hurts | Prose guidance on which surfaces earn motion and which are hurt by it. | No change | — |
| Movement Principles | Four bullets: exits are optional, match the entrance, direction matches the action, contextual UI connects to its trigger. | Add to | Bullet one is the reason for eleven of the audit’s findings. Rewriting it is the load-bearing doc change in this project. |
| Respecting User Preferences | Honour the OS setting; replace animations with instant changes. | Rewrite | Says delete. The proposal says degrade. One of the two has to move. |
| Usage | A StyleX snippet applying durationVars and easeVars. | Add to | Still correct, and worth keeping verbatim: it is the shape the lint rule will enforce. |
| Best Practices | Three dos and three donts. | Add to | No mention of the transform-only rule, the compositor cost, or interruptibility — all of which live only on the wiki today. |