# プラズマ膜 — Style Reference
> 近黒の面に、青白い細い等高線が膜のように走り、ところどころ電気が通って明るくなる。太い白の見出し1本。

**Theme:** dark  **Series:** PARTS 010  **World:** 家庭用のEV充電器。夜のあいだに電気が流れる。

## Concept
ヒーロー背景の1パーツ。主役はドメインワープした fbm の等高線を、画面上で一定の太さ(約1px)の細い線にして光らせた全画面シェーダー。
線は場の値で青→白に変わり、線の上をノイズの明るさが走って電気に見える。8本に1本だけ赤紫のアクセント。カーソルや指の位置に場の山ができ、膜が集まる。

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

- ノイズ: 2D value noise(5次補間)、fbm 4オクターブ、回転行列 `mat2(1.6,1.2,-1.2,1.6)`。
- 場 `field(p,t)`: `q = (fbm(1.1p + t(.21,-.13)), fbm(1.1p + (5.2,1.3) + t(-.17,.19)))`、`f = fbm(1.6p + 2.2q + (.1t, 0))`。カーソル `f += PULL·.55·exp(-5d²)`。
- 等高線: `s = f·LINES`(LINES desktop 14 / mobile 10)、`v = |fract(s) - .5|`。
- 一定の太さ: 場の勾配 `g` を前進差分(1px、field を計3回評価)で取り、`distPx = v / (|g|·LINES) / (ZOOM/描画高さ)`。`line = 1 - smoothstep(0, WIDTH, distPx)`(WIDTH 1.1px)、`glow = exp(-distPx/9)·GLOW`。
- 電気: `pulse = smoothstep(.45, 1, noise(4p + t(2.6, 1.1)))`。線の明るさ `.55 + .9·pulse`、光 `.35 + .5·pulse`、白の加算 `HOT·line·pulse·.5`。
- 色: `mix(COLD, HOT, 1.4f - .2)`。等高線の番号 `idx = floor(s)` について `fract(idx·.125 + .1)` が .5〜.62 に入る線(8で割って4余る番号)だけ ACCENT を 75% 混ぜる。
- 地: `(.055,.06,.075)` に周辺減光 50%。`1 - exp(-1.2col)`、1/200 のディザ。
- 解像度: desktop `min(devicePixelRatio,1.5)`、mobile 0.7 倍(細い線なので高め)。

## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| --void | #0E0F13 | html背景・地 |
| COLD | #408CFF | 線(場の低い所) |
| HOT | #D9F7FF | 線(場の高い所)・電気の白 |
| ACCENT | #FF408C | 8本に1本の線 |
| --cream | #FFF8E6 | ラベル・pill の枠と文字 |
| headline | #FFFFFF | 見出し |
| lead | #D5D7DE | 本文 |
| --fog | #8C8F99 | eyebrow・フッター |

## Typography
- 単一ファミリー: Zen Kaku Gothic New。
- 見出し: 700、`clamp(40px, 7vw, 104px)`、line-height 1.08、letter-spacing -.03em、白、`<br>` で2行固定。
- 本文: 400、`clamp(14px, 1.15vw, 17px)`、line-height 1.9、最大 32em。
- ラベル: 12px(mobile 11px)、letter-spacing .14〜.24em、大文字。ロゴ 700 / .22em。
- ボタン: 500、14px、letter-spacing .06em。
- 本文ブロックに `text-shadow: 0 2px 24px rgba(14,15,19,.9)`。線の上でも読める。

## Spacing & Layout
- 1画面 = `100svh`、`grid-template-rows: auto 1fr auto`。本文は左寄せ・垂直中央、最大幅 800px、下余白 6vh。
- 左右余白 `clamp(20px, 5vw, 72px)`、上 28px、下 22px(+safe-area)。
- breakpoint 640px: 見出し `clamp(40px, 11vw, 54px)`、フッター2行積み。

## Motion
- 時間係数 SPEED 0.45(dt は 0〜0.05 秒にクランプ)。ワープは .13〜.21、電気の脈は 2.6(速い)。
- カーソル追従: 座標 lerp 0.06、強さ lerp 0.04。離れると山が消える。初期位置は画面の (.7, .5)。座標は JS 側で `x·aspect·ZOOM, y·ZOOM` に直してから渡す。
- requestAnimationFrame 1本。`visibilitychange` と IntersectionObserver で画面外は停止。
- `prefers-reduced-motion`: t=6 の静止フレームを1回描く。
- WebGL 非対応: repeating-radial-gradient の同心円。

## Components
- hero: 全画面。上に社名と分類、中央左に eyebrow / h1 / lead / CTA。
- button(.cta): 高さ48px の pill。クリームの1px枠に半透明の地で、hover でクリーム地に黒文字。focus-visible はクリームのリング。
- footer(.bot): 11px、左に操作説明、右に `VALE / PARTS 010 / プラズマ膜`。
- section: このパーツには無い。

## Do / Don't
- Do: 線は 1px 前後。太くすると縞模様になる。
- Do: 勾配で割って太さを一定にする。割らないと場の平らな所で線が膨らむ。
- Do: アクセントは 8本に1本まで。
- Don't: 面を紫や青で塗らない。線だけが光る。
- Don't: 緑の線にしない。
- Don't: 見出しに色や光を付けない。白の太字のまま。

## References
- Home: 近黒の地に巨大な白い太字、アクセント1色という構成を抽象化。Poppins 700 は Zen Kaku Gothic New 700 に替え、アクセントは線の一部に限った。
- GSAP: 黒板にクリームの文字、細い輪郭の pill という考え方を抽象化。色分けのハイライターは使わず、線の色は青→白の1系統にした。

## Usage
1. `<canvas id="gl">` と `<script>` ブロック全体を切り出す。`.still` と `#hint` も一緒に。
2. canvas は `position:fixed; inset:0`。上に載せる要素は `position:relative; z-index:1`、文字に text-shadow を付ける。
3. パラメータは JS 冒頭の `P`:
   - `SCALE` 描画解像度倍率(desktop は devicePixelRatio を 1.5 で頭打ち、mobile 0.7。線が細いので 0.7 以上)
   - `SPEED` 膜の走る速さ(0.45)、`ZOOM` 模様の大きさ(desktop 1.0 / mobile 1.3)
   - `LINES` 等高線の本数(14 / 10)、`WIDTH` 線の太さ(1.1px)、`GLOW` 光の強さ(0.5)
   - `PULL` カーソルに集まる強さ(0.7。0で無効)
   - `COLD` `HOT` `ACCENT` の3色
4. アクセントの間隔は FS の `idx*.125`(8本に1本)。`.2` で5本に1本。
5. 線だけを別の背景に重ねるなら、`col` の地の項を 0 にして `gl_FragColor.a = line + glow` で出し、canvas を `alpha:true` にする。