9:16 Social Safe Areas & Layout Rules
Keep text and CTAs within vertical margins (y: 285–1635) so social media UI overlays never cover them.
Most review notes are small: "use the other line", "the CTA comes in too late", "the music stops too abruptly". You don't need the agent for those. Every MotionMind version is a HyperFrames project, and HyperFrames Studio edits it directly: text, timing and audio, on a timeline, with a live preview. Every clip below is a real screen recording of a Demo Coffee draft.
1. Open the Version
On the version's run page in MotionMind Studio, press Edit in HyperFrames. From the terminal it's one command:
motionmind edit demo/launch-6s v2-safe
MotionMind starts HyperFrames Studio for that version's src/ folder and writes .editing.json next to it. While that file exists, the version is locked: the agent won't touch src/, so the two of you never overwrite each other. The run page shows editing, a link to the editor, and Done editing.
2. Change Text
Copy you may want to change is declared as a variable. Open the Variables panel, type, and the preview updates as you go. Then press Set default on each field you changed: typing only previews the value, and Set default writes it into the project so the render uses it.
3. Change Timing
Every element is a clip on the timeline. Drag a clip to move it; drag its edge to make it longer or shorter. Its animation moves with it: here the CTA now enters at 2.6 s instead of 3.2 s, and its end is stretched back to 6 s so it stays on screen until the last frame.
4. Change Audio
Click the music clip and the Design panel shows its gain, volume, fade in and fade out. A fade-out of about a second makes the bed end softly instead of cutting off.
5. Close and Render
Press Done editing (this closes HyperFrames Studio and releases the lock), then Render video.mp4 + contact sheet. From the terminal:
motionmind edit demo/launch-6s v2-safe --stop
motionmind render demo/launch-6s v2-safe
The render replaces the version's video.mp4 and contact sheet, measures loudness again and updates the registry; the version stays in its stage. Everything you changed is in the project's edit history:
cd projects/demo/launch-6s/runs/v2-safe/src
npx hyperframes history
00753cce 39s ago You Edit fade out (index.html)
2d0e697e 1m ago You Resize timeline clip (index.html)
e1c16ad0 1m ago You Move timeline clip (index.html)
13994a72 2m ago You Set default for "accent" (index.html)
42e4ac9c 2m ago You Set default for "headline" (index.html)
The agent runs the same command before it touches the version again, and builds on your changes. You can also tell it outright:
I edited demo/launch-6s v2-safe in HyperFrames Studio. Read the history, keep my changes,
and add anything I'll want again to the feedback rules in TASTE.md.
When to Edit, When to Make a New Version
| Change | Where |
|---|---|
| Wording, timing, a fade, a typo, during review | edit this version |
| A new hook, palette, music or aspect ratio | a new version (v3-…), then edit that |
| A version already in production | a new version; production stays as approved |