react-bits

react-bits

バージョン 1.0.0
DavidHDev/react-bits
2026年1月

注記：
このスキルでは、アニメーション付き React コンポーネントの最大かつ最も独創的なライブラリである
react-bits の統合、カスタマイズ、コントリビューションに関するガイダンスを提供します。
Vite 4/5/6、Tailwind CSS v4、Three.js/Fiber、GSAP、Framer Motion との統合を扱います。

---

このスキルを使用する場面

• テキストアニメーション、背景エフェクト、インタラクティブな UI 要素など、独創性の高いアニメーション付き React コンポーネントを React/Next.js プロジェクトに統合する必要がある場合。
• 既存の react-bits コンポーネントをカスタマイズまたはデバッグする必要がある場合（例：GSAP のタイムライン、Three.js のキャンバス設定、Tailwind クラスの調整）。
• feat/<feature-name> ブランチの規約に従って、react-bits リポジトリに新しいアニメーション付きコンポーネントをコントリビュートする場合。

このスキルを使用しない場面

• 標準的なアニメーションなしの UI コンポーネントを使う場合（代わりに Radix、Shadcn、Tailwind UI などの標準的なコンポーネントライブラリを使用してください）。
• バンドルサイズに厳しい制約があり、対象プロジェクトで重量のあるアニメーションライブラリ（Three.js、GSAP、Framer Motion）をサポートできない場合。

プロジェクトの構成

• スタック：React、Vite、Tailwind CSS v4、GSAP、Three.js（@react-three/fiber、@react-three/drei）、Framer Motion（motion）、jsrepo（レジストリ管理用）。
• レジストリ：コンポーネントのビルドと配布に jsrepo を使用します。
• スクリプト：
  • npm run dev：jsrepo build --watch と Vite のドキュメントサーバーを並行して実行します。
  • npm run build：レジストリをビルドし、LLM テキストとサイトマップを生成して、Vite サイトをビルドします。
  • npm run new:component：scripts/generateComponent.js を使って新しいコンポーネントのテンプレートを生成します。
  • npm run lint：ESLint を使ってコードベースをリントします。
  • npm run format：Prettier を使ってコードベースをフォーマットします。

手順

ステップ 1：コンポーネントの統合とインストール

1. react-bits カタログから目的のコンポーネントを選びます（例：テキストアニメーション、背景、UI コンポーネント）。
2. 対象プロジェクトに必要なピア依存関係をインストールします（例：コンポーネントに応じて gsap、motion、@react-three/fiber、lucide-react）。
3. コンポーネントのソースコードをコピーするか、対象プロジェクトで設定済みであれば jsrepo を使用します。

ステップ 2：カスタマイズとパフォーマンスの最適化

1. Tailwind CSS：Tailwind CSS が設定されていることを確認します（ソースリポジトリでは Tailwind v4 を使用しています）。
2. GSAP コンテキスト：GSAP アニメーションをカスタマイズする場合、メモリリークや React 18/19 Strict Mode での二重実行を防ぐため、useLayoutEffect 内でタイムラインやトゥイーンを必ずクリーンアップするか、@gsap/react の useGSAP フックを使用してください。
3. Three.js キャンバス：<Canvas> コンポーネントのサイズが適切に設定されていることと、WebGL コンテキストを解放するためにアンマウントされることを確認します。

ステップ 3：新しいコンポーネントのコントリビュート

1. npm run new:component を実行して、新しいコンポーネントのひな形を作成します。
2. クリーンな React パターンを使って、コンポーネントを src/components/ に実装します。
3. ローカルのドキュメントサーバー（npm run dev）でコンポーネントが動作することを確認します。
4. コミット前に npm run lint と npm run format を実行します。
5. feat/<feature-name> という名前のブランチを作成し、main に PR を提出します。

ベストプラクティス

• GSAP のクリーンアップ：メモリリークを防ぐため、アンマウント時に GSAP のタイムラインやトゥイーンを必ずクリーンアップしてください。
• 自己完結型コンポーネント：ユーザーが jsrepo 経由でコンポーネントをインストールしたときに利用できない内部ユーティリティを、コンポーネントがインポートしないようにしてください。
• ブランチ名：すべてのプルリクエストで feat/<feature-name> のブランチ命名規約に従ってください。

例

例 1：安全な GSAP アニメーションコンポーネント

import { useRef } from 'react';
import gsap from 'gsap';
import { useGSAP } from '@gsap/react';

export default function AnimatedBox() {
  const container = useRef<HTMLDivElement>(null);

  useGSAP(() => {
    gsap.to('.box', { rotation: 360, duration: 2, repeat: -1, ease: 'linear' });
  }, { scope: container });

  return (
    <div ref={container}>
      <div className="box w-16 h-16 bg-blue-500 rounded" />
    </div>
  );
}

参考資料

ファイル	用途
package.json	プロジェクトの依存関係（GSAP、Three.js、Tailwind v4）とスクリプト
CONTRIBUTING.md	ブランチ命名規約（feat/）と PR のガイドライン
jsrepo.config.ts	コンポーネント配布用のレジストリ設定