Editor motion graphics berbasis browser. Pilih dari 11 template, atur teks, warna, gerak, dan format 9:16 atau 16:9—lalu lihat hasilnya langsung.
11 template9:16 · 16:9MP4 · WebM lokal
PREVIEW LANGSUNG16:9
01 / NEON FLOW00:04
Neon Flow, loop animasiANIMASI LOKAL
01
Pilih template
Mulai dari 11 template visual atau contoh Neon Flow, Prism Mesh, dan Midnight Pulse.
02
Atur & tambahkan media
Ubah teks, warna, gerak, dan rasio. Unggah gambar atau voice-over.
03
Ekspor di browser
Simpan MP4 atau WebM secara lokal—sudah diuji hingga 1080p dan 30 detik.
11 template visual
Pilih contoh, lalu sesuaikan
Neon Flow, Prism Mesh, dan Midnight Pulse bisa langsung dicoba lalu disesuaikan di Studio.
ABSTRAK · 4 DETIK
Neon FlowGelombang cahaya
MESH · 4 DETIK
Prism MeshJaring warna dinamis
WAVE · 4 DETIK
Midnight PulseArus cahaya lembut
Tambahkan gambar & voice-over
Unggah media lokal dan lihat hasilnya di preview.
Ekspor dari browser
MP4 atau WebM lokal, teruji hingga 1080p dan durasi 30 detik.
Loop Studio / Editor
Studio animasi
Atur komposisi. Perubahan tampil langsung di preview.
Properti animasiEDIT
TenangCepat
2 dtk8 dtk
Preview langsungCanvas 2D
NEON FLOWCANVAS LOKAL
00:00 / 00:04
Judul
Project tersimpan di browser ini1920 × 1080 · 16:9
Loop Studio / Remotion
Jalankan kode Remotion
Upload gambar dan VO lokal, animasikan dengan Remotion, lalu render MP4 langsung di browser.
PLAYER LOKAL
Gambar & voice-over lokalMemuat media demo…
Gambar demo lokal sedang dimuat…
Voice-overtrack otomatis di preview dan MP4
Memuat VO demo…
Gambar demo adalah ilustrasi, bukan foto arsip. Klik ▶ di Player untuk mendengar VO sinkron; file pilihanmu diproses di tab browser dan tidak dikirim ke server.
Aset contoh diambil dari folder lokal proyek.
Editor kode JSX0 / 50000
Sintaks yang didukung
JavaScript + JSX; komponen React dengan export default atau ekspor bernama; impor hanya dari remotion dan react.
Gunakan komponen langsung, bukan <Composition>/registerRoot(). TypeScript/TSX, paket/aset luar, dan semua fitur Remotion belum didukung. Ekspor web mendukung subset CSS (mis. layout dasar, teks, transform, solid/linear background); preview Player bisa berbeda.
Memakai aset sendiri
Gambar tersedia di prop assets.images; tiap item punya name dan src URL lokal. VO pilihan dipasang otomatis sebagai track; jangan tambahkan Audio kedua.
Prompt siap salin ke AI gratis pilihanmuWebsite ini tidak terhubung ke AI. File dan prompt tetap di tab ini.
Tempel prompt ke AI coding pilihanmu, lalu salin JSX hasilnya ke editor di atas. AI luar tidak melihat isi file hanya dari nama; jika perlu, unggah gambar ke layanan itu secara terpisah.
Remotion Player · preview browser1280 × 720
16:9 · render di perangkat
Menyiapkan Remotion Player lokal…
Ekspor MP4 lokal · H.2641280 × 720 · FPS dan durasi mengikuti kontrol di atas · VO ikut bila ada
Render video dan audio dilakukan lokal di browser via WebCodecs; tab harus tetap terbuka. Unggahkan VO untuk menyertakannya di MP4. Browser perlu mendukung H.264/WebCodecs. Kode tetap dibatasi di iframe; request eksternal diblokir.
Player dan compiler JSX disajikan sebagai aset lokal. Kode tidak dikirim ke server atau AI/API video. Ekspor MP4 menggunakan renderer web lokal; renderer mendukung subset CSS/HTML, tidak semua fitur Remotion.
Loop Studio / React + Three.js
POC gambar bergerak + VO
Uji alur sederhana 10 detik: satu gambar, satu voice-over, kode React + Three.js, lalu ekspor MP4 lokal.
TANPA AI API
Buat kodenya di GPT atau AI coding gratis pilihanmu dengan prompt di bawah, lalu tempel di editor. Prompt dan file tidak dikirim otomatis ke AI; semua preview dan render berjalan di browser.
Satu gambar + satu voice-overBelum punya aset? Sample memuat gambar, VO, dan kode sekaligus.
GambarPNG, JPG, WebP · maks 12 MB
Belum ada gambar
Voice-overWAV, MP3, M4A, AAC, OGG · maks 50 MB
Belum ada VO
File tetap lokal. Preview dan ekspor dibatasi 10 detik; bila VO lebih panjang, POC memakai 10 detik pertamanya. Bila VO lebih pendek, video tetap berjalan sampai 10 detik.
Editor kode React + Three.jscontoh
Kontrak kode yang didukung
Komponen React JSX default-export, impor hanya dari react dan three; gunakan assets.image.src, getTime(), dan panggil onFrameRendered() setelah setiap render WebGL.
Harus mengembalikan canvas 1280×720. Tanpa TypeScript, Remotion, paket tambahan, file/path lokal, fetch, atau URL jaringan. Kode berjalan di iframe sandbox terpisah.
Prompt untuk GPT / AI coding gratisSalin manual, minta kodenya, lalu tempel hasilnya di editor.
Nama aset hanya petunjuk; layanan AI luar tidak menerima gambar atau VO kecuali kamu mengunggahnya sendiri ke sana.
Three.js sandbox · preview browser1280 × 720
0.00 dtk10 dtk
Menyiapkan runtime React + Three lokal…
Ekspor MP4 lokal · H.264 + Opus1280×720 · 30 FPS · video 10 detik · VO hingga 10 detik disertakan. Render lokal memakai WebCodecs/Mediabunny.
Upload aset dan jalankan preview untuk mengaktifkan ekspor.
Tidak memakai Remotion, generator video, atau AI API. Ekspor butuh browser modern yang mendukung WebGL, Web Audio, serta encode H.264/Opus via WebCodecs. Track Opus-in-MP4 diuji diputar di Chromium; sebagian pemutar MP4 lama mungkin meminta AAC. Biarkan tab terbuka sampai render selesai.
Loop Studio / Preview
Preview animasi
Pratinjau canvas hidup, digambar langsung oleh browser.
NEON FLOWPREVIEW LOKAL · 16:9
00:0000:04
Neon Flow
Canvas animasi interaktif · tidak memakai video/API eksternal
Loop Studio / Export
Ekspor video
Rekam animasi di perangkatmu, langsung dari canvas browser.
Pengaturan render lokal
Prototipe ini merekam canvas yang sedang bergerak. File dibuat di browser, tidak ada video yang dikirim ke server.
OUTPUT PREVIEW · 1280 × 720
FORMAT FILE
WebMKode Remotion bisa diekspor MP4 di tab Remotion.
UKURAN OUTPUT
1280 × 720Rasio 16:9 · HD
DURASI
04 detikMengikuti durasi loop
FRAME RATE
30 FPSDirekam via MediaRecorder
Export halaman ini merekam preset canvas sebagai WebM. Untuk MP4 dari kode Remotion, gunakan tab Remotion.