カーソルエフェクトをプレビュー
低いほどパーティクルが長く残ります
このコードをWebサイトの </body> の前にコピー＆ペーストしてください。
| エフェクト | ビジュアル | 最適な用途 | 動作 |
|---|---|---|---|
| 輝き | ✦ 色付きドット | 汎用、SaaSランディングページ | パーティクルがカーソルから放射状に広がり、わずかな重力で落下 |
| 泡 | 🫧 拡大するリング | クリエイティブポートフォリオ、子供向けサイト | 泡が光沢のあるハイライトとともに上方に浮かぶ |
| 星 | ⭐ 五芒星 | ゲームサイト、エンターテイメント | 星がカーソルから離れながら回転する |
| ハート | ❤️ ハート形 | 出会い系サイト、ウェディングページ、バレンタイン | ハートが回転しながら縮小し、フェードアウト |
| ネオントレイル | 💫 発光リング | テックスタートアップ、ダークモードサイト | リングがシャドウブラーで拡大し、ネオンの輝きを残す |
| 雪の結晶 | ❄️ 6本腕の結晶 | 冬/ホリデーテーマ、季節限定ページ | 雪の結晶がランダムな方向に漂いながら優しく回転 |
コードは pointer-events: none を設定した <canvas> 要素をビューポートに固定します。つまり、クリック、リンク、その他の操作をブロックすることなく、コンテンツの上に視覚的なパーティクルを描画します。各 mousemove イベントで、カーソル位置に設定可能な数のパーティクルをランダムな速度ベクトルで生成します。requestAnimationFrame ループがパーティクルの位置を更新し（輝き/トレイル効果にはわずかな重力を追加）、不透明度をフェード速度に基づいて減少させ、消滅したパーティクルを削除します。最大300個の制限でメモリ増加を防ぎます。ウィンドウのリサイズ時にキャンバスが自動的にサイズ変更され、常にビューポート全体をカバーします。
| プラットフォーム | インストール方法 | 難易度 |
|---|---|---|
| WordPress | 外観 → テーマファイルエディター → footer.php、または「Insert Headers and Footers」プラグインを使用 | 簡単 |
| Shopify | オンラインストア → テーマ → コード編集 → theme.liquid、</body>の前に貼り付け | 簡単 |
| Wix | 設定 → カスタムコード → コードを追加、Body - Endセクションに貼り付け | 簡単 |
| Squarespace | 設定 → 詳細 → コードインジェクション → フッター | 簡単 |
| Webflow | サイト設定 → カスタムコード → </body>タグの前 | 簡単 |
| 静的HTML | 任意の.htmlファイルの</body>の直前に貼り付け | 簡単 |
このエフェクトはパフォーマンスを考慮して構築されています：すべてのレンダリングは単一の2Dコンテキストを持つ <canvas> 要素を使用し、WebGLのオーバーヘッドもパーティクルごとのDOM操作もありません。デフォルト設定（1フレームあたり3パーティクル、上限300）では、最新のハードウェアで約1〜2%のCPU使用率が追加されます。パーティクル数を1に減らし、フェード速度を最大にすると最も軽量な設定になります。スクリプトは約2KBのミニファイ済みサイズで、ほとんどの分析トラッキングスニペットよりも小さいです。
コードを貼り付けた後も直接さらにカスタマイズできます：cfg.typeの値を変更して再生成せずにエフェクトを切り替えたり、cfg.countを調整してパーティクルの数を増減したり、cfg.spreadパラメータを変更してパーティクルの移動距離を変えたりできます。コードはバニラJavaScriptで、ビルドステップもミニファイも不要です。上級ユーザーはswitch文を拡張してカスタムシェイプを追加できます：Canvas 2Dコンテキストは円弧、ベジェ曲線、線、画像スプライトをサポートしています。
好みのエフェクト（輝き、泡、星、ハート、ネオントレイル、雪の結晶）を選択し、コントロールで色とダイナミクスをカスタマイズしてから、コードをコピーをクリックします。生成されたスクリプトを任意のHTMLページの </body> タグの前に貼り付けます。コードは完全に自己完結型で、canvas要素を作成し、マウスの動きを監視してパーティクルを描画します。外部依存やCDNリンクは不要です。
このエフェクトは mousemove イベントを監視しますが、これはタッチデバイスでは発生しません。モバイルではcanvasオーバーレイは存在しますが非表示（pointer-events: none）のため、タップ、スクロール、その他のページ操作に干渉しません。エフェクトは純粋に装飾的で適切に機能低下し、モバイルではカーソル軌跡なしでサイトが正常に動作します。
このエフェクトは requestAnimationFrame を使用し、最大300個のパーティクルに制限されているため非常に軽量です。各パーティクルは1回のcanvas描画呼び出しです。最新のデバイスではパフォーマンスへの影響は無視できる程度（約1〜2%のCPU使用率）です。古いハードウェアでは、パーティクル数とサイズをコントロールで減らすことでリソース使用量をさらに抑えられます。
はい — 生成されたコードは依存関係のないバニラJavaScriptです。WordPress: footer.phpに貼り付けるか、「Insert Headers and Footers」プラグインを使用します。Shopify: テーマ → コード編集 → theme.liquidで </body> の前に追加します。Wix: 設定 → カスタムコードを使用します。Squarespace: 設定 → コードインジェクション → フッター。カスタムJavaScriptを許可する任意のプラットフォームで動作します。詳細な手順は上記の互換性テーブルを参照してください。
ジェネレーターパネルのプライマリカラーとセカンダリカラーのピッカーを使用します。各パーティクルは2色のいずれかをランダムに選択し、ブレンドされた動的な効果を作り出します。モノクロの外観にするには、両方の色を同じ値に設定します。生成されたコードには選択した色が直接埋め込まれているため、貼り付けた後にスクリプトを編集する必要はありません。