Actual Manim, one video pipeline

Write Manim. Review the exact video. Ship it.

Manim Web runs authored Python through actual Manim CE and stores a private rendered MP4 for preview. That same video carries the final audio mix into export and publishing, with compact timing cues alongside it.

Workspace
Python source, assets, captions, and private preview video in one workspace
Runtime
Actual Manim CE execution produces the preview MP4 directly
Publishing
Download the retained MP4, GIF, or PNG, with only useful cue metadata
Browser-first workflow
scene 01
Live Preview
Scene 01
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.

Browser-first workflow
Script, preview, export

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

Product Model

A scene workspace for real Manim projects, not just a code input box.

The workflow works best when it teaches good scene habits: establish the visual idea first, test uncertain choices in scratch space, keep the main file disciplined, and publish with the surrounding project context still attached.

Teach

Reveal one idea at a time with pacing the viewer can actually follow.

Probe

Use scratch files for typography, framing, and motion before touching the main scene.

Ship

Preview, captions, assets, and export stay in one browser workflow instead of drifting apart.

Runtime

Actual Manim CE

Author in Python and compile against the real engine. The rendered video is the product truth.

Authoring

Video-native loop

Preview, captions, timing cues, and export all follow the retained MP4, GIF, or PNG artifact from the same workspace.

Discipline

Small useful metadata

Keep source-line timing, captions, voiceovers, and image cues—without retaining a browser scene graph.

AI Workflow

Ready to ship

The same MP4 can be reviewed in the editor, exported, uploaded, and streamed on a published page.

Product Workflow

Keep the hero scene polished and the exploration layer loose.

The strongest workflow here is not “write a giant scene and hope it works.” It is a controlled loop: test the uncertain visual decision, keep only the winning move, then advance the main scene one beat at a time.

01 Visual truth

Write the scene in real Manim Python.

Use your normal source file and compile it with the actual Manim CE renderer.

02 Scratch safely

Render a private preview video.

Your workspace receives a user-private MP4, with final mixed audio, at the chosen quality.

03 Pace the lesson

Review timing against the real output.

Navigate with source-line, caption, voiceover, background-audio, and image cues while watching the video.

04 Ship with context

Export the retained render artifact.

Animated scenes download as MP4 videos or looping GIFs. Static scenes keep their full-quality PNG and receive the same export download flow.

Scene Standards

Better scenes come from clearer structure, not from more effects.

Use the toolchain to support scene quality: disciplined files, clear narrative beats, and a production loop that keeps supporting media tied to the scene instead of drifting into separate systems.

Scene Discipline

Work from source to final video.

The editor does not approximate a scene in the browser; it presents the result of the renderer you export with.

  • Normal Python source files in a private workspace
  • One renderer for preview and export
  • No browser scene graph to keep in sync
Production Support

Keep timing information useful and compact.

Captions, voiceovers, background audio, images, and source-line ranges stay available as cues—not as a second renderer input.

  • Line-to-timeline mapping for navigation
  • Video includes its final audio mix
  • Static previews export as full-quality PNG images
Assistant Loop

Publish exactly what was rendered.

A publish contains the MP4, a poster image, and compact metadata. There is no scene JSON endpoint to expose.

  • Direct public video streaming
  • MP4 uploads to YouTube; PNG exports stay downloadable
  • Private workspace artifacts by default
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.
- If the file is meant to be rendered or published, put `#title:` and `#description:` header comments at the top of that file.
- `ImageMobject(...)` and `SVGMobject(...)` may use scene-relative paths such as "images/logo.png", explicit relative paths such as "./images/logo.png", or workspace-root paths such as "data/topic/main/images/logo.png".
- Prefer `image_id="..."` when the image comes from an uploaded scene asset managed by the editor or MCP tools.
- Use `VideoMobject(video_id="...")` for uploaded videos. Add it to the scene, call `play()`, and advance scene time with `wait()` or animations; `pause()`, `resume()`, `seek()`, playback rate, looping, volume, mute, and source-audio export are supported.
- 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.
- If the file is meant to be rendered or published, put `#title:` and `#description:` header comments at the top of that file.
- `ImageMobject(...)` and `SVGMobject(...)` may use scene-relative paths such as "images/logo.png", explicit relative paths such as "./images/logo.png", or workspace-root paths such as "data/topic/main/images/logo.png".
- Prefer `image_id="..."` when the image comes from an uploaded scene asset managed by the editor or MCP tools.
- Use `VideoMobject(video_id="...")` for uploaded videos. Add it to the scene, call `play()`, and advance scene time with `wait()` or animations; `pause()`, `resume()`, `seek()`, playback rate, looping, volume, mute, and source-audio export are supported.
- 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.
- If the file is meant to be rendered or published, put `#title:` and `#description:` header comments at the top of that file.
- `ImageMobject(...)` and `SVGMobject(...)` may use scene-relative paths such as "images/logo.png", explicit relative paths such as "./images/logo.png", or workspace-root paths such as "data/topic/main/images/logo.png".
- Prefer `image_id="..."` when the image comes from an uploaded scene asset managed by the editor or MCP tools.
- Use `VideoMobject(video_id="...")` for uploaded videos. Add it to the scene, call `play()`, and advance scene time with `wait()` or animations; `pause()`, `resume()`, `seek()`, playback rate, looping, volume, mute, and source-audio export are supported.
- 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.
- If the file is meant to be rendered or published, put `#title:` and `#description:` header comments at the top of that file.
- `ImageMobject(...)` and `SVGMobject(...)` may use scene-relative paths such as "images/logo.png", explicit relative paths such as "./images/logo.png", or workspace-root paths such as "data/topic/main/images/logo.png".
- Prefer `image_id="..."` when the image comes from an uploaded scene asset managed by the editor or MCP tools.
- Use `VideoMobject(video_id="...")` for uploaded videos. Add it to the scene, call `play()`, and advance scene time with `wait()` or animations; `pause()`, `resume()`, `seek()`, playback rate, looping, volume, mute, and source-audio export are supported.
- 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 any scene file that should supply publish metadata.
- In multi-file projects, main.py is usually the canonical publish/export file, but alternate scene files may also carry their own header metadata.
- 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, videos, 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]