Context
The anti-June artifact. The post-mortem class ("views ugly, not following best practices, not connected") recurs wherever a taste bar exists only in someone's head. The dock/demo cornerstone's done-signal says stunning + animated — this ticket makes that falsifiable BEFORE implementation, as the input contract for the dock/demo design SSOT (design authority draws against it).
The standards (the judgment-dense content — implement these, don't re-derive)
1. Motion tokens (one vocabulary, CSS-custom-property-backed):
- Durations:
--motion-fast: 120ms (hover/press feedback) · --motion-base: 200ms (state transitions, chips, badges) · --motion-panel: 280ms (panel/pane moves, dock snaps) · --motion-stage: 400ms (window-level choreography, promote/adopt). Nothing animates outside these four without a recorded exception.
- Easing:
--ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1) (everything entering/settling) · --ease-in-soft: cubic-bezier(0.55, 0, 0.55, 0.2) (exits) · spring-class choreography only at stage level.
- Stagger: list/grid entrances stagger 24ms/item, cap 8 items (rest arrive together) — scale-to-a-glance, never a parade.
2. The rules:
- Every state transition on a demo/product surface animates — a hard cut is a defect unless recorded as intentional. (Dock snap-previews, pane promote, flow-state changes, chip updates — all of it.)
- Motion communicates causality, never decoration: the thing you acted on leads; consequences follow within one
--motion-base.
- Interruptible always: a second action mid-animation retargets, never queues or blocks (the class system's batched
set() makes render state consistent; motion must keep up).
prefers-reduced-motion honored globally: durations → 0, opacity crossfades stay. An accessibility fail = a release-gate fail.- 60fps or it doesn't ship: transform/opacity only on animated properties; layout-triggering animation is a Required Action in review.
3. The acceptance gate (per demo surface):
- A deterministic tour mode (the ROADMAP's own bar): scripted walkthrough hitting every animated transition, driveable by the NL for recording — the tour IS the e2e fixture.
- A 30-second screen recording in the PR body (the render-verify precedent from the SSOT reviews).
Acceptance Criteria
Out of Scope
Implementing every surface's motion (per-surface leaves) · the SSOT drawing itself (design authority) · sound.
Related
#13158 (dock cornerstone) · the #14587-#14591 demo wave · #14681 (theming) · the design-SSOT rule (recorded) · the ROADMAP tour-mode bar.
Claimable — the standards above are complete; implementation is non-Fable.
Origin Session ID: b9b95ac6-42f5-47a3-b58f-6071f79657e8
Retrieval Hint: "motion choreography standards tokens easing stagger tour mode animation acceptance gate stunning"
Context
The anti-June artifact. The post-mortem class ("views ugly, not following best practices, not connected") recurs wherever a taste bar exists only in someone's head. The dock/demo cornerstone's done-signal says stunning + animated — this ticket makes that falsifiable BEFORE implementation, as the input contract for the dock/demo design SSOT (design authority draws against it).
The standards (the judgment-dense content — implement these, don't re-derive)
1. Motion tokens (one vocabulary, CSS-custom-property-backed):
--motion-fast: 120ms(hover/press feedback) ·--motion-base: 200ms(state transitions, chips, badges) ·--motion-panel: 280ms(panel/pane moves, dock snaps) ·--motion-stage: 400ms(window-level choreography, promote/adopt). Nothing animates outside these four without a recorded exception.--ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1)(everything entering/settling) ·--ease-in-soft: cubic-bezier(0.55, 0, 0.55, 0.2)(exits) · spring-class choreography only at stage level.2. The rules:
--motion-base.set()makes render state consistent; motion must keep up).prefers-reduced-motionhonored globally: durations → 0, opacity crossfades stay. An accessibility fail = a release-gate fail.3. The acceptance gate (per demo surface):
Acceptance Criteria
Out of Scope
Implementing every surface's motion (per-surface leaves) · the SSOT drawing itself (design authority) · sound.
Related
#13158 (dock cornerstone) · the #14587-#14591 demo wave · #14681 (theming) · the design-SSOT rule (recorded) · the ROADMAP tour-mode bar.
Claimable — the standards above are complete; implementation is non-Fable.
Origin Session ID: b9b95ac6-42f5-47a3-b58f-6071f79657e8 Retrieval Hint: "motion choreography standards tokens easing stagger tour mode animation acceptance gate stunning"