# 液体クロム — Style Reference
> 銀色の金属の液体が大きくうねり、暗い部屋と細長い窓の白い帯をピントの合った鏡面で映す。見出しは白抜きで上に置き、液面に薄く映り込む。

**Theme:** dark  **Series:** PARTS 006  **World:** 製品の3Dモデルを画像に書き出さずに表示するビューア。質感そのものが売り。

## Concept
ヒーロー背景の1パーツ。主役はノイズの高さ場から法線を作り、手続きで作った高コントラストの環境マップ(暗い部屋・暗い床・細長い窓の白い帯11本)を鏡面反射させた全画面シェーダー。
ぼかしは帯の縁の 0.0016 だけで、反射はピントが合っている。色は無彩色の銀。暗部は深い灰から黒、ハイライトは白。
液面は低周波の大きなうねりで、カーソルや指の位置からは細かい波紋が広がる。見出しの文字は液面に上下反転して薄く映り、法線で歪む。

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

- 高さ場 `height(p,t)`(p は FREQ 倍、FREQ desktop 1.2 / mobile 1.7。さらに `p.x *= .42` で横に引き伸ばし、帯を細長く流す):
  - 大きなうねり `.55·sin(1.4x+.6y+.5t) + .35·sin(.5x-1.7y-.37t+1.3) + .22·sin(2.6(x+y)+.8t)`
  - 5次補間の value noise `.5·(noise(1.2p + t(.15,-.1)) - .5) + .25·(noise(2.4p - t(.1,.2)) - .5)`(3次補間だと反射に格子が出る)
  - 波紋(最大5個) `sin((d-k)·70)·exp(-|d-k|·16)·exp(-1.2·age)·.14·RIPPLE`、k = age·.5、3秒で消える
- 法線: 3回の高さ評価(中心・+x・+y、間隔 2px)から `g = Δh/e · AMP · .13`、`n = normalize(-g, 1)`。AMP desktop 0.88 / mobile 0.72。
- 反射: 視線 v=(0,0,1)、`r = reflect(-v, n)`、`y = r.y - HORIZON`(HORIZON .1。平らな面は床を映す)、`ang = atan(r.x, r.z)`。
- 環境マップ env(r):
  - 部屋 `mix(.05, .16, smoothstep(-.1,.7,y))`、床は暗い灰 `.22·smoothstep(-.6,0,y)+.04`。明るい灰の面は作らない
  - 窓の帯11本(白、縁 .0016): y=.035/.075/.105/.15/.19/.24/.29/.36/.44/.52/.62、半幅 .003〜.009、強さ .8〜1.4。`seg = smoothstep(-.08,.08,sin(3ang+.4))` で一部に桟
  - 床側の映り4本 y=-.04/-.09/-.15/-.24、強さ .25〜.55
- 見出しの映り込み: h1 を 2D canvas に同じ書体・位置で描いてテクスチャ化。文字の下側の画素で `src = (x + .09·n.x, 2·yBottom - y + .14·n.y)` をサンプルし、`exp(-(yBottom - y)·4)` で減衰、濃さ REFLECT_TEXT .22。
- 仕上げ: 見出しの背後(ガウス、横幅 .4、縦長画面は .75)で色を .42 に頭打ちしてから .6 倍に沈め、最大 85% 混ぜる、フレネル `pow(1-n·v,4)·.15·.6`、周辺減光 30%、`col/(1+.15col)`、1/200 のディザ。
- 解像度: desktop `min(devicePixelRatio,1.5)`、mobile 0.6 倍。

## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| --void | #08090B | html背景 |
| room-low | #0D0D0F | 部屋(暗部。トーン前 vec3(.05,.05,.06)) |
| room-high | #29292E | 部屋(上方。vec3(.16,.16,.18)) |
| floor | #424247 | 床の手前(.22·smoothstep + .04) |
| floor-far | #0A0A0A | 床の遠く(.04) |
| window | #FFFFFC | 窓の帯(ハイライト) |
| --white | #FFFFFF | 見出し・ロゴ・CTA 地 |
| lead | #D9DAE0 | 本文 |
| --fog | #9A9CA4 | ラベル・フッター |
| cta-text | #0B0C0F | CTA の文字 |

## Typography
- 単一ファミリー: Noto Sans JP。
- 見出し: 200、`clamp(36px, 5.8vw, 84px)`、line-height 1.2、letter-spacing .01em、`<br>` で2行固定。白抜き。
- 本文: 300、`clamp(14px, 1.15vw, 17px)`、line-height 1.9、最大 32em。
- ラベル: 300、12px(mobile 11px)、letter-spacing .14〜.22em、大文字。ロゴ 500 / .2em。
- ボタン: 500、14px、letter-spacing .06em。
- 本文ブロックに `text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 26px rgba(0,0,0,.85)`。白い帯の上でも読める。ボタンだけは `text-shadow:none` で打ち消す。
- lead は文節ごとに `<span class="ph">`(nowrap)で包み、語の途中で折り返さない。

## Spacing & Layout
- 1画面 = `100svh`、`grid-template-rows: auto 1fr auto`。本文は上寄せ(`align-self:start`)、上余白 `clamp(36px, 10vh, 120px)`、最大幅 820px。
- 左右余白 `clamp(20px, 5vw, 72px)`、上 28px、下 22px(+safe-area)。
- breakpoint 640px: 見出し `clamp(32px, 9vw, 44px)`、上余白 `clamp(28px, 8vh, 80px)`、フッター2行積み。

## Motion
- 時間係数 SPEED 0.3(dt は 0〜0.05 秒にクランプ)。うねりは 10〜20 秒周期、波紋だけ速い。
- 波紋は pointermove を 0.12 秒間隔で間引き、pointerdown は即時。
- requestAnimationFrame 1本。`visibilitychange` と IntersectionObserver で画面外は停止。
- `prefers-reduced-motion`: t=5 の静止フレームを1回描く。波紋も立たない。
- WebGL 非対応: 部屋・窓・床を縦に並べた linear-gradient。
- フォント読み込み後(`document.fonts.ready`)とリサイズ時に映り込みのテクスチャを描き直す。

## Components
- hero: 全画面。上に社名と分類、上 1/3 左に eyebrow / h1 / lead / CTA。
- button(.cta): 高さ46px の pill。白地に黒文字で、hover で1px浮く。focus-visible は白いリング。
- footer(.bot): 11px、左に操作説明、右に `VALE / PARTS 006 / 液体クロム`。
- section: このパーツには無い。

## Do / Don't
- Do: 帯の縁は .0016、帯は細く多数。太くぼかすと灰の塊になる。
- Do: 部屋と床は暗く保つ。帯の白との差で鏡面に見える。
- Do: うねりは低周波。細かいと煙に見える。
- Don't: TINT を暖色に振りすぎない。茶色の塊になる。
- Don't: 3次補間のノイズを使わない。格子が反射に出る。
- Don't: 見出しを液面の中段に置かない。映り込みが本文と重なる。

## References
- n8n: 暗い面を内側から照らす光という考え方を抽象化。橙の勾配 CTA は使わず、白い pill と白い窓の帯にした。
- Air: 単一サンセリフの静かな UI と、ガラス彫刻の質感を主役にする構図を抽象化。写真の代わりに手続きの鏡面反射で質感を作った。

## Usage
1. `<canvas id="gl">` と `<script>` ブロック全体を切り出す。`.still` と `#hint`、映り込み用に `id="h1"` の見出しも一緒に。
2. canvas は `position:fixed; inset:0`。上に載せる要素は `position:relative; z-index:1`、白文字に text-shadow を付ける。
3. パラメータは JS 冒頭の `P`:
   - `SCALE` 描画解像度倍率(desktop は devicePixelRatio を 1.5 で頭打ち、mobile 0.6)
   - `SPEED` うねりの速さ(0.3)、`AMP` 法線の傾き(desktop .88 / mobile .72)、`FREQ` うねりの大きさ(1.2 / 1.7)
   - `RIPPLE` 波紋の強さ(0で無効)
   - `HORIZON` 平らな面が映す高さ(0.1。0 で地平線、正で窓の方へ)
   - `TINT` 金属の色(銀 [1,1,1]、金 [1,.85,.6])
   - `REFLECT_TEXT` 見出しの映り込みの濃さ(0.22。0で無し。`#h1` が無いときも 0 にする)
4. 窓の帯の本数と高さは `env()` の `band(y, 中心, 幅)` の行。帯を増やすほど反射が細かく動く。
5. 映り込む文字を変えるときは `drawText()` が参照する要素(`#h1`)を差し替える。改行は `<br>` で入れる。
6. 波紋の最大数は `MAXR`(5)。