メタボール有機体

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: Metaballs (メタボール有機体)

What happens: 3つの球の影響が3D空間で重なり、近づくと一続きの表面になり、離すと3つに分かれる。離す量、視点、石灰・ブロンズの仕上げを変えて、融合する境目を比較できる

## Implementation recipe (normative)

Three.js MarchingCubesで80×80×80の3Dスカラー場から等値面を抽出する。球の寄与はmax(0, strength/(0.000001+距離²)-12)の和、isolationは80。球3つの位置は正規化空間の0.5を中心に方向(-0.8,-0.45,0.15)/(0.65,-0.25,0.3)/(0.1,0.7,-0.3)、強さ1.35/1.05/0.85、広がり0.09+0.2*separation/100。表示形状はMarchingCubesの座標へscale2。離す量0%は1つの接続面、100%は3つの面となる。reset→addBall→updateでフィールドと頂点・法線を実際に更新し、drawRangeを生成した頂点数に制限。バッファは最大16000三角形で、はみ出しをエラーにする。MeshPhysicalMaterialとPMREM/RoomEnvironment、直接光と床の影を使う。2Dの画像マスクや別々の球の重ね合わせで代用しない。ポリゴン化の近似であり、流体の粘性や衝突を解く物理シミュレーションではない。離す量0〜100%・見る方向-180〜180度・高さ0〜40度・仕上げをrangeとボタンで操作し、ドラッグのキーボード代替を用意する。詳細は静止から開始。標準12秒周期は近接1秒保持→4秒の半cos補間で分離→2秒保持→4秒で接近→1秒保持。選んだ離す量から進め、手動の1周期後は停止、カードだけ繰り返す。選択した再生時間がある場合は全区間を同率で伸縮。停止・再開は往路/復路の位相も保つ。動き軽減は静止、失敗は設定と再試行を残し、再試行時にrangeへフォーカスを戻す。停止中は不要な形状更新とRAFを行わず、終了時はPMREM・環境・影・形状・材質・WebGLを解放する。DPR2/300万画素まで。

## Inspection timing and interaction

One deliberate inspection lasts 12.00s. Advance one full merge/separate cycle from the selected separation. Scale every hold and half-cosine transition in the recipe equally to this duration, then stop. Preserve the outbound/inbound phase across pause and resume. Only a deliberately started comparison card repeats. Start the detail inspector and reduced-motion view at rest. Keep the exact shape, camera and finish values below across navigation; changing a control pauses the inspection. Offer labelled native sliders as keyboard/touch alternatives to dragging, a finish choice, pause/resume and an initial-view action. On renderer failure preserve preferences, offer retry and restore focus. Do not replace this geometry or its motion law with generic intensity offsets or easing.

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

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

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

- 離す量: 35%
- 見る方向: 28°
- 視点の高さ: 12°
- 仕上げ: 石灰

```json
{
  "separation": 35,
  "yaw": 28,
  "pitch": 12,
  "finish": "chalk"
}
```

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