AVAL

AVAL is a web-only format and runtime for short prerendered animation with continuous partial loops, user-defined states, authored triggers, bounded transitions, packed transparency, and host-owned fallback markup.

The central idea is simple: encode independently decodable motion units and a small deterministic state graph in one .avl asset. The browser keeps a decoder timeline moving forward across a loop instead of seeking a video file at every seam. Hover, focus, application state, reversals, portals, finite bodies, and held states are graph routes rather than hand-timed media seeks.

It's an early technical preview, so things will be changing fast and will get into a more stable shape within the next couple of weeks.

Five-minute start

npm install @pixel-point/aval-element@1.0.0
npm install --save-dev @pixel-point/aval-compiler@1.0.0
npx avl init my-motion
cd my-motion
npm install
npm run dev

Here npx avl resolves the avl executable from the compiler package installed on the preceding line.

Open the printed loopback URL. That generated starter includes its frames, project, fallback markup, exact package dependencies, and watch workflow. The following is illustrative integration markup for a package-aware web build after you publish or copy a compiled asset into your application:

// motion.js, resolved by your package-aware web build
import { defineAvalElement } from "@pixel-point/aval-element";
defineAvalElement();

A one-state asset loops with no seeking code. Multi-state assets keep their own names and triggers; applications can set any authored state:

const motion = document.querySelector("aval-player");
await motion?.setState("success");

Local end-user playground

To check the consumer experience from this repository with a real interactive asset, run:

npm install
npm run playground

Open the printed loopback URL. The permanent example uses workspace packages, includes its compiled asset and fallback image, and does not require FFmpeg at runtime. Hover, focus, or use the toggle to move between its authored states.

The element package is SSR-safe. Its root exports an explicit definition helper; the opt-in @pixel-point/aval-element/auto entry is the only automatic registration side effect.

What is included

• @pixel-point/aval-graph: deterministic lates