Why HyperFrames as the Motion Engine?
Frame-accurate, reproducible motion graphics built with HTML and GSAP that can be edited visually without code.
Why agents must never rush straight to code: understand concepts, storyboards, TASTE.md, and QA approval gates.
An AI agent can write a motion graphic in one go. What goes wrong is everything around it: you never chose the story, a "small change" overwrites the version you liked, and nobody knows which render was approved. The MotionMind skill splits the job into four gates. At each one the agent stops and waits; nothing moves on until you say so.
After the brief, the agent writes two or three genuinely different stories to plan/concepts.md: different hooks and endings, not the same idea in another colour. You pick one, or combine them. This is the cheapest moment to change direction, because nothing has been built yet.
The file looks like this:
# Concepts — demo/launch-6s
Brief: morning promo for Demo Coffee · Format: 9:16, 6 s · Audio: music + SFX
## 1. Steam rises — the cup wakes up
- Story (0–3 s hook → middle → CTA): a still cup, steam rises, the line lands, CTA
- What the viewer sees: the cup icon on night blue, two lines of type, the CTA pill
- Why it works for morning commuters: one calm image, readable in a scroll
- Risk / needs: the logo SVG from shared/brands/demo/
## 2. First sip — close-up, back to the logo
- …
**Chosen:** _(filled after the user picks)_
Your reply can be a number, or a mix:
2, but end on the clock from concept 3.
The chosen concept becomes a per-second table in plan/storyboard.md: what's on screen, the text, the motion and the sound for each beat. The style is locked in TASTE.md: palette with roles, fonts, easing and music. Later versions read it first, so v2 looks and moves like v1. More in Style Memory with TASTE.md.
A storyboard for the Demo Coffee promo:
| Time | Visual | On-screen text | Motion | Sound |
|---|---|---|---|---|
| 0.0–1.5 | Cup on night blue | — | cup rises 30 px, power3.out 0.5 s | pop |
| 1.5–3.0 | Steam rises | Fresh every | words rise 40 px, 0.4 s apart | whoosh |
| 3.0–4.5 | Word lands | morning. | accent in yellow | click |
| 4.5–6.0 | CTA + logo | demo.example | CTA held still ≥ 1.5 s | chime |
Approve it, or approve with a change:
Approved. Hold the CTA a little longer than the table says.
Only now does the agent write code. motionmind init creates the version folder with a pinned HyperFrames project and a copy of your brand files. The agent writes one scene per file, runs check and snapshot after every change, and looks at the frames itself before showing you anything. The draft render is logged as staging.
These are the commands it runs, so you can follow along or run them yourself:
motionmind init demo/launch-6s v1-steam --resolution portrait
cd projects/demo/launch-6s/runs/v1-steam/src
npx hyperframes check
npx hyperframes snapshot --at 0.5,2,4.5 --no-end
cd - && motionmind render demo/launch-6s v1-steam
Watch the draft in MotionMind Studio: player, contact sheet, loudness, and every earlier version to compare. Give notes in the chat, or press Edit in HyperFrames to change text, timing or audio yourself. While you edit, the version is locked for the agent, so the two of you never overwrite each other.
A note in the chat:
Revise demo/launch-6s v1-steam: the CTA is too small and the second line comes in too late.
Render again when fixed.
Or open the editor yourself:
motionmind edit demo/launch-6s v1-steam
Before production, the agent checks the render against these targets:
| Check | Target |
|---|---|
| Loudness | −14 LUFS ±0.5 integrated |
| True peak | ≤ −1 dBFS |
| 9:16 safe area | headline, UI and CTA within y 285–1635 |
| CTA | still and readable for at least 1.5 s at the end |
When you say so, it promotes the version. The CLI refuses a version that misses the loudness numbers unless you override it (--force, or the checkbox in the Studio), and the override is written to LOG.md. The previous production version of the same aspect ratio is archived, never deleted. Why these numbers: Loudness Standards: Why −14 LUFS?
Ask in the chat, or promote it yourself (the run ID is on the run page):
Looks good. Promote demo/launch-6s v1-steam to production.
motionmind promote demo-launch-6s-v1 --stage production
v2 instead of overwriting v1.You can skip the gates, but only by saying so. The agent then makes the choices itself; production still waits for your say-so:
Use the motionmind skill. A 6-second 9:16 promo for Demo Coffee, CTA demo.example.
No need to ask: pick the strongest concept, build it and render a draft.
Frame-accurate, reproducible motion graphics built with HTML and GSAP that can be edited visually without code.
Lock color roles, typography, easing curves, and audio rules so subsequent versions stay consistent.
Eliminate randomness and clocks in code scenes to guarantee identical frame-for-frame re-renders.
Open your terminal, launch motionmind ui, and brief your AI agent.