Getting Started · 03

Motion Tokens & Physics Curves

EasyUI standardizes animation through calibrated spring physics curves and bezier easing tokens. Consistent physical stiffness, damping, and mass ensure every interaction feels organic and responsive.

Interactive Physics Sandbox

Select a token curve and click the cube below to trigger the physical spring response:

Click MespringSnappy

Values: stiffness: 380, damping: 30, mass: 0.5

Click to trigger

Token Reference

Token	Parameters	Recommended Use Case
springGentle	stiffness: 170, damping: 26, mass: 0.9	Fluid tab switching, accordion unfolding, card bounds
springSmooth	stiffness: 200, damping: 28, mass: 0.85	Spatial 3D layer perspective, search expanding pill, floating dock
springSnappy	stiffness: 380, damping: 30, mass: 0.5	Tactile clicks, button active states, micro-toggles
springMorph	stiffness: 220, damping: 32, mass: 1.0	Morphing dialogs, layoutId expanding backgrounds
springResponsive	stiffness: 320, damping: 24, mass: 0.7	Magnetic return pull, notification toasts stack
springSoft	stiffness: 150, damping: 22, mass: 0.9	Default smoothing for pointer-follow motion values
easeSoft	duration: 0.32s, ease: [0.22, 1, 0.36, 1]	Subtle backdrop blurs, opacity fades, color shifts
easeFast	duration: 0.20s, ease: [0.2, 0, 0, 1]	Instant icon switch, quick tooltip reveal

Using Motion Tokens in Custom Components

Import motionTransitions from your shared tokens helper:

src/components/InteractiveCard.tsx

import { motion } from 'framer-motion';
import { motionTransitions } from '@/lib/motion-tokens';

export function InteractiveCard() {
  return (
    <motion.div
      whileHover={{ scale: 1.03 }}
      whileTap={{ scale: 0.97 }}
      transition={motionTransitions.springSnappy}
      className="p-5 rounded-2xl bg-neutral-900 border border-neutral-800"
    >
      <h3 className="text-white font-semibold">Organic Spring Motion</h3>
    </motion.div>
  );
}

Reduced Motion Support

EasyUI components automatically detect and respect prefers-reduced-motion: reduce, disabling heavy translations while preserving smooth instantaneous updates.

Token

Parameters

springGentle

stiffness: 170, damping: 26, mass: 0.9

springSmooth

stiffness: 200, damping: 28, mass: 0.85

springSnappy

stiffness: 380, damping: 30, mass: 0.5

springMorph

stiffness: 220, damping: 32, mass: 1.0

springResponsive

stiffness: 320, damping: 24, mass: 0.7

springSoft

stiffness: 150, damping: 22, mass: 0.9

easeSoft

duration: 0.32s, ease: [0.22, 1, 0.36, 1]

easeFast

duration: 0.20s, ease: [0.2, 0, 0, 1]

Using Motion Tokens in Custom Components

Import motionTransitions from your shared tokens helper:

src/components/InteractiveCard.tsx

import { motion } from 'framer-motion';
import { motionTransitions } from '@/lib/motion-tokens';

export function InteractiveCard() {
  return (
    <motion.div
      whileHover={{ scale: 1.03 }}
      whileTap={{ scale: 0.97 }}
      transition={motionTransitions.springSnappy}
      className="p-5 rounded-2xl bg-neutral-900 border border-neutral-800"
    >
      <h3 className="text-white font-semibold">Organic Spring Motion</h3>
    </motion.div>
  );
}