Browser-first animation workspace

Build scenes that feel composed, narrated, and ready to publish.

Manim Web brings scripting, live preview, captions, audio, image assets, export, and MCP-assisted iteration into one workflow shaped like the editor itself.

Workspace
Code, assets, and narration together
Preview
Sharp browser playback with export separation
Publishing
Metadata, subtitles, and export in one loop
Live Preview
Scene 01
Manim Web hero preview
Browser-first workflow
Script, preview, export

Real scene playback, clear structure, and export-ready motion in one browser flow.

Math-first hero
∫ₐᵇ f(x) dx

Clean mathematical staging, strong typography, and export-ready structure.

Live browser preview
∇ · F = 0

Preview full motion in-browser, not static mocks pretending to be animation.

Cover-worthy scenes
e^(iπ) + 1 = 0

Build the main scene, the thumbnail scene, and the scratch loops in one workflow.

Scratch before final

Probe composition and motion in scratch scenes, then move only the proven pieces into the main scene.

Narration stays attached

Captions, voiceovers, and SRT export stay inside the same workspace instead of becoming a separate publishing step.

Asset ids stay stable

Image and audio uploads become clean ids that your script can reference directly and reuse safely.

MCP-assisted workflow

Bring Claude or ChatGPT into compile loops, docs, and workspace patching without leaving the product surface.

Workflow

A full scene-production loop, not just a code box.

01

Start with a real project shape

Use a shallow workspace with `main.py` and `scratch_pad.py` so experimentation has structure from the start.

02

Iterate in fast loops

Test framing, hierarchy, timing, and camera choices in scratch space before touching the final scene.

03

Keep metadata and assets close

Scene title, description, captions, audio, and images stay beside the code instead of being bolted on later.

04

Preview, export, and ship

Validate playback in browser, export with the chosen resolution, and keep subtitles and assets ready for publishing.

Coverage

Core Objects

  • - Circle, Square, Rectangle, Line, Arrow, Dot, Polygon, RegularPolygon
  • - Text, Tex, MathTex
  • - ImageMobject, SVGMobject
  • - Group and VGroup

Animation Primitives

  • - Create, FadeIn, FadeOut, Write, Unwrite, GrowFromCenter, Rotate
  • - Transform, ReplacementTransform, TransformFromCopy, MoveAlongPath
  • - AnimationGroup, LaggedStart, LaggedStartMap

Scene Workflow

  • - Scratch scenes, compile diagnostics, and scene metadata
  • - Voiceovers, captions, background audio, and image assets
  • - Preview, export, and MCP-assisted workspace editing
Prompt Starters

Generate one focused scene or a full MCP-ready project brief

These prompts are for direct code generation, not full project planning. Copy one into your AI and get back a single executable Manim Web scene file tuned to the current runtime.

Concept Explainer Scene

Generate one polished explainer scene with readable structure, large text, and a clear visual arc.

You are generating code for Manim Web.

Current platform expectations:
- Only use these imports when needed:
  - from manim import *
  - import numpy as np
- If string interpolation is needed, use plain f-strings only: f"..."
- Do not use raw f-strings such as rf"..." or fr"..."
- Output only executable Python code inside one fenced ```python code block.
- Prefer deterministic, readable, production-safe scenes.
- Keep composition large and legible.
- Use the real Manim Web API surface, not imaginary APIs.
- Do not use any other imports.
- Do not use relative imports, workspace helper modules, or multi-file outputs.
- If helpful, define small helper functions/classes in the same file only.

Authoring guidance:
- Scenes can live as normal .py files in the workspace.
- ImageMobject("image.png") and ImageMobject("./assets/image.png") should be treated as workspace-relative file paths.
- Keep paths relative and portable.
- Prefer smooth 2D motion unless the prompt explicitly asks for something else.
- Prefer supported runtime patterns such as:
  - ValueTracker with object updaters
  - always_redraw for lightweight redraw patterns
  - Surface.update_surface(...) for animated 3D heightfields
  - SurfaceMesh(surface, ...) when a visible wire overlay is desired
  - Code(...) with explicit language/style/background options
- Make timings intentional and keep the total duration close to what is requested.
- If you define a Scene/ThreeDScene/VoiceoverScene subclass, instantiate it at the bottom of the file and call construct(), for example:
  - scene = MyScene()
  - scene.construct()

Quality bar:
- No placeholder comments like "add more here".
- No prose outside the code block.
- Use explicit parameter names such as run_time=, lag_ratio=, font_size=.
- End with a stable final composition.

Create a single-file scene that explains one technical concept visually.

Requirements:
- Use from manim import * and import numpy as np.
- Build a polished 8-12 second explainer scene.
- Include:
  - a clear headline
  - a subtitle or supporting statement
  - 2 to 4 primary visual elements
  - one focused camera move only if it improves clarity
- Structure the animation in readable phases:
  1. title reveal
  2. visual setup
  3. main transformation or comparison
  4. final emphasized state
- Keep text large and avoid overcrowding.
- Output one complete scene file only.

Animated Surface + Mesh

Ask for a premium 3D surface scene with controlled camera motion and animated geometry.

You are generating code for Manim Web.

Current platform expectations:
- Only use these imports when needed:
  - from manim import *
  - import numpy as np
- If string interpolation is needed, use plain f-strings only: f"..."
- Do not use raw f-strings such as rf"..." or fr"..."
- Output only executable Python code inside one fenced ```python code block.
- Prefer deterministic, readable, production-safe scenes.
- Keep composition large and legible.
- Use the real Manim Web API surface, not imaginary APIs.
- Do not use any other imports.
- Do not use relative imports, workspace helper modules, or multi-file outputs.
- If helpful, define small helper functions/classes in the same file only.

Authoring guidance:
- Scenes can live as normal .py files in the workspace.
- ImageMobject("image.png") and ImageMobject("./assets/image.png") should be treated as workspace-relative file paths.
- Keep paths relative and portable.
- Prefer smooth 2D motion unless the prompt explicitly asks for something else.
- Prefer supported runtime patterns such as:
  - ValueTracker with object updaters
  - always_redraw for lightweight redraw patterns
  - Surface.update_surface(...) for animated 3D heightfields
  - SurfaceMesh(surface, ...) when a visible wire overlay is desired
  - Code(...) with explicit language/style/background options
- Make timings intentional and keep the total duration close to what is requested.
- If you define a Scene/ThreeDScene/VoiceoverScene subclass, instantiate it at the bottom of the file and call construct(), for example:
  - scene = MyScene()
  - scene.construct()

Quality bar:
- No placeholder comments like "add more here".
- No prose outside the code block.
- Use explicit parameter names such as run_time=, lag_ratio=, font_size=.
- End with a stable final composition.

Create a polished single-file 3D scene built around an animated mathematical surface.

Requirements:
- Return one Python file only.
- Use one ThreeDScene.
- Use Surface(...) as the primary object.
- Animate it with:
  - phase = ValueTracker(...)
  - surface.add_updater(... mob.update_surface(... phase.get_value() ...))
- Use surface.set_fill_by_value(...) with 3 to 4 color stops.
- Add SurfaceMesh(surface, ...) only if the wire overlay improves the look.
- Keep the geometry readable with a moderate resolution such as (14, 14) or (18, 18).
- Include one tasteful camera move or ambient rotation at most.
- Make the result look like a premium hero animation, not a classroom demo.

Bake-Safe Updater Scene

Generate one known-good updater example that is short, reusable, and safe for compile-time baking.

You are generating code for Manim Web.

Current platform expectations:
- Only use these imports when needed:
  - from manim import *
  - import numpy as np
- If string interpolation is needed, use plain f-strings only: f"..."
- Do not use raw f-strings such as rf"..." or fr"..."
- Output only executable Python code inside one fenced ```python code block.
- Prefer deterministic, readable, production-safe scenes.
- Keep composition large and legible.
- Use the real Manim Web API surface, not imaginary APIs.
- Do not use any other imports.
- Do not use relative imports, workspace helper modules, or multi-file outputs.
- If helpful, define small helper functions/classes in the same file only.

Authoring guidance:
- Scenes can live as normal .py files in the workspace.
- ImageMobject("image.png") and ImageMobject("./assets/image.png") should be treated as workspace-relative file paths.
- Keep paths relative and portable.
- Prefer smooth 2D motion unless the prompt explicitly asks for something else.
- Prefer supported runtime patterns such as:
  - ValueTracker with object updaters
  - always_redraw for lightweight redraw patterns
  - Surface.update_surface(...) for animated 3D heightfields
  - SurfaceMesh(surface, ...) when a visible wire overlay is desired
  - Code(...) with explicit language/style/background options
- Make timings intentional and keep the total duration close to what is requested.
- If you define a Scene/ThreeDScene/VoiceoverScene subclass, instantiate it at the bottom of the file and call construct(), for example:
  - scene = MyScene()
  - scene.construct()

Quality bar:
- No placeholder comments like "add more here".
- No prose outside the code block.
- Use explicit parameter names such as run_time=, lag_ratio=, font_size=.
- End with a stable final composition.

Create a scene that intentionally leans on updater patterns that must compile and bake cleanly.

Task:
- Use ValueTracker plus one or more object updaters that read tracker.get_value() directly.
- Prefer examples like:
  - a moving dot following a tracker
  - a number or label that updates from the same tracker
  - one secondary transform or emphasis animation after the tracker motion
- Do not fake the motion with manual frame stepping.
- Keep the logic clean enough that another agent could reuse it as a known-good updater template.
- Keep it 5 to 8 seconds and end in a stable final state.

Code Block Showcase

Use this for launch-style code visuals built around one strong Code block instead of generic widgets.

You are generating code for Manim Web.

Current platform expectations:
- Only use these imports when needed:
  - from manim import *
  - import numpy as np
- If string interpolation is needed, use plain f-strings only: f"..."
- Do not use raw f-strings such as rf"..." or fr"..."
- Output only executable Python code inside one fenced ```python code block.
- Prefer deterministic, readable, production-safe scenes.
- Keep composition large and legible.
- Use the real Manim Web API surface, not imaginary APIs.
- Do not use any other imports.
- Do not use relative imports, workspace helper modules, or multi-file outputs.
- If helpful, define small helper functions/classes in the same file only.

Authoring guidance:
- Scenes can live as normal .py files in the workspace.
- ImageMobject("image.png") and ImageMobject("./assets/image.png") should be treated as workspace-relative file paths.
- Keep paths relative and portable.
- Prefer smooth 2D motion unless the prompt explicitly asks for something else.
- Prefer supported runtime patterns such as:
  - ValueTracker with object updaters
  - always_redraw for lightweight redraw patterns
  - Surface.update_surface(...) for animated 3D heightfields
  - SurfaceMesh(surface, ...) when a visible wire overlay is desired
  - Code(...) with explicit language/style/background options
- Make timings intentional and keep the total duration close to what is requested.
- If you define a Scene/ThreeDScene/VoiceoverScene subclass, instantiate it at the bottom of the file and call construct(), for example:
  - scene = MyScene()
  - scene.construct()

Quality bar:
- No placeholder comments like "add more here".
- No prose outside the code block.
- Use explicit parameter names such as run_time=, lag_ratio=, font_size=.
- End with a stable final composition.

Create a scene that showcases code as a first-class visual object.

Requirements:
- Use one or two Code(...) blocks only.
- Pick a real configuration such as:
  - language="python"
  - language="c++"
  - style="dracula"
  - formatter_style="vscode-light"
  - background="window" or background="rectangle"
- Make the code block large and legible.
- Build the rest of the composition around the code block instead of mixing in unrelated widgets.
- Use simple motion like FadeIn, Transform, Circumscribe, or a clean side-by-side comparison.
- The scene should feel like a product-quality code explainer or launch visual.
MCP Prompt Builder

Paste your brief, get a better MCP-ready prompt

Use this when you want the full project workflow. Paste your scene brief here and copy the generated prompt into Claude or ChatGPT connected to Manim Web through MCP.

Built for Manim Web integrated Claude / ChatGPT with MCP enabled.
Generated prompt
You are creating a scene project for Manim Web through MCP.

Use this workflow:
- Start as a shallow project folder.
- Include main.py and scratch_pad.py.
- Put #title: and #description: at the top of main.py.
- Decide landscape or portrait intentionally from the brief.
- Use scratch_pad.py to test typography, composition, motion, camera framing, and uncertain visual choices.
- Keep older scratch probes when useful instead of deleting all previous ideas.
- If the result feels publishable, also create a thumbnail or cover scene with large readable text and clear hierarchy.
- Use stable lowercase snake_case ids for voiceovers, images, and background audio.
- Prefer patching existing files over rewriting them when editing through MCP.
- Return code and project structure that works cleanly inside Manim Web.

User brief:
[Paste your project brief here]