Component registry

Motion tokens

The four shared durations and curves that give movement one pace.

All components · Kit documents · Definition as JSON

Live web demo

Web source: openvibe-shared/ov-fx · --ov-dur-1..4 and --ov-ease-out/-spring/-in-out

Anatomy

  • duration120, 200, 320 or 520 ms
  • curveout, spring or in-out

Props

duration
token
curve
token

Behavior and accessibility

States
auto · reduced
Tokens
--ov-dur-1 · --ov-dur-2 · --ov-dur-3 · --ov-dur-4 · --ov-ease-out · --ov-ease-spring · --ov-ease-in-out
Keyboard
Standard focus order
Outside tap
No dismissal
Scroll lock
Page remains scrollable
Reduced motion
Duration becomes zero for decorative motion.
Accessibility
Motion tokens. Visible keyboard focus; follow reading order. At least 44 × 44 dp or pt for every touch action.

Android · Jetpack Compose

Use MotionDuration tokens with reducedMotion from accessibility settings.

Material 3 container: Surface

iOS · SwiftUI

Use the same durations with accessibilityReduceMotion.

Example definition

{
  "schema": "design.component@1",
  "name": "motion-tokens",
  "props": {
    "duration": "--ov-dur-2",
    "curve": "--ov-ease-out"
  }
}

Other components