# ガラスのカード — Style Reference
> 白い紙に薄いセリフの見出し。その右半分に厚いガラス板が1枚乗り、文字がずれて拡大し、縁で曲がって色が割れる。

**Theme:** light  **Series:** PARTS 021  **World:** 原稿の上に指摘を重ねて表示する校正ツール。

## Concept
文章の上に置いた一枚の厚いガラス板。主役は屈折で、板の奥の文字は少し拡大してずれ、縁の丸みでは大きく曲がって色がにじむ。
板の縁は全反射でわずかに暗く、最外周にだけ1.5pxの白い光が走る。紙に落ちる薄い影と合わせて厚みが伝わる。紙は白、文字は墨、板はごく薄い緑。装飾はこの板1枚だけ。
待機位置は見出しの後半(1行目「上に、」と2行目「ねる。」)に重なり、拡大された文字が板いっぱいに見える。カーソルや指に板が寄り、動いた向きに傾いてずれが変わる。

## Signature Technique
全画面1枚の三角形に対するフラグメントシェーダー(WebGL1)。外部ライブラリなし。背景の文章は 2D canvas に描いてテクスチャにする。

- 座標は CSS px(y 上向き)。板のローカル座標 `q = R(rot) * (p - center)`、形は角丸矩形 SDF `rbox(q, half, RADIUS)`。
- 表面: 平らな天面 + 縁の円弧。`e = clamp(-d/BEVEL)`、`k = 1-e`、`slope = k / sqrt(1-k²)`、法線 `n = normalize(grad(SDF)*slope*.9 + q/half*.11, 1)`(天面は凸。中央が膨らんで見える)。
- 屈折: 視線は真上 `(0,0,-1)`。`rr = refract(V, n, 1/IOR)`、横ずれ `off = rr.xy / max(.25, -rr.z) * THICK`。傾けた平板の平行移動 `off += tilt * THICK * .8`。
- 拡大: `ql = q / MAG`(MAG 1.2)。サンプル位置は `center + R⁻¹(ql + off)`。
- 色収差: R と B のサンプルを `off*(1±CA)` にずらす(CA .03)。縁でだけ色が分かれる。.06 だと縁の文字が虹色に割れて安っぽくなる。
- 厚みの色: `col *= mix(1, TINT, .08 + .55*k²)`。縁ほど緑。
- 縁の暗い帯(全反射): `tir = smoothstep(.35,.95,k)`、`col *= 1 - tir*(.36 - .12*lit)`。光源方向 `ld` に対し `lit = .5+.5*dot(grad, ld)`。
- 白い光は2本の細線だけ: 最外周 `rim = exp(-((d+1.2)/1.1)²)` を `(.2+.8*lit)*.7`、天面と丸みの境目 `crease = exp(-((-d-BEVEL)/1.2)²)*.04`。境目の線は .12 だと板の内側に白い枠が見えるので、うっすら分かる程度まで落とす。旧版は `pow(1-n.z)` のフレネルを丸み全体に乗せていたため、縁が白く太く滲んでいた。
- 天面の照り: 斜めの帯 `band = dot(q, normalize(.55, 1))`、`exp(-((band - half.y*.55)/(half.y*.35))²) * .05 * e`(縁の丸みには乗せない)。
- 影: 2層。板を `(4,-16) + tilt*(40,-40)` ずらした SDF で `1 - smoothstep(-10, 46, ds)` を SHADOW(.15)倍した広い影と、ずれを 1/4 にした SDF で `1 - smoothstep(-2, 10, ds)` を .06 倍した接地の影。影を薄く広げ、板の真下だけ締める。
- 縁は `1 - smoothstep(-1.2, 1.2, d)` でアンチエイリアス。
- 光源 `uLight` は `(0.3W, 1.2H)`(y 上向きなので画面の左上やや外)。
- 解像度: desktop `min(dpr,2)`、mobile 1.0。文章テクスチャは `min(dpr,2)`。

## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| --paper | #FBFAF7 | 紙・html背景 |
| --ink | #1B1A18 | 見出し・ボタン地 |
| lead | #3B3936 | 本文 |
| --graphite | #6B6966 | eyebrow・フッター |
| rule | rgba(27,26,24,.08) | 細い罫 |
| --sage | #4F7A64 | 指摘の点・フォーカスリング |
| TINT | #E6F7F0 | ガラスの厚みに付く色 |
| cta-text | #FBFAF7 | ボタン文字 |

## Typography
- 見出し: Noto Serif JP 300、desktop `clamp(44px, 6.2vw, 92px)`、mobile `min(11vw, 48px)`、line-height 1.28、letter-spacing -.01em、中央揃え2行。canvas に描くため DOM には `.sr` で同文を置く。
- 本文: Zen Kaku Gothic New 400、16px(mobile 14px、2行)。
- eyebrow: Zen Kaku Gothic New 500、12px、letter-spacing .26em、英字大文字。
- ロゴ: weight 500 / 12px / letter-spacing .24em。ボタン: weight 500 / 13px / letter-spacing .1em。

## Spacing & Layout
- 1画面 = `100svh`、`grid-template-rows: auto 1fr auto`。文字群は canvas 内で画面中央(cy = 0.5h)を基準に配置。
- 左右余白 `clamp(20px, 5vw, 72px)`、上 26px、下 22px(+safe-area)。
- eyebrow → 見出し 26px、見出し → 本文 56px(mobile 44px)、本文 → 罫 2.4em。
- 板: desktop 250×330px、mobile 150×205px、角丸 18px、縁の丸み 28px(mobile 18px)、厚み 56px(mobile 34px)。
- 待機位置: 中心から `.62*h1`(mobile `.55*h1`)右に板の左端(`rest.x = cx + h1*.62 + CARD_W/2`)。縦は `rest.y = h − (base + lh*.42)` で1行目と2行目の間。
- sage の点: 1行目の右上、中心から `min(.19w, 230px)`(mobile `.24w`)右、半径 3px。
- CTA は下辺から `clamp(40px, 9vh, 96px)`(mobile 34px)。breakpoint 640px で本文2行、フッター2行積み。

## Motion
- 追従 lerp 0.07(フレームごと)。カーソルの有無は 0.05/フレームで切り替わり、離すと待機位置へ戻る。速度から傾き `clamp(v*.06)*TILT`(TILT .5)を作り、動いた向きに倒れる。待機時は REST_TILT (.22,-.14) に `sin` の揺れ(±.05)。
- 位置は `sin(t*.8)*3px` で上下に揺れ、回転は `-.05 + tilt.x*.08` rad。
- requestAnimationFrame 1本、dt は 0〜0.05 秒。`visibilitychange` と IntersectionObserver で停止。
- `prefers-reduced-motion`: 待機位置で1フレーム描き、リサイズとフォント読込後にだけ再描画。フッター文言を差し替える。
- WebGL 非対応: `.still` に DOM の見出しを表示。

## Components
- hero: 全画面。上に社名と業種、中央に文字群(canvas)、下寄りに CTA、最下部にフッター。
- button(.cta): 高さ44px、pill、墨地に紙色の文字。hover で黒くなり1px浮く。focus-visible は sage のリング。
- footer(.bot): 11px、左に操作説明、右に `VALE / PARTS 021 / ガラスのカード`。
- section: このパーツには無い。

## Do / Don't
- Do: ガラスは1枚。2枚以上置くと屈折が重なって読めなくなる。
- Do: 後ろは文字。無地だと屈折が見えない。
- Do: 待機位置は見出しの後半に掛け、板の中を屈折した文字で満たす。白い紙だけの上に置くと白い板に見える。
- Don't: TINT の混合を .3 以上にしない。白く濁った板に見える。
- Don't: THICK を 80px 以上にしない。ずれが大きすぎて別の文になる。
- Don't: 板にロゴや文字を貼らない。透けることが主役。

## References
- Workflow: 白い紙に細いセリフ見出し、残りは Inter 級のサンスという「原稿」の字組みを抽象化。Crimson Pro は使わず Noto Serif JP 300 に替え、sage の緑を点1つに絞った。
- HoneyBook: 小さな英字 eyebrow と墨色の pill ボタンの関係を抽象化。黄色の帯は使わず、色はガラスの薄い緑だけにした。

## Usage
1. `<canvas id="gl">`、`.still`、`#hint`、`<script>` ブロックを切り出す。外部ライブラリは不要。
2. 文字を canvas に描く `drawPaper()` を自サイトの見出しに書き換える。DOM 側に同文を `.sr` で置き、読み上げと検索に残す。`rest.x / rest.y` で板の待機位置を文字に合わせる。
3. canvas は `position:fixed; inset:0`。上に載せる DOM は `z-index:1`。CTA など触る要素だけ `pointer-events:auto`。
4. パラメータは JS 冒頭の `P`:
   - `SCALE` 描画解像度
   - `CARD_W` `CARD_H` 板の大きさ(px)、`RADIUS` 角丸、`BEVEL` 縁の丸み幅
   - `THICK` 厚み(屈折のずれ幅)、`IOR` 屈折率(1.5)、`MAG` 拡大率(1.2)、`CA` 色収差(.03)
   - `TINT` 厚みの色、`SHADOW` 影の濃さ(.15)
   - `FOLLOW` 追従、`TILT` 動いたときの傾き、`REST_TILT` 待機時の傾き
5. 光源は `resize()` 内の `uLight`(`innerWidth*0.3, innerHeight*1.2`。y 上向きなので画面の左上やや外)。縁の明るい側を変えるならここを動かす。
6. 文字以外(写真や UI)を後ろに置くときも `uPaper` のテクスチャを差し替えるだけでよい。