Panduan Membuat
Motion Graphic dengan AI

Langkah-langkah detail dari nol sampai video jadi — 3 jalur berdasarkan skill level

🟢 AWAM — Browser Only 🟡 MENENGAH — Claude Code Web 🟣 PRO — Remotion + Terminal

Perbandingan 3 Jalur Sebelum Mulai

Kriteria🟢 Awam🟡 Menengah🟣 Pro (Remotion)
Install software?Tidak perluTidak perluWajib (Node.js, VS Code)
Pakai terminal/CMD?TidakTidakYa, banyak perintah
Tool yang dipakaiclaude.ai (browser)claude.ai/code (browser)Terminal + VS Code + npm
Output akhirScreen recording videoScreen recording / MP4MP4 proper kualitas tinggi
Voice Over (VO)?TTS gratis (kualitas standar)TTS gratis / berbayarGemini TTS (kualitas studio)
Waktu untuk mulaiLangsung (5 menit)Langsung (5 menit)1–2 hari setup dulu
Waktu belajar1–2 jamSetengah hari1–2 minggu
🟢 JALUR AWAM

Browser Only — Tanpa Install Apapun

Cocok untuk guru, kreator konten, UMKM, siapapun yang hanya punya laptop/HP dan koneksi internet.

Buat Brief
→
Paste ke Claude
→
Dapat Artifact
→
Review & Revisi
→
Rekam Layar
→
Video Jadi ✓
1

Buka Claude di browser

Buka browser (Chrome, Safari, Edge, apapun) → ketik di address bar: claude.ai → tekan Enter.

  • Kalau belum punya akun: klik "Sign up" → daftar dengan email Google atau buat akun baru
  • Kalau sudah punya akun: klik "Log in" → masukkan email & password
  • Setelah masuk, kamu akan lihat halaman chat. Di pojok kiri atas ada pilihan model — pilih Claude Sonnet (bukan Haiku, kurang bagus untuk animasi)
Rekomendasi: Pakai Claude Pro (berbayar ~$20/bulan) agar batas penggunaan lebih besar dan hasilnya lebih detail. Free tier bisa dipakai tapi lebih terbatas.
2

Siapkan Brief (Rancangan Konten)

Sebelum minta Claude bikin animasi, tulis dulu isi animasinya. Ini yang menentukan kualitas hasilnya. Copy template di bawah, ganti bagian [...]:

📋 Template Brief — Copy & ganti [...] dengan kontenmu
Buatkan motion graphic animation dalam format HTML artifact.

FORMAT: 9:16 (untuk Instagram Reels / TikTok / Story)
TOPIK: [tulis topik animasimu di sini]
STYLE: dark cinematic (background hitam, teks putih bold, aksen warna biru)
DURASI: 6 scene, tiap scene tampil 6 detik
BAHASA: Indonesia

SCENE 1 (Hook/pembuka): [teks yang ingin muncul] → [visual yang diinginkan]
SCENE 2 (Masalah): [teks] → [visual]
SCENE 3 (Solusi/produk): [teks] → [visual]
SCENE 4 (Fitur utama): [teks] → [visual]
SCENE 5 (Bukti/angka): [teks] → [visual]
SCENE 6 (CTA/penutup): [teks] → [visual]

WARNA: background hitam #080808, teks putih, aksen [tulis warna brand kamu, misal: biru #0077CC]
FONT: Poppins bold

TAMBAHAN:
- Navigation dots di kanan layar untuk pindah scene
- Progress bar di atas
- Tombol prev/next di bawah
Contoh pengisian Scene 1: SCENE 1 (Hook): "Capek ngerjain semua sendirian?" → teks besar di tengah layar, background gelap dengan glow merah subtle
3

Paste Brief ke Claude & Kirim

  1. Klik di kotak chat Claude (area di bagian bawah halaman)
  2. Paste brief-mu (Ctrl+V di Windows, Cmd+V di Mac)
  3. Tekan Enter atau klik tombol kirim (ikon panah)
  4. Tunggu. Claude akan mulai menulis kode secara otomatis
  5. Di sebelah kanan chat (atau di panel baru) akan muncul Artifact — ini adalah animasinya yang sudah berjalan langsung
Waktu tunggu: biasanya 1–3 menit untuk 6 scene. Jangan close tab atau refresh halaman selama proses berlangsung.
Kalau tidak muncul Artifact: coba ketik "tampilkan sebagai artifact" atau "buat dalam HTML artifact". Claude kadang perlu diingatkan.
4

Preview Animasi & Minta Revisi

Artifact terbuka langsung di browser. Klik scene satu per satu, cek semua. Kalau ada yang perlu diubah, ketik langsung di chat:

Contoh perintah revisi — spesifik per scene lebih cepat
Scene 2: ganti warna backgroundnya ke biru gelap #0a0f2e.
Scene 3: teks "Solusi Mudah" ganti jadi "Kawai Tech Siap Bantu".
Scene 5: angka "30" perbesar, tambahkan tulisan "menit" di sebelahnya berwarna cyan.
Scene 6: tambahkan animasi konfeti dan tombol "DM Sekarang" yang bouncing.
Tips iterasi: Sebutkan nomor scene dengan jelas. Revisi 2–3 poin sekaligus lebih efisien daripada satu per satu.
5

Tambah Voice Over / Suara (Opsional)

Minta Claude menambahkan voice over otomatis berbahasa Indonesia. Ini pakai teknologi Text-to-Speech bawaan browser — gratis, tidak perlu install apapun.

Perintah ke Claude
Tambahkan voice over bahasa Indonesia untuk setiap scene menggunakan Web Speech API. Tambahkan tombol 🔊 di pojok kiri atas untuk mute/unmute. Teks VO-nya:
Scene 1: "[teks narasi scene 1]"
Scene 2: "[teks narasi scene 2]"
...dst
Penting: Klik sekali di halaman animasi dulu (interaksi manual) sebelum klik tombol 🔊. Browser tidak izinkan suara keluar sebelum ada interaksi pengguna. Kualitas suara bergantung pada voice pack yang terinstall di device kamu — tidak selalu ada suara Indonesia.
6

Rekam Layar → Video Jadi

Ini langkah terakhir. Rekam layar saat animasi berjalan dari scene 1 sampai selesai:

iPhone / iPad
Android
Mac
Windows
  1. Swipe ke bawah dari pojok kanan atas → buka Control Center
  2. Cari ikon Record (lingkaran dalam lingkaran) → kalau belum ada, tambahkan dulu via Settings → Control Center → Customise Controls → tambah "Screen Recording"
  3. Tap ikon Record → hitung mundur 3 detik → rekaman dimulai
  4. Buka Safari/Chrome → buka link Artifact animasinya
  5. Fullscreen Artifact (klik icon expand jika ada) → play dari scene 1
  6. Setelah animasi selesai → balik ke Control Center → tap ikon merah "Stop"
  7. Video tersimpan otomatis di Photos → Recents
  1. Swipe dari atas ke bawah → buka Quick Settings (panel notifikasi atas)
  2. Cari ikon Screen Record → kalau tidak ada, tap ikon pensil/edit untuk menambahkan tile
  3. Tap Screen Record → pilih audio (mic on/off) → tap "Start Now"
  4. Buka Chrome/browser → buka link Artifact
  5. Fullscreen → play animasi dari scene 1
  6. Setelah selesai → notifikasi merah di atas → tap "Stop"
  7. Video tersimpan di Gallery / Google Photos
  1. Tekan Cmd + Shift + 5 → toolbar rekaman muncul di bawah layar
  2. Pilih "Record Selected Portion" (ikon kotak dengan titik) atau "Record Entire Screen"
  3. Jika pilih portion: seret kotak seleksi ke area Artifact di browser
  4. Klik tombol "Record" (bulat merah di toolbar)
  5. Play animasi dari scene 1 sampai selesai
  6. Tekan Cmd + Ctrl + Esc untuk stop, atau klik ikon stop di menu bar atas
  7. Video tersimpan otomatis di Desktop dengan nama "Screen Recording [tanggal].mov"
  1. Tekan Win + G → Xbox Game Bar terbuka
  2. Klik ikon Record (lingkaran bulat merah) di panel Capture → atau tekan Win + Alt + R
  3. Buka browser → buka link Artifact
  4. Play animasi dari scene 1 sampai selesai
  5. Tekan Win + Alt + R lagi untuk stop
  6. Video tersimpan di folder Videos → Captures
  7. Kalau Xbox Game Bar tidak ada: download OBS Studio gratis dari obsproject.com → jauh lebih lengkap
Tips kualitas: Sebelum rekam — tutup aplikasi lain, nonaktifkan notifikasi, pastikan Artifact fullscreen. Koneksi internet stabil saat rekam (animasi butuh load font dari internet).
Tools screen recording yang lebih bagus (opsional):
  • 🖥️ Windows — ScreenToGif (screentogif.com) — gratis, ringan, bisa rekam area tertentu, langsung export MP4/GIF
  • 🖥️ Windows/Mac/Linux — OBS Studio (obsproject.com) — gratis, kualitas terbaik, bisa atur resolusi & FPS
  • 🍎 Mac — Kap (getkap.app) — gratis, paling simpel, klik record langsung jadi .mp4
  • 📱 Android — DU Recorder — gratis, mudah, kualitas bagus
  • 📱 iPhone — Record It! — gratis, bisa tambah narasi/audio

Catatan penting: Artifact bisa di-download, tapi hasilnya file HTML — bukan video. Untuk mendapatkan file MP4/video, screen recording adalah satu-satunya cara di Jalur Awam.

🟡 JALUR MENENGAH

Claude Code Web — Lebih Powerful, Tetap Tanpa Install

Sama-sama pakai browser, tapi lebih canggih. Claude Code bisa jalankan kode, akses file, dan lebih detail dalam membangun animasi kompleks.

1

Buka Claude Code di browser

  1. Buka browser → ketik claude.ai/code → Enter
  2. Login dengan akun Claude yang sama
  3. Tampilannya berbeda dari claude.ai biasa — ada panel chat + panel kode/terminal
  4. Pastikan model yang dipilih adalah Claude Sonnet atau Claude Opus
Perbedaan dengan claude.ai biasa: Claude Code bisa edit file, menjalankan perintah, dan "mengingat" seluruh kode yang sudah dibuat — sehingga revisi lebih akurat dan konsisten.
2

Gunakan Brief yang Lebih Teknis

Di Claude Code, kamu bisa kasih arahan lebih spesifik. Claude akan mengikutinya dengan lebih presisi:

📋 Template Brief Level Menengah
Buatkan motion graphic HTML artifact 9:16 dengan spesifikasi:

STAGE: --max-h:720px, responsive 9:16, --u = 1% stage width
LIBRARY: GSAP 3.12.5 dari cdnjs.cloudflare.com
FONT: Poppins 900 Black dari Google Fonts
BACKGROUND: #080808 dengan radial glow effect

KONTEN:
Topik: [isi topikmu]
6 scene, auto-advance 6 detik per scene

SCENE 1 — Hook: [deskripsi visual + teks on-screen]
SCENE 2 — Problem: [...]
SCENE 3 — Solusi/Product reveal: [...]
SCENE 4 — Features: [...]
SCENE 5 — Stats/Proof: [format: angka besar kiri, deskripsi kanan]
SCENE 6 — CTA: [...]

WARNA AKSEN: [hex code warna brand kamu]
TAMBAHAN: navigation dots di kanan, progress bar atas, tombol prev/next
3

Review dan Iterasi

Claude Code akan membuatkan artifact sekaligus menyimpan file. Proses revisi lebih cepat karena Claude "ingat" seluruh kode:

  • Artifact langsung muncul di panel kanan atau sebagai link
  • Kalau perlu revisi: jelaskan yang spesifik di chat → Claude edit file → artifact terupdate otomatis
  • Bisa minta Claude simpan versi berbeda (misal: versi 9:16 dan versi 16:9)
Workflow terbaik: Build 1 scene dulu → review → kalau bagus → minta lanjut scene berikutnya. Lebih terkontrol daripada langsung minta semua sekaligus.
🟣 JALUR PRO

Remotion — Output MP4 Berkualitas Tinggi

Gunakan jalur ini kalau kamu ingin output MP4 proper yang bisa diedit di video editor. Butuh kesabaran untuk setup awal.

⚠️ Jujur: Jalur ini cukup teknis. Kalau kamu bukan dari background IT/programming, perkirakan 1–2 hari hanya untuk setup, belum bikin animasinya. Kalau goal-mu cuma konten sosmed, Jalur Awam sudah lebih dari cukup.
1

Install Node.js — Mesin JavaScript-nya

Node.js adalah software yang menjalankan kode JavaScript di komputermu (seperti mesin/engine). Wajib ada sebelum bisa menjalankan Remotion.

Windows
Mac
  1. Buka browser → ketik nodejs.org → Enter
  2. Di halaman utama ada 2 tombol besar: "LTS" (warna hijau) dan "Current" (abu-abu). Klik tombol LTS — ini versi stabil yang direkomendasikan
  3. File installer akan ter-download otomatis. Namanya seperti: node-v20.x.x-x64.msi (ukuran ~30MB)
  4. Setelah download selesai → buka folder Downloads → double-click file tersebut
  5. Muncul window "Node.js Setup Wizard" → klik Next
  6. Halaman license agreement → centang "I accept the terms in the License Agreement" → klik Next
  7. Halaman destination folder → biarkan default (C:\Program Files\nodejs\) → klik Next
  8. Halaman Custom Setup → biarkan default → klik Next
  9. Halaman Tools for Native Modules → jangan dicentang → klik Next
  10. Klik Install → kalau muncul popup "Do you want to allow this app to make changes?" → klik Yes
  11. Tunggu proses install selesai (~1–2 menit) → klik Finish
  12. Verifikasi (wajib!): Tekan Win + R → ketik cmd → Enter → ketik node --version → Enter → harus muncul angka versi seperti v20.11.0
Kalau muncul "'node' is not recognized as an internal or external command": Restart komputer dulu, lalu coba lagi langkah verifikasi.
  1. Buka browser → ketik nodejs.org → Enter
  2. Klik tombol LTS (warna hijau) untuk download versi stabil
  3. File installer akan ter-download: node-v20.x.x.pkg
  4. Buka folder Downloads → double-click file .pkg tersebut
  5. Muncul window installer → klik Continue
  6. Halaman Read Me → klik Continue
  7. Halaman License → klik Continue → klik Agree
  8. Halaman Installation Type → klik Install
  9. Mac akan minta password → masukkan password login Mac kamu → klik Install Software
  10. Tunggu proses selesai → klik Close
  11. Verifikasi: Tekan Cmd + Spasi → ketik Terminal → Enter → ketik node --version → Enter → harus muncul versi seperti v20.11.0
2

Install VS Code — Editor Kode

VS Code adalah aplikasi untuk menulis dan mengelola kode. Ini tempat kita akan bekerja selama membuat animasi.

Windows
Mac
  1. Buka browser → ketik code.visualstudio.com → Enter
  2. Klik tombol besar "Download for Windows" (tombol biru) → file VSCodeSetup-x64.exe akan ter-download (~100MB)
  3. Setelah download → double-click file tersebut
  4. Kalau muncul popup keamanan → klik Run atau Yes
  5. Accept license agreement → klik Next
  6. Pilih lokasi install → biarkan default → klik Next
  7. Halaman Additional Tasks → centang semua checkbox (terutama "Add to PATH") → klik Next
  8. Klik Install → tunggu (~2 menit) → klik Finish
  9. VS Code akan terbuka otomatis
  1. Buka browser → ketik code.visualstudio.com → Enter
  2. Klik tombol "Download Mac Universal"
  3. File VSCode-darwin-universal.zip ter-download (~200MB)
  4. Buka folder Downloads → double-click file .zip → akan ter-extract menjadi Visual Studio Code.app
  5. Penting: Drag Visual Studio Code.app ke folder Applications (jangan dibuka langsung dari Downloads)
  6. Buka dari Applications → klik Open saat muncul popup keamanan
  7. Setelah VS Code terbuka: tekan Cmd + Shift + P → ketik shell command → pilih "Shell Command: Install 'code' command in PATH" → ini penting agar bisa dibuka dari Terminal
3

Install Claude Code CLI

Claude Code CLI adalah versi Claude yang berjalan di dalam terminal — lebih powerful dari web browser untuk pekerjaan coding.

  1. Windows: Tekan Win+R → ketik cmd → Enter. Mac: Cmd+Spasi → ketik Terminal → Enter
  2. Di terminal yang terbuka, ketik perintah ini persis → tekan Enter: 
    npm install -g @anthropic-ai/claude-code
  3. Tunggu proses download & install selesai (1–3 menit, ada teks yang bergerak di terminal — itu normal)
  4. Ketik claude --version → Enter → harus muncul nomor versi
  5. Ketik claude → Enter → Claude akan meminta Anthropic API key
  6. Dapatkan API key dari console.anthropic.com → Sign up → Dashboard → API Keys → Create Key → copy key-nya
  7. Paste API key di terminal → Enter → setup selesai
Kalau muncul error "EACCES: permission denied" di Mac: Coba jalankan dengan sudo npm install -g @anthropic-ai/claude-code → masukkan password Mac → Enter.
4

Buat Script & Storyboard dengan Gemini

Sebelum coding, buat dulu naskah animasinya. Gunakan Gemini (AI Google) karena bagus untuk scripting narasi:

  1. Buka browser → ketik gemini.google.com → Login dengan akun Google
  2. Copy prompt di bawah → paste di Gemini → ganti [TOPIK] dengan topikmu → Enter
Prompt untuk Gemini — buat storyboard
Bertindaklah sebagai Copywriter video profesional. Buatkan naskah motion graphic berdurasi 45 detik tentang [TOPIK] rasio 16:9 untuk Instagram/YouTube.

Struktur: Hook (5s) → Masalah (8s) → Solusi (10s) → Fitur x2 (10s) → Bukti/Statistik (7s) → CTA (5s).

Format output dalam TABEL dengan kolom:
| No Scene | Durasi (detik) | Narasi VO (bahasa Indonesia, natural, tidak kaku) | Visual yang terlihat di layar |

Setelah tabel, tuliskan narasi VO lengkap versi bersambung yang bisa dibaca dalam 45 detik dengan kecepatan normal berbicara.
Simpan hasilnya! Copy tabel dari Gemini ke file Notepad/Notes. Kamu akan pakai ini di langkah berikutnya.
5

Buat Project Remotion

  1. Buat folder baru di komputermu (misal: C:\Projects\animasi-kawai atau ~/Projects/animasi-kawai)
  2. Buka terminal (CMD/Terminal)
  3. Pindah ke folder tersebut — ketik: 
    cd C:\Projects\animasi-kawai
  4. Jalankan perintah berikut satu per satu (tekan Enter setelah tiap baris): 
    npm create video@latest .
npm install framer-motion @remotion/google-fonts
code .
  5. Perintah code . akan membuka VS Code dengan folder proyek tersebut
  6. Di VS Code, buka terminal internal: menu Terminal → New Terminal (atau tekan Ctrl+` di Windows / Ctrl+` di Mac)
  7. Ketik claude → Enter → Claude Code CLI siap menerima instruksi
Kalau muncul error saat npm create: Paste error message-nya ke Claude → "ini error yang muncul, cara memperbaikinya?" → Claude akan bantu debug.
6

Setup Struktur Project dengan Claude Code

Setelah Claude Code berjalan di terminal VS Code, paste prompt ini → Enter:

Prompt ke Claude Code CLI
Setup struktur folder project Remotion ini. Buat file-file berikut:

1. src/theme.ts → konfigurasi:
   - FPS = 30
   - Durasi tiap scene dalam frame (scene 1: X frame, scene 2: X frame, dst — ambil dari storyboard di bawah)
   - Warna brand: background #080808, aksen [warna brand kamu]
   - Font: [nama font yang diinginkan]

2. src/scenes/ → folder kosong untuk komponen visual tiap scene

3. src/vo-data.json → isi dengan teks narasi VO per scene

Storyboard:
[Paste tabel storyboard dari hasil Gemini di sini]
7

Build Tiap Scene — Satu per Satu

Penting: jangan minta build semua scene sekaligus. Build 1 scene → preview → commit → baru lanjut scene berikutnya. Kalau ada error, lebih mudah diperbaiki.

Prompt per scene — ke Claude Code CLI
Buat komponen HookScene.tsx untuk Scene 1 (Hook).
Gunakan Tailwind + Framer Motion.
Efek animasi: teks muncul dengan fade + blur + scale lembut (gaya Apple).
Gunakan hook useCurrentFrame() dari Remotion sebagai penggerak waktu — ini membuat animasi deterministik.
Durasi: ambil dari variabel di theme.ts.
Kalau ada ilustrasi/icon: buat dengan SVG murni (bukan file gambar PNG/JPG).

Konten scene 1:
- Teks utama: "[teks hook dari storyboard]"
- Visual: [deskripsi visual dari storyboard]
Setelah tiap scene berhasil — WAJIB commit dulu! Di terminal VS Code (bukan yang ada Claude-nya), ketik:
git add . && git commit -m "scene 1 hook selesai"
Ini "checkpoint" — kalau scene 2 rusak, kamu bisa kembali ke sini.
Preview real-time: Buka terminal baru di VS Code (klik + di panel terminal) → ketik npm run dev → browser akan terbuka dengan Remotion Studio untuk preview. Biarkan terminal ini tetap berjalan selama kamu bekerja.
8

Buat Voice Over (VO)

Ada 3 pilihan VO dari yang termudah:

  • ElevenLabs (Paling mudah, ada free tier):
    Buka elevenlabs.io → Sign up gratis → pilih menu "Speech Synthesis" → paste teks narasi → pilih suara Indonesia (cari "Indonesian" atau nama suara Indonesia) → klik Generate → Download MP3. Lakukan per scene.
  • Murf.ai (Alternatif):
    Buka murf.ai → Sign up → New Project → pilih bahasa Indonesia → paste teks → pilih suara → Export MP3.
  • Gemini TTS API (Kualitas terbaik, paling teknis):
    Buka console.cloud.google.com → aktifkan "Text-to-Speech API" → buat API key → gunakan script Node.js yang bisa dimintakan ke Claude.

Simpan semua file audio VO di folder public/vo/ dalam project Remotion.

9

Compositing — Gabungkan Scene + Audio

Minta Claude Code merangkai semua di file Main.tsx:

Prompt ke Claude Code CLI
Buka file src/Root.tsx atau Main.tsx. Rangkai semua scene secara berurutan menggunakan tag Remotion Sequence. Ambil durasi from dan durationInFrames langsung dari variabel di theme.ts.

Tambahkan file VO per scene menggunakan tag Audio dari Remotion. Volume VO = 1 (paling dominan).

Kalau ada SFX/music background, volume-nya 0.3–0.4 (sebagai aksen saja).
10

Preview Final & Render ke MP4

  1. Di Remotion Studio (browser yang terbuka setelah npm run dev), scrub timeline untuk cek keseluruhan video
  2. Pastikan semua scene muncul dengan benar dan audio sinkron
  3. Kalau ada yang perlu difix, instruksikan ke Claude Code → update otomatis
  4. Kalau sudah OK → buka terminal → jalankan: 
    npx remotion render NamaKomposisi out/video-final.mp4
    Ganti "NamaKomposisi" dengan nama yang ada di file Root.tsx — tanya Claude kalau tidak yakin.
  5. Render memakan waktu 5–30 menit tergantung panjang video dan spesifikasi laptop
  6. Hasil MP4 ada di folder out/ dalam project-mu
⚠️ Pastikan internet stabil saat render — Remotion mengunduh font dari Google Fonts secara online. Kalau putus, render akan gagal.

🎨 10 Gaya Animasi yang Bisa Dibuat Claude

Copy salah satu blok prompt di bawah → paste ke Claude → ganti [TOPIK] dengan topikmu. Masing-masing gaya punya karakter visual dan suasana yang berbeda.

👾

1. Pixel Art

RETRO GAME

Tampilan kotak-kotak seperti game NES/SNES. Karakter dan elemen dibuat dari piksel besar yang terlihat jelas. Cocok untuk: konten gaming, edukasi anak, atau brand yang ingin tampil unik dan nostalgia.

Prompt — Pixel Art
Buatkan motion graphic HTML artifact 9:16 tentang [TOPIK].

STYLE: Pixel art retro game 16-bit. Semua elemen dibuat dari piksel besar (8x8 atau 16x16 pixel grid). Karakter dan ikon dibuat dari pixel art SVG squares, bukan gambar. Warna terbatas 8-16 warna cerah seperti palette NES: merah, biru, hijau, kuning, hitam, putih.

ANIMASI: Stepped animation (tiap pergerakan melompat 2-4 piksel, tidak smooth). Karakter bergerak dengan animasi sprite walking (2 frame bergantian). Teks menggunakan font monospace atau pixel-style.

BACKGROUND: Hitam atau biru tua (#001133) dengan bintang-bintang piksel.

6 scene, auto-advance 5 detik, Bahasa Indonesia.
🖊️

2. Kapur Tulis (Chalk)

EDUKASI

Efek papan tulis dengan kapur. Gambar dan tulisan seperti sketsa tangan di papan hitam. Cocok untuk: konten edukasi, kelas online, penjelasan konsep, materi pelajaran.

Prompt — Kapur Tulis
Buatkan motion graphic HTML artifact 9:16 tentang [TOPIK].

STYLE: Chalk on blackboard (kapur tulis di papan hitam). Background warna hijau tua (#1a3a1a) atau hitam (#111). Semua elemen digambar seperti sketsa kapur — garis tidak sempurna, sedikit bergerigi, ada efek tekstur kapur.

WARNA: Putih kapur (#f0f0e8) untuk tulisan utama. Warna kapur pastel (kuning #ffe169, biru muda #aef3ff, merah muda #ffaaa5) untuk highlight dan ilustrasi.

ANIMASI: Efek "menggambar" — garis muncul perlahan seolah ditarik tangan, menggunakan SVG stroke-dashoffset animation. Judul muncul dengan efek tulis kapur dari kiri ke kanan.

FONT: Handwriting style (cursive) atau chalk-style.

6 scene, auto-advance 6 detik, Bahasa Indonesia.
💜

3. Neon (Cyberpunk/Synthwave)

FUTURISTIK

Efek lampu neon bercahaya dengan glow di latar belakang gelap. Nuansa kota malam cyberpunk atau synthwave 80s. Cocok untuk: produk teknologi, gaming, event, brand anak muda.

Prompt — Neon
Buatkan motion graphic HTML artifact 9:16 tentang [TOPIK].

STYLE: Neon cyberpunk / synthwave. Background sangat gelap (#050510 atau #0a0010). Semua elemen menggunakan warna neon terang dengan CSS glow effect (box-shadow dan text-shadow berlapis).

WARNA NEON: Pilih 2-3 warna: magenta (#ff00ff), cyan (#00ffff), hijau neon (#00ff88), atau kuning (#ffff00). Kombinasikan dengan garis grid perspektif di background.

ANIMASI: Efek flicker pada teks neon (opacity berkedip tidak beraturan), glow pulse pada elemen utama, scan line effect tipis di seluruh frame. Teks masuk dengan efek glitch (bergeser sebentar).

DETAIL: Tambahkan grid garis perspektif di background (seperti lantai synthwave), bintang/partikel glowing kecil.

6 scene, auto-advance 6 detik, Bahasa Indonesia.
🎮

4. PS2 3D (Low-poly Retro 3D)

GAMING

Tampilan 3D low-poly seperti game PlayStation 2 era 2000-an. Objek terlihat angular, tekstur terbatas, lighting sederhana. Cocok untuk: konten gaming, nostalgia, event esport.

Prompt — PS2 3D
Buatkan motion graphic HTML artifact 9:16 tentang [TOPIK].

STYLE: Low-poly retro 3D seperti game PS1/PS2 era. Gunakan CSS 3D transforms (perspective, rotateX, rotateY) untuk membuat objek tampak tiga dimensi. Semua objek adalah bentuk geometris dasar (kotak, segitiga, piramid) dengan warna solid flat — TIDAK ada gradient halus.

EFEK: Tambahkan efek "polygon jitter" kecil pada objek (vertices sedikit bergerak tidak menentu seperti PS1). Background sederhana dengan gradien langit low-poly (biru tua ke biru muda, dibagi segitiga).

WARNA: Saturasi tinggi, warna bold — biru royal, hijau, abu, coklat tanah. Bayangan dibuat dengan objek gelap terpisah, bukan gradient.

ANIMASI: Objek 3D berputar lambat, kamera "tracking" sederhana via CSS perspective changes.

6 scene, auto-advance 6 detik, Bahasa Indonesia.
💥

5. Komik (Comic Book / Pop Art)

FUN

Gaya buku komik dengan outline tebal, efek halftone (titik-titik), speech bubble, dan teks onomatopoeia (POW! BAM!). Cocok untuk: konten anak, promo yang energik, campaign yang playful.

Prompt — Komik
Buatkan motion graphic HTML artifact 9:16 tentang [TOPIK].

STYLE: Comic book / pop art. Semua elemen punya outline hitam tebal (3-4px stroke). Background menggunakan pola halftone (titik-titik) dengan warna primer cerah: merah, kuning, biru, putih.

ELEMEN KOMIK yang wajib ada:
- Speech bubble dan thought bubble dengan outline tebal
- Teks onomatopoeia (POW! ZAP! BOOM! WOW!) yang muncul dengan animasi impactful
- Panel-panel komik (kotak hitam border) sebagai pembagi scene
- Efek speed lines (garis-garis radial) di belakang objek yang bergerak

ANIMASI: Stepped (tidak smooth, seperti animasi komik). Objek masuk dengan "impact frame" (frame singkat warna solid sebelum muncul).

FONT: Bold, condensed, uppercase — gaya komik superhero.

6 scene, auto-advance 6 detik, Bahasa Indonesia.
🔷

6. Flat Vector (Modern Minimalis)

PROFESIONAL

Ilustrasi datar dengan warna solid, tanpa bayangan realistis, bentuk geometris bersih. Gaya populer untuk corporate, startup, dan aplikasi mobile. Paling versatile untuk semua jenis konten.

Prompt — Flat Vector
Buatkan motion graphic HTML artifact 9:16 tentang [TOPIK].

STYLE: Flat vector modern. Semua ilustrasi dibuat dari SVG shapes murni (rect, circle, path, polygon) — TIDAK ada efek 3D, bayangan realistis, atau texture. Warna solid tanpa gradient kompleks.

PALET: Pilih 4-5 warna yang harmonis. Contoh: background #F8F9FA (abu terang), aksen biru #2563EB, hijau #10B981, teks hitam #111827, putih #FFFFFF. Atau request warna brand kamu.

KARAKTER (jika ada): Figur manusia sederhana dari bentuk geometris — lingkaran kepala, persegi panjang badan. Warna kulit flat, ekspresi sederhana dari 2 titik + garis.

ANIMASI: Elemen masuk dengan slide in halus (easing ease-out). Transisi antar scene dengan crossfade atau slide. Tidak ada efek berlebihan.

FONT: Sans-serif bersih (Inter atau Poppins) untuk keterbacaan maksimal.

6 scene, auto-advance 6 detik, Bahasa Indonesia.
〰️

7. Garis Minimal (Line Art / Outline)

ELEGAN

Hanya garis tipis tanpa isian warna. Ilustrasi outline saja, sangat minimalis dan elegan. Cocok untuk: brand premium, luxury, konten yang ingin terlihat sophisticated dan bersih.

Prompt — Garis Minimal
Buatkan motion graphic HTML artifact 9:16 tentang [TOPIK].

STYLE: Line art minimal. Semua ilustrasi hanya menggunakan GARIS — SVG dengan stroke saja, fill:none. Ketebalan garis: 1.5px untuk detail, 2.5px untuk outline utama. TIDAK ada area warna yang diisi.

BACKGROUND: Putih bersih (#FFFFFF) atau krem sangat terang (#FAFAF8).

WARNA GARIS: Hitam #1a1a1a untuk konten. Satu warna aksen tipis (misal: merah #E5312B atau biru #0077CC) hanya untuk elemen yang ingin di-highlight.

ANIMASI: Efek "menggambar" — SVG stroke-dashoffset animation, garis muncul seolah sedang ditarik. Teks fade-in dari transparan.

TIPOGRAFI: Font tipis (font-weight 300 atau 400), letter-spacing lebar, uppercase untuk judul singkat.

6 scene, auto-advance 7 detik, Bahasa Indonesia.
🧱

8. Balok Mainan (LEGO / Toy Blocks)

ANAK-ANAK

Semua elemen seperti terbuat dari balok mainan LEGO atau building blocks. Warna-warna cerah, bentuk kotak-kotak, animasi seperti sedang dibangun. Cocok untuk: konten anak, edukasi, brand yang ingin tampil fun dan playful.

Prompt — Balok Mainan
Buatkan motion graphic HTML artifact 9:16 tentang [TOPIK].

STYLE: LEGO / toy building blocks. Semua elemen dibuat dari bentuk kotak (div/rect) yang tersusun seperti balok mainan. Tiap "balok" punya efek 3D sederhana menggunakan CSS border dan box-shadow untuk memberi kesan dimensi.

WARNA BALOK: Merah cerah #E3000B, biru #006CB7, kuning #FFD700, hijau #008000, oranye #FF6B00, putih, hitam. Warna bold, saturasi tinggi seperti LEGO asli.

ANIMASI: Balok-balok "jatuh" dari atas dan menempel (ease bounce), membentuk kata atau gambar. Urutan balok satu per satu membangun sebuah struktur. Stepped animation (tiap balok snap ke posisi, tidak smooth).

KARAKTER: Figur LEGO minifigure dari kotak-kotak CSS (kepala kuning, badan berwarna, kaki).

6 scene, auto-advance 6 detik, Bahasa Indonesia.
🎨

9. Cat Air (Watercolor)

ARTISTIK

Efek lukisan cat air dengan warna yang merembes, tepi tidak sempurna, dan tekstur kertas. Sangat artistik dan hangat. Cocok untuk: konten lifestyle, brand yang ingin tampil handmade dan personal, undangan digital.

Prompt — Cat Air
Buatkan motion graphic HTML artifact 9:16 tentang [TOPIK].

STYLE: Watercolor painting (cat air). Efek dihasilkan dengan CSS: radial-gradient berlapis-lapis dengan opacity rendah (0.2–0.5), blur ringan, dan tepi yang tidak rata menggunakan border-radius acak.

BACKGROUND: Putih kertas dengan tekstur halus (noise CSS filter atau SVG feTurbulence untuk grain).

WARNA: Pastel watercolor — biru lavender, peach, sage green, blush pink, kuning mustard. Warna merembes satu sama lain (gradient transparan yang overlap). Hindari warna solid penuh.

ANIMASI: Warna "muncul" perlahan seperti cat basah menyebar di kertas (opacity fade in dari 0, disertai scale dari 95%). Efek tinta jatuh (droplet) untuk transisi antar scene.

FONT: Handwritten script atau serif elegan untuk kontras dengan gaya cat air.

6 scene, auto-advance 7 detik, Bahasa Indonesia.
📐

10. Blueprint (Technical Drawing)

TEKNIKAL

Gaya gambar teknik / cetak biru arsitek. Background biru tua, garis putih tipis, anotasi teknis, grid. Nuansa engineering dan arsitektur. Cocok untuk: brand teknologi, konstruksi, manufaktur, atau konten yang ingin tampil presisi dan profesional.

Prompt — Blueprint
Buatkan motion graphic HTML artifact 9:16 tentang [TOPIK].

STYLE: Technical blueprint / architectural drawing. Background biru royal tua (#003366 atau #002855). Semua elemen digambar dengan garis putih tipis (1–2px, opacity 0.9) seperti gambar teknik.

ELEMEN WAJIB:
- Grid background dengan garis biru muda sangat tipis (opacity 0.15)
- Garis dimensi dengan tanda panah di ujungnya (seperti anotasi arsitek)
- Label/angka teknis di berbagai sudut (ukuran, spesifikasi, keterangan)
- Title block di sudut (kotak info seperti dokumen teknis resmi)
- Lingkaran callout untuk menyoroti detail penting

WARNA: Putih (#FFFFFF) untuk garis utama, biru muda (#7EC8E3) untuk highlight, kuning (#FFD700) untuk emphasis, background biru tua.

ANIMASI: Garis "menggambar" dirinya sendiri (stroke-dashoffset). Angka/data muncul seperti sedang diketik. Efek scan: garis horizontal menyapu layar saat transisi scene.

FONT: Monospace atau technical sans (Courier atau Roboto Mono) untuk anotasi.

6 scene, auto-advance 7 detik, Bahasa Indonesia.
Tips: Bisa gabungkan 2 gaya sekaligus! Contoh: "Style: Flat vector dengan aksen neon glow" atau "Style: Blueprint dengan elemen watercolor pada background". Claude akan coba mengombinasikannya.

💡 Template Prompt Siap Pakai

Kalau Hasilnya Kurang Memuaskan

Jangan minta bikin ulang dari nol. Feedback spesifik = hasil lebih cepat membaik:

❌ Jangan: "Bikin ulang yang lebih bagus"

✅ Bagus: "Scene 2: warna background terlalu terang, ganti ke #0a0f2e.
Teks di scene 3 ukurannya terlalu kecil, perbesar 1.5x.
Scene 5: angka '30' harus lebih besar dari teks lainnya, tambahkan label 'menit' berwarna biru di sebelahnya.
Scene 6: tambahkan konfeti dan tombol CTA yang bouncing."

Style Reference — Copy Salah Satu

"Style: dark cinematic seperti Apple launch film — background hitam #080808, teks bold putih, aksen warna, split layout kiri-kanan untuk stat scene"

"Style: LEGO/ilustrasi — karakter blok warna-warni, stepped animation (animasi patah-patah), ceria untuk anak-anak"

"Style: flat modern — warna pastel, karakter SVG simple, smooth animation, background gradient"

"Style: whiteboard animation — gambar tangan yang menulis, background putih, garis hitam tebal"

"Style: kinetic typography — hanya teks bergerak, tidak ada ilustrasi, minimalis, impactful"
BONUS

⚡ Prompt Builder — Generate Promptmu Otomatis

Isi kolom di bawah → prompt lengkap langsung muncul, siap di-copy ke Claude. Tidak perlu hafal format apapun.

Format Video
Jalur
Topik Animasi
Gaya Animasi
Jumlah Scene
Target Penonton
Voice Over (VO)
Prompt Siap Pakai
Prompt ini dipakai di mana?
  • 🟢 Jalur Awam & Menengah → buka claude.ai di browser → paste di kotak chat → Enter
  • 🟡 Jalur Menengah (lebih canggih) → buka claude.ai/code → paste di chat → Enter
  • 🟣 Jalur Pro → paste ke Claude Code CLI di terminal VS Code (setelah ketik claude dan Enter)