aval turns interactive web video into a stateful UI format builders can actually ship

updates

pixel-point/aval packages short interactive motion as a codec-aware web format with named states, authored transitions, and fallback-friendly playback instead of another brittle custom animation stack.

GitHub README capture for pixel-point/aval

Web teams keep hitting the same ceiling with motion.

Plain video is easy to ship but mostly passive. Canvas-heavy experiences can look great, but they often turn a simple interface problem into a custom rendering problem. Lottie works for some cases, yet it does not naturally model every interaction as a stateful media system with codec negotiation, bounded transitions, and browser-native fallback behavior.

AVAL is interesting because it tries to turn that gap into a proper web format instead of another one-off player demo.

The repo packages short prerendered motion as a codec bundle with one shared state graph across AV1, VP9, H.265, and H.264 outputs. That means the browser can choose a supported source while the product still keeps the same named states, transitions, and authored timing. For teams building richer onboarding, product education, delight surfaces, or stateful UI moments, that is a much stronger abstraction than embedding a normal video and hoping currentTime hacks are enough.

It treats animation like interface state, not just media playback

The most important idea in aval is not the codec list. It is the decision to make motion addressable through named product states.

The README shows an aval-player element that can move directly to an authored state like success. That sounds small until you compare it with how a lot of UI animation is still wired today. Many teams end up juggling ad hoc timers, progress tracking, seek offsets, or separate animation exports for each branch of an interaction.

aval proposes a cleaner contract: author one logical animation, give it explicit states and transitions, then let the application select the right state without rebuilding playback behavior in JavaScript every time. That is a product-minded idea because it reduces motion glue code, not just render complexity.

The fallback story feels grounded in real web constraints

A lot of motion tooling looks impressive until browser support gets messy. aval feels more serious because the fallback path is part of the model.

The browser integrates through ordered <source> elements and an author-owned fallback slot. If the runtime cannot use a supported candidate, the fallback image stays visible instead of collapsing into a broken experience. The repo also calls out capability probing for WebCodecs and WebGL instead of pretending every device has the same media stack.

That matters for production use. Motion systems only become credible when unsupported environments degrade cleanly and predictably. aval is clearly designed by someone who understands that the hard part is not just making the happy path look cool.

The format bundles delivery concerns with authored behavior

Another good product decision is that aval does not frame codecs as an afterthought.

A build outputs multiple .avl files, one per codec family, plus a build.json artifact that records MIME codec strings, hashes, and source markup. The runtime contract stays stable while the delivery layer adapts to the browser. That is a more practical model than asking every product team to reinvent media negotiation, timing integrity, and transparency handling on top of raw assets.

I also like that the repo keeps the scope honest. It requires caller-installed FFmpeg and makes it explicit that codec and distribution obligations still belong to the publisher. That is the kind of detail that makes a project feel engineering-led instead of launch-thread-led.

Where builders should stay realistic

aval is promising, but it is still early.

The README still lists a dedicated React component, more browser tests, runtime bundle-size work, and better showcase material in the TODO list. Teams considering it for serious production work should read that as a signal that the format idea is ahead of ecosystem maturity. You are not adopting a boring solved standard yet. You are betting on a strong early direction.

There is also a workflow cost. This approach works best when the motion really deserves prerendered quality, authored transitions, and codec-aware delivery. For simple UI feedback, CSS or lighter animation systems will still be cheaper.

Why this repo stands out

aval stands out because it treats interactive motion as a product-system problem.

Instead of saying "here is another animation runtime," it asks a sharper question: what if short-form motion on the web behaved more like a stateful UI primitive, with authored transitions, reversible paths, transparency, codec negotiation, and graceful fallback built in from the start?

That framing makes the project notable even before broad adoption. It is a good example of an open-source repo that is not just shipping code. It is proposing a better interface between design intent, media delivery, and application state.

Repo

GitHub: https://github.com/pixel-point/aval