Patterns from production · Motion

Motion tokens

Share timings across platforms and respect the system setting.

Motion tokensLive demo

Try the controls to see the rule.

The rule

Use the shared 180, 260, and 360 ms duration scale with standard easing for ordinary transitions. Honor reduced motion everywhere, and reserve back easing for playful feedback.

Tokens used

  • motion.duration.fast180ms
  • motion.duration.base260ms
  • motion.duration.slow360ms
  • motion.duration.reduced0ms
  • motion.easing.standardcubic-bezier(.2,.7,.2,1)
  • motion.easing.backcubic-bezier(.34,1.56,.64,1)
  • size.tap44px
  • space.md12px

Native spec · generated from this pattern and the shared token registry

SwiftUI
struct OvMotion: View {
    let status: String
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    var body: some View {
        HStack(spacing: OvScale.spaceMd) {
            Text(status).font(.body)
        }
        .frame(minHeight: OvScale.sizeTap)
        .animation(reduceMotion ? .none : .easeOut(duration: OvScale.motionDurationBase), value: status)
    }
}
// Tokens: motion.duration.fast=180ms, motion.duration.base=260ms, motion.duration.slow=360ms, motion.duration.reduced=0ms, motion.easing.standard=cubic-bezier(.2,.7,.2,1), motion.easing.back=cubic-bezier(.34,1.56,.64,1), size.tap=44px, space.md=12px
Compose
@Composable
fun OvMotion(status: String, reduceMotion: Boolean) {
    Row(
        modifier = Modifier.defaultMinSize(minHeight = OvScale.SizeTap),
        horizontalArrangement = Arrangement.spacedBy(OvScale.SpaceMd),
    ) {
        Text(status, style = MaterialTheme.typography.bodyMedium)
    }
    // Apply motion only when !reduceMotion.
}
// Tokens: motion.duration.fast=180ms, motion.duration.base=260ms, motion.duration.slow=360ms, motion.duration.reduced=0ms, motion.easing.standard=cubic-bezier(.2,.7,.2,1), motion.easing.back=cubic-bezier(.34,1.56,.64,1), size.tap=44px, space.md=12px