mcpField
V
vantajs

vantajs

github.com/mengtoデザイン・UI7.1k1.5k 回インストール3 日前に更新
リポジトリ

vantajs について

vantajsは、WebページのコンテナーにVanta.jsのアニメーション付きWebGL背景を追加するデザインスキルです。静的サイトやReact、Vueでのエフェクト設定とライフサイクル管理を扱います。

主な機能

  1. 01Vanta.jsエフェクトの初期化
  2. 02エフェクトオプションの更新
  3. 03キャンバスのサイズ調整
  4. 04エフェクトインスタンスの破棄
  5. 05モバイルと性能上の注意点

活用シーン

  1. 01ヒーローセクションの背景に動きを追加
  2. 02Reactコンポーネントのアンマウント時にエフェクトを破棄
  3. 03モバイル向けの背景フォールバックを計画

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mengto/skills --skill vantajs

インストール後、Claude Code で/vantajsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

REFERENCES.md
demo/
index.html
PROMPT.md

詳細

Vanta.js — アニメーション WebGL 背景スキル

使用する場面

  • ヒーローセクションの背後に装飾的なアニメーション背景を表示したい場合
  • three.js のシーンを一から作らずに、手早く「すごい」見た目にしたい場合
  • 静的サイトや React/Vue に軽量に組み込みたい場合

仕組み

  • Vanta はコンテナー要素にキャンバスを挿入し、エフェクトを描画します（多くは three.js を使用します）。
  • 一般的な使い方：three.min.js を読み込む（または THREE を渡す）＋ Vanta のエフェクトバンドルを 1 つ読み込みます。

主な API／パターン

  • 初期化：
    • const effect = VANTA.WAVES({ el: "#hero", ...options })
  • 初期化後の更新：
    • effect.setOptions({ color: 0xff88cc })
  • リサイズ：
    • effect.resize()（コンテナーのサイズが変わる場合）
  • クリーンアップ：
    • effect.destroy()（SPA では重要です）

よくある落とし穴

  • コンテナーにサイズがない → 何も表示されない
    • 対象要素に明示的な幅／高さを設定するか、レイアウトされていることを確認します。
  • 1 ページに WebGL キャンバスが複数ある → GPU 負荷
    • 1 ページあたりのエフェクトは 1～2 個に抑えます。
  • モバイル／古い GPU での問題
    • フォールバックの背景色／画像を用意し、小さな画面では無効にすることを検討します。
  • フレームワークでのバンドル
    • ビルドによっては window.THREE が必要な場合や、オプションに THREE を渡す必要がある場合があります。

簡単なレシピ

1) 最小限の波の背景
<div id="hero" style="height: 70vh;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta/dist/vanta.waves.min.js"></script>
<script>
  const effect = VANTA.WAVES({ el: "#hero", color: 0x0b1220, shininess: 40, waveHeight: 16, zoom: 0.9 });
</script>
2) React のクリーンアップパターン（概念）
  • useEffect でエフェクトを作成して ref に保存し、アンマウント時に destroy() を呼び出します。

ユーザーに確認すること

  • どのエフェクト（waves、birds、fog、net など）とブランドカラーを使いますか？
  • モバイルでも動作させる必要がありますか？必要な場合、許容できる FPS／品質はどの程度ですか？
  • テキストの背後に表示しますか（コントラスト／読みやすさが必要ですか）？

コメント

Markdown 対応