jeremy-prt/bloub

これは何？

主な機能

• 01アニメーションライブラリを使わず、1つのSVGボディシェイプを14状態の間でモーフィングします。
• 02ボディ上の2つの白い目のシェイプを独立してアニメーションさせます。
• 038種類のボディシェイプ、12色、16種類の待機時の表情を利用できます。
• 04状態を並べ、表示時間を個別に設定できるタイムラインエディターを備えています。
• 05SVG、PNG、アニメーションGIFに書き出せます。タイムラインはMP4にも書き出せます。
• 06任意の時刻に決定論的なフレームをレンダリングでき、テストやサムネイルに利用できます。

ユースケース

• アニメーションライブラリを追加せずに、Vueアプリへアニメーションするボットアバターを組み込む。
• 実測値を使ったシェイプのモーフィングを、プレーンなSVGで実装する方法を学ぶ。
• プレゼンテーションやSNS投稿向けに、アバターのアニメーションGIFやMP4クリップを生成する。
• アバターの各状態をデザインレビューするための、静止状態のギャラリーを作成する。

クイックスタート

1. 1

   pnpmで依存関係をインストールします

   pnpm install
2. 2

   開発サーバーを起動してから、localhost:5190を開きます

   pnpm dev

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

• !x.aiのボットアバターのデザインを使用していますが、これは第三者ブランドの模倣であり、x.aiとは無関係です。
• !コードはMITライセンスですが、模倣したデザインはそのライセンスの対象外です。

トピック

よくある質問

bloub とは？

x.aiのボットアバターをSVGとVueで再現。1つの黒いシェイプが14状態にモーフィングし、白い目は独立してアニメーションします。 bloubは、SVGシェイプの組み合わせでx.aiのボットアバターを再現します。塗りつぶされた黒いボディが14状態の間でモーフィングし、2つの白い目のシェイプがそれぞれ独立して動きます。Vue 3、Vite、TypeScript、Tailwind 4で構築されており、アニメーションライブラリは使用しません。

bloub は無料で使えますか？ライセンスは？

bloub は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

bloub は今もメンテナンスされていますか？

半年以内に更新あり。bloub の最終コミットは 2026年8月17日 です。

bloub は何に使えますか？

アニメーションライブラリを追加せずに、Vueアプリへアニメーションするボットアバターを組み込む。 実測値を使ったシェイプのモーフィングを、プレーンなSVGで実装する方法を学ぶ。 プレゼンテーションやSNS投稿向けに、アバターのアニメーションGIFやMP4クリップを生成する。 アバターの各状態をデザインレビューするための、静止状態のギャラリーを作成する。

bloub のインストール方法は？

pnpmで依存関係をインストールします: pnpm install 開発サーバーを起動してから、localhost:5190を開きます: pnpm dev

bloub はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/jeremy-prt/bloub