Foundation

Motion

Short motion tokens for focus, hover, disclosure, and loading feedback.

Motion should clarify state changes without becoming decorative.
foundation
DOM renderImage render
MotionDefault
Motion vocabulary120ms / 180ms / ease
duration-fast120ms
duration180ms
easecubic-bezier(0.2, 0, 0, 1)

Playground

Foundation examples are token specimens. The route stays registry-led so every foundation can be rendered, linked, and screenshotted through the same catalog surface.

Loading playground

Rendered matrix

Every state maps to the same foundation render route through the state query param.

Default

Short duration and easing tokens for calm product feedback.
Motion vocabulary120ms / 180ms / ease
duration-fast120ms
duration180ms
easecubic-bezier(0.2, 0, 0, 1)
Render state

States

Interaction motion uses small transforms and explicit state timing.
State transitionsControls and disclosure
hovervar(--concrete-duration-fast)var(--concrete-scale-control-hover)
pressvar(--concrete-duration-press)var(--concrete-scale-control-pressed)
disclosevar(--concrete-duration-disclosure)var(--concrete-rotate-quarter)
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription