Cara bikin reels motion graphic pake AI dari nol

belakangan ini video motion graphic yang dibikin dari kode mulai sering lewat FYP, mulai dari konten edukasi, animasi teks, sampai iklan produk.

yang biasanya perlu skill editing dan animasi, sekarang bisa dibantu AI lewat coding agent kayak Claude Code, Codex, atau Grok Bot.

lu tinggal siapin ide, referensi visual, sama brief yang jelas. AI bakal nulis kode animasinya, terus hasilnya dirender jadi video MP4 yang bisa langsung diupload ke Reels, TikTok, atau Shorts.

gue bakal bahas dua cara, yang pertama buat lu yang nggak mau ribet pake @bot dan juga pake claude/codex

---

1. kenalan dulu sama motion graphic AI

motion graphic itu ada banyak gayanya, jadi sebelum mulai bikin video mending tentuin dulu mau bikin konten kayak gimana.

beberapa contoh yang bisa lu coba:

• Explainer: animasi diagram buat jelasin topik edukasi, sains, atau teknologi

• Kinetic typography: teks yang bergerak ngikutin narasi

• Product promo: animasi produk buat kebutuhan marketing

• Data & chart: grafik dan angka yang bergerak sesuai data

• Map & timeline: animasi peta, perjalanan sejarah, atau perpindahan lokasi

• UI tutorial: simulasi tampilan aplikasi, cocok buat tutorial singkat

masing-masing punya kebutuhan visual yang beda. misalnya kalo bikin video edukasi, lu mungkin lebih banyak pake diagram sama subtitle. sementara video promo produk lebih fokus ke foto produk, warna brand, dan animasinya.

2. cari referensi video yang lu suka

ini salah satu bagian yang jangan diskip. sebelum nyuruh AI bikin video, lu perlu punya gambaran hasil akhirnya mau kayak gimana. soalnya kalo promptnya cuma "bikinin video motion graphic yang bagus", AI bebas nebak sendiri.

cari referensi dari Instagram Reels, TikTok, YouTube Shorts, atau X.

keyword yang bisa dicoba:

• motion graphic explainer

• kinetic typography

• animated infographic

• product promo animation

• data visualization animation

• Claude Code Remotion

coba kumpulin 3-5 video dari beberapa kreator yang gayanya cocok sama selera lu.

terus tonton pelan-pelan, bisa pake speed 0.5x atau pause tiap ganti scene.

perhatiin beberapa hal:

• Motion: animasinya masuk dengan geser, zoom, atau pop?

• Layout: posisi judul, ilustrasi, dan subtitle ada di mana?

• Warna & font: berapa warna yang dipake, font-nya kayak gimana?

• Pacing: visual ganti tiap berapa detik?

• Audio: narasinya cepat atau santai, musik sama SFX-nya gimana?

trik kecil, coba tonton videonya sekali tanpa suara, terus sekali lagi cuma dengerin audionya. dari situ lu bisa bedain bagian mana yang bikin visualnya menarik dan bagian mana yang dibantu audio.

3. bikin brief atau style spec

kalo referensinya udah kekumpul, sekarang rangkum semua jadi satu file yang namanya style-spec.md

file ini bakal jadi patokan AI setiap kali bikin video.

misalnya lu mau bikin reels edukasi tentang kenapa langit berwarna biru, style spec-nya bisa berisi:

Format video

• 9:16, resolusi 1080x1920

• 30 fps, durasi 35-45 detik

• gaya diagram flat dengan subtitle per kata

Visual

• background biru, teks putih, aksen kuning

• judul di atas, visual utama di tengah

• subtitle di bawah, jangan ketutup tombol Instagram

• animasi masuk cepat, elemen baru tiap 2-3 detik

Audio

• voice over santai kayak lagi ngobrol

• musik ambient pelan

• SFX pas ada transisi atau angka muncul

Struktur

• 0-3 detik buat hook

• 3-4 scene buat isi

• satu ide per scene

tambahin juga link referensi beserta bagian yang lu suka.

nggak harus lengkap dari awal. kalo bingung, kasih detail yang udah lu punya ke AI, terus minta dia bantu lengkapi style specnya.

enaknya punya file ini, nanti kalo mau bikin video lain dengan gaya sama, lu tinggal ganti topik dan script tanpa harus jelasin ulang semuanya.

4. gimana AI bikin videonya?

buat workflow yang gue pake di panduan ini, animasinya dibikin sebagai halaman web pake HTML dan GSAP.

GSAP dipake buat ngatur gerakan elemen sesuai timeline, terus Playwright bakal ngambil screenshot setiap frame dan ffmpeg yang gabungin semuanya jadi MP4.

alur lengkapnya kurang lebih begini:

1. Brief & script: siapin style spec dan naskah, fakta yang dipake harus punya sumber

2. Animasi: AI bikin HTML + GSAP sesuai scene

3. Voice over: generate suara pake ElevenLabs

4. Subtitle: faster-whisper bikin timestamp tiap kata biar pas sama suara

5. Audio: masukin musik, SFX, dan turunin volume musik pas ada narasi

6. Render: Playwright ambil frame, ffmpeg bikin video

7. QA: cek subtitle, audio, layout, dan hasil render

ada juga alternatif kayak Remotion yang punya Agent Skills resmi buat Claude Code dan Codex.

cuma di sini gue pake HTML + GSAP biar alur kerjanya gampang dipahami.

5. tutorial pertama: pake Grok Bot

kalo lu nggak mau ribet install tools atau buka terminal, bisa coba lewat Grok Bot ( tapi ini harus ada subscription either supergrok atau cursor atau premium+)

bot ini bisa ngerjain proses coding sampai render di komputer cloudnya sendiri, jadi lu cukup kasih instruksi lewat chat.

pake template ini aja udah gue buatin nanti tinggal kasih task:

https://x.ai/bot/PwpNvTC10nKkgrJeljCyj (install langsung pake)

step 1: kirim brief dan referensi

upload style spec, kasih 3 link video referensi, terus minta bot bedah dulu gaya animasi dan pacingnya.

jangan langsung minta render. suruh dia bikin rencana scene dan script dulu.

step 2: review script

baca scriptnya, cek apakah kalimatnya enak didenger dan semua fakta udah bener. kalo ada yang aneh, revisi sebelum lanjut.

step 3: generate voice over

lu bisa pake ElevenLabs dengan login akun sendiri di browser bot, terus pilih model multilingual yang tersedia. elevenlabs bisa dapet 10rb credit cukup lah bisa bikin 3 video kalo gratisan

step 4: render dan revisi

kalo video jadi, lu bisa minta revisi langsung lewat chat.

misalnya:

"detik 12-15 terlalu cepat, tahan visualnya 1 detik lebih lama. subtitle yang penting kasih warna kuning sesuai style spec."

lebih gampang daripada harus ngedit ulang satu-satu secara manual.

(singkatnya lu suruh grok bot aja pahamin ini artikel, nanti dia tau sendiri, langsung kasih tau topik yang mau dibuat, nanti tinggal review)

---

6. tutorial kedua: pake Claude Code atau Codex

kalo lu pengen punya kontrol lebih dan semua file project ada di laptop sendiri, bisa pake Claude Code atau Codex.

ada beberapa tools yang perlu diinstall:

• Node.js versi 20 atau 22

• Python 3

• ffmpeg

• Chrome atau Chromium

• Claude Code atau Codex

terus bikin folder project buat nyimpen script, aset, animasi, audio, dan hasil render.

install juga GSAP, playwright-ore, dan faster-whisper.

catatan kecil, waktu gue tes faster-whisper 1.2.1 ada error dengan PyAV versi 19, makanya waktu itu gue pake av<19.

setelah setup selesai, kasih instruksi ke agent secara bertahap.

urutan kerja yang bisa lu ikutin:

1. minta agent baca style-spec.md dan script.md, terus bikin scenes.json yang isinya timing tiap scene

2. suruh bikin animasi HTML 1080x1920 pake satu GSAP timeline yang bisa dikontrol lewat seek(t)

3. minta bikin script render pake Playwright dan ffmpeg, tes 3 still frame dulu sebelum render semuanya

4. generate VO lewat ElevenLabs, terus pake faster-whisper buat nyesuaiin subtitle per kata atau bisa pake API elevenlabs

5. masukin musik dan SFX, atur audio ducking, terus master audio ke -14 LUFS

6. gabungin video dan audio jadi MP4, lanjut QA

jangan lempar semua perintah sekaligus. cek hasil tiap tahap, baru lanjut ke berikutnya.

buat final render, pastiin subtitle sinkron sama VO, font kebaca, dan elemen penting nggak ketutup UI Instagram.

gue juga biasanya nyaranin bikin contact sheet, jadi beberapa frame dari video dikumpulin dalam satu gambar buat ngecek apakah ada scene yang tampilannya aneh.

7. beberapa hal yang perlu diperhatiin

AI bisa bantu bikin animasi, tapi hasil videonya tetep tergantung sama script dan referensi yang lu kasih.

apalagi buat konten edukasi atau data, jangan sampai grafiknya kelihatan bagus tapi angkanya ngarang.

beberapa hal yang bisa lu terapin:

• langsung masuk ke topik dari detik awal, jangan kebanyakan basa-basi

• kasih perubahan visual tiap beberapa detik biar nggak terlalu statis

• bikin subtitle yang tetap kebaca walaupun video ditonton tanpa suara

• satu video fokus ke satu ide, kalo kepanjangan pecah jadi series

• pake style spec yang sama buat beberapa video biar tampilannya konsisten

• simpan sumber fakta, dan cek lisensi gambar, font, musik, serta suara yang dipake

buat aset, lu bisa cari gambar public domain, font dengan lisensi OFL, atau musik yang emang boleh dipake komersial. kalo pake Creative Commons, cek syarat kreditnya juga.

dan kalo udah nemu gaya video yang cocok, simpan style spec sama projectnya. nanti buat video berikutnya tinggal ganti script dan aset yang dibutuhin.

kalo mau fyp mungkin bisa cari topik yang pas, bisa di engage banyak orang, terus bang gimana cara monetizenya? bisa dipake affiliate, ngiklan, dll tergantung tujuanmu masak harus dikasih semua hehe

dan cara paling males lagi lempar artikel ini ke ai agentmu biar dia yang baca hehe