# 体積雲 — Style Reference
> 雲海を少し見下ろす視点。太陽に照らされた白い峰と、青灰の谷。上は淡い青空で、細い明朝が1本。

**Theme:** light  **Series:** PARTS 009  **World:** 羽毛の掛け布団のブランド。雲の上で眠る軽さ。

## Concept
ヒーロー背景の1パーツ。主役はレイマーチで密度ノイズを積分した体積雲。カメラは雲海の上にあり、雲の上面の凹凸が太陽方向の減衰で陰影になる。
画像を使わず、雲はすべてコードで描く。文字は上 1/3 の空に細い明朝で置き、UI はほぼ消す。カーソルや指で視線がわずかに動く。

## Signature Technique
全画面1枚の三角形に対するフラグメントシェーダー(WebGL1)。外部ライブラリなし。

- カメラ: 原点、`rd = normalize(x·aspect + look.x, .9y - .12 + look.y, 1)`。雲の層は y ∈ [BASE -2.8, TOP -0.7]。
- 3D ノイズ: `hash3`(積の fract)→ 3次補間の value noise → fbm 3オクターブ(`p = 2.03p + (1.7,9.2,3.1)`)。
- 密度 `density(p,t)`: `q = p·(.3,.5,.3) + (0.8t, 0, 0.3t)`(風)。
  - 雲量のむら `cov = noise3(.28q + 3)`、塊ごとの高さ `top = .35 + .65·cov`
  - 縦の形 `prof = smoothstep(0,.1,h)·(1 - smoothstep(top-.22, top, h))`(下は平ら、上は丸い)
  - `d = 1.3·fbm3(q) + .6·cov - 1.25 + .75·COVERAGE`、`density = clamp(5d, 0, 1)·prof`
- マーチ: `rd.y < -.015` の画素だけ。t0 = TOP/rd.y、t1 = min(BASE/rd.y, t0 + 7·厚み)。STEPS(desktop 36 / mobile 20)等間隔、開始位置を画素ごとにディザ。
- 散乱の近似: 太陽方向に 3 点(距離 .5/1.2/2.2、重み .7/.5/.3)の密度を足して `lit = exp(-4.5·dl)`。谷ほど暗い `amb = mix(.3, 1, 1.2h)`、薄い縁は透ける `sil = .25(1-den)³`。
- 色: `c = mix(SHADE, LIT, lit·amb + sil)`、遠くは `smoothstep(4,60,t)·.75` で空に溶かす。
- 合成: front-to-back、`a = clamp(1.3·den·dt, 0, 1)`、`accA > .985` で打ち切り。`col = sky·(1-accA) + acc`。
- 空: `mix(SKY_HOR, SKY_TOP, rd.y^.5)` + 太陽のまわり `pow(rd·sun, 24)·.25`。地平線の下は霞色へ。
- 解像度: desktop 0.5 倍、mobile 0.33 倍(雲は柔らかいので低くてよい)。1/160 のディザ。

## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| --sky | #DCE8F0 | html背景 |
| SKY_TOP | #80ABDB | 空の上端 |
| SKY_HOR | #E6EBF0 | 地平線の空 |
| haze | #CCD6E0 | 地平線の下の霞 |
| CLOUD_LIT | #FFFCF7 | 照らされた峰 |
| CLOUD_SHADE | #808FAD | 谷と影 |
| sun-glow | #FFF2D9 | 太陽のまわり(25%) |
| --ink | #1C1C1E | 見出し・CTA 地 |
| lead | #3A3C42 | 本文 |
| --stone | #6F7278 | ラベル・フッター |
| --marker | #E8641B | eyebrow とフォーカスリングだけ |

## Typography
- 見出し: Noto Serif JP 200、`clamp(38px, 6vw, 88px)`、line-height 1.22、letter-spacing .02em、`<br>` で2行固定。
- 本文: Zen Kaku Gothic New 400、`clamp(14px, 1.15vw, 17px)`、line-height 1.9、最大 30em。
- ラベル: Zen Kaku Gothic New 500、12px(mobile 11px)、letter-spacing .14〜.24em、大文字。eyebrow だけ橙。
- ボタン: 500、14px、letter-spacing .06em。

## Spacing & Layout
- 1画面 = `100svh`、`grid-template-rows: auto 1fr auto`。本文は左寄せ・垂直中央、最大幅 780px、下余白 8vh。
- 左右余白 `clamp(20px, 5vw, 72px)`、上 28px、下 22px(+safe-area)。
- 地平線は画面の上から 36〜38% あたり。見出しは地平線をまたいでよい(雲は白、空は淡い青で、どちらでも墨色が読める)。
- breakpoint 640px: 見出し `clamp(34px, 9.6vw, 46px)`、フッター2行積み。

## Motion
- 時間係数 SPEED 0.06(dt は 0〜0.05 秒にクランプ)。風は x 方向 0.8、z 方向 0.3(単位/秒 × SPEED)。雲の形が変わるのに数十秒。
- 視線: カーソル位置で ±LOOK(.05)、lerp 0.04。
- requestAnimationFrame 1本。`visibilitychange` と IntersectionObserver で画面外は停止。
- `prefers-reduced-motion`: t=3 の静止フレームを1回描く。
- WebGL 非対応: 白い radial-gradient 2つと空の linear-gradient。

## Components
- hero: 全画面。上に社名と分類、中央左に eyebrow / h1 / lead / CTA。
- button(.cta): 高さ46px の pill。墨色地に白文字、hover で黒くなり1px浮く。focus-visible は橙のリング。
- footer(.bot): 11px、左に操作説明、右に `VALE / PARTS 009 / 体積雲`。
- section: このパーツには無い。

## Do / Don't
- Do: 雲海を見下ろす。見上げると平らな底しか見えない。
- Do: 谷を青灰にする。白一色だと厚みが消える。
- Do: 解像度は半分以下でよい。歩数に回す。
- Don't: 橙を eyebrow 以外に広げない。
- Don't: 歩数を 60 以上にしない。重くなるわりに見た目は変わらない。
- Don't: 雲を画像で置き換えない。

## References
- Hugo & Marie: 無限の白地に極細セリフ、UI は消えるという考え方を抽象化。写真の代わりにレイマーチの雲を置き、ultralight のセリフは Noto Serif JP 200 に替えた。
- Parloa: 紙の暖かさ+墨+ハイライター1色の構成を抽象化。クリーム地は空の白に替え、橙は eyebrow に1か所だけ。

## Usage
1. `<canvas id="gl">` と `<script>` ブロック全体を切り出す。`.still` と `#hint` も一緒に。
2. canvas は `position:fixed; inset:0`。上に載せる要素は `position:relative; z-index:1`。
3. パラメータは JS 冒頭の `P`:
   - `SCALE` 描画解像度倍率(0.5 / 0.33)
   - `STEPS` レイマーチの歩数(36 / 20)。FS の `#define STEPS` に埋め込まれる
   - `SPEED` 風の速さ(0.06)、`COVERAGE` 雲量(0〜1。0.58)
   - `BASE` `TOP` 雲の層の高さ(-2.8 / -0.7。カメラは y=0)
   - `SUN` 太陽の方向([.45,.55,-.6])、`LOOK` 視線の動く量(0.05)
   - `SKY_TOP` `SKY_HOR` `CLOUD_LIT` `CLOUD_SHADE` の4色
4. 夕方にするなら SUN の y を下げ(0.2 前後)、CLOUD_LIT を (1,.85,.7)、SKY_HOR を (1,.8,.7) に。
5. 雲を見上げる構図にするなら BASE/TOP を正にし、`if(rd.y<-.015)` を `rd.y>.015` に、t0/t1 の順を入れ替える。
6. 重い端末では `STEPS` を 16、`SCALE` を 0.25 まで下げてよい。