Cara Membuat Animasi 2D Desfina dari Voice Over dengan AI Agent
Tutorial lengkap dari satu rekaman suara sampai video Reels 9:16 dengan lip-sync, karikatur, 249 SFX, dan thumbnail poster, memakai Claude Code, skill MotionMind SkillFull, dan MotionMind Studio.
MM
MotionMind Team9 November 2026
·10 menit baca
Desfina adalah karakter 2D yang membawakan cerita bisnis dalam video Reels: kenapa Blockbuster menertawakan Netflix, bagaimana Aqua lahir dari ide yang dianggap gila, sampai kisah kakak-adik pendiri Adidas dan Puma. Sampai sekarang sudah ada 12 video, masing-masing sekitar satu menit, dan semuanya dibuat dengan cara yang sama: satu file voice over masuk, satu video jadi keluar.
Animasinya tidak dibuat di After Effects. Kami memberi brief ke AI agent (Claude Code) yang sudah dibekali skill MotionMind SkillFull. Agent itu menulis kode animasinya, menyamakan timing dengan suara, menata SFX, me-render MP4, lalu membuatkan thumbnail. Di artikel ini kami bongkar seluruh prosesnya langkah demi langkah, supaya kamu bisa membuat seri karakter versimu sendiri.
Tonton dulu salah satu hasilnya:
Desfina — Blockbuster Menertawakan Netflix. 61,9 detik, 1080×1920, 12 scene, 249 SFX, dibuat dari satu file voice over.
Yang kamu butuhkan
Alat
Fungsinya
Keterangan
AI agent
Mengerjakan semua langkah di folder proyek
Kami memakai Claude Code. Agent lain yang bisa membaca skill juga bisa.
Skill MotionMind SkillFull
Cara kerja sutradara motion: perencanaan, animasi, timing narasi, sound design, render lokal
Playwright (Chromium) dipakai untuk mengambil frame
Voice over
Naskah yang sudah direkam, format WAV
Rekaman sendiri atau TTS, sekitar 45–75 detik
Semua render berjalan lokal di komputermu. Ini bukan video AI generatif yang hasilnya acak. Setiap frame digambar oleh kode, jadi hasilnya bisa diulang persis sama dan bisa direvisi bagian per bagian.
Experiment, run, parameter, metrik, artefak, dan model registry: bagaimana ide MLflow menjadi cara MotionMind Studio mencatat, membandingkan, dan mem-promote setiap render.
Dari voice over ke video jadi. Kamu cukup memberi VO, mengecek hasil, dan meminta revisi.
Karakter dibuat sekali di awal (langkah 1). Setelah itu, setiap video baru cukup mengulang langkah 2 sampai 8. Agent menyalin proyek video terakhir sebagai template, jadi renderer, caption, efek, dan pengaturan mix tidak perlu dibuat ulang.
Langkah 0: Pasang skill dan siapkan workspace
1. Pasang skill MotionMind SkillFull. Setelah membeli, ikuti petunjuk instalasi dari toko. Untuk Claude Code, folder skill berada di ~/.claude/skills/. Buka Claude Code, lalu tanyakan "skill apa saja yang tersedia?" untuk memastikan skill-nya terbaca.
2. Pasang MotionMind dan buat workspace.
npm i -g motionmind
motionmind setup studio-desfina
cd studio-desfina
motionmind doctor
doctor mengecek Node, ffmpeg, dan kebutuhan lainnya. Pastikan semua baris bertanda ✓ sebelum lanjut.
3. Buka Studio di terminal terpisah dan biarkan tetap berjalan:
motionmind ui
Studio terbuka di http://127.0.0.1:4310. Di sinilah nanti setiap versi video dicatat, diputar, dan dibandingkan.
Langkah 1: Rancang karakter sekali, pakai berkali-kali
Kunci seri yang konsisten adalah karakter yang dibuat sebagai kode, bukan gambar datar. Desfina dibuat sebagai SVG berlapis. Setiap bagian punya id sendiri (hair-back, head, eye-l, eye-r, brow-l, mouth, arm-r, hand-r), jadi bisa digerakkan satu per satu: kedip, melirik, mengangguk, menunjuk, dan berbicara.
Character sheet Desfina: 7 ekspresi, 5 bentuk mulut untuk lip-sync, palet warna, dan foto profil. Semuanya dari satu generator.
Contoh prompt untuk membuat karakter:
Buatkan karakter 2D flat vector perempuan bernama Desfina untuk konten bisnis. Rambut panjang hitam, blazer teal, aksen emas. Buat sebagai SVG dengan layer terpisah untuk rambut, kepala, mata, alis, mulut, dan lengan. Sertakan 7 ekspresi (senang, yakin, ngobrol, kaget, mikir, wink, ketawa) dan 5 bentuk mulut untuk lip-sync (diam, E/I, A, O/U, senyum). Export character sheet, pose badan penuh, dan foto profil.
Setelah kamu memilih versi favorit, minta agent mencatatnya di TASTE.md proyek: palet, font, gaya, posisi karakter, dan aturan caption. File ini dibaca agent setiap kali memulai video baru, jadi gayanya tidak berubah-ubah walaupun chat-nya berbeda.
Langkah 2: Siapkan voice over
Rekam naskahmu dalam format WAV, lalu taruh di folder topik, misalnya konten desfina/blockbuster/vo.wav. Beberapa tips:
45–75 detik pas untuk Reels. Durasi video mengikuti panjang VO.
Suara harus bersih, tanpa musik latar. Musik dan SFX ditambahkan belakangan.
Sebut nama, angka, dan tahun dengan jelas. Bagian inilah yang nanti dibuatkan visual paling besar.
Langkah 3: Beri brief ke agent
Ini prompt yang benar-benar kami pakai untuk setiap video Desfina:
Lanjut sekarang buatkan konten yang mengikuti VO ini, buat animasi kaya sebelumnya, samakan branding nya ya Desfina hair, penuh dengan sound effect, transisi, kamera bergerak, keyframe, dan sebagainya. Jika tidak tahu apa yang dibahas kamu bisa riset dulu, apalagi ada brand-nya. Kalau perlu menampilkan wajah karakter yang lagi dibahas juga gpp, jadiin versi animasi muka dia. Export ke folder yang sama. Jangan lupa buatkan thumbnail-nya juga.
Prompt-nya pendek karena aturan mainnya sudah ada di skill dan di TASTE.md. Setelah menerima brief ini, agent akan:
Membaca VO dan meriset topiknya. Untuk video Blockbuster, agent memeriksa tawaran $50 juta di tahun 2000, jumlah toko di masa jaya, dan tahun bangkrutnya. Klaim yang belum terverifikasi dilaporkan ke kamu.
Menyalin proyek terakhir sebagai template, lalu menyusun daftar scene.
Mengerjakan langkah 4 sampai 9 di bawah ini, lalu melaporkan hasil, durasi, dan loudness.
Langkah 4: Transkrip dan beats.json
Agent mentranskrip VO secara lokal dengan faster-whisper, sehingga setiap kata punya detik mulai dan selesai. Hasil transkrip selalu dicek ulang. Contohnya, "Malah minggu" dibetulkan menjadi "Malam minggu", dan awal kata yang meleset digeser sesuai energi suara.
Dari kata-kata itu, agent menyusun satu file pusat: plan/beats.json.
Kata "menertawakan" mulai di detik 1,76. Angka yang sama memicu teks MENERTAWAKAN, guncangan kamera, dan SFX tawa.
Prinsipnya: visual dan suara membaca angka yang sama. Kalau VO direkam ulang, cukup perbarui beats.json, dan seluruh animasi serta SFX ikut bergeser.
Langkah 5: Bangun scene
Setiap scene adalah satu file JavaScript di src/scenes/. Rentang waktunya sengaja dibuat sedikit tumpang tindih supaya transisinya mulus: whip-pan dengan motion blur, iris, gelombang warna, atau wipe diagonal.
Video Blockbuster terdiri dari 12 scene. Setiap file menggambar satu bagian cerita.
Gerakannya memakai keyframe yang dihitung dari waktu, bukan dari frame sebelumnya. Contoh potongan dari scene ruang rapat:
Karena setiap frame hanya bergantung pada waktu t, render ulang selalu menghasilkan gambar yang persis sama. Kamu juga bisa me-render potongan 5 detik saja untuk mengecek satu bagian.
Tokoh yang dibahas jadi karikatur
Video bisnis lebih hidup kalau tokohnya muncul. Agent membuat satu generator karikatur (src/figure.js) dengan parameter rambut, kacamata, kumis, pakaian, pose, dan ekspresi, dengan gaya garis yang sama dengan Desfina.
Tirto Utomo, Djajadi Djaja, Gunpei Yokoi, Dassler bersaudara, John Antioco, serta Reed Hastings dan Marc Randolph. Semuanya dari generator yang sama.
Beberapa aturan yang kami pegang:
Tidak memakai logo asli. Nama merek ditulis dengan tipografi sendiri.
Tidak menggambar karakter berhak cipta. Mario dan Donkey Kong hanya muncul sebagai nama di kartu generik.
Tokoh nyata digambar sebagai karikatur yang sopan, bukan ejekan.
Langkah 6: Lip-sync
Mulut Desfina bergerak mengikuti suara. Script lip-sync membaca energi dan karakter suara di setiap frame, lalu memilih satu dari empat bentuk mulut di character sheet. Ditambah kedipan setiap sekitar 3 detik dan anggukan kecil saat bicara, karakternya terasa benar-benar sedang berbicara.
Setiap kotak di bawah adalah satu frame (1/30 detik). Warnanya menunjukkan bentuk mulut yang dipakai.
Langkah 7: Cek dengan contact sheet
Sebelum render penuh, agent membuat contact sheet: puluhan frame kecil dalam satu gambar. Cara ini jauh lebih cepat daripada menonton video berulang-ulang, dan masalah tata letak langsung terlihat.
Contact sheet 23 detik pertama, satu frame setiap 0,4 detik.
Contoh masalah yang tertangkap lewat contact sheet di seri ini:
Teks "$50 JUTA" menutupi wajah Desfina, lalu dipindah ke atas.
Tokoh di ruang rapat tertutup meja, lalu posisinya dinaikkan.
Objek kecil seperti kotak surat dan garasi terlalu kecil di layar HP, lalu diperbesar.
Setir mobil kurang kontras dengan latar, lalu warnanya diganti.
Langkah 8: Sound design dan mix
Di sinilah video terasa "mahal". Setiap gerakan penting punya suara: whoosh saat transisi, pop saat label muncul, stempel, uang, tawa kartun, dengung neon, sampai pesawat lewat. Video Blockbuster memakai 249 cue SFX, gabungan library SFX dan suara sintetis yang dibuat dengan kode.
Setiap garis kuning adalah satu SFX yang menempel di event animasi. Mix akhir tetap memberi ruang untuk suara narasi.
Aturan mix-nya:
VO selalu di depan. SFX otomatis turun maksimal 4 dB saat ada suara (ducking).
Loudness akhir −14 LUFS dengan true peak −1,5 dBTP, standar aman untuk Reels, TikTok, dan YouTube Shorts.
Tanpa musik, kecuali diminta.
Langkah 9: Render dan thumbnail
Render memakai Playwright untuk menggambar setiap frame di Chromium, lalu ffmpeg menggabungkannya dengan audio menjadi MP4 1080×1920, 30 fps. Perintah lengkapnya dicatat di README.md setiap proyek, jadi kamu bisa me-render ulang kapan saja:
Thumbnail tidak diambil dari potongan video. Ini pelajaran dari revisi kami sendiri: frame video terlihat datar kalau dijadikan cover. Setiap thumbnail didesain sebagai poster tersendiri, dengan stiker potongan tokoh, judul 3D, tekstur halftone atau koran retro, dan Desfina mengintip di pojok.
12 thumbnail poster seri Desfina. Karakter dan gayanya sama, tapi konsepnya berbeda di setiap video.
Langkah 10: Catat versi di MotionMind Studio
Begitu ada v2, v3, dan seterusnya, kamu perlu tahu versi mana yang terbaru dan apa bedanya. MotionMind mencatat setiap render sebagai versi yang dibekukan:
# pantau folder export, setiap MP4 baru otomatis tercatat
motionmind track "konten desfina/blockbuster" --campaign desfina/blockbuster
# atau catat satu file secara manual, lengkap dengan contact sheet-nya
motionmind log "Desfina - Blockbuster v1.mp4" --campaign desfina/blockbuster \
--version v1-blockbuster --sheet cache/sheet/s1.jpg --notes "render pertama"
Di Studio (motionmind ui), setiap versi bisa diputar, dilihat contact sheet dan loudness-nya, lalu dibandingkan berdampingan. Versi yang sudah disetujui bisa dipromosikan ke tahap produksi dengan motionmind promote.
Cara minta revisi
Karena semuanya berupa kode, revisi bisa dilakukan per bagian tanpa mengulang dari nol. Contoh permintaan yang efektif:
"Di detik 12–14, angka 9.000 kurang terbaca. Perbesar dan beri outline."
"SFX tawa di ruang rapat terlalu pelan, naikkan sampai sejajar dengan suara."
"Ganti thumbnail-nya. Jangan pakai potongan video, buat konsep poster yang lebih kreatif."
"Simpan sebagai v2, jangan timpa v1."
Agent selalu menyimpan hasil revisi sebagai versi baru, jadi versi yang sudah kamu setujui tidak pernah tertimpa.
Kesalahan yang sering terjadi
Langsung render penuh. Render potongan pendek dan cek contact sheet dulu. Jauh lebih hemat waktu.
Memakai logo asli merek. Pakai tipografi sendiri. Lebih aman, dan gaya visualnya tetap konsisten.
Mengandalkan angka loudness saja. −14 LUFS belum tentu berarti setiap SFX terdengar. Tetap dengarkan hasilnya sendiri sebelum upload.
Fakta dari VO tidak dicek. Minta agent meriset dulu. Di seri ini, agent beberapa kali menandai angka di VO yang berbeda dari data resmi terbaru.
Tidak ada TASTE.md. Tanpa catatan gaya, setiap chat baru bisa menghasilkan gaya yang berbeda.
Mulai buat seri karaktermu sendiri
Butuh beberapa jam untuk menyiapkan karakter dan video pertama. Setelah itu, setiap video baru tinggal mengirim satu VO dan satu prompt. Semua yang kamu lihat di artikel ini dibuat dengan alat yang sama:
