loop motion
Workspace/Home
Tersimpan lokal
Dari ide ke gerak

Bikin ide kamu
bergerak.

Eksperimen motion graphics langsung di browser. Atur teks dan gaya, lalu lihat perubahannya di preview.

Render lokalCanvas 2DTanpa login
LIVE PREVIEW · CODE-DRIVEN16:9
01 / NEON FLOW00:04
Neon Flow, loop animasiANIMASI LOKAL
Mulai dari preset

Contoh gaya animasi

Pilih referensi, lalu sesuaikan gerak dan warnanya di editor.

Garis neon warna-warniABSTRAK · 4 DETIK
Neon FlowGelombang cahaya
Jaringan cahaya abstrakMESH · 4 DETIK
Prism MeshJaring warna dinamis
Pita cahaya unguWAVE · 4 DETIK
Midnight PulseArus cahaya lembut
Jalankan kode Remotion

Tempel React JSX dan lihat preview Player lokal.

Ekspor video lokal

Preset canvas sebagai WebM; kode Remotion dapat dirender menjadi MP4 lokal.

Workspace / 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
Workspace / 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…
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
Menunggu kode Remotion siap.
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.
Workspace / 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.
Workspace / 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

Workspace / 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.