Web micro-animations hitch on every interaction? AVAL wants prerendered video to understand hover, click, and success
The pain first: a small 3D icon on a site needs to move, and change with the mouse and app state—ordinary video often stutters. AVAL is a format and player built for that kind of short motion.
- Problem: Short, polished, interactive motion—3D icons, favorite buttons—often hitch when you drive loops and state changes with ordinary video. Lottie struggles with complex prerendered looks.
- What it is: AVAL is a web-only interactive video format (
.avl) plus a browser player. States live in the file; the page only says “go to success.” - Why it can feel smoother: Loop seams try not to hard-seek back; transitions aim for authored frames; transparency works; unsupported browsers show your static fallback.
- Today: Open-source technical preview—try the site demo or clone the repo. Closed efforts (e.g. Airbnb Lava in public discussion) exist; AVAL is a touchable open implementation.
Disclosure: Based on the project site and GitHub docs—vendor self-description, not a third-party benchmark.
The problem: pretty web motion vs “it has to respond”
You want a prerendered short clip on the page (e.g. a Blender icon) that soft-loops, changes on hover, and goes to “favorited / loaded” on click. With ordinary video, a state change often hitchs—or flashes a frame.
Why it hurts—three buckets:
- Ordinary video “jumps the disc”: End of loop seeks to 0; idle→hover also often rewinds by time. That seek makes the decoder re-find a place; you sometimes feel a hitch.
- Vector tools (e.g. Lottie): Great for lines and flat UI; complex light, hair, and prerendered materials do not pack well.
- State logic lives in app code: Which seconds play when, what hover does—all hand-timed. Change the art, rewrite the timetable.
Swap MP4s or scrub one long file. More interaction means more fast-forward/rewind at the seams.
The motion asset knows idle / hover / success. The page only says “enter success”; frames and reverse routes ship with the asset.
AVAL targets this small, sharp interaction
Watch the ~37s launch demo. One takeaway: frames follow interaction, not a scrubbed progress bar. Hands-on: pixelpoint.io/aval.
What AVAL is (plain language)
AVAL = a file format + compile/play tooling.
- Art makes short motion (video or frame sequences).
- A compiler packs a
.avl: pixels plus a “which states, how to switch” map. - The page mounts
<aval-player>on that file. The browser plays; app code only says “switch to success.”
Scope is narrow: small files, low CPU, icon-scale motion from tools like Blender. Short, sharp site motion—not long video or film.
Site features, in human words
What you should feel. Keywords stay in English for matching the docs.
1. Motion owns named “identities”
Idle, hover, press, success—each segment is authored. The page only calls the name. Latest intent wins if you flit in and out.
deterministic state graph · latest-wins
2. Transitions aim for the right frame
Idle→hover should start on authored frames, not a random cut. Finish-then-go, hard cut, reverse mid-way are expressible.
frame-accurate routes · portals / finishes / cuts / reversals
3. Loop seams try not to “jump back”
Ordinary players seek to 0 at loop end—that can hitch. AVAL aims to keep the decoder timeline moving forward across the seam.
seekless loops
4. Transparency is first-class
Icons need a cutout over the page. Normal video is weak at alpha. AVAL packs alpha and composites in WebGL2.
packed-alpha transparency · WebGL2
5. Prefer native browser pipes
Decode and present with built-in WebCodecs / WebGL2 when possible—no mandatory huge WASM player.
WebCodecs · WebGL2 · web-native runtime
6. Fallback to your static image
Old browser, reduced motion, or resource pressure: show the fallback you put in the page. That image never lives inside the .avl.
progressive fallback · host-owned markup
What you can try—and what not to expect
See it first
pixelpoint.io/aval works in-browser; or clone the repo and run the playground (see docs). Status is technical preview and will move.
Wire into a page (concept)
Integration looks roughly like this:
<aval-player src="/icon.avl" width="320" height="320">
<img slot="fallback" src="/icon.png" alt="">
</aval-player>
// app only speaks state names
await player.setState("success");
npm install works.Why not a production default yet
- Repo marks technical preview—expect churn.
- TODO still lists Safari, React wrappers, more codecs, better demos (Safari fixes landed in commits; treat “supported” as measure-on-device).
- Motion authors learn an extra step: states and routes, not “drop an MP4.”
- Browser capability varies; fallback image means a quieter experience.
Remember the problem, then the product: short, sharp, interactive prerendered motion used to hitch under seek-heavy video control. AVAL packs pixels + a state map into one file so the page only shouts state names. You can watch and clone today—early preview, not a finished industry standard.
Sources: site · GitHub · launch note. Airbnb Lava is a public discussion reference only, not independently verified.