AVAL: When Video Starts Behaving Like Software
An open-source runtime that turns prerendered motion into deterministic, seekless interaction without giving up visual fidelity.
- AVAL’s real innovation is not better playback, but a new runtime model that routes motion through a deterministic state graph.
- The player can promise frame-accurate transitions because the decoder timeline keeps moving forward while the app negotiates state changes around it.
- Packed transparency and AV1 bitstream inspection make prerendered motion practical for UI work where fidelity and alpha matter.
- Compared with Lottie, Rive, and standard video, AVAL occupies a narrower but more useful niche: high-fidelity motion that still behaves like interactive software.
Video That Doesn’t Want to Be Scrubbed
Standard web video is built for linear consumption. Interactive motion is not. The moment a UI needs hover, success, error, or loop states, the usual `
That mismatch shows up fast. Seeking can stutter, alpha support is fragile, and frame-accurate transitions are hard to guarantee. AVAL exists to make those problems go away by changing the unit of control from time to state.
AVAL is interesting because it tries to turn that gap into a proper web format instead of another one-off player demo.
The Core Idea: A Motion Graph, Not a Timeline
The key abstraction lives in aval-graph. Instead of asking the player to jump around a timestamp ladder, AVAL asks a simpler question: what states can this motion legally move into next?
That is why the project feels different from plain video. A linear asset has one obvious future, the next frame. AVAL has a graph of valid futures, with portals and boundaries that define when a transition is allowed to happen.
That shift matters because it removes the scramble around seeking. The runtime can decide whether a state change settles cleanly, commits to a target, or becomes a stable no-op. That gives UI motion a kind of determinism normal web video never promises.
Why the Player Can Promise Frame Accuracy
The browser runtime, aval-player-web, orchestrates decoding against the graph instead of against an arbitrary scrubber position. WebCodecs handles the heavy decoding work, while the player keeps the motion in motion and only routes it when the graph says the transition is valid.
That is what makes hover states and success transitions feel intentional rather than patched together. The player is not just rendering frames. It is coordinating the timing contract between what the app wants and what the media stream can safely do.
The Binary Trick Underneath the Pretty Surface
The prettiest part of AVAL sits on top of a very unglamorous idea: understand the media well enough to control it precisely. That is where aval-format comes in, with AV1 bitstream inspection, sequence headers, and OBUs that let the runtime reason about the asset before the browser fully does.
Packed alpha is the unsung advantage. Standard video codecs are usually awkward at transparency, which is why interactive motion often falls back to hacks. AVAL makes transparency part of the format, not an afterthought bolted on in CSS.
| Feature | AVAL | Standard video |
|---|---|---|
| Transition model | State graph with legal routes | Linear playback and manual seek |
| Frame control | Frame-accurate settlement | Best effort, often jittery |
| Transparency | Packed alpha in the format | Codec-dependent and brittle |
| Media understanding | Bitstream-aware runtime | Browser pre-parsing and playback only |
The Markup-First API Is the Quiet Win
The public face of the project is intentionally boring in the best way. With <aval-player> and nested <source> elements, the API feels native to the web instead of like a new framework pretending to be one.
That matters because it lowers the cost of adoption. Codec negotiation stays declarative, the markup reads like HTML, and the runtime handles the ugly parts under the hood.
<aval-player state="hover">
<source src="button-hover.av1.mp4" type="video/av1">
<source src="button-hover.vp9.webm" type="video/webm; codecs=vp9">
<source src="button-hover.h264.mp4" type="video/mp4; codecs=avc1">
</aval-player>That is the same philosophy that made `
Why the Team Built a Certification Suite
The test story is unusually serious for a motion repo. Under apps/playground/src/certification, the project leans into stress tests, fault injection, and resource soak scenarios that make sense for a runtime expected to behave predictably under pressure.
That is the tell that this is more than a demo format. If an animation system is going to promise stability, it has to prove it against bad network conditions, deadline pressure, and visibility changes. AVAL treats reliability as part of the product, not an afterthought.
This is probably the craziest thing I've ever built with Codex. I'd been dreaming about this technology for years.
AVAL vs. the Usual Suspects
The cleanest way to place AVAL is by contrast. It is not trying to replace every motion tool. It is carving out a specific niche where prerendered fidelity and stateful interaction need to coexist.
| Tool | Best at | Where it stops |
|---|---|---|
| AVAL | High-fidelity motion with deterministic state changes | Not a general-purpose illustration or design editor |
| Lottie | Lightweight vector animation | Struggles with complex 3D texture and fidelity |
| Rive | Procedural interaction and state machines | Uses a different authoring model and stays vector-centric |
| <video> | Universal playback and delivery | Linear by default and weak at interactive transitions |
That niche is real. If the asset is a simple icon, Lottie may still be enough. If the interaction logic is the whole product, Rive remains compelling. If the motion needs to look like rendered media and still behave like a system, AVAL starts to make sense.
What AVAL Suggests About the Future of Motion on the Web
AVAL points to a broader shift. Motion assets may stop being treated as flat files and start being treated as objects with behavior. Once that happens, the web gets a new middle layer between design and application logic.
That is the bigger idea worth watching. Not whether AVAL wins every benchmark. Whether the category it defines becomes normal: motion that is deterministic, stateful, and still visually rich enough to replace the compromises we have accepted for years.
