# ページめくり — Style Reference
> ベラム色の紙が右下から斜めに巻き上がり、その奥からセージ色の次の画面が現れる。初期表示は半分めくれた状態。

**Theme:** light  **Series:** PARTS 071  **World:** 手漉き和紙の工房サイト。1ページ目は工房、2ページ目は乾燥。

## Concept
遷移パーツ。2つの画面(A: 工房、B: 乾燥)を2Dキャンバスで描いてテクスチャにし、フラグメントシェーダーで紙を円筒に巻きながら切り替える。静止画で伝わるよう、初期表示はめくり量 0.5。無操作が 2.6 秒続くと 0 と 1 の間を自動で往復する。カーソルの横位置でめくり量を直接操作できる。
色は A が温かいベラム(#F0EFE9)と極細の文字、B が淡いセージ(#D3E4DF)に濃い森緑のパネル(#0D1212)とティール1点(#64D5B3)。遷移中に見える紙の裏は、A の内容を 12% だけ透かした白。

## Signature Technique
WebGL1、全画面クアッド1枚、外部ライブラリなし。2つの画面は `<canvas>`(2D)に描き `texImage2D` で渡す(リサイズ時に描き直し)。

- 座標: `q = (uv.x*aspect, uv.y)`。めくり方向 `dir = normalize(1,-1)`(右下の角から左上へ)。`perp` はその法線。
- 円筒の接線位置 `o = br - dir*(p*(L + r + 0.15) - 0.02)`、L は右下角から左上角への dir 成分。p=0 で角、p=1 で画面外。
- 各ピクセルの `d = dot(q-o, dir)`、`t = dot(q-o, perp)`。
  - `d >= r`: 次の画面 B。筒の影 `1 - 0.3*smoothstep(r+0.16, r, d)`。
  - `0 < d < r`: 筒の上半分。角度 `th = π - asin(d/r)`、紙の位置 `s = th*r`、元の座標 `m = o + dir*s + perp*t`。m が紙の中なら裏面 `mix(白, A(m), 0.12) × (0.55 + 0.45 sin th + 0.18×縁の光)`。紙の外なら B(紙の端がめくれて見える)。
  - `d < 0`: 元の画面 A に、筒の手前に落ちる影 `1 - 0.18*smoothstep(-0.26, 0, d)`。
- 半径 `r = 0.13`(画面の高さを 1 とする)。巻かれた紙は筒に取り込まれる(平らに折り返さない)ので、50% の静止画が A / 筒 / B の3領域に読める。
- 画面 A・B の描画: `drawA()` / `drawB()`。devicePixelRatio(上限 2)の実ピクセルで描く。角丸は `rr()`(半径は幅・高さの半分で止める)。A には rgba(50,45,42,.035) の細かい点で紙の地合いを散らす。

## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| vellum | #F0EFE9 | 画面 A の地 |
| carbon-warm | #322D2A | A の文字、ナビのピル |
| fibre | #E4E1D8 | A の画像(繊維の線画)の地 |
| sage | #D3E4DF | 画面 B の地 |
| forest | #0D1212 | B の濃いパネル、B の文字 |
| teal | #64D5B3 | B のボタンとグラフ線(唯一の有彩色) |
| paper-back | rgb(247,246,242) | 紙の裏面 |

## Typography
- Zen Kaku Gothic New。Google Fonts では Shippori Mincho 500 も読み込んでいるが、現状の描画では使っていない(移植時は外してよい)。A の見出しは 300(極細)で `min(W*0.13, H*0.22)` px、B の見出しは 500 で `min(W*0.12, H*0.2)` px。
- 本文 300、17px 相当(`max(13, 17*u)`、u = min(W/1440, H/900))、ラベル 300 12px 相当。ナビのピルの文字は 500 13px 相当、ティールのピルの文字は 500 14px 相当。
- HUD: 11px(640px 以下 10px)、letter-spacing .14em、line-height 1.8、`mix-blend-mode: multiply`(明るい紙でも暗いパネルでも読める)。

## Spacing & Layout
- 余白 `pad = clamp(20, 5vw, 72)` 相当。A は見出しを左(ベースラインは高さの 56%)、画像を右(幅 `min(W×0.36, H×0.6)`、比 0.78、角丸 `min(80u, 幅×0.18)`)。幅が高さの 0.9 倍以下なら画像を省く。
- B はパネルを右 42%(幅が高さの 0.9 倍以下では高さの 58% から下 34%)、角丸 `min(36u, 24px)`。見出しのベースラインは高さの 42%。
- HUD は右下 18px / 16px(640px 以下は左下 16px)。

## Motion
- 自動往復: 初回 4.0 秒は 0.5 で静止 → 2.2 秒で 0 へ(cubic in-out。0.5 以上なら 0、未満なら 1 へ向かう)→ 1.4 秒静止 → 2.2 秒で 1 へ → … 。
- カーソル: `p = 1 - x/width` を lerp 0.18 で追従。2.6 秒無操作で、0.2 秒止まってから自動に戻る(現在位置から遠い端へ)。
- reduced-motion: 自動往復なし。0.5 で静止し、カーソルで直接変わる(アニメーションなし)。
- WebGL なし: 2D キャンバスで B の上に A を斜めにクリップした静止合成。

## Components
- 画面 A: ナビのピル(濃)、極細の見出し、2行の本文、角丸の繊維画像、左下に「01 / 工房」。
- 画面 B: 500 の見出し、1行の本文、ティールのピル、濃いパネル(ラベル、線グラフ、「02 / 乾燥」)。
- HUD: `VALE / PARTS 071 / ページめくり` と操作説明1行。

## Do / Don't
- Do: 初期表示を 0.5 にして、静止画でも遷移だと分かるようにする。
- Do: 紙の裏に元の内容を薄く透かす(白一色だと紙に見えない)。
- Do: 影は筒の手前(A 側)と奥(B 側)の両方に、短く。
- Don't: 巻いた紙を平らに折り返して画面の上に寝かせない(裏面の白が画面を覆い、静止画で何も読めなくなった)。
- Don't: 半径を 0.2 以上にしない(筒が太すぎて紙に見えない)。
- Don't: B に有彩色を2色以上置かない。

## References
- T1 Energy(stock/refero/md/t1-energy.md): 「温かいベラムの地と極細の文字、80px の大きな角丸、暗いピルのナビ」を抽象化して画面 A にした。工業の題材を和紙の工房に置き換えた。
- Zoox(stock/refero/md/zoox.md): 「淡いセージの地、1枚の濃い森緑のセクション、ティール1色だけを面で使う」を抽象化して画面 B にした。角丸は 36px 相当(上限 24px)、影なし。

## Usage
1. `<canvas id="gl">`、`.hud`、`<script>` ブロックを切り出す。フォントの `<link>`(Zen Kaku Gothic New 300/500)も持っていく。Shippori Mincho は使っていないので外してよい。
2. 遷移させたい2画面は `drawA(ctx)` / `drawB(ctx)` を自分の描画に置き換える。DOM をそのまま使う場合は、各画面を画像(スクリーンショット)にして `texImage2D` に渡す。
3. パラメータは JS 冒頭の `P`:
   - `RADIUS` 筒の半径(0.13。画面の高さ = 1)
   - `MOVE` めくる時間(2.2 秒)、`HOLD` 端で止まる時間(1.4 秒)
   - `IDLE` 無操作から自動に戻るまで(2.6 秒)、`FIRST_HOLD` 初回の静止(4.0 秒)
4. めくる方向を変えるときは FS の `dir`(右下→左上なら `(1,-1)`、右→左なら `(1,0)`)と `br`/`tl` の角を合わせる。
5. 実サイトで「ページ遷移」として使うときは、`target` を 0→1 に一度だけ動かし、1 に着いたら B の DOM を表示して canvas を外す。
6. フォールバック: WebGL なしは 2D の斜め分割、reduced-motion は静止 + カーソル追従。文言は `#hint` に出る。