# 水面の光 — Style Reference
> 淡い水色のプールの底に、白い光の網がゆっくり揺れる。濃紺の太い見出しが左に1本。

**Theme:** light  **Series:** PARTS 008  **World:** 大人のための水泳教室。水の中の静かな時間。

## Concept
ヒーロー背景の1パーツ。主役はボロノイ(セル)ノイズを2層重ねて描いたコースティクス。セルの境界までの距離を細く尖らせると、水面を通った光が底で結ぶ網になる。
R/B チャンネルを少しずらして虹の縁を作り、焦点のむらで明るい所と薄い所を作る。カーソルや指の位置から水面の波紋が広がり、網が歪む。

## Signature Technique
全画面1枚の三角形に対するフラグメントシェーダー(WebGL1)。外部ライブラリなし。

- ボロノイ `vedge(p,t)`: 3×3 近傍の特徴点 `o = .5 + .42·sin(t + 2π·hash2(cell))`(時間で回る)。最近傍 F1 と次 F2 を取り、`F2 - F1` を返す(0 がセル境界)。
- 歪み: ボロノイに入れる前に `p += .28·(sin(1.1y+.5t) + .5sin(2.3y-.3t), sin(1.3x-.4t) + .5sin(2.1x+.6t))`。境界が曲がり、直線の多角形に見えない。
- 2層: `e1 = vedge(p + t(.05,.03), .9t)`、`e2 = vedge(1.7p + (-.04t,.06t) + 3.7, 1.2t + 2)`。
- 線: `c1 = pow(1 - smoothstep(0,.14,e1), SHARP)`、`c2 = pow(1 - smoothstep(0,.16,e2), SHARP)`、`c = .55c1 + .35c2 + .6c1c2`。SHARP 2.4。
- 色ずれ: `caustic(p ± ABERR·CELL)` を R と B に使い、G は中央。ABERR .005。
- 焦点のむら: `focus = .55 + .45·sin(2.1x + .4t)·sin(2.7y - .3t)`、光の強さ `.45 + .4·focus`。
- 波紋: 最大4個。`w = sin((r-k)·40)·exp(-|r-k|·10)·exp(-age·1.1)`、k = age·.35。座標を放射方向に `w·.05·RIPPLE` だけ歪める。3.5 秒で消える。
- 底の色: `mix(POOL, DEEP, smoothstep(.2,1,y))`。上ほど深く暗い。
- 合成: `col = base + LIGHT · c · BRIGHT · (.45 + .4·focus)`(加算。BRIGHT .85)。
- 座標スケール CELL = 3.6(desktop) / 3.0(mobile) セル/画面高さ。1/200 のディザ。
- 解像度: desktop `min(devicePixelRatio,1.5)`、mobile 0.6 倍。

## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| --pool | #A8D6DC | html背景 |
| POOL | #A8D6E0 | 底の色(手前) |
| DEEP | #7AB8C7 | 底の色(奥) |
| LIGHT | #FFFFFA | 光の網 |
| --ink | #10262E | 見出し・ロゴ |
| lead | #223E46 | 本文 |
| --mute | #4F6F76 | ラベル・フッター |
| --teal | #153A42 | CTA 地 |
| cta-text | #F2FAFB | CTA 文字 |

## Typography
- 単一ファミリー: Zen Kaku Gothic New。
- 見出し: 700、`clamp(40px, 6.4vw, 92px)`、line-height 1.12、letter-spacing -.02em、`<br>` で2行固定。
- 本文: 400、`clamp(15px, 1.2vw, 18px)`、line-height 1.9、最大 30em。mobile は `<br class="m">` で句点の後ろで折る。
- ラベル: 12px(mobile 11px)、letter-spacing .14〜.22em、大文字。ロゴ 700 / .2em。
- ボタン: 500、14px、letter-spacing .06em。

## Spacing & Layout
- 1画面 = `100svh`、`grid-template-rows: auto 1fr auto`。本文は左寄せ・垂直中央、最大幅 720px。
- 左右余白 `clamp(20px, 5vw, 72px)`、上 28px、下 22px(+safe-area)。
- eyebrow → h1 22px、h1 → lead 22px、lead → CTA 34px。
- breakpoint 640px: 見出し `clamp(38px, 10.4vw, 50px)`、フッター2行積み。

## Motion
- 時間係数 SPEED 0.5(dt は 0〜0.05 秒にクランプ)。特徴点は1層目が約 14 秒、2層目が約 10 秒で1周、層全体は数十秒かけて流れる。
- 波紋は pointermove を 0.14 秒間隔で間引き、pointerdown は即時。
- requestAnimationFrame 1本。`visibilitychange` と IntersectionObserver で画面外は停止。
- `prefers-reduced-motion`: t=4 の静止フレームを1回描く。波紋も立たない。
- WebGL 非対応: 白い radial-gradient 3つを水色の linear-gradient に重ねた静止背景。

## Components
- hero: 全画面。上に校名と分類、中央左に eyebrow / h1 / lead / CTA。
- button(.cta): 高さ48px、pill、深い青緑の地に白文字。hover で濃くなり1px浮く。focus-visible は濃紺のリング。
- footer(.bot): 11px、左に操作説明、右に `VALE / PARTS 008 / 水面の光`。
- section: このパーツには無い。

## Do / Don't
- Do: 線は細く(smoothstep の幅 .14〜.16)。太いと塗り分けの図形に見える。
- Do: 歪みを残す。真っ直ぐな境界は割れたガラスに見える。
- Do: 色ずれは .005 まで。それ以上は虹の縁が目立ちすぎる。
- Do: 焦点のむらを残す。均一な網は作り物に見える。
- Don't: タイルの目地を描かない。
- Don't: 地を白にしない。水色があって初めて光が白く見える。
- Don't: 見出しを白にしない。濃紺が水の深さを引き立てる。

## References
- Podscan.fm: 無彩色の静かな面にアクセント1色という構成を抽象化。深い青緑を CTA に1つだけ置いた。
- Luffu: 淡い地に近黒の文字、CTA は深い色1つという考え方を抽象化。クリーム地とセリフは使わず、水色地とサンセリフに替えた。

## Usage
1. `<canvas id="gl">` と `<script>` ブロック全体を切り出す。`.still` と `#hint` も一緒に。
2. canvas は `position:fixed; inset:0`。上に載せる要素は `position:relative; z-index:1`。
3. パラメータは JS 冒頭の `P`:
   - `SCALE` 描画解像度倍率(desktop は devicePixelRatio を 1.5 で頭打ち、mobile 0.6)
   - `SPEED` 揺れの速さ(0.5)、`CELL` 模様の細かさ(desktop 3.6 / mobile 3.0)
   - `BRIGHT` 光の強さ(0.85)、`SHARP` 線の鋭さ(2.4)、`ABERR` 色ずれの幅(0.005)
   - `RIPPLE` 波紋の強さ(1.0。0で無効)
   - `POOL` `DEEP` `LIGHT` の3色
4. 深いプールにするなら POOL/DEEP を暗く、LIGHT の係数 `.45 + .4·focus` を上げる。
5. 波紋の最大数は `MAXR`(4)。
6. 画像(タイル写真など)の上に乗せるときは、`base` をテクスチャのサンプルに置き換え、光は加算のまま。