Material 3

Motion

CSS-only. Hover scale 1.02, press 0.96 (pill radius stays). Dual-declare cubic-bezier before linear() springs. Validate at compact (~390), medium (~768), expanded (~1024), large (~1280); a11y dark; keyboard; 200% zoom.

Viewport checklist

Compact ~390 · Medium ~768 · Expanded ~1024 · Large ~1280
A11y toolbar dark · keyboard-only tab · 200% page zoom
OS prefers-reduced-motion or the force toggle below

Reduced-motion simulation

Toggles .wod-motion-reduce on the harness (does not change OS preference).

Force reduced motion on demos below

Break harness — filled button

Same control in every realistic scenario. Observe; do not restyle a lookalike.

Default

Hover (pointer)

Focus-visible

Press

Inverse

Disabled

Long label

Icon + label

Narrow (160px)

Tonal press

Press scale

Press and hold. Filled/tonal scale to 0.96. Hover (fine pointer) grows filled to 1.02. Web keeps pill radius — no hold-to-squash morph.

Concentric radius

Outer = inner + padding (--wod-concentric-outer). Nested surfaces should feel optical, not mismatched.

Inner surface

Padding 16 · inner 8 · outer 24

Horizontal rail peek

16–32px of the next card should show so people know there is more.

Tonight

Saturday

Sunday

Next week

Dialog open / close

Native <dialog> with discrete enter (fade + translate). No spring. Esc closes.

Icon fill

Check the box — the symbol fills on the FILL axis.

Save this

Duration / easing

Enter uses emphasized decelerate (400ms). Force reduced motion above pauses this demo.