Motion graphics lewat kode

Tulis atau prompt adegan SVG di browser, tumpuk video B-roll, selaraskan potongan ke ketukan musik, lalu ekspor MP4, WebM Alpha, atau GIF lewat GPU lokal.

Tanpa instalasi. Mesin murni MooTween. Render 100% lokal.

Panggung 60fpsKursor 540,960
013/210
?template=kinetic-typographyBuka & Edit di Studio →

Adegan murni dari kode

Pilih preset untuk menguji koreografi MooTween secara langsung, atau aktifkan lapisan B-roll untuk melihat transparansi SVG di atas video asli.

Baca Bedah Kode
Hentakan Tipografi Kinetik
1080x1920 · VP9 Alpha + B-Roll

Pembuka vertikal berenergi tinggi yang memadukan cincin radar SVG, dorongan kamera berkelanjutan, dan tipografi kinetik sinkron suara.

Kustomisasi di Studio →

Dari prompt ke MP4 GPU

Menolak tata letak ala slide presentasi, mewajibkan gerak kamera, mengekstrak layer visual, dan mengunci cut ke beat BGM.

B-roll video lokal 300 MB berjalan di bawah lapisan vektor SVG transparan.

Pertama, berikan kontrak sistem MooScript ke Claude, ChatGPT, atau Gemini.

System prompt resmi MooTween + SVG Claude / ChatGPT / Gemini
ROLE: MooScript Motion Director
ENGINE: HTML/SVG + Scoped CSS + MooTween (zero GSAP)
RULES:
- Paint primary subject at t = 0
- Drive camera via ctx.cameraMove('.moo-camera', ...)
- Sync spoken beats via ctx.wordBeat(sel, word, opts)

Kedua, tempel atau kompilasi adegan melewati Linter Anti-Slide dan timeline multi-track.

Linter Anti-Slide & Timeline Ketukan Musik LINT SCORE 0 / PASS
Camera Rig
1.08x → 1.00x
Word Beats
6 synced
Auto-SFX
whoosh + pop
Beat Grid
Locked 124 BPM

Terakhir, ekspor serentak rasio 9:16, 16:9, dan 1:1 lewat antrean GPU lokal.

WebCodecs Hardware Queue VideoEncoder + AudioEncoder
MP4 (H.264 + AAC)WebM (VP9 + Alpha)GIF AnimasiCover PNG

Panel mesin Studio

Seluruh modul berjalan lokal di IndexedDB dan Web Worker. Arahkan kursor pada catatan tepi untuk menyorot modulnya.

MooTween Seek ClockGSAP-Free
seek(t = 1.400s)spring(1.1, 0.72)
WebCodecs OutputGPU Hardware
Multi-Format Queue+ Cover PNG
B-Roll & Brand Kit148 / 300 MB
la-silla-night.webmIntro + Watermark
Voice, SFX & Beat GridPiper ONNX
IndexedDB Vault0 KB Cloud Upload

Komparasi teknis

Perbandingan objektif antara WebCodecs di browser, aplikasi desktop tradisional, dan framework video berbasis Node.js.

Waktu persiapan
0 detik di browser (PWA)
After Effects: Instalasi 4+ GB Creative Cloud · Remotion: Setup Node.js, Chromium & FFmpeg
Kemudahan skrip AI
HTML/SVG murni + MooTween + Linter
After Effects: Skrip ExtendScript sulit diotomasi · Remotion: Komponen TSX + proses bundler
Mesin perender
GPU lokal via WebCodecs (mediabunny)
After Effects: Cache RAM & CPU berat · Remotion: Headless Chromium + biaya server
Format keluaran
MP4, WebM VP9 Alpha, GIF, PNG, SRT
After Effects: MOV ProRes, MP4 via Media Encoder · Remotion: MP4, WebM, GIF via FFmpeg
Ekspor multi-rasio
Antrean 9:16 + 16:9 + 1:1 sekaligus
After Effects: Duplikasi komposisi manual · Remotion: Render komposisi terpisah
Suara, SFX & B-roll
TTS Piper Offline, Auto-SFX, B-roll 300 MB
After Effects: Plugin tambahan & mixing manual · Remotion: API TTS eksternal & audio via kode
Lisensi & biaya
100% Gratis & Open Source (AGPLv3)
After Effects: Langganan bulanan berbayar · Remotion: Gratis individu, berbayar tim + cloud

Pertanyaan teknis

Tidak. MooScript berjalan di atas MooTween, mesin timeline deterministik dan fisika pegas buatan sendiri yang dirancang khusus untuk adegan SVG dan DOM. Seluruh video hasil ekspor bebas dari batasan lisensi engine pihak ketiga.

Mulai render adegan pertama

Buka MooScript Studio langsung di browser tanpa daftar akun, tanpa instalasi, dan tanpa batas watermark.

Aurora borealis night sky
WebCodecs
MP4 · VP9 Alpha · GIF