为什么值得关注

它采用确定性状态图取代视频定位，实现高效的循环交互，并且可在现代 Web 应用中安全嵌入 SSR。

适合谁使用

构建交互式 UI 动画的 Web 开发者
动画工具和框架的创作者
关注性能的前端工程师
设计微交互的设计师

典型使用场景

实现悬停和聚焦状态过渡，无需手动定位逻辑
用少量代码构建加载、成功或错误等有状态的动画
为无障碍或不受支持的编解码器提供后备动画
在 SSR 框架中嵌入确定性动画，避免布局偏移

项目优势

确定性最新获胜状态引擎确保可预测的动画路线
SSR 安全的自定义元素，显式注册，无副作用
当 WebCodecs/WebGL/AVC 不受支持时，可降级到宿主拥有的后备标记
连续解码器时间轴避免定位，实现无缝循环过渡

使用前须知

早期技术预览——格式和 API 可能随时更改
需要外部 FFmpeg/FFprobe 和 libx264 进行编译，不包含内置编解码器
目前仅支持 AVC（H.264）；H.265、AV1、VP9 及 Safari 支持尚未就绪

README 快速开始

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

项目描述

A new open-source format for interactive video on the web, with a built-in state machine, frame-accurate transitions, and packed-alpha transparency.

aval