Add an interactive animation to a website that can jump between named states instantly.
Ship one animation encoded in multiple video codecs so it plays efficiently across browsers.
Build custom error handling for browsers that cannot play a required codec.
Compile raw animation frames into a ready-to-use set of web video files.
| pixel-point/aval | anthropics/cwc-workshops | extend-hq/ui | |
|---|---|---|---|
| Stars | 1,282 | 1,279 | 1,255 |
| Language | TypeScript | TypeScript | TypeScript |
| Last pushed | — | 2026-06-26 | 2026-07-03 |
| Maintenance | — | Active | Active |
| Setup difficulty | hard | moderate | easy |
| Complexity | 4/5 | 3/5 | 2/5 |
| Audience | developer | developer | pm founder |
Figures from each repo's GitHub metadata at analysis time.
Requires Node.js 22.12+ and a caller-installed FFmpeg with libaom-av1, libvpx-vp9, libx265, and libx264 encoders.
AVAL is a new file format and small software runtime for putting short, prerendered animations or interactive video clips on a website. Instead of a normal video file that just plays start to finish, AVAL clips can hold multiple named states, like idle, hover, or success, and the browser can jump between them instantly without needing to search through the video frame by frame. Each animation gets encoded into several different video formats, called codecs, such as AV1, VP9, H.265, and H.264. The browser automatically tries the newest, most efficient format first and falls back to older ones if it does not support the newer codec, always in the same fixed order. This way the same animation plays correctly across a wide range of browsers and devices without the website author having to guess which format to use. Because not every browser supports every codec, and some browsers may not support this technology at all, AVAL requires the website itself to decide what happens when playback fails. It does not show a fallback image or message on its own. Instead it raises an error that tells the website exactly what went wrong, and the developer building the site chooses what to display instead, whether that is an ordinary video, a static image, or nothing at all. To get started, a developer installs two small packages, one for playing the animation in the browser and one for compiling source animation frames into the AVAL format, then runs a single command to generate a working example project. Building a real animation involves preparing raw frames and describing the different states and transitions in a project file, which the compiler turns into a set of ready to use video files for each supported codec. The project is made up of several smaller packages handling the state logic, the file format itself, the compiler, and the browser player, and requires a fairly recent version of Node.js to develop or build. Encoding videos also requires the developer's own copy of the FFmpeg video tool already installed on their machine.
A web video format and player for short animations with named states and instant, frame-accurate transitions, encoded across multiple codecs for broad browser support.
Mainly TypeScript. The stack also includes TypeScript, WebCodecs, FFmpeg.
Setup difficulty is rated hard, with roughly 1h+ to a first successful run.
Mainly developer.
This repo across BitVibe Labs
double-check against the repo, no cap.