How does MooScript export MP4 and transparent WebM without a backend server?

MooScript steps your composition deterministically frame by frame, draws each vector state onto an HTML5 Canvas alongside decoded B-roll frames, and feeds hardware VideoEncoder and AudioEncoder pipelines via WebCodecs and mediabunny.

Can I overlay MooScript animations inside Premiere, DaVinci Resolve, or CapCut?

Yes. Choose Transparent WebM (VP9 + Alpha) in the export rack to strip the stage background and output a crisp alpha-channel overlay, or load up to 300 MB of B-roll video directly underneath your shots inside MooScript.

Which AI models work best with MooScript Studio?

Inside Studio you can connect Gemini, OpenAI, Anthropic Claude, DeepSeek, Groq, or OpenRouter with your own API key, or copy our official AI System Prompt into any chat assistant and paste the generated MooTween code back.

Can I generate voice-overs and sound effects completely offline?

Yes. MooScript bundles an in-browser Piper ONNX neural TTS engine for offline narration, synthesizes procedural whoosh, pop, riser, and impact SFX automatically on cuts, and aligns shot cuts to music beats.

Which browsers support hardware WebCodecs rendering?

Chromium-based browsers including Chrome 94+, Edge 94+, Brave, and Arc support full hardware MP4 and WebM encoding, plus animated GIF, Cover PNG, standalone HTML player, and SRT/VTT caption export.

Motion graphics from code

Write or prompt SVG scenes in your browser, layer B-roll footage, sync cuts to music beats, and encode MP4, WebM Alpha, or GIF on your GPU via WebCodecs.

Launch Studio → Browse Templates

Zero install. Pure MooTween engine. 100% local rendering.

9:16 · 1080x1920 · 60fps

Shot Script(shot, root, ctx, MooTween)

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 });

Live 60fps StagePointer 540,960

013/210

?template=kinetic-typographyOpen & Edit in Studio →

Shots built in code

Select a preset to inspect live MooTween choreography, or composite transparent SVG layers directly over real B-roll footage.

Read Shot Breakdown

Kinetic Signal Slam

1080x1920 · VP9 Alpha + B-Roll

High-impact vertical opener combining radiating SVG radar rings, continuous camera push, and word-synced kinetic typography.

Customize in Studio →

Prompt to hardware render

Rejects static deck layouts, enforces camera travel, extracts editable layers, and snaps shot cuts to BGM transients.

Local 300 MB B-roll footage decoded under transparent SVG vector layers.

First, hand Claude, ChatGPT, or Gemini the MooScript shot contract.

Official MooTween + SVG system prompt 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)

Then paste or compile the shot through the Anti-Slide linter and multi-track timeline.

Anti-Slide Linter & Beat-Sync Timeline LINT SCORE 0 / PASS

Camera Rig

1.08x → 1.00x

Word Beats

6 synced

Auto-SFX

whoosh + pop

Beat Grid

Locked 124 BPM

Finally, encode 9:16, 16:9, and 1:1 masters locally on your GPU in one queue.

WebCodecs Hardware Queue VideoEncoder + AudioEncoder

MP4 (H.264 + AAC)WebM (VP9 + Alpha)Animated GIFCover PNG

Inside the Studio rack

Every control runs locally in IndexedDB and Web Workers. Hover or tap a note to inspect its live module.

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

Technical comparison

Objective architecture breakdown across browser-native WebCodecs, desktop keyframing, and Node.js video frameworks.

Parameter	MooScript Studio	After Effects	Remotion
Setup time	0 sec in browser (PWA)	4+ GB Creative Cloud install	Node.js, Chromium & FFmpeg CLI
AI scriptability	Native HTML/SVG + MooTween + Linter	Fragile ExtendScript panels	React TSX + bundler build step
Rendering engine	WebCodecs local GPU (mediabunny)	CPU/RAM frame cache	Headless Chromium + Lambda cost
Output formats	MP4, WebM VP9 Alpha, GIF, PNG, SRT	MOV ProRes, MP4 via Media Encoder	MP4, WebM, GIF via FFmpeg
Multi-ratio batch	Built-in 9:16 + 16:9 + 1:1 queue	Manual comp duplication	Separate composition renders
Voice, SFX & B-roll	Offline Piper TTS, Auto-SFX, 300 MB B-roll	External plugins & manual mixing	External TTS APIs & coded audio
License & render cost	100% Free & Open Source (AGPLv3)	Paid monthly subscription	Free solo, paid company + cloud

Setup time

0 sec in browser (PWA)

After Effects: 4+ GB Creative Cloud install · Remotion: Node.js, Chromium & FFmpeg CLI

AI scriptability

Native HTML/SVG + MooTween + Linter

After Effects: Fragile ExtendScript panels · Remotion: React TSX + bundler build step

Rendering engine

WebCodecs local GPU (mediabunny)

After Effects: CPU/RAM frame cache · Remotion: Headless Chromium + Lambda cost

Output formats

MP4, WebM VP9 Alpha, GIF, PNG, SRT

After Effects: MOV ProRes, MP4 via Media Encoder · Remotion: MP4, WebM, GIF via FFmpeg

Multi-ratio batch

Built-in 9:16 + 16:9 + 1:1 queue

After Effects: Manual comp duplication · Remotion: Separate composition renders

Voice, SFX & B-roll

Offline Piper TTS, Auto-SFX, 300 MB B-roll

After Effects: External plugins & manual mixing · Remotion: External TTS APIs & coded audio

License & render cost

100% Free & Open Source (AGPLv3)

After Effects: Paid monthly subscription · Remotion: Free solo, paid company + cloud

Production workflows

Explore dedicated guides for code-driven video, AI motion scripts, faceless Shorts, and animated data charts.

Satellite night view of orbital aurora ribbons and city lights

Code to Video

Compile SVG, scoped CSS, and MooTween timelines directly to MP4 or WebM Alpha in browser.

Open Workflow Guide →

AI Motion Graphics

Turn Claude, ChatGPT, or Gemini prompts into validated SVG choreography with zero slide-deck slop.

Open Workflow Guide →

Faceless Shorts

Pair offline neural voiceovers, 300 MB B-roll, beat-synced cuts, and kinetic captions for 9:16 channels.

Open Workflow Guide →

Data Chart Video

Animate bar races, telemetry lines, KPI counters, and financial breakdowns with exact SVG coordinates.

Open Workflow Guide →

Technical questions

No. MooScript runs on MooTween, our clean-room deterministic timeline and spring engine built specifically for frame-accurate SVG and DOM motion. Every video you render is free from third-party animation engine fees.

Emerald green aurora sweeping across the night sky over Glacier Bay mountains

Render your first shot now

Open MooScript Studio in your browser with zero sign-up, zero install, and full local GPU encoding.

Launch Studio →

WebCodecs

MP4 · VP9 Alpha · GIF