Motion System

Human’s motion system applies Pixar’s 12 principles of animation to UI interactions. Every animation has purpose — it guides attention, confirms actions, and creates spatial coherence.

Core Durations

Token	Value	CSS Variable	Usage
duration.instant	100ms	--hu-duration-instant	Hovers, state toggles
duration.fast	150ms	--hu-duration-fast	Button presses, small reveals
duration.normal	250ms	--hu-duration-normal	Panel transitions, fades
duration.slow	400ms	--hu-duration-slow	Modal entrances, page transitions
duration.slower	600ms	--hu-duration-slower	Complex orchestrated sequences

Easing Curves

Token	Value	CSS Variable	Character
ease.default	cubic-bezier(0.4, 0, 0.2, 1)	--hu-ease-default	Natural deceleration
ease.in	cubic-bezier(0.4, 0, 1, 1)	--hu-ease-in	Accelerating exit
ease.out	cubic-bezier(0, 0, 0.2, 1)	--hu-ease-out	Decelerating entrance
ease.in-out	cubic-bezier(0.4, 0, 0.2, 1)	--hu-ease-in-out	Symmetric motion
ease.spring	cubic-bezier(0.175, 0.885, 0.32, 1.275)	--hu-ease-spring	Bouncy overshoot
ease.bounce	cubic-bezier(0.34, 1.56, 0.64, 1)	--hu-ease-bounce	Playful bounce

Micro-Physics Presets (Pixar Principles)

These presets encode Pixar animation principles as token-driven CSS keyframes.

Button Press — Squash & Stretch

When pressed, buttons compress slightly (squash), then spring back with overshoot (stretch).

Token	Value	Principle
micro-physics.button-press.scale	0.96	Squash on press
micro-physics.button-press.duration	80ms	Fast physical response
micro-physics.button-release.scale	1.02	Stretch on release
micro-physics.button-release.duration	200ms	Slower recovery

.btn:active {
  transform: scale(var(--hu-physics-button-press-scale));
  transition: transform var(--hu-physics-button-press-duration)
    var(--hu-ease-spring);
}

Modal Anticipation

Before appearing, modals briefly scale down (anticipation), then spring to full size.

Token	Value	Principle
micro-physics.modal-anticipation.scale	0.95	Preparatory pullback
micro-physics.modal-anticipation.duration	120ms	Brief setup

Card Hover — Follow Through

Cards lift slightly with a springy overshoot on hover, settling to final position.

Token	Value	Principle
micro-physics.card-hover.translate-y	-2px	Subtle lift
micro-physics.card-hover.duration	300ms	Gentle float

Dropdown Anticipation

Dropdowns compress before expanding, giving a sense of stored energy.

Token	Value	Principle
micro-physics.dropdown-anticipation.scale-y	0.95	Vertical compression
micro-physics.dropdown-anticipation.duration	100ms	Quick wind-up

Toggle Squash

Toggle switches squash horizontally during state change.

Token	Value	Principle
micro-physics.toggle-squash.scale-x	0.9	Horizontal squash
micro-physics.toggle-squash.duration	150ms	Snappy

Utility Classes

.hu-physics-press:active

Applies button press squash/stretch on any interactive element:

<button class="hu-physics-press">Click me</button>

.hu-physics-hover

Applies card hover lift with follow-through:

<div class="hu-physics-hover">Hoverable card</div>

.hu-anticipate-enter

Applies anticipation entrance animation on mount:

<dialog class="hu-anticipate-enter">Modal content</dialog>

Reduced Motion

All animations respect prefers-reduced-motion: reduce. When active:

• Durations are set to 0ms
• Transforms are removed
• Only opacity transitions remain (they don’t cause motion sickness)

@media (prefers-reduced-motion: reduce) {
  .hu-physics-press:active,
  .hu-physics-hover:hover {
    transform: none !important;
    transition: none !important;
  }
}

When to Animate

Scenario	Duration	Easing	Principle
Button feedback	instant	spring	Squash & stretch
Card hover	normal	spring	Follow-through
Modal entrance	slow	bounce	Anticipation
Page transition	slow	ease-out	Staging
Toast appearance	fast	ease-out	Timing
Loading spinner	slower	linear	Secondary action

When NOT to Animate

• Scrolling content into view (use CSS scroll-behavior: smooth instead)
• Color theme transitions (instant swap, no fade)
• Error state changes (immediate, no delay)
• Content that hasn’t changed (don’t re-animate)