サイトの短い動き、操作のたびに一瞬止まる？AVAL はプリレンダ映像に「ホバー／クリック／成功」を教えたい
まず痛み：ページ上の立体アイコンは動き、マウスや状態にも合わせたい——普通の動画だとつまずきやすい。AVAL はその短い動き向けの専用フォーマットとプレーヤー。
- 問題：小さな 3D アイコンやお気に入りボタンなど「短い・きれい・操作に反応」する動きは、普通の動画でループや状態切替をやると一瞬止まりやすい。Lottie は複雑なプリレンダ表現に弱い。
- 何か：AVAL は Web 専用のインタラクティブ動画形式（拡張子
.avl）＋ブラウザプレーヤー。状態はファイル側、ページは「成功へ」と言うだけ。 - なぜ滑らかになり得るか：ループの継ぎ目でハードシークを減らす／切替は作画で決めたフレームを狙う／透明対応／非対応時は用意した静止画へ。
- いま：OSS の技術プレビュー。公式デモや clone で試せる。閉じた類似案（公開で語られた Airbnb Lava など）はあるが、AVAL は触れる実装。
立場：材料は公式サイトと GitHub 文書＝プロジェクトの自己説明。第三者ベンチではない。
まず問題：見た目と「反応する」がぶつかる
ページにすでに書き出した短い動き（例：Blender の立体アイコン）を置き、ゆるくループし、ホバーで形が変わり、クリックで「お気に入り／読み込み成功」へ。普通の動画だと状態が変わった瞬間につまずく、または1フレーム飛ぶ。
なぜ痛いか、大きく3つ：
- 普通の動画は「頭出し」する：ループ末端で先頭へシーク。待機→ホバーも再生位置いじりが多い。デコーダが場所を探し直し、体感で一瞬止まることがある。
- ベクター系（Lottie など）：線やフラット UI 向き。複雑な光・毛・プリレンダ質感は載せにくい。
- 状態ロジックが業務コードに散る：何秒から何秒、ホバーで何——手書きタイムテーブル。絵を直すたびにコードも直す。
複数 MP4 の切替、または1本を時間指定。操作が増えるほど早送り／巻き戻しの継ぎ目が目立つ。
素材側が「待機／ホバー／成功」を知っている。ページは「成功へ」と通知するだけ。遷移フレームや逆再生も素材が持つ。
AVAL が狙うのは、小さくて鋭いインタラクション
公開デモ（約37秒）を見る。一点だけ：画が操作に合わせて状態を変え、プログレスバーをドラッグしているようには見えない。 手元で試すなら pixelpoint.io/aval。
AVAL とは何か（平たい言葉で）
AVAL ＝ ファイル形式 ＋ コンパイル／再生ツール。
- 美術が短い動きを作る（動画や連番フレーム）。
- コンパイラで
.avlにまとめる：画に加え「どの状態・どう切る」説明書。 - ページは
<aval-player>でそのファイルを指す。再生はブラウザ、業務は「success へ」と言うだけ。
狙いは狭い：小さく、CPU を食わず、Blender 系のアイコン動効。サイト上の短く鋭い動き——長尺動画や映画ではない。
公式が並べた能力を、体感の言葉に
「何が感じられるか」で書く。括弧内は公式キーワードのまま。
1. 動きが「身分」を持つ
待機・ホバー・押下・成功など。各セグメントは制作時に決める。ページは名前を呼ぶだけ。素早い出入りは最新の意図が勝つ。
deterministic state graph · latest-wins
2. 切替は「そのフレーム」を狙う
待機→ホバーは作画で決めたフレームから。再生し切ってから進む／ハードカット／途中で戻す、も書ける。
frame-accurate routes · portals / finishes / cuts / reversals
3. ループ継ぎ目で「頭へ跳ぶ」を減らす
普通のプレーヤーは末端で 0 へシークし、そこでつまずくことがある。AVAL は継ぎ目でもデコード時間軸を前へ進めたい。
seekless loops
4. 透明背景ができる
アイコンは背景を抜いて重ねたい。普通の動画はアルファが弱い。AVAL はパックした透明を WebGL2 で合成。
packed-alpha transparency · WebGL2
5. できるだけブラウザ標準経路
WebCodecs／WebGL2 でデコードと表示。巨大な WASM プレーヤー必須にはしない。
WebCodecs · WebGL2 · web-native runtime
6. ダメなら用意した静止画へ
古いブラウザ、動きを減らす設定、リソース不足——ページ側のフォールバック画像を出す。.avl の中には入らない。
progressive fallback · host-owned markup
いま触れられること、期待しすぎないこと
まず見る
pixelpoint.io/aval で試せる。またはリポを clone して playground（文書参照）。いまは技術プレビューで今後も変わる。
ページに載せる（概念）
つなぎ方のイメージ：
<aval-player src="/icon.avl" width="320" height="320">
<img slot="fallback" src="/icon.png" alt="">
</aval-player>
// 業務は状態名だけ
await player.setState("success");
npm install 前提にしない。本番デフォルトにまだしない理由
- リポ自身が technical preview——変化が速い。
- TODO に Safari／React 部品／追加コーデック／デモ改善など（Safari 関連コミットはある。「対応済み」は実機で測る）。
- 動効制作者は状態と経路を覚える一歩が要る。「MP4 を置くだけ」ではない。
- ブラウザ差：再生できないと静止画フォールバックで体験が静かに落ちる。
問題を先に、製品を後に：短く鋭く、操作で姿が変わるプリレンダ動効は、シークだらけの動画制御でつまずきやすかった。AVAL は画＋状態マップを一つのファイルに入れ、ページは状態名を叫ぶだけ。いまは見られる・clone できる段階——仕上げた業界標準ではない。
出典：公式サイト · GitHub · 公開ノート。Airbnb Lava は公開議論の対照のみ、第三者確認はしていない。