WebMotion

WebMotion is a browser-native library for composing and exporting video, built by SuperHQ AI and published on npm as @superhq/webmotion. It positions itself as a client-side alternative to Remotion, and the distinction it cares about is infrastructure. There's no headless Chrome, no FFmpeg, and no render farm behind it. Composition and export both happen in the browser the user already has open.

The design rests on one rule that the docs state plainly, which is that everything visible is a pure function of the current frame. That sounds academic until you've debugged the alternative. If a scene's appearance depends on animation state that accumulated over time, then jumping to frame 900 gives you something different from playing through to frame 900, and preview stops matching export. By forcing every frame to be derivable from the frame number alone, WebMotion makes seeking deterministic, which in turn makes rendering frame-accurate, cacheable, and identical whether a frame is drawn first or last. It also means frames can be rendered out of order, or in parallel, with no risk of drift, since none of them depend on the ones that came before.

There are two ways to author a scene, and they suit different people. The HTML approach imports the elements entry once, after which the scene is just markup built from custom web components like w-composition, w-animate, and w-sequence, with w-for handling templated repetition driven by JSON data. That last piece matters for anyone generating many variations of one video from a data source. The TypeScript approach is programmatic instead, with component-based rendering through renderFrame functions drawing to canvas. You can reach for the markup when a scene is mostly layout and the code when it's mostly logic. Having both is more useful than it first appears, because a designer can read and edit the markup version without touching a build step, while the programmatic version handles the cases where a scene is really just a function of data.

Export runs through WebCodecs, encoding MP4 entirely client-side. Alongside that you get a live preview with a zoomable timeline, an audio timeline, animation definitions, and motion scoping. Getting started is a scaffold command, npx degit superhq-ai/webmotion/template my-video, which drops a Vite template with live preview and one-click export already wired. The practical consequence of the whole architecture is that a video tool built on WebMotion can run with no server-side rendering cost, because the viewer's machine does the encoding. That quietly changes the economics of anything that renders video per user. A hosted product normally has to price GPU minutes into every single export, and here that line item sits at zero no matter how many videos get made.

The tradeoff is honest and worth stating up front. WebMotion needs a Chromium-based browser with WebCodecs H.264 support and OffscreenCanvas, so Safari and Firefox users aren't served today. It also leans on an html-in-canvas polyfill that tracks WICG proposals, which means part of the foundation is standards work still in progress. Anyone shipping to a general consumer audience will need a fallback. Anyone building an internal tool, a creator product, or something where they control the browser will find the constraint easy to live with. It's also a constraint that should soften over time as WebCodecs support widens across engines.

There's also an installable agent skill in the repository at skills/webmotion, which teaches coding agents to author scenes and works with Claude Code, Cursor, Copilot, and more than fifteen other platforms. That's a deliberate bet on where video tooling is heading, since programmatic video is one of the things language models are genuinely good at once they know the API. Being able to describe a scene and have an agent write a correct composition is a reasonable use of the format. The determinism helps there too, since a scene that's a pure function of the frame is far easier for a model to reason about than one assembled from imperative animation calls that mutate state over time.

WebMotion is open source under the MIT license, with the HTML rasterizer derived from MIT-licensed work by repalash, and it's free to install from npm with live demos at superhq-ai.github.io/webmotion. It's early, with 3 stars and 47 commits on GitHub at the time of writing, so anyone adopting it is adopting a young library rather than a settled one. One point of clarification worth making is that superhq.ai, the parent site, hosts a different SuperHQ product entirely, namely a macOS desktop app for running AI coding agents in isolated microVMs under AGPL-3.0. WebMotion is a separate MIT-licensed library from the same team, and it's the thing at this URL.