The 4-Gate Workflow: Don't Rush to Code
Why agents must never rush straight to code: understand concepts, storyboards, TASTE.md, and QA approval gates.
MotionMind doesn't generate pixels. Your agent writes a HyperFrames project (HTML, CSS and a GSAP timeline) and HyperFrames renders it to MP4. That one choice is why a MotionMind video can be checked, rebuilt and edited after the fact.
A Video Is a Web Page
Every element on screen is an HTML tag with a start time and a duration (data-start, data-duration), and the motion is a paused GSAP timeline. To render, HyperFrames opens the page in headless Chrome and seeks that timeline frame by frame. Coding agents write HTML, CSS and JavaScript every day, so they can read and change a video the same way they change a website.
This is a complete 6-second, 9:16 composition: a headline that rises in, an accent word, a CTA at 2.6 s. Copy it to try it yourself:
<!doctype html>
<html lang="en" data-composition-variables='[
{"id":"headline","type":"string","label":"Headline","default":"Fresh every"},
{"id":"accent","type":"string","label":"Accent word","default":"morning."},
{"id":"cta","type":"string","label":"CTA","default":"demo.example"}
]'>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1080, height=1920" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1920px; overflow: hidden; background: #0b0f17; }
#root { position: relative; width: 100%; height: 100%; font-family: "Outfit", sans-serif; }
#glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 35%, #1a2a5e, #0b0f17 60%); }
#title { position: absolute; left: 0; right: 0; top: 760px; text-align: center; color: #f4f5f2;
font-size: 120px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
#head, #accent { display: block; }
#accent { color: #ffea00; }
#cta { position: absolute; left: 290px; top: 1240px; width: 500px; height: 110px; border-radius: 55px;
background: #3f6bff; color: #f4f5f2; font-size: 48px; font-weight: 700; text-align: center; line-height: 110px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="6"
data-width="1080" data-height="1920">
<div id="glow" class="clip" data-start="0" data-duration="6" data-track-index="0"></div>
<h1 id="title" class="clip" data-start="0" data-duration="6" data-track-index="1">
<span id="head" data-var-text="headline">Fresh every</span>
<span id="accent" data-var-text="accent">morning.</span>
</h1>
<div id="cta" class="clip" data-start="2.6" data-duration="3.4" data-track-index="2"
data-var-text="cta">demo.example</div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
tl.fromTo("#head", { y: 40 }, { y: 0, duration: 0.6, ease: "power3.out" }, 0);
tl.fromTo("#accent", { y: 40, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.6);
tl.fromTo("#cta", { opacity: 0, y: 30 }, { opacity: 1, y: 0, duration: 0.4, ease: "power3.out" }, 2.6);
window.__timelines["main"] = tl;
</script>
</body>
</html>
You don't need MotionMind to run it. In an empty folder:
npx hyperframes init my-first-video --example blank
cd my-first-video
# replace index.html with the example above, then:
npx hyperframes preview
npx hyperframes check
npx hyperframes render -o first.mp4
preview opens HyperFrames Studio at http://localhost:3002; check reports layout and timing problems; render writes the MP4.
Same Source, Same Video
Every frame depends only on its time, so rendering the same source twice gives the same frames. The clip shows two renders of a 6-second demo: all 180 frames match. That's what makes versions trustworthy: a rendered version is frozen with its source and its pinned HyperFrames version, so it can be rebuilt exactly, and two versions only differ where something was changed. The rules behind it (no random values, no clocks) are in Determinism in AI Video.
Edit Without Prompting Again
Copy, colours and media you may want to change are declared as variables. In HyperFrames Studio you edit them in a panel, move clips on the timeline or swap audio, and the preview updates right away. No new prompt, no new generation. Open it from MotionMind Studio with Edit in HyperFrames (or motionmind edit <brand>/<campaign>); see Visual Editing in HyperFrames Studio.
The same variables work from the command line. One composition, a new line of copy, no edit to the file:
npx hyperframes render -o sip.mp4 --variables '{"headline":"Your first","accent":"sip."}'
What This Means for Your Video
| Benefit | Why |
|---|---|
| Exact text | Type is set in real fonts by the browser: sharp, and spelled exactly as written. |
| Your real brand | Logos, fonts and product screenshots are placed as files, not redrawn. |
| Checked before you see it | npx hyperframes check flags overlapping or clipped text, small type and low contrast. |
| Small changes stay small | Changing one word changes one word; the rest of the video stays as approved. |