# motion.html showcase template The interactive showcase reviewers play with to feel every motion before signoff. Unlike palette and components (which are static visual references), motion can only be reviewed by *being triggered*. Every motion in this page is clickable / hoverable / draggable so a reviewer can feel it. ## Page structure ``` .mockups/design-system/motion.html ├── header (project name + attitude + last-generated date) ├── top nav with anchor links (curves / durations / springs / principles / hold-beat / stepped / reduced-motion) ├── controls (global play-speed override, reduced-motion toggle) ├── #curves section │ └── 5 demos: each named curve animating a 100×100 square sliding 300px on click ├── #durations section │ └── 3 demos: instant / quick / ambient, each labeled "input-gating" or "ambient" ├── #springs section (if included) │ └── 3 demos: draggable cards that snap with each spring preset ├── #principles section │ └── 4-5 toy demos: squash, anticipation, follow-through, secondary-glow ├── #hold-beat section (if included) │ └── A 3-step modal sequence; toggle the hold-beat on/off to feel the difference ├── #stepped section (if included) │ └── A hand-drawn SVG illustration: smooth vs stepped, side by side └── #reduced-motion section └── Toggle that simulates prefers-reduced-motion: reduce and confirms usability ``` ## Outer shape ```html Motion system — {project name}

Motion system — {project name}

Attitude: {primary} + {secondary} · Generated {date}

``` ## Curves section Each curve demos a 100×100 square sliding 300px to the right. Click "play" to trigger; square snaps back automatically after 1.5s so the demo can be repeated. ```html

Easing curves

Each curve carries an attitude. Click play; the square slides 300px to the right.

--motion-emphasized

Expressive / Cinematic

cubic-bezier(0.2, 0, 0, 1) · {duration}ms

``` ## Durations section Same square animation but the *curve is fixed* (`--motion-standard`) and the duration varies. Each demo prominently labels itself as **input-gating** (`--dur-instant`, `--dur-quick`) or **ambient** (`--dur-ambient`). The label is the review prompt: does each motion's class match its usage? ```html

Durations (Doherty-coupled)

The rule: motion that gates input fits in instant or quick (≤300ms total). Only ambient motion uses --dur-ambient.

--dur-instant input-gating

80ms — feels direct

--dur-quick input-gating

240ms — workhorse; sub-300ms ceiling

--dur-ambient ambient ONLY

600ms — does NOT gate input

``` ## Springs section (if included) A draggable card that snaps back. Each preset gets its own card; user flings each to feel the response. ```html

Springs (gesture-driven)

Drag a card and release. Each spring's character — snap, settle, wobble — comes from its stiffness/damping/mass tuple.

--spring-stiff

⋮⋮

stiffness 300, damping 30, mass 1 · snap-back, decisive

``` ## Principles section Toy demos for each locked Disney principle. Each is small, focused on demonstrating that one principle. ```html

Disney principles

--squash-on-press

Squash & stretch scale(0.96) on :active, springs back

--anticipation-flick

Anticipation scale(0.97) → scale(1) → translateY(0); anticipation begins inverted

``` ## Hold-beat section (if included) A 3-step modal sequence with a toggle. With hold-beat on, the modal enters, holds for 250ms, then the focus ring appears. With hold-beat off, the focus ring runs parallel. Reviewers feel the difference. ```html

Hold beat (Ma)

The designed pause between segments of a complex transition. Toggle to feel why the pause matters.

Hold beat ON

--hold-beat 250ms — modal enter, hold, focus arrives

``` ## Stepped section (if included) Side-by-side: same SVG illustration animating smoothly vs stepped. Reviewers see the hand-keyed quality the stepped channel adds. ```html

Stepped channel

Hand-keyed motion for illustrations that want Aardman/Laika texture.

Smooth (60fps)

animation: bounce 600ms var(--motion-standard) infinite

Stepped (12fps)

animation: bounce 600ms var(--stepped-12fps) infinite

``` ## Reduced-motion section A toggle that simulates `prefers-reduced-motion: reduce` by adding a class to `` that swaps the relevant tokens. Reviewers replay every demo with reduced motion on to confirm the page is still usable. ```html

Reduced motion preview

~35% of users benefit from reduced motion at some point (vestibular sensitivity, attention disorders, motion sickness). The fallback isn't optional polish.

Simulate prefers-reduced-motion: reduce

Toggle on and replay any motion above. Decorative loops stop. Input-gating transitions compress to --dur-instant. Overshoot curves linearize.

``` ## Showcase rules - **Every motion is playable.** Static "here's the curve" doesn't earn its keep — motion has to be felt. If a section has no interactive demo, redesign the section. - **Tokens are visible.** Each demo prints the actual cubic-bezier coefficients / duration / spring params in a `

` block. Reviewers see what they're approving.
- **Labels are loud.** Input-gating vs ambient is the most-violated rule; the showcase
  makes the class obvious per-demo.
- **Reduced-motion is its own section, not a footnote.** It's the accessibility gate.
- **No external dependencies.** All JS is inline; no Lottie/Framer/React. The showcase
  is the same tech rule as every other mock (single-file HTML, vanilla CSS/JS).
- **Open in browser, not in IDE.** The showcase is meaningful only when the motion runs
  in real time. Skill always opens it via `xdg-open` / `open` / `start`.