# 雨の都市 — Style Reference
> 夜の窓ガラス。雨粒がネオンの街を屈折させ、文章は結露を指でなぞった跡として現れる。

**Theme:** dark  **Series:** EDGE 007  **World:** サイバーパンクの雨の夜。窓の内側から、マゼンタと青緑の看板が灯る路地を見ている。

## Concept
画面全体が一枚の窓ガラス。外は雨の路地(ぼけた写真)と Three.js で置いたネオン看板で、濡れた路面に看板の反射が揺れる。ガラスには静止した滴と流れ落ちる滴があり、滴の中で背景が屈折して看板が小さく映る。滴のない所は結露で曇り、背景はぼけて暗い。
文章はガラスに指で書いた跡。見出しの字形だけ結露が拭われ、その内側は街がはっきり明るく見える。ポインタでなぞると結露が消え、しばらくすると曇りが戻る。右下に雨が降り続いている時間(開いてからの経過)を置く。

## Signature Technique
three.js r170(WebGL2)。3 パス。RAF 1 本、タブ非表示で停止。

1. 背景パス(解像度 ×0.5)
- 透視カメラ fov 40。z = −40 に路地の写真(960px webp を data URI で埋め込み。画面より 1.3 倍大きく貼る)。
- ネオン看板 8 枚: `PlaneGeometry` に SDF シェーダー。角丸矩形の輪郭 / 横棒 / 円 の 3 種。`core = smoothstep(0.03, 0, d)`、`glow = exp(−5.5d)·0.55 + exp(−1.6d)·0.12`、色 ×(core·1.4 + glow) + 白×core·0.55。加算合成。
- 路面反射: 同じ板を y = −0.8 を軸に `0.7` 倍の位置へ上下反転して置き、縦 2.4 倍に伸ばす。コアを太く弱く(`smoothstep(0.09,0,d)·0.55`)、`sin(46v + 1.3t + 1.5 sin(9u + t))` の波紋、下ほど薄く。
- 1 枚(青緑の横棒)だけ `floor(t·24)` のハッシュで 7% の確率で 0.25、5% で 0.7 に落ちるフリッカー。
- 視差: ポインタ位置で カメラ x ±0.45、y ±0.3 を 0.06 で追従し、(0,0,−30) を注視。
2. ブラー(解像度 ×0.25): 9 タップのガウス(0.227 / 0.316 / 0.070)を横縦 2 周。ブルームと結露のぼけの両方に使う。
3. ガラスパス(全画面)
- 座標は `p = (u·aspect, v)`。
- 静止滴 `staticDrops(p, grid, seed)`: 3×3 近傍セル、セルごとに hash で中心 ±0.36、半径 0.07〜0.20。`life = fract(h·9.7 + t·0.012(0.5+h))` で生まれて消える。法線 `(f−c)/r·mask`。PC は grid 18 と 34 の 2 層、スマホは 1 層。
- 流れ滴 `fallingDrops(p, cols, seed)`: 列ごとに速度 0.14〜0.36、`y = fract(h − t·speed)`。楕円(幅 0.16 高さ 0.26、下側をやや伸ばす)。上方 0.5 以内に `exp(−2.6·above)` で減る跡と、26 分割のセルで小さなビーズを置く。跡は結露を拭った扱い(clear)。PC は cols 9 と 15 の 2 層。
- 合成: `n` = 各層の法線を重み 0.9/0.5/1.0/0.7 で加算。`ruv = uv + n·0.028`。`sharp = bg(ruv) + blur·0.75`(ブルーム)。`fog = blur·0.7 + 0.012`(結露)。`clear = max(指の跡, 滴の跡, 文字)`。`col = mix(fog, sharp, clear)` の上に滴 `inDrop = bg(ruv)·1.15 + blur(ruv)·0.55`。
- 結露の文字(マスクは画面の 2 倍解像度の 2D canvas): 内側は透明なガラス。`inside = bg(uv − g·0.03)·1.6 + blur·0.32 + (0.012,0.014,0.02)` を彩度 1.25 倍にし、上下左右 1px と中心(重み 2)の 6 タップで均したマスク `textS` で `mix(col, inside, textS)`。滴と結露は文字の内側で消す。灰色で塗らない。
- 水の盛り上がり: 約 3px 幅(PC 2.6px / 幅 900px 未満 1.5px)の中心差分の勾配 `g` から縁 `edge = clamp(|g|·2)`。縁で `bg(uv + g·0.05)·1.3` を 60% 混ぜて屈折させ、法線 `(−3g, 1)` の鏡面(光 (−0.45, 0.8, 0.4)、指数 10)を (0.85,0.88,0.95) で足し、縁の地に (0.035,0.04,0.05) を乗せ、光と反対側を最大 35% 暗くする。一様な白い縁取りは付けない。
- 垂れ: 7px 幅の列のうち `hash > 0.985` の列だけ(見出し1本につき 2〜3 本)。12 段で上方の文字マスクを探し、文字の下端から長さ 0.05〜0.12、幅約 2px(`smoothstep(1.3, 0.3, 列中心からの px)`)の透明な筋と先端のビーズ。筋は `bg(uv + (0.004, 0))·1.4` を 85% 混ぜ、左側にだけ細いハイライト(筋 0.06、ビーズ 0.22)。
- 周辺減光 0.84 + 0.16·v。最後に `linearToOutputTexel` で sRGB 出力(RT は線形)。

指の跡と文字
- 跡: 画面の 1/2 解像度の 2D canvas。`pointermove` の点を 4px 間隔で補間し、半径 17px(スマホ 22px)の放射状グラデーションを描く。4 フレームごとに `destination-out` で 1.2% ずつ消し、60 秒で全消去。`CanvasTexture` として渡す。
- 文字: 画面と同じ解像度の 2D canvas。`.cond` 要素(h1/h2 の span。CSS は `color: transparent`)の `getBoundingClientRect` と computedStyle のフォントで同じ位置に `fillText`。スクロールで再描画。表示域に入ったら(閾値 0.4)左から右へ 1.4 秒かけて拭われる(矩形クリップ + 60px のグラデーションで `destination-out`)。hero は 0.5 秒遅らせる。

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --void | #07080C | ページ地、読み込み前と WebGL 不可時の地 |
| --glass | #15181F | 結露の曇りの基準色(シェーダーでは blur·0.7 + 0.012) |
| --text | #F2F3F5 | 本文とラベル罫と時計 |
| --mute | #8C919B | 英字ラベルとヒントとフッター |
| --line | rgba(242,243,245,.14) | フッター罫 |
| --magenta | #FF2EA6 | 看板 4 枚、唯一の塗りボタン |
| --teal | #19E3D1 | 看板 2 枚 |
| blue | #3DB9FF | 看板 2 枚(補助) |
| nogl backdrop | #1A1424 → #0B0D14 → #07080C | WebGL2 不可時の放射グラデーション地 |
| button ink | #14060E | マゼンタのボタン上の文字 |
| condensation text | 透明(bg·1.6 + blur·0.32、彩度 1.25) | 拭った文字の内側。ガラス越しのネオンがそのまま見える |

## Typography
- Noto Sans JP。見出し 700(結露の字形として拭うため太い)、本文 300。
- h1 `clamp(76px,13vw,190px)` 行間 1 字間 .02em、1 行固定。h2 `clamp(34px,4.6vw,64px)` 行間 1。
- 本文 `clamp(16px,1.3vw,19px)` 行間 1.9、最大 30 字。
- ラベル・時計は Geist Mono 400。ラベル 11px 字間 .14em 大文字(日本語は大文字化なし、字間 .12em)。時計 `clamp(28px,3vw,44px)` 字間 −.02em、tabular-nums。
- スマホ: h1 `clamp(60px,18vw,100px)`、h2 `clamp(28px,8vw,40px)`、本文 15px、時計 26px。

## Spacing & Layout
- 各セクション `min-height:100svh`、縦中央で左寄せ。内側余白 `12vh 7vw`(スマホ `14vh 20px 16vh`、文章は下寄せ)。
- 文章ブロック最大幅 760px。1 画面に見出し 1 本 + 一文(hero は 2 文)。
- ネオン看板は右と上に寄せ、左中央(文章の帯)は写真のぼけだけにする。
- ヘッダー/時計は 28px(スマホ 20px)の固定余白。フッターは右に 200px(スマホ 130px)空ける。
- breakpoint: 640px。

## Motion
- 滴の時間は `uTime + 7`。静止滴は十数秒で入れ替わり、流れ滴は 3〜7 秒で画面を落ちる。
- 結露の跡は 4 フレームごとに 1.2% 消え、約 8 秒で曇りが戻る。
- 文字の拭い: 1.4 秒、`1 − (1−e)³`。
- 看板のフリッカーは 1 枚だけ。視差は 0.06 の線形補間。
- `prefers-reduced-motion`: 時間を固定(滴は静止画)、文字は即時表示、跡は消えない、視差とフリッカーなし。描画はポインタ/スクロール時だけ。
- WebGL2 不可: canvas を隠し、暗い放射グラデーション地で文章を白で表示。左下に一行で案内。

## Components
- hero: ラベル(雨の窓 — 終電のあと)+ h1「雨の都市」(結露)+ 2 文 + 縦罫つきヒント「ガラスを指でなぞると、結露が消える」。ヒントはポインタ移動か 40px スクロールで消える。
- section: 番号ラベル(01 — ガラス … 05 — 朝まで)+ h2(結露)+ 一文。
- clock: 右下固定。`Rain` ラベルと `mm:ss`(開いてからの経過時間)。
- button: マゼンタ塗り、角丸 6px、`16px 28px`、濃い文字 #14060E 15px 字間 .08em、右に小さな山形。hover で明度 1.1 と 1px 浮く。focus-visible は青緑 2px の outline。
- footer: 上罫 1 本、左に 2 行 `VALE / EDGE 007` と `Rain City — demo`。

## Do / Don't
Do
- 彩度は看板とボタンのマゼンタ/青緑だけ。地と文字は無彩色。
- 滴の屈折は法線で背景 UV をずらす。滴の中は明るく、外は結露で暗く。この明暗差が主役。
- 見出しは太いウェイトで。細い字形は拭った跡として読めない。
- 看板は文章の帯を避けて置く。
Don't
- 看板に文字を描かない(画像にも入れない)。形だけで看板と分からせる。
- 雨の線(斜めの白い筋)を足さない。ガラスの上の滴だけ。
- 紫一色のグラデーション地にしない。暗い写真の奥行きを保つ。
- 文章を増やさない。1 画面に見出し 1 本 + 一文。

## References
- Rarible: 近黒の地に蛍光の 1 色だけを行動色として置き、UI 文字はモノスペースで端末らしさを出す、という配色と書体の役割分担を抽象化した。ライムはマゼンタに置き換え、密なデータ表は捨てて、モノスペースはラベルと時計だけに残した。
- Studio Oker: 黒い部屋に白い文字が浮かび、余白を広く取って 1 画面に 1 つだけ見せる、という静かなリズムを抽象化した。細い白文字は結露に書いた太い字形に置き換え、赤 1 点の句読点は看板のマゼンタに対応させた。