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.
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\", \"the animation feels off\", \"why does this look cheap\", or asks \"ease-in or ease-out\" / \"spring or interpolate\". Do NOT use for shot planning (use video-storyboard), directing a product demo (use product-demo-director), animating text (use kinetic-typography), timing to music (use sound-and-music-sync), platform reframing (use social-video-formatter), or color and light (use motion-color-and-light)."
---
# 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… load the full skill through Skill Me