Physics & Motion

Apple pioneered spring physics. We add emotional weight—UI elements feel heavier when delivering serious content, lighter when playful.

Spring Presets

Each spring configuration has an emotional context. Choose based on the feeling you want to create, not just timing.

Snappy

Efficient, responsive

Tension: 400 Friction: 30 Mass: 1

Quick confirmations, toggles, micro-interactions

Gentle

Calm, welcoming

Tension: 170 Friction: 26 Mass: 1

Modal appearances, card expansions

Bouncy

Joyful, playful

Tension: 300 Friction: 10 Mass: 1

Celebrations, achievements, delightful moments

Heavy

Weighty, significant

Tension: 120 Friction: 40 Mass: 2

Important decisions, serious content, warnings

Ethereal

Floating, dreamlike

Tension: 80 Friction: 20 Mass: 0.5

Ambient elements, background particles, dreamy states

Organic

Alive, breathing

Tension: 200 Friction: 22 Mass: 1.2

Avatar movements, natural gestures

Usage

import { SPRING } from 'design-system/tokens';

// Using with framer-motion
<motion.div
  animate={{ scale: 1 }}
  transition={{
    type: "spring",
    ...SPRING.bouncy  // tension: 300, friction: 10, mass: 1
  }}
/>

// Using with react-spring
useSpring({
  to: { opacity: 1 },
  config: SPRING.gentle  // tension: 170, friction: 26, mass: 1
})

Momentum Physics

Momentum preservation for gesture-driven interfaces. Elements remember their velocity.

Scroll

Deceleration0.998
Velocity Threshold0.5
Rubber Band Stiffness0.55
Snap to Pointstrue

Swipe

Velocity Threshold500 px/s
Distance Threshold30%
Complete Animationspring(gentle)
Cancel Animationspring(snappy)

Drag

Friction0.92
Velocity Multiplier1.2
Release Springspring(gentle)
Boundary Springspring(bouncy)

Throw

For dismissible cards, carousel items

Min Velocity300 px/s
Friction0.95
Gravity Y0
Bounce on Edgetrue

Gravity Effects

Gravity for falling, settling elements. Different weights create different emotional impacts.

Light

Gentle settling, soft landings

Acceleration: 200 Bounce: 0.4

Normal

Standard physics

Acceleration: 980 Bounce: 0.3

Heavy

Dramatic impacts, importance

Acceleration: 1500 Bounce: 0.1

Floating

Dreamy, underwater feel

Acceleration: 50 Bounce: 0.6

Emotional Momentum

UI carries emotional weight from previous interactions. A celebration affects the next 5 seconds of motion.

After Celebration

Spring Modifierbouncy
Duration5s
Particle Boost1.5x

After Serious Content

Spring Modifierheavy
Duration10s
Color Shiftmuted

After Quiet Moment

Spring Modifierethereal
Duration8s
Motion Reduction0.7x

After High Energy

Spring Modifiersnappy
Duration3s
Transition Speed1.2x

Contextual Weight

Element weight based on content importance. Critical messages move slower, demanding attention.

Critical

Mass: 2.5

Spring: heavy, Delay: 200ms

Requires acknowledgment

Important

Mass: 1.5

Spring: gentle, Delay: 100ms

Standard

Mass: 1

Spring: gentle, Delay: 0ms

Ambient

Mass: 0.5

Spring: ethereal, Delay: 0ms

Fluid Motion

Fluid dynamics for organic, living interfaces.

Wave

Loading states, ambient motion

Speed: 300px/s Amplitude: 8px Frequency: 0.5Hz Damping: 0.95

Breathing

Subtle scale oscillation for living elements

Scale: 0.98 - 1.02 Duration: 4s Sync: userBreathRate
Tap me

Ripple

Touch ripple effects

Speed: 600px/s Opacity: 0.12 Scale: 2.5 Duration: 600ms

Spatial Depth

Beyond flat design—true depth perception without being gimmicky.

Background z: -100, blur: 8px, parallax: 0.3
Surface z: 0, blur: 0, parallax: 0.5
Elevated z: 50, shadow: md, parallax: 0.7
Floating z: 100, scale: 1.02, parallax: 0.9
Overlay z: 200, shadow: xl, parallax: 1

Parallax Settings

Sensitivity0.02
Max Offset20px
Smoothing0.1
Gyroscopeenabled

Accessibility

All motion respects user preferences for reduced motion.

Reduced Motion

For users with vestibular disorders

@media (prefers-reduced-motion: reduce) {
  .spring-animation {
    transition: none;
    animation: none;
  }
}

Motion Duration Limits

Maximum animation durations

  • Micro-interaction: 150ms
  • Standard: 400ms
  • Page transition: 800ms
  • Celebration: 1500ms
  • Absolute max: 5000ms