Deterministic Telemetry Chart
Widescreen financial and product telemetry chart featuring progressive SVG spline drawing, rolling counters, and callout pins.
Customize in MooScript Studio →16:9 · 1920x1080 · 30fps
How the code works
- SVG grid baselines and initial bar silhouettes sit ready on Frame 0 so thumbnails and cover PNGs are never blank.
- ctx.draw progressively strokes the cubic-bezier trend curve across the 1920x1080 widescreen stage.
- ctx.count interpolates the primary metric from 0 to +284% using deterministic frame math without setTimeout drift.
Shot 1 4s
const peakBeat = ctx.beat('WebCodecs', 2.4);
ctx.camera({ move: 'push', handoff: 'whip-left' });
shot.travel('.dc1-col', { scaleY: 0.2, pivot: '50% 100%' }, { scaleY: 1, dur: 0.9, cascade: 0.1, curve: 'overshoot-out(1.4)' }, 0);
ctx.draw('.dc1-line', { at: 0.3, dur: 1.4 });
ctx.pop('.dc1-dots circle', { at: 0.55, cascade: 0.18 });
ctx.count('.dc1-metric', { from: 0, to: 284, prefix: '+', suffix: '%', at: 0.15, dur: 1.9 });
ctx.kinetic('.dc1-label', { style: 'rise', by: 'chars', at: 0.35 });
ctx.punch('.dc1-peak', { at: peakBeat, scale: 1.5 });
More templates
- Kinetic Signal Slam High-impact vertical opener combining radiating SVG radar rings, continuous camera push, and word-synced kinetic typography. 9:16
- 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
Open the studio in this browser. No sign-up, no install, full local GPU encoding.
Either way, your files stay on your device.
