motion-principles

# 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 start, smooth land | > **Exit is always more subtle than enter.** > Enter: 300ms ease-out, full choreography. Exit: 200ms ease-in, opacity only. ### Native easing equivalents (cross-platform) | Web (CSS / JS) | SwiftUI | Compose | |---|---|---| | `cubic-bezi...