Determinisme dalam Video AI

Sebuah versi baru layak disimpan kalau bisa dibangun ulang. Render source yang sama dua kali, dan hasilnya harus video yang sama, frame demi frame. Itu terjadi selama setiap frame hanya bergantung pada satu hal: posisinya di timeline.

Kenapa ini penting:

• Versi yang dibekukan menghasilkan video yang disetujui lagi, berbulan-bulan kemudian, bukan variasinya.
• Dua versi hanya berbeda di bagian yang memang diubah, jadi membandingkannya ada artinya.
• Snapshot yang dicek agent adalah frame yang benar-benar masuk ke video.

HyperFrames tidak memutar halaman Anda secara real time. Ia mem-pause timeline GSAP lalu melompat ke setiap frame, satu per satu. Apa pun yang tidak berasal dari timeline itu merusak janji tadi. Ada tiga aturan untuk menjaganya.

Aturan 1: Tanpa Nilai Acak Tanpa Seed

Math.random() memberi nilai baru di setiap render, jadi partikel yang ditebar jatuh di tempat berbeda setiap kali. Kalau Anda ingin sesuatu yang terlihat acak, pakai generator dengan seed tetap:

// ✗ A different layout on every render
const x = Math.random() * 1920;

// ✓ The same layout on every render: a seeded generator
function mulberry32(seed) {
  return function () {
    seed = (seed + 0x6d2b79f5) | 0;
    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}
const rand = mulberry32(42); // change the seed for a new layout
const x2 = rand() * 1920;

Aturan 2: Tanpa Jam atau Timer

Date.now(), setTimeout, setInterval, dan loop requestAnimationFrame buatan sendiri berjalan mengikuti jam dinding, yang tidak ada hubungannya dengan frame yang sedang diambil. Taruh setiap perubahan di timeline:

// ✗ Runs on the wall clock, so it depends on how fast the render goes
setInterval(() => {
  el.textContent = new Date().toLocaleTimeString();
}, 1000);

// ✓ On the timeline: at 3.0 s it always shows 3.0
const clock = { s: 0 };
tl.to(clock, {
  s: 6,
  duration: 6,
  ease: "none",
  onUpdate: () => { el.textContent = clock.s.toFixed(1); },
}, 0);

Begitu juga dengan loop: repeat: -1 tidak pernah selesai, jadi beri jumlah pengulangan yang pas mengisi scene.

// ✗ Never ends
tl.to("#steam", { y: -20, yoyo: true, repeat: -1, duration: 0.5 }, 0);

// ✓ Fills the 6 s scene exactly: 12 runs of 0.5 s
tl.to("#steam", { y: -20, yoyo: true, repeat: 11, duration: 0.5 }, 0);

Aturan 3: Semua Harus File Lokal

fetch() atau URL gambar dari luar bisa mengembalikan hal lain bulan depan, atau tidak mengembalikan apa-apa. Simpan setiap gambar, font, video, dan suara di dalam versinya, di bawah assets/. Karena itulah motionmind init menyalin logo dan font brand Anda ke src/assets/brand/, dan package.json di setiap versi mengunci versi HyperFrames yang dipakai untuk membangunnya.

<!-- ✗ Fetched at render time: it can change, move or fail -->
<img src="https://cdn.example.com/logo.png" alt="">

<!-- ✓ A file inside the version -->
<img src="assets/brand/logos/logo.svg" alt="">

Biarkan Linter yang Menangkapnya

Jalankan linter di dalam folder src/ sebuah versi (agent melakukannya setiap kali ada perubahan, sebagai bagian dari check):

cd projects/demo/launch-6s/runs/v1-steam/src
npx hyperframes lint

Linter melaporkan Math.random() dan Date.now() sebagai error, dan repeat: -1 sebagai peringatan. Tidak semua tertangkap: setTimeout atau fetch() lolos. Karena itu aturan-aturan ini juga ditulis di skill yang diikuti agent.

Buktikan: Render Dua Kali

Ini pengecekan yang dijalankan agent sebelum sebuah versi masuk production. Jalankan dari folder workspace; framemd5 membuat hash untuk setiap frame video, jadi diff tidak mencetak apa-apa kalau semua frame sama:

V=projects/demo/launch-6s/runs/v1-steam
cp $V/video.mp4 /tmp/a.mp4
motionmind render demo/launch-6s v1-steam
ffmpeg -v error -i /tmp/a.mp4 -map 0:v -f framemd5 - > /tmp/a.md5
ffmpeg -v error -i $V/video.mp4 -map 0:v -f framemd5 - > /tmp/b.md5
diff /tmp/a.md5 /tmp/b.md5 && echo identical

Pengecekan ini membandingkan dua render di komputer yang sama. Untuk hasil identik di komputer yang berbeda, HyperFrames juga bisa me-render di dalam Docker (npx hyperframes render --docker).