Motion Director

Most AI-made motion looks cheap for reasons that have nothing to do with how much is on screen: everything moves at once, moves linearly, never holds still, and has no sound. This skill is the craft that fixes that — distilled from the studios and designers who set the bar.

The one law: movement is cheap; timing is the craft. Judge every beat by its easing, its holds, and whether sound lands on the exact frame of the hit — never by how much moves. A 90s film with 8 crafted scenes beats a 45s film with 20 rushed ones, every time.

1. Studio field guide — who sets the bar, and what to steal

Study a reel from each before building, and name out loud the 2–3 moves you'll borrow. You can't always fetch their reels, but you know the register; Linear, Vercel, Raycast, Stripe and Arc launch films are its SaaS-tier expression — aim there.

Buck — the enterprise standard (Google, Apple, Spotify, Netflix). No single look by design; the constants are storytelling, playfulness, and range. They are a design-driven shop with cross-functional teams, and their process is think & wonder → play & explore → make & improve: many storyboard versions, animators filming themselves for reference, and often 3D pre-vis for exact timing before committing to the final medium (on "Come Together" they timed it in 3D, then laser-cut the shapes for stop-motion). Steal: design the frames first; let the idea pick the technique, not vice versa.
Giant Ant — narrative/emotion first. They start from two questions — who are we talking to, and what do we want them to feel? — then serve it with handmade, character-driven, often lineless craft. Their DOXA trailers are "one shot, one object, solid background" that build suspense to a reveal with slow anticipation and clever sound design. Steal: one clear subject per shot; earn the reveal with anticipation + sound.
Ordinary Folk (Jorge Canedo) — craft-led, cinematic, geometric. Steal: detailed keyframing tied tightly to audio, built from simple shapes.
Oddfellows — tasteful, characterful, design-forward frames. Steal: every still frame should look like a poster.
ManvsMachine — London; where motion meets graphic design and branding. Bold typography, 3D, and material realism (C4D + Arnold/VRay, Houdini, comp in AE/Nuke). Steal: type as a hero object; real materials, light and depth.
Territory Studio — film UI/FUI (Guardians of the Galaxy, Ex Machina, Blade Runner 2049). Steal: the reference when your piece shows an app/product UI — interface as designed, legible, purposeful motion.
Vucko (Andrew Vucko) — the UI/brand-motion tier: rhythm and restraint, clean-but-smooth cuts, near-invisible transitions, a different color per shot. Steal: restraint reads as expensive.

2. Designers to study — and the one lesson each

Jorge R. Canedo E. / "Jr.canest" (ex-Buck, ex-Giant Ant; founder, Ordinary Folk) — keyframe detail locked to sound. He also teaches the 10 principles of motion design (Disney's 12, consolidated for mograph) — section 3.
Andrew Vucko — rhythm and restraint; make the transitions disappear.
Ash Thorp — title & UI design pedigree (X-Men: First Class, Dawn of the Planet of the Apes, Spectre, CoD: Advanced Warfare); co-founder of Learn Squared. Lesson: design systems and type carry a sequence as much as motion does.
Emanuele Colombo (founder, Antimatter) — loops you can't look away from: simple shapes, bright contrasting color, "classy movements" and unexpected transitions.
Markus Magnusson — the satisfying character loop: a very simple illustrated style, impeccable timing, seamless loop points.

3. The principles canon (Disney's 12 → the 10 for motion, applied to graphics)

Not just for characters — these are why abstract graphics feel alive:

Timing & spacing — the whole game (section 4).
Easing / slow-in & slow-out — nothing with mass moves at constant speed; linear reads as cheap.
Anticipation — a tiny wind-up before a move tells the eye it's coming.
Follow-through & overlapping action — parts settle at different times; trailing elements lag.
Squash & stretch — give shapes mass; stretch along the travel path (see smear, section 8).
Staging — one clear focal point per frame; direct the eye.
Secondary action — supporting motion that enriches the hero move without competing.
Arcs — natural motion travels on curves, not straight lines.
Exaggeration — push the key moment past "accurate" for impact (overshoot).
Appeal / solid design — the frozen frame must already look designed.

4. The method (run in order — don't jump to animating)

One idea. The single thing the viewer should feel/remember, in a sentence. Every beat pays it off or is cut.
Story spine, value first. Front-load the payoff — attention falls off fast. Hook → tension → mechanism → proof → CTA.
Design the frames. Make each key frame look like a poster before anything moves (the Buck/Oddfellows order). If the still is weak, motion won't save it.
Storyboard with holds written in. For every beat, name its hold — the still moment where the eye reads. No hold = amateur.
Block timing with linear motion first. Get rhythm and holds right as a cut; pacing lives in the edit, not the curves.
Ease, then layer secondary motion. Curves, overshoot, offset, arcs (sections 5–6). This is where cheap becomes expensive.
Design sound to frame. Transients on the exact frame of each hit; music drop on the single biggest reveal (section 9).
Texture & depth pass (section 7) — last, and subtle.
Pre-flight gate (section 11). Nothing red.

5. Craft rules with numbers

Timing & pacing

Front-load entrances: cover most of the distance early, then settle; exits reverse it.
Hold. Every reveal ends in stillness before the next move. If copy is still moving into the next cut, there are no holds.
Stagger in frames, not pixels — 2–5 frames (~0.06–0.16s @30fps). The eye reads time over distance.
Anticipation / overshoot / settle around a key action ≈ 2–3f anticipate, 1f overshoot, 4–6f settle.
One hero move per beat. Most-important thing moves most; everything else supports and is offset.

Easing (never linear, never default-only)

Default "Easy Ease" is a starting point, not a finish — polished work uses custom curves.
Overshoot on snaps/scales: push ~105% then settle. Author overshoot/bounce on the value/position graph; use the speed graph for rhythmic pacing.
Ease strength by role (graph influence): ~33% background/secondary · 60–75% polished UI/corporate · 85–100% high-energy kinetic type.
Consistency = intention: same curve family across the same element type. Mismatched curves read as sloppy.
Readability beats flash for brand/explainer copy — smoother, slower ease-outs so words can be read.

Staging, color, type

Decide the eye-path per frame before animating; keep ~40% quiet ground.
2–3 inks, held. Depth from a value range (near-black ink, true paper, one accent), not many hues. 8 colors = template.
Kinetic type: the typeface leads — font first, then letter-spacing, size, color, ground. Animate the word that carries the point; don't wiggle everything. Headline must be legible as a phone thumbnail.
Light has one direction; shadows/glows/highlights that agree read as crafted.

6. Secondary motion & arcs (the "expensive" layer)

Offset everything related. In a multi-element reveal: numbers first, then icons, then highlights — each a few frames behind. Trailing bits (accents, a logo's dot, a cursor) lag and settle after the hero.
Move on arcs, not straight lines, wherever travel is visible.
Keep secondary motion quieter than the hero — it supports, never competes.

7. Camera, depth & texture

Motion blur is a tell. Eased motion without blur still reads as a web animation. Can't blur (most web/CSS runtimes)? Compensate: shorter travel, tighter durations, fewer fast moves — or fake it (section 8).
Depth via layered move (the Keynote "Magic Move"/parallax trick): cut a scene into layers, move + scale them at slightly different rates so the eye travels through the scene. Rack-focus by blurring background layers; match that softness to the grain.
Grain ~50% opacity, added LAST so denoise doesn't eat it. 100% is too much. Never scale a grain overlay up (it softens, looks fake). Mask grain off text and UI.

8. Smear & snap (speed without more keys)

Smear frame = a drawn in-between that fakes blur over 1–2 frames: either an elongated/stretched shape bridging two poses, or multiples (the subject duplicated along its path). Animator-placed, so the silhouette stays readable through the blur.
Snap = hold-then-break: hold a pose briefly, then jump the gap with a 1–2f smear/stretch along the travel direction. Reads as speed with no extra poses.
Use sparingly and consistently — same intensity/shape/direction across the piece, aligned with the anticipation and follow-through so it's one motion language.

9. Transitions toolkit (how the best cut between beats)

Hard cut — for impact; cut on the audio beat. The default for fast, confident pieces. Don't overcomplicate.
Cut on action — cut mid-motion to a new angle/scene that continues the same motion (hide/reveal on a punch, throw, launch).
Match cut — carry a shared compositional element across the cut; cut at the element's fastest movement (the peak), not between static poses. A recurring anchor shape softens a hard cut.
Morph vs faked morph — a true morph changes path geometry (great for logos, hardest to do well). Most "morphs" are a cut hidden inside fast motion: match the subject's end/start position across the cut and let speed conceal it. Speed-morph during the fastest motion so the eye can't catch distortion.
Dynamic / infinite zoom — push through a sub-frame (window, screen, cursor) to reveal the next scene; control the speed deliberately.
Dissolve — reserve for time passing, montage, or fade-outs; rarely the right call in a punchy launch piece.

10. UI & product-in-motion register (for SaaS / dev-tool launches)

When the piece shows software, follow Apple's HIG motion stance + the interruptible-spring feel:

Motion conveys status, feedback, continuity — never decoration. "Don't add motion for the sake of motion."
Spring, not just ease, for UI: critically damped by default (smooth settle, no bounce); add a little bounce only when the gesture carried momentum. UI feels alive when motion starts from the current on-screen value, inherits velocity, and can be interrupted/reversed.
Show real product frames with depth and parallax (section 7), legible type, and one feature revealed at a time — the Territory/Vucko register, not fireworks.
Respect reduce-motion sensibilities: the piece should still read if the big moves were calmer.

11. Anti-slop checklist — why AI motion looks cheap (find → fix)

Tell	Fix
Everything animates at once	One hero move per beat; offset the rest 2–5 frames
Linear / default easing	Custom curves; overshoot on snaps; consistent curve per element type
Nothing holds still	Add a hold after every reveal; end motion 4–8f before the cut
Straight-line moves, no arcs	Put visible travel on a curve
6+ colors, flat	2–3 inks; depth from value + one accent
Tiny/too-fast text	Legible as a phone thumbnail; slow the ease-out; font leads
No motion blur, moves feel "web"	Shorter travel + tighter timing; fake with a smear/stretch
Flat, no depth	Layered parallax move; rack-focus blur on background
Silent, or SFX off the beat	Transients on the exact frame; music drop on the biggest reveal
Dissolves everywhere	Hard cuts on the beat; match-cut on a shared element
20 rushed scenes	Fewer scenes, more time each
Grain 100% / scaled / over text	~50%, added last, masked off text

12. Sound design (half the craft — budget real time)

Build bottom-up: sub-boom for weight (felt, not heard) → mid impact for the attack → top-end whoosh/noise for movement. Stack two takes of a hit for width.
Transient on the frame. The impact/boom lands on the exact frame of the reveal; a logo's swell resolves on the frame the mark appears.
Match a whoosh's length to the move's length; its peak sits at the landing/cut.
A riser that stops dead sets up a cut — the silence after is the effect. A whoosh+hit resolves a transition so it arrives somewhere.
Music: pick a bed with a clear build + drop; put the drop on your single biggest reveal. Check on laptop speakers — subs vanish there; don't let a hit depend on them.
Make the audio yourself — never ship silent. If a music/SFX/TTS engine is available, use it; otherwise synthesize locally with zero dependencies (pure-Node WAV: a shaped oscillator and/or noise per SFX, a BPM-locked arpeggio+kick bed). Place each transient on the exact frame of its hit. Full recipes + placement: see studio-motion-director/references/audio-production.md.

13. The gate (don't render until all true)

One idea, stated in a sentence; every beat pays it off.
Each key frame looks like a poster when paused.
Every beat has a hold; nothing moves into the next cut.
No linear/default-only easing; snaps overshoot; curves consistent per element type.
One hero move per beat; related elements offset in frames; visible travel on arcs.
2–3 inks; headline legible as a phone thumbnail.
Depth present (parallax/blur) or deliberately flat by design; grain subtle (~50%, last, off text).
Sound designed: transients on the frame, music drop on the biggest reveal, checked on laptop speakers.

14. HyperFrames / GSAP mapping (seek-safe)

Eases: power3.out/power4.out for front-loaded entrances; back.out(1.7–2) for overshoot snaps; power2.inOut for sweeps/scans. Never none/linear for anything with mass.
Overshoot without back: value-tween to 1.05 then 1.0.
Stagger in time: stagger:{amount:0.3, from:"start"} or explicit 0.06–0.16s offsets — not all at 0.
Holds: animate to the resting state, then leave it untouched until the next beat (gaps are holds).
Fake motion blur / smear: animate filter: blur() (e.g. blur(10px)→blur(0)) on fast entrances/exits, or a brief scaleX/scaleY stretch along travel; pair with short travel.
Parallax depth: put scene layers on separate elements and tween them at slightly different x/scale rates.
Count-ups / typing: drive onUpdate for numbers; animate max-width in ch with steps() for typing — both seek-safe.
Sound: <audio> on a high data-track-index; each SFX clip's data-start set to the exact reveal timecode (match the GSAP hit's frame); one continuous music bed at the root with its drop at the hero reveal. (Sourcing/placing audio: media-use + hyperframes-audio.)
Validate with hyperframes check — a clean layout/contrast/motion pass is the floor, not the ceiling.

Sources

Studios: Motion Array — Buck, SOM — Ryan Honey (Buck), Motion Array — Giant Ant, Motion Hatch — Jay Grandin (Giant Ant), Motion Array — ManvsMachine, Territory Studio (Wikipedia). Designers: Jorge Canedo — Behance & 10 principles of motion design, Ash Thorp (Wikipedia), Markus Magnusson — WNW, Emanuele Colombo — Motion Secrets. Technique: SOM — six transitions, morph vs match cut, smear frames (CG-Wire) & Rebusfarm, graph editor (designkkashi), easing & pace (Hanson), timing is the craft (PromoHyper). UI/motion: Apple HIG — Motion, Material — easing & duration. Texture/sound/structure: HolyGrain — film grain, A Sound Effect — sound design, Atomik Growth — SaaS launch videos.

arjunkshah12345-hash/motion-director-skill

motion-director-skill とは？

お気に入りのAIに質問する

ドキュメント