# 黄色い道 — Style Reference
> セピアの平原を竜巻が巻き、スクロールで色が戻って黄色い道がエメラルドの都まで続く。

**Theme:** light  **Series:** FABLE 014  **World:** オズの魔法使い(ボーム)。竜巻、セピアの平原、黄色いれんがの道、緑のガラスの都。

## Concept
開いた瞬間はセピア一色。GPGPU 粒子の竜巻が平原の上で巻いている。下へスクロールすると竜巻は散り、画面に色が戻り(セピア→フルカラーをポストプロセスで補間)、黄色いれんがの道をカメラが進む。道の先に緑のガラスの塔が立つ都があり、最後にそこへ着く。
伝えるのは「色が戻る」一点。文字は左上に 1 ブロックだけ置き、画面の残りを空・平原・道・都に渡す。見出しは細いウェイトで巨大に、ボタンは濃紺のピル。色は黄・緑・空色の三つで、文字は濃紺のインク。

## Signature Technique
- レンダリング: three.js 0.170、全画面 fixed canvas 1 枚。シーンを WebGLRenderTarget(MSAA 4)に描き、全画面クアッドでグレーディングして出す。
- セピア→色: `l = dot(c, (.299,.587,.114))`、`sep = l*(1.05,.93,.74)+(.07,.04,0)` を `mix(sep, c, uColor)`。`uColor = smoothstep(0.07, 0.30, scroll)`。セピア時だけ軽いビネット。
- 竜巻: GPUComputationRenderer で 128×128(スマホ 72×72)の位置テクスチャ(xyz + 寿命)を更新。漏斗の中心は高さと時間で蛇行 `c = base + (sin(y*0.22+t*0.9)*1.3 + sin(t*0.31)*3, 0, cos(y*0.19+t*0.7)*1.1 + cos(t*0.23)*1.5)`。各粒子は接線方向 `11/(0.8+r)` で回り、目標半径 `R = (0.5 + 0.38y + 3.0e^{-0.9y})*(0.6+0.8h)` へ引かれ、毎秒 2.6〜4.6 上昇。寿命切れか y>26 で地面近くに再生成。`uDissolve = smoothstep(0.05, 0.26, scroll)` で外向きに散り、サイズと不透明度が 0 になり、0.85 以上では再生成しない。
- 粒子の描画: THREE.Points、ソフト円、色 (0.46,0.37,0.25)、α 0.42、サイズ 4.2px×DPR を距離で減衰。フォグに溶ける。
- 道: CatmullRomCurve3(8 点、z 4 → -118)に沿う帯メッシュ(520 分割、幅 3.2)。フラグメントで手続きれんが: 行 0.55、列 3 分割、交互に半ずらし、目地 8〜10% を暗く、れんがごとに hash で色と明度を変える。縁を少し暗くしてフォグを掛ける。
- 都: 16 本の塔(円柱か箱、高さ 8〜24)+ 円錐の尖塔。MeshPhysicalMaterial 色 #8DF0BD、transmission 0.9、roughness 0.1、ior 1.5、thickness 1.6、attenuationColor #35D884 / distance 12、emissive #0E6B3A 0.08、clearcoat 1(粗さ 0.08)、envMapIntensity 1.6。塔の内側に点光源 #9CF5C4。足元に淡い緑の円。ガラスの envMap は屋外用に別生成(空のグラデーション+太陽の円+地面色を PMREM に通す)ので、塔の上半分に空が映る。各塔に光る縦長の窓、階ごとの床スラブ(金属寄りの緑 #1F8A55)、箱型の塔は四隅に方立て。尖塔の根元に襟、頂に光る玉。
- 空: 半径 500 の球の内側にグラデーション(頂 #6FC0EE → #BFE3F7 → 地平 #EAF2F6)。Fog は同じ地平色で 40〜170。
- カメラ: fov 42。`travel = smoothstep(0.1, 0.9, scroll)`、曲線上 `t = travel*0.86` の点から横に 0.9、高さ 2.3 で、`t+0.04` の点を見る。ヒーロー(scroll<0.1)は竜巻の方を見る。scroll 0.86〜0.98 で注視点を都(高さ 7)へ補間。位置と注視点はそれぞれ毎フレーム 0.08 で追従。
- 地面: 900×900 の平面にセピアの平原テクスチャ(`assets/plain.webp` 768px)を 70 回繰り返し、色 #D9CBA8 を掛ける。

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --ink | #0B1A2B | 文字とボタン塗りとヘッダー |
| --mute | #5E6B78 | ラベルとヒントとフッター |
| --paper | #FFFEF7 | スマホの文章ブロックの地、フッターの地 |
| --yellow | #F2C230 | 道(れんがの基準色 #EDB829〜#FFD64D)、focus ring |
| --green | #1FA35A | ボタン hover。都は #8DF0BD のガラスに #35D884 の減衰色 |
| --sky | #7EC8F0 | 空の頂は #6FC0EE、中間 #BFE3F7 |
| horizon | #EAF2F6 | 地平とフォグ |
| haze | rgba(250,250,244,.86→0) | PC の文章ブロック背後の霞 |
| mullion | #1F8A55 | 都の床スラブ・方立て・襟(metalness 0.6) |
| sepia | l×(1.05,.93,.74)+(.07,.04,0) | 開始時のグレード |
| ground | #D9CBA8 × テクスチャ | 平原 |

## Typography
- 見出し: Zen Kaku Gothic New 300。h1 `clamp(84px,15vw,220px)` 行間 1、字間 -.02em、1 行固定(nowrap)。h2 `clamp(34px,4.6vw,66px)` 行間 1.25。
- 本文: Zen Kaku Gothic New 400、`clamp(16px,1.3vw,19px)`、行間 1.9、最大 30 字。
- ラベル: Inter 500、11px、字間 .16em、大文字。日本語ラベルは Zen Kaku 400、.14em。
- スマホ: h1 `clamp(64px,20vw,120px)`、h2 `clamp(26px,7.4vw,40px)`、本文 15px。

## Spacing & Layout
- 各セクション 100svh、文章ブロックは左上(`padding: 16vh 7vw 12vh`、最大幅 820px)。PC は top 11vh で sticky にして空の帯に留め、背後に生成りの放射状の霞を敷く。ヒーローと締めだけ縦中央。
- ブロックの先頭に 28px の短い罫(濃紺 50%)。
- ヘッダーは固定、左 VALE、右 Fable 014 — Oz。フッターは上罫線と紙色 82% の地。
- breakpoint 720px 以下: 余白 `14vh 20px 10vh`。文章ブロックに紙色 74% + blur 8px の地と 1px の罫を敷く(ヒーローは除く)。

## Motion
- RAF 1 本。竜巻の計算 → シーン描画 → グレード。タブ非表示で停止。
- 色の回復は scroll 0.07→0.30、竜巻の消散は 0.05→0.26、道の移動は 0.1→0.9、都への注視は 0.86→0.98。すべてスクロール位置の関数で、時間依存は竜巻の回転と蛇行だけ。
- `prefers-reduced-motion`: 竜巻の時間を止め(dt=0)、消散だけスクロールで進む。スクロール時だけ再描画。カメラは 0.3 で速く追従。
- WebGL 不可: canvas を隠し、CSS のセピア地と文章だけ。本文末尾に 1 行で案内。

## Components
- hero: 日本語ラベル + h1「黄色い道」+ 一文 + 操作ヒント(4% スクロールで消える)。竜巻が中央左、道と都が右。
- section: 英字ラベル(01 — Color …)+ h2(1 文)+ 本文(1〜2 文)。PC はブロックを top 11vh に sticky にして空の帯に置き、背後に生成りの放射状の霞(中心 86% → 0)を敷いて、地平線や割れた地面に重なっても読めるようにする。スマホは半透明の紙カード。見出しは意味の切れ目に `br.sp`(スマホのみ)を入れ、1〜2 字の折り返しを出さない。締めの h2 は「帰る方法は、/最初から持っている。」と全幅で改行を固定。
- button: 濃紺のピル、`16px 26px`、14px 字間 .1em、右に 22px の罫。hover で緑。focus-visible は黄 3px の outline。
- footer: 左 `VALE / FABLE 014`、右 `The Wonderful Wizard of Oz`。

## Do / Don't
Do
- 色は黄・緑・空色。文字は濃紺 1 色。
- 文章は左上 1 ブロック。画面の残りは空ける。
- セピアは「色が無い状態」として最初だけ。戻った色は鮮やかに。
- 竜巻は粒子で見せる。塗りの円錐にしない。
Don't
- 平原に木や岩や雲などの小物を足さない。
- 道を分岐させない。1 本だけ。
- 都を画面いっぱいにしない。到着しても距離を残す。
- 数字(距離、日数)を置かない。

## References
- Vibrants: 白い地に濃紺のインクで文字とボタンを担わせ、鮮やかな色を「製品」にだけ置く役割分担を抽象化した。ここでは色を 3D の世界(道と都)にだけ置き、UI は濃紺 1 色にした。
- Creative Giants: 細いウェイトの巨大な見出し、ピル型ボタン、余白で見せる構成を抽象化した。クリーム地は空と平原の 3D に置き換え、文字は Zen Kaku Gothic New 300 の日本語にした。