MotionMind sudah rilis: skill agent, CLI, dan Studio lokal yang open source untuk membuat video dengan AI coding agent yang sudah Anda pakai. Versi 0.1.0 masuk npm pada 30 Oktober 2026, dan 0.2.0 menyusul sehari kemudian. Tulisan ini menjelaskan kenapa kami membuatnya, apa saja isinya, dan cara membuat video pertama Anda.
Walkthrough 30 detik di atas dibuat dengan MotionMind sendiri.
Kenapa kami membuatnya
AI agent sebenarnya sudah bisa menulis motion graphic. Minta promo 15 detik ke Claude Code atau Codex, dan Anda akan mendapat kode HTML dan animasi yang bisa dirender. Masalahnya ada di semua hal di sekitarnya:
- agent langsung menulis kode, sebelum ada yang sepakat soal ceritanya;
- setiap "revisi kecil" menimpa versi yang sudah disetujui klien;
- tidak ada yang tahu render mana yang bagus;
- volume audionya asal jadi;
- chat berikutnya mulai dari nol, tanpa ingat gaya yang sudah disepakati.
Semua itu bukan masalah model. Itu masalah proses, jenis masalah yang di studio diselesaikan dengan brief, persetujuan, penamaan file yang rapi, dan produser yang mencatat semuanya. MotionMind memberi agent proses produksi itu, dan memberi Anda catatannya.
Apa saja isinya
MotionMind terdiri dari tiga bagian yang saling melengkapi.
Skill motionmind. Folder Agent Skills biasa (SKILL.md dan referensinya) yang mengajari agent bekerja seperti studio: konsep dulu, lalu storyboard, baru build, review, dan render, dengan persetujuan Anda di setiap gate. Di dalamnya juga ada aturan HyperFrames, panduan motion dan suara, checklist QA, serta kit untuk demo layar. Agent apa pun yang membaca SKILL.md bisa memakainya: Claude Code, Codex, Gemini CLI, OpenCode, dan lainnya.
CLI motionmind. CLI ini mengubah setiap render menjadi versi yang dibekukan dan terukur: videonya, contact sheet, snapshot source, loudness, parameter, dan checksum. Agent yang memanggilnya, tapi Anda juga bisa: setup, init, render, log, promote, track, compare, music, sfx, doctor.
Studio. motionmind ui membuka dashboard di 127.0.0.1:4310. Semua versi ada di sana, lengkap dengan player, overlay safe area 4:5, contact sheet, loudness, dan status QA. Anda bisa memutar dua versi berdampingan, membuka satu versi di HyperFrames Studio untuk diedit tanpa kode, lalu mem-promote versi pilihan Anda ke production.
Di sekitar ketiganya ada hal-hal yang dibutuhkan hampir setiap video. motionmind music membuat music bed 120 BPM yang deterministik, tanpa sampel, dan bisa dibagi per bagian; 22 efek suara CC0 sudah tersedia, dan Anda bisa memakai library sendiri; motionmind track mencatat render yang dibuat di aplikasi lain.
Setiap versi adalah project HyperFrames: HTML dan GSAP yang dirender menjadi MP4. Karena itulah sebuah versi bisa dibuka lagi, diedit secara visual, dan dirender ulang dengan hasil yang sama persis berbulan-bulan kemudian.
Bagaimana sebuah video dibuat
Video MotionMind lahir dari percakapan beberapa putaran, bukan satu prompt sekali jadi. Agent berhenti di empat gate dan menunggu keputusan Anda.
- Brief. Anda menjelaskan produk, audiens, format dan durasi, audio, serta call to action, lalu menaruh logo, font, dan screenshot di
shared/brands/<brand>/. - Gate 1: pilih konsep. Agent menulis dua atau tiga cerita yang benar-benar berbeda, dalam bentuk teks, ke
plan/concepts.md. Anda memilih satu. - Gate 2: setujui storyboard. Tabel per detik, plus gaya yang dikunci di
TASTE.md: palet dengan peran warnanya, tipografi, easing, dan musik. Berkat file ini, versi-versi berikutnya punya tampilan dan gerak yang sama. - Build.
motionmind initmembuat folder versi. Agent menulis satu scene per file, menjalankancheckdansnapshotHyperFrames setiap kali ada perubahan, dan memeriksa frame-nya sebelum bilang "selesai". - Gate 3: review. Anda menonton draft di Studio, atau menekan Edit in HyperFrames untuk mengubah teks, timing, atau audio sendiri. Selama Anda mengedit, versi itu dikunci untuk agent.
- Gate 4: promote. Setelah lolos QA, Anda memindahkan versi itu ke production.
QA bukan sekadar saran. Sejak 0.2.0, production mensyaratkan integrated loudness −14 LUFS ±0,5 dan true peak paling tinggi −1 dBFS, diukur dari file hasil render. Versi yang tidak memenuhi syarat akan ditolak kecuali Anda memaksanya, dan pemaksaan itu dicatat di LOG.md. Di 9:16, teks dan CTA tetap berada di area yang tidak tertutup tampilan aplikasi di ponsel. Panduan alur empat gate membahas tiap langkahnya lebih detail.
Versi, bukan timpa
Ide yang paling langsung kami pinjam datang dari machine learning, dari MLflow. Seorang data scientist tidak pernah menimpa training run: setiap run dicatat bersama parameter, metrik, dan artefaknya, lalu run terbaik di-promote di registry. MotionMind melakukan hal yang sama untuk render.
| MLflow | MotionMind |
|---|---|
| experiment | campaign <brand>/<campaign> |
| run | versi v<N>-<slug> |
| params · metrics · artifacts | variabel · LUFS, true peak, durasi · video.mp4, contact sheet, snapshot source |
| stage di model registry | staging → production → archived |
mlflow ui | motionmind ui |
Pesan atau audiens baru berarti campaign baru; hook, gaya, musik, atau rasio baru untuk pesan yang sama berarti versi baru di campaign yang sama. Versi yang sudah dirender tidak pernah ditimpa. Saat Anda mem-promote versi production yang baru, versi production sebelumnya dengan rasio yang sama diarsipkan, bukan dihapus. Jadi kalau berminggu-minggu kemudian ada yang bertanya apakah bisa kembali ke potongan yang lama, versi itu masih ada, lengkap dengan source yang membuatnya.
Sudah punya editor sendiri?
Anda tidak harus memakai agent untuk mendapatkan catatannya. Kalau Anda sudah bekerja di HyperFrames Studio, Premiere, atau aplikasi lain yang mengekspor MP4, MotionMind cukup mencatat hasilnya:
motionmind track ~/Exports/premiere --campaign acme/launch-15s-cut
motionmind log ./final.mp4 --campaign acme/launch-15s --param hook="Stock running low?"
Setiap ekspor baru menjadi versi, lengkap dengan hasil ukur loudness-nya. Lihat mencatat render dari aplikasi lain.
Yang bukan MotionMind
- MotionMind tidak membuat video sendiri. Agent Anda yang menulis videonya, mengikuti skill. MotionMind menyediakan proses, perintah, catatan, dan Studio, dan karena itulah ia bisa dipakai dengan agent dan model mana pun yang Anda suka.
- MotionMind bukan layanan cloud. Semuanya berjalan di komputer Anda. Studio hanya mendengarkan di
127.0.0.1, dan file Anda tetap di tempatnya. - MotionMind bukan produk HeyGen. MotionMind adalah project independen berlisensi MIT yang kompatibel dengan HyperFrames. MotionMind bukan produk resmi atau partner HeyGen.
Buat video pertama Anda
Anda butuh macOS, Linux, atau Windows, Node.js 22 atau lebih baru, ffmpeg dan ffprobe di PATH, serta sebuah agent CLI. HyperFrames dan headless Chrome-nya diunduh otomatis saat pertama kali dipakai.
npm i -g motionmind
motionmind setup my-studio
cd my-studio
motionmind doctor
motionmind ui
Lalu, di terminal kedua pada folder yang sama, jalankan agent Anda dan beri brief:
Use the motionmind skill. Saya mau promo 9:16 berdurasi 15 detik untuk kedai kopi "Kopi Senja",
pesan "kopi enak, harga bersahabat", CTA kopisenja.id, musik + SFX, tanpa voice-over.
Siapkan beberapa putaran percakapan. Panduan memulai menjelaskan instalasinya langkah demi langkah, dan brief pertama untuk agent menunjukkan seperti apa brief yang baik.
Yang ada di situs ini
- Learn: 15 panduan, dari instalasi pertama sampai loudness, safe area, dan musik, masing-masing dengan klip pendek dan perintah yang bisa disalin.
- Projects: video yang dibuat dengan MotionMind, lengkap dengan hasil ukurnya dan cerita dari versi pertama sampai terakhir.
- Blog: kabar seperti tulisan ini, catatan rilis, dan artikel panjang tentang membuat video dengan agent.
MotionMind open source. Kodenya ada di GitHub, paketnya di npm, dan laporan bug serta ide bisa dikirim ke GitHub Issues. Kalau MotionMind menghemat waktu Anda, Anda bisa mendukung project ini.
Selamat datang. Kami ingin sekali melihat apa yang Anda buat dengannya.