Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

studio.academa.ai

Post reply on HN
Print view View original

1–10 of 34 posts

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

#1

Post by sinaatalay »

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.

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

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

#2

Post by arecsu »

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 :)

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

#5

Post by sinaatalay »

arecsu wrote: post #2

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 :)

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.

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

#7

Post by sinaatalay »

iamleppert wrote: post #4

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.

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!

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

#8

Post by farski »

sinaatalay wrote: post #7
iamleppert wrote: post #4

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.

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!

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.
Post reply on HN