# 置き換えホバー — Style Reference
> 深い常緑の面に、写真のパネルが1枚。夜の居間の写真が波に溶けて、昼の白い部屋へ入れ替わる。

**Theme:** dark  **Series:** PARTS 091  **World:** 暗い部屋でも明るい部屋でも同じ音で鳴るスピーカーの工房。

## Concept
画像パネルのホバー効果。主役は変位マップで、2枚の写真を互いに逆向きにずらしながら混ぜる。進み具合はカーソルの横位置で決まり、触らなければ 50% の途中状態を数秒見せてから自動で往復する。
左に細い明朝の見出しと短文、右に写真。色は常緑の黒とクリームだけで、写真の色が主役になる。

## Signature Technique
WebGL1 フラグメントシェーダー。canvas はパネルの大きさだけ。画像は左右2枚を横に並べた1ファイル(`assets/pair.webp`、2400×675)。

- 変位マップは手続き生成(画像不要):
  ```glsl
  float dispMap(vec2 uv){
    float w = sin(uv.y*WAVE*6.2831 + t*.4 + fbm(uv*NOISE)*4.)*.5+.5;   // 縦の波
    float n = fbm(uv*NOISE*1.7 + vec2(t*.05, 0.));                      // ノイズ
    return mix(w, n, .55);
  }
  ```
  WAVE 1.6、NOISE_SCALE 1.4、fbm 3 オクターブ。
- 置き換え: `d = dispMap(uv) - .5`、A は `uv + DIR*d*INTENSITY*p`、B は `uv - DIR*d*INTENSITY*(1-p)`(DIR (1, .35)、INTENSITY .14)。出てくる側と押し出される側が逆向きに動く。
- 色のずれ: R と B を `DIR*CA*p*(1-p)*4` だけ逆にずらす(CA .004)。途中でだけ出る。
- 混合: `m = smoothstep(0,1, (p-.5)*1.6+.5 + d*.9*p*(1-p)*4)`。混ぜ方も変位で揺らし、波の縁で切り替わる。縁は `(1-|2m-1|)*p(1-p)*4*.06` だけ明るく。
- cover: 画像の半分(16:9)をパネル比に合わせて `uCover` で拡大し、`clamp` で縁を止める。
- 進み: `p` はカーソルの横位置へ lerp(.07)。無操作時は 3 秒待ってから `.5 + .5*sin(phase)`(周期 12 秒)で往復。復帰時は位相を現在値へ合わせる。
- 解像度: `min(dpr, 2)`。

## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| --forest | #0E1E14 | 背景 |
| panel-bg | #0A160F | パネルの地・下辺のグラデーション |
| --cream | #FFFCDA | CTA 地・進みバー |
| --frost | #FFFFFD | 見出し・ロゴ |
| --mist | rgba(255,252,218,.6) | 本文・eyebrow・キャプション |
| --line | rgba(255,252,218,.14) | バーの下地 |
| cta-text | #0E1E14 | ボタン文字 |

## Typography
- 見出し: Noto Serif JP 400、`clamp(30px, 3.4vw, 50px)`、line-height 1.4、letter-spacing .02em、左揃え2行。mobile `clamp(26px, 6.6vw, 34px)`。
- 本文: Zen Kaku Gothic New 400、`clamp(14px, 1.1vw, 16px)`、line-height 1.95、最大 24em。`word-break: auto-phrase` と `text-wrap: pretty` で文節の途中で折り返さない。
- eyebrow / ロゴ / キャプション / フッター: Inter。eyebrow 500 / 12px / .24em、ロゴ 700 / 12px / .22em、キャプション 11px / .18em。
- CTA: Zen Kaku Gothic New 500 / 13px / .1em。

## Spacing & Layout
- 1画面 = `100svh`、`grid-template-rows: auto 1fr auto`。中段は `grid-template-columns: 5fr 8fr`、gap `clamp(28px, 5vw, 80px)`、縦中央。
- 左右余白 `clamp(20px, 5vw, 72px)`、上 26px、下 22px(+safe-area)。
- eyebrow → h1 22px、h1 → lead 20px、lead → CTA 30px。
- パネル: `aspect-ratio 16/10`、角丸 6px、影 `0 30px 60px -30px rgba(0,0,0,.8)`。キャプションは左下 14px/12px、幅 60px のバー。
- breakpoint 860px: 1列、パネルが先(4:3)、文字は下。

## Motion
- 進み `p` の lerp .07(無操作時 .042)。自動往復は 3 秒後から周期 12 秒。
- 変位マップは `t*.4` で波が流れ、同じ p でも形が少し変わる。
- 1 rAF、`visibilitychange` と IntersectionObserver(パネル)で停止。
- `prefers-reduced-motion`: 自動往復なし。50% で静止し、カーソルを動かした時だけ追従する。
- WebGL 非対応・画像失敗: `.panel.nogl` で `<img>`(左半分を object-fit で表示)に切り替える。

## Components
- hero: 全画面。上に工房名と業種、中段左に eyebrow / h1 / lead / CTA、右にパネル。
- panel(.panel): canvas + 予備の img + キャプション(NIGHT / バー / DAY)。下辺 34% に暗いグラデーション。
- button(.cta): 高さ44px、pill、クリーム地に常緑の文字。hover で白くなり1px浮く。focus-visible はクリームのリング。
- footer(.bot): 11px、左に操作説明、右に `VALE / PARTS 091 / 置き換えホバー`。

## Do / Don't
- Do: 2枚は同じ被写体・違う状況(夜と昼、前と後)。入れ替わる意味が出る。
- Do: INTENSITY は .1〜.2。それ以上は写真が壊れて見える。
- Do: 途中の状態を初期表示にする。静止画でも効果が伝わる。
- Don't: 変位の向きを縦横両方に強くしない(DIR の y は .5 以下)。
- Don't: CA を .01 以上にしない。安いグリッチに見える。
- Don't: パネルの外まで変位を広げない(clamp を外さない)。

## References
- Symbol Audio: 常緑の黒とクリームという家具的な配色を抽象化。製品写真をそのまま主役にした。
- Charlie: 黒の面に白い文字と1か所の赤という緊張感を抽象化。赤は使わず、動く写真パネルを「1か所の色」にした。

## Usage
1. `.panel` ブロック(canvas / img / cap)と `<script>`、`.panel` 系の CSS を切り出す。外部ライブラリは不要。
2. 画像は「左に A、右に B」を横に並べた1枚にする(同じ高さ、各 16:9 推奨)。`<img src>` と alt を差し替える。
3. パラメータは JS 冒頭の `P`:
   - `DPR` 描画解像度
   - `INTENSITY` 変位の大きさ(.14)、`DIR` 向き((1, .35))
   - `WAVE` 波の本数(1.6)、`NOISE_SCALE` ノイズの細かさ(1.4)、`CA` 色のずれ(.004)
   - `IDLE_PERIOD` 往復の周期(12s)、`IDLE_DELAY` 往復を始めるまでの秒数(3s)
   - `FOLLOW` 追従(.07)、`START` 初期の進み(.5)
4. ホバーで一気に切り替える仕様にするなら、`pointermove` の `st.target = x/width` を `pointerenter → 1 / pointerleave → 0` に替える。
5. 変位を画像で与えるなら `dispMap()` を `texture2D(uDisp, uv).r` に替え、2枚目のテクスチャを bind する。