React Bitsでアニメ付きUIを最短実装する

教材の範囲：以下は別プロジェクトで試す手順とコード例です。記事内の見本は静的な説明用表示です。導入先のフレームワーク・外部サービスまでの実行確認は含めていません。

たける ランディングページでよく見る、文字がふわっと出てきたり背景が動いたりする「今どきのUI」。自分でゼロから書くと結構大変で。手早く入れられるものないですか？

りこ **React Bits** が今その用途で人気。アニメ付きのReactコンポーネントを集めたもの。特徴は「npm install して使う」んじゃなくて、**ソースを自分のリポジトリに取り込む**方式。shadcn/ui と同じ考え方。

「React最新ラボ」第3回。今回は見た目の話。話題のUIコンポーネント集 React Bits を、このサイトと同じ Vite + TypeScript + Tailwind 構成に入れて動かす。

React Bits の考え方：インストールではなく「取り込む」

なつみ ポイントは、取り込んだ後は**自分のコードになる**こと。色も動きも自由に書き換えられる。ブラックボックスの依存パッケージじゃないから、デザイン都合の微調整がしやすい。

React Bits はshadcn CLIやjsrepo、手動コピーで、選んだコンポーネントのソースを自分の src/ にコピーする。提供形態は4つの組み合わせがあり、プロジェクトに合わせて選ぶ。

導入する

このサイトと同じ TypeScript + Tailwind 構成に追加してみる。各コンポーネントの公式ページに、その構成用の 導入コマンドが表示されるので、それをコピーするのが基本だ。

たとえば文字アニメの BlurText を TS-Tailwind で入れるなら、こうなる。

npx shadcn@latest add @react-bits/BlurText-TS-TW

BlurText-TS-TW が「コンポーネント名-言語-スタイル」を表す。初回はプロジェクト用の設定ファイルを作るか聞かれるので、プロジェクト直下で実行する。実行すると src/ 配下にコンポーネントのソースが入る。

なつみ コンポーネントによっては、中で `motion`（Framer Motion）や GSAP を使うものがある。その場合は必要な依存も一緒に案内されるから、合わせて入れる。

文字をふわっと出す：BlurText

取り込んだ BlurText を使ってみる。ぼやけた状態から、語ごと・文字ごとにくっきり浮かび上がるテキストアニメだ。

// 取り込んだパスに合わせて import する
import BlurText from './components/BlurText/BlurText'

export function Hero() {
  return (
    <BlurText
      text="現場で役立つReact Guide"
      animateBy="words"
      direction="top"
      delay={150}
      stepDuration={0.35}
      className="text-3xl font-bold"
    />
  )
}

主なprops。

スクロールで滑り込ませる：AnimatedContent

AnimatedContent は、要素が画面に入ってきたタイミングで下からスッと現れるラッパー。中身を包むだけで使える。

import AnimatedContent from './components/AnimatedContent/AnimatedContent'

export function Section() {
  return (
    <AnimatedContent distance={100} direction="vertical" duration={0.8} delay={0.1}>
      <h2>スクロールで現れる見出し</h2>
    </AnimatedContent>
  )
}

distance（移動量px）・direction（'vertical' / 'horizontal'）・duration（秒）・delay（秒）あたりを調整する。これに加えて、背景系の Aurora や DotGrid、数字を回す CountUp など、装飾用のコンポーネントが一通り揃っている。

取り込み方式の利点と注意

たける 自分のコードになるのは嬉しいですけど、逆に「あとから本家が直しても自動で反映されない」ってことですよね？

りこ そう。アップデートは手動で取り直す。依存ライブラリの更新の影響は受けるので、取り込んだ版と変更内容を記録する。使うのは数個だけにして、入れたコードは自分で把握しておくのがコツ。

• 利点：取り込んだ後は自分のコード。手元で調整できる（ライセンス条件に従う）
• 注意：本家の更新は自動で来ない（手動で取り直し）。motion / gsap など依存が増える。必要な分だけ入れる
• パフォーマンス：背景の常時アニメ（Aurora など）は描画コストが高め。多用しない

どこまで使う？ Base UI との使い分け

最後に「どんなUIライブラリを選ぶか」の地図を一つ。React Bits と、よく比較される Base UI（MUIチームのheadlessライブラリ）は、役割が違う。

りこ 動きで魅せたいなら React Bits、キーボード操作やスクリーンリーダー対応まで含めた「ちゃんとしたUI部品」が欲しいなら Base UI。排他じゃなく、土台を Base UI、飾りを React Bits、と組み合わせてもいい。

まとめ

• React Bits は jsrepo でソースを取り込むアニメUI集。TS-Tailwind 構成にそのまま入る
• BlurText / AnimatedContent などをコピーして、自分のコードとして調整できる
• 取り込み方式ゆえ更新は手動。依存とパフォーマンスに注意して、必要な分だけ使う
• 飾りは React Bits、操作とa11yの土台は Base UI、と役割で使い分ける

これで「React最新ラボ」第1弾の3回が一区切り。View Transitions・Waku・React Bits と触ってきたが、最新技術は「まだ実験段階／alpha」も多い。それでも実際に手を動かすと、「何が便利で、何が時期尚早か」が自分の感覚で分かる。一次情報（公式ドキュメント）で確かめながら試す――それが新技術と付き合う一番の近道だ。

次回からの第2弾では、React Compiler 1.0、React 19.2の <Activity> / useEffectEvent、そして話題のフレームワーク TanStack Start を順に試していく。

確認してみる

日本語をwordsとlettersで比べる。空白がない日本語ではwordsで1つになる場合がある。取り込んだライセンスと更新元を記録する。

仕様・手順の参照先