Remotion: Bikin Video dari React, Dibantu AI sampai Jadi MP4

Sering bikin video dengan susunan yang sama, lalu mengulang edit teks, warna, dan durasinya? Remotion membuat susunan itu menjadi kode React. Satu template bisa kamu revisi, simpan di Git, lalu render lagi menjadi MP4.

Kamu bisa menulis kodenya sendiri atau meminta bantuan agen AI. Mulai dari satu kartu judul lima detik dulu. Setelah hasilnya benar, baru tambahkan gambar, narasi, dan adegan lain.

Yang benar-benar dicoba: showcase di atas langkah tutorial dibuat dengan Remotion 4.0.539, Node 24.15.0, Linux, dan Chrome. Hasilnya MP4 H.264, 1920 × 1080, 30 fps, tepat 10 detik, dengan efek suara orisinal sintetis dan deterministik. Tidak ada musik pihak ketiga atau narasi AI. Skill agen dan render cloud tetap penjelasan berdasarkan dokumentasi. Sumber diperiksa pada 27 Oktober 2026; showcase diperbarui 28 Oktober 2026.

Contoh video Remotion 10 detik

Kode React membuka video, jalur waktu memperlihatkan urutan elemen, lalu cakram, busur kertas, dan kata “gerak dari kode” membentuk komposisi akhir. Efek suara menandai perpindahan dan pendaratan; maknanya tetap terbaca saat suara dimatikan. Ini ilustrasi motion graphics, bukan rekaman antarmuka Studio.

Showcase ini berbeda dari latihan kartu judul lima detik pada langkah 4. Latihan tetap sederhana agar mudah dijalankan. Sumber showcase yang benar-benar dirender berada di .misi/remotion-guide/demo/src/Composition.tsx, pengaturan 300 frame di src/Root.tsx dalam proyek yang sama, dan generator audio di .misi/remotion-10s/sound.mjs pada repositori situs. Jalankan node .misi/remotion-10s/sound.mjs dari akar repo; dari folder proyek demo jalankan npx remotion render src/index.ts Promo out/showcase.mp4 --codec=h264. Font lokal tersimpan di public/ proyek demo.

Remotion itu apa? Bukan hanya sebuah skill

Proyek resminya adalah remotion-dev/remotion, dengan dokumentasi di remotion.dev. Fungsinya membuat video secara terprogram memakai React.

Ada beberapa bagian yang sering tercampur:

• Remotion: library dan perangkat untuk mendefinisikan serta merender video dari kode.
• Agen AI: asisten yang membaca brief dan menulis atau memperbaiki kode proyek. Agen bukan syarat untuk menjalankan Remotion.
• Agent Skill: instruksi praktik kerja agar agen lebih memahami Remotion. Repo resmi skills berbeda dari mesin rendernya.
• Studio: tempat melihat preview, menggeser posisi waktu, dan memeriksa komposisi.
• Renderer: proses yang menghasilkan file video. Preview yang bergerak di browser belum sama dengan MP4 yang sudah diekspor.
• Player: komponen pemutar untuk aplikasi web. Bukan kewajiban untuk proyek video pertamamu.

Cocok untuk: intro, motion graphics, kartu data, video produk dengan banyak variasi, atau konten personalisasi dari data terstruktur. Belum tentu perlu untuk: satu potongan rekaman yang cukup dipangkas dan diberi musik di editor biasa. Remotion tetap membutuhkan keputusan kreatif, aset, dan pemeriksaan hasil.

Konsep dulu: komposisi, frame, dan animasi

Bayangkan video sebagai komponen React yang menerima waktu.

• Composition: satu video dengan ID, ukuran, fps, durasi, dan komponen tampilannya.
• Frame: posisi waktu. Pada 30 fps, 150 frame berarti 5 detik. Frame dimulai dari 0; latihan di bawah berakhir di frame 149, showcase di atas di frame 299.
• useCurrentFrame(): membaca frame saat ini.
• interpolate(): memetakan angka, misalnya frame 0 sampai 20 menjadi opacity 0 sampai 1.
• AbsoluteFill: wadah yang memenuhi kanvas. Cocok untuk latar dan lapisan adegan.

Animasi harus mengikuti frame, bukan jam komputer atau CSS animation yang berjalan sendiri. Frame yang sama perlu menghasilkan gambar yang sama saat preview maupun render. Baca konsep inti, Composition, dan interpolate.

1. Siapkan lingkungan yang sesuai

Pakai folder proyek baru, jangan menumpangkan percobaan ke aplikasi produksi.

node --version
npm --version

Untuk mengikuti versi demo, gunakan Node 24.x yang sesuai kebutuhan proyek. Template create-video@4.0.539 yang diuji mendeklarasikan Node ^20.19.0 || ^22.13.0 || >=24. Ini lebih ketat daripada minimum umum Node 16 yang masih tercantum pada halaman instalasi. Ikuti engines di template dan pesan package manager, bukan hanya angka minimum di artikel lama.

Dokumentasi instalasi juga mencantumkan macOS 15 atau lebih baru, Linux dengan glibc minimal 2.35, serta paket sistem tambahan untuk Linux. Jangan menganggap macOS lama atau semua distro Linux pasti didukung.

Kebutuhan lainnya: terminal, editor kode, ruang disk untuk dependensi dan hasil render, serta koneksi internet untuk instalasi awal. Akun atau langganan agen AI hanya diperlukan jika kamu ingin bantuan AI. Demo manual ini tidak memerlukan kunci API.

2. Buat proyek kosong

Perintah berikut memakai versi yang sama dengan percobaan halaman ini:

npx create-video@4.0.539 --yes --blank my-video
cd my-video
npm run dev

Scaffolder pada percobaan ini memasang dependensinya otomatis. Jika instalasi gagal atau kamu memilih alur lain yang belum memasangnya, jalankan npm install di folder my-video. Jangan menjalankannya sembarang di folder situsmu.

Untuk proyek baru yang mengikuti rilis saat kamu membaca, docs resmi menggunakan npx create-video@latest --yes --blank my-video. Hasilnya bisa berbeda dari versi demo; simpan package-lock.json agar lingkungan dapat diulang.

npm run dev menyalakan Studio. Buka alamat localhost yang dicetak terminal. Biarkan terminal itu berjalan; gunakan terminal kedua untuk perintah berikutnya. Hentikan server dengan Ctrl+C setelah selesai.

3. Pilih cara kerja: manual atau dibantu agen

Manual: langsung lanjut ke contoh kode. Skill tidak diperlukan.

Dibantu AI: dari folder proyek, baca dulu instruksi resmi Agent Skills dan isi repo skills. Lalu pilih salah satu cara pemasangan, bukan semuanya:

# Alur yang dicantumkan docs coding agents:
npx remotion skills add

# Alternatif dari halaman Agent Skills:
# npx skills add remotion-dev/skills

Pemasangan skill ini tidak dijalankan dalam demo. Tinjau tujuan pemasangan dan cakupan akses yang ditawarkan. Setelahnya buka agen pilihanmu di folder video yang sama. Jangan menganggap memasang skill otomatis memberi model, langganan, musik, atau layanan text-to-speech.

Contoh brief yang bisa kamu tempel:

Buat satu komposisi Remotion bernama Promo.
Ukuran 1080x1920, 30 fps, durasi 5 detik.
Latar krem, teks gelap, aksen oranye.
Judul: Satu template. Banyak cerita.
Teks pendukung: Ubah teks. Preview. Render.
Fade in 20 frame pertama, lalu tahan sampai selesai.
Gunakan frame Remotion untuk animasi, tanpa aset dari internet.
Jangan tambah paket atau layanan berbayar tanpa persetujuan.
Tunjukkan file yang berubah, cara preview, dan perintah render.

Brief menyebut hasil dan batasnya. “Bikin video keren” tidak cukup menjelaskan ukuran, timing, naskah, atau hak pakai aset.

4. Buat komposisi pertama

Di template kosong tadi, ganti isi src/Composition.tsx dengan:

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

export const Promo = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 20], [0, 1], {
    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
  });
  return (
    <AbsoluteFill style={{backgroundColor: '#f5efe3', color: '#20211f',
      alignItems: 'center', justifyContent: 'center',
      fontFamily: 'sans-serif', padding: 80}}>
      <div style={{opacity, textAlign: 'center'}}>
        <div style={{fontSize: 38, color: '#a83c12'}}>VIDEO DARI KODE</div>
        <h1 style={{fontSize: 100, lineHeight: 1.05}}>
          Satu template.<br />Banyak cerita.
        </h1>
        <p style={{fontSize: 38}}>Ubah teks. Preview. Render.</p>
      </div>
    </AbsoluteFill>
  );
};

Lalu ganti isi src/Root.tsx:

import {Composition} from 'remotion';
import {Promo} from './Composition';

export const RemotionRoot = () => (
  <Composition id="Promo" component={Promo}
    durationInFrames={150} fps={30} width={1080} height={1920} />
);

Biarkan src/index.ts bawaan template tetap mendaftarkan RemotionRoot. Pilih Promo di Studio, tekan play, lalu geser ke frame 0, 20, dan 149. Judul tidak terlihat di frame 0, sudah penuh di frame 20, dan tetap tampil sampai akhir. clamp mencegah opacity terus naik melewati 1.

Font sans-serif sengaja dipakai pada latihan lima detik agar tidak mengunduh font eksternal. Showcase sepuluh detik memakai font lokal Clash Display dan JetBrains Mono. Untuk produksi, gunakan font berizin yang disimpan bersama proyek dan pastikan selesai dimuat sebelum render. Tampilan font sistem bisa berbeda antarmesin.

5. Render menjadi MP4

Jalankan dari terminal kedua, di folder proyek:

npx remotion render src/index.ts Promo out/promo.mp4 --codec=h264

Tiga bagian penting: src/index.ts adalah entry point, Promo adalah ID komposisi, out/promo.mp4 adalah file tujuan. Jangan menukar nama komponen dengan ID yang didaftarkan pada Composition.

Pada mesin Linux pengujian, Chrome yang sudah terpasang digunakan secara eksplisit:

npx remotion render src/index.ts Promo out/promo.mp4 \
  --codec=h264 --browser-executable=/opt/google/chrome/chrome --concurrency=2

Path Chrome itu khusus mesin pengujian, bukan path universal. Tanpa opsi tersebut, ikuti pengelolaan browser dari CLI. Jangan menyalin path Linux ke Windows atau Mac. Opsi CLI tersedia di dokumentasi render.

Buka MP4 hasilnya di pemutar video. Periksa ukuran, durasi, ejaan, frame terakhir, dan suara bila kamu menambah audio. npm run build pada template yang diuji menjalankan bundle, bukan otomatis menghasilkan MP4. Sukses bundle belum berarti ekspor video selesai.

Setelah berhasil: gambar, audio, adegan, dan variasi

Masukkan aset milikmu

Simpan gambar sebagai public/logo.png. Di komposisi, gunakan Img dan staticFile:

import {Img, staticFile} from 'remotion';

// Letakkan di dalam JSX komposisi:
<Img src={staticFile('logo.png')} style={{width: 180}} />

Gunakan komponen media Remotion agar pemuatan aset terkoordinasi dengan render. Jangan memasukkan URL privat atau kunci API ke kode klien.

Tambahkan suara secara sengaja

Remotion menyusun audio yang kamu sediakan; demo ini tidak menghasilkan narasi otomatis. Menurut docs Audio, komponen Audio tersedia melalui @remotion/media. Jika mengikuti API itu, pasang versi yang cocok dengan paket Remotion lain:

npm install @remotion/media@4.0.539

import {Audio} from '@remotion/media';
import {staticFile} from 'remotion';

// public/narasi.mp3 harus ada dan kamu punya hak pakainya:
<Audio src={staticFile('narasi.mp3')} />

Ini potongan tambahan, bukan file komposisi lengkap. Potongan @remotion/media ini belum diuji; showcase memakai Audio dari paket remotion versi 4.0.539 dengan WAV lokal. Dengarkan ekspor: narasi jangan terpotong, musik jangan menutupi ucapan, jangan ada clipping. Untuk subtitle, gunakan teks yang benar-benar sesuai audio, bukan kalimat hasil tebakan agen.

Susun beberapa adegan

Pisahkan intro, isi, dan penutup menjadi komponen. Beri waktu mulai dan durasi yang jelas. Docs sekarang menjelaskan timing dan trimming; kamu juga akan menemukan <Sequence> di banyak tutorial lama. Docs Sequence masih menjelaskan API-nya, tetapi tidak lagi merekomendasikan pemakaian langsung sebagai pola utama. Jangan mencampur contoh lama dan terbaru tanpa memeriksa versi.

Buat variasi dari satu template

Pindahkan teks, warna, atau data menjadi props setelah satu video bekerja. Parameterized rendering menjelaskan cara memakai input berbeda untuk komposisi yang sama. Validasi input: batasi panjang judul, periksa bentuk data, dan jangan biarkan URL media arbitrer mengakses jaringan internal renderer.

Untuk belajar, render lokal sudah cukup. Server-side rendering dan Lambda baru relevan ketika kamu perlu render otomatis di server. Itu memerlukan infrastruktur, kredensial, biaya, dan pengamanan sendiri; bukan efek otomatis dari memasang skill.

Kalau hasilnya bermasalah

• Node atau instalasi ditolak: cek node --version dan engines template. Gunakan versi yang didukung sebelum mengubah dependensi acak.
• Studio kosong: lihat error terminal, pastikan root terdaftar di src/index.ts, lalu pilih ID komposisi yang benar.
• ID komposisi tidak ditemukan: samakan Promo pada perintah render dengan id="Promo" di root.
• Teks tidak terlihat di awal: di contoh ini opacity frame 0 memang 0. Geser ke frame 20 sebelum menyimpulkan ada bug.
• Gambar atau audio hilang: cek ejaan, huruf besar-kecil, lokasi public/, dan staticFile(). Coba aset lokal yang jelas hak pakainya.
• Preview berbeda dari ekspor: cek font, pemuatan aset, animasi CSS berbasis waktu, dan nilai acak. Buat tampilan mengikuti frame secara deterministik.
• Render kehabisan memori: tutup proses berat, turunkan concurrency, uji klip pendek atau resolusi kecil dulu. Jangan menambah concurrency tanpa mengukur.
• Browser gagal jalan di Linux: periksa dependensi sistem serta path browser. Jangan menjadikan penonaktifan sandbox sebagai perbaikan otomatis.
• Video tanpa suara: latihan lima detik memang senyap. Showcase sepuluh detik memiliki audio; periksa volume pemutar jika tidak terdengar.

Biaya, lisensi, dan keamanan

Lisensi bukan detail belakangan. LICENSE.md resmi memakai lisensi khusus. Sumber kodenya tersedia, tetapi jangan menyebutnya MIT atau menganggap semua penggunaan bebas tanpa syarat.

Ringkasan sumber resmi pada 27 Oktober 2026:

• Individu, organisasi nirlaba, serta perusahaan profit sampai 3 karyawan termasuk kelompok yang dapat memenuhi Free License. Ada juga ketentuan evaluasi. Baca syarat lengkap, termasuk batas penjualan turunan perangkat lunaknya.
• Organisasi yang tidak memenuhi Free License memerlukan Company License.
• Halaman harga mencantumkan paket Creators US$25 per seat per bulan dan Automators US$0,01 per render, minimum US$100 per bulan. Kategori penggunaan dan ketentuan menentukan paket yang berlaku; bukan semua orang wajib membeli keduanya.
• Biaya lisensi berbeda dari biaya model AI, server, storage, bandwidth, musik, font, dan layanan suara. Harga dapat berubah; konfirmasikan sebelum penggunaan komersial.

Batas akses: jalankan agen hanya pada folder video dan aset yang memang kamu izinkan. Baca skill atau skrip sebelum memasangnya, tinjau perubahan kode, jangan berikan kredensial produksi untuk latihan. Jangan mengekspos Studio lokal ke internet tanpa memahami kontrol aksesnya.

Hak aset: punya akses ke gambar, rekaman, atau musik bukan berarti punya hak publikasi. Lisensi Remotion tidak memberikan hak atas konten TikTok, wajah, merek, musik, atau font pihak lain. Video sumber tidak diunduh ulang untuk ditayangkan di situs ini.

Checklist sebelum unggah

• Ukuran dan rasio sesuai tujuan; teks penting tidak tertutup antarmuka platform.
• Naskah, angka, nama, dan klaim sudah diperiksa manusia.
• Audio terdengar jelas bila digunakan; subtitle sesuai ucapan.
• Tidak ada aset hilang, frame hitam tak disengaja, atau teks terpotong.
• File MP4 final sudah diputar, bukan hanya preview Studio.
• Hak aset dan lisensi penggunaan sudah sesuai.

Sumber dan batas riset

Sumber awal: TikTok Ngurah Mayun. Audio 93 detik ditranskripsikan dengan Deepgram; gambar disampel tiap 15 detik dan dianalisis dengan Gemini 3.8 Flash High. Sampel memperlihatkan repo Remotion dan slide “Remotion = video dari React”, “Agent Skill = panduan untuk AI”, serta peringatan source-available. Ini pengenalan konsep, bukan bukti benchmark atau tutorial render lengkap.

Penelusuran tambahan: Agent Reach menemukan repo resmi, dokumentasi, dan tiga video Jonny Burger. Pengambilan subtitle satu video pendukung gagal HTTP 429; tidak ada video YouTube pendukung yang dipelajari penuh atau dipakai sebagai bukti demonstrasi. Panduan ini mengandalkan dokumentasi resmi dan demo kecil yang benar-benar dijalankan, bukan klaim sintesis banyak video.

Rujukan utama untuk melanjutkan:

• Repo Remotion, instalasi, coding agents, skills.
• Komposisi, frame saat ini, interpolasi, render CLI.
• Lisensi dan harga.

Mulai dari lima detik yang bekerja. Baru perluas template saat kebutuhan videonya jelas.