Cara Membuat Motion Graphics dengan Claude Code dan Remotion

Remotion membuat video dari komponen React: waktu dibaca per frame, komponen disusun dalam komposisi, lalu CLI merender file video. Claude Code dapat membantu menulis dan meninjau komponen itu di repository. Output akhirnya berasal dari perintah render Remotion—bukan tombol “Claude Motion” atau preview Artifact. Tutorial ini membuat intro tipografi-orbit original 6 detik; tidak mengklaim file final sudah dirender di environment pembaca.

Persiapan dan setup

Ikuti persyaratan Node dan setup pada dokumentasi Remotion yang aktif. Quickstart yang diperiksa menyediakan generator `create-video`; opsi dan dependensi dapat berubah, jadi gunakan wizard resmi alih-alih menjalankan script instalasi dari repo tak dikenal.

npx create-video@latest --yes --blank intro-motion
cd intro-motion
npm install
npx remotion studio

Buka Claude Code dari folder proyek setelah memeriksa README dan instruksi repository. Minta agent menjelaskan entry point, composition ID, FPS, dan dimensi sebelum mengedit. Jangan biarkan ia mengganti dependency atau lockfile tanpa alasan yang Anda pahami.

Struktur scene: frame menentukan keadaan

Remotion menyediakan nilai seperti `useCurrentFrame` untuk mengubah tampilan seiring frame. `Sequence` menempatkan satu scene pada rentang waktu; `interpolate` memetakan frame ke nilai animasi. Contoh minimal berikut menunjukkan inti pendekatan. Pastikan API versi proyek sesuai dokumentasi Remotion yang terpasang.

import { AbsoluteFill, Sequence, interpolate, useCurrentFrame } from 'remotion';

function TitleScene() {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 18], [0, 1], {
    extrapolateRight: 'clamp',
  });
  const y = interpolate(frame, [0, 18], [36, 0], {
    extrapolateRight: 'clamp',
  });
  return (
    <AbsoluteFill style={{ backgroundColor: '#0b1930', justifyContent: 'center', alignItems: 'center' }}>
      <h1 style={{ color: 'white', opacity, transform: `translateY(${y}px)` }}>Ruang untuk bergerak</h1>
    </AbsoluteFill>
  );
}

export function MainVideo() {
  return <Sequence from={0} durationInFrames={180}><TitleScene /></Sequence>;
}

Contoh prompt untuk Claude Code

Di project Remotion ini, baca struktur tanpa mengubah dependency. Buat komposisi intro 6 detik pada 30 fps, rasio 16:9. Scene: 0–1.2s background muncul; 1.2–4.5s judul dan satu bentuk orbit masuk; 4.5–6s hold lalu fade. Gunakan useCurrentFrame dan interpolate dengan batas clamp, tanpa gambar/font eksternal. Hormati prefers-reduced-motion untuk preview web bila relevan, dan jangan mengklaim itu mengubah hasil video render. Setelah edit, tunjukkan file dan perintah preview/render yang tepat untuk project.

Preview dan render MP4

1. Jalankan `npx remotion studio` dari project dan pilih composition yang benar.
2. Scrub beberapa frame: awal, transisi, akhir scene; cek teks terpotong dan elemen yang keluar frame.
3. Lakukan render kecil terlebih dahulu untuk memastikan entry point dan composition ID.
4. Render komposisi final dengan CLI Remotion dan lokasi output yang jelas.
5. Putar file MP4 hasil render secara manual, cek durasi, rasio, audio, frame terakhir, dan ukuran berkas.

npx remotion render src/index.ts MainVideo out/intro.mp4

Bentuk CLI di atas mengikuti pola dokumentasi; entry point dan ID contoh perlu disesuaikan dengan project yang dihasilkan wizard. Dokumentasi render Remotion menjelaskan opsi `--output`/lokasi output serta encoder. Gunakan `npx remotion render --help` dan docs versi project ketika flag berubah. Render biasanya memerlukan browser/headless dependencies serta waktu dan memori sesuai resolusi.

Error render yang umum

Hak aset dan workflow produksi

Jangan memakai musik, logo, foto, atau font tanpa hak penggunaan yang sesuai. Catat asal aset dan lisensinya. Prompt juga perlu menyebut orientasi, durasi, safe area untuk platform tujuan, dan teks final. Simpan konfigurasi komposisi serta command render di repository supaya revisi bisa diulang. Claude Code dapat menambah code, tetapi review manual tetap menentukan apakah pacing dan pesan visual terasa benar.

Rencanakan waktu per scene sebelum meminta kode

Pada 30 fps, satu detik terdiri dari 30 frame. Tetapkan durasi dan area aman terlebih dahulu: misalnya intro 36 frame, judul 96 frame, lalu 48 frame untuk outro dalam video 6 detik. Jangan mengatur easing sebagai pengganti struktur cerita. Tentukan frame ketika judul terbaca penuh, kapan gerak berhenti, serta apakah CTA memiliki waktu cukup untuk dibaca. Buat storyboard empat panel sederhana bila scene lebih dari satu.

Saat hasil akhir dipakai di sosial, periksa rasio portrait, safe margins untuk UI platform, dan subtitle tanpa audio. Jika ingin background transparan, pastikan encoder/container serta opsi alpha didukung dan penerima dapat membaca output itu; file H.264 MP4 biasa tidak menyimpan alpha seperti WebM tertentu. Untuk soundtrack, selaraskan durasi dan cek hak penggunaan. Render beberapa frame kunci atau preview low-resolution untuk menemukan masalah sebelum render penuh.

Jaga kualitas gerak dengan nilai yang mudah diulang: simpan FPS, ukuran frame, warna brand, dan komposisi pada source control. Hindari memakai angka frame acak di banyak komponen; definisikan durasi scene dan label lalu turunkan timing berikutnya dari angka tersebut. Jika mengubah FPS dari 30 menjadi 60, komposisi frame-based memiliki waktu riil berbeda bila jumlah frame tetap, sehingga konversi durasi perlu diperiksa.

Setelah render berhasil, catat versi Node, Remotion, dan codec bersama file output. Jika font berubah antar mesin, simpan font yang berlisensi bersama project atau gunakan mekanisme font lokal yang dijelaskan Remotion. Jangan mengubah output final dengan editor lain tanpa menyimpan master render; versi kerja yang jelas mempermudah revisi tanggal, harga, atau callout setelah materi awal disetujui.

Untuk rasio vertikal 9:16, susun ulang hierarchy dan posisi judul; jangan sekadar mengecilkan canvas 16:9. Preview pada resolusi akhir dan sisakan margin dari tepi supaya teks tidak tertutup kontrol aplikasi sosial.

Workflow Remotion adalah render video dari kode React. Claude Artifacts adalah cara membuat konten interaktif atau source yang dapat dipreview di produk Claude; keduanya bukan fitur yang sama. Untuk animasi yang berjalan di halaman web, lihat React Bits untuk animasi website.

Sumber: Remotion Docs — Your first video

Sumber: Remotion Docs — Render

Sumber: Remotion Docs — Studio

Sumber: Anthropic Docs — Claude Code quickstart