深度マップ疑似3D写真

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: Depth Map Parallax (深度マップ疑似3D写真)

What happens: 一枚の静物画像を奥行きマップと組み合わせ、手前と奥を異なる量で動かす。元画像・視差・奥行きを比較できる

## Implementation recipe (normative)

元画像と、同じ構図・寸法の逆深度マップを2テクスチャとして読み込む。画像はsRGB、深度はNoColorSpaceのデータ（明るいほど手前）。frameUVを中心から0.93倍にして各辺3.5%の余白を確保。ray=vec2(x,y)/100*(strength/100)/vec2(imageAspect,1)。layer=1から0へ32分割で進み、point=uv+ray*(layer-focus)でtexture(depth,point).r>=layerとなる最初の交差区間を探す。その区間を5回二分して交点UVを得てtexture(photo,point)を描く。元のUVの深度だけを使って一度ずらす方式は輪郭が二重になるため使用しない。写真はmipmapを作成し、分岐前に求めた元UVのdFdx/dFdyでtextureGradする。深度は線形フィルタ・mipmapなし。strength=0〜1.5%（画像の高さ比）、focus=0〜1、x/y=−100〜100。元画像は視差なし、奥行き表示は元のUVの深度をグレーで直接表示し、比較時のクロップを変えない。標準はstrength=1.2、focus=0.5、x=35、y=0。確認再生は8秒、p=0〜1、e=sin(πp)²としてx=base.x+(100-abs(base.x))*sin(2πp)*e、y=base.y+(100-abs(base.y))*0.5*sin(4πp)*e。一巡後は開始視点で停止し、停止・比較・再開で位相を保つ。視点を手動変更した場合は新しい開始視点にする。マウスドラッグ・キー・ネイティブ範囲入力に対応し、タッチは左右ドラッグと縦スクロールを両立。読み込みは2枚を一体として管理し、HTTP・復号・寸法・タイムアウト失敗やWebGL喪失から再試行できるようにする。図鑑の静物画像と深度はAI生成の見本で、深度は推定。写っていない裏側の復元や実測深度の証明は含まない。この単一画像では移動を大きくすると輪郭が伸びるため上限を1.5%に制限する。

## Depth-based image inspection

Load a sharp original image and its aligned inverse-depth map as two actual textures. Color is sRGB; depth is data and must not undergo color conversion. Intersect the viewing ray with the depth field from near to far: 32 uniform layers followed by 5 bisection refinements in the first crossing interval. A single original-UV depth lookup can double silhouettes and must not replace this intersection. Use the original UV derivatives for photo textureGrad/mip selection; keep depth linear-filtered without mipmaps. Limit strength to 0–1.5% of image height for this specimen because unseen edges stretch at larger offsets. Use the same crop for original/parallax/depth comparison and reserve enough image margin for every supported movement. Start at rest, support mouse dragging and native horizontal/vertical sliders, and allow vertical page scrolling during touch interaction. Pause when adjusting or comparing; preserve the current view and inspection phase on resume. A deliberately started inspection lasts 8.00s and returns to its starting view with zero endpoint velocity. Use the bounded, smooth two-axis path in the recipe, not generic easing or intensity changes. Persist strength, focus, x and y only, never comparison mode or autoplay. Treat image loads as one transaction: if either fails, cancel pending work and release any decoded images; preserve settings and provide retry with focus recovery. Clearly identify generated or estimated depth. This is 2.5D image parallax: it cannot reconstruct unseen surfaces or correct inaccurate depth automatically. Use original or licensed imagery and matching depth for a new project.

## 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.

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

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

- 視差の強さ（画像の高さに対する割合）: 1.2%
- 動かさない奥行き（0=奥、1=手前）: 0.50
- 視点の左右: 35
- 視点の上下: 0

```json
{
  "strength": 1.2,
  "focus": 0.5,
  "x": 35,
  "y": 0
}
```

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