Speed

Slow motion multiplier

1×

Reduced motion

Show

Rubric bench

12 criteria

Twelve criteria, each with a pass and a fail you can watch. Astryx already gates lab-to-core promotion on an accessibility checklist; motion works the same way or it does not work at all — published, graded per component, tracked.Decide here: Whether each criterion is checkable, and what a pass and a fail look like.

How it grades

No open blockers, and at most two open "should fix" items. Polish items are recorded and never block.

Severity	What it means	Effect on the gate
Blocker	The motion is wrong in a way that costs comprehension, accessibility or frame rate.	Open blockers fail the review. No exceptions, no "fix it in the follow-up".
Should fix	The motion works but is not what the system would do.	Two open items are tolerated. A third fails, so the debt cannot accumulate quietly.
Polish	A judgement call about feel, where reasonable people differ.	Recorded, never blocking. Argue it in the review, not in the gate.

Blockers: 6 of 12. Mechanical today: 4. A component with two open should-fix items still passes; a third stops it, which is what keeps the second one from becoming permanent.

The twelve

1. Justified motion

BlockerHuman judgement

Every animation names its purpose: orientation, continuity, feedback or attention.

PassesThe reason survives the question "what breaks if we delete it?".

Fails"It looks good" on an element the user sees dozens of times a day.

Checked by: Reviewer. The justification is written in the diff, not inferred from it.Measured: Deleting the animation is a valid outcome of this criterion, and on a high-frequency surface it is usually the strongest fix available.

2. Frequency-appropriate

BlockerHuman judgementAlready published

Motion is scaled to frequency. Keyboard-initiated actions and anything seen 100+ times a day get none.

PassesA checkbox tick, a table row hover and a menu keyboard traversal are instant.

FailsA 200ms draw-on tick, on a control used forty times in a form.

Checked by: Reviewer, against how often the surface is actually seen. No tool knows that.Measured: 8 of the measured hardcoded values are 150ms tints in Table, on exactly the interaction that paragraph warns about.Cites the published Motion page: The published page already names table row hovers and list item highlights under "Where Motion Hurts". The rubric formalises it; it does not invent it. See the conflicts

Fails — a tick that draws itself, on a control used forty times in a form

Draws along its path

Passes — instant, because this is a 100+/day interaction

Appears instantly

3. Token fidelity

BlockerMechanical today

No hardcoded durations, delays or curves. No transitionProperty without a duration. No duration without a declared curve.

PassesEvery value is a token, and the pair is complete.

FailstransitionDuration: '150ms', or a duration with the curve left to the CSS default.

Checked by: Lint. Reads the StyleX rule object; no runtime, no reviewer.Measured: Every hardcoded duration and curve, every duration with no declared curve, and every transitionProperty with no duration. 13 of the hardcoded values are the 0.01s reduced-motion escape, which needs an allowlist rather than a fix. See /motion/violations for the live counts.

4. Semantic correctness

Should fixPartly — lint narrows it, a human decides

Entry decelerates. Exit accelerates. Movement uses the move curve. Continuous motion is linear.

Passes--duration-exit with --ease-exit: the surface leaves and gets out of the way.

Fails--duration-exit with --ease-entry: an exit that spends its travel in the first frames and then hangs.

Checked by: Lint can check the pairing once semantic tokens exist. Whether a surface is entering or leaving is a reviewer call.

Fails — exit duration on the entry curve

Passes — exit duration on the exit curve

5. Duration budget

Should fixMechanical today

Interface motion stays under 300ms. Overlays may reach 500ms.

PassesEnter at 230ms, overlay at 410ms.

FailsA 600ms hover, or an 800ms dialog that has to be sat through before the first click.

Checked by: Lint, against the token values. Arithmetic, not taste.

--duration-enter

230ms

Inside the interface budget

6. Compositor-only

BlockerPartly — lint narrows it, a human decides

Animate transform and opacity. clip-path is sanctioned; height is tolerated for disclosure only; transition: all is never acceptable.

PassesA marker that moves with translateY and scaleY, so the list never re-lays-out.

FailsAnimating top and height on a list marker, which runs layout for the whole list every frame.

Checked by: Lint reads the animated property list. Whether the surface is large enough for it to matter is a reviewer call. Blocker on large surfaces — lists, tables, sheets. Should fix on a single small element.Measured: transition: all is measured at 0 sites today. The rule is a guard against regression, not a cleanup.

Fails — animates top and height

Animates top and height, so every frame runs layout, paint and composite for the whole list.

Passes — transform only

Animates transform only, using scaleY on a 1px marker. Compositor-only, so the list never re-lays-out.

7. Enter and exit

BlockerPartly — lint narrows it, a human decidesReverses published guidance

Presence surfaces animate both directions. The exit retraces the entry path and is no slower than it.

PassesA panel that slides in from the right slides back out to the right, faster, on the exit curve.

FailsA surface that animates in and is removed on the next frame.

Checked by: Lint can see whether a component only ever transitions on mount. Whether the exit retraces the entry needs eyes. Blocker for overlays and presence surfaces.Contradicts the published Motion page: This criterion contradicts the published page, which tells authors that tooltips, hover cards and dropdown menus can disappear instantly. Eleven components followed that instruction. The rubric cannot gate on this until the paragraph is rewritten. See the conflicts

Fails the criterion — and follows the published page

No exit at all

Passes — exit retraces the entry, faster

Exits on --duration-exit

8. Origin and physicality

Should fixPartly — lint narrows it, a human decidesAlready published

Trigger-anchored surfaces scale from their trigger, not their centre. Modals are exempt. Never scale(0): start between 0.9 and 0.97 with opacity.

PassesA menu growing out of the corner of the button that opened it.

Failsscale(0) — nothing in the physical world appears from nothing.

Checked by: Lint catches scale(0) and a missing transform-origin. Whether the origin matches the trigger needs eyes.Cites the published Motion page: The published page already says contextual UI should feel connected to its trigger, and already carries the exemption for global UI. This criterion can cite it rather than re-argue it. See the conflicts

Fails — scale(0)

scale(0) — appears from nothing

Nothing in the real world appears from nothing. Start from 0.9–0.97 with opacity instead.

Half right — 0.94, wrong origin

Scales from its own centre

Right scale value, wrong origin: the surface grows out of its own middle rather than out of the control that opened it.

Passes — anchored to the trigger

Scales from the trigger corner

Anchored to the trigger corner, which is what the published page already asks for.

9. Interruptibility

Should fixPartly — lint narrows it, a human decides

Transitions and springs retarget from the current value. Keyframes restart from zero and fail this.

PassesInterrupt the travel and the element continues from where it is.

FailsInterrupt it and the element teleports back to the start before running again.

Checked by: Lint can flag a keyframe driving a state change. Judging the interrupted feel needs the demo.

Fails — a keyframe restarts from zero

A keyframe restarts from zero. Interrupt it mid-flight and the box teleports back to the start before running again.

Passes — a transition retargets

A transition retargets from wherever the box currently is, so an interruption is continuous. Springs behave the same way and also carry velocity through.

10. Reduced motion

BlockerMechanical todayReverses published guidance

Honoured, and degraded rather than deleted: movement and position change go, opacity and colour stay. Hover motion is gated behind a fine pointer, since touch fires a hover on tap. Continuous loops stop rather than slow down.

PassesThe loop stops and is replaced by a determinate state; the tint still tells you the row is hovered.

FailsA spinner slowed to 3s, which is still vestibular motion and now also reads as a hang.

Checked by: Lint. An animating file with no prefers-reduced-motion branch is mechanically detectable.Measured: 40 of 88 animated files have no reduced-motion branch at all.Contradicts the published Motion page: The published page says to replace animation with instant state changes — delete, not degrade. Choosing degrade is a change of published policy, and the 36-file sweep writes whichever answer wins 36 times. See the conflicts

Today — loops slow to 3s

Today the loop slows to 3s rather than stopping. Slower vestibular motion is still vestibular motion, and it reads as a hung interface.

Delete — what the published page says

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.

Degrade — what the criterion says

Degrade: loops stop and are replaced with a static determinate state. Opacity and colour feedback survive; movement does not.

11. Cohesion

PolishHuman judgement

Motion matches the component’s personality and the library it lives in. Group entrances stagger between 30ms and 80ms.

PassesA crisp component in a crisp library; a list that enters at 50ms intervals.

FailsOne bouncy component in a library that is otherwise crisp. That is a finding, not a flourish.

Checked by: Reviewer, against the rest of the library rather than against a number.

12. Library compatibility

Should fixMechanical today

The root forwards a ref to a real DOM node, merges className and style with the consumer last, and puts no CSS transition on transform.

PassesPress feedback on the independent scale property, so a motion library can own transform.

Failstransition: transform on the root — every transform a library writes gets re-eased, so drags lag and springs never settle.

Checked by: Lint plus a render test: forwarded ref, merged className and style, no CSS transition on transform.Measured: Transform transitions across the package, including Button. 13 of them declare transform inside a longer property list, where a grep for it never looks. The generated audit undercounted this twice before the scanner learned to read wrapped values and nested StyleX rules; the brief’s "20+ components" was right all along.

Fails — transition on transform

Press it, then run the drag. The CSS transition re-eases every transform the library writes, so the drag lags the pointer and a spring never settles.

Passes — press on the scale property

Press feedback on the independent scale property, so it no longer collides with the library’s transform writes. Both work — this is the middle path worth prototyping.

What the rubric would have caught

Measured against @astryxdesign/core by the audit script, not read out of the brief. These are the rows a reviewer would have been handed on the day the component landed.

Criterion 6 — compositor-only

34 transform transitions across 23 components. Every one of them is also a criterion-12 finding.

Site	Declaration
core/Banner/Banner.tsx:340	transitionProperty: 'transform'
core/BottomSheet/BottomSheetPanel.tsx:144	transitionProperty: 'transform, opacity'
core/Button/Button.tsx:91	transitionProperty: 'background-image, background-color, color, opacity, transform'
core/Chat/ChatDictationButton.tsx:70	transitionProperty: 'transform, background-color'
core/Chat/ChatLayoutScrollButton.tsx:71	transitionProperty: 'opacity, transform, max-width'
core/CodeBlock/CodeBlock.tsx:207	transitionProperty: 'transform'

13 of these declare transform inside a longer property list rather than on its own, so a grep for transitionProperty: ‘transform’ finds barely half of them. That is worth knowing before anyone scopes criterion 12 from a search — the bugs page has the whole list, and the count has already moved twice as the scanner improved.

Criterion 10 — reduced motion

40 of 88 animated files have no reduced-motion branch. This is the sweep.

Component	Files with no branch
Table	6
TopNav	4
Chat	2
DropdownMenu	2
TabList	2
(shared)	1

Table alone accounts for 6 of the 40. The full worklist is on the reduced-motion page, where it also has to wait on degrade-or-delete: the sweep writes whichever answer wins 40 times.

Criterion 3 — token fidelity

58 hardcoded values: 34 durations, 24 curves. The brief budgeted for 28.

Site	Property	Value

Not all of them are carelessness: 13 are the 0.01s reduced-motion escape and 8 are the same 150ms tint in Table. The rubric would have caught every one at review time, which is the argument for the lint rule rather than the sweep.

Automatable?

4 of 12 are mechanical today — 3, 5, 10, 12. Five more can be narrowed by lint to a question a reviewer answers in one line. Three are judgement and always will be.

#	Criterion	Automatable	What checks it
1	Justified motion	Human judgement	Reviewer. The justification is written in the diff, not inferred from it.
2	Frequency-appropriate	Human judgement	Reviewer, against how often the surface is actually seen. No tool knows that.
3	Token fidelity	Mechanical today	Lint. Reads the StyleX rule object; no runtime, no reviewer.
4	Semantic correctness	Partly — lint narrows it, a human decides	Lint can check the pairing once semantic tokens exist. Whether a surface is entering or leaving is a reviewer call.
5	Duration budget	Mechanical today	Lint, against the token values. Arithmetic, not taste.
6	Compositor-only	Partly — lint narrows it, a human decides	Lint reads the animated property list. Whether the surface is large enough for it to matter is a reviewer call.
7	Enter and exit	Partly — lint narrows it, a human decides	Lint can see whether a component only ever transitions on mount. Whether the exit retraces the entry needs eyes.
8	Origin and physicality	Partly — lint narrows it, a human decides	Lint catches scale(0) and a missing transform-origin. Whether the origin matches the trigger needs eyes.
9	Interruptibility	Partly — lint narrows it, a human decides	Lint can flag a keyframe driving a state change. Judging the interrupted feel needs the demo.
10	Reduced motion	Mechanical today	Lint. An animating file with no prefers-reduced-motion branch is mechanically detectable.
11	Cohesion	Human judgement	Reviewer, against the rest of the library rather than against a number.
12	Library compatibility	Mechanical today	Lint plus a render test: forwarded ref, merged className and style, no CSS transition on transform.

Grandfathering

The rubric is worth nothing if it fails 48 animating components on the day it lands, and worth nothing if it never fails anything. This is the split.

Situation	Rule	Why
Lab to core promotion	The full rubric applies from day one. No baseline, no allowlist.	Promotion is the one moment where the cost of the rubric is already budgeted, and the same gate already exists for accessibility.
A new core component	Full rubric, no baseline.	Nothing to grandfather.
Existing core components	Scored once, baselined, and allowlisted with a dated remediation task per blocker. The allowlist can only shrink.	A gate that fails 48 animating components on the day it lands gets turned off in a week. A baseline that can only shrink is the same rule with a schedule.
An unrelated change to a failing component	Not blocked. The rule is no new violations against the baseline.	Blocking a copy fix on a motion debt nobody in the diff created is how a gate loses its constituency.
A motion change to a failing component	Must clear that component’s blockers before it lands.	If you are already in the motion code, this is the cheapest this fix will ever be — and it is the only way the allowlist actually shrinks.

A principle the rubric drops

Direction should match the actionPublished, ungraded

“Navigating deeper into content should feel like moving forward. Going back should feel like returning.”

Nothing in the twelve criteria covers directionality.Pagination and Calendar month-change are the surfaces this would be measured against. Both are audit gaps today with no criterion to fail.Recommendation: Fold it into criterion 4 as a fourth pairing rule, or add it as a thirteenth criterion. Either way the rubric should be a superset of the published guidance, not a divergent list.The published page against the proposal, conflict by conflict