マウス併用パララックス

Implement the following web visual TECHNIQUE as a small, self-contained demo (single HTML file, inline CSS/JS; GSAP via CDN is allowed if it fits the recipe). Invent your own placeholder content (original text/shapes/colors) — do NOT copy any existing site's content or branding.

## Technique: Pointer-assisted Parallax (マウス併用パララックス)

What happens: スクロールに合わせた写真の上下移動に、マウス位置による視点の動きが重なる。固定して元の配置と比較でき、スマホやキーボードでは位置を指定して試せる。

## Implementation recipe (normative)

Three.jsの同じ写真面に、スクロール進行uProgressと独立したuMouseの2系統のuniformを合成する。progress=scrollTop/(scrollHeight-clientHeight)を0〜1へ、mouseを写真の基準表示矩形から左右・上下それぞれ-1〜1へ正規化する。視差で動いた後の矩形へ再入力してフィードバックさせない。写真高H、scrollTravel=S%、pointerTravel=P%としてdx=H*mouseX*P*.01、dy=H*((progress-.5)*S*.01+mouseY*P*.01)をワールド座標へ足す。yは画面座標から1回だけ反転。標準S=10（0〜18）、P=3（0〜6）。原写真の縦横比a=4/3としてH=min((containerWidth-32)/(a+2*P*.01),(containerHeight-32)/(1+S*.01+2*P*.01))、W=a*Hとし、最大のスクロールと視点でも写真全体が収まる余白を先に確保する。マウス・ペンの位置はスクロールとは別に追従し、枠を離れると視点だけ中央へ戻す。タッチでは縦スクロールを保ち、固定モードのnativeスライダーでスクロール位置0〜100%・横と縦の視点-100〜100を指定できる。ジャイロ・端末センサーへのアクセスは実装せず、許可も求めない。Flowmap履歴やノイズで代用しない。実演は同じ1448×1086pxのAI制作静物写真STILLを1枚使う。sRGB画像を線形化・出力変換とも1回だけ行い、写真の色を変えない。GIFや引き伸ばした小さな見本は使わない。標準は固定表示で、明示した「スクロールで試す」の間だけ写真枠内のnativeスクロール領域を有効にする。領域の実scrollTopとscrollHeight-clientHeightを読む。wheelやtouchをpreventDefaultせず、枠外はページの標準スクロールのまま。スクロール領域はフォーカスでき、矢印・PageUp/PageDown・Home/End・Spaceが標準動作する。「今の状態を固定」で最後に描画した値を保持し、未描画の入力を破棄して領域を閉じる。元画像との比較は同じ素材・同じ画角・同じ値を保持し、効果の有無だけを切り替える。位置指定と速度指定は静止状態を比較するための一時値で、実際にスクロールしているという表示はしない。写真全体が見える16px以上の余白を確保し、端をクロップや引き伸ばしで隠さない。追従はalpha=1-exp(-4.6*elapsedSeconds/response)の時間ベース補間。responseは約99%追いつく秒数で.15〜.8秒、標準.35秒。差が十分小さくなったら値を一致させてRAFを止め、固定・比較・非表示で常時ループしない。動き軽減では入力を即時反映する。画面外とタブ非表示ではGPU資源とフレーム要求を停止し、最後に表示した値をメモリへ残し、戻ると固定状態で復元する。画像のHTTP・寸法・12秒期限・アップロード・シェーダー・context lossの失敗時は静止見本と再試行を示し、仕上げと確認値を保つ。再試行完了後は開始ボタンにフォーカスを戻す。ImageBitmapは同期アップロード後と退場後の遅延完了でもcloseする。DPR上限2・描画上限300万ピクセル。geometry・material・texture・renderer・observer・イベント・RAFを一括解放する。元画像と静止見本は同一アセットを使い、WebGL失敗を別の模様で偽装しない。保存と指示書に含むのはscrollTravel・pointerTravel・responseの3値だけ。progress・mouse・比較・live・速度は保存しない。

## Actual scroll progress plus independent pointer parallax

Combine normalized native scroll progress and pointer coordinates as independent offsets on the same textured plane. Follow the exact full-image frame reservation and height-relative distances in the recipe; switching to the original placement must retain identical scale and image colors. No Flowmap, noise, autonomous drift or simulated scroll input. Start fixed and provide an explicit scroll-inspection action, last-drawn freeze, original/fixed comparison, labelled native progress and pointer sliders, reset and retry with focus recovery. Keep standard page scrolling by default. Only while the visitor explicitly tries the specimen, enable the labelled native scroll region inside the photograph, with arrow, PageUp/PageDown, Home/End keys and a visible exit action. Never cancel wheel/touch defaults or intercept the surrounding page. Touch users can choose the same pointer offsets with sliders; no gyro or sensor access is implemented. Use time-based damping, immediate input for reduced motion and zero idle RAF once settled. Preserve the last drawn sample across renderer disposal and retry at rest. Persist only scroll travel, pointer travel and response below; inspection progress, mouse, live mode and comparison are temporary. This preview uses an original full-resolution AI photograph; use original or licensed assets for a real site. Generic speed, intensity, duration and easing overrides do not apply.

## Quality bar

- Runs at 60fps; animate only transform/opacity/filter where possible.
- Make the initial state legible immediately. Preserve the full timing above, including deliberately slow transitions. Repeat only when the recipe calls for a loop; give finite effects a clear ending and replay action.
- Respect prefers-reduced-motion: show a legible resting state without autoplay. Keep every operation available through keyboard and touch; allow deliberate playback of the effect for inspection.
- Difficulty reference: 中〜高. If the recipe mentions specific libraries or shader work, follow it rather than substituting a simpler approach.

## 図鑑で選んだ実演設定（この値を優先）

レシピの標準値より、次の選択値を優先して実装してください。範囲の記述は操作の上限・下限として残します。

- スクロールで動く距離（写真の高さに対する割合）: 10%
- 視点で動く距離（写真の高さに対する割合）: 3.0%
- 視点に追いつく時間: 0.35秒

```json
{
  "scrollTravel": 10,
  "pointerTravel": 3,
  "response": 0.35
}
```

この設定は自動再生を許可するものではありません。動き軽減時は静止から開始してください。