add-shader-cursor-trail

シェーダーのカーソルトレイルを追加する

段階的な機能強化として、トレイルを正確に実装します。ホストセクションの意味的なコンテンツ、画像、コントロール、静的な初期フレームは維持してください。

ワークフロー

1. フレームワーク、レンダリングモード、既存のモーションスタック、レイヤー順序、視覚効果の低減に関するルール、パッケージマネージャーを確認します。別のスムーズスクロールエンジンを追加したり、セクションのコンテンツを置き換えたりしないでください。
2. 既存のパッケージマネージャーで shaders をインストールします。対応するフレームワークのサブパスからインポートしてください：shaders/react、shaders/vue、shaders/svelte、または shaders/solid。
3. 実装前にreferences/implementation.mdを読みます。6つのシェーダーノード、その順序、2つの不可視ドライバー、2つのIDリンクを正確に維持してください。
4. React または Next.js の場合は、assets/react/ 内のファイルをコピーして調整します。対象外の訪問者がシェーダーバンドルをリクエストしないよう、軽量な機能判定ゲートを重いシェーダーモジュールから分離してください。
5. セクションのコンテンツの背後に、全幅の aria-hidden="true" シェーダーレイヤーを1つ配置します。リンクとコントロールはその上に配置してください。カーソル追跡がグローバルイベントを使用すると確認できない限り、キャンバスに pointer-events: none を設定しないでください。
6. WebGPU、細かなホバーポインター、通常のモーション／透明度設定、ドキュメントの表示状態、ウィンドウのフォーカス、セクションとの交差を条件に読み込みを制御します。GPU処理を停止するため、セクションが表示範囲から外れたらマウントを解除してください。
7. 元の画像または暗い背景を、完全なフォールバックとして維持します。モーションの低減、透明度の低減、粗い／ホバー非対応のポインター、強制カラーの場合はレイヤーを非表示にしてください。
8. 不透明度やブレンドモードなどの表示変数のみを調整します。グラフを装飾的なノイズに変更したり、WebGL／Three.js を追加したり、Shaders のプレビューアセットをホットリンクしたりしないでください。

検証

プロジェクトのリント、型チェック／テスト、本番ビルドを実行します。React の実装では、さらに次を実行してください：

node /path/to/add-shader-cursor-trail/scripts/verify-cursor-trail.mjs \
  path/to/CursorTrailShader.tsx \
  path/to/CursorTrailGate.tsx \
  path/to/cursor-trail.css

JavaScript が利用できない場合の静的セクション、レイヤー上のコンテンツへのキーボードアクセス、タッチ操作、モーションの低減、WebGPU 非対応時、フォーカス／表示状態のクリーンアップを検証します。また、previews.shaders.com または data.shaders.com へのランタイムリクエストが発生しないことも確認します。

選択したブレンドモード、フォールバック、機能判定ゲート、本番ビルドの結果、ブラウザーの制限事項を報告します。対応ブラウザーで実際に確認していない場合、WebGPU の表示を検証済みと主張しないでください。