Skip to main content

Module motion

Module motion 

Source
Expand description

The motion vocabulary: M3 springs, entrances and retargetable values.

Reference priority is Figma kit > md3.io > m3e.kyralabs.dev, per value. The Figma Material 3 Design Kit defines no motion values.

  • Expressive (the default) uses md3.io’s sampled CSS curves and durations for all six tokens (expressive, floor/material c910072f3fc5b660276731d8a935d7186f288364). Under reduced motion it follows md3.io’s captured policy (conformance/reference/ button-states-reduced-motion.json): spatial tokens finish immediately and effects keep their own curve.
  • Standard is absent from md3.io, so it uses m3e.kyralabs.dev’s analytic springs (kyra-labs/m3exp-web 3b1e0047c0021eab7b4c0128fa1bec95c76ca746, packages/m3e-tokens/src/generated/tokens.css, generated from Compose Material3 1.5.0-beta01 StandardMotionTokens.kt @ androidx 19991f2c0858aadfcb442ce02b2c8e4743c96898) timed by Compose’s settle estimate, and m3e’s reduced-motion tokens: spatial tokens finish immediately and default/slow effects play the fast effects spring. Fixture: conformance/fixtures/m3e-motion.json.

Apply the scheme at the start of a root render, like the theme; helpers below resolve it on the UI thread.

Modules§

expressive
The Expressive motion scheme: md3.io’s sampled CSS spring curves.

Structs§

Spring
A Material 3 spring (damping ratio, stiffness; unit mass). The constants below are the Standard motion scheme’s tokens (md3.io has no Standard scheme, so m3e is the source), which m3e generates from Compose StandardMotionTokens.kt (L20-L31) and lists in tokens.css as --m3e-sys-motion-spring-standard-*. Spatial springs move or reshape something and may settle with a barely visible overshoot; effects springs fade color and opacity and never overshoot.
TokenTransitionPlayback
Caller-owned token channel. Keeps the active curve and Base reversal clock across virtual unmounts, without retaining a window or scheduling frames.

Enums§

MotionCurve
A resolved transition; use the same curve for timing and interpolation.
MotionScheme
MotionToken

Constants§

DEFAULT_EFFECTS
DEFAULT_SPATIAL
Partly covering surfaces: a page region arriving, a disclosure opening.
ENTER_MS
Short fades, e.g. a menu’s entrance.
FAST_EFFECTS
FAST_SPATIAL
Small components: a button’s shape, a switch thumb, a selection indicator.
SLOW_EFFECTS
Whole-window color changes, such as switching palettes.
SLOW_SPATIAL

Functions§

apply_schemeDeprecated
Former name of set_motion_scheme; it read like theme::apply_scheme, which applies a color scheme.
curve
disclosure
Content shown in place when open, fading in as it arrives.
enter
IDs belong to a logical state, not a frame or a progress value.
page_enter
A destination, settings category or secondary page arrives as one unit; navigation and the app bar stay put.
selection_value
A selection moves and reshapes on the fast spatial spring, retargeting from wherever it is when the choice changes again.
set_motion_scheme
Set the motion scheme for this root’s render. Defaults to Expressive.
state_enter
A change of task state settles into place, so the new title and available action read as a consequence of the user’s previous action.
token_transition
Follow an interpolatable target using the selected Material motion token.
token_value
Follow a target with a semantic token. A scheme switch takes effect after the active transition (including interruptions) settles, so it cannot replace the easing underneath GPUI Base’s existing transition clock.
value
A value that follows target on the default spatial spring, retargeting from its current presentation when the target changes again.