Motion Direction
Make the creative decisions for a motion piece before anyone animates a frame. Direction is the judgment layer: it turns a brief and a brand into a small, repeatable set of motion rules — one easing vocabulary, one timing scale, one transition family — so every shot feels like it came from the same hand. Good direction is mostly subtraction: deciding what NOT to move.
When to use
- Starting any piece — explainer, launch film, UI demo, data story, loop — and the look/feel isn't decided yet.
- Animation feels "busy", "cheap", or "inconsistent" and the cause is decisions, not craft.
- Orchestrating other skills (gsap/lottie/shader/three.js): direction sets the rules they execute.
- Translating a brand or brief into directable, written choices a team (or an agent) can follow.
The one rule
Define the motion language first, then animate to it. A motion language is a short spec — pick one of each: easing family, base timing unit, transition family, stagger rhythm, motion intensity. Everything in the piece obeys it. Consistency reads as confidence; variety reads as noise. When in doubt, reuse, don't invent.
Direction workflow
| Step |
Decision |
Output |
| 1. Brief |
Audience, one message, platform, duration, mood (3 adjectives) |
One-line creative intent |
| 2. Tone & energy |
Where it sits on calm↔kinetic and soft↔sharp |
A point on the matrix below |
| 3. Motion language |
Lock the spec table |
The motion-language spec (filled) |
| 4. Hierarchy |
Rank what moves: hero / support / texture |
Motion hierarchy list |
| 5. Restraint pass |
Cut motion that doesn't carry meaning |
List of what stays static |
| 6. Shot direction |
Note intent per shot, not keyframes |
Direction notes (see template) |
| 7. Consistency check |
Audit against the spec |
Pass/fail per shot |
Tone & energy matrix
Place the piece on two axes; the cell dictates the motion language defaults.
|
Soft (organic, eased) |
Sharp (precise, snappy) |
| Calm |
Luxury, wellness, editorial — slow, long eases, generous holds, minimal stagger |
Premium tech, fintech — deliberate, clean linear-ish moves, tight but unhurried |
| Kinetic |
Playful, lifestyle, kids — bouncy/overshoot, springy, loose timing |
Sports, hype, gaming — fast cuts, hard snaps, aggressive overshoot on beats |
Pick one cell and commit. Mixing cells within a piece is the most common cause of "inconsistent" motion.
Motion personality (named presets)
The tone matrix tells you where the piece sits; a motion personality is the named, numeric preset you hand to whoever animates. Pick ONE per project and apply it everywhere. This is shared vocabulary — other skills (e.g. gsap-web, micro-interaction, the video packs) can just say "use the Premium personality."
| Personality |
Duration |
Signature easing |
Overshoot |
Reads as |
| Playful |
150–300ms |
ease-out-back / cubic-bezier(0.34,1.56,0.64,1) |
10–20% |
fun, bouncy, whimsical |
| Premium |
350–600ms |
cubic-bezier(0.4,0,0.2,1) |
0% |
elegant, minimal, luxury |
| Corporate |
200–400ms |
cubic-bezier(0.2,0,0,1) |
0–3% |
clean, professional, trustworthy |
| Energetic |
100–250ms |
ease-out-expo |
15–30% |
bold, dynamic, hype |
Default: Corporate for UI/product, Playful for illustration/lifestyle. Maps onto the matrix — Premium≈calm-soft, Corporate≈calm-sharp, Playful≈kinetic-soft, Energetic≈kinetic-sharp. The personality fills the "easing family / base timing unit / motion intensity" rows of the spec below.
The motion-language spec
The core artifact. Fill every row with ONE choice and reuse it everywhere.
| Property |
Choose one |
Example (calm-sharp / premium tech) |
| Easing family |
The signature curve for ~90% of moves |
cubic-bezier(0.22, 1, 0.36, 1) (decelerate, soft landing) |
| Base timing unit |
The atomic duration; build others as multiples |
0.4s (enters 0.4s, big moves 0.8s, micro 0.2s) |
| Transition family |
How shots connect |
Match-cut + crossfade only; no wipes/spins |
| Stagger rhythm |
Delay between grouped elements |
60ms cascade, top-to-bottom |
| Motion intensity |
Distance/scale/overshoot budget |
Travel ≤ 24px, scale 0.96→1.0, overshoot ≤ 2% |
| Hold discipline |
Minimum rest between moves |
≥ 0.3s of stillness after each beat |
Two eases maximum: one "in" (exits) and one "out" (entrances/landings). A third curve must justify its existence.
Motion hierarchy
Not everything earns motion. Rank every element, then animate down the list — and stop early. These three tiers are the universal three motion layers (see animation-principles): Hero = Primary, Support = Secondary, Texture = Ambient.
| Tier |
What it is |
How it moves |
| Hero |
The one thing the shot is about |
Gets the boldest, slowest, most-eased move; lands on the beat |
| Support |
Context that helps the hero land |
Smaller, faster, eased out of the way; never competes |
| Texture |
Background, grain, ambient drift |
Subliminal only — slow loops, low contrast, no hard cuts |
If two elements compete for the eye in one frame, the direction has failed. Demote one to support.
Restraint — what NOT to animate
The senior move. For each element ask: does the motion carry meaning? If not, hold it still.
- Don't animate the entire frame at once — stagger or hold a anchor so the eye has a home.
- Don't transition the transition (no animated wipe and a spin and a fade).
- Don't loop-animate text the viewer is still reading.
- Don't add overshoot to serious/financial content — it reads as toy-like.
- One "wow" moment per piece. A second one cancels the first.
Pacing & rhythm
Pacing is the edit's heartbeat. Vary it on purpose: tension (faster, tighter) → release (a hold). Map energy across the timeline before timing individual moves — most pieces want a low-energy open, a build, a peak, and a settled end card. Cut and land key moments on the audio (see launch-video for beat-syncing); silence and stillness are pacing tools, not gaps to fill.
Consistency check
Before sign-off, audit every shot against the spec table:
- Same easing family on comparable moves? (No stray
linear or ease.)
- All durations are multiples of the base unit?
- Only the chosen transition family between shots?
- Stagger rhythm identical across grouped reveals?
- Hold discipline respected — no two moves stacked without rest?
- Exactly one hero per frame?
Any "no" is a direction defect, not a craft preference — fix it before polishing.
Reference files
references/direction-playbook.md — worked examples of the motion-language spec for five tone cells, a full brief template, a shot-by-shot direction-notes template with example entries, brand→motion translation tables, an easing-vocabulary cheat sheet, and a complete pre-render direction checklist.
1---2name: motion-art-direction3description: This skill should be used when the user asks to "direct a motion graphics video", "do creative/art direction for a video", "define a motion language", "set the tone and pacing", "make the animation feel consistent", "decide what to animate (and what not to)", "turn a brief/brand into motion choices", or needs the senior creative judgment that sits above specific techniques (gsap/lottie/shader). Covers motion language, tone & energy, pacing/rhythm, motion hierarchy, restraint, and cross-shot consistency.4---56# Motion Direction78Make the creative decisions for a motion piece before anyone animates a frame. Direction is the judgment layer: it turns a brief and a brand into a small, repeatable set of motion rules — one easing vocabulary, one timing scale, one transition family — so every shot feels like it came from the same hand. Good direction is mostly subtraction: deciding what NOT to move.910## When to use1112- Starting any piece — explainer, launch film, UI demo, data story, loop — and the look/feel isn't decided yet.13- Animation feels "busy", "cheap", or "inconsistent" and the cause is decisions, not craft.14- Orchestrating other skills (gsap/lottie/shader/three.js): direction sets the rules they execute.15- Translating a brand or brief into directable, written choices a team (or an agent) can follow.1617## The one rule1819**Define the motion language first, then animate to it.** A motion language is a short spec — pick *one* of each: easing family, base timing unit, transition family, stagger rhythm, motion intensity. Everything in the piece obeys it. Consistency reads as confidence; variety reads as noise. When in doubt, reuse, don't invent.2021## Direction workflow2223| Step | Decision | Output |24|---|---|---|25| 1. Brief | Audience, one message, platform, duration, mood (3 adjectives) | One-line creative intent |26| 2. Tone & energy | Where it sits on calm↔kinetic and soft↔sharp | A point on the matrix below |27| 3. Motion language | Lock the spec table | The motion-language spec (filled) |28| 4. Hierarchy | Rank what moves: hero / support / texture | Motion hierarchy list |29| 5. Restraint pass | Cut motion that doesn't carry meaning | List of what stays static |30| 6. Shot direction | Note intent per shot, not keyframes | Direction notes (see template) |31| 7. Consistency check | Audit against the spec | Pass/fail per shot |3233## Tone & energy matrix3435Place the piece on two axes; the cell dictates the motion language defaults.3637| | Soft (organic, eased) | Sharp (precise, snappy) |38|---|---|---|39| **Calm** | Luxury, wellness, editorial — slow, long eases, generous holds, minimal stagger | Premium tech, fintech — deliberate, clean linear-ish moves, tight but unhurried |40| **Kinetic** | Playful, lifestyle, kids — bouncy/overshoot, springy, loose timing | Sports, hype, gaming — fast cuts, hard snaps, aggressive overshoot on beats |4142Pick one cell and commit. Mixing cells within a piece is the most common cause of "inconsistent" motion.4344## Motion personality (named presets)4546The tone matrix tells you *where* the piece sits; a **motion personality** is the named, numeric preset you hand to whoever animates. Pick ONE per project and apply it everywhere. This is shared vocabulary — other skills (e.g. `gsap-web`, `micro-interaction`, the video packs) can just say "use the Premium personality."4748| Personality | Duration | Signature easing | Overshoot | Reads as |49|---|---|---|---|---|50| **Playful** | 150–300ms | `ease-out-back` / `cubic-bezier(0.34,1.56,0.64,1)` | 10–20% | fun, bouncy, whimsical |51| **Premium** | 350–600ms | `cubic-bezier(0.4,0,0.2,1)` | 0% | elegant, minimal, luxury |52| **Corporate** | 200–400ms | `cubic-bezier(0.2,0,0,1)` | 0–3% | clean, professional, trustworthy |53| **Energetic** | 100–250ms | `ease-out-expo` | 15–30% | bold, dynamic, hype |5455Default: **Corporate** for UI/product, **Playful** for illustration/lifestyle. Maps onto the matrix — Premium≈calm-soft, Corporate≈calm-sharp, Playful≈kinetic-soft, Energetic≈kinetic-sharp. The personality fills the "easing family / base timing unit / motion intensity" rows of the spec below.5657## The motion-language spec5859The core artifact. Fill every row with ONE choice and reuse it everywhere.6061| Property | Choose one | Example (calm-sharp / premium tech) |62|---|---|---|63| Easing family | The signature curve for ~90% of moves | `cubic-bezier(0.22, 1, 0.36, 1)` (decelerate, soft landing) |64| Base timing unit | The atomic duration; build others as multiples | 0.4s (enters 0.4s, big moves 0.8s, micro 0.2s) |65| Transition family | How shots connect | Match-cut + crossfade only; no wipes/spins |66| Stagger rhythm | Delay between grouped elements | 60ms cascade, top-to-bottom |67| Motion intensity | Distance/scale/overshoot budget | Travel ≤ 24px, scale 0.96→1.0, overshoot ≤ 2% |68| Hold discipline | Minimum rest between moves | ≥ 0.3s of stillness after each beat |6970Two eases maximum: one "in" (exits) and one "out" (entrances/landings). A third curve must justify its existence.7172## Motion hierarchy7374Not everything earns motion. Rank every element, then animate down the list — and stop early. These three tiers are the universal **three motion layers** (see `animation-principles`): Hero = **Primary**, Support = **Secondary**, Texture = **Ambient**.7576| Tier | What it is | How it moves |77|---|---|---|78| Hero | The one thing the shot is about | Gets the boldest, slowest, most-eased move; lands on the beat |79| Support | Context that helps the hero land | Smaller, faster, eased *out* of the way; never competes |80| Texture | Background, grain, ambient drift | Subliminal only — slow loops, low contrast, no hard cuts |8182If two elements compete for the eye in one frame, the direction has failed. Demote one to support.8384## Restraint — what NOT to animate8586The senior move. For each element ask: *does the motion carry meaning?* If not, hold it still.8788- Don't animate the entire frame at once — stagger or hold a anchor so the eye has a home.89- Don't transition the transition (no animated wipe *and* a spin *and* a fade).90- Don't loop-animate text the viewer is still reading.91- Don't add overshoot to serious/financial content — it reads as toy-like.92- One "wow" moment per piece. A second one cancels the first.9394## Pacing & rhythm9596Pacing is the edit's heartbeat. Vary it on purpose: tension (faster, tighter) → release (a hold). Map energy across the timeline before timing individual moves — most pieces want a low-energy open, a build, a peak, and a settled end card. Cut and land key moments on the audio (see launch-video for beat-syncing); silence and stillness are pacing tools, not gaps to fill.9798## Consistency check99100Before sign-off, audit every shot against the spec table:101102- Same easing family on comparable moves? (No stray `linear` or `ease`.)103- All durations are multiples of the base unit?104- Only the chosen transition family between shots?105- Stagger rhythm identical across grouped reveals?106- Hold discipline respected — no two moves stacked without rest?107- Exactly one hero per frame?108109Any "no" is a direction defect, not a craft preference — fix it before polishing.110111## Reference files112113- `references/direction-playbook.md` — worked examples of the motion-language spec for five tone cells, a full brief template, a shot-by-shot direction-notes template with example entries, brand→motion translation tables, an easing-vocabulary cheat sheet, and a complete pre-render direction checklist.
2233admin