OpenAIデザイン・クリエイティブ⭐ リポ 0品質スコア 45/100
dynamic_cursor_interactions
カスタムカーソルを作成し、ユーザー体験を向上させ、独自のインタラクティブな層を追加するための手順です。反応性の高いカーソル実装により、ユーザーの操作に動的に応答するポインター表現が可能になります。これにより、サイト訪問者はより魅力的で没入感のあるインターフェースを体験できます。
description の原文を見る
Instructions for creating custom, reactive cursors that enhance the user experience and add a unique layer of interactivity.
SKILL.md 本文
注意: このスキルのライセンスは ライセンス未確認 です。本サイトでは本文プレビューのみを表示しています。利用前に GitHub の原本でライセンス条件をご確認ください。
Dynamic Cursor Interactions スキル
標準的なカーソルは退屈です。高度なウェブページでは、ページのコンテキストに反応するカスタム「ドット」または「リング」カーソルを使用します。
コア原則
- カスタムポインター: デフォルトカーソル（
cursor: none;）を非表示にし、DOM 要素（通常は中央のドットと外側のリング）で置き換えます。 - スムーズな補間:
lerp（Linear Interpolation）または GSAP を使用して、マウス位置をわずかな「遅延」を伴って追従させ、プレミアムで重厚かつスムーズな感覚を実現します。 - コンテキストに応じたスケーリング: インタラクティブ要素（ボタン、リンク）にホバーするときに外側のリングをスケーリングします。
- SVG フィルター統合: カーソルが異なる背景色の上を移動するときに、「反転」または「ぼかし」効果を適用します。
実装パターン
1. プレミアム遅延カーソル（JS/CSS）
const cursor = document.querySelector('.cursor');
window.addEventListener('mousemove', e => {
gsap.to(cursor, {
...
詳細情報
- 作者
- jeanjfth
- ライセンス
- 不明
- 最終更新
- 2026/4/11
Source: https://github.com/jeanjfth/Antigravity-pro / ライセンス: 未指定