?template=kinetic-typography Hentakan Tipografi Kinetik
Pembuka vertikal berenergi tinggi yang memadukan cincin radar SVG, dorongan kamera berkelanjutan, dan tipografi kinetik sinkron suara.
Hentakan Tipografi Kinetik
9:16 · 1080x1920Cara kerja kode
- Frame 0 langsung tampil utuh sebagai poster: emblem tengah dan cincin konsentris SVG sudah terlihat sejak t = 0.
- ctx.camera({ move: "push", handoff: "zoom" }) menggerakkan panggung .moo-camera maju sepanjang shot lalu melakukan transisi zoom di 0.4 detik akhir.
- ctx.draw menggambar garis vektor keluar sementara ctx.kinetic menghantam setiap kata judul tepat mengikuti ketukan narasi.
Shot 1 · 3.6s
buildJs const hit = ctx.beat('motion', 1.15);
ctx.camera({ move: 'push', handoff: 'zoom' });
ctx.particles({ count: 20, size: [4, 9], color: 'rgba(132,204,22,0.45)' });
ctx.hero('.kt1-core');
ctx.orbit('.kt1-orbit-ring', { turns: 0.35, cx: 540, cy: 960 });
shot.travel('.kt1-wave', { scale: 0.9, opacity: 0.85, pivotPoint: '540 960' }, { scale: 3.1, opacity: 0, dur: 1.25, curve: 'rush-out', loop: 2 }, 0.1);
ctx.draw('.kt1-spokes path', { at: 0.25, dur: 0.65, cascade: 0.08 });
ctx.pop('.kt1-nodes circle', { at: 0.75, cascade: 0.09 });
ctx.kinetic('.kt1-top', { style: 'slam', by: 'words', at: 0.2 });
ctx.kinetic('.kt1-bottom', { style: 'rise', by: 'words', at: hit });
ctx.punch('.kt1-core', { at: hit, scale: 1.24 });
Shot 2 · 3.4s
buildJs const hit = ctx.beat('MP4', 1.35);
ctx.camera({ move: 'pull', handoff: 'whip-up' });
shot.travel('.kt2-bar', { scaleY: 0.25, pivot: '50% 100%' }, { scaleY: 1, dur: 0.85, cascade: { gap: 0.09, from: 'middle' }, curve: 'overshoot-out(1.6)' }, 0);
ctx.kinetic('.kt2-title', { style: 'rise', by: 'words', at: 0.25 });
ctx.punch('.kt2-title', { at: hit, scale: 1.12 });Template lainnya
| Animasi Grafik Pertumbuhan Deterministik | Grafik telemetri layar lebar dengan penggambaran kurva SVG bertahap, penghitung angka presisi, dan penanda titik puncak. | 16:9 |
| Arsitektur Pipeline Mesin Seek-Only | Diagram arsitektur teknis yang memvisualisasikan evaluasi seek(t) per frame dari track MooTween menuju enkoder WebCodecs. | 16:9 |
| Hook Retensi Tiga Detik | Rangkaian vertikal dua adegan untuk kanal edukasi faceless, memadukan dial waktu presisi dengan pengungkapan fakta kontras. | 9:16 |
Mulai render adegan pertama
Buka MooScript Studio langsung di browser tanpa daftar akun, tanpa instalasi, dan tanpa batas watermark.
WebCodecs
MP4 · VP9 Alpha · GIF