Interactive video has been the next big thing for roughly fifteen years. Every cycle, a new set of tools promises choose-your-own-adventure storytelling, branching product demos, and adaptive tutorials. And every cycle, the tooling turns out to be proprietary, tied to a specific platform, or too complex for most teams to adopt. Aval, a new open-source format released July 13, 2026 by design studio pixel-point, approaches the problem differently. Instead of a new video standard that tries to replace MP4, Aval adds a thin state machine layer on top of existing codecs. The result is an interactive video format that works in any browser, uses standard encoding tools like FFmpeg, and lets developers define branching narratives with plain JSON. It has already gathered 1,202 GitHub stars under an MIT license.
The core insight behind Aval is that interactivity does not belong in the video container. It belongs in a separate state graph that describes how the video should respond to user input. The video itself is encoded in standard codecs: AV1, VP9, H.265, or H.264. The runtime layer on top maps user actions to frame positions and transitions. When a viewer clicks a choice, the state machine computes the target state and the runtime seeks to the correct frame with no visible loading or stutter. The video layers composite via packed-alpha transparency, which allows foreground elements to sit cleanly over a background without the edge artifacts that plague chroma key approaches.
How Aval Works: State Machines Over Video
Aval treats each video as a set of named application states. A state is a span of frames that represents a scene, a reaction, or a segment of a branching path. Transitions between states can be triggered by viewer actions, timed events, or authored conditions. The state machine is deterministic: given the same starting state and the same trigger sequence, the video will always reach the same outcome. This is critical for production use cases like product tutorials, interactive advertising, and educational content where reliability matters more than novelty.
The authoring workflow uses standard video production tools. You create a project file in JSON that defines the states, transitions, triggers, and encoding policies. The compiler, available as @pixel-point/aval-compiler, takes the project and produces a set of codec-specific .avl files. Each file contains the same state graph and timing metadata, encoded for a specific codec. The browser selects the first supported codec from an ordered list, mirroring how HTML video players handle codec negotiation today. A fallback image is shown when no codec is supported, which on modern browsers should be rare.
Installation is straightforward for any developer familiar with Node.js. A single npx command scaffolds a project with starter frames, a project file, encoding policies for all four codecs, fallback markup, and a watch workflow. The compiler and player are published as separate packages: @pixel-point/aval-graph for the state machine engine, @pixel-point/aval-format for the wire format parser and validator, @pixel-point/aval-compiler for the build pipeline, @pixel-point/aval-player-web for the runtime decoder and renderer, and @pixel-point/aval-element for the browser custom element. Each package is independently versioned and documented.
Frame-Accurate Transitions and Packed-Alpha Transparency
Two technical features distinguish Aval from past attempts at interactive video. The first is frame-accurate transitions. Standard HTML video elements do not support frame-level seeking reliably. Seeking to a specific timestamp involves decode latency, buffer delays, and inconsistent behavior across browsers. Aval's player handles this at the decoder level, scheduling decode operations to land on exactly the right frame without visual glitches. The player preloads adjacent states in the background so that transitions feel instant even when the user clicks ahead of the current playback position.
The second feature is packed-alpha transparency. Standard video containers do not support per-pixel alpha channels natively. The workaround has historically been separate RGB and alpha streams composited at the player level, which introduces edge artifacts, increases file size, and complicates encoding. Aval encodes alpha as part of the RGBA frame data, then separates and composites during decode using a custom render pass. The result is clean transparency with no fringing, even over dynamically changing backgrounds. This makes Aval suitable for UI overlays, animated characters, and composited scenes where the foreground needs to sit naturally over a designer-authored background.
Comparison to Existing Interactive Video Approaches
The interactive video landscape has been dominated by three approaches. The first is proprietary platforms like H5P, Eko, and Wirewax, which provide drag-and-drop authoring tools but lock your content into their ecosystem. Exporting to a different platform or hosting the video yourself typically requires rebuilding from scratch. The second approach is custom JavaScript players built on top of the HTML5 video element. These handle branching by manipulating currentTime, but they suffer from the seeking latency and cross-browser inconsistency that Aval addresses at the decoder level. The third approach is game engines like Unity or Godot, which offer complete control over video playback and interaction but require developers to learn an entirely different toolchain.
Aval occupies a middle ground. It uses standard codecs and standard web components. The authoring tools are npm packages that integrate with existing web build pipelines. The state graph is a JSON file that can be version-controlled, reviewed in pull requests, and generated programmatically. The runtime is a custom element that works with any framework or no framework at all. You do not need a video production studio or a game development background to build interactive video with Aval, and you do not need to rebuild your content if a new encoding format becomes available. Each codec is an independent output of the same compiler.
The tradeoffs are honest and documented. Aval requires the browser user to install FFmpeg with the appropriate encoders for the codecs they want to target. The compiler does not bundle or download native codec tools. Patent and licensing obligations for the codecs themselves remain the publisher's responsibility. The project is in its early days: the React component is still in development, browser test coverage is expanding, and the runtime bundle is not yet optimized for size. The TODO in the README is refreshingly candid about these gaps.
Who This Is For
Aval is for developers and designers who have wanted to build interactive video experiences but found the tooling too restrictive or too complex. EdTech teams building adaptive tutorials where the video adjusts to the learner's demonstrated knowledge level will find the state machine model a natural fit. Product demo teams who want to let prospects click through different features without leaving the video player can encode branching paths directly into the video format. Media studios experimenting with interactive storytelling can publish content that works on any platform without proprietary player licensing. For solo founders, Aval removes the platform dependency risk: your interactive video content is a set of standard files you host on your own infrastructure, not inside a third-party player's walled garden.
The project is MIT-licensed, uses standard web technologies, and requires nothing more than Node.js 22.12 or newer and a local FFmpeg installation. The learning curve is the state machine model, which takes an afternoon to understand. Everything after that is standard web development: npm install, npm run dev, and deploy.