Motion

Preview Available in release assets

Provide fast and normal duration roles plus a shared easing role, with a global reduced-motion safety rule.

Motion primary example

<div style="transition: opacity var(--thin-motion-fast) var(--thin-ease-standard)">
  <h2>Bounded motion roles</h2>
  <p>Reduced-motion preferences collapse nonessential animation and transition duration.</p>
</div>

Show code

<div style="transition: opacity var(--thin-motion-fast) var(--thin-ease-standard)">
  <h2>Bounded motion roles</h2>
  <p>Reduced-motion preferences collapse nonessential animation and transition duration.</p>
</div>

Anatomy

--thin-motion-fast
--thin-motion-normal
--thin-ease-standard
prefers-reduced-motion override

Variants and sizes

Fast feedback
Normal transition
Reduced-motion mode

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Default preference
Reduced-motion preference
Interrupted transition
Repeated animation
Scroll behavior

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Motion may explain a state change but must not delay, gate, or become the only indication of an interaction result.

Accessibility

The foundation reduces animation and transition durations, limits iteration, and disables smooth scrolling when reduced motion is requested. Applications must still avoid vestibular triggers and preserve immediate understandable state changes.

Contract: PLATFORM
Basis: Native CSS layout and document defaults over semantic HTML; no APG widget

API

Use the --thin-motion-fast, --thin-motion-normal, and --thin-ease-standard semantic roles. Load /foundation.css for the reduced-motion override.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

State changes remain understandable without animation.

Assets and dependencies

/foundation.css
/themes.css

Dependencies: None

Source: packages/ui/src/style/foundation.ts