Motion Design Principles

Demo

Click to play with sound.

---
name: Motion Design Principles
description: The craft layer for motion: pick the right easing (ease-in / ease-out / ease-in-out / spring), get timing and spacing right, build the anticipation→action→follow-through arc, and apply Disney's 12 principles to UI and product video. Use when animating any UI transition, modal, button, page load, or product-video scene, or when someone says "make this feel less janky", "smoother", "more polished", "more alive", "the animation feels off", "why does this look cheap", or asks "ease-in or ease-out" / "spring or interpolate". Do NOT use to plan shots, scene order, or beat lists — use video-storyboard instead; do NOT use to direct a full product demo (cursor moves, screen captures, callouts) — use product-demo-director instead; do NOT use to animate text/letterforms — use kinetic-typography instead; do NOT use to time motion to a beat or score — use sound-and-music-sync instead; do NOT use to crop/reframe for a platform — use social-video-formatter instead; do NOT use for light/exposure/color motion — use motion-color-and-light instead.
---

# Motion Design Principles

This is the taste layer. It decides *how* something should move so it reads as
polished and intentional instead of janky, floaty, or cheap. It does not write
the code that plays the motion — once you have decided the curve, the timing, and
the arc, that decision is the *input* to a directing/render skill (for product
video, hand it to **product-demo-director**) or to your CSS/JS transition (for
UI). Keep the two jobs separate: this skill owns the judgment; the directing
skill owns the orchestration and mechanics.

Fire on anything about how motion *feels*: "make this less janky", "smoother",
"more polished", "more alive", "the easing is off", "this looks cheap", "should I
ease-in or ease-out", "spring or interpolate".

## When to use a sibling instead

This skill is the curve/timing/arc judgment only. Defer when the real question is:

- **Which shots, scene order, or a beat list** → **video-storyboard**.
- **Directing a full product demo** — cursor moves, screen captures, feature… install to load the full skill