React Bitsが便利すぎる話 - 110以上のアニメーションコンポーネントを手軽に導入

はじめに

Reactでサイトを作っていると、「もうちょっと動きが欲しいな」と思う瞬間ってありませんか。

個人的には、ポートフォリオサイトとかランディングページを作るときに毎回この壁にぶつかります。自分でアニメーションをゴリゴリ書くのも楽しいんですけど、正直なところ時間がかかりすぎる。

そんなときに見つけたのが React Bits というライブラリです。GitHubスター数が3万を超えていて、コントリビューターも70人以上。これ、意外とすごいコミュニティ規模なんですよね。

React Bitsとは

React Bitsは、アニメーション付きのReactコンポーネントを110以上収録したオープンソースのライブラリです。David Haz氏がメンテナンスしていて、MIT + Commons Clauseライセンスで提供されています。

公式サイト: https://reactbits.dev

コンポーネントは大きく4つのカテゴリに分かれています。

テキストアニメーション: タイピングエフェクト、グリッチ効果など
アニメーション: フェードイン、スライド、パララックスなど
コンポーネント: ボタン、カード、モーダルなど
背景: パーティクル、グラデーション、幾何学模様など

特徴・メリット

4つのバリアント対応

これが地味に嬉しいポイントなんですよ。各コンポーネントは以下の4パターンから選べます。

バリアント	JavaScript	スタイリング
JS-CSS	JavaScript	CSS
JS-TW	JavaScript	Tailwind CSS
TS-CSS	TypeScript	CSS
TS-TW	TypeScript	Tailwind CSS

Tailwindを使っているプロジェクトならTS-TWを選べばいいし、純粋なCSSでやりたいならTS-CSSを選べばいい。この柔軟性は実務でも助かります。

最小限の依存関係

重たいライブラリを入れると、バンドルサイズが膨らんで困ることがあります。React Bitsは最小限の依存関係で設計されているので、その点は安心です。

高いカスタマイズ性

propsを通じてかなり細かくカスタマイズできます。ソースコード自体もコピーして使う形式なので、必要に応じて自分で改造することも可能です。

インストール方法

React Bitsは shadcn または jsrepo というCLIツールを使ってインストールします。npmから直接入れる形式ではないのがちょっと独特ですね。

shadcnを使う場合

npx shadcn@latest add "https://reactbits.dev/registry/text-animations/split-text"

jsrepoを使う場合

npx jsrepo add github/DavidHDev/react-bits/TextAnimations/SplitText

コンポーネントごとにコマンドを実行する形式です。使いたいものだけ入れられるので、バンドルサイズを抑えられます。

詳細なセットアップ手順は公式の Installation Guide を参照してください。

基本的な使い方

インストールしたコンポーネントは、通常のReactコンポーネントとして使えます。

テキストアニメーションの例

import { SplitText } from '@/components/ui/split-text';

export default function Hero() {
  return (
    <div className="hero-section">
      <SplitText
        text="Welcome to my portfolio"
        delay={50}
        animationFrom={{ opacity: 0, y: 40 }}
        animationTo={{ opacity: 1, y: 0 }}
      />
    </div>
  );
}

背景エフェクトの例

import { Particles } from '@/components/ui/particles';

export default function Background() {
  return (
    <div className="relative min-h-screen">
      <Particles
        className="absolute inset-0"
        quantity={100}
        color="#ffffff"
      />
      <div className="relative z-10">
        {/* コンテンツ */}
      </div>
    </div>
  );
}