?template=kinetic-typography Kinetic Signal Slam
High-impact vertical opener combining radiating SVG radar rings, continuous camera push, and word-synced kinetic typography.
Kinetic Signal Slam
9:16 · 1080x1920How the code works
- Frame 0 starts as a complete poster: the central lime emblem and concentric SVG rings are immediately visible at t = 0.
- ctx.camera({ move: "push", handoff: "zoom" }) drives the entire .moo-camera stage forward and exits cleanly in the final 0.4 seconds.
- ctx.draw animates radial telemetry vectors outward while ctx.kinetic slams each headline word in sync with spoken word beats.
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 });More templates
| Deterministic Telemetry Chart | Widescreen financial and product telemetry chart featuring progressive SVG spline drawing, rolling counters, and callout pins. | 16:9 |
| Seek-Only Engine Pipeline | Technical architecture diagram illustrating frame-indexed seek(t) evaluation flowing from MooTween tracks into WebCodecs frames. | 16:9 |
| Three-Second Retention Hook | Two-shot vertical sequence built for faceless educational channels, pairing an animated precision dial with a bold comparison reveal. | 9:16 |
Render your first shot now
Open MooScript Studio in your browser with zero sign-up, zero install, and full local GPU encoding.
WebCodecs
MP4 · VP9 Alpha · GIF