# 月へ帰る — Style Reference
> 墨色の竹林で、一本の竹だけが内側から光る。スクロールで重さが消え、文字と花びらが浮き、最後はカメラが月へ飛んで画面が月白になる。

**Theme:** dark  **Series:** FABLE 011  **World:** 竹取物語。光る竹から八月十五日の夜の昇天まで。結びは富士。

## Concept
夜の竹林に置かれた唯一の光源が主役。見出しと短文はその光の脇に小さく置き、画面の大半を闇と竹に渡す。
縦スクロールが夜の進行で、右端の細い縦線が「地上 / 無重力 / 昇天 / 月」の4段を示す。
第三章で重力の符号が反転し、花びらは落下から上昇へ、見出しと本文は一文字ずつ浮き上がる。第一章から第三章でカメラが上を向きながら画角を狭め、月が竹の先の間で大きくなっていく。第四章でカメラがワールドYを昇り、月(レイマーチの球)を注視し続けたまま月面まで飛ぶ。月面が画面を覆ったところで月白に抜け、締めの文とボタンは墨色で置く。
色は墨と月白の2色に、発光の金色を1つだけ足す。

## Signature Technique
three.js 0.170(importmap)。ポストプロセスなし、ライトは使わずすべてカスタム ShaderMaterial。requestAnimationFrame 1本で「空+月 → 粒子更新 → シーン」の順に描く。

1. 光る竹(InstancedMesh)
   - CylinderGeometry(1,1,1, 12分割, openEnded) を130本(mobile 70本)。インスタンス行列で半径0.07〜0.16、高さ11〜20、わずかな傾き。発光する1本だけ `aGlow=1`、位置は (2.3, 0, -4.2)(mobile x=1.3)。周囲2.2以内と手前の通路には他の竹を置かない。
   - 節: `fract(vY/seg)`(seg=1.0〜1.4)の中央を `smoothstep(0.06,0,|fy-0.5|)` で暗くする。
   - 通常の竹: base #131610 × 縦ノイズ、月光 `max(dot(n, (0.35,0.8,0.3)),0)*0.16`、リム `pow(1-n·V,3)*0.08`。
   - 発光竹からの照明: 軸までの水平距離 dg で `2.6*uGlowI/(1+0.55*dg²)`、向き `max(dot(n, toGlow),0)`。金色 (1.0,0.78,0.5)。
   - 発光竹本体(サブサーフェス): `inner = 0.72+0.28*sin(t*0.9+vY*0.4)`(呼吸)、`wall = 0.55+0.45*(n·V)`(壁の厚みで正面が明るい)、節で 85% 遮光、縦のノイズで粒を出す。色 (1.0,0.80,0.52) × 2.2 × uGlowI。
   - uGlowI = 0.55 + 0.55×(第一章の接近) + 0.35×(カーソル近接) − 0.5×(昇天中)。
   - 霧 `1-exp(-dist²·0.0011)` で #0C0B09 へ。
2. 月(レイマーチ)
   - 空の全画面クアッドで、`uInvPV` から各ピクセルのワールド方向 rd を復元。空は地平の暖かい墨 (0.09,0.078,0.062) から天頂の冷たい黒 (0.028,0.028,0.040)。星は方向×60 のセル hash。
   - 月はワールド (0,330,-420)、半径38。解析的な球交差で入口を求め、そこから `|p-c| - R(1+0.012*craters(n))` で2歩(mobile 1歩)スフィアトレースして変位面に乗せる。法線は接線方向の高さ差分(e=0.02、強さ1.6)。craters の評価は1ピクセル5回まで。
   - craters: 球面法線 n×3.0 の27セルに、半径 0.22〜0.58 の窪み `smoothstep(r, 0.3r, d)` と縁 `rim` を置く。小さな穴は value noise(n×8, n×16)の高い所を `smoothstep` で掘る。fbm(n×9) を 0.2 足す。海(maria)は `smoothstep(0.12,0.5,fbm(n*2.3))` でアルベドを 0.93 → 0.62 に落とす。
   - 照明: 視線の逆向きに (0.38,0.22,0) を足した方向。縁の暗化 `pow(n·(-rd), 0.32)`。ハロー `exp(-(角距離-視半径)*(26〜66))*0.5`。
3. 花びら(GPGPU)
   - 26×26=676(mobile 18×18)。RGBA Float の RenderTarget を ping-pong。(x,y,z,seed)。
   - 速度 `v = (sway*0.35 + 風, -uG*(0.55+0.9*seed) + 揺れ, 0.2*sin + 風)`。無重力(|uG|小)のとき円を描く横流れを足す。
   - uG はスクロールで +1 → −1 へ(第二章中央から第三章中央の間で smoothstep)。uG>0 で下端を抜けたら上(y=17〜21)へ、uG<0 で上端を抜けたら下(y=-0.5〜-2.5)へ再生成。
   - 風: pointermove の速度 ×6 を `0.02^dt` で減衰。
   - 描画: gl.POINTS、楕円(縦横比 2.3)を seed と時間で回転、距離 1〜4 と 14〜38 でフェード、発光竹の近くは金色に寄る。
4. 文字の浮上
   - `[data-split]` の見出しと本文を1文字ずつ span にし、各 span に `--k`(40〜260px) と `--r`(−20〜20deg)。セクションの `--lift`(0..1) で `translateY(-lift*k) rotate(lift*r)`、opacity `(1-0.55*lift)×fade`。`fade` は各文字の画面上の上端がブランド行の下 18px から 90px の間で 1→0(章ラベルは 60px)。浮いた文字は左上の「VALE / FABLE 011」に届く前に消える。
5. カメラ
   - 基本 (0, 1.7, 8) → 注視 (0.6, 4, -10)。中盤の見上げ `tilt = sm((night-0.1)/0.52)`(第一章から第三章にかけて): 注視点を月へ lerp し、垂直画角を 50° → 19°(縦長画面は 30°)へ狭める。縦長画面では注視点を月の上 58 単位にずらし、月を画面の下 1/3 に置いて上の章の文字と重ねない。章の本文には墨色の text-shadow。カメラは月を画面中央に捉えたまま上を向き、竹の先の間で月が段階的に大きくなる。昇天 `rise = sm(fin/0.45)` で y を +75、注視点を月へ lerp。`fly = sm((fin-0.45)/0.37)` で月までの距離を対数空間で補間し(月面手前 半径×1.06 まで)、画面上の月の直径がほぼ一定の速さで育つ。`fin` 0.84〜1.0 で月白へ(月面の起伏を 4% だけ残す)。

## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| --sumi | #0C0B09 | 地、霧の色 |
| --sumi-2 | #171410 | 地平の空(暖かい墨) |
| zenith | #07070A | 天頂の空 |
| bamboo | #131610 | 竹の地色(暗い緑墨) |
| --gold | #F0C98A | 発光竹の光。シェーダー内は (1.0,0.80,0.52) の加算 |
| --moon | #ECE8DC | 見出し・本文、最後の地(月白) |
| --moon-2 | rgba(236,232,220,.78) | 本文 |
| --mute | rgba(214,206,186,.55) | ラベル、縦線 |
| --ink | #1A1712 | 月白の上の文字・ボタン |
| petal | rgb(158,143,128)→(255,214,158) | 花びら。光に近いほど金色 |

## Typography
- 見出し・本文: Zen Old Mincho 400(500は使わず、1ウェイトで通す)。`font-feature-settings:"palt"`。
- h1: `clamp(48px, 8.8vw, 124px)`、letter-spacing .12em、line-height 1.05、nowrap、text-shadow 0 2px 40px rgba(12,11,9,.8)。
- 章の h2: `clamp(28px, 3.6vw, 46px)`、letter-spacing .1em、line-height 1.35。mobile `clamp(26px, 7vw, 30px)`。
- 本文: `clamp(14px, 1.15vw, 17px)`、line-height 2.1、letter-spacing .06em、max-width 30em。
- ラベル・縦線の段名: Zen Kaku Gothic New 300、11px、letter-spacing .2em。
- 締め h2: `clamp(28px, 4vw, 50px)`、nowrap(420px以下で解除)。ボタン 14px / .14em。

## Spacing & Layout
- 左右 `--pad: clamp(20px, 5vw, 72px)`。ブランドは左上、作品名は右上(mobile 非表示)、縦線は右端 16vh〜84vh。
- hero: 100svh、`grid-template-rows: 1fr auto auto`、本文は左下、上 2/3 は竹林。
- 章: min-height 100svh + 上下 22vh。第二章だけ右寄せで、右余白は `--pad + 64px`(縦線と重ねない。mobile では左寄せ)。本文幅 34em。
- final: 260svh、内側 100svh を sticky。本文は fin 0.22〜0.48 で消える。
- end: 100svh 中央、32em。footer 左右2点。

## Motion
- 発光の呼吸: sin(t×0.9) で ±28%。竹林のカメラは x に ±0.3 のゆっくりした揺れ(周期 57s)。
- 進行値の追従: 重力 lerp 0.08、発光 0.1、昇天 0.1、白 0.2(差 0.01 未満で吸着)。
- 文字の浮上はスクロール量そのもの。戻すと落ちる。
- reduced-motion: t=3 で固定、GPGPU 更新を止め、スクロール時だけ1フレーム描く。重力反転とカメラの昇天はスクロール位置の関数なので静止画でも段階が分かる。
- WebGL なし: `.nogl` で CSS グラデーション(天頂→地平、右下に金色の光だまり)、ヒーローに1行の説明、end/footer は月白。
- `visibilitychange` で停止、リサイズは 120ms デバウンス。

## Components
- hero: ラベル「竹林 / 夜」、h1、1文、「スクロールで夜が進む」+ 伸びる横線。
- 縦線(.rail): 1px、進行分だけ月白で塗り、横に段名(mobile は線のみ)。
- 章(.st): ラベル(章番号 / 題)の下に h2 と本文。装飾なし。
- 締め: ラベル「月 / 朝」、1文、h2、pill ボタン(墨の線、hover で反転)。focus-visible は墨のリング。
- footer: `VALE / FABLE 011` と題名。

## Do / Don't
Do
- 光源は発光竹だけ。花びら・地面・隣の竹はすべてその光で照らす。
- 月は常に注視点に置く(注視点を月へ lerp)。月が画面下へ出た版は失敗だった。
- 月面が画面を覆ってから白へ抜く。月を小さいまま白くしない。
- 花びらは 700 個以下。4096 個では吹雪になった。
- 文章は原作の事実と地名だけ。

Don't
- 竹を緑に塗らない。夜の竹は墨色で、節だけ暗く。
- 発光竹の脇に第二の光源(ランタン、蛍)を足さない。
- 画像(竹林の遠景)を地平より上に出さない。写真の月が二重に見える。
- 紫や青のグラデーションで夜を作らない。
- 締めの画面に月面の起伏を強く残さない(4% まで)。

## References
- Uizard(stock/refero/md/uizard.md): 「ほぼ無彩色の暗い画面に、発光する一つのアクセントだけを置く。主ボタンは表面に載るというより光を放つ」を抽象化。紫の発光を金色の竹に置き換え、ボタン自体は発光させず墨の線にした。
- Dashlane(stock/refero/md/dashlane.md): 「純黒でない暖かい近黒 #200f0a」「細い見出しと中字 UI の2ウェイトの会話」を抽象化。地を暖かい墨 #0C0B09 に、見出しを Zen Old Mincho 400 の1ウェイトに絞り、ミントのアクセントは使わない。