7 ms·

Show HN: Manim (3Blue1Brown's animation engine) in the browser via WebGPU

49 points by sinaatalay 2mo ago

Grant Sanderson (3Blue1Brown) created Manim, the Python library he uses to make the math animations in his videos. We reimplemented Manim with the same Python API, but the implementation underneath is Rust, connected to Python through PyO3. The Rust code uses wgpu, so rendering happens on the GPU. To run it in the browser, we compiled the Rust parts to WebAssembly so the PyO3 extension loads in Pyodide. In the browser, wgpu targets the WebGPU API, so animations render in real time on your GPU through the browser. The editor is Monaco (the editor that powers VS Code) with a live preview: write your Manim code on one side, watch the animation update on the other. There's also a built-in AI agent if you'd rather vibe-code your animations.

arecsu 2mo ago
This is very cool!! I'm also mesmerized about the opening animation that transforms the interface of the editor to a complete viewport state. For some reason is pretty laggy on Chrome (macbook air M1) but Firefox is super smooth. Besides that, awesome idea :)
- sinaatalay 2mo ago
  Thank you! We simply mount the entire app inside the landing page, but rotate and scale it down. When the page opens, it smoothly animates into full screen using CSS transitions.
iamleppert 2mo ago
All of the examples besides the first one that is itself underwhelming are behind a paywall. For all we know it could be pre-recorded. Hard pass.
- sinaatalay 2mo ago
  You can use the editor however you like without signing up. The examples are simply sample prompts for the AI, but you can paste in any Manim code to editor from ChatGPT or anywhere else, and the preview will render it instantly. Downloading videos is completely free. Only the AI-powered features are behind the paywall, and there's a 7-day free trial. We'll put more pre-written examples, thank you!
  - farski 2mo ago
    That was also unclear to me, so +1 for more code examples. Also, it seems like maybe this doesn't work in Safari but there's not error message or anything. I was looking for a Run or Render button or something to get things to happen, until I gave up and tried Firefox.
    - sinaatalay 2mo ago
      Thank you for letting us know about the Safari issue. We've made the AI chat free up to a certain usage limit, so if you're interested, you can give it a try now!
- sinaatalay 2mo ago
  Sorry about that paywall. We've made the AI chat free up to a certain usage limit, so if you're interested, you can give it a try now!
emrekmz 2mo ago
Great work! This can go huge
- sinaatalay 2mo ago
  Thank you!
cure_42 2mo ago
Not open source...?
- _rousbound 2mo ago
  I was expecting to see the code too.
- westurner 2mo ago
  Some open source resources to add to awesome-manim: 3blue1brown's Manim Python code for teaching transformers: 3b1b/videos videos/_2024/transformers: https://github.com/3b1b/videos/tree/e317d6c5eaa8370a2deb4d148c246b0d0e9fbe6f/_2024/transformers https://github.com/3b1b/videos/tree/e317d6c5eaa8370a2deb4d14... Notes re: "Manim: Animation engine for explanatory math videos" https://news.ycombinator.com/item?id=44995308 https://news.ycombinator.com/item?id=44995308 ; ManimML, manim-web (Typescript), manim-web react ManimScene and/or reactive-manim "Show HN: I ported Manim to TypeScript (run 3b1B math animations in the browser)" re: manim-web: https://news.ycombinator.com/item?id=47155375 https://news.ycombinator.com/item?id=47155375 philip-murray/reactive-manim: A component library for ManimCE, supporting component composition and automatic animation. Supports declarative syntax for writing components inspired by React.js. https://github.com/philip-murray/reactive-manim https://github.com/philip-murray/reactive-manim For stateful sims with a reset button like for example the PHET.colorado.edu exercises; https://news.ycombinator.com/item?id=49053601 https://news.ycombinator.com/item?id=49053601 > R3F ReactThreeFiber and Drei (ThreeJS) and NextJS with OpenNext ManimGL: https://github.com/MathItYT/manimgl https://github.com/MathItYT/manimgl Manim + WebGL (PyO3, Rust, wgpu, WASM) https://news.ycombinator.com/item?id=49091703 https://news.ycombinator.com/item?id=49091703 : MathItYT/mathlikeanim-rs: A Rust library to create interactive mathematical animations https://github.com/MathItYT/mathlikeanim-rs https://github.com/MathItYT/mathlikeanim-rs
- Aurornis 2mo ago
  Worse: It's a paid tool. They're trying to ride on top of 3Blue1Brown's code and fame for personal gain.
jsLavaGoat 2mo ago
manim mcp is open source and works with your existing agent
mllev15 2mo ago
So you vibe ported manim to rust, kept it closed source, and you’re selling access to it with a monthly subscription? This isn’t satire?
- apoogdk 2mo ago
  I built the core of the animation engine, and I think our wording may have created the wrong impression about how it was developed. For the use case we have, we needed a fast animation engine. The engine didn’t begin as a port or rewrite of Manim. We originally built it under a different name as a standalone Rust/WebGPU 3D animation engine for real-time AI tutoring. I spent roughly two months building the renderer and animation system from scratch. Our original engine had a different interface, different defaults and produced different visual results. Only after the engine was already working did we decide to make part of its Python interface compatible with ManimCE. We did that because many users already know the Manim API, and coding models are already familiar with its classes and common animation patterns. We spent substantial time matching ManimCE’s visual behavior as closely as possible. We believe this compatibility layer makes adoption easier; yet the underlying renderer, scene system, and implementation are our own. So describing this as vibe coding Manim in Rust and then closing the source is inaccurate. The browser editor, rendering, and video downloads are free. You are free to write code, render and download videos as much as you want. The paid features are the AI-powered functionality, which are priced to cover their cost to us. We respect that some people would prefer it to be open-source, but choosing not to open-source an independently developed engine is different from taking an open-source project and repackaging it as proprietary software.
  - mkl 2mo ago
    In that case you shouldn't call it Manim or "3Blue1Brown's animation engine". At best this has a partly Manim-compatible API, similar to how XY [1] has a partly Matplotlib-compatible API. [1] https://news.ycombinator.com/item?id=49085798 https://news.ycombinator.com/item?id=49085798
    - sinaatalay 2mo ago
Aurornis 2mo ago
Looks interesting, but to be honest I'm put off by the idea that you had AI rewrite someone's library and now you're using their name and brand to promote your $20-$100 per month tool based on their work. Calling it Manim in the browser and using 3Blue1Brown's name is really misleading when you discover that it's none of those things and you're trying to charge for it. This is a very bad misappropriation of someone else's work and fame for your personal gain. I can only hope that this inspires some people to vibecode and equivalent service but make it open source and free to all.
- Gathering6678 2mo ago
  This looks really bad.
jjcm 2mo ago
Yo that homepage zoom from the app screenshot straight into the experience was SMOOTH.
- sinaatalay 2mo ago
  Thank you :)
rkolodz 2mo ago
Just to let you know that "Live preview" in Windows on ARM fails to start with the message below. Chrome and Edge, I did not test FF. animg.app shadertoy.com and glsl.app are working fine at the same time. --- Live preview couldn't start Your browser supports WebGPU but no compatible GPU was available. Try updating your graphics drivers, enabling hardware acceleration, or using another device or browser.
- sinaatalay 2mo ago
  Thank you for letting us know.
prathje 2mo ago
Just FYI: We also have animation libraries like Motion Canvas that run in the browser using TS/JS: https://motion-canvas.io/ https://motion-canvas.io/ , which can also be used by AI agents with the right AI skills (e.g., https://github.com/VideoZero/skills https://github.com/VideoZero/skills )
aiwallpaperme 2mo ago
[flagged]

49 points by sinaatalay 2mo ago

arecsu 2mo ago

This is very cool!! I'm also mesmerized about the opening animation that transforms the interface of the editor to a complete viewport state. For some reason is pretty laggy on Chrome (macbook air M1) but Firefox is super smooth. Besides that, awesome idea :)

sinaatalay 2mo ago
Thank you! We simply mount the entire app inside the landing page, but rotate and scale it down. When the page opens, it smoothly animates into full screen using CSS transitions.

iamleppert 2mo ago

All of the examples besides the first one that is itself underwhelming are behind a paywall. For all we know it could be pre-recorded. Hard pass.

sinaatalay 2mo ago
You can use the editor however you like without signing up. The examples are simply sample prompts for the AI, but you can paste in any Manim code to editor from ChatGPT or anywhere else, and the preview will render it instantly. Downloading videos is completely free. Only the AI-powered features are behind the paywall, and there's a 7-day free trial. We'll put more pre-written examples, thank you!
- farski 2mo ago
  That was also unclear to me, so +1 for more code examples. Also, it seems like maybe this doesn't work in Safari but there's not error message or anything. I was looking for a Run or Render button or something to get things to happen, until I gave up and tried Firefox.
  - sinaatalay 2mo ago
    Thank you for letting us know about the Safari issue. We've made the AI chat free up to a certain usage limit, so if you're interested, you can give it a try now!
sinaatalay 2mo ago
Sorry about that paywall. We've made the AI chat free up to a certain usage limit, so if you're interested, you can give it a try now!

emrekmz 2mo ago

Great work! This can go huge

sinaatalay 2mo ago
Thank you!

cure_42 2mo ago

Not open source...?

_rousbound 2mo ago
I was expecting to see the code too.
westurner 2mo ago
Some open source resources to add to awesome-manim: 3blue1brown's Manim Python code for teaching transformers: 3b1b/videos videos/_2024/transformers: https://github.com/3b1b/videos/tree/e317d6c5eaa8370a2deb4d148c246b0d0e9fbe6f/_2024/transformers https://github.com/3b1b/videos/tree/e317d6c5eaa8370a2deb4d14... Notes re: "Manim: Animation engine for explanatory math videos" https://news.ycombinator.com/item?id=44995308 https://news.ycombinator.com/item?id=44995308 ; ManimML, manim-web (Typescript), manim-web react ManimScene and/or reactive-manim "Show HN: I ported Manim to TypeScript (run 3b1B math animations in the browser)" re: manim-web: https://news.ycombinator.com/item?id=47155375 https://news.ycombinator.com/item?id=47155375 philip-murray/reactive-manim: A component library for ManimCE, supporting component composition and automatic animation. Supports declarative syntax for writing components inspired by React.js. https://github.com/philip-murray/reactive-manim https://github.com/philip-murray/reactive-manim For stateful sims with a reset button like for example the PHET.colorado.edu exercises; https://news.ycombinator.com/item?id=49053601 https://news.ycombinator.com/item?id=49053601 > R3F ReactThreeFiber and Drei (ThreeJS) and NextJS with OpenNext ManimGL: https://github.com/MathItYT/manimgl https://github.com/MathItYT/manimgl Manim + WebGL (PyO3, Rust, wgpu, WASM) https://news.ycombinator.com/item?id=49091703 https://news.ycombinator.com/item?id=49091703 : MathItYT/mathlikeanim-rs: A Rust library to create interactive mathematical animations https://github.com/MathItYT/mathlikeanim-rs https://github.com/MathItYT/mathlikeanim-rs
Aurornis 2mo ago
Worse: It's a paid tool. They're trying to ride on top of 3Blue1Brown's code and fame for personal gain.

jsLavaGoat 2mo ago

manim mcp is open source and works with your existing agent

mllev15 2mo ago

So you vibe ported manim to rust, kept it closed source, and you’re selling access to it with a monthly subscription? This isn’t satire?

apoogdk 2mo ago
I built the core of the animation engine, and I think our wording may have created the wrong impression about how it was developed. For the use case we have, we needed a fast animation engine. The engine didn’t begin as a port or rewrite of Manim. We originally built it under a different name as a standalone Rust/WebGPU 3D animation engine for real-time AI tutoring. I spent roughly two months building the renderer and animation system from scratch. Our original engine had a different interface, different defaults and produced different visual results. Only after the engine was already working did we decide to make part of its Python interface compatible with ManimCE. We did that because many users already know the Manim API, and coding models are already familiar with its classes and common animation patterns. We spent substantial time matching ManimCE’s visual behavior as closely as possible. We believe this compatibility layer makes adoption easier; yet the underlying renderer, scene system, and implementation are our own. So describing this as vibe coding Manim in Rust and then closing the source is inaccurate. The browser editor, rendering, and video downloads are free. You are free to write code, render and download videos as much as you want. The paid features are the AI-powered functionality, which are priced to cover their cost to us. We respect that some people would prefer it to be open-source, but choosing not to open-source an independently developed engine is different from taking an open-source project and repackaging it as proprietary software.
- mkl 2mo ago
  In that case you shouldn't call it Manim or "3Blue1Brown's animation engine". At best this has a partly Manim-compatible API, similar to how XY [1] has a partly Matplotlib-compatible API. [1] https://news.ycombinator.com/item?id=49085798 https://news.ycombinator.com/item?id=49085798
  - sinaatalay 2mo ago

Aurornis 2mo ago

Looks interesting, but to be honest I'm put off by the idea that you had AI rewrite someone's library and now you're using their name and brand to promote your $20-$100 per month tool based on their work. Calling it Manim in the browser and using 3Blue1Brown's name is really misleading when you discover that it's none of those things and you're trying to charge for it. This is a very bad misappropriation of someone else's work and fame for your personal gain. I can only hope that this inspires some people to vibecode and equivalent service but make it open source and free to all.

Gathering6678 2mo ago
This looks really bad.

jjcm 2mo ago

Yo that homepage zoom from the app screenshot straight into the experience was SMOOTH.

sinaatalay 2mo ago
Thank you :)

rkolodz 2mo ago

Just to let you know that "Live preview" in Windows on ARM fails to start with the message below. Chrome and Edge, I did not test FF. animg.app shadertoy.com and glsl.app are working fine at the same time. --- Live preview couldn't start Your browser supports WebGPU but no compatible GPU was available. Try updating your graphics drivers, enabling hardware acceleration, or using another device or browser.

sinaatalay 2mo ago
Thank you for letting us know.

prathje 2mo ago

Just FYI: We also have animation libraries like Motion Canvas that run in the browser using TS/JS: https://motion-canvas.io/ https://motion-canvas.io/ , which can also be used by AI agents with the right AI skills (e.g., https://github.com/VideoZero/skills https://github.com/VideoZero/skills )

aiwallpaperme 2mo ago

[flagged]