motion-principleslisted

> **Version-sensitive.** Every API name, SDK gate and browser-support claim below was > verified on **2026-09-08** against primary sources. What against, and when, is in > `_jutsu/VERSIONS.md`. If that date is old, re-verify before acting on a version number. # Motion Principles > The foundation. Loaded by every creative skill invocation. > Concise rules here. Deep-dive in `references/`. --- ## Timing Rules | Context | Duration | Why | |---|---|---| | Micro-interaction (toggle, hover, focus) | 100-150ms | Instant feedback, no perceived delay | | UI transition (modal, drawer, tab switch) | 200-300ms | Smooth but never sluggish | | Page/route transition | 300-500ms | Establishes spatial narrative | | Scroll-driven / 3D | Free (progress-based) | Tied to user input, no fixed duration | **Frequency rule:** The more often an animation plays, the shorter and subtler it must be. A button hover (1000x/day) = 100ms opacity. An onboarding reveal (1x ever) = 600ms+ full choreography. --- ## Easing Cheat Sheet | Action | Easing | Why | |---|---|---| | Element enters | `ease-out` / spring | Decelerates into resting position (natural arrival) | | Element exits | `ease-in` | Accelerates away (gets out of the way) | | Element moves between states | `ease-in-out` | Smooth start and stop | | Scroll-synced | `linear` / `none` | Matches 1:1 with input, no lag perception | | Bouncy/playful | spring (underdamped) | Overshoot creates life | | Snappy UI | `cubic-bezier(0.2, 0, 0, 1)` | Fast