cycle-atlas/.agents/skills/motion-art-direction/references/direction-playbook.md

Motion Direction Playbook

Depth behind the SKILL.md frameworks: a brief template, filled motion-language specs for five tone cells, brand→motion translation, a direction-notes template with worked entries, an easing cheat sheet, and a pre-render checklist.

Creative brief template

Fill before any other decision. One line per row — if a row can't be answered, the piece isn't ready to direct.

PIECE:        <name / working title>
AUDIENCE:     <who, and what they already know>
ONE MESSAGE:  <the single thing they remember after watching>
PLATFORM:     <YouTube / Reels / in-app / landing hero — sets aspect, sound, duration>
DURATION:     <seconds; shorter = fewer ideas, not faster ideas>
MOOD:         <exactly 3 adjectives, e.g. "confident, precise, warm">
BRAND CUES:   <colors, type, logo motion rules, any existing motion system>
CONSTRAINTS:  <must-include / must-avoid; legal supers; localization>
REFERENCE:    <1–3 links + one line on WHAT to borrow from each>

The 3 adjectives are load-bearing: they resolve every later judgment call. "Confident, precise, warm" rules out bouncy overshoot (not precise) and cold linear snaps (not warm) on its own.

Filled motion-language specs (five tone cells)

Each is internally consistent — copy the closest one and adjust. Easings are CSS cubic-bezier; the same curves map to GSAP eases and Lottie keyframe handles.

Calm + Soft — luxury / wellness / editorial

Property	Choice
Easing	cubic-bezier(0.4, 0, 0.2, 1) in/out, long tails
Base unit	0.6s (micro 0.3s, hero 1.2s)
Transition	Slow crossfade + gentle scale; no hard cuts
Stagger	120ms, generous
Intensity	Travel ≤ 16px, scale 0.98→1.0, zero overshoot
Hold	≥ 0.6s stillness; let frames breathe

Calm + Sharp — premium tech / fintech

Property	Choice
Easing	cubic-bezier(0.22, 1, 0.36, 1) decel; exits cubic-bezier(0.4, 0, 1, 1)
Base unit	0.4s
Transition	Match-cut + crossfade only
Stagger	60ms cascade
Intensity	Travel ≤ 24px, scale 0.96→1.0, overshoot ≤ 2%
Hold	≥ 0.3s

Kinetic + Sharp — sports / hype / gaming / launch

Property	Choice
Easing	cubic-bezier(0.16, 1, 0.3, 1) hard-out; snaps near-instant
Base unit	0.25s (micro 0.12s)
Transition	Hard cuts on beats; speed-ramp into drops
Stagger	40ms, tight machine-gun
Intensity	Big travel, scale 1.18→1.0 overshoot on impact
Hold	≥ 0.2s, brief — energy over rest

Kinetic + Soft — playful / lifestyle / kids

Property	Choice
Easing	Spring / cubic-bezier(0.34, 1.56, 0.64, 1) overshoot
Base unit	0.4s, loose
Transition	Bouncy pushes, squash-and-stretch wipes
Stagger	80ms, irregular feels human
Intensity	Generous bounce, secondary follow-through
Hold	≥ 0.3s

Neutral data-story — explainer / dashboard / report

Property	Choice
Easing	cubic-bezier(0.25, 0.1, 0.25, 1) calm in/out
Base unit	0.5s; count-ups 0.8–1.2s
Transition	Cross-dissolve between data states; never wipe a chart
Stagger	80ms per series/bar
Intensity	Number eases to value; axes static; no overshoot on quantities
Hold	≥ 0.5s on each datapoint so it can be read

Brand → motion translation

Brands describe themselves in adjectives; direction converts those to motion parameters.

Brand word	Easing	Timing	Intensity	What to avoid
Premium / luxury	Long, soft decel	Slow, generous holds	Minimal travel, no overshoot	Bounce, fast cuts, spins
Trustworthy / precise	Clean decel, symmetric	On-grid, multiples of base	Small, controlled	Wobble, irregular stagger
Energetic / bold	Hard-out, snappy	Fast, syncopated	Big scale, overshoot on beats	Slow fades, dead air
Friendly / human	Slight overshoot/spring	Loose, slightly irregular	Soft bounce, follow-through	Robotic linear, perfect symmetry
Innovative / techy	Decel with subtle anticipation	Tight, layered staggers	Crisp, geometric	Skeuomorphic squash, grunge

Map only the 2–3 strongest brand words. Trying to honor every adjective produces mush.

Direction-notes template (per shot)

Direct intent, not keyframes — let the technique skill choose exact values within the spec.

SHOT <n>  [t = 0.0–0.0s]
PURPOSE:   <why this shot exists — what the viewer should feel/learn>
HERO:      <the one element; how it enters and lands>
SUPPORT:   <secondary elements; how they yield to the hero>
TEXTURE:   <ambient/background behaviour, if any>
TRANSITION IN/OUT: <from the locked transition family only>
BEAT:      <audio mark the key move lands on, if scored>
NOTE:      <any deliberate break from the spec + the reason>

Worked example (Calm + Sharp, premium tech)

SHOT 3  [t = 6.0–9.5s]
PURPOSE:   Reveal the dashboard as effortless and accurate.
HERO:      Dashboard card scales 0.96→1.0 over 0.8s on the decel ease, soft landing.
SUPPORT:   Three metric chips cascade in, 60ms stagger, 0.4s each, eased out so the
           eye finishes on the card, not the chips.
TEXTURE:   Grid lines drift 2px over 8s, 8% opacity — subliminal only.
TRANSITION IN/OUT: Match-cut from the prior logo mark / crossfade to shot 4.
BEAT:      Card lands on the downbeat at 6.4s.
NOTE:      No overshoot anywhere — this is financial data; overshoot reads as imprecise.

Worked example (Neutral data-story, count-up)

SHOT 5  [t = 12.0–15.0s]
PURPOSE:   Land the headline number ($1.4M) so it's read and believed.
HERO:      Number eases from 0 to 1,400,000 over 1.1s; decelerates so the final
           digits settle slowly and feel exact.
SUPPORT:   Caption fades in after the count completes (not during) — don't make
           the viewer read while a number is still moving.
TEXTURE:   None. The frame holds still for 0.7s after — stillness sells accuracy.
TRANSITION IN/OUT: Cross-dissolve from the bar chart; cross-dissolve out.
NOTE:      Hold the final value on screen ≥ 0.5s before any exit.

Easing vocabulary cheat sheet

Curve	cubic-bezier	Feel	Use for
Decelerate (ease-out)	0, 0, 0.2, 1	Arrives, settles softly	Entrances, landings — the workhorse
Accelerate (ease-in)	0.4, 0, 1, 1	Leaves with intent	Exits, things flying off
Standard (in-out)	0.4, 0, 0.2, 1	Smooth both ends	On-screen repositioning
Emphasized decel	0.22, 1, 0.36, 1	Confident, premium landing	Hero reveals (calm-sharp)
Hard out	0.16, 1, 0.3, 1	Snappy, energetic	Kinetic pieces, hype
Overshoot	0.34, 1.56, 0.64, 1	Springy, playful, alive	Friendly/kinetic-soft only

Rules of thumb: entrances ease out (decelerate in), exits ease in (accelerate away). Avoid linear except for continuous loops (rotation, marquees, ambient drift). Never ship default ease — it's the un-decided curve and reads as unconsidered.

Pacing map

Sketch energy across the timeline before timing any single move. A typical 30s arc:

energy
  ^            ____ peak (the one "wow")
  |          /     \
  |    build/       \ settle
  |   /              \____ end card hold
  |__/                       
  +----------------------------------> time
   open   build      peak    resolve

Vary deliberately: a hold after a fast sequence makes the next move hit harder. Density of cuts is a dial — turn it up for tension, down for gravity. Match key landings to audio beats where scored.

Pre-render direction checklist

• Brief complete; one message and exactly 3 mood adjectives written down.
• Tone placed in a single cell of the energy matrix — not straddling two.
• Motion-language spec filled, every row a single choice.
• ≤ 2 primary easing curves used across the whole piece.
• All durations are multiples of the base unit.
• Only the chosen transition family appears between shots.
• Stagger rhythm identical across all grouped reveals.
• Every frame has exactly one hero; support never competes.
• Restraint pass done — listed what stays static and why.
• Hold discipline respected; no two moves stacked without rest.
• Exactly one "wow" moment.
• Numbers/quantities ease to value, hold ≥ 0.5s, and don't overshoot.
• Pacing map drawn; key moments land on beats (if scored).
• Brand cues honored; nothing animated that the brand wouldn't.

---

Built by the team behind iart.ai

This skill is part of an open motion-graphics collection from iart.ai — the AI motion agent that turns data, scripts, and designs into editable motion graphics (Remotion → MP4). If you'd rather not hand-build this, iart.ai can act as the motion director — apply one consistent motion language and your brand across every shot, then render the piece. → iart.ai