Pilih cara kerjamu: tulis fungsi draw() untuk animasi SVG presisi, atau tuang HTML, CSS, dan JavaScript ke canvas. Preview real-time, ekspor MP4 hingga 4K 60fps, semuanya di browser kamu sendiri.
Semua proses, dari preview sampai encode video, terjadi di browser kamu. Tidak ada antrian render farm.
Video 4K 60fps 10 detik cuma 2-5 MB berkat VBR dan kompresi vektor yang efisien.
Preview dan hasil export memakai fungsi render yang sama persis. Tidak ada kejutan saat diekspor.
Semua yang kamu butuhkan untuk membuat motion graphic berbasis kode, dari editor sampai file MP4 siap pakai.
CodeMirror dengan syntax highlighting & tema dark. Tulis draw(svg, width, height, frame, progress), sisanya otomatis dipanggil tiap frame. Ukuran relatif vmin menjaga proporsi di semua aspect ratio.
Play/Pause dengan loop akurat, slider scrubbing manual, dan preview yang 100% identik dengan hasil export.
Aspect ratio 16:9 / 9:16 / 1:1, resolusi hingga 4K, FPS 24/30/60, durasi sampai 60 detik, bitrate sampai 50 Mbps. Tiga mode kualitas: High, Balanced, Fast.
Menghilangkan garis banding pada gradien halus dengan noise ±1.5 level per pixel. Mode High = dither penuh semua pixel, Balanced = 50% pixel 2x lebih cepat, Fast = tanpa backpressure.
| Opsi | Pilihan | Default |
|---|---|---|
| Aspect Ratio | 16:9, 9:16, 1:1 | 16:9 |
| Resolusi | 720p, 1080p, 2K, 4K | 1080p |
| FPS | 24, 30, 60 | 30 |
| Durasi | 1-60 detik | 10 detik |
| Bitrate | 8 / 16 / 32 / 50 Mbps | 32 Mbps |
Selain SVG Motion, sekarang ada studio kedua. Bukan sekadar mode tambahan, tapi editor penuh untuk animasi berbasis halaman web: satu file HTML utuh, dengan output sampai video transparan.
Tulis HTML, CSS, dan JS dalam satu file. Yang dirender persis file itu, tanpa konversi ke format lain.
CSS animation, Canvas 2D, sampai WebGL. Yang dirender persis file kamu, bukan template yang dikunci.
Tekan play, lihat gerakannya. Atur durasi, resolusi, FPS, dan latar sebelum render.
MP4 (H.264) dengan bitrate akurat, atau WebM (VP9) yang lebih ringan untuk web.
MOV ProRes 4444, MOV RLE, atau PNG Sequence (ZIP). Untuk overlay di editor video tanpa perlu background.
Hasil render langsung bernama rapi berisi tanggal dan spesifikasi, mis. 160926_HTML_Motion_4k10s60fps.mp4. Siap masuk folder aset.
draw() dengan hasil MP4. HTML Motion untuk animasi halaman web (HTML, CSS, JS) termasuk hasil transparan. Keduanya jalan di browser yang sama, dalam satu lisensi.Kenapa harus pakai Motion Tools kalau sudah ada After Effects atau Canva? Jawaban singkatnya: tergantung kebutuhanmu.
| Motion Tools | After Effects | Canva | |
|---|---|---|---|
| Harga | Mulai gratis | Rp360.000/bulan (Creative Cloud) | Gratis, Pro Rp180.000/tahun |
| Install | Tidak perlu, jalan di browser | Install desktop 2GB+ | Browser atau app |
| Cara bikin animasi | Tulis kode draw() | Keyframe + expression | Drag template |
| Studio animasi | SVG Motion + HTML Motion | Satu alur kerja (keyframe) | Template siap pakai |
| Export | MP4 hingga 4K 60fps, bitrate akurat via re-encode FFmpeg | Render ke file (bisa lama) | MP4, kualitas terbatas di gratis |
| Ukuran file hasil | 2-5 MB (vektor efisien) | Tergantung footage, bisa ratusan MB | Tergantung konten |
| Cocok untuk | Motion graphic berbasis kode, microstock | VFX, motion complex, film | Desain statis, presentasi cepat |
Motion Tools bukan cuma buat iseng. Banyak yang pakai untuk bikin aset yang menghasilkan uang.
Bikin footage animasi vektor, export 4K, jual di Shutterstock, Adobe Stock, atau iStock. File kecil (2-5 MB) artinya upload cepat dan komisi bersih.
Looping animation buat intro, outro, atau background video. Bikin sekali, pakai berulang kali di semua konten.
Format 9:16 buat Instagram Reels dan TikTok, 1:1 buat feed. Ukuran file kecil, upload gak lelet, kualitas tetap tajam.
Animasi simpel buat slide presentasi. Ganti gambar statis dengan gerakan yang bikin audiens fokus, tanpa perlu install After Effects.
Empat tahap yang berjalan otomatis begitu kamu tekan tombol export. Pilih salah satu dari tiga mode kualitas sesuai kebutuhan.
Menyiapkan elemen SVG dan canvas tersembunyi. Pilih preset cepat: Web ringan (1080p/30/8), Standar (2K/30/32), atau Premium (4K/60/50).
Konfigurasi encoder H.264 sesuai resolusi dan fps yang dipilih. Mode High menerapkan dither penuh di semua pixel untuk hasil anti-banding maksimal.
Tiap frame dirender, di-dither, lalu di-encode dengan UI tetap responsif. Proses ini butuh waktu, terutama di 4K: sekitar 60-90 detik untuk video 10 detik.
Untuk bitrate 32 Mbps ke atas, file melewati re-encode FFmpeg agar bitrate hasil benar-benar sesuai setting. Ini kunci kualitas untuk microstock.
Mulai gratis, upgrade kapan saja. 1 kode aktif di 1 perangkat, bisa dipindah lewat tombol Reset Kode.
Export 720p, 4 detik, ada watermark. Preview tanpa batas. Cocok untuk mencoba sebelum beli.
Coba GratisHarga perkenalan, akses selamanya selagi kuota masih ada.
Tidak. 1 kode terikat ke 1 perangkat lewat device ID. Kalau ganti perangkat, gunakan tombol Reset Kode untuk memindahkan lisensi.
Sama-sama akses selamanya, tapi Opening dijual dengan harga perkenalan selama kuota terbatas masih tersedia.
Tidak. Semua proses, editor, preview, hingga export video, berjalan langsung di browser.
Karena video vektor jauh lebih efisien dikompresi dibanding rekaman kamera, ditambah VBR yang hanya memakai bitrate sesuai kebutuhan konten.
Tergantung resolusi dan mode kualitas. Di 1080p mode High sekitar 20-30 detik untuk video 10 detik, di 4K sekitar 60-90 detik. Mode Fast bisa 5-10x lebih cepat. Prosesnya berjalan di browser kamu, jadi kecepatan juga ikut spesifikasi perangkat.
Encoder browser kadang menghasilkan bitrate lebih rendah dari yang disetting. Motion Tools menjalankan re-encode FFmpeg di akhir proses untuk bitrate 32 Mbps ke atas, supaya file hasil benar-benar sesuai setting. Ini penting kalau kamu jual footage ke microstock yang mengecek spesifikasi teknis.
SVG Motion: kamu menulis satu fungsi draw() yang menggambar ke SVG tiap frame, hasilnya video vektor yang ringan. HTML Motion: kamu menulis satu file HTML utuh (HTML, CSS, JS) dan yang dirender persis file itu, jadi bebas memakai CSS animation, Canvas, atau WebGL, termasuk untuk export video transparan.
Bisa, lewat tab HTML Motion: MOV ProRes 4444, MOV RLE, atau PNG Sequence (ZIP). Cocok untuk overlay di editor video. SVG Motion menghasilkan MP4 dengan background. Di mode trial, export dibatasi MP4 saja.
Ya. Satu kode lisensi membuka SVG Motion dan HTML Motion sekaligus, termasuk saat trial.