AVAL

AVAL is a web format and runtime for short prerendered motion with continuous loops, named application states, authored triggers, bounded transitions, reversals, and packed transparency.

One logical animation is published as a codec bundle. Each codec gets its own AVAL wire 1.1 file—AV1, VP9, H.265/HEVC, or H.264—and the browser selects the first candidate in AVAL's fixed AV1 → VP9 → H.265 → H.264 ladder that decodes and passes pre-readiness output qualification. DOM source order does not change that policy. The state graph and authored timing are identical in every file.

Required application error handling

Every AVAL integration must own its unsupported-browser and fatal-error path. A browser may lack the required WebCodecs interfaces, every authored codec may be unsupported, or another terminal playback failure may stop the source generation. In those cases prepare() rejects with AvalPlaybackError and the element raises one fatal error event with failure.code set to a value such as unsupported-profile or unsupported-browser.

AVAL deliberately does not create, select, reveal, or hide fallback content. The application must decide whether to show an ordinary video, image, text, another renderer, or nothing. Install the element's direct error listener before explicit registration so an upgrade-time failure cannot outrun the application boundary, and handle the rejected prepare() promise when calling it directly. Branch on failure.code; do not parse the error message. The browser-integration example below demonstrates this required boundary.

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. The generated starter contains its RGBA frames, project 1.0 file, four codec encoding policies, consumer-owned error handling, and watch workflow.

For a normal build, the compiler publishes a directory rather than a single output file:

npx avl compile motion.json --out dist/motion

dist/motion/
  av1.avl
  vp9.avl
  h265.avl
  h264.avl
  build.json

Browser integration

Use literal direct-child sources with one required lowercase data-codec family per file. AVAL derives