What is it?

AVAL (A new open-source format for interactive video on the web) is a web-native format and runtime designed specifically for short, prerendered motion graphics that loop continuously. Unlike traditional video formats that simply play from start to finish, AVAL introduces a built-in state machine that allows animations to exist in named states and transition between them programmatically.

Built with modern web applications in mind, AVAL supports frame-accurate transitions and packed-alpha transparency, making it ideal for UI animations, micro-interactions, and component-level motion graphics. The format works by bundling multiple codec versions (AV1, VP9, H.265/HEVC, or H.264) into a single logical animation, with the browser automatically selecting the best-supported codec.

Key Features & Use Cases

AVAL's unique architecture enables several compelling use cases:

• Interactive UI Components: Buttons, toggles, and other interface elements can have rich animations that respond to user interactions. Instead of separate play/pause states, you can smoothly transition between any authored state.
• Micro-interactions: Loading spinners, success indicators, and error states can be implemented as continuous loops with seamless transitions, creating polished user experiences.
• Design System Assets: Animation libraries can package their motion design assets as AVAL files, ensuring consistent playback across different browsers and devices.
• Game UI Elements: Interactive elements like health bars, progress indicators, or menu transitions benefit from the precise frame control AVAL provides.

The state machine approach means you can define states like "idle", "hover", "active", and "success", then transition between them without the jank of media seeking. This is particularly powerful for creating animations that need to respond to application state changes.

Why is it Trending?

AVAL addresses a fundamental gap in web animation tooling. Traditional video formats are designed for linear playback, while CSS animations lack the complexity needed for sophisticated motion graphics. AVAL bridges this divide by bringing video-quality animations to the interactive web.

The project's approach to codec bundling is particularly noteworthy. By providing multiple encoded versions of the same animation with identical state graphs, AVAL ensures broad browser compatibility while leveraging the best compression available. The compiler handles the complexity of generating these bundles, recording MIME types, hashes, and source markup in a build.json file.

With 1,177 stars and growing, the community recognizes AVAL's potential to transform how we think about web motion. Developers are particularly excited about the packed-alpha transparency feature, which enables smooth compositing of animations over arbitrary backgrounds without the artifacts common in GIF or PNG sequences.

Who Should Use It?

AVAL is ideal for frontend developers building modern web applications who need more sophisticated animation capabilities than CSS provides. It's particularly valuable for teams working with design systems, component libraries, or interactive prototypes.

Skill Level: Intermediate to advanced developers familiar with npm, modern build tools, and HTML/CSS. The API is straightforward, but understanding the state machine concepts helps maximize the format's potential.

Ecosystem Fit: AVAL works with any modern web framework (React, Vue, Svelte, etc.) since it's built on web components. The TypeScript foundation ensures good IDE support and type safety. It integrates naturally with existing web build pipelines and doesn't require a runtime framework.

Best For: UI animation specialists, design system maintainers, and developers creating interactive web experiences where motion plays a crucial role in user feedback and engagement.

Getting Started

Getting started with AVAL takes just a few minutes. First, install the runtime element and compiler:

npm install @pixel-point/[email protected]
npm install --save-dev @pixel-point/[email protected]

Create a new project using the built-in initializer:

npx avl init my-motion
cd my-motion
npm install

Start the development server to see your animation in action:

npm run dev

The starter includes RGBA frames, a project file, encoding policies, and a watch workflow. When you're ready to build for production, compile your animation to generate all codec variants:

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

This creates a directory with multiple codec files (av1.avl, vp9.avl, h265.avl, h264.avl) plus a build.json with metadata. Then use the custom element in your HTML:

<aval-player width="320" height="320">
  <source src="/motion/av1.avl" type='application/vnd.aval; codecs="av01.0.00M.10.0.110.01.01.01.0"'>