cursor-reveal-hero

Cursor Reveal Hero

ベース画像を常に表示し、フェードするマスクを通してのみ表示画像を現す、ソフトなカーソルトレイルエフェクトの作成や修正にこのスキルを使用します。

基本の式：

final = baseImage + revealImage * softCursorTrailMask

モード

• build：既存のアプリ、またはバニラテンプレートからエフェクトを一から作成します。
• repair：画像の読み込み、マスクの合成、ポインター操作、スライダー、フェード、リサイズ、キャッシュの動作不良を診断します。
• tune：意図した見た目に合わせて、半径、ぼかし、フェード、強度、不透明度、モメンタムを調整します。
• validate：ブラウザー／Canvasのチェックを実行し、スクリーンショットを確認します。

ワークフロー

1. 2つの画像レイヤーが一致しているかユーザーが判断できない場合は、まず $image-layer-alignment-validator を使用します。
2. プロジェクトのスタックを特定します。既存のフレームワークとアセットパイプラインを優先してください。
3. バニラ実装の場合は、assets/vanilla-template/ をコピーして画像パスを置き換えます。
4. ページは実際のリビール領域に集中させます。依頼がない限り、マーケティング文言、ヒーローテキスト、無関係なコンテンツは追加しないでください。
5. references/canvas-compositing.md に沿ってCanvasの構成を実装します。
6. 調整用に、半径、ぼかし、フェード、強度、不透明度、モメンタムを直接操作できるコントロールを追加します。
7. 開発ビルドでは、必要に応じて window.revealSettings とマスクを消去する関数を公開します。
8. ブラウザーのターゲットを利用できる場合は、ローカルURLに対して scripts/smoke-check-reveal.mjs を実行します。
9. 変更したファイル、現在の調整値、検証結果を正確に報告します。

実装ルール

• 表示用Canvasを1つ使用し、マスクと表示レイヤーにはオフスクリーンCanvasを使用します。
• CSSサイズを固定したまま、デバイスピクセル比に合わせたスケールで描画します。
• ポインターイベントを使用し、マウス、タッチ、ペン入力に対応します。
• 硬いホバー円ではなく、ソフトな放射状グラデーションを使用します。
• destination-out で古いマスクの内容をフェードさせます。
• destination-in でマスクを表示レイヤーに適用します。
• マスクを適用した表示レイヤーを描画する前に、毎フレームベースレイヤーを描画します。
• コントロール値が変更されたら、蓄積したマスクを消去します。これにより、古いトレイルが調整の妨げになりません。
• 静的ファイルがキャッシュされている場合は、キャッシュバスターのクエリ文字列を更新するか、ハードリフレッシュします。

よくある修正対象

• スライダーは動くのに設定が変わらない：input と change をバインドし、textContent を更新して、設定の更新後にマスクを消去します。
• リビールが硬い拡大鏡のように見える：ぼかし、半径、フェードの滑らかさを上げ、表示が目立ちすぎる場合は不透明度を下げます。
• トレイルが消えない：フェードを強めるか、マスクCanvasに destination-out が適用されていることを確認します。
• 表示画像が常に見える：globalCompositeOperation、マスクのリセット、表示Canvasの消去順を確認します。
• Canvasがぼやける：DPRのスケーリングとリサイズ処理を修正します。
• リサイズ後にエフェクトが動作しなくなる：すべてのCanvasのバッキングストアを再構築し、再描画します。

安全性とプライバシー

• 外部での生成、ホスティング、分析をユーザーが明示的に依頼しない限り、画像アセットはローカルに保持します。
• エフェクトの調整中に、元のベース画像や表示画像を上書きしないでください。
• プロジェクトですでに使用されており、ユーザーがその方針を希望している場合を除き、エフェクトに分析機能、リモートトラッキング、サードパーティのランタイム依存関係を追加しないでください。
• ブラウザーで検証する際は、ローカルURLとファイルURLを優先します。ユーザーが対象範囲を明示的に指定しない限り、認証が必要な本番ページや非公開の本番ページを自動操作しないでください。

検証と評価

• URLを利用できる場合は、scripts/smoke-check-reveal.mjs を使用します。
• 自動チェック後にスクリーンショットまたは実際のページを確認します。スモークテストの成功だけでは、見た目の品質は保証されません。
• コントロールを変更した場合は、スライダーの動作を手動で確認します。
• ビューポートのリサイズ後と、キャッシュバスターの変更後に再テストします。

リソース

• コアのレンダーループを実装または修復する前に、references/canvas-compositing.md を読んでください。
• 操作感を調整したり、コントロールの問題を診断したりする際は、references/tuning-and-failure-modes.md を読んでください。
• 最終的なビジュアルチェックの前に、references/browser-validation.md を読んでください。
• 単体で動作する HTML/CSS/JS のスターターとして、assets/vanilla-template/ をコピーしてください。
• ローカル URL を利用できる場合は、ブラウザーでの確認結果を得るために scripts/smoke-check-reveal.mjs を実行してください。