クリエイティブな演出をReact Bitsで実現する

Webページの多くは静的で、一度表示したらあまり表示が変わることはありません。Ajaxなどを使った場合でも、サーバで通信した結果を表示するくらいです。

よりインタラクティブで、動きのあるUIを実現するのに便利なライブラリがReact Bitsです。名前の通り、Reactのコンポーネントとして提供されており、簡単に導入できるクリエイティブデベロッパー向けのライブラリです。

React Bitsとは

React Bitsは、カスタマイズの容易なアニメーションを提供するReactコンポーネントのコレクションです。スクロール、ホバー、クリックなどのユーザーインタラクションに応じて、さまざまなアニメーション効果を簡単に実装できます。

JavaScriptとTypeScript、素のCSSでもTailwind CSSでも利用できます。コンポーネントは110以上存在し、さまざまなアニメーション効果を実現できます。

React Bitsのインストール

インストールはコードをコピーして行うこともできるのですが、CLIを使うのが手軽そうです。まず、ベースとして gsap をインストールします。 gsap は、アニメーションを実現するためのJavaScriptライブラリです。

npm install gsap

そして、React Bitsのコンポーネントをインストールするコマンドとして、shadcnとjsrepoの2つが用意されています。

# shadcn
npx shadcn@latest add https://reactbits.dev/r/SplitText-<LANGUAGE>-<STYLE>

# jsrepo
npx jsrepo add https://reactbits.dev/<VARIANT>/TextAnimations/SplitText

パラメータは以下のようになっています。

LANGUAGE:
JSまたはTS
STYLE:
CSSまたはTW
VARIANT:
- default
  JavaScript + CSS
- tailwind
  JavaScript + Tailwind CSS
- ts/default
  TypeScript + CSS
- ts/tailwind
  TypeScript + Tailwind CSS

SplitTextは、以下のようなアニメーションです。

このように、アニメーションの種類を指定してインストールする形になります。

React Bitsのデモ

SplitTextは、以下のように利用します。 SplitTextのファイル自体は200行近いコードとなっています。

import SplitText from "./SplitText";

const handleAnimationComplete = () => {
  console.log("All letters have animated!");
};

<SplitText
  text="Hello, GSAP!"
  className="text-2xl font-semibold text-center"
  delay={100}
  duration={0.6}
  ease="power3.out"
  splitType="chars"
  from={{ opacity: 0, y: 40 }}
  to={{ opacity: 1, y: 0 }}
  threshold={0.1}
  rootMargin="-100px"
  textAlign="center"
  onLetterAnimationComplete={handleAnimationComplete}
/>