Author a short animated video, like a product launch clip, using simple HTML-like tags in the browser.
Programmatically draw and export deterministic frame-by-frame video with a TypeScript component API.
Use an AI coding assistant with the included skill to auto-generate WebMotion video scenes from a text brief.
| superhq-ai/webmotion | 0labs-in/vision-link | alfons-fhl/cursor-plan2api | |
|---|---|---|---|
| Stars | 4 | 4 | 4 |
| Language | TypeScript | TypeScript | TypeScript |
| Setup difficulty | easy | moderate | moderate |
| Complexity | 3/5 | 3/5 | 3/5 |
| Audience | developer | developer | developer |
Figures from each repo's GitHub metadata at analysis time.
Needs a Chromium based browser with WebCodecs support, the CLI tools rely on Playwright.
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.
WebMotion lets you build and export MP4 videos entirely inside the browser using HTML-like tags or TypeScript, with no server rendering required.
Mainly TypeScript. The stack also includes TypeScript, WebCodecs, Canvas.
Setup difficulty is rated easy, with roughly 30min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
double-check against the repo, no cap.