motion-choreography

name	motion-choreography
description	Motion as design language — easing grammar, easing-curve personality profiles, multi-element choreography patterns, restraint philosophy, anticipation and follow-through principles, and prefers-reduced-motion compliance. Use proactively when designing multi-element animation sequences or entrance/exit choreography, selecting easing curves with personality for each interaction type, applying restraint principles to avoid over-animation, implementing anticipation and follow-through in UI interactions, or auditing animation systems for motion budget and prefers-reduced-motion compliance.
version	1.0.0
tags	["design","motion","animation","choreography","easing","timing","restraint","premium"]
when_to_use	["Designing multi-element animation sequences or entrance/exit choreography","Selecting easing curves with personality for each interaction type","Applying restraint principles to avoid over-animation","Implementing anticipation and follow-through in UI interactions","Auditing animation systems for motion budget and prefers-reduced-motion compliance"]

Motion Choreography

Motion as a design language. Not decoration — communication. These patterns define how elements enter, behave, and exit as a coherent system.

Purpose

• Establish motion grammar before implementing individual animations
• Provide a named easing library with personality profiles
• Define choreography patterns for multi-element sequences
• Encode restraint philosophy to prevent over-animation
• Apply classic animation principles to UI context

---

1. Motion as Language

Motion has grammar. Learn it before using it.

Vocabulary: fade, slide, scale, rotate, morph, spring, stagger, clip, blur

Syntax: entrance → interaction → exit. Breaking this sequence disorients users.

Rhythm: Consistent timing across a flow creates expectation. Breaking rhythm creates emphasis — use this sparingly and intentionally.

Tone:

Motion Quality	Message Sent
Fast + snappy	Energetic, playful, responsive
Slow + smooth	Premium, confident, considered
Springy	Friendly, organic, alive
Abrupt	Urgent, alarming, decisive

Silence: No-motion is a choice. Stillness after movement creates contrast. Not everything should move — the absence of motion is part of the composition.

---

2. Choreography Patterns for Multi-Element Sequences

Pattern	Description	Best For
Cascade (top-down)	Header → hero → cards → footer. Natural reading order.	Default choice, content pages
Wave (center-out)	Central element first, radiating outward.	Focus + context reveal
Random (organic)	Elements enter at varied delays (not uniform).	Creative, editorial, energetic
Reverse cascade (coordinated exit)	Elements leave in reverse order of entry.	Page transitions, modal close
Shared axis	Related elements move along the same axis (all slide-left, or all scale-center).	Grouped families, related content
Focal	Secondary elements animate AFTER primary element settles.	Hero sections, feature showcases

Stagger math:

total_stagger = (N − 1) × per_element_delay

Rule: Keep total_stagger < 600ms to avoid tedium
Adjustment: If N > 8, reduce per-element delay proportionally

Example: 10 cards, keep total under 600ms → delay = 600 / 9 = ~67ms per element

Focal choreography sequence:

1. Primary element enters (full animation, no competition)
2. Primary settles (100ms rest)
3. Secondary elements begin
4. Supporting elements begin (after secondary settles)

---

3. Easing as Personality

Custom Bézier curves per interaction type. Never use just ease or ease-in-out globally.

Name	Value	Feel	Use For
Snappy	cubic-bezier(0.25, 0.1, 0.25, 1)	Quick start, smooth end	Button feedback, toggles
Gentle	cubic-bezier(0.16, 1, 0.3, 1)	Slow start, confident end	Content reveals, fades
Elastic	cubic-bezier(0.68, -0.55, 0.27, 1.55)	Overshoot + settle	Notifications, badges, playful elements
Dramatic	cubic-bezier(0.7, 0, 0.84, 0)	Accelerating, commanding	Hero entrances, cinematic moments
Smooth	cubic-bezier(0.4, 0, 0.2, 1)	Material Design standard	General transitions
Sharp	cubic-bezier(0.4, 0, 0.6, 1)	Quick, decisive	Exit animations, removals
Decelerate	cubic-bezier(0, 0, 0.2, 1)	Entering with momentum	Slide-in panels, incoming content
Accelerate	cubic-bezier(0.4, 0, 1, 1)	Leaving with momentum	Slide-out panels, exiting content

Define as CSS custom properties for system-wide consistency:

:root {
  --ease-snappy:      cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-gentle:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-elastic:     cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --ease-dramatic:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-smooth:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-sharp:       cubic-bezier(0.4, 0, 0.6, 1);
  --ease-decelerate:  cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate:  cubic-bezier(0.4, 0, 1, 1);
}

Pairing rule: Entrance uses --ease-decelerate (arrives with momentum). Exit uses --ease-accelerate (leaves with purpose). They are not interchangeable.

---

4. Anticipation & Follow-Through

Classic animation principles applied to UI. These are what separate alive interactions from mechanical ones.

Anticipation — slight preparation before the main action:

• Button: depresses 2px before releasing the click action
• Menu items: shift 4px opposite direction before sliding in
• Creates "coiled spring" energy that makes the resulting action feel powerful

Follow-through — overshoot + settle after arrival:

• Elements don't stop dead at their destination — they arrive and breathe
• Spring physics: overshoot by 3–8% then settle to final position over 100–200ms
• CSS approach: add a second keyframe past the target then return

Squash & stretch (subtle, not cartoonish):

@keyframes press {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.95); }   /* compress */
  70%  { transform: scale(1.05); }   /* expand */
  100% { transform: scale(1.0); }    /* settle */
}
/* Keep scale range tight: ±5–8% max for UI elements */

Staging — direct the eye before the action:

1. Dim surrounding elements (opacity 0.6)
2. Highlight target area (subtle glow or brightness increase)
3. THEN animate the primary action Staging ensures users are looking in the right place before the important thing happens.

Secondary action — environment responds to primary:

• Card lifts → shadow deepens + adjacent cards shift 4px apart
• Modal opens → page content scales to 0.98 (depth cue)
• Creates spatial awareness — the world responds to interactions

---

5. Restraint Philosophy

This is the most important section. Read it twice.

The 3-element rule: Animate the 3 elements that matter, not all 30. More animations do not mean better experience — they mean more noise.

The purpose test: If removing an animation changes nothing about user comprehension or emotional response, remove it. Motion must earn its place.

The invisibility standard: The best motion is the motion users don't consciously notice but would miss if absent. Like good typography — invisible until it's wrong.

prefers-reduced-motion — respect it fully:

@media (prefers-reduced-motion: reduce) {
  /* Remove non-essential motion entirely */
  /* Do NOT just reduce duration — remove the animation */
  .reveal { animation: none; opacity: 1; }
  .slide-in { transform: none; }

  /* KEEP: instant state changes for critical feedback */
  .toggle { transition: background-color 0ms; }
}

Motion budget per view:

Type	Limit	Notes
Hero animation	1	The primary narrative moment
Entrance staggers	3–5	Content entering the viewport
Micro-feedback	Unlimited	Hover, focus, press states
Anything beyond	Requires justification	Ask: does this serve the user?

The amateur vs elite signal:

• Amateur: everything bounces
• Elite: you can't point to what moved, but it felt right

---

6. Sound + Motion Integration

When sound enhances rather than intrudes:

Sound Type	Duration	Character	Trigger
Soft click	50–100ms	Short, percussive	Button press (confirms registration)
Success tone	200–400ms	Ascending, warm	Positive completion
Error tone	200–300ms	Distinct, not jarring	Alert without alarm
Ambient	Continuous	Subtle, atmospheric	Scroll or state (user-controlled)

Sync rule: Sound begins at animation midpoint for maximum perceived responsiveness. Starting at animation start feels delayed; starting at midpoint feels simultaneous.

Mandatory controls:

• ALWAYS provide a mute control
• NEVER autoplay sound without user consent
• Sound is opt-in, not opt-out

---

Anti-Patterns

Anti-Pattern	Why It Fails
Bounce on page load	Dated since 2018; immediately signals amateur work
Identical easing curve on every element	Robotic, uncanny uniformity — each interaction type needs its own curve
UI feedback duration > 500ms	User perceives system as sluggish and unresponsive
Scroll-jacking without clear navigation	User loses sense of position and how much content remains
Motion that fights user intent	Element moves away from where user is trying to interact
Parallax on critical content	Makes text hard to read; causes nausea in sensitive users
"Playful" loading animations past 3 seconds	Delight becomes impatience at the 3-second mark
Animating layout properties	width, height, top, left cause reflow; use transform + opacity only
Entrance animation identical to exit	Entrances decelerate; exits accelerate — never swap them
Sound without mute control	Immediately hostile to users in quiet environments

---

Validation Checklist

• Motion grammar defined: vocabulary, syntax, rhythm, tone declared before implementation
• Choreography pattern selected and documented (cascade/wave/random/etc.)
• Named easing curves used (no bare ease or ease-in-out)
• Entrance uses --ease-decelerate, exit uses --ease-accelerate
• Stagger total under 600ms for any sequence
• Anticipation present on primary interactive elements
• Follow-through present on spring-animated elements
• Secondary actions respond to primary actions
• Motion budget respected: ≤1 hero, ≤5 staggers per view
• prefers-reduced-motion removes non-essential motion (not just shortens it)
• No layout property animations (transform + opacity only)
• Sound is opt-in with visible mute control