blur

スキル：blur

純粋な WebGL コンポーネント — フルスクリーン canvas で、「ズームブラー」（中心に収束する放射状ブラー）を使って画像を切り替えます。スクロール／クリック／矢印キーで操作し、ブラーの中心はマウスに追従します。

WHAT

目的とコンテキスト

• 目的： フルスクリーン WebGL canvas をページに組み込み、ズームブラー効果（退出する画像は中心に収束しながら徐々にぼやけ、入る画像は徐々に鮮明になる）で画像を切り替えます。スクロール／クリック／キーで操作し、ブラーの中心はマウスに追従します。
• 使用するタイミング：
  • 通常のクロスフェードよりも高級感のある効果（ズームブラー遷移）が必要なヒーローセクションや画像スライドショー。
  • ユーザーが「画像のブラー効果」「WebGL ブラー」「ズームブラー風のギャラリー」と言った場合。
• 対象外： UI カード／パネルの静的なブラー／すりガラス効果には使用しないでください（通常の CSS の backdrop-filter: blur()、または docs-site-macos の liquid-glass を使用してください）。これは画像間の動的な遷移効果であり、GPU 負荷が大幅に高くなります。テーマの変更は行いません（dark-mode-maker の担当です）。

メンタルモデル

images 配列 → 各画像 = PlaneBufferGeometry + ZoomBlurImage シェーダー → progress/targetProgress を lerp → uStrength の 2 レイヤーをクロスフェード → フレームをレンダリング。入力（wheel/click/キー）で targetProgress を変更し、マウスで uCenter を変更します。

入力と出力の契約

	フィールド	必須？	意味
入力	画像のリスト	はい	assets/blur.js の images 配列を差し替えます
入力	速度／イージング	いいえ	duration／イージングを調整します。デフォルトではアセットの設定を維持します
入力	ホストページにグローバルな gsap がある	はい	initScene() はインポートせずに gsap.fromTo(...) を呼び出します
出力	適応済みの blur.html + blur.css + blur.js	はい	移行先のページで動作するフルスクリーン canvas
出力	検証の証拠	はい	スクロール前後のスクリーンショットと、エラーのないコンソール（playwright-verify 経由）

ルールと機能

• RULE-01（必須）：これは GPU 負荷の高い効果です（シェーダーがビューポート全体で毎フレーム実行されます）。同じページで複数のインスタンスを同時に使用せず、確定前に低スペック端末／モバイルでテストしてください（ブラウザーには同時に使用できる WebGL コンテキスト数に上限があります）。
• RULE-02（必須）：playwright-verify で検証してください。スクロール前後のスクリーンショットを撮影し、コンソールを確認します（WebGL コンテキストのエラーは canvas 上で無言で発生することが多く、すぐに分かる JS エラーが投げられない場合があります）。
• RULE-03（必須）：本番環境で使う前に「既知の技術的負債」の項目を読んでください。実際の顧客／製品に引き渡す前に、CDN の useThree インポートをベンダー化してください。
• 機能：スキルのアセットを読み込む。移行先プロジェクトに HTML/CSS/JS ファイルを書き込む。ヘッドレスブラウザーを実行してスクリーンショットを撮影し、コンソールを確認する。

失敗の境界

• ホストページに <script> gsap がない → 画像の読み込み完了時に gsap.fromTo(...) がすぐにエラーを投げる → 追加するまで blocked。
• CodePen/unpkg CDN を読み込めない → canvas が白くなる → failed。修正方法はベンダー化です（「既知の技術的負債」の項目）。
• JS エラーがないのに canvas がレンダリングされない → コンソール／スクリーンショットで反証されるまでは failed とみなしてください（WebGL のエラーは無言で発生する場合があります）。
• 要件がカード／パネルの静的なブラー → 対象外です。backdrop-filter／docs-site-macos に切り替えてください。

HOW

主なワークフロー

Step	Type	Inputs	Action	Outputs/exit	Failure/next
W01	判断	ユーザーの要件	静的な UI ブラーではなく、動的な画像遷移であることを確認します	続行／別のスキルに切り替え	静的なブラー → 中止し、backdrop-filter を提案
W02	決定的	assets/blur.*	assets/blur.html + assets/blur.css + assets/blur.js を読み込みます	アセットの内容	—
W03	効果	アセット、ユーザーの画像	適応：images 配列を差し替え、duration／イージングを調整します。ホストページにグローバルな gsap があることを確認します	移行先プロジェクトのファイル	—
W04	判断	使用先（プロトタイプ／本番環境）	既知の技術的負債の項目を確認します。本番環境の場合は B01 へ	ベンダー化するかの判断	—
W05	決定的	組み込み済みのページ	playwright-verify で検証します：スクロール前後のスクリーンショットを撮影し、コンソールを確認します	スクリーンショット + コンソールログ	エラー／白い canvas → 修正して W05 を繰り返します

ブランチ

ID	種類	条件	動作	スキップ／失敗	再合流
B01	conditional_required	実際の顧客／製品向けに使用する	useThree pen を assets/ 内の .js ファイルとしてベンダー化し、CDN import を削除します（pen のライセンスが不明な場合は自分で書き直します）。バンドラーがある場合は npm 経由で three をインストールします	prototype → スキップ	W05
B02	recovery	コンソールに gsap is not defined と表示される	含まれるページに <script src="gsap..."> を追加します	—	W05

検証と停止条件

スクロール前後のスクリーンショットが異なり（画像が切り替わり）、コンソールに WebGL／JS エラーがなければ完了です。W05 を無限に繰り返さないでください。2 回実行してもエラーが残る場合は、コンソールログを添えてユーザーに報告します。

例

• 成功例：「ズームブラー風のヒーロースライドショーを 4 枚の画像で作って」→ images を 4 つの URL に置き換え、ページには gsap がすでに読み込まれている → playwright でスクロール前後を撮影し、画像 1→画像 2 への切り替わりを確認、コンソールにエラーなし → 引き渡し。
• 境界／失敗例： 対象ページで gsap が読み込まれていない → 画像の読み込み直後にコンソールへ gsap is not defined と表示される → B02 で script を追加し、再検証する。ユーザーが「すりガラス風のぼかしカード」を希望 → W01 で停止し、backdrop-filter: blur() を提案する。

リファレンス — アセット

assets/blur.html + assets/blur.css + assets/blur.js — 読んでから ADAPT します（images 配列を変更し、duration／easing の速度を調整します）。

リファレンス — ⚠️ 既知の技術的負債 — 本番環境で使用する前に読むこと

assets/blur.js の 12 行目では、useThree helper を他者の CodePen pen（codepen.io/soju22/pen/...js）から import しています。これは所有していないリソースへの CDN 依存であり、予告なくいつでも変更／削除される可能性があります。元の snippet は参考用のデモであり、本番環境向けに堅牢化されていません。

• ponytail：グローバルな外部依存が未ベンダー化。実際の本番環境で必要になったときに更新すること — 実際の顧客／製品向けに使用する前に、（1）その pen の内容を読み、assets/ 内の個別の .js ファイルとしてベンダー化し、CDN import を削除します。（2）元の pen のライセンスが不明な場合は、useThree（Three.js の scene／camera／renderer のボイラープレート）を自分で書き直します。
• import ... from 'https://unpkg.com/[email protected]/...'（1～10 行目）もランタイム CDN です。プロトタイプでは許容できますが、バンドラーを使用するプロジェクトでは、実行時のネットワーク依存を避けるため、npm 経由で three をインストールしてローカルから import してください。
• initScene() で gsap を使用していますが、ファイル内では import されていません。含まれるページですでにグローバル変数として利用可能であること（<script src="gsap...">）を前提としています。その <script> がない場合、画像の読み込み完了直後に gsap.fromTo(...) がエラーを投げます。

リファレンス — 仕組み

• 各画像はカスタム shader（ZoomBlurImage）を適用した PlaneBufferGeometry です。fragment shader は中心に向かう方向ベクトルに沿って画像をサンプリングし、Bezier の重み付けによって、uStrength が 0 以外のときに中心へ収束するぼかし効果を作ります。
• 画像の切り替え：progress／targetProgress を徐々に lerp します（updateProgress）。2 つの画像レイヤーの uStrength を交互に変化させます（出ていく画像は徐々にぼかし、入ってくる画像は徐々に鮮明にします）。
• 入力：マウスホイール（wheel）で targetProgress を 1/20 刻みで変更します。画面の上半分／下半分をクリックすると前／次へ移動します。矢印キーでも同様に操作できます。
• ぼかしの中心（uCenter）は各フレームでマウスの位置に合わせて lerp され、「カーソルを目で追う」効果を生みます。

起源

• ユーザーの依頼（2026-09-17）に基づき、llmwiki/patterns/blur/ の参考用 snippet（どの skill にも紐付いておらず、git で追跡されたこともない）を実際の skill にまとめました — timeline と同じタイミングです。