# Motion Principles

Motion design foundation - timing, easing, enter/exit patterns, accessibility...

- Repository: https://github.com/AThevon/genjutsu (721 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add AThevon/genjutsu --skill motion-principles -g -a claude-code -y`
Codex: `npx skills add AThevon/genjutsu --skill motion-principles -g -a codex -y`
Cursor: `npx skills add AThevon/genjutsu --skill motion-principles -g -a cursor -y`
Gemini CLI: `npx skills add AThevon/genjutsu --skill motion-principles -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add AThevon/genjutsu`

## Description

Motion design foundation - timing, easing, enter/exit patterns, accessibility, performance.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

> **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.

### Native easing equivalents (cross-platform)

The rest: https://github.com/AThevon/genjutsu/blob/HEAD/skills/_jutsu/motion-principles/SKILL.md