What is webmotion?

WebMotion is a tool for making videos entirely inside a web browser. Instead of relying on server software like headless Chrome or FFmpeg, it composes video using the DOM or a canvas element, then encodes the result with WebCodecs, a browser feature, and lets you download an MP4 file directly. The core idea behind WebMotion is that every visible frame is produced by a pure function of its frame number. Jumping to frame 42 always produces the exact same image, whether you are scrubbing through a preview or exporting the final file. This makes the whole process predictable and lets the browser cache and seek through the video without needing a server to render anything. You can build a scene two ways. The first is writing plain HTML with custom tags like w-composition, w-rect, and w-text, where animations are described with w-animate elements that tween a property, such as opacity or position, over a range of frames. The second way is a TypeScript API where you define a component with a renderFrame method that draws directly onto a canvas each frame. Both approaches produce the same deterministic output. There is also an optional add-on for animating 3D glTF models using the three library. WebMotion includes a starter template built with Vite that gives you a live preview window with a scrubbable timeline, chapter labels, and one click MP4 export. A command line tool can capture screenshot frames of a scene or lint it for common problems, like two animations fighting over the same property or text that overflows its box, which is useful for catching mistakes without opening a browser window. The project also ships an installable skill and plugin that teach AI coding assistants how to write WebMotion scenes, so a user can ask an agent to generate a short video and have it produce working code in the correct format.