# 蛍 — Style Reference
> 炭色の夜に、琥珀の光が別々の周期で灯って消え、下の川面に横長に映る。見出しは上に細い明朝。

**Theme:** dark  **Series:** PARTS 038  **World:** 川沿いの宿。六月だけ夜の庭を開ける。

## Concept
ヒーロー背景の1パーツ。主役は1匹ごとに位相と周期が違う明滅と、ゆらぎ、ブルームを持つ GPU 粒子。
1匹は四角形(6頂点)で、位置・明滅・大きさを頂点シェーダーが種と時間から決める(状態を持たない)。光は加算合成で重なると明るい。カーソルや指の近くの蛍はゆっくり寄ってくる。画面の下 24% は川面で、蛍を水際で上下反転した映り込みが横長に揺れる。UI は CTA の橙だけが光り、蛍と同じ色域に収める。

## Signature Technique
WebGL1、2つのプログラム(背景の全画面三角形 + 蛍の四角形)。外部ライブラリなし。

- 頂点属性: `a = (seedX, seedY, phase, depth L)` + 角 `c ∈ {±1}²`。1匹 6頂点、COUNT desktop 140 / mobile 60。
- 位置: `base = (seedX, WATER + .03 + .62·seedY)`(川面より上に分布)。ゆらぎ `DRIFT·(.5+.6L)·(sin(.23t + 2πφ)·.06 + sin(.11t + 20x)·.035, sin(.19t + 3φ)·.035 + cos(.07t + 15y)·.03)`。
- 寄る: `p += (mouse - p)·PULL·exp(-7·dist²)·.5`(dist は aspect 補正)。
- 明滅: 周期 `period = (2.4 + 3.2·fract(7.3φ)) / BLINK`、`ph = fract(t/period + φ)`。`flash = smoothstep(0,.1,ph)·(1 - smoothstep(.16,.62,ph))` を 1.4 乗し、個体差 `.55 + .45·fract(13.1φ)` を掛ける(立ち上がり速く、消えるのは遅い)。
- 大きさ: `BLOOM·mix(.45, 1, L)·(.55 + .45·flash)` px、BLOOM desktop 160 / mobile 110。
- フラグメント: `d = |uv|`、芯 `exp(-60d²)`、ブルーム `exp(-3.2d)·.42·(.5+.5L)`、消灯時の微かな点 `exp(-120d²)·.05`。合計に `smoothstep(1,.6,d)` を掛けて四角形の縁で 0 にする。色は `mix(GLOW, CORE, core)`。
- 合成: 背景の後に `blendFunc(ONE, ONE)` の加算。同じ頂点を2回描く。1回目は `uMirror=1` で映り込み:
  - `p.y = WATER - (p.y - WATER)·.8`(水際で反転、少し縮める)
  - `p.x += sin(140·p.y + 2.3t + 6φ)·.004`(さざ波の横揺れ)
  - 四角形を `(1.5, .55)` 倍に潰して横長に。強さ `REFLECT .38`、`step(vY, WATER)` で水面より上は描かない
- 注意: 背景を描く前に蛍の属性を `disableVertexAttribArray` する。属性番号が背景の `p` と同じ 0 になることがあり、後から外すと背景が描かれず真っ黒になる。
- 背景: 空は `mix(NIGHT_LOW, NIGHT_TOP, smoothstep(WATER, .95, y))`(水際がわずかに明るい)。川面は `mix(NIGHT_LOW·.82, #070707, k^.5)`(k は水際からの深さ)に、3px 単位の行ごとにずらした value noise の細いさざ波(+.008)。対岸の草は水際の上に `WATER + .012 + .018n(3.1x) + .012n(9x) + .008n(42x) + .02n(70x)^6`(最後の項がまばらな穂先)。水際に .35 の明るい線。1/220 のディザ。
- 解像度: `min(devicePixelRatio, 1.5)`。

## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| --charcoal | #161616 | html背景 |
| NIGHT_TOP | #0C0D0C | 空の上 |
| NIGHT_LOW | #191816 | 水際の空 |
| water | #141412 → #070707 | 川面(水際 → 手前) |
| grass | #050605 | 対岸の草 |
| GLOW | #FFBD5C | ブルーム |
| CORE | #FFF5CC | 芯 |
| --bone | #F2EFE9 | 見出し・ロゴ |
| lead | #BDBAB4 | 本文 |
| --ash | #8E8C87 | ラベル・フッター |
| --ember | #F4701E | CTA(30px の橙の光つき) |
| cta-text | #1A0D05 | CTA の文字 |

## Typography
- 見出し: Shippori Mincho 400、`clamp(34px, 5.2vw, 74px)`、line-height 1.3、letter-spacing .03em、`<br>` で2行固定。
- 本文: Zen Kaku Gothic New 300、`clamp(14px, 1.15vw, 17px)`、line-height 1.9、最大 32em。
- ラベル: Zen Kaku Gothic New 300/500、12px(mobile 11px)、letter-spacing .14〜.22em、大文字。
- ボタン: 500、14px、letter-spacing .06em。

## Spacing & Layout
- 1画面 = `100svh`、`grid-template-rows: auto 1fr auto`。本文は上寄せ(`align-self:start`)、上余白 `clamp(36px, 10vh, 120px)`、最大幅 760px。蛍は川面(下 24%)より上に散らばり、映り込みは川面に入る。
- 左右余白 `clamp(20px, 5vw, 72px)`、上 28px、下 22px(+safe-area)。
- breakpoint 640px: 見出し `clamp(30px, 8.6vw, 42px)`、フッター2行積み。

## Motion
- 明滅の周期 2.4〜5.6 秒、個体ごとに位相がずれる。同時に灯るのは全体の 3〜4 割。
- ゆらぎは 0.07〜0.23 rad/s。寄るのは lerp 0.05 / 強さ lerp 0.03 で遅い。
- requestAnimationFrame 1本。`visibilitychange` と IntersectionObserver で画面外は停止。
- `prefers-reduced-motion`: t=7 の静止フレームを1回描く(灯っている個体と消えている個体が混ざった1枚)。
- WebGL 非対応: 琥珀の radial-gradient 3つ。

## Components
- hero: 全画面。上に宿名と分類、上 1/3 左に eyebrow / h1 / lead / CTA。
- button(.cta): 高さ46px の pill。橙の地に濃茶の文字で、`0 0 30px rgba(244,112,30,.55)` の光。hover で光が強まり1px浮く。focus-visible は骨色のリング。
- footer(.bot): 11px、左に操作説明、右に `VALE / PARTS 038 / 蛍`。
- section: このパーツには無い。

## Do / Don't
- Do: 立ち上がりを速く、消えるのを遅くする。蛍の明滅はこの非対称で決まる。
- Do: 加算合成にする。重なった光が明るくなる。
- Do: 消灯中もごく微かな点を残す。存在が消えない。
- Do: 映り込みは本体より弱く、横長に潰す。水面に光が落ちて場所が分かる。
- Don't: 数を増やしすぎない。140 で十分、300 を超えると星空になる。
- Don't: 緑や青の蛍にしない。琥珀の1色。
- Don't: 全部を同じ周期にしない。

## References
- Twingate: 近黒の面に信号灯のように光る色、軽い書体の見出しという考え方を抽象化。紫と黄緑の2色は使わず、琥珀1色に絞った。
- Electronic Materials Office: 炭色のギャラリーに白熱の橙1つ、30px の光をまとう CTA という構成を抽象化。CTA の光と蛍の光を同じ色域にそろえた。

## Usage
1. `<canvas id="gl">` と `<script>` ブロック全体を切り出す。`.still` と `#hint` も一緒に。
2. canvas は `position:fixed; inset:0`。上に載せる要素は `position:relative; z-index:1`。
3. パラメータは JS 冒頭の `P`:
   - `SCALE` 描画解像度倍率
   - `COUNT` 蛍の数、`BLOOM` 光の直径(px)
   - `DRIFT` ゆらぎの大きさ、`BLINK` 明滅の速さ
   - `PULL` カーソルに寄る強さ(0で無効)
   - `WATER` 川面の高さ(画面下からの比)、`REFLECT` 映り込みの強さ(0で川面に何も映らない)
   - `GLOW` `CORE` `NIGHT_TOP` `NIGHT_LOW` の4色
4. 自分のサイトの背景に重ねるなら `bg` プログラムを外し、canvas を `alpha:true` にして加算のまま描く(暗い背景でのみ成立する)。
5. 分布を変えるときは ffVS の `base`。
6. 川面を外すなら `REFLECT` を 0 にし、bgFS の `if(v.y<w){...}` と草の `r` の行を削る。