# マグマ — Style Reference
> 黒曜石の地殻が割れ、割れ目から白熱の溶岩が光る。カーソルで割ると光が漏れ、火の粉が上る。

**Theme:** dark  **Series:** EDGE 010  **World:** 火山。溶岩と黒曜石と火の粉。

## Concept
画面全体が黒い地殻。ボロノイの境界が割れ目で、その下に温度で色が決まる溶岩が流れている。カーソル(指)の周りで地殻が開き、下の光が漏れる。熱のゆらぎが画面全体を屈折させ、火の粉が割れ目から上へ舞う。
スクロールで温度が変わる。冒頭は暗い橙、途中で白熱に近づき、火の粉が最も多くなり、最後は冷えて暗赤色の筋だけが残り、黒曜石の反射が立つ。
文字は白、見出し「マグマ」だけ黒曜石のテクスチャをクリップした質感。色は黒と白熱の橙だけ。

## Signature Technique
- レンダリング: 生 WebGL1。全画面 1 枚の三角形の fragment shader + 火の粉の GPGPU(72×72、スマホ 48×48)。解像度 DPR 1.5(PC)/ 1(スマホ)。
- 熱のゆらぎ: 画面座標 q を `fbm(q*5 - t*0.7)` 2 系統で `(0.0025 + 0.012*heat)` だけ屈折させてから全てを計算する。上昇方向に流す。
- 割れ目: `qc = q + (fbm(q*5)-0.5)*0.11` でぎざぎざにした座標でボロノイ(2.6 倍)を取り、最近傍セル境界までの距離 `edge` を得る(3×3 で最近傍、5×5 で境界距離)。幅 `w = ((0.003 + 0.03*open*(0.5+0.5*id) + 0.01*open*breath)*m + 0.002*open + 0.055*exp(-22*|q-mouse|²))*along`。`m = smoothstep(0.3,0.7,fbm(q*1.1))` で割れている地域を限定、`along = 0.6 + 0.8*fbm(qc*9)` で幅を線に沿って変える。`crack = 1 - smoothstep(w/2, w, edge)`。
- 溶岩の色: 黒体放射の近似 `bb(t)`: 黒 → #660500(0.22)→ #FF3805(0.48)→ #FF9E24(0.74)→ #FFF2C7(1.0)。温度 `temp = (0.3 + 0.5*fbm(q*2.4 + 流れ) + 0.2*fbm(q*7)) * heat`、割れ目の中心ほど +0.2、カーソル周りで +0.15。さらに割れ目の芯は `max(temp, 0.5 + 0.22*core)` で下限を持たせ、地殻が冷えた黒曜石の節でも芯が橙に光り続ける。冷えたガラスには割れ目の光を +0.3*(glass-0.5) 余分に映す。太陽の鏡面は指数 56 に絞って白いにじみを抑える。`detail` の低い所を暗くして溶けた表面に浮く黒い皮を出す。
- 地殻: 黒曜石テクスチャ(`assets/obsidian.webp` 1024px)の輝度差分で法線を作り、固定光のスペキュラ(56 乗、係数 0.7)とフレネル(3 乗、0.35)を `glass` で足す。カーソルを光源にした鋭いスペキュラ(60 乗)。割れ目からの光 `exp(-edge/(1.8w))*0.7` を溶岩色で地殻に乗せ、縁に細い明るいリム。
- 火の粉: 状態テクスチャ(x, y, 寿命, 種)。死んでいる粒子は毎フレーム `rate` の確率で画面内の乱数点を試し、そこが割れ目(crack>0.6)なら発生。生きている粒子は上向き `0.06 + 0.16*seed` + fbm の乱流 ±0.2 で動き、寿命 `0.25 + 0.45*seed`/秒で減る。描画は POINTS、加算ブレンド、寿命で橙 → 白へ。
- スクロール: `open = 0.22 + 0.65*s(0.08,0.45) - 0.5*s(0.62,0.88)`、`heat = 0.55 + 0.4*s(0.18,0.5) - 0.6*s(0.6,0.9)`、`glass = 0.5 + 0.9*s(0.55,0.85)`、火の粉の発生率 `0.004 + 0.05*s(0.3,0.6)` × heat × (open+0.2)。
- 待機: 3.5 秒ポインタが無いと割れ点が画面中央右をゆっくり回る(静止画でも割れ目が光る)。
- 見出し: `background: url(obsidian) / background-clip: text`、`-webkit-text-stroke 1px rgba(255,170,90,.45)`、`filter: brightness(1.75) contrast(1.15) drop-shadow(橙)`。

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --void | #0B0C0E | ページ地、フッター |
| --text | #F2F0EC | 見出し(h2)と罫 |
| body | #D8D5CF | 本文 |
| --mute | #8A8C90 | ラベル、ヒント |
| --ember | #FF7A1A | focus ring。溶岩の中間色 #FF3805〜#FF9E24 の代表 |
| --white-hot | #FFE9C2 | 最高温の溶岩、ボタン hover |
| crust | テクスチャ×0.42 + #050506 | 黒曜石の地殻 |
| cooled | #660500 | 冷えた割れ目 |
| button | #F2F2F2 | CTA 塗り(白寄りのピル) |

## Typography
- 見出し: Zen Kaku Gothic New 900。h1 `clamp(96px,17vw,260px)` 行間 .95 字間 -.04em、黒曜石クリップ。h2 700 `clamp(34px,4.6vw,64px)` 行間 1.2 字間 -.02em。
- 本文: Zen Kaku Gothic New 400、`clamp(16px,1.3vw,19px)`、行間 1.9、最大 30 字、`text-shadow 0 2px 24px rgba(0,0,0,.65)`。
- ラベル: Inter 500、11px、字間 .16em、大文字。日本語ラベルは Zen Kaku、.14em。
- スマホ: h1 `clamp(84px,26vw,130px)`、h2 `clamp(30px,8.4vw,42px)`、本文 15px。

## Spacing & Layout
- 各セクション 100svh。縦中央で左寄せ。余白 `16vh 7vw 12vh`、文章ブロック最大 720px。先頭に 36px の白い罫(50%)。
- ヘッダー固定、左 VALE、右 Edge 010 — Volcano。フッターは罫線 + 黒 70% の地。
- breakpoint 720px 以下: 余白 `14vh 20px 10vh`。

## Motion
- RAF 1 本。火の粉の更新 → 本体 → 火の粉の描画。タブ非表示で停止。
- 溶岩の流れは `t*0.06 / -t*0.11`、熱のゆらぎは `t*0.7〜0.9` の上昇。割れ目は `sin(t*0.6)` で呼吸。
- カーソルは 0.1 の線形補間で追従。
- `prefers-reduced-motion`: 時間を 20 秒で固定、火の粉を止め、スクロールかカーソル移動があった時だけ再描画。
- WebGL 不可: canvas を隠し、暗赤の放射グラデーション地と白い文字。本文末尾に 1 行で案内。

## Components
- hero: 日本語ラベル + h1「マグマ」(黒曜石)+ 一文 + 操作ヒント(カーソルが動くと消える。タッチ端末は「指で地殻を割る」)。
- section: ラベル(01 — Crack …)+ h2(1 文)+ 本文(1〜2 文)。h2 は読点で改行を固定(「冷えると、/ガラスになる。」)。本文はスマホだけ句点で改行(`br.sp`)。
- button: 白いピル、`16px 26px`、14px 700 字間 .1em、右に 22px の罫。hover で白熱色。focus-visible は橙 3px の outline。
- footer: 左 `VALE / EDGE 010`、右 `Magma — Crust, Heat, Glass`。

## Do / Don't
Do
- 色は黒と橙だけ。白は文字と最高温にだけ使う。
- 割れ目は幅を変え、ぎざぎざにする。均一な線にしない。
- 溶岩の中に黒い皮を浮かせる。塗りつぶしの橙にしない。
- 火の粉は小さく少なく。線香花火の粒。
Don't
- 紫や青を足さない。
- 火山の絵や煙の画像を置かない。
- 割れ目を画面全体に均一に開かない。割れている地域を限る。
- 文字を増やさない。1 画面に見出し 1 本と 1〜2 文。

## References
- Default: 黒に近い地にヘアラインとピル型の白い CTA、色は 1 色だけ、という配分を抽象化した。青を橙に、カードを全面のシェーダーに置き換えた。
- Healthy Together: 濃い地に詰めた巨大見出し(Inter 700 -.05em)と、1 本の有機的なリボンで画面に動きを入れる考え方を抽象化した。リボンは割れ目の光に、見出しは Zen Kaku Gothic New 900 の黒曜石クリップにした。