Membangun studio animasi paralaks 2.5D dalam satu sesi Claude Code: 3 bagian kode inti untuk ekspor MP4 frame demi frame yang deterministik

Catatan penulis: dari petunjuk (prompt), rumus kompensasi kedalaman bidang, sampai ekspor frame demi frame dengan Playwright+ffmpeg. Artikel ini membedah lengkap cara membangun studio animasi paralaks 2.5D dengan Claude Code yang hasil ekspornya tidak drop frame.

Banyak orang yang pertama kali membuat animasi dengan asisten pemrograman AI mengalami hal yang sama. Pratinjau di browser terlihat mulus, tetapi begitu diekspor jadi video, muncul patah-patah, frame yang meloncat, dan durasi yang tidak cocok. Biasanya akar masalahnya ada di arsitektur: sejak awal, “ekspor” tidak dianggap bagian dari desain. Artikel ini berfokus pada satu garis besar, yaitu fungsi murni renderAt(t) + screenshot dengan seek frame demi frame. Dengan pendekatan itu, kita akan membangun studio animasi paralaks 2.5D dengan Claude Code dalam satu sesi, lalu mengekspornya ke MP4 secara stabil.

Ini bukan sekadar demo “minta AI bikinin animasi”. Artikel ini membahas turunan rumus kompensasi kedalaman bidang, sebuah bug offset yang sangat khas, dan perbedaan mendasar antara pemutaran real-time dan ekspor frame demi frame.

Nilai utama: setelah membaca artikel ini, kamu akan mendapatkan struktur petunjuk yang bisa dipakai ulang, pipeline ekspor yang bisa direproduksi, dan daftar periksa validasi yang bisa dipindahkan ke proyek video prosedural lainnya.

Poin Utama Studio Animasi Paralaks 2.5D dengan Claude Code

Praktik yang dirujuk berasal dari artikel yang terbit pada 2026-11-09. Penulisnya memakai Claude Code dengan Opus 5.5 dan hanya butuh satu sesi untuk membuat studio HTML satu file, plus skrip ekspor Playwright sekitar 25 baris. Di laptop penulis, video 720p berdurasi 6 detik (180 frame) selesai diekspor dalam kira-kira 20 detik. Penulis tidak menyebutkan spesifikasi perangkat keras, jadi angka waktu ini hanya cocok sebagai gambaran kasar.

Prinsip Animasi Paralaks 2.5D

Pendekatan 2.5D menempatkan aset 2D yang datar pada kedalaman berbeda di ruang 3D, lalu menggerakkan kamera virtual menembus semuanya. Layer yang dekat dengan kamera bergerak cepat, sedangkan yang jauh bergerak lambat. Mata kita membaca perbedaan kecepatan ini sebagai kedalaman, dan itulah yang disebut paralaks (parallax). Seluruh prosesnya tidak memerlukan pemodelan, pencahayaan, atau mesin 3D. perspective dan preserve-3d di CSS browser sudah cukup.

Perbedaan antara “studio” dan “animasi sekali jadi” ada pada kelengkapan tiga komponen: graf adegan, lini masa, dan renderer deterministik. Banyak tutorial melewatkan komponen ketiga, padahal komponen inilah yang menentukan apakah MP4 hasil ekspor akan patah-patah atau tidak. Jadi, saat menulis baris pertama petunjuk, jadikan hal ini sebagai syarat mutlak.

Konfigurasi Lingkungan dan Model untuk Studio 2.5D Claude Code

Materi referensi menyarankan Opus 5.5 untuk membangun versi pertama. Dalam ringkasan model resmi Anthropic, model ini diposisikan untuk “pemrograman agen yang berjalan lama dan pekerjaan berbasis pengetahuan”, dengan jendela konteks 1M token dan output maksimum 128K. Harga resminya 4 / 20 dolar AS per sejuta token input / output. Harga sebenarnya tetap mengacu ke halaman resmi.

Sebaiknya kunci ID model yang spesifik saat memulai, supaya perilaku tidak berubah di tengah proyek akibat alias yang berpindah:

claude --model claude-opus-5-5 --effort high

Opus 5.5 secara bawaan memakai effort medium. Pada build pertama, agent harus menulis matematika proyeksi, mesin keyframe, dan pipeline ekspor dengan benar sekaligus, jadi sebaiknya dinaikkan ke high. Setelah itu, untuk perubahan kecil seperti mengubah nilai keyframe atau warna, Anda bisa kembali ke medium untuk menghemat token.

Soal seberapa bagus hasil build yang setara dengan model lain dan berapa selisih biayanya, materi referensi tidak memberikan data pembanding. Kalau Anda ingin berganti model, jalankan petunjuk yang sama di masing-masing model, lalu bandingkan satu per satu dengan metode validasi frame diam yang dibahas di bagian berikutnya.

Struktur Petunjuk untuk Membangun Studio 2.5D dengan Claude Code

Satu petunjuk yang ditulis spesifik hasilnya lebih baik daripada lima petunjuk yang samar. Spesifikasi build di materi referensi berupa satu paragraf petunjuk utuh. Berikut versi yang tetap setia pada maksud aslinya:

Build a 2.5D motion studio as one file, studio.html, with no dependencies.
- Scene: 6 layers (sky, moon, hills, city skyline, a title card "Ship it.",
  foreground foliage), each at its own z depth, using CSS perspective and preserve-3d.
- Camera: keyframes for x, y, z (dolly) and yaw (orbit around the card).
- Per-layer tracks: opacity, scale, y. Easings: linear, easeInOutCubic,
  easeInOutSine, easeOutBack.
- A timeline bar with keyframe markers, a playhead, click to scrub, space to play or pause.
- renderAt(t) must be pure in t. Expose window.__seek(t) that resolves after
  the frame paints, and a ?capture mode that hides the UI.
Then write export.mjs: Playwright opens ?capture, seeks every frame at 30 fps,
screenshots it and pipes PNGs to ffmpeg as H.264.

Petunjuk ini bisa dipecah menjadi empat lapis: adegan, kamera, track beserta easing, dan UI interaktif. Terakhir ada kontrak ekspor. Dua baris terakhirlah yang paling menentukan. Keduanya mewajibkan renderAt(t) menjadi fungsi murni terhadap t, mewajibkan __seek yang baru mengembalikan hasil setelah frame selesai digambar, dan mewajibkan mode ?capture yang menyembunyikan UI. Dengan begitu, kemampuan ekspor menjadi batasan arsitektur, dan agent akan merancang kodenya mengikuti batasan itu.

Kalau mau menerapkannya di proyek sendiri, pakai struktur ini sebagai templat. Bagian awal menjelaskan dengan rinci “apa yang digambar”. Dua-tiga baris terakhir mengunci “bagaimana frame diambil secara deterministik”.

Analisis Kode Inti 2.5D yang Dihasilkan Claude Code

Seluruh studio ini sekitar 150 baris, dan yang paling penting adalah tiga bagian berikut.

Pengambilan Sampel Keyframe dan Easing

Setiap track berupa array keyframe yang diurutkan berdasarkan waktu. Fungsi sample() pertama-tama mencari dua keyframe yang mengapit t, lalu menghitung progres memakai fungsi easing dari keyframe sebelumnya, dan setelah itu menginterpolasi semua field numerik:

function sample(keys, t) {
  if (t <= keys[0].t) return keys[0];
  for (let i = 0; i < keys.length - 1; i++) {
    const a = keys[i], b = keys[i + 1];
    if (t <= b.t) {
      const p = (easings[a.ease] || easings.linear)((t - a.t) / (b.t - a.t));
      const out = {};
      for (const k in b)
        if (typeof b[k] === 'number' && k !== 't') out[k] = a[k] + (b[k] - a[k]) * p;
      return out;
    }
  }
  return keys[keys.length - 1];
}

Fungsi ini tidak membaca waktu saat ini, tidak bergantung pada status frame sebelumnya, dan tidak memakai angka acak. Untuk t yang sama, hasilnya selalu sama. Dari sinilah sifat deterministik renderAt(t) berasal.

Kompensasi Kedalaman: Rumus Inti Paralaks 2.5D

Idenya begini: kamera tidak bergerak, sebaliknya seluruh dunia yang bergerak ke arah berlawanan. Selain bergeser di sumbu z, setiap layer juga dikalikan dengan skala kompensasi:

const PERSPECTIVE = 1200; // Harus sama dengan perspective pada #viewport
world.style.transform =
  `translate3d(${-cam.x}px, ${-cam.y}px, ${cam.z}px) rotateY(${-cam.yaw}deg)`;
const comp = 1 - L.z / PERSPECTIVE;
el.style.transform = `translate(-50%,-50%) ` +
  `translate3d(${x * comp}px, ${y * comp}px, ${L.z}px) scale(${comp * s})`;

Penurunannya seperti ini. Saat jarak perspektif CSS bernilai p, sebuah titik pada kedalaman z (z negatif berarti menjauh dari pengamat) diproyeksikan ke layar dengan skala p / (p - z). Dengan p = 1200 dan z = -900, hasilnya 1200 / 2100 ≈ 0,571, artinya layer hanya tersisa sekitar 57% dari ukuran aslinya.

Untuk meniadakan pengecilan ini, kita kalikan dengan kebalikannya, yaitu (p - z) / p = 1 - z/p = 1 + 900/1200 = 1,75. Nilai inilah yang disimpan di comp dalam kode. Karena 0,571 × 1,75 = 1, saat kamera diam setiap layer akan tampil dengan ukuran dan posisi sesuai yang Anda tetapkan.

Lalu bagaimana paralaks muncul? Ketika kamera bergerak, seluruh world bergeser sebesar dx yang sama, tetapi pergeseran tiap layer di layar tetap dikalikan dengan p/(p - z) masing-masing. Layer yang jauh punya koefisien kecil, jadi geserannya sedikit; layer yang dekat punya koefisien besar, jadi geserannya banyak. Kompensasi hanya memperbaiki komposisi saat kondisi diam dan tidak memengaruhi perbedaan kecepatan saat bergerak. Efek 2.5D bergantung pada hal itu.

(Nilai dalam tabel dihitung dengan p = 1200; baris -300 dan -1800 adalah contoh hasil penurunan.)

Satu bug yang patut diingat: hanya kompensasi ukuran, offset tidak dikompensasi

Versi pertama kode hanya mengalikan layer dengan scale(comp), sedangkan offset x/y tidak dikalikan comp. Akibatnya, offset bukit di kejauhan terkompresi oleh perspektif, komposisi keseluruhan jadi bergeser, dan bukit terus naik sampai menutupi sekitar dua pertiga langit. Perbaikannya sederhana: x dan y juga dikalikan comp, karena perspektif menskalakan posisi dan ukuran dengan koefisien yang sama.

Yang lebih menarik adalah cara bug ini ditemukan. Penulis langsung menyadari masalahnya setelah melihat satu frame hasil render, padahal saat membaca kode ia tidak melihat kesalahannya. Jadi, sebelum memercayai gerakan kamera apa pun, minta agent merender tiga gambar diam lebih dulu: titik awal, titik tengah, dan titik akhir.

Ekspor MP4 Animasi Paralaks 2.5D yang Deterministik per Frame

Perbedaan Mendasar antara Pemutaran Real-Time dan Ekspor Frame demi Frame

Pratinjau real-time memakai requestAnimationFrame, dan begitu mesin sibuk, frame akan terlewat. Untuk tahap pratinjau, hal ini masih bisa diterima. Namun untuk ekspor, tidak boleh ada frame yang hilang. Kalau memakai perekaman layar, yang terekam adalah “apa pun yang kebetulan tampil di layar pada waktu nyata”. Jadi kalau telat satu frame, hasilnya bisa berupa frame duplikat atau frame yang hilang.

Skrip Ekspor Minimalis

Waktu pada eksporter digerakkan oleh nomor frame. Untuk setiap frame, lakukan seek dulu, tunggu sampai gambar selesai digambar, lalu ambil screenshot, dan tulis PNG-nya ke stdin ffmpeg:

import { chromium } from 'playwright';
import { spawn } from 'node:child_process';
import { pathToFileURL } from 'node:url';

const out = process.argv[2] || 'out.mp4';
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
await page.goto(pathToFileURL('studio.html').href + '?capture');

const { duration, fps } = await page.evaluate(() => window.__scene);
const ffmpeg = spawn('ffmpeg', ['-y', '-f', 'image2pipe', '-framerate', String(fps),
  '-i', '-', '-c:v', 'libx264', '-pix_fmt', 'yuv420p', '-crf', '18', out],
  { stdio: ['pipe', 'ignore', 'inherit'] });

const frames = Math.round(duration * fps);
for (let i = 0; i < frames; i++) {
  await page.evaluate(t => window.__seek(t), i / fps);
  ffmpeg.stdin.write(await page.screenshot({ type: 'png' }));
}
ffmpeg.stdin.end();
await new Promise(r => ffmpeg.on('close', r));
await browser.close();

Ada beberapa detail yang perlu diperhatikan. window.__seek(t) baru resolve setelah dua animation frame, sehingga screenshot dipastikan menangkap transform yang baru. image2pipe membuat ffmpeg membaca urutan PNG dari stdin. yuv420p memastikan file hasilnya bisa diputar dengan normal di browser. Kalau browser Playwright belum terpasang, jalankan npx playwright install chromium satu kali dulu.

// Di dalam studio.html: seek deterministik, kembali setelah dua frame selesai digambar
window.__seek = (t) => new Promise(resolve => {
  renderAt(t);                       // Fungsi murni: hanya bergantung pada t
  requestAnimationFrame(() =>
    requestAnimationFrame(resolve)); // Pastikan gaya sudah di-commit dan digambar
});

// stills.mjs: render tiga frame diam (awal / tengah / akhir), lihat gambarnya dulu baru percaya pada shot-nya
import { chromium } from 'playwright';
import { pathToFileURL } from 'node:url';

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
await page.goto(pathToFileURL('studio.html').href + '?capture');
const { duration } = await page.evaluate(() => window.__scene);

for (const [name, t] of [['start', 0], ['mid', duration / 2], ['end', duration - 1e-3]]) {
  await page.evaluate(t => window.__seek(t), t);
  await page.screenshot({ path: `still-${name}.png` });
}
await browser.close();

Hasil uji coba penulis: 180 frame, 1280×720, 30 fps, durasi 6,0 detik, keluaran MP4 sekitar 420 KB, dengan total waktu sekitar 20 detik. Pergeseran menara kota di gambar lebih kecil daripada bukit gelap di latar depan, dan bukit latar depan itu akhirnya keluar sepenuhnya dari layar. Inilah efek paralaks.

Menambahkan fitur “deskripsi shot” ke studio 2.5D

Selanjutnya, penulis naskah bisa mengetik satu kalimat deskripsi shot, lalu model mengembalikan JSON keyframe. Materi referensi memanggil Anthropic Messages API secara langsung:

curl https://api.anthropic.com/v1/messages \
  -H "x-api-key: $ANTHROPIC_API_KEY" \
  -H "anthropic-version: 2026-10-21" \
  -H "content-type: application/json" \
  -d '{
    "model": "claude-opus-5-5",
    "max_tokens": 4096,
    "output_config": { "effort": "low" },
    "system": "Return only JSON: {\"camera\": [{\"t\",\"x\",\"y\",\"z\",\"yaw\",\"ease\"}], \"tracks\": {}}. Times in seconds, 0 to 6.",
    "messages": [{ "role": "user", "content": "Slow push-in, slight orbit right, title fades up in the first second." }]
  }'

Ada dua jebakan yang sering bikin tersandung. Pertama, effort harus ditulis di output_config.effort. Kedua, Opus 5.5 selalu memakai adaptive thinking, jadi mengirim thinking: {"type": "disabled"} akan menghasilkan error 400. Selain itu, token thinking ikut dihitung dalam max_tokens. Kalau max_tokens diset terlalu kecil, JSON akan terpotong di tengah array dan stop_reason bernilai "max_tokens".

Respons yang terpotong atau terselip teks tambahan akan membuat sample() error saat proses render, jadi sebaiknya panggilan ini dilengkapi contract test. Materi referensi memakai Apidog CLI agar sesi Claude Code yang sama bisa membuat dan menjalankan tes. Tes itu menegaskan bahwa kode status 200, stop_reason bukan "max_tokens", teks yang dikembalikan bisa di-parse sebagai JSON, dan nilai t pada array camera naik dari 0 sampai 6. Tool pengujian API lain atau skrip assertion buatan sendiri juga bisa dipakai untuk tujuan yang sama. Setelah mengubah system prompt atau effort, jalankan ulang tesnya, karena keduanya sama-sama bisa mengubah isi respons.

Pertanyaan yang Sering Diajukan (FAQ)

Poin Utama Animasi Paralaks 2.5D dengan Claude Code

• Ekspor adalah bagian dari desain: tulis fungsi murni renderAt(t) dan kontrak seek secara eksplisit di beberapa baris terakhir petunjuk
• Rumus kompensasi kedalaman: comp = 1 − z/perspective, dikalikan ke ukuran maupun offset x/y
• Dari mana paralaks berasal: kompensasi hanya memperbaiki komposisi saat diam; saat bergerak, tiap lapisan tetap tampil dengan kecepatan berbeda sesuai kedalamannya
• Lihat bingkai diam dulu, baru percaya pada kamera: tiga gambar (awal, tengah, akhir) bisa menemukan bug yang tidak kelihatan kalau hanya membaca kode
• Gerakkan waktu berdasarkan nomor frame: seek dengan Playwright lalu tangkap layar, kemudian encode ke H.264 lewat ffmpeg image2pipe
• Atur effort per tahap: pakai high untuk pembuatan awal, medium untuk penyempurnaan, dan mulai dari low untuk antarmuka JSON terstruktur
• Tambahkan uji kontrak pada output model: mencegah gagalnya parsing keyframe akibat max_tokens yang terpotong

Kesimpulan

Untuk membangun studio animasi paralaks 2.5D dengan Claude Code, ada tiga hal inti:

1. Arsitektur: tiga komponen, yaitu scene graph, timeline, dan renderer deterministik. Komponen ketiga yang menentukan kualitas video akhir.
2. Matematika: koefisien kompensasi perspektif 1 - z/p bekerja pada ukuran sekaligus offset. Komposisi akurat saat diam, dan paralaks muncul dengan sendirinya saat bergerak.
3. Pipeline: seek frame demi frame berdasarkan i/fps, tangkap layar, lalu serahkan ke ffmpeg untuk di-encode. Hasilnya tidak terpengaruh performa mesin.

Saran saya, jalankan dulu satu sampel 6 detik dengan mengikuti struktur petunjuk di artikel ini, lalu biasakan diri untuk “melihat tiga bingkai diam sebelum mengubah kamera”. Setelah itu, kamu bisa menambah lapisan, menghubungkan antarmuka “deskripsikan kamera”, atau memindahkan pendekatan deterministik yang sama ke solusi video terprogram lain seperti Remotion.

📚 Referensi

1. How to Build a 2.5D Motion Studio With Opus 5.5: sumber praktik dalam artikel ini
2. Tautan: apidog.com/blog/build-2-5d-motion-studio-opus-5-5

3. Keterangan: berisi petunjuk lengkap, kode studio, skrip ekspor, dan contoh antarmuka “deskripsikan shot”

4. Dokumentasi model dan effort Anthropic: posisi model, jendela konteks, harga, dan penjelasan parameter effort

5. Tautan: docs.anthropic.com

6. Keterangan: untuk memeriksa ID model claude-opus-5-5, header versi API, dan cara pakai output_config

7. Dokumentasi format ffmpeg: penjelasan format input seperti image2pipe

8. Tautan: ffmpeg.org/ffmpeg-formats.html

9. Keterangan: untuk memahami cara membaca urutan PNG dari stdin dan parameter encoding H.264

10. Dokumentasi Playwright: otomatisasi browser dan API tangkapan layar

11. Tautan: playwright.dev
12. Keterangan: berisi page.evaluate, page.screenshot, dan perintah instalasi browser

Artikel terkait

• Claude membuat video tanpa mengandalkan model video: 1 fungsi waktu + rendering frame demi frame dalam 4 langkah, prinsipnya dijelaskan tuntas dalam sekali penjelasan: Menguraikan prinsip lengkap Claude dalam membuat video: setiap bingkai adalah fungsi murni waktu seek(t), perenderan bingkai demi bingkai dalam empat langkah dengan browser tanpa kepala + ffmpeg, pegas dengan solusi tertutup dan sinkronisasi ketukan membuat animasi mulus, lalu memberikan alur lima langkah yang bisa langsung diikuti untuk memulai.