AVAL とは何か（わかりやすく）

AVAL = ファイル形式 + コンパイラ/プレイヤー一式。

• アーティスト / モーションデザイナーが短いアニメーションを作成します（動画またはフレーム画像）。
• コンパイラで単一の .avl ファイルにまとめます。中には映像と、「どんな状態があり、どう遷移するか」の説明書が含まれます。
• Webページにはプレイヤータグ <aval-player> を置き、このファイルを指定します。再生はブラウザが担当。ビジネスコードは「success に切替」と伝えるだけです。

その位置づけは明確に絞られています：ファイルサイズが小さく、CPU使用率が低く、Blender などで作った小アイコン向けのモーション。Webサイト上の精巧で短いインタラクティブアニメであって、長尺動画や映画ではありません。

公式サイトに載っている機能を、わかりやすく解説

以下は「あなたがどう感じるか」の視点で書きます。括弧内は公式サイトのキーワードです。原文と照らし合わせたい場合にどうぞ。本文はまず日本語の説明で十分です。

今できること、そして期待してはいけないこと

とりあえず見てみたい

公式サイト pixelpoint.io/aval で直接試せます。またはリポジトリをクローンしてplaygroundを動かせます（リポジトリのドキュメント参照）。現在はテクニカルプレビューであり、今後変更される可能性があります。

自分のWebページに組み込む場合（概念的な流れ）

統合はおおよそ次のようになります（イメージ）：

<aval-player src="/icon.avl" width="320" height="320">
  <img slot="fallback" src="/icon.png" alt="">
</aval-player>

// ビジネス側は状態名を渡すだけ
await player.setState("success");

まだ本番デフォルトにすべきでない理由

• リポジトリは自らtechnical previewと位置づけており、急速に変化します。
• TODOには、Safari対応、Reactラッパー、追加のコーデック、より良いデモなどが挙がっています（Safari関連の修正コミットは存在しますが、「対応」かどうかは手元での確認が必要です）。
• アニメーション制作者は追加の作業が必要です。映像を書き出すだけでなく、状態と遷移ルールを定義する必要があります。これは「MP4を置くだけ」ではありません。
• ブラウザの機能差：再生できない場合は用意した静止画にフォールバックし、インタラクション体験は低下します。

主な情報源：公式サイト · GitHub · リリース告知。文中の Airbnb Lava は公開情報で言及された比較対象であり、第三者による検証は行っていません。

AVAL は Web 専用のファイル形式（拡張子 .avl）とプレイヤーのセットです。アニメーション作成後、コンパイラが映像と状態ルールをパック。Webページにプレイヤータグを置き、ビジネスコードは状態名を送るだけです。

各状態は遷移開始フレームを定義。マウスを乗せて戻すような操作では最後の指示が優先されます。ループ終端でも頭に戻らず、次の同じループへシームレスに進みます。

• 透明背景：背景を透過した小アイコンをWebページに重ねる。透明情報をパックする方法で、ブラウザで分解・合成します。
• 軽量な実行：デコードはブラウザ標準機能を積極的に利用し、巨大なプレイヤープログラムを追加で読み込む必要なし。

AVAL は 2026年7月13日に GitHub で公開されました。本記事の執筆時点は 2026年7月16日です。リポジトリは graph / format / compiler / player-web / element の5パッケージで構成。下記の数字のうち、スターとフォークは GitHub の公開データ、サイズ上限は Pixel Point プロジェクトによる独自計測です。