Motion Principles
Motion design foundation - timing, easing, enter/exit patterns, accessibility...
Install
npx skills add AThevon/genjutsu --skill motion-principles -g -a claude-code -y- Repository
- AThevon/genjutsu721
- Category
- Design
- Updated
- 3d ago
- License
- See repository
- Context cost
- Mediumabout 2,234 tokens
- Runs scripts
- No, instructions only
What it does
Motion design foundation - timing, easing, enter/exit patterns, accessibility, performance.
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 start, smooth land |
Exit is always more subtle than enter. Enter: 300ms ease-out, full choreography. Exit: 200ms ease-in, opacity only.
