The motion studio process.
How to direct a coding agent to make motion video that looks designed, not defaulted. Five layers, ten steps, six gates, and one prompt you can paste into any build agent.
- Layers
- 5Director to Critic
- Steps
- 10In this order
- Gates
- 6Each leaves evidence
- Prompt
- 1The production contract
What you'll walk away with
By the end of this, you will know exactly how to run a code-rendered motion video with an AI agent, from brief to final export, with stop points that keep it from shipping generic output.
Set it up once on your next video. Every video after that reuses the same folder, the same checklist and the same render contract. You only swap the brief and the assets.
- A director's brief that keeps product facts separate from creative choices
- A style guide written from real references, with a do-not-copy list
- A shot list where every beat has a time, an entry state, an exit state and a purpose
- A renderer that can draw any single frame on demand
- A contact sheet and a critique loop that fixes the three worst defects, locally
- Wide and vertical versions built as two compositions, not one crop
- A reusable studio folder and six gates, each with evidence on disk
- One production contract prompt for any build agent
Why most AI motion videos look the same
Generic output is the model filling missing decisions with its safest defaults.
You ask for a video. The agent has no brief, no reference, no shot list. So it guesses. Big centered text, a gradient, everything fades in, logo at the end. It is not being lazy. It is filling every blank you left with the most average answer it knows.
The difference is not a secret prompt. It is the system around the model.rari, Motion Engineering
The fix is to remove the missing decisions before the first render. That is what this process does. It splits the work into layers, puts each layer in a file you can read, and stops the agent at gates where a human decides.
Write a vibe prompt, wait for an MP4, judge the whole thing, ask for "make it better," and regenerate from scratch.
The agent writes code that answers "what is on screen at time t?" You review decisions in files and frames on a sheet. A wrong title timing is one number to change, not a new video.
The five layers, and what each one owns
Every motion video answers five questions. The model can help with all five. It is never allowed to collapse them into one uninspected step.
brief.md per project: one sentence, audience, duration, formats, a facts file and a banned list. The script is the spoken line. The brief is the decision the script serves.
style-guide.md per project, written from references the agent actually inspected: palette, type, composition, pacing, motion, texture and a "do not copy" list. Your house brand rules sit underneath it.
shotlist.md: every beat with time, entry state, exit state and purpose. A beat with no purpose is cut. You approve the storyboard before anything is built.
A seekable renderer. Every frame is render(t, shotlist, assets, tokens, seed). No hidden clock, no unseeded randomness. Reusable components are the vocabulary.
Automated checks plus a contact-sheet critique: the three largest defects, each with a timestamp, evidence and a local fix. Patch those sections only and re-render those frames. Your own notes are the human half.
The rule: the model may fill any of the five layers. It may not skip one.
The ten steps, in order
Run them top to bottom on every video, short or long. Each step has a goal, the action, and what you should have when it's done.
Write a director's brief, not a vibe prompt
Create brief.md with four blocks: FILM, ASSETS, VISUAL RULES, DELIVERABLES. Keep facts about the product separate from choices about the film.
The model may invent a camera move. It may not invent a dashboard, a number, or a word.
FILM - One sentence the viewer should remember: - Audience: - Duration: - Formats (e.g. 16:9, 9:16): ASSETS (real only) - Logo: - Real product screens: - Brand tokens (colors, fonts): - Audio / voiceover: VISUAL RULES - Keep: - Avoid: - Never invent screens, metrics or on-screen words. DELIVERABLES - Storyboard - Contact sheet - Final export(s) - Poster frame - Editable source
Give it a reference it can inspect
Drop frames or reels you like into assets/references/. Have the agent study them and write the style guide. For product films, collect the exact real screens you want animated and list them.
Inspect every file in assets/references/. Then write style-guide.md with: - Palette as hex values - Type: family, width, weight and scale - Composition: where the eye goes first - Pacing: average time between meaningful changes - Motion verbs (how things move) - Texture - A DO-NOT-COPY list If a product screen I need is missing from assets/, stop and ask me. Never draw a convincing fake.
style-guide.md with hex codes, type specs and a do-not-copy list. A missing asset stops the run with a question.Plan states and beats, not effects
Write shotlist.md, one row per beat. For UI, write a state list first so one object stays recognisable while it changes:
| Time | What the viewer knows now | Entry state | Exit state | Purpose | |------|---------------------------|-------------|------------|---------| | | | | | |
The shot list is a contract. If the agent cannot say why a shot exists, it is cut.
Choose the renderer on purpose
Pick a code renderer, such as HyperFrames or Remotion. Use the smallest system that supports the film you plan to make again. Three things are non-negotiable:
- Seekable: frame 240 renders without rendering frames 0 to 239 first
- Repeatable: one render command, same output every time
- Editable: the source stays in files you can change
Give motion weight
Write one motion rule per object class into style-guide.md. Not everything is a spring.
| Object | Rule |
|---|---|
| Micro UI | Quick, minimal overshoot |
| Panels | Controlled settle |
| Camera | Slow, almost invisible |
| Headlines | Strong entrance, then a stable hold |
| Mascots, stickers | Playful and clearly intentional |
Put sound on the same timeline
Inspect frames before the film
Render a contact sheet first: one frame per beat, plus a strip around the fastest transitions. Check it against this list:
- Text readable at phone size
- Nothing crossing the safe area
- Real assets, nothing invented
- Consistent type and color
- No awkward mid-transition frames
- Cuts and sound cues land together
- First two seconds hold a real hook
- Last frame strong enough to be a poster
Judge only the rendered frames on this contact sheet. Do not describe what you intended to make. Name the three largest defects. For each one give: - the timestamp - the evidence (what is visibly wrong) - a local fix Patch only those sections, then re-render only those frames.
Make variants from the source, never a crop
Package the studio, not the chat
Keep every project in the same folder structure:
motion-studio/ brief.md style-guide.md shotlist.md assets/ src/ reviews/ out/
The next video swaps the brief and the assets. It keeps the render contract, the checklist and the delivery structure.
Give long runs gates, not freedom
reviews/.The six gates
Each gate leaves evidence in reviews/. If the evidence isn't on disk, the gate didn't happen.
assets/ list and the references folder.style-guide.md and shotlist.md approved. This is your storyboard sign-off.The production contract
Paste this into any build agent at the start of a video. Fill in the brackets. It carries the whole process in one prompt.
You are directing and engineering a code-rendered motion film. Goal: a [duration]-second [format] film for [audience]. The viewer should remember: [one sentence]. Inputs: only the supplied assets and the spoken words in the script. Inspect assets/references and write style-guide.md. Write shotlist.md with timestamps, entry states, exit states and purpose. Build: [your renderer, e.g. HyperFrames or Remotion]. Every frame seekable and deterministic. Motion, sound cues and transitions on one timeline. Editable source and a repeatable render command. Reusable components from the kit; on-screen text only from the script. Review gates: 1. Show the style guide and shot list before building. 2. Show a contact sheet before the full render. 3. Score hook, readability, continuity, motion and sound sync. 4. Fix the three worst defects and re-render those sections only. 5. Export 16:9 and 9:16 as separate compositions, each with its own contact sheet. Deliver: finals, poster frames, contact sheets, source, an assets list, and a short note on what still needs a human. Stop and ask when an asset is missing or a reference is unclear. Never claim done because a command exited 0.
Where it goes wrong
The mistake that taught me this: I let an agent render a full batch of frames from a script with no style guide and no shot list. It came out flat and had to be redone. These are the rules I run now.
Rendering before Gate 2
No render until the style guide and shot list exist on disk and you've approved them.
Reviewing a hundred thumbnails
Stills before sheets before films. Gate 3 is a handful of 100% crops.
Critique as another full pass
Three defects, with timestamps and local fixes, patched locally. Not a full regenerate.
Cropping vertical from wide
Vertical and wide are two compositions from one shot list. Never a crop.
Runs that can't resume
The agent saves its work after each unit and writes evidence to reviews/ as it goes, so a stopped run resumes from its gate.
Convincing fakes
The agent never invents a screen, a metric or a word. A missing asset stops the run and asks.
The checklist
Same order as the steps. Tick as you go. It saves in this browser.
Want to build your studio with people doing the same?
Bring your brief and your first contact sheet to the Lab and build it with people running the same process. Free guides stay free. The room is where the builds happen.
Join the Lab →