# 永久凍土 — Style Reference
> 白い紙の上に置かれた一枚の氷。文字はその下で揺れている

**Theme:** light  **Series:** EDGE 009  **World:** 氷と結晶(屈折と亀裂と霜)。永久凍土は2年以上0度以下のまま保たれた地面

## Concept
開いた瞬間に伝えること: 「文章が氷の下にある」。白地の中央に、縁を残して一枚の氷の板を置く。板の下の見出し「永久凍土」は屈折で揺れ、気泡の多い部分では白く濁る。クリックで板にボロノイの亀裂が走り、クリック点から外へ順に欠片が落ちて、見出しが素のまま現れる。霜は画面の四辺から結晶として伸び、右上の数字がその被覆率を示す。配色は白と氷青だけ、線は黒のヘアライン。Swiss 系の帳簿のような静けさの上に、氷の物理だけが動く。

## Signature Technique
- 氷(Three.js 0.170 + 自前 ShaderMaterial): 板はボロノイ分割した多角形ごとの ExtrudeGeometry(depth 0.42, bevel 0.09/0.08, bevelSegments 4)。42 セル(モバイル 26)、シードは格子ジッタ、セルは全シードとの垂直二等分線で矩形を半平面クリップして求める(O(n²)、初回のみ)。
- 屈折: 板を外した背景(見出しを描いた平面, z=−1.2)を WebGLRenderTarget に描き(dirty 時のみ)、氷のフラグメントが `suv + off` でサンプルする。`off = −n.xy · 0.012 · thick`、thick は正面 1.0 / ベベルと側面 2.4。R/G/B を ×0.985 / 1.0 / 1.015 でずらす色収差。振幅は「読めるが揺れている」範囲に留める。
- 表面の起伏: 氷の接写写真(assets/ice.webp)の輝度差分(オフセット 0.02)×0.12 と、`0.018·(sin(1.1y+0.5t), cos(0.9x+0.4t))` の低周波の揺れ。
- 厚みと深さ: 板の下端ほど青くする `tint = mix(mix(#3d73ad, #9fc5e8, smoothstep(0,.45,ty)), #f0f8ff, smoothstep(.3,1,ty))`、さらに下端へ `0.22·(1−ty)^1.6` だけ深い青を混ぜる。側面・ベベルは `mix(#3d73ad, #9fc5e8, ty)×0.9` の中実の氷に寄せ、側面全体を #80a8cf へ 55% 寄せる。
- 内部の層(視差): 3 層(深さ 0.35 / 0.8 / 1.25)で、サンプル座標を `vWp.xy + V.xy·depth·1.6` と視線方向でずらす。各層で写真の輝度 `smoothstep(0.86,0.98)` を気泡、F2−F1 のセルラーノイズ(`smoothstep(0.028,0,e)`)を白い亀裂として加算。カメラ位置と欠片の回転で層がずれて見える。
- 反射帯: 斜め −0.42 rad の方向に幅 0.26 と 0.12 の細長いガウス帯を 2 本、`sin(0.07t)` / `cos(0.05t)` でゆっくり往復。正面だけに乗せる。
- 縁: 板の外周までの距離 d(ワールド座標)から、`smoothstep(0.16,0.04,d)` と `1−front` で明るいベベル、外周からさらに 0.08 外側を基準 dO にし、`1−smoothstep(0,0.022,dO)` で暗い稜線(#335c8a)。
- 反射: フレネル `0.018 + 0.982(1−n·v)^5`(ior 1.31 相当)、空は `mix(氷青, 白, smoothstep(−0.3,0.5,d.y))` + 1 灯の鋭いハイライト、Blinn-Phong pow 120。
- 破砕: クリック点を板座標に変換し、各欠片に `delay = 0.45 + 距離·0.07`。速度は外向き 1.2 + 上向き 0.6 + 手前 1.5〜3.0、角速度 ±1.5 rad/s、重力 14 m/s²。亀裂線(LineSegments, z=0.26)は 0〜0.35s で現れ 0.6〜1.4s で消える。「凍らせ直す」で home 位置に戻す。
- 背景平面: 2048px(モバイル 1024px)の canvas。白→#eaf2f8 の縦グラデーション、見出し Zen Kaku Gothic New 300 / 幅の 13%、副題 1 行。板の矩形に `shadowBlur w·0.03, offsetY w·0.012, rgba(30,60,95,.22)` の影を落とし、板の内側はグラデーションで塗り戻す(破砕後は影なしの版に差し替え)。
- 面取り: 板の外周 0.16 を氷青の帯にし、光源(左上)を向く上辺と左辺は帯の中に白い線(幅 0.025)を強く、右辺と下辺は abyss に沈める。帯の内側にもう一本、白の細線を引いて板の厚みを見せる。
- 霜(Canvas2D): 四隅から中央へ向かう「枝」の成長モデル。出発点は四隅寄り(距離は rand^1.6)、初期角度は中央向き ±0.55 rad。tip = {x, y, 角度, 寿命, 線幅 3.6, 世代}。1 ステップ 2.2〜4.4px 前進、角度 ±0.09 rad の揺らぎ、確率 0.15 で ±60° の側枝(線幅 ×0.78・最小 1.2、寿命 ×0.45〜0.75、6 世代まで)。6px グリッドで占有を数え、3 本以上ある升に入ると止まる。乱数は `Math.imul` の LCG、種は読み込み時刻。ヒーローは rgba(140,176,204)、上限 9000 本(モバイル 4500)、読み込み時に 30% まで先行、以後 1 フレーム 1 ステップ。デモは #0e4f7a で上限 9000 本。被覆率 = 描いた本数 / 上限。
- ボロノイ図(セクション01): 同じ半平面クリップを Canvas2D で毎フレーム再計算(30 点)。ポインタに最も近い点が追従(lerp 0.5)する。各セルは深い水(#1d5f8c→#0a3352)の上に浮かぶ氷片として描く: 種点へ 0.955 倍に縮めて隙間に水を見せ、左上→右下の氷青グラデ(セルごとに明度を揺らす)、落ち影 6px、縁から 14% 内側までの面取りを辺ごとに光源(左上)との向きで白/青に塗り分け、白 1px の輪郭。選択中のセルは 0.9 倍に縮んで浮く。
- 薄い氷(セクション03): CSS だけ。`::after` に氷写真 opacity .72 + `backdrop-filter: blur(7px)`、hover / focus-within で 1.3s かけて 0 へ。読み込み 0.5s 後に一度だけ左側が自動で溶ける: `::after` に `mask-image: radial-gradient(ellipse var(--melt) calc(var(--melt)·1.35) at 18% 52%, transparent 70%, rgba(0,0,0,.55) 86%, #000)` を掛け、`@property --melt` を 0% → 46% へ 2.4s で広げる。溶けた左半分は文字がくっきり、右半分は氷越しに淡く見え、静止画でも「氷の下に文章がある」ことが伝わる。

## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| --white | #ffffff | ヒーロー地、カード面 |
| --snow | #f4f8fb | ページ地 |
| --glacier | #dbe7f0 | 霜デモの地、冷たい面 |
| --ice | #a9c9df | 氷の縁の反射色(空の下端) |
| deep ice | #9fc5e8 | 板の側面の氷の色 |
| abyss | #3d73ad | 板の下端の深い青(下 45% で deep ice から沈む)と、右・下の面取りの影 |
| ridge | #335c8a | 板の外周の暗い稜線 |
| --deep | #0e4f7a | 唯一の濃色。塗りボタン 1 個、デモの霜、ボロノイの選択点 |
| --ink | #0f1419 | 本文とヘアラインと亀裂線 |
| --smoke | #5c6670 | ラベル、補足文 |
| frost | rgb(158,190,214) | ヒーローの霜 |

## Typography
- 日本語: Zen Kaku Gothic New。見出しは 300、字間 −0.025em。h2 clamp(30px, 3.6vw, 50px) / 1.2。本文 400 / 15px / 1.9 / 字間 0.01em。`<strong>` は 500 で色だけ ink。
- ラベル・数字: IBM Plex Mono 400/500、12px、字間 0.14em、大文字。被覆率の数字は clamp(24px, 2.6vw, 34px) / tabular-nums。
- 階層は太さを使わず、サイズと色(ink / smoke / deep)で作る。

## Spacing & Layout
- 最大幅 1200px、ガター clamp(20px, 4vw, 56px)。セクション上下 clamp(88px, 13vh, 150px)。各セクション上端にガター内側の黒ヘアライン。
- ヒーロー: 100svh(最小 600px)。板は可視幅の 84%(左右 8%、上下 8%×アスペクト比のマージン)。上部 clamp(68px, 9vh, 96px) に 1 本の罫。左下にラベル + 1 文、右下に ior と分割数。
- 2 カラム grid 5fr/7fr、gap clamp(32px, 6vw, 96px)。860px 以下で 1 カラム。
- パネル: 1px 黒枠と角丸 4px で、影は付けない。16/10(モバイル 4/5)。
- ボタン: 1px 枠、角丸 4px、10px × 18px、Plex Mono 13px。塗りは --deep の 1 個だけ。
- breakpoints: 860px(グリッド)、720px(ヒーロー右下ラベル非表示)、640px(モバイル判定)。

## Motion
- 氷の揺れ: 低周波 sin/cos、速度 0.4〜0.5 rad/s。見出しが読める範囲(ズレ ≤ 1.2% + 色収差 1.5%)に抑える。反射帯は 0.05〜0.07 rad/s で往復。
- 破砕: 亀裂 0.35s → 欠片が距離順に落下(最長 1.2s 遅れ)→ 約 2s で画面外。重力 14。
- 霜: 読み込み時 30% から 1 フレーム 1 ステップで成長、上限で停止。再凍結でリセット。
- ボロノイ: 入力があったフレームだけ再描画。
- rAF は 1 本。ヒーローと霜デモは IntersectionObserver で画面内の時だけ、`document.hidden` で停止。
- prefers-reduced-motion: 氷の揺れ・反射帯 0、霜は読み込み時に 60% まで一括で描いて静止、破砕はクリックで欠片を即座に非表示、ホバー遷移なし(03 の溶けた部分は最初から開いた状態)。
- WebGL 不可: `.no-webgl` で見出しを HTML(300 / clamp(56px, 12vw, 170px))として表示。

## Components
- hero: WebGL canvas + 霜 canvas(pointer-events none)+ 罫 + 左下コピー + 右下ラベル。h1 は視覚的に隠す。
- meter: 右上固定、`Frost` ラベルと被覆率。
- section: ヘアライン + mono ラベル(番号 / 英語)+ h2(300)+ 1〜2 文。右にパネル 1 つ。
- panel.vor / panel.frost: 1px 枠、左上か右上に小さなラベル / ボタン。
- icecard: 1px 枠カード。ラベル行 / h3(300)/ 本文 / ヘアライン / メタ行。`::after` が氷の層。
- footer: ヘアライン上、左に `VALE / EDGE 009`、右に作品名。

## Do / Don't
Do
- 濃い色は --deep の 1 個だけ。残りは白・氷青・黒の線。
- 氷の下の文字は読める範囲で揺らす。ズレより「濁り」で氷らしさを出す。
- 影は板の下の 1 つだけ。ほかの要素は平ら。
- 欠片はクリック点から順に落とす(同時に落とさない)。
- 霜は四隅から中央へ。中央には生やさない。

Don't
- 紫・グラデーションの帯・光る球を足さない。
- 板を画面いっぱいにしない(縁を残して「板」と分かるように)。
- 氷に彩度の高い青を入れない(青は薄く、白が主)。
- ボタンを増やさない。塗りボタンは「凍らせ直す」だけ。
- 本文を氷の下に長く書かない(見出し 1 本 + 1 行まで)。

## References
- AIUC(Alpine underwriting ledger): 「白地に黒のヘアライン、ウェイト 300 の見出し、セミモノのラベル、角丸 4px の平らな部品」という帳簿の静けさを取り入れた。写真 1 枚を唯一の色面にする考え方は、氷の板そのものに置き換えた。
- Mailchimp(Vintage press meets electric yellow): 「ほぼ単色のページに 1 個だけ強い色のボタン」という構成を取り入れ、黄色を濃い氷青 #0e4f7a に替えた。帯状に切り替わるセクション背景は使わず、白と雪色の 2 段だけにした。