どこかで見たUIに飽きたら。Fancyで取り戻すWebの遊び心

はじめに

最近のWebサイト、どれも同じに見えませんか？　同じUIライブラリ、同じレイアウト、同じ余白。効率化の代償として、Webから「個性」が失われつつあります。一方で、Awwwardsなどで受賞するようなサイトには、ホバーした瞬間に文字が入れ替わったり、画像がカーソルを追いかけたりする、思わず触りたくなる仕掛けが散りばめられています。

「ああいう演出、自分のサイトにも入れたい。でもゼロから実装する時間はない」——そんな悩みに応えてくれるのが、今回紹介する Fancy（Fancy Components）です。アワード級のマイクロインタラクションを、コピペ感覚で自分のプロジェクトに取り込めるReactコンポーネント集です。

Fancyとは

Fancyは、「Webをもう一度楽しくする（make the web fun again）」を掲げるオープンソースのReactコンポーネントライブラリです。React・TypeScript・Tailwind CSS・Motion（旧Framer Motion）で構築されており、テキストアニメーションから物理演算を使った演出まで、遊び心のあるコンポーネントが揃っています。

npmパッケージとして依存に加えるタイプではなく、ソースコードをそのままプロジェクトに取り込むshadcn/uiと同じ思想で設計されているのが特徴です。取り込んだ後は自分のコードなので、デザインに合わせて自由に改変できます。

主な特徴

アワード級の演出を再現 - 受賞歴のあるサイトで見かける人気のインタラクションを、すぐ使える形で提供しています
shadcn CLIで導入できる - レジストリを1行追加するだけで、shadcn addコマンドからコンポーネントを取得できます
コードは自分のもの - ソースコードごと取り込む方式なので、ブラックボックスがなく、カスタマイズも自在です
モダンな技術スタック - TypeScript・Tailwind CSS・Motionベースで、Next.jsなどの現代的なReact環境にそのまま馴染みます
完全オープンソース - 個人・商用を問わず無料で利用できます

インストール

前提条件

Tailwind CSSとMotionがプロジェクトにセットアップされている必要があります。

# npm
npm install tailwindcss@latest motion

# pnpm
pnpm add tailwindcss@latest motion

shadcn CLIでの導入

まだshadcnを初期化していない場合は、先に初期化します。

pnpm dlx shadcn@latest init

次に、プロジェクト直下のcomponents.jsonに@fancyレジストリを追加します。

{
  "registries": {
    "@fancy": "https://fancycomponents.dev/r/{name}.json"
  }
}

これで準備完了です。あとは欲しいコンポーネントを名前で指定するだけです。

pnpm dlx shadcn add @fancy/scramble-hover

なお、コンポーネントが必要とする追加の依存関係はpackage.jsonに追記されるだけで自動インストールはされないため、追加後にnpm install（またはpnpm install）を実行してください。

CLIを使わない場合は、各コンポーネントのドキュメントページからソースコードをコピーして配置する手動インストールも可能です。

基本的な使い方

まずは定番の「スクランブルテキスト」から試してみましょう。ホバーすると文字がランダムに入れ替わりながら元のテキストに収束していく、SF映画のような演出です。

pnpm dlx shadcn add @fancy/scramble-hover

import ScrambleHover from "@/fancy/components/text/scramble-hover";

export default function Hero() {
  return (
    <h1 className="text-4xl font-mono">
      <ScrambleHover
        text="FANCY COMPONENTS"
        scrambleSpeed={50}
        maxIterations={10}
        sequential={true}
        revealDirection="start"
      />
    </h1>
  );
}

たったこれだけで、ホバー時に文字が流れるように解読されていくヘッドラインが完成します。scrambleSpeedで速度、charactersでスクランブルに使う文字セットを変更できるので、日本語サイトならカタカナを混ぜるといった遊びも可能です。

もうひとつ、ナビゲーションと相性抜群の「レタースワップ」も見てみましょう。ホバーすると文字が1文字ずつ縦にスライドして入れ替わります。

pnpm dlx shadcn add @fancy/letter-swap-forward-anim

import LetterSwapForward from "@/fancy/components/text/letter-swap-forward-anim";

export default function NavLink() {
  return (
    <a href="/works" className="text-xl font-semibold">
      <LetterSwapForward
        label="Works"
        staggerFrom="first"
        staggerDuration={0.03}
      />
    </a>
  );
}

staggerFromを"center"にすると中央から波打つように、staggerDurationを大きくするとゆったりとした動きになります。数値をいじるだけで印象がガラッと変わるので、ぜひ手元で試してみてください。

実践的なユースケース

ポートフォリオのヒーローセクション

Fancyが最も輝くのは、第一印象を決めるヒーローセクションです。スクランブルテキストとレタースワップを組み合わせて、「触って楽しい」トップページを作ってみます。

import ScrambleHover from "@/fancy/components/text/scramble-hover";
import LetterSwapForward from "@/fancy/components/text/letter-swap-forward-anim";

export default function Portfolio() {
  const navItems = ["Works", "About", "Contact"];

  return (
    <main className="flex min-h-screen flex-col justify-between p-10">
      <nav className="flex gap-8">
        {navItems.map((item) => (
          <a key={item} href={`/${item.toLowerCase()}`}>
            <LetterSwapForward label={item} staggerDuration={0.02} />
          </a>
        ))}
      </nav>

      <h1 className="text-6xl font-bold tracking-tight">
        <ScrambleHover
          text="CREATIVE DEVELOPER"
          sequential={true}
          revealDirection="center"
        />
      </h1>
    </main>
  );
}