# 三本目のマッチ — Style Reference
> 雪の夜の路地。クリックで擦ったマッチの火が、届く範囲だけを暖色に変える

**Theme:** dark  **Series:** FABLE 012  **World:** マッチ売りの少女(アンデルセン)。大晦日の雪の夜。石畳の路地に3本のマッチ。

## Concept
画面全体が寒色の夜の路地。クリック(タップ)で、その場所にマッチの火がつく。火はフラグメントシェーダーで描き、光の減衰を距離関数で計算して、火の半径内だけ路地の色温度を暖色に変える。同じ半径内にだけ、そのマッチで見える幻(ストーブ、ごちそう、おばあさん)の言葉が浮かぶ。火は7秒で消え、マッチは3本。3本目が消えると「マッチは、もうない。」だけが残る。寒色の中に暖色は火の周りだけ。それ以外の色は使わない。

## Signature Technique
WebGL1 の全画面フラグメントシェーダー1本で、背景・光・火・熱のゆらぎをまとめて描く。

- 背景: 路地の画像を cover でサンプリングし、輝度との混色(0.45)と `vec3(.48,.6,.9) × 0.62` で寒色に落とす。画像は `file://` でもテクスチャにできるよう base64 で埋め込む(54KB)
- 光: `d = |px − L| / (0.5H)`、`att = I × flicker / (1 + 7d²)`。`col = cold + tex × W × att × 2.6 + W × att × 0.05`。W はマッチごとの色温度(1本目 `(1,.55,.22)`、2本目 `(1,.72,.3)`、3本目 `(1,.85,.55)`)。flicker は `0.86 + 0.14 × noise(9t)`
- 火: 火の座標 `d = (px − L)/S`(S = 0.062H)。形 `1 − |(d.x × (1.75 + max(d.y,0) × .6), d.y × .48 − .5)|` に fbm(value noise 4オクターブ、`y − 5t` で上へ流す)を ±0.275 足し、`smoothstep(0, .42)` で輪郭。色は赤 → 橙 → 白を shape で段階的に混ぜ、加算
- 熱のゆらぎ: 火の上方に `heat = exp(−(.25dx² + .02dy²)) × smoothstep(−1, .5, dy) × I` の重みを置き、2つのノイズで uv を最大 0.03 ずらしてから背景をサンプリングする
- 包絡線(JS): 擦った瞬間 0→1.5 (0.25s)、1.5→1 (0.8s)、定常 1、最後の2秒で 1→0。7秒で `left−−`。燃えている間はポインタに追従(lerp、1秒で99.9%)
- 雪: Canvas2D の粒子(desktop 420 / mobile 160)。風は `16 sin(.011y + .6t) + 11 sin(.007x − .35t + φ)`、縦は `vy × r × .6`。火の近くの粒は `I / (1 + d²/R²)` で明るさと色(白 → 暖色)を変える。02区画ではポインタの速度を突風として `exp(−d²/26000) × exp(−Δt/700ms)` で足す
- 幻: 読み込み 1.5 秒後に 1 本目が自動で点く(静止画でも火が写る)。幻の絵(ストーブ / ごちそう / おばあさん、640px の webp 3 枚、縁が黒に落ちる絵)を `mix-blend-mode: screen` + 半径方向の mask(30% → 68%)で火の中心に重ね、容器全体を `mask-image: radial-gradient(circle at L, #000 0.5R, transparent R)`(R = 0.7H × I)で切り抜く。黒い縁は screen で消えるので路地に溶ける。文字の位置は火の 0.12H 下
- 03区画: 本文を2重に置き、上の暖色版だけをポインタ位置の radial mask で見せる(半径 150→360px、mobile 90→220px。下の淡色版は rgba(232,237,244,.24) で、光が当たっていなくても見出しが読める)
- 解像度: desktop は dpr 1、mobile は 0.55倍。rAF 1本、画面外の区画は更新しない

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --night | #070B14 | 地色。青みの黒 |
| --night-2 | #0C1220 | パネル面 |
| --frost | #E8EDF4 | 見出し・本文・ボタン枠 |
| --dim | #7D8899 | ラベルとヒント。注記にも使う |
| --hair | rgba(232,237,244,.12) | 罫線、パネル枠 |
| --ember | #FF8A2A | フォーカスリング。シェーダー内の火の中間色 |
| --flame | #FFC14D | 火の外側(シェーダー内の相当色) |
| --core | #FFF3D0 | 火の芯。幻の大きな言葉 |
| (text warm) | #FFE2B8 / #FFE9C8 | 火の中で読む本文 |

## Typography
- 見出し・本文: Zen Old Mincho 400/500(Google Fonts)。`font-feature-settings: "palt"`
- ラベル・数字: DM Mono 400/500。tracking 0.25em、uppercase、11〜12.5px
- h1 `clamp(40px, 8vw, 112px)` / line-height 1.05 / tracking 0.06em / weight 400(太らせず大きさで支配する)
- h2 `clamp(28px, 3.4vw, 46px)`(2カラム内 `clamp(26px, 2.4vw, 36px)`、03区画 `clamp(26px, 3vw, 40px)`)
- lead `clamp(16px, 1.3vw, 19px)` / line-height 1.9 / 色 #C9D1DC
- 幻の言葉 `clamp(40px, 7vw, 96px)` tracking 0.14em、`text-shadow: 0 0 40px rgba(255,170,70,.5)`
- マッチ残数 `clamp(28px, 3vw, 40px)` mono 500 tabular-nums

## Spacing & Layout
- 基本単位 8px。区画の縦余白 `clamp(96px, 16vh, 180px)`、締め `clamp(120px, 22vh, 240px)`
- gutter `clamp(20px, 4vw, 56px)`、最大幅 1200px
- 01区画 grid 5fr / 7fr、gap `clamp(32px, 6vw, 96px)`、860px以下で1カラム。パネルは 4:3、radius 12px、1px hairline
- 02区画は高さ 88vh(最小 520px)、03区画の内側は最小 60vh
- 区画の境は 1px の hairline のみ。影や面の持ち上げは使わない
- breakpoints: 860px(grid)、640px(h1縮小、残数を右下へ、ヒントを左下へ)

## Motion
- 自走する動きは雪と火だけ。初回のマッチは 1.5 秒後に自動で点き、以後はクリックで 2 本目・3 本目。文字の出入りは透明度のみ(0.6〜1.2s)
- 火の寿命 7s。擦った瞬間だけ 1.5 倍のバーストを入れ、その後 1 に落ち着く
- 火はポインタに追従し、雪は火の近くで暖色になる。02区画ではポインタの速度が突風になる(700ms で減衰)
- reduced-motion: シェーダーの時刻を固定(t = 1.7)し火は静止、雪は初期配置で止める、ポインタ追従は即時。火をつける操作自体は残す
- WebGL不可: `<img>` の路地を寒色フィルタで表示し、見出し・本文・残数はそのまま読める

## Components
- hero: 100svh。層: WebGL scene → 雪 canvas → マッチ棒(3×86px、火の位置から −18°±10° に傾く) → 幻の文字(mask) → 見出し(燃えている間も opacity .86 を保ち、h1 に `0 2px 28px rgba(8,6,10,.92)` の暗い滲み、副文と英字ラベルは #E6DCCF に上げて明るい幻の上でも読める) → 残数(右上、mobile 右下) → ヒント(下中央、mobile 左下) → 「マッチは、もうない。」+ もう一度ボタン
- section 01: 見出し+本文+mono 表(noise / flow / heat / light / life)と、同じシェーダーの近景パネル(火を大きく、I = 0.9)
- section 02: 路地画像を `saturate(.35) brightness(.42)` で暗く敷き、上下を mask で溶かす。雪 canvas は粒を速度方向の短い線(筋)で描き、足元に 3 層の吹き溜まり(sin の重ね合わせ、alpha .08/.14/.26)を塗る。中央寄せの見出しと1文、操作の1行
- section 03: 中央寄せ本文の2重置き(暗い版と暖色版)+ 520px の暖色 glow が追従
- button: pill、1px frost 50% 枠、hover で frost 塗り。focus-visible は ember 2px outline
- footer: hairline の上に mono 11px `VALE / FABLE 012` と作品名

## Do / Don't
Do
- 暖色は火の半径の中だけ。UI には寒色の白と灰だけを使う
- 見出しは weight 400 のまま、サイズで支配する
- 火の位置に幻の文字を従わせる(画面中央に固定しない)
- 寿命・本数は state にまとめ、描画は毎フレーム state から計算する
- mobile は解像度を 0.55 倍に落とし、粒子数を 1/3 にする

Don't
- 紫や緑のアクセントを足さない。火の橙以外の彩度を置かない
- 背景に格子線や幾何学の飾りを置かない
- 火を画像や GIF で貼らない
- 文章を火の外に増やさない(見出し1本+1文まで)
- 火が消えた後に文字を残さない

## References
- iUSPC by Coinshift(Midnight trading floor): 「97%を寒色の無彩に保ち、残り3%の暖色をグロウと信号だけに使う」配分を、路地(寒色)と火(暖色)にそのまま移した。線はシャドウでなく hairline、ボタンはゴースト、ラベルは広いトラッキングの小文字、という骨格も引いた。色は #020617 系の青黒から #070B14 に、書体は Inter から明朝+DM Mono に変えた
- OPX Studio(Dark gallery monolith): 「1ウェイトの書体をサイズだけで巨大化させ、写真を全幅で置く」構成を、weight 400 の明朝と全画面の路地に置き換えた。純黒 #020202 は避けて青みを足し、白1色の規律に火の暖色を1点だけ加えた