Motion Tokens

The motion token group provides duration and easing tokens for consistent animations across web and React Native.

Usage

import { motion } from '@stareezy-ui/tokens'

// Duration tokens (number in ms)
motion.duration.instant.value // 100
motion.duration.fast.value    // 150
motion.duration.normal.value  // 200

// Easing tokens (CSS cubic-bezier string)
motion.easing.spring.value   // "cubic-bezier(0.34,1.56,0.64,1)"
motion.easing.easeOut.value  // "cubic-bezier(0,0,0.2,1)"

// Use in CSS transitions
const style = {
  transition: `all ${motion.duration.normal.value}ms ${motion.easing.easeOut.value}`
}

// Register in createUi animations
const ui = createUi({
  animations: {
    fadeIn: { duration: motion.duration.enter, easing: motion.easing.easeOut }
  }
})

Duration Tokens

Easing Tokens