Alur Kerja 4-Gate: Jangan Langsung ke Kode
Kenapa agent tidak boleh langsung coding. Pahami alur Brief → Konsep → Storyboard & TASTE.md → Build & Review.
MotionMind tidak menghasilkan piksel. Agent Anda menulis proyek HyperFrames (HTML, CSS, dan timeline GSAP), lalu HyperFrames me-render-nya menjadi MP4. Pilihan inilah yang membuat video MotionMind bisa dicek, dibangun ulang, dan diedit kapan saja.
Video adalah Halaman Web
Setiap elemen di layar adalah tag HTML dengan waktu mulai dan durasi (data-start, data-duration), dan gerakannya adalah timeline GSAP yang di-pause. Saat render, HyperFrames membuka halaman itu di Chrome headless dan memutar timeline-nya frame demi frame. Coding agent menulis HTML, CSS, dan JavaScript setiap hari, jadi mereka bisa membaca dan mengubah video dengan cara yang sama seperti mengubah website.
Ini komposisi 9:16 berdurasi 6 detik yang lengkap: headline yang naik masuk, kata aksen, dan CTA di detik 2,6. Salin untuk mencobanya sendiri:
<!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>
Anda tidak butuh MotionMind untuk menjalankannya. Di folder kosong:
npx hyperframes init my-first-video --example blank
cd my-first-video
# ganti index.html dengan contoh di atas, lalu:
npx hyperframes preview
npx hyperframes check
npx hyperframes render -o first.mp4
preview membuka HyperFrames Studio di http://localhost:3002; check melaporkan masalah layout dan timing; render menulis MP4-nya.
Source Sama, Video Sama
Setiap frame hanya bergantung pada waktunya, jadi me-render source yang sama dua kali menghasilkan frame yang sama. Klip di atas menunjukkan dua render dari demo 6 detik: ke-180 frame-nya sama persis. Inilah yang membuat versi bisa dipercaya: versi yang sudah di-render dibekukan bersama source dan versi HyperFrames-nya, jadi bisa dibangun ulang dengan tepat, dan dua versi hanya berbeda di bagian yang memang diubah. Aturan di baliknya (tanpa nilai acak, tanpa jam) ada di Determinisme dalam Video AI.
Edit Tanpa Prompt Ulang
Teks, warna, dan media yang mungkin ingin Anda ubah dideklarasikan sebagai variabel. Di HyperFrames Studio Anda mengubahnya lewat panel, menggeser klip di timeline, atau mengganti audio, dan preview langsung berubah. Tanpa prompt baru, tanpa generate ulang. Buka dari MotionMind Studio dengan Edit in HyperFrames (atau motionmind edit <brand>/<campaign>); lihat Editing Visual di HyperFrames Studio.
Variabel yang sama juga bisa dipakai dari command line. Satu komposisi, teks baru, tanpa mengubah file:
npx hyperframes render -o sip.mp4 --variables '{"headline":"Your first","accent":"sip."}'
Artinya untuk Video Anda
| Manfaat | Alasannya |
|---|---|
| Teks persis | Huruf di-set browser dengan font asli: tajam, dan ejaannya persis seperti yang ditulis. |
| Brand asli | Logo, font, dan screenshot produk dipasang sebagai file, bukan digambar ulang. |
| Dicek sebelum Anda lihat | npx hyperframes check menandai teks yang bertumpuk atau terpotong, huruf terlalu kecil, dan kontras rendah. |
| Perubahan kecil tetap kecil | Mengganti satu kata hanya mengganti satu kata; bagian lain tetap seperti yang disetujui. |