流体シミュレーション背景

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: Fluid Simulation Background (流体シミュレーション背景)

What happens: 苔色と土色のインクを置くと、速度・粘性・圧力を更新する2D流体の中で混ざりながら流れる。なぞる方向、粘り、筆の太さを変え、止めた状態でもインクを置いて比較できる

## Implementation recipe (normative)

矩形の2D領域を使うstable fluids。速度は256×160のMAC格子で右面・上面の成分をRGへ保存。HalfFloatの速度・圧力・色の各FBOをping-pongし、速度の半ラグランジュ移流→速度の粘性拡散（Jacobi 12回、固定した右辺）→外力の追加→divergence→圧力Poisson方程式（Jacobi 40回）→圧力勾配の減算→1024×640のインクの移流、の順で更新する。格子の縦横の物理幅と半セルのずれを考慮し、右・上の法線速度を0、左・下の外側速度を0、圧力は端をclampする閉じた壁とする。インクは吸光量RGBを保持し、淡い紙色×exp(-ink)をsRGBへ変換。初期状態には独自の6本のインクと2つの渦を用意する。1/60秒の固定刻み・表示フレームにつき最大2ステップで、遅延の超過分を持ち越して追い付こうとしない。粘り0〜100は動粘性係数10^(-6+3.5*v/100)、筆1.5〜10は面の高さに対する半径%。色は次に置くインクのみ変更する。停止・再開は流体状態を保持し、消去・最初の模様への復帰は停止する。ポインタの描画は移動距離で間隔を揃え、1イベント最大8点、待ち行列32点まで。矢印キー＋Enter/Spaceと左・中央・右の配置ボタンも用意する。保存するのは粘り・筆・次の色・追加設定で、描いた流体状態や再生許可は保存しない。HalfFloat描画の対応を確認し、失敗時は静止見本・説明・再試行を表示。動き軽減時は停止から開始し、非表示・終了時はRAF、8つの描画先、材質、形状、WebGLを解放する。自由表面や3Dの水を扱う計算ではなく、有限反復による視覚表現用の近似。GIF・写真の歪み・ノイズだけで代用しない。

## Fluid interaction settings

This is a continuous, stateful 2D fluid simulation, not a timed loop or a static treatment. Integrate with fixed 1/60-second steps, at most two steps per display frame; discard excess elapsed time on slow frames or resume. Preserve current velocity and dye when pausing. Use the chosen viscosity and brush radius; changing the ink only affects future deposits. Provide native placement buttons and an operable brush surface with arrow-key positioning and Enter/Space deposition, plus play/pause, clear ink and restore initial pattern. Clear/reset stop playback. Keep color, viscosity, brush and feed preferences across navigation; the painted fluid field is temporary and is not included in the copied settings. Restored preferences never authorize autoplay. No generic easing, base duration or intensity multiplier replaces the fluid solver.

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

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

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

- 粘り: 30
- 筆の太さ: 4.5（面の高さに対する半径%）
- これから置くインク: 苔
- 再生中のインク追加: なし

```json
{
  "viscosity": 30,
  "brush": 4.5,
  "ink": "moss",
  "feed": false
}
```

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