# 川上から — Style Reference
> 紙の上半分に墨の見出し、下半分に藍の川。桃が揺れながら流れ、遡ると鬼ヶ島の嵐になる。

**Theme:** light  **Series:** FABLE 015  **World:** 桃太郎(日本昔話)。川を流れる桃と三匹の仲間と鬼ヶ島の嵐。

## Concept
画面を横切る藍の川が主役。木版画のように階調を 4 段に落とした流れのシェーダーで、墨の流線と白い波頭が左へ流れる。桃は唯一の桃色で、浮力のバネと波の傾きに追従して揺れる。
スクロールは川の遡上。流れの位相がスクロールに連動し、桃は川下へ消え、川幅は上流ほど狭まり、紙の色は昼から夕へ移る。犬・猿・雉の三節を過ぎると紙が夜の藍になり、嵐の海(木版画風の画像)が空に現れ、雨の筋が走り、雷が不規則に光る。文字は墨から生成りに変わる。
文章は紙の上半分に 1 ブロックだけ。sticky で区画の上端に留まり、川の上に落ちる間だけ生成り色になる。

## Signature Technique
- レンダリング: 生 WebGL1、全画面 1 枚の三角形のフラグメントシェーダー。解像度は DPR 1.5(PC)/ 1(スマホ)。
- 川の高さ場: `h = fbm(q.x*2.2 + flow, q.y*6 + t*0.15) + 0.18 sin(q.x*14 + flow*5 + q.y*3 + t*1.2)`、嵐では `+ 0.9*storm*fbm(q.x*3.5 + flow*1.6, q.y*7 - t*0.7)`。fbm は value noise 4 オクターブ。`flow = t*0.12 + scroll*3.2`。
- 木版画の階調: 有限差分で法線を取り、光 (-0.45, 0.5, 0.75) との内積を `floor(sh*4)/4` で 4 段に量子化。深藍 #14264F → 藍 #1F3A7B → 浅藍 #5C7BBF の 3 色に割り当て、`sin(q.y*90 + fbm*7)` の細い流線を深藍で重ねる。h が 0.708〜0.724 の細い帯だけ白 #F2F0E6 の波頭(輪は細い線で見せる)。
- 岸: `topY = uTop + 0.025*fbm(x*1.5 + flow*0.3)`、岸線は 2.2px の墨、紙側に淡い藍の滲み。`uTop = 0.56 + 0.1*smoothstep(0.1,0.5,scroll) - 0.2*storm`。
- 桃(2D canvas): 半径 `min(W,H)*0.10`。JS に同じ fbm を実装し、桃の x で水面高さを取り、`vy += (waterY - y)*0.09 - vy*0.14` の浮力バネで上下、傾きは水面の勾配 `clamp(slope*0.09, ±0.35)` にバネ追従。`x = 0.6W - scroll*2.4W - t*7` で川下へ流れる。描画は楕円クリップに産毛テクスチャ(`assets/peach.webp` 512px)+ 放射状の陰影、割れ目、墨の輪郭 R*0.028、葉、水面下は藍 82% で覆い、波打つ白い水際線。
- 嵐: `storm = smoothstep(0.55, 0.72, scroll)`。紙を夜の藍 #121A33 に、川の 3 色を暗く。空に `assets/storm.webp`(1600px、木版画風の海と島)を岸より上に敷き、岸付近で川へ溶かす。
- 雨: x を y*0.28 だけ斜めにずらし、150 列ごとに乱数で速度と位相を変えた `fract(y*(2.5+r*2.5) - t*(1.8+r*1.4))` の筋。列ごとに 50% の確率で存在。
- 雷: JS で 2.8〜7.3 秒おきに flash=1(3 回に 1 回は 0.14〜0.24 秒後に二度目)、`flash *= 0.02^(dt*1.6)` で減衰。シェーダーで空 100% / 川 45% の重みで白へ寄せる。
- 時刻: 紙色を昼 #F8F7F3 → 夕 #F1E7E4(scroll 0.28〜0.55)→ 夜。

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --paper | #F8F7F3 | 紙地(昼)。夕は #F1E7E4、夜は #121A33 |
| --sumi | #1C1B1A | 文字と岸線と桃の輪郭 |
| --mute | #6E6B66 | ラベル、ヒント |
| --ai-deep | #14264F | 川の深い影 |
| --ai | #1E3A7B | 川の中間色、ボタン |
| ai-light | #5C7BBF | 川の明るい面 |
| crest | #F2F0E6 | 波頭と水際線 |
| --momo | #F4A3B5 | 桃(テクスチャの基調)、夜のボタン、focus ring |
| leaf | #4F7A3A | 桃の葉 |
| --night-text | #F3F1EA | 夜と川の上の文字 |

## Typography
- 見出し: Shippori Mincho 400。h1 `clamp(76px,13vw,184px)` 行間 1、字間 .02em、1 行固定。h2 `clamp(34px,4.2vw,60px)` 行間 1.2、`text-wrap:balance`。
- 本文: Zen Kaku Gothic New 400、`clamp(16px,1.3vw,19px)`、行間 1.9、最大 30 字。
- ラベル: Inter 500、11px、字間 .16em、大文字。日本語ラベルは Zen Kaku、.14em。
- スマホ: h1 `clamp(64px,19vw,110px)`、h2 `clamp(30px,8.4vw,42px)`、本文 15px。

## Spacing & Layout
- 各セクション 100svh(犬・猿・雉の三節は 72vh、スマホ 88vh で間を詰める)。文章ブロックは最大幅 780px、`position: sticky; top: 14vh`、左余白 7vw。絵はブロックの右 3vw に絶対配置。ブロックの先頭に 36px の墨の罫。
- 川は画面下 44%(ヒーロー)〜34%(上流)〜64%(嵐)の帯。文章が水面より下に入ったら、ラベル・見出し・本文・絵を要素ごとに生成り #F3F1EA へ切り替える(色の遷移 0.25 秒)。
- ヘッダーは固定、左 VALE、右 Fable 015 — Momotaro。`mix-blend-mode: difference` で紙でも川でも夜でも読める。フッターは上罫線。
- breakpoint 720px 以下: 余白 `13vh 20px 10vh`。桃の半径は 0.11×min(W,H)。

## Motion
- RAF 1 本。シェーダー描画 → 桃 → 文字色の判定(各要素の中心が水面より下か)。タブ非表示で停止。
- 流れは毎秒 0.12、スクロール 1 で 3.2 の位相。桃の浮力バネは 1 秒前後で収束。
- 雷は不規則。雨は常に同じ速度。
- `prefers-reduced-motion`: 時間を 12 秒で固定して波形を止める。桃は流れず雷も出さない。スクロールと雷の減衰時だけ再描画。
- WebGL 不可: 両 canvas を隠し、紙地と文章だけ。本文末尾に 1 行で案内。

## Components
- hero: 日本語ラベル + h1「川上から」+ 一文 + 操作ヒント(4% スクロールで消える)。桃は川の中央やや右。
- section: 自作のインライン SVG の絵(犬・猿・雉。viewBox 160×120、PC は見出しの右に高さ 260〜310px、スマホは見出しの上に 210px。墨線 2.6・丸結び、紙色の面、桃色の円を背に敷く。feTurbulence+feDisplacementMap で版木の揺れ。細線 1.3 で毛並みと尾羽の刻み。雉の胴は淡い緑の面)+ ラベル(01 — 犬 …)+ h2(1 文)+ 本文(1〜2 文)。三節は min-height 72vh で間を詰める。水面より下に入った要素(ラベル・見出し・本文・絵)は1つずつ生成り色に切り替え、濃紺の上で読めるよう淡い影を付ける。
- button: 藍のピル、`16px 26px`、14px 字間 .1em、右に 22px の罫。hover で明るい藍。夜は桃色の地に墨の文字。focus-visible は桃色 3px の outline。
- footer: 左 `VALE / FABLE 015`、右 `Momotaro — Japanese Folktale`。

## Do / Don't
Do
- 色は藍・桃色・墨。紙は白寄り。
- 川は階調を落とす。写実の水にしない。
- 桃は 1 つ。画面で唯一の桃色。
- 嵐は雨の筋と雷だけで見せる。鬼は描かない。
Don't
- クリーム地にセリフとテラコッタを組まない。
- 魚や舟や岸の草を足さない。
- 文章を川の上に置かない(落ちる間は色だけ変える)。
- 波頭を増やしすぎない。帯 1 本の閾値で足りる。

## References
- Adopt: 紙地に墨 1 色、細い大見出し、番号ラベルと短い罫で区切る編集的な構成を抽象化した。Garamond の細い欧文は Shippori Mincho の日本語に、罫は墨の 36px に置き換えた。
- Loom: 白い地に操作色を 1 色だけ通し、クリックできるものをピルにする考え方を抽象化した。青は藍に、ピルは 1 つの CTA だけに絞った。