# 鱗 UROKO — Style Reference
> 深緑の闇に沈んだ竜の脇腹。カーソルを置いた所だけ鱗が金に光り、触れた所から波が走る。

**Theme:** dark  **Series:** EDGE 002  **World:** ドラゴンの鱗の質感と火と蛇行する胴。架空の探索ゲーム『鱗』の公式サイト。

## Concept
画面いっぱいが竜の皮膚で、ページは「鱗 → 胴 → 火 → 登録」の4区画で竜の部位をたどる。主役はヒーローの手続き生成の鱗面。カーソルはランプで、照らした鱗だけが金に返し、なでた軌跡から波紋が広がって鱗が一枚ずつ傾く。色は深緑と金の2系統だけに絞り、炎の橙は火の区画にしか出さない。文字は左下に「鱗」1文字と1行の説明のみ。残りは全て余白(=鱗面)にする。

## Signature Technique
### 1. 鱗面シェーダー(hero, WebGL1 fragment shader, 全画面1パス)
- 座標: `p = (fragCoord - 0.5*res) / min(res)`。-0.12rad 回転 + 低周波の sin ワープで平面タイル感を消す。格子空間は y 反転し、**下の行が上の行を覆う**(自由縁が下向き)。
- 格子: 半径 `r = 0.078`(mobile 0.08)、列間隔 `cx = 1.58r`、行間隔 `ry = 0.74r`、奇数行は半列ずらす。行 `j0-1 … j0+2` を下から走査し、最初に `|p-c| < r` を満たした円がその画素の鱗。走査中に外れた行の `d - r` から **接触影** `shadow = smoothstep(0, 0.42r, d-r)` を取る。
- 法線: 球冠 `n = normalize(vec3(q/r*0.75, sqrt(1-d²)+0.12))`、`n.y -= 0.26` で自由縁を持ち上げる。根元(上端)から放射する筋 `sin(angle*26)` を接線方向に 0.10、成長線 `sin(dist*38)` を半径方向に 0.03 混ぜる。
- 波紋: 最大 8 個の `vec4(origin.xy, t0, strength)`。`w = Σ sin(34d - 9·age) · e^{-1.1·age} · e^{-2.2d} · smoothstep(front)` を**鱗の中心**で評価し、その勾配 `gw` を法線に加算する(鱗が丸ごと傾く)。pointermove は 110ms 間隔・移動量に比例した強さ、pointerdown は強さ 1.0。無操作時は 4〜7 秒おきにランプ付近へ 0.8 の波紋。
- 異方性ハイライト: Kajiya-Kay。`spec = sqrt(1 - (T·H)²)^n`、T は筋の方向。ランプ(L1 = カーソル位置, z 0.9)に n=90(重み 1.0 × ランプ減衰)、固定リム(-0.6, 0.8, 0.5)に n=60(重み 0.95 × 干渉色)。
- 薄膜干渉: 鱗ごとの膜厚 `thick = 360 + 140·hash + 140·w + 110·near` nm、`opd = 2·1.35·thick·cosθ`。`0.5+0.5cos(2π·opd/λ)` (λ = 650/540/460) を求めたあと、**パレットに束縛**: `t = 0.6R+0.4G` で moss `#1A6B42` → gold `#FAC761` を補間、B 成分の強い所だけ teal `#298C85` を半分混ぜる。虹色は出さない。
- 合成: `base #091410` × (0.25 + 0.7·rim + 1.4·lamp) + 干渉色 × (0.06 + 0.10·fresnel + 0.34·lamp) + 金スペキュラ。ランプ減衰は `(0.55 + 0.45·on) · e^{-1.9·|mo-p|}`。AO = `mix(0.35,1,shadow) · mix(0.45,1,smoothstep(1,0.72,d))`。胴の丸みとして `|p.y|` で上下を暗く、`1-exp(-1.5·col)` でショルダーを付け白飛びを止める。最後に 2/255 のディザ。
- 鱗頭のきらめき: 固定リムのハーフベクトルに対し `pow(N·H, 140)`、ランプには `pow(N·H, 200)` を足し、色 `#FFE09E` で各鱗の頂に小さな白金の点を置く。静止画でも鱗一枚ずつの丸みが読める。
- 解像度: DPR 上限 2(mobile 1.5)。rAF は全区画で 1 本、IntersectionObserver で画面外は停止。

### 2. 蛇行する胴(section 02, three.js 0.170, PerspectiveCamera fov 30・画面高 2.2 を写す距離)
- 背骨: N = 76 点(mobile 56)、節長 0.046(mobile 0.04)。先頭は `head.lerp(target, 1-e^{-5.5dt})`。以降は follow-the-leader: `pts[i] = pts[i-1] + dir·SEG`、隣接節の折れ角を **±0.11rad** に制限して滑らかな S 字にする。`pts[i].z = -0.004i + 0.06·sin(0.35i - 1.2t)` で交差時に頭側が手前、ゆるい奥行きの波も付く。無操作 2.2 秒で、画面中央を頭から進む正弦の泳ぎ `y = -0.12 + 0.30·sin(2.1x - 1.5t) + 0.10·sin(0.8x + 0.4t)`(縦画面は x と y を入れ替え、画面高の上 17%〜下 47% に収める)へ `1-e^{-2.5dt}` で寄せる。読み込み時に 180 フレーム先回しして、最初の 1 枚から S 字になっている。
- チューブ: 平行移動フレームで N×24(mobile 18)頂点の BufferGeometry を毎フレーム書き換え。半径プロファイル(s = 鼻先 0 → 尾 1): 顎 0.04 → 頭蓋 0.20(s 0.10) → 首 0.115(s 0.19) → 胴 0.19(s 0.30〜0.45) → 尾 0.012、横長画面以外は `min(1, aspect/1.15)` 倍。法線方向に 1.25 倍の扁平。
- 竜の形: 頭(半径プロファイルで顎・頭蓋・首を作る)、背中側にだけ並ぶノコギリ状の背びれ(5 節ごとの棘)、腹側の低い膜、尾の葉形のひれ、後ろへ流れる 2 本の角、鼻先から後方へ揺れる 2 本のひげ(24 点のリボン、`sin(5f - 2.2t)` で揺れる)。背の向きは頭→尾ベクトルの x 符号で決め、常に画面の上側に背びれが来る。
- 前脚: 胴の前から 26% の背骨点に 1 対。肩→肘→手首の 2 次ベジェに沿った 12×12 頂点の短いチューブで、胴と同じ鱗シェーダーを共有し、UV を実際の長さに合わせて鱗の大きさを胴とそろえる。手前の脚と奥の脚は z を胴の半径の ±55% ずらし、`sin(2.6t)` で逆位相に前後へ漕ぐ。手首は半径を絞って丸い手先に閉じ、そこから金色の 3 本爪(円錐、長さ 0.1、0.55rad ずつ扇状)を前下へ向ける。背骨点に付いているので胴のうねりにそのまま追従する。
- 材質: ShaderMaterial。UV 空間 `(v·12, u·28)` に同じ鱗格子(r 0.62, cx 1.0, ry 0.46)を敷き、**頭側の行が尾側を覆う**。接空間 `(B, T, N)` に法線を戻し、円筒の滑らかな陰影 `keyN` と鱗の細部 `keyS` を掛け合わせる。色 = `mix(base, 干渉色, 0.5 + 0.4·fresnel) × (0.10 + 1.8·key + 1.6·lamp)` + 金の異方性(リム 4.2、ランプ 3.0)+ 鱗頭のきらめき `pow(N·H, 120) × 1.6` + 鱗の頂 `h^6 × 0.3` + 輪郭のリム光。ランプは `target` 寄りに置き、無操作時は胴の上をゆっくり往復させ強さを 0.8 に落とす。
- ひれ・角・爪・ひげは MeshBasicMaterial の金(背びれと膜 `#C9A24A` 不透明度 0.42、ひげ `#E8CC7A`、角 `#D9C27A`、爪 `#E2C77E`)、目は `#FFE49A`。

### 3. 炎(section 03, GPU ナビエ・ストークス, demos/flow 転用)
- 速度場 256²(mobile 128²)、染料 768²(mobile 384²)、圧力反復 24(mobile 14)、渦度 18。
- 染料 = `(温度 T, 煙 S, -)`。減衰は成分別 `dissipation = (2.6, 0.9, 1.0)`。外力は `v.y += (34T + 6S)·dt` の浮力 + 上向きに流れる curl noise(振幅 3.2、重み `0.05 + 1.8T + 0.5S`)。
- 発生: 下中央に常時の種火(T 0.075)、5〜9 秒おきに 0.55 秒のバースト。区画が最初に見えてから実時間 3 秒後に一度だけ、1.6 秒の大きな息(T 0.4、初速 y 1500)を自動で吐く。pointerdown 中はカーソル位置に 2 発/フレーム(T 0.36 半径 0.0016、T 0.16 半径 0.0036)、初速 y 1560 + 移動量。
- 表示: 黒体風ランプ `黒 → #6B0A00 → #FF4D0D → #FFB840 → #FFF5D9` を T で補間、煙は `#292422 · (1-e^{-1.6S})`、1/4 解像度のブルームを 2 回往復。

## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| `--void` | `#060A08` | ページ地、hero・火の区画の背景 |
| `--ground` | `#0B1512` | 胴の区画の地、カードの下地 |
| `--moss` | `#122119` | カード背景、鱗ベースの中間 |
| `--line` | `#1E2E27` | 1px 罫線、チップ枠 |
| `--bone` | `#EDE6D2` | 見出し・本文の主文字 |
| `--sand` | `#9FA79A` | 説明文、チップ文字 |
| `--fog` | `#687069` | 番号ラベルとヒントとフッターの文字 |
| `--gold` | `#D4B063` | ボタン枠・ホバー塗り、フォーカスリング、鱗のスペキュラ |
| `--ember` | `#FF6A1F` | 炎の中温。UI には使わない |
| `--heat` | `#FFC658` | 炎の高温。UI には使わない |

## Typography
- 見出し: **Shippori Mincho B1** 500(h2)/700(h1)。`letter-spacing -0.02em`、`line-height 1.12`。h1「鱗」は `clamp(150px, 26vw, 360px)`、`line-height .92`、mobile `clamp(120px, 36vw, 220px)`。h2 は `clamp(34px, 4.2vw, 58px)`、mobile `clamp(26px, 7.4vw, 40px)`、`max-width 15em`。
- 本文: **Zen Kaku Gothic New** 300。16px / 1.8 / `letter-spacing .02em`。説明文 `.lede` は 17px(mobile 15px)、色 `--sand`、`max-width 30em`。
- ラベル: **IBM Plex Mono** 400、11px、`letter-spacing .1〜.2em`、大文字。番号「01 / SCALE」、ヒント、チップ、フッターに使う。
- 英語はラベルとブランド名「UROKO」だけ。本文はすべて日本語。

## Spacing & Layout
- 基本単位 8px。横パディング `--pad: 48px`(mobile 20px)。最大幅 1440px。
- 区画: hero / 胴 / 火は `100svh`(min 560〜600px)。説明区画は `padding clamp(96px, 12vw, 176px) 0`。締めは `clamp(120px, 16vw, 220px) 0`。
- 2 カラム: `grid 1fr 1fr`、gap 64px、縦中央。820px 以下で 1 カラム、画像を先頭に。
- 見出しブロック `.head` は縦 flex、gap 20px、左寄せ。ヒントは上に 24px。
- Breakpoint は 820px の 1 つだけ。

## Motion
- rAF 1 本。各区画は IntersectionObserver(rootMargin 80px)で可視時のみ更新。`dt` は 1/30 秒で上限。
- hero: ランプは `mouseOn` を `dt·6` で追従。無操作時は `(0.66 + 0.08 sin 0.23t, 0.58 + 0.09 sin 0.17t)` をゆっくり周回。波紋は 1.1/s で減衰。
- 胴: 先頭の追従 `1-e^{-5.5dt}`、無操作判定 2.2 秒、ランプの明滅 `dt·4`。
- 炎: 時間刻み上限 1/50 秒。自動の息は実時間で数え、区画が初めて見えてから 3 秒後に 1 回。ポインタを離すと発生源が消え、温度は 2.6/s で冷えて煙になる。
- カード: `--py` に `-28 × (カード中心と画面中心の差 / 画面高)` を入れる視差。ホバー時に `radial-gradient` のシーンが `--mx/--my` に追従(`mix-blend-mode: screen`)。
- `prefers-reduced-motion`: 鱗は固定ランプと 1 つの波紋で 1 フレームだけ描く。胴は巡回を 180 ステップ先に進めて静止(ランプ 0.6 を頭に置く)。炎は 70 ステップ先に進めた静止画。視差とスムーススクロールは切る。リサイズ時のみ再描画。
- WebGL が無い端末は各区画の `.fallback` に 1 行のテキスト。

## Components
- **hero**: 全画面 canvas。左上にブランド「UROKO」(Mincho 20px, `letter-spacing .3em`)、右上に `.chip`「Coming soon」。左下に `EDGE 002` 小ラベル → h1「鱗」→ 1 行説明 → ヒント。文字は `pointer-events: none`、canvas 側でポインタを拾う。
- **section**: 番号ラベル → h2 → `.lede` → `.hint`。ヒントは 18px の横線を前置。
- **card**: `border-radius 8px`、`aspect-ratio 4/3`、影なし。左下に mono のキャプション。
- **stage**(胴・火): `100svh` の canvas の上に、同じ見出しブロックを上部に置く。火の canvas は `touch-action: none`、`cursor: crosshair`。
- **button**: ピル型、1px `--gold` 枠、`padding 16px 28px`、15px、ホバーで `--gold` 塗り・文字 `--void`。矢印は 16px の inline SVG。フォーカスは 2px gold アウトライン(offset 4px)。
- **footer**: 1px 上罫線、mono 11px、左「VALE / EDGE 002」右「UROKO」。

## Do / Don't
**Do**
- 1 画面の彩度は 1 箇所(ランプの金か炎)に集中させる。
- 文字は左寄せ、見出し 1 本 + 文 1〜2 つで止める。
- 鱗の向きは常に下または尾の方向。
- ランプがない時でも鱗面に照らされた領域を 1 つ残す(画面が均一にならないように)。
- 画面外の canvas は止める。

**Don't**
- 紫や虹色の干渉色を出さない(パレット束縛を外さない)。
- 白飛びするスペキュラ。ショルダーを外さない。
- 炎の橙を UI(ボタン・ラベル)に流用しない。
- 影・グロー・背景グリッドで区画を飾らない。
- 部位を足し過ぎない。竜と読ませるのは頭・角・ひげ・背びれ・前脚の 5 つまで(後脚や翼は付けない)。

## References
- **Hardworkclub**(stock/refero/md/hardworkclub.md): 「黒い箱の劇場」の考え方を借りた。地色は深緑黒 `#060A08` に置き換え、1 つだけの色事象(青い丸ボタン)を「カーソルの金のランプ」に変えた。セリフ見出し + 左寄せ、48px パディング、影なしのカードはそのまま。書体は Shippori Mincho B1 + Zen Kaku Gothic New に替えた。
- **herding.app**(stock/refero/md/herding-app.md): 暖色寄りの炭色の階調と、小さなモノスペースのチップ/ラベルで階層を作る手法を借りた。唯一の色の帯(teal→lime)は「炎の区画」にだけ橙を許す規則に読み替え、16px 角の押し込み影は使わず、角は 8px と 999px の 2 種類に減らした。