ui-layouts/cursify

これは何？

主な機能

• 01ReactやNext.js向けに、再利用可能なカーソル追従アニメーションコンポーネントを提供します。
• 02スタイリングにTailwind CSS、アニメーションにmotionライブラリを使用します。
• 03プロジェクトにコピーして使えるソースコードとしてコンポーネントを提供します。
• 04コンポーネントを実際に試せるプレビュー付きのドキュメントサイトを備えています。

ユースケース

• マーケティングページやランディングページに、インタラクティブなカーソルエフェクトを追加する。
• Next.jsサイトでホバーやカーソルのインタラクションを試作する。
• 独自のエフェクトを作る際の出発点として、カーソルアニメーションのコードを活用する。

クイックスタート

1. 1

   Tailwind CSSをインストールします（ほとんどのコンポーネントで必要です）

2. 2

   motion、clsx、tailwind-mergeをインストールします

   npm install motion clsx tailwind-merge
3. 3

   cnヘルパーをutils.tsに追加し、READMEからuseMediaQueryフックを追加します

使う前に知っておきたいこと

• !ライセンスが明記されていないため、利用権が不明確です。
• !READMEに実行手順はありません。コンポーネントは単独で実行するのではなく、自分のプロジェクトにコピーして使用します。
• !ほとんどのコンポーネントでは、事前にTailwind CSSとmotionをセットアップする必要があります。

トピック

よくある質問

cursify とは？

Tailwind CSSとmotionを基盤に、再利用可能なカーソル追従エフェクトを提供するReact・Next.js向けアニメーションライブラリ。 Cursifyは、ReactやNext.jsのプロジェクト向けにカーソルアニメーションのコンポーネントを集めたライブラリです。コンポーネントをコピーして使う形式のレジストリとして構成されており、各エフェクトのコードはリポジトリ内にあり、プロジェクトに追加してその場で調整することを想定しています。

cursify は無料で使えますか？ライセンスは？

cursify にはライセンスが明記されていません。コードは公開されていますが、ライセンスがない場合は再利用の許諾がないため、利用前に作者に確認することをおすすめします。

cursify は今もメンテナンスされていますか？

半年以上コミットなし。cursify の最終コミットは 2026年3月31日 です。

cursify は何に使えますか？

マーケティングページやランディングページに、インタラクティブなカーソルエフェクトを追加する。 Next.jsサイトでホバーやカーソルのインタラクションを試作する。 独自のエフェクトを作る際の出発点として、カーソルアニメーションのコードを活用する。

cursify のインストール方法は？

Tailwind CSSをインストールします（ほとんどのコンポーネントで必要です） motion、clsx、tailwind-mergeをインストールします: npm install motion clsx tailwind-merge cnヘルパーをutils.tsに追加し、READMEからuseMediaQueryフックを追加します

cursify はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/ui-layouts/cursify