# 鏡よ鏡 — Style Reference
> 画面全体が黒い鏡。触れた場所だけ波打ち、鏡文字が正位置に揃う

**Theme:** dark  **Series:** FABLE 007  **World:** グリム童話『白雪姫』。魔法の鏡、半分だけ毒のりんご、森の家の七人。

## Concept
鏡の前で読む絵本。ヒーローは画面全体が1枚の鏡で、鏡に映った「鏡よ鏡」と問いの一文が、鏡文字から正位置へ折り返して揃う。カーソルや指が触れた場所だけ鏡面が波打ち(波動方程式)、縁は銀の曇りで黒ずむ。四隅にロココの銀の枠の写真を screen 合成で置き、中央は黒い余白。
下の区画は黒地に細身の明朝だけ。「答え」は鏡文字が揃う CSS transform のトゥイーンと床への反射、「りんご」は Gray-Scott 反応拡散が赤を毒の色に侵食する GPU シミュレーション、「七人」は七つの語が七段階の大きさにスクロールで収まる。色は銀と黒、赤はりんごの実体色として一点だけ。
開いた瞬間に伝えること: 「これは白雪姫の絵本で、画面が鏡である」。

## Signature Technique
1. **鏡(WebGL2、高さ場の波動方程式 + 反射シェーダー)**
   - ping-pong の RG16F テクスチャ。グリッドはキャンバスの縦横比に合わせる(長辺 288、モバイル 160)。
   - 1フレーム1ステップ: `lap = l+r+u+d-4h; v = (v + lap*.42)*.986; h = (h + v)*.997`。縁 6% は smoothstep で減衰させ、枠で波が死ぬようにする。
   - 入力: pointermove で移動量 d>2px のとき、振幅 `min(.9, d*.02)`、半径 .012 のガウス山を足す。pointerdown は振幅 2.2 半径 .022。読み込み 1.1s 後に (.64,.3) へ振幅 .35 の一滴。以後 2〜3.5s ごとにランダムな位置へ振幅 .22〜.42 半径 .009 の小さな波紋が自動で走る。
   - 静止時にも鏡と分かる要素: 壁の反射は上が明るい勾配(.075〜.15)、`ra.x*.55+ra.y*.8` 方向に 2 本の窓明かりの帯が横切る。位置は `mod(t*.045+.75, 2.6)-1.3` と `mod(t*.031+1.9, 2.6)-1.3`(周期 58s / 84s、どの瞬間も少なくとも 1 本がガラス上にある)。帯1は芯 `exp(-(7x)²)*.34` +裾 `exp(-(1.9x)²)*.11`、帯2は細い芯 `exp(-(12x)²)*.16` +裾 .05。鏡に映る文字も帯の下で `content*(1+band*2.2)` と光る。見出しは (+.045em, -.06em) ずらした 14% の二重像(ガラス表面の反射)を持つ。4〜8s ごとに「息」が吹きかかる: `uBreath(x,y,s,r)` のガウス状の曇りが 1.4s で広がり 3.2s で消える。
   - 表示: 法線 `n = normalize((hl-hr)*18, (hd-hu)*18, 1)`。内容テクスチャを `uv + n.xy*.045` で屈折サンプル。反射は暗い壁(.035)+左上の冷たい光、スペキュラ `pow(n·H, 90)*.9`。曇りは `fbm(uv*3.1)` と縁距離の合成 `smoothstep(.35,1., ed*.65 + t*.55)` で銀灰 (.52,.55,.58) へ混ぜる。周辺減光と粒状ノイズ ±.012。
   - 鏡文字→正位置: 内容の x 座標を `cx = mix(1-u, u, k)` で折り返し、`fold = |2k-1|` で幅を `(cx-.5)/fold+.5` と伸縮させる。k は 1.4s 待って 1.7s の easeInOutQuad。文字は幅ゼロを通って裏返る。
   - 内容は 2D canvas(Zen Old Mincho 400、`min(W*.19, H*.3, 220)px`、字間 .14em、下に問い 1 行)を `texImage2D` で渡す。フォント読込後に再描画。
2. **答え(鏡文字が揃う)**: h2 の `.line` を `scaleX(-1)`、opacity .35、blur 1.5px から、区画が 50% 見えたら `scaleX(1)`、1.6s `cubic-bezier(.7,0,.2,1)`。同じ行を `scaleY(-1)` で下に置き、opacity .16 + blur + 上向きマスクで床の反射にする。
3. **りんご(Gray-Scott 反応拡散、WebGL2)**
   - 256²(モバイル 160²)の RG16F ping-pong。9 点加重ラプラシアン(隣接 .2、対角 .05、中心 -1)、Du = 1.0 / Dv = .5 / dt = 1。F = .037、k = .06(珊瑚状に成長して広がる)。
   - りんごは SDF: 半径 .68 の円 2 つ(中心 x = ±.24)を smin(k=.3)、上部に半径 .3 の円を滑らかに引いてくぼみ。SDF の外は U=1、V=0 に固定する。
   - RGBA の B チャンネルに「染み」を持つ: `B = max(B, 近傍Bの最大*.985, smoothstep(.12,.3,V))`。毒が通った場所は暗いまま残り、前線の少し先まで滲む。
   - 開始: 読み込み 3s 後に自動。`uInit` で、`x = .5 + .09*noise` のぎざぎざの線より右を、`noise(uv*48) > .56` の斑点だけ U=.5・V=.25(他は U=1・V=0)、全体を B=1 に初期化し(斑点が迷路状の筋に育つ)、220 ステップ(モバイル 120)を一度に進める。以後 8(5)ステップ/フレーム。pointermove でカーソル位置に半径 .012、pointerdown で .03 の種を足す(加速用)。
   - 描画: 法線は SDF の勾配 × `(1 - t²)`(t は内側への深さ)、中央に `sign(x)*.22*exp(-60x²)` の溝、V の勾配で表面を波打たせる。赤 (.62,.05,.08)〜(.82,.12,.1) に fbm の肌、上部にほのかな橙。毒は `max(smoothstep(.08,.5,V), smoothstep(.15,.9,B)*.95)` で (.2,.27,.1)〜(.4,.47,.18) の酸っぱい緑の皮へ、V の模様(smoothstep(.13,.3,V))は (.025,.045,.03) の緑黒の筋になり、侵食の模様が皮の上に読める。V の前線 (.06〜.24、まだ染みていない所だけ) は茶色 (.3,.08,.04) の打ち身。りんごの輪郭は下半分を `x *= 1+.16*max(0,-y-.1)` で絞り、底をすぼめる。スペキュラは毒側で .55→.12 に落とす。
4. **七人**: `li` の `--s` を `1 + (scale-1)*ease(p)` で更新。scale = 3.6 / 2.9 / 2.3 / 1.8 / 1.4 / 1.1 / .85。p は区画上端が画面の 85% に入ってから 90% 分を進む間の進行度、easeInOutQuad。

```glsl
// 鏡文字が揃う(表示シェーダー抜粋)
float cx = mix(1.-cuv.x, cuv.x, uFlip);
float fold = abs(uFlip*2.-1.);
cx = (cx-.5)/max(fold,.02)+.5;
vec3 content = (cx<0.||cx>1.) ? vec3(0.) : texture(uContent, vec2(cx, 1.-cuv.y)).rgb;
```

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --bg | #050607 | 画面全体の地。わずかに青い黒 |
| --bg2 | #0b0d0f | りんご区画の背景(シェーダー内 .02/.023/.027) |
| --fg | #d9dde2 | 見出しと本文の銀白 |
| --silver | #aeb4ba | サブ本文と英字ラベルとボタン枠 |
| --mute | #7d838a | 区画ラベルと脚注とフッター |
| --red | #c0121c | りんごの赤と focus ring。面には使わない |
| mirror text | #dfe3e8 | 鏡に映る文字 |
| tarnish | rgb(.6,.63,.66) ≒ #99A1A8 | 鏡の曇り(シェーダー内の線形値を 18〜48% の明るさで) |
| poison | rgb(.2,.27,.1)〜(.4,.47,.18) ≒ #33451A〜#66782E | 毒の皮(酸っぱい緑)。筋は rgb(.025,.045,.03) ≒ #060B08 |
| bruise | rgb(.3,.08,.04) ≒ #4D140A | 毒の前線の茶 |

## Typography
- 見出し: Zen Old Mincho 400。鏡の中の h1 は canvas 描画 `min(W*.19, H*.3, 220)px`、字間 .14em。h2 `clamp(28px, 3.4vw, 46px)` line-height 1.4、letter-spacing .08em。
- 本文: Zen Kaku Gothic New 300、`clamp(14px, 1.1vw, 16px)`、line-height 1.9、最大幅 30em。脚注 12.5〜13.5px。
- 英字ラベル: Cormorant Garamond 400 italic 15px、letter-spacing .06em、銀。「Fable 007」「Grimm / Snow White」のみ。
- 区画ラベル(答え/りんご/七人): Zen Old Mincho 12px、letter-spacing .3em、--mute。
- 七人のリスト: Zen Old Mincho、`calc(var(--s) * clamp(18px, 2.2vw, 30px))`、行間 1.15。頭の「7」は Cormorant italic .55em。

## Spacing & Layout
- 横余白 `--gx: clamp(20px, 5.5vw, 84px)`。区画は `min-height: 100svh`、上下 `clamp(72px, 12vh, 140px)`、内容幅 1200px、文字ブロック 560px。
- hero は `height: 100svh`(最小 560px)。本文は左下、英字ラベルは右下。枠の写真は `min(46vw, 520px)` を左上と右下に -10vw/-12vw はみ出させ、放射マスクで溶かす。
- りんご区画は 2 列グリッド(文字 / 正方形ステージ `min(100%, 560px)`)、760px 未満で縦積み(ステージ 420px)。
- 締めは `min-height: 70svh` 中央。footer は 1px 罫線と 2 ラベル。
- ヘッダーは absolute(hero の中だけ)。固定にすると下の区画の見出しに重なる。

## Motion
- rAF は 1 本。鏡とりんごはそれぞれ IntersectionObserver で画面外なら描画しない。`visibilitychange` で停止。
- 波紋は触れた場所と、2〜3.5s ごとの小さな自動波紋。減衰 .986/.997 で 2〜3 秒で消える。光の帯と息の曇りが常に動いているので、静止画でも鏡と分かる。
- 鏡文字の折り返しは読み込み 1.4s 後に 1.7s。締めの「聞く」でトップへ戻り、もう一度折り返す。
- 答えの揃いは 1.6s、反射は .05s 遅れ。
- 七人の大きさはスクロール進行に追従(トゥイーンなし、進行度に直結)。
- `prefers-reduced-motion: reduce`: 波紋と折り返しを行わず正位置で静止(息の曇りは固定)、りんごは読み込み時に右半分を初期化して 300 ステップ進めて 1 枚描画、答えは最初から正位置、七人は最終サイズ。
- WebGL2 が無い場合: 鏡とりんごの canvas を消し、hero に大きな「鏡よ鏡」と 1 行の説明を出す。

## Components
- hero: 鏡 canvas、四隅の枠写真(screen 合成)、左下に絵本の説明 1〜2 文、右下に英字ラベル。
- section: 区画ラベル、h2、サブ 1〜2 文。答えだけ反射付き。りんごは右に正方形ステージと操作ヒント(タッチ端末で文言差し替え)。
- list(七人): 7 行、サイズ 7 段階、頭に小さな 7。
- button: 角丸 999px、1px 銀枠、hover で銀白に反転、focus-visible は赤 2px。
- footer: `VALE / FABLE 007` と `設計と実装: VALE`。

## Do / Don't
- Do: 鏡の中の文字は 1 語と 1 行まで。多いと波紋で読めなくなる。
- Do: 自動の波紋は小さく(振幅 .4 以下)。大きくすると水面に見える。
- Do: 赤はりんごだけ。UI に赤を使うと「赤がアクセントの黒いサイト」になる。
- Do: 曇りは縁に寄せ、中央は澄ませる。中央まで曇ると文字が沈む。
- Don't: 紫や青のグラデを足さない。毒の色も緑と緑黒に留める。
- Don't: 反応拡散の拡散係数を上げない(4 点ラプラシアンで Du=1 は発散する)。
- Don't: 枠の写真を四辺に敷き詰めない。角 2 つで足りる。

## References
- Metalab: 「超細身のセリフ見出しが黒の余白で息をし、小さなグロテスクが注釈する」構造を借りた。無彩色で装飾を持たない方針はそのままに、見出しを日本語の明朝にし、唯一の画は鏡そのものにした。
- Promly: 「近黒の地に、発光する 1 色だけを機能的に置く」配色の考え方を借りた。紫の地と青のボタンは使わず、銀と黒の地に赤をりんごの実体色として一点だけ置いた。角丸の写真コラージュの代わりに、金属の枠写真を角に溶かした。