Cursify、カーソルをウェブサイト用インタラクティブツールに変える
Awwwardsで企業やデザイン代理店のスタイリッシュなウェブサイトを開くと、マイクロインターフェースがすぐに目を引きます。カーソルはリンクの上でスムーズに拡大し、後ろに光の軌跡を残し、テキストを引き伸ばしたり、ソフトなグラデーションでカードをハイライトしたりします。見た目は新鮮ですが、自分のReactプロジェクトでこれを再現しようとすると、すぐに面倒な作業の壁にぶつかることになります。マウス座標を手動で計算し、再レンダリングを追跡し、スプリングアニメーションを設定し、モバイルデバイスでの遅延と戦わなければならないからです。
最近、UI-Layoutチームがcursifyリポジトリを公開しました。本質的には、ReactまたはNext.jsアプリケーションに変わったカーソルエフェクト、点灯ボタン、キネティックアニメーションをすばやく追加したい人向けの、コンポーネント готовых компонентовとドキュメントテンプレートのセットです。
プロジェクトの中身
このリポジトリはMDX対応のNext.jsスターターテンプレートとして構成されています。アーキテクチャはshadcn/uiの原則に従っています：不要なコードが大量に含まれるmonolithicなnpmパッケージをインストールするのではなく、必要なコンポーネントを直接プロジェクトにコピーするだけです。
リポジトリにはいくつかのコンポーネントグループが含まれています：
- インタラクティブなカーソルとテキスト。
cursor-follow-textのようなコンポーネントは、スプリング物理によるスムーズなイージングでテキストやカードをマウス動きにバインドします。 - ボタンエフェクト。ランニングハイライト（
btn-bg-shine）、カーソルに従うスポットライト（btn-bg-spotlight）、スムーズなプレス状態などのオプションがあります。 - ブラーとビネット。
blur-vignetteセットは、 카드、イメージ、背景ビデオにブラーグラデーションマスクを適用します。 - スクロールと数字アニメーション。Framer Motionによる水平スクロールと実行中の数字カウンター（
numbersuffle）。
スタックの構成
プロジェクトの基礎はミニマルです。React、Tailwind CSS、Framer Motionの作成者による最新のスタンドアロンパッケージであるmotionライブラリを使用しています。
既存プロジェクトに基本依存関係をインストールするには、次を実行するだけです：
npm install motion clsx tailwind-merge
Tailwindクラスの組み合わせには、最新のReactスタックで作業したことがある人ならおなじみの標準的なcnヘルパーが使用されます：
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
スマートフォンやタブレットでのカーソルアニメーションは通常、じゃまになってネイティブスクロールを壊すだけです。Cursifyの開発者はタッチスクリーン検出を別のフックuseMediaQueryに移動しました。これにより、タッチスクリーンで複雑なカーソルエフェクトを的痛苦なく無効にできます：
import { useEffect, useState } from 'react';
export function useMediaQuery(query: string) {
const [value, setValue] = useState(false);
useEffect(() => {
function onChange(event: MediaQueryListEvent) {
setValue(event.matches);
}
const result = matchMedia(query);
result.addEventListener('change', onChange);
setValue(result.matches);
return () => result.removeEventListener('change', onChange);
}, [query]);
return value;
}
実践での活用場所
特殊なカーソルアニメーションはどこでも必要はありません。重たいCRMシステムや分析ダッシュボードでは、マウスの後ろを飛ぶ円はむしろユーザーを苛立たせるだけです。しかし、ビジュアルの精度がコンバージョンと製品認知に直接影響するシナリオもあります：
- ポートフォリオとプロモページ。細部へのこだわりを示し、何百ものテンプレートランディングページの中から際立つ必要がある場合。
- オンラインストアのプロダクトカード。ビネットエフェクトとホバーハイライトが重要な商品への注意を引きます。
- スタートアップのプレゼンテーション。変わったマイクロインタラクションがテックサービスウェブサイトをより忘れられないものにします。
- インタラクティブなショーケースとギャラリー。複雑なスクロールと几何学的なシェイプを持つブロックが、
clip-pathで長いページに命を吹き込みます。
長所と粗いエッジ
リポジトリの主な利点はオープンソースであることです。各コンポーネントは分離されたTypeScriptファイルとしてregistry/componentsフォルダーに存在します。btn-bg-spotlight.tsxの中を覗いて、clientXとclientYオフセットがどのように計算されているかを確認し、減衰式を調整したり、デザインシステムに合わせて色を変更したりできます。
際立つ欠点は最小限のREADMEです。各コンポーネントのpropsを含む詳細なテーブルが不足しているため、ローカルドキュメントサーバーを実行するか（pnpm dev）、または直接コードを読んでregistry/とcomponents/ディレクトリを探索する必要があります。それでも、コードはクリーンに書かれていて読みやすいです。
プロモサイト、サイドプロジェクトのランディングページ、または個人的なポートフォリオの刷新を構築している場合、Cursifyは手動のアニメーションコーディングのいくつかの夜を節約してくれます。このプロジェクトは、すでにあるTailwindとNext.jsスタックに数分で統合できる、すぐに使えるビジュアルテクニックの確かなセットを提供します。GitHubでリポジトリをチェックしてテンプレートをフォークできます。
関連プロジェクト