7 ms·

Show HN: I ported Manim to TypeScript (run 3b1B math animations in the browser)

140 points by maloyan 7mo ago

Hi HN, I'm Narek. I built Manim-Web, a TypeScript/JavaScript port of 3Blue1Brown’s popular Manim math animation engine. The Problem: Like many here, I love Manim's visual style. But setting it up locally is notoriously painful - it requires Python, FFmpeg, Cairo, and a full LaTeX distribution. It creates a massive barrier to entry, especially for students or people who just want to quickly visualize a concept. The Solution: I wanted to make it zero-setup, so I ported the engine to TypeScript. Manim-Web runs entirely client-side in the browser. No Python, no servers, no install. It runs animations in real-time at 60fps. How it works underneath: - Rendering: Uses Canvas API / WebGL (via Three.js for 3D scenes). - LaTeX: Rendered and animated via MathJax/KaTeX (no LaTeX install needed!). - API: I kept the API almost identical to the Python version (e.g., scene.play(new Transform(square, circle))), meaning existing Manim knowledge transfers over directly. - Reactivity: Updaters and ValueTrackers follow the exact same reactive pattern as the Python original. Because it's web-native, the animations are now inherently interactive (objects can be draggable/clickable) and can be embedded directly into React/Vue apps, interactive textbooks, or blogs. I also included a py2ts converter to help migrate existing scripts. Live Demo: https://maloyan.github.io/manim-web/examples https://maloyan.github.io/manim-web/examples GitHub: https://github.com/maloyan/manim-web https://github.com/maloyan/manim-web It's open-source (MIT). I'm still actively building out feature parity with the Python version, but core animations, geometry, plotting, and 3D orbiting are working great. I would love to hear your feedback, and I'll be hanging around to answer any technical questions about rendering math in the browser!

socalgal2 7mo ago
thank you! this is awesome!!! I'm far more into the web than python and have wanted something I could drop into a web page.
unova 7mo ago
Congrats! This looks awesome!
sriram_malhar 7mo ago
This is fantastic! Thank you for sharing.
anematode 7mo ago
Amazing!! This is a project I've wanted to tackle for years but never got the chance to properly do.
ziotom78 7mo ago
Thank you! I regularly use Reveal.js to create interactive slide decks for my classes, and your project will be a great tool to have!
jasonjmcghee 7mo ago
Motion Canvas is a mature / popular solution in the "manim but typescript" space for those unfamiliar. It can be used for interactive blog posts and embedded animations etc as well. It also has a built in animation editor / timeline. https://github.com/motion-canvas/motion-canvas https://github.com/motion-canvas/motion-canvas
- Myzel394 7mo ago
  How easy is it to replicate manim's style using motion canvas?
  - jasonjmcghee 7mo ago
    Someone wrote a blog about their journey https://slama.dev/motion-canvas/introduction/ https://slama.dev/motion-canvas/introduction/ But- probably reasonably simple, if you mean the "writing" style of manim. That's just animating an SVG stroke. And then colors and typography
- DrammBA 7mo ago
  Please note that Motion Canvas is also abandoned, the main site is down, and the last commit was Dec 2024.
  - jasonjmcghee 7mo ago
    Afaik it's considered "stable". There's 2800+ people in the discord. And the community made a backup of the site https://archive.canvascommons.io/ https://archive.canvascommons.io/ Update: sounds like the author had some life changes and had to stop his YouTube channel which was the primary motivator for the library- but there are forks popping up (https://github.com/canvas-commons/canvas-commons https://github.com/canvas-commons/canvas-commons). --- This notion that an open source library is "dead" and shouldn't be used because it's not being actively updated is a bit odd. You can fork and fix issues you have. It's got years of many people's work put into it. It's a great library and widely used on YouTube and elsewhere.
  - prathje 7mo ago
hamishwhc 7mo ago
Now someone’s going to write a react-manim renderer I’m sure.
itishappy 7mo ago
Bug reports: The entire Manim CE Logo example, the `x - x_1` text from the Brace Annotation example, all text from the Sin Cos Plot example, and the entire Heat Diagram example all flicker roughly once per second. The text looks rather fuzzy, especially the large M from the Manim CE Logo example. The Three D Light Source example also doesn't appear to have any functioning directional lighting.
- KolmogorovComp 7mo ago
  Same, on Safari
- maloyan 7mo ago
  Thanks for the feedback! I’ve created issues based on your description and will fix them soon - https://github.com/maloyan/manim-web/issues/44 https://github.com/maloyan/manim-web/issues/44 - https://github.com/maloyan/manim-web/issues/45 https://github.com/maloyan/manim-web/issues/45 - https://github.com/maloyan/manim-web/issues/46 https://github.com/maloyan/manim-web/issues/46
  - itishappy 7mo ago
    Issues were all marked as fixed, but the first two still persist. The flickering in particular was fixed only on the logo example, but now exists on the Three D Light Source Position example as well. For issues, may I recommend a more "human-in-the-loop" approach?
lioeters 7mo ago
Looks great! Just started exploring the docs, the links under each example with heading "Learn More" are not clickable. Congrats on the launch, I'll enjoy learning more about it.
somethingsome 7mo ago
Very nice project, I see many use cases. However, I use Manim for maths, for me having computational libraries (python) is a requirement. Most of the transformations that I do are found by using linear algebra, calculus and sometimes full neural networks. All my geometry is computed, not placed by hand. I'm wondering if it would not be possible to have a 'canvas' backend for the web in the python version instead. Btw, Manim is kind of easy to install in its own docker ;)
tenpa0000 7mo ago
This is great timing — I've been putting off making animated diagrams for a blog post because the Manim setup was too much friction for what I needed. Tried the live demo and the 3D orbit scene is surprisingly smooth. Curious about a couple things: - How are you handling the animation interpolation? Manim's rate functions (smooth, there_and_back, etc.) have some quirks that are easy to get subtly wrong. Did you reimplement those from scratch or find a way to match the Python easing curves exactly? - For the py2ts converter — how far does it get on real-world scripts? I have a few older Manim CE scripts with custom VMobjects and I'm wondering if it handles subclassing or if it's more of a "simple scenes only" thing. One suggestion: it'd be really useful to have an export-to-GIF or export-to-MP4 option directly in the browser (maybe via MediaRecorder API). A lot of the Manim use case is generating assets for slides/posts, not just live playback.
zero_shift 7mo ago
How much of the work here was done by an agent? (Being AI accelerated doesn't make this project low value. But it does mean _you_ didn't do the port so much as prompt it)
- fennecbutt 7mo ago
  You're going to be asking this same question a lot going into the future. Perhaps that means it's not a question worth asking?
  - mainframed 7mo ago
    I think there is some value in asking these questions. Maybe a better question would be how much effort and time was put into a project. 1. Maintenance: Projects that (seem to) have the same quality and complexity but were built over months or years by hand versus built with an AI tool in a weekend will probably experience different amounts of maintenance in the future. This is, of course, not a black-and-white rule. But simply knowing that people think a project is worth spending months or years on gives me an indication that they probably want to keep it alive in the future. 2. Testing: Projects developed by hand probably underwent a lot more hidden manual testing—maybe on different hardware, maybe by more than one person. Since my personal projects have gotten significantly more complex with the availability of AI coding assistance, I spend much more time writing prompts and thinking about integration testing. But this is not the case for all projects.
- maloyan 7mo ago
  100% was generated by the agent. It was part of my experiment in Zencoder
ipotapov 7mo ago
You mention using MathJax for LaTeX rendering, which is great for web compatibility. Have you explored the potential limitations of rendering text due to the lack of Pango? This might affect clarity in complex equations. Also, any thoughts on how it performs with large animations compared to traditional Manim: does the browser handle it smoothly?
bikashs 7mo ago
Can I get your socials? (X/Linkedin) I have created something and you might find it useful

140 points by maloyan 7mo ago

socalgal2 7mo ago

thank you! this is awesome!!! I'm far more into the web than python and have wanted something I could drop into a web page.

unova 7mo ago

Congrats! This looks awesome!

sriram_malhar 7mo ago

This is fantastic! Thank you for sharing.

anematode 7mo ago

Amazing!! This is a project I've wanted to tackle for years but never got the chance to properly do.

ziotom78 7mo ago

Thank you! I regularly use Reveal.js to create interactive slide decks for my classes, and your project will be a great tool to have!

jasonjmcghee 7mo ago

Motion Canvas is a mature / popular solution in the "manim but typescript" space for those unfamiliar. It can be used for interactive blog posts and embedded animations etc as well. It also has a built in animation editor / timeline. https://github.com/motion-canvas/motion-canvas https://github.com/motion-canvas/motion-canvas

Myzel394 7mo ago
How easy is it to replicate manim's style using motion canvas?
- jasonjmcghee 7mo ago
  Someone wrote a blog about their journey https://slama.dev/motion-canvas/introduction/ https://slama.dev/motion-canvas/introduction/ But- probably reasonably simple, if you mean the "writing" style of manim. That's just animating an SVG stroke. And then colors and typography
DrammBA 7mo ago
Please note that Motion Canvas is also abandoned, the main site is down, and the last commit was Dec 2024.
- jasonjmcghee 7mo ago
  Afaik it's considered "stable". There's 2800+ people in the discord. And the community made a backup of the site https://archive.canvascommons.io/ https://archive.canvascommons.io/ Update: sounds like the author had some life changes and had to stop his YouTube channel which was the primary motivator for the library- but there are forks popping up (https://github.com/canvas-commons/canvas-commons https://github.com/canvas-commons/canvas-commons). --- This notion that an open source library is "dead" and shouldn't be used because it's not being actively updated is a bit odd. You can fork and fix issues you have. It's got years of many people's work put into it. It's a great library and widely used on YouTube and elsewhere.
- prathje 7mo ago

hamishwhc 7mo ago

Now someone’s going to write a react-manim renderer I’m sure.

itishappy 7mo ago

Bug reports: The entire Manim CE Logo example, the `x - x_1` text from the Brace Annotation example, all text from the Sin Cos Plot example, and the entire Heat Diagram example all flicker roughly once per second. The text looks rather fuzzy, especially the large M from the Manim CE Logo example. The Three D Light Source example also doesn't appear to have any functioning directional lighting.

KolmogorovComp 7mo ago
Same, on Safari
maloyan 7mo ago
Thanks for the feedback! I’ve created issues based on your description and will fix them soon - https://github.com/maloyan/manim-web/issues/44 https://github.com/maloyan/manim-web/issues/44 - https://github.com/maloyan/manim-web/issues/45 https://github.com/maloyan/manim-web/issues/45 - https://github.com/maloyan/manim-web/issues/46 https://github.com/maloyan/manim-web/issues/46
- itishappy 7mo ago
  Issues were all marked as fixed, but the first two still persist. The flickering in particular was fixed only on the logo example, but now exists on the Three D Light Source Position example as well. For issues, may I recommend a more "human-in-the-loop" approach?

lioeters 7mo ago

Looks great! Just started exploring the docs, the links under each example with heading "Learn More" are not clickable. Congrats on the launch, I'll enjoy learning more about it.

somethingsome 7mo ago

Very nice project, I see many use cases. However, I use Manim for maths, for me having computational libraries (python) is a requirement. Most of the transformations that I do are found by using linear algebra, calculus and sometimes full neural networks. All my geometry is computed, not placed by hand. I'm wondering if it would not be possible to have a 'canvas' backend for the web in the python version instead. Btw, Manim is kind of easy to install in its own docker ;)

tenpa0000 7mo ago

This is great timing — I've been putting off making animated diagrams for a blog post because the Manim setup was too much friction for what I needed. Tried the live demo and the 3D orbit scene is surprisingly smooth. Curious about a couple things: - How are you handling the animation interpolation? Manim's rate functions (smooth, there_and_back, etc.) have some quirks that are easy to get subtly wrong. Did you reimplement those from scratch or find a way to match the Python easing curves exactly? - For the py2ts converter — how far does it get on real-world scripts? I have a few older Manim CE scripts with custom VMobjects and I'm wondering if it handles subclassing or if it's more of a "simple scenes only" thing. One suggestion: it'd be really useful to have an export-to-GIF or export-to-MP4 option directly in the browser (maybe via MediaRecorder API). A lot of the Manim use case is generating assets for slides/posts, not just live playback.

zero_shift 7mo ago

How much of the work here was done by an agent? (Being AI accelerated doesn't make this project low value. But it does mean _you_ didn't do the port so much as prompt it)

fennecbutt 7mo ago
You're going to be asking this same question a lot going into the future. Perhaps that means it's not a question worth asking?
- mainframed 7mo ago
  I think there is some value in asking these questions. Maybe a better question would be how much effort and time was put into a project. 1. Maintenance: Projects that (seem to) have the same quality and complexity but were built over months or years by hand versus built with an AI tool in a weekend will probably experience different amounts of maintenance in the future. This is, of course, not a black-and-white rule. But simply knowing that people think a project is worth spending months or years on gives me an indication that they probably want to keep it alive in the future. 2. Testing: Projects developed by hand probably underwent a lot more hidden manual testing—maybe on different hardware, maybe by more than one person. Since my personal projects have gotten significantly more complex with the availability of AI coding assistance, I spend much more time writing prompts and thinking about integration testing. But this is not the case for all projects.
maloyan 7mo ago
100% was generated by the agent. It was part of my experiment in Zencoder

ipotapov 7mo ago

You mention using MathJax for LaTeX rendering, which is great for web compatibility. Have you explored the potential limitations of rendering text due to the lack of Pango? This might affect clarity in complex equations. Also, any thoughts on how it performs with large animations compared to traditional Manim: does the browser handle it smoothly?

bikashs 7mo ago

Can I get your socials? (X/Linkedin) I have created something and you might find it useful