無限ドラッググリッド

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: Infinite WebGL Drag Grid (無限ドラッググリッド)

What happens: 8枚の高解像度写真を全方向へドラッグして探す、端のないWebGL一覧。写真を選ぶと全体と説明が開き、元の位置へ戻って続けられる

## Implementation recipe (normative)

AWAI photo archive: render eight original 1024×1536 sRGB photos on actual WebGL planes in an orthographic pixel camera. Reuse a bounded visible mesh pool and eight shared textures; wrap pan in a 4-column × 2-row content period with positive modulo, never at the viewport edge. The eight photos repeat; do not imply infinitely many unique works. Tile width = clamp(144, viewportWidth × .32, 260) × zoom, tile height = width × 1.25, spacing = chosen gap. Use cover UVs without changing photographic color, mipmaps and a DPR cap of 2 with a 3-million-pixel render budget. Never enlarge a GIF or a tiny thumbnail. Fetch/decode at most two full-resolution images concurrently, upload each before releasing its ImageBitmap, and impose a 12-second transaction deadline. Pointer capture handles one primary pointer; distinguish click from drag at 6 CSS pixels and suppress selection after drag/cancellation. Pan is measured in cell units. Estimate release velocity in cells/second, clamp each axis to ±5, then integrate exponential inertia with lambda = 18 - 12 × glide/100, displacement = velocity × (1-exp(-lambda × dt))/lambda; set zero inertia when glide=0 or reduced motion. Stop frames at rest; no auto-drift, wheel hijack or automatic tour. Touch defaults to pan-y with horizontal dragging; only a labelled explicit toggle enables all-direction touch and must allow restoring page scroll. Arrow keys and native direction buttons move one cell, Home resets and Enter/Space opens the nearest central photo. Hit-test the last rendered rectangles. Preserve the same canvas, textures and pan during an inline photo detail; show the full image, caption, AI provenance and previous/next/back controls, then restore focus and the original grid position. Provide a native eight-photo index even when WebGL is unavailable, honest loading/failure and retry. Stop on hidden tab, detail open or exit; release requests, bitmaps, textures, geometry, materials, renderer, observers, pointer capture and animation frames on disposal.

## Infinite photo exploration and complete navigation

Use actual WebGL textures and recycled planes with positive modulo in cell coordinates. The eight original photographs repeat; do not claim infinite unique content. Keep full-resolution image assets sharp, preserve sRGB color and cap drawing resolution. Use two concurrent fetch/decode workers and close each ImageBitmap only after synchronous GPU upload; release late decodes after cancellation. On partial load failure or a twelve-second timeout abort the whole transaction, release allocated resources and offer retry while keeping the photo-name index operable. Track one primary pointer with capture, a click/drag threshold and pointercancel/lostcapture cleanup. Inertia is time-based, finite, capped and disabled for reduced motion or glide=0. No automatic drift, autoplay, generic duration/easing, wheel interception or forced page scroll. Native vertical touch scrolling remains the default; an explicit toggle enables all-direction touch and a clear action restores page scrolling. Supply native directional buttons, arrow keys, Home, Enter/Space and a complete photo-name index. Open an inline full-photo detail with meaningful captions and provenance; previous, next and back must work with keyboard and touch. Freeze and retain the canvas, textures and pan during detail reading, then return to the same location with focus recovery. Persist only zoom, gap and glide below, never selection, pointer state, pan, touch lock or motion. Start at rest and stop frames when motion settles, the tab hides or the visitor reads a photo. On GPU failure retain the ordinary photo index and detail content; retry starts a new resource transaction. The photographs in this specimen are original AI-generated depictions of a fictional inn; use your own original or licensed photographs for another 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.00×
- 写真の間隔: 24px
- 離した後の余韻: 55

```json
{
  "zoom": 1,
  "gap": 24,
  "glide": 55
}
```

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