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

はじめに

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

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

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

とはいえ、読むより触った方が早いと思います。SplitTextのようなテキストアニメーションを実際にブラウザ上で動かせるサンプルを用意したので、先に挙動を見たい方はこちらからどうぞ。

＞＞＞まずはサンプルを確認＜＜＜

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 Bitsのサンプルを動かす

React Bitsの代表的なコンポーネントであるSplitTextは、テキストを1文字ずつ分解して、それぞれに遅延（delay）を付けたアニメーションを当てる仕組みになっています。React Bits自体はコンポーネントのソースコードをプロジェクトにコピーして使う配布形式なので、ここではframer-motionを使ってその実装ロジックを簡略化したものを直接書いています。

要点だけ抜き出すと、こんな形です。文字列をsplit('')で1文字ずつの配列にして、motion.spanのtransition.delayにインデックス（i）を掛け合わせているだけです。

function SplitText({ text, trigger }) {
  return text.split('').map((char, i) => (
    <motion.span
      key={`${trigger}-${i}`}
      initial={{ opacity: 0, y: 40 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: i * 0.05, duration: 0.4 }}
    >
      {char}
    </motion.span>
  ))
}

実際に動かせるものが下です。「アニメーションを再生」ボタンを押すと、SplitTextが1文字ずつフェードインしながら立ち上がってくる様子を確認できます。

ボタンを押すたびにtriggerのstateが更新され、keyが変わることで各motion.spanがinitialの状態からアニメーションをやり直します。transition.delayの0.05を大きくすると1文字ずつの間隔が広がり、durationを短くするとキビキビした動きになります。この「文字を分解して遅延を付ける」という考え方が、React Bitsのテキストアニメーション系コンポーネントに共通する基本構造です。

基本的な使い方

インストールしたコンポーネントは、通常の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>
  );
}

propsで細かく調整できるので、サイトのトンマナに合わせやすいです。

実践的なユースケース

「基本的な使い方」で紹介したテキストアニメーション例（SplitText）と背景エフェクト例（Particles）を、実際に値を変えながら試せるサンプルにしました。

テキストアニメーションのカスタマイズ

React BitsのSplitTextはpropsでtextや文字ごとの遅延を調整できるのが特徴です。下のサンプルでは、入力欄に打ち込んだテキストがそのままSplitTextに渡り、スライダーで1文字あたりの遅延（transition.delay）を変更できます。

function SplitText({ text, delay }) {
  return text.split('').map((char, i) => (
    <motion.span
      key={`${text}-${i}`}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: i * delay, duration: 0.3 }}
    >
      {char}
    </motion.span>
  ))
}

入力欄のテキストを空にして打ち直すと、keyが変わるたびにSplitTextのアニメーションが最初からやり直されるのが分かります。遅延を最大の0.15付近まで上げると、1文字ずつ現れる様子がはっきり見えるようになり、逆に0.01まで下げるとほぼ一斉にフェードインするようになります。ヒーローセクションの見出しに使う際は、この遅延値をテキストの長さに合わせて調整するのがコツです。

背景エフェクト（パーティクル）のカスタマイズ

もう一つの定番が、Particlesのような背景エフェクト系コンポーネントです。下のサンプルでは、quantity（パーティクル数）とcolorをスライダー・カラーピッカーでリアルタイムに変更できます。

function Particles({ quantity, color }) {
  const dots = Array.from({ length: quantity }, (_, i) => ({
    id: i,
    x: Math.random() * 100,
    y: Math.random() * 100,
    size: Math.random() * 3 + 1,
  }))
  return dots.map((d) => (
    <motion.span
      key={d.id}
      animate={{ opacity: [0.2, 1, 0.2] }}
      transition={{ duration: 3, repeat: Infinity }}
      style={{ position: 'absolute', left: `${d.x}%`, top: `${d.y}%`, background: color }}
    />
  ))
}

パーティクル数を200近くまで上げると密度が高くなって背景として賑やかになりますが、モバイル環境ではその分描画コストも増えます。「注意点」で触れているとおり、背景エフェクト系は実機での動作確認が必須になる理由がこのサンプルからも実感できるはずです。カラーピッカーでcolorを変えると、サイトのブランドカラーに合わせたパーティクルの見た目もすぐに試せます。