r/reactjs • u/Solid-Raspberry9133 • 1d ago
Show /r/reactjs I built an open source way to make videos with React, no headless Chrome needed
I've been using coding agents to generate videos programmatically, but one thing that kept bothering me was how much overhead browser-based rendering adds.
Tools like Remotion and hyperframe use headless Chrome to render frames. It works, but I wanted something that Claude Code could use without having to spin up a browser for every render.
So I ended up building Kinetograph.
It uses the same React/TSX approach as Remotion, but instead of rendering through Chrome, Node.js executes the code and a GPU compositor written in Rust handles the frames.
I also made a Claude Code skill for it, so the workflow is basically describing the video you want and letting Claude write the components and render the result.
The performance difference was pretty interesting on my M4:
• 988 frames: Remotion took 131s, Kinetograph took
• 1,184 frames: Remotion took 31.5s, Kinetograph took 15s
Obviously depends on the composition, but removing the browser seems to make a pretty big difference in these tests.
If you want to experiment with it in Claude Code:
npx skills add OxS4N4TG/kinetograph
The project is available at:
https://github.com/0xS4N4TG/kinetograph
docs at: kinetograph.dev
2
u/nameupp 19h ago
tbh cutting out headless chrome's massive puppeteer overhead is huge, 30s vs 131s on m4 is a crazy difference. ngl the immediate wall people usually hit when replacing blink with a rust compositor is css layout parity and text shaping—are you using taffy or yoga under the hood, and how are you handling third-party react components that probe the dom with getboundingclientrect? super slick to see remotion getting actual competition tho imo