HTML ke Video
Ubah kode animasi web, Canvas, dan Three.js jadi MP4
Mulai dari templat
- Jendela siaran langsung Jendela pembicara membulat + lencana LIVE + nama; suara video ikut ke timeline
- Media berbingkai Jendela tepi putih bercahaya + label sudut; masuk dengan skala dan bisa memperbesar area tertentu
- Dinding foto Foto potret muncul berjajar, masing-masing dengan keterangan
- Triptik close-up Gambar berdampingan penuh, masing-masing berlabel, dengan nomor dan judul bab di bawah
- Galeri dengan strip Thumbnail di bawah menyala bergiliran, gambar besar ikut berganti
- Storyboard + utama Kolom storyboard di kiri, jendela utama berlabel di kanan
- Penjelasan layar terbagi Teks besar di kiri (baris kedua berwarna aksen), media di kanan, penanda timeline di bawah
- Judul berisi gambar Video atau gambar Anda tampak di dalam huruf raksasa, dengan judul kecil dan subjudul
- Mockup ponsel Rekaman Anda di dalam bingkai ponsel yang melayang lembut
- Lencana sudut Logo dan nama Anda tetap di sudut
- Gradien berbintik Gradien lambat toska ke oranye dengan grain film — taruh paling bawah sebagai latar
- Judul muncul Judul besar dengan garis bawah dan subjudul
- Kata demi kata Kata muncul satu per satu mengikuti ketukan
- Pertumbuhan data Batang tumbuh sementara angka naik
- Lower third Banner nama dan peran
- Sapuan cahaya Seberkas cahaya menyapu layar
- Hitung mundur 3, 2, 1 muncul sementara cincin berkurang
- Mesin ketik Mengetik huruf demi huruf dengan kursor berkedip
- Cincin progres Cincin terisi sampai persentase Anda dan angkanya naik
- Lingkari Lingkaran gaya tangan mengelilingi bagian penting
- Bentuk 3D berputar Simpul logam berputar pelan (Three.js)
- Bar musik Bar melompat mengikuti musik di linimasa dan berkedip di ketukan
- Kartu teks Teks pada waktu yang sama muncul satu kartu per baris dengan garis aksen; sembunyikan trek teks agar hanya kartu yang tampil
- Judul sorot Bilah stabilo terang menyapu latar krem saat huruf besar jatuh satu per satu
- Kata kinetik Satu kata per layar menghentak sementara blok hitam, kuning, krem menyapu diagonal
- Kartu pertanyaan Label kecil + dua baris besar, baris kedua di atas pita terang
- Label stiker Potongan kertas krem muncul miring (pisahkan dengan |)
- Hitung mundur blok Angka besar berkurang, tiap angka mendorong blok warna baru
- Tag kapsul Judul besar, deretan tag kapsul gelap muncul satu per satu, dan kesimpulan yang disorot di bawah
- Kartu status Kolom kartu di kiri bergulir bergantian ke tengah, perbandingan huruf besar di kanan
- Tabel tag Panel gelap berisi “tag → arti” baris demi baris, kolom kiri berhuruf monospace
- Kartu kutipan Label kecil di kiri atas dan kutipan panjang yang muncul baris demi baris
Sekali klik langsung membuka editor dengan animasi yang sudah terpasang. Untuk templat dengan slot media, seret video atau gambar ke kartunya, atau ketuk “Pakai file saya”, dan bahan itu sudah terpasang saat editor terbuka. File tetap di perangkat Anda; tidak ada yang diunggah.
Tempel animasi web Canvas, SVG, GSAP, atau Three.js; digambar frame demi frame di atas video, lalu diekspor MP4 atau GIF. Gratis di peramban, tanpa watermark.
Tempel kode animasi web atau impor file .html, dan ia menjadi satu klip animasi di timeline: latar transparan, menumpuk di atas video atau gambar Anda, serta bisa dipindah, diubah ukurannya, diatur transparansinya, diberi keyframe, dan diberi animasi masuk-keluar seperti klip lain.
Editor menggambarnya frame demi frame menurut waktu, bukan merekam layar: momen yang sama selalu menghasilkan frame yang sama, jadi yang terlihat di pratinjau itulah hasil ekspornya. Math.random, Date, dan requestAnimationFrame di dalam kode diganti dengan jam yang pasti; GSAP dan Three.js sudah tersedia bawaan, tak perlu menulis skrip eksternal.
Kode berjalan di sandbox terisolasi tanpa akses internet, sehingga gambar dan font eksternal tidak bisa dimuat; bila perlu, sematkan langsung dengan alamat data:. Parameter yang dideklarasikan karya itu sendiri (teks, warna, angka) muncul di panel parameter di kanan; selesai mengubah, langsung ekspor MP4 atau GIF.
Pertanyaan Umum
- Gaya penulisan apa saja yang didukung?
- Empat gaya umum bisa langsung dipakai: definisikan window.__seek(t) untuk menggambar satu frame berdasarkan waktu dalam detik; buat timeline GSAP yang dijeda lalu taruh di window.__timelines; atur adegan Three.js menurut waktu di dalam __seek lalu render; atau loop requestAnimationFrame biasa. Jika halaman hanya berisi satu kanvas, kanvas itu langsung diambil; jika tidak, seluruh halaman (SVG, CSS, teks) digambar sebagai satu frame.
- Bisakah memakai pustaka dari CDN?
- GSAP (termasuk plugin CustomEase, MotionPath, MorphSVG, DrawSVG, SplitText) dan Three.js sudah tersedia bawaan; alamat CDN di kode yang mengarah ke keduanya otomatis diganti dengan salinan bawaan. Pustaka eksternal lain tidak bisa dimuat karena sandbox tidak bisa terhubung ke internet.
- Apakah video hasil ekspor ada suaranya?
- Animasinya sendiri tidak bersuara, dan audio yang diputar oleh kode tidak ikut terekam. Anda bisa menambahkan musik atau sulih suara secara terpisah di timeline, lalu mengekspornya bersama animasi.
- Bagaimana jika kodenya error?
- Bagian atas pratinjau dan klipnya akan menandai ada error, dan pesan error aslinya tampil di dialog kode; klik “Minta AI memperbaiki”, AI akan membaca kode Anda, memperbaikinya, lalu memeriksa hasilnya sekali lagi. Sebelum diperbaiki, pratinjau berhenti di frame normal terakhir, dan klip lain tidak terpengaruh.
- Apakah kodenya diunggah?
- Tidak. Kode disimpan bersama proyek di peramban Anda, serta dirender dan diekspor di perangkat Anda. Kode baru ikut terunggah bersama proyek jika Anda sendiri memilih menyimpan proyek ke cloud.