Math Animation Studio
Build graph-based math animations in the style of 3Blue1Brown, powered by Manim.js and p5.js. Pick a preset scene, watch it play, and record it to a downloadable video. Everything renders locally in your browser.
Reviewed by Alessia Bogoni, Data Analyst & Researcher · Last updated September 29, 2026
How it works
- 1
Choose a preset scene from the dropdown: an undirected graph reveal, a directed weighted graph, or a breadth-first search trace.
- 2
Watch the animation play on canvas; use play/pause, restart, and the speed buttons to control playback.
- 3
Click Record to start capturing the canvas, then Stop when you're done.
- 4
Click Download to save the animation as a WebM video file.
3Blue1Brown-style visuals without installing anything
3Blue1Brown-style math animations are usually made with a Python library and a local render pipeline. Math Animation Studio brings a similar visual language - clean node-and-edge graphs, smooth reveals, colored highlights - straight into the browser using Manim.js and p5.js, so you can preview and export a scene in seconds instead of setting up a rendering environment.
Useful for teaching graph algorithms and CS concepts
The preset scenes focus on graphs because they're a natural fit for visualizing algorithms: watch a graph reveal itself, compare directed versus undirected structures, or trace a breadth-first search step by step. Export the result as a video to drop into a lecture slide, a tutorial, or a study guide.
Frequently asked questions
What is Manim.js and how is it related to 3Blue1Brown's Manim?
Manim.js is a JavaScript library by Jazon Jiao that recreates the visual style of 3Blue1Brown's math animations using p5.js. It's a separate project from the original Python Manim library used by 3Blue1Brown, built independently for browser-based rendering.
Can I write my own custom scenes?
This tool ships with a fixed set of preset scenes (graph reveal, directed graph, and a BFS trace) rather than a code editor, so you can preview and export them without writing anything. Support for custom scenes may be added later.
What video format do I get when I export?
Recording captures the live canvas using your browser's native MediaRecorder API and produces a WebM video file, downloaded directly with no upload to any server.
Does anything get uploaded to a server?
No. The animation renders entirely on the canvas in your browser, and recording captures that canvas locally - nothing about the scene or the recording is sent anywhere.
Why does the animation look the same speed even at 2x?
Speed changes the target frame rate the animation runs at, but your display's refresh rate can cap how much faster it visibly plays. The underlying animation timing still updates correctly at every speed setting.