はじめに
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>
);
}
propsで細かく調整できるので、サイトのトンマナに合わせやすいです。
実践的なユースケース
ポートフォリオサイト
個人的には、ポートフォリオサイトとの相性が抜群だと思います。ヒーローセクションにテキストアニメーション、背景にパーティクルエフェクトを入れるだけで、かなり見栄えが良くなります。
ランディングページ
LPでユーザーの目を引きたいセクションに使うのも効果的です。ただし、やりすぎると逆効果なので、ポイントを絞って使うのがコツですね。
SaaSのダッシュボード
正直なところ、業務システムには向かないかもしれません。でも、SaaSのマーケティングページやログイン画面なら、ブランディングの一環として使えます。
注意点
いくつか気になる点もあります。
- ライセンス: MIT + Commons Clauseなので、商用利用する場合は条項を確認しておいたほうがいいです
- SSR対応: Next.jsのApp Routerで使う場合、一部のコンポーネントは
'use client'が必要になります - パフォーマンス: 背景エフェクト系は処理が重いものもあるので、モバイルでの動作確認は必須です
まとめ
React Bitsは、手軽にリッチなアニメーションを導入できる便利なライブラリです。
- 110以上のコンポーネントを収録
- TypeScript / Tailwind CSS対応
- 最小限の依存関係
- shadcnやjsrepoで簡単インストール
30代になって思うのは、「使えるものは使う」という姿勢の大切さなんですよね。自分で全部書くのも勉強になりますが、効率を考えるとこういうライブラリをうまく活用するのがベストだと思います。
ポートフォリオやLPを作る機会があれば、ぜひ試してみてください。
参考リンク