motion-art-direction
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"
By iart-ai · 839 installs
npx skills add iart-ai/motion-design-skills --skill motion-art-direction
Source repository · Upstream listing
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.