Repo-lab
クリエイティブ

bloubとは？GrokアバターをSVGで再現するアニメーション技術の仕組みと使い方

⭐ 1,417 stars GitHub →

GitHubで急上昇中の bloub（jeremy-prt/bloub、⭐1,417）は、x.ai（Grok）のボットアバターをSVGで精密に再現し、14の状態間でスムーズにモーフィングさせるオープンソースWebアプリです。アニメーションライブラリを一切使わず、参照動画をフレーム単位で計測して定数を決定した技術的アプローチが注目を集めています。GIF・MP4・SVG・PNG形式でのエクスポートも可能なユニークなツールです。

bloub x.ai GrokアバターSVGの核心：測定ベースのモーフィング実装

bloubの最大の特徴は「測定から始まる実装」です。多くのSVGアニメーションプロジェクトがデザインツールでの手動調整に頼る中、bloubは参照動画（Grokアバターの実際の挙動）を10fpsでフレームカットし、各状態を以下の方法で計測しています。

  • シルエット（ボディ形状）: サブピクセル精度のレイキャスティングで輪郭を測定
  • 目の形状: カプセルフィッティングで楕円の向きと大きさを算出
  • 色・線幅: 動画フレームから直接サンプリング

この方法で算出した定数は「直感に反する」ものが含まれます。例えば目の傾き方向は「//」（右上がり）と思われがちですが、実際には「\」（右下がり、約26°）です。また体のシルエットは「スクワークル（超楕円）」に見えますが、実際にはほぼ真円（半径方向偏差0.7%以下）です。

コードの定数を「きれいな数字」に丸めると視覚的な類似性が崩れる — この姿勢がbloubの品質を支えています。

技術スタック

Vue 3、Vite、TypeScript、Tailwind 4で構築されており、ESLintやPrettierは使用していません。型チェックはvue-tscのみで行います。

 ─── src/
 │   ├── components/    # Vueコンポーネント
 │   ├── composables/   # 状態管理・アニメーション
 │   └── types/         # TypeScript型定義
 ─── tools/             # 計測・変換ツール
 ─── docs/              # デモ画像・説明資料

アニメーションアーキテクチャ

bloubのアニメーションは外部ライブラリを使わず、CSSカスタムプロパティとVue 3 composablesで実装されています。状態遷移はComposable関数（useAvatarState.ts等）で管理され、14種類の状態（idle, orbit, blink, wave など）を定義した定数ファイルからd属性（SVGパスデータ）を補間してモーフィングを実現しています。

// composablesの使用イメージ
const { currentState, transitionTo } = useAvatarState()

// 状態遷移（例：idleからorbitへ）
transitionTo('orbit', { duration: 400 })

この設計により、アニメーションロジックとUIコンポーネントが明確に分離されており、他のVueプロジェクトへの組み込みも容易です。

SVGモーフィング アニメーション実装の使い方：インストールから起動まで

セットアップ

Node.js（推奨バージョン: 最新LTS）とpnpmが必要です。

# リポジトリクローン
git clone https://github.com/jeremy-prt/bloub.git
cd bloub
pnpm install
pnpm dev

起動後は http://localhost:5190 でアクセスします。

UIの主要機能

画面左のレールで3つのビューを切り替えられます：

Customise（カスタマイズ）

  • ボディ形状: 8種類（circle, capsule, triangle, cloud, teardrop他）
  • カラー: 12色
  • 静止表情: 16種類のレスト状態
  • 設定はブラウザ訪問間で保持されます

Animations（アニメーション）

  • タイムラインエディタ: 状態を並べて各状態の保持時間を設定
  • 作成したアニメーションを保存して再生
  • GIF / MP4形式でエクスポート可能

Settings（設定）

  • 言語選択: フランス語、英語、中国語
  • クレジット表示

エクスポート機能

形式 用途 備考
SVG スケーラブル静止画像 ライブラリ不要
PNG フラット静止画像 ライブラリ不要
GIF（アバター単体） アニメーション 軽量
GIF / MP4（タイムライン全体） 全アニメーション 動画エンコーダーは初回のみフェッチ

開発者向けコマンド

pnpm test     # vitest によるユニットテスト
pnpm build    # vue-tsc --noEmit && vite build（本番ビルド前チェック）

便利なURLパラメータ

#planche         → 14状態を横並びで表示（デバッグ用）
#etat=orbit&stop → 特定の状態を停止表示

他プロジェクトへの組み込み例

bloubのSVGアバターコンポーネントを既存のVue 3アプリに組み込む場合は、src/components/ 以下のコンポーネントとsrc/composables/をコピーして使用します。

# bloubのコンポーネントを自プロジェクトにコピー
cp -r bloub/src/components/GrokAvatar.vue  your-project/src/components/
cp -r bloub/src/composables/useAvatarState.ts  your-project/src/composables/

<template>
  <!-- チャットボットUIへの埋め込み例 -->
  <GrokAvatar :state="botState" :color="brandColor" />
</template>

<script setup lang="ts">
import GrokAvatar from '@/components/GrokAvatar.vue'
const botState = ref('idle')
const brandColor = '#6366f1'  // ブランドカラーに変更可能
</script>

類似ツールとの違い・なぜ今bloubなのか

x.ai / Grok関連のアバターOSSはいくつか存在しますが、bloubのアプローチは独自です。

比較軸 一般的なSVGアニメーションツール bloub
計測手法 デザイナーの目視・直感 動画のフレーム単位計測（科学的）
ライブラリ anime.js, GSAP等を使用 ライブラリなし（純粋なVue + CSS）
対象アバター 汎用 Grok botアバター専用
精度保証 主観的 半径偏差0.7%以下の定量的保証
エクスポート 限定的 SVG/PNG/GIF/MP4に対応

2026年にGrokのCompanion Modeリリースでアバターへの関心が急上昇しており、bloubは「Grokアバターの動作原理を深く理解したい開発者」のニーズに応えるプロジェクトとして注目されています。

こんな人に向いている：職種別活用シナリオ

フロントエンドエンジニア

SVGモーフィング・パスアニメーションをゼロから学びたいエンジニアに最適なリファレンス実装です。外部アニメーションライブラリを使わずにどこまでできるかを示した教材として、Vue 3 + Viteプロジェクトの実装パターンを一通り学べます。

UIデザイナー・モーションデザイナー

カスタマイズモード（8形状 × 12色 × 16表情）でGrok風アバターをブランドに合わせて調整し、SVGまたはGIFでエクスポートして自社サービスのマスコットキャラクター素材として活用できます。コードの変更なしでデザインの試行錯誤が可能です。

AI・テックスタートアップのプロダクトエンジニア

チャットボットUI・AIアシスタント製品のアバターコンポーネントとして組み込む際のプロトタイプとして活用できます。タイムラインエディタで感情表現を設計し、実際のユーザーテストに投入するまでのサイクルを短縮できます。

使う前に知っておきたいこと

動作要件とプラットフォーム制限

  • Node.js + pnpm: パッケージマネージャーはpnpmのみ対応（npmやyarnでの動作は保証外）
  • ブラウザ制限: ストレージへのアクセスをブロックするブラウザポリシー（Cookieブロック、サードパーティiframe、企業ポリシー）ではUI状態が保持されず空白ページになる場合があります（v0.1.1で対応済み）
  • 言語設定: フランス語・英語・中国語の3言語のみ対応（日本語UIはなし）

ライセンス

MITライセンスで公開されており、商用利用・改変・再配布が可能です。Grokアバターの視覚的な再現物であるため、Grok/x.aiの商標・ブランドガイドラインを商業利用前に確認することを推奨します。

既知の技術的制限

MP4エクスポートには外部の動画エンコーダーを初回取得する設計のため、オフライン環境では利用できません。大きなモンタージュ（4.65MB以上）は以前タブフリーズを引き起こす問題がありましたが、v0.1.1で修正済みです。

まとめ：SVGアニメーションを科学的に実装するbloubから学べること

bloubは単なるGrokアバターの再現プロジェクトではなく、「測定→定数→実装」という科学的アプローチでSVGアニメーションを構築する方法論を示した教材です。アニメーションライブラリに頼らない実装がなぜ可能なのか、フレーム計測がなぜ必要なのかを具体的なコードで学べます。GrokアバターのカスタムUIを作りたい方はもちろん、フロントエンドアニメーション技術を深掘りしたいエンジニアにとって価値あるリポジトリです。

関連ツール・おすすめサービス

DigitalOcean — 開発者向けクラウド。App Platformでフロントエンドプロジェクトを手軽にデプロイ

この技術を学ぶ

クリエイティブに興味を持った方には、Udemyのオンラインコースもおすすめです。

毎日更新のGitHubツール情報

LINEで受け取って最新情報をキャッチアップしよう

友達追加する（無料）

関連記事

この記事が役に立ったらシェアしてください