# 万華鏡 — Style Reference
> 生成りの紙の上で、画面全体が筒の中。中央の円だけ読め、まわりは色ガラスの折り返し

**Theme:** light  **Series:** PLAY 005  **World:** 反射と回転。三枚鏡の筒に入った色ガラス片。

## Concept
画面全体が万華鏡の筒の中。中央の円(半径 R)は無変形で本文が読め、その外側は 1 つの扇形(くさび)を角度方向に鏡写しで敷き詰めた模様になる。色ガラス片はくさびの中だけに存在し、反射で画面いっぱいに増える。スクロールで筒が回り(回転角 = scrollY × .0016 rad)、分割数が 6 から 16 へ、半径方向の折り返し回数が 1 から 3 へ増えて模様が細かくなる。現在の区画の見出しもくさびの中に置かれ、反射されて模様の一部になる。カーソルの反射に触れた破片は逃げ、模様が組み変わる。
色は紙の生成りと墨だけ。色は破片が持ち、UI には使わない。
開いた瞬間に伝えること: 「万華鏡を覗いていて、真ん中だけが読める」。静止画でも折り返し模様が見える。

## Signature Technique
1. **万華鏡シェーダー(WebGL2、全画面 1 パス)**
   - 画面中心からの座標 `p`(CSS px)。`r < R` は `source(p)` をそのまま描く。
   - 外側: `a = atan(p) + uRot`、`seg = 2π/N`、`a2 = mod(a, seg)`、`a2 > seg/2` なら `seg - a2`(角度の鏡写し)。半径は `L = (画面対角/2 - R)/M` ごとに `f = fract((r-R)/L)` を偶奇で反転(半径方向の鏡写し)、`rr = R + f·L`。`q = (cos a2, sin a2)·rr` で `source(q)` を引く。
   - 継ぎ目: `a2` が 0 または `seg/2` に近い場所と `f` が 0/1 に近い場所を 8〜12% 暗くし、鏡の縁に見せる。円の境界は `smoothstep(R-10, R+10)` で羽化。隅は筒の端として 18% 落とす。
   - N = `round(6 + p·10)`、M = `1 + floor(p·3)`、`p` はページ全体のスクロール進行度。
2. **`source(p)`: 色ガラス片の手続き描画**
   - 破片 14 枚(モバイル 10)。各破片は `{x, y, rot, scale, sides(3〜5), color, stretch}` を uniform 配列で渡す。
   - 形は正 n 角形の SDF `sdPoly` に頂点ごとの乱れ(±17.5%)を加えたもの。縦横比 `stretch` で引き伸ばす。
   - 透過色: `pass = mix(1, tint, .7·thick)` を紙の色に乗算(重なった破片は色が混ざって濃くなる)。`thick` は破片の下側で厚い。切り口 `|d| < .025` を 32% 暗くして破片の輪郭を締め、縁 `|d| < .09` に光(`sin(2θ)` で揺れる、強さ .45)、内側左上に泡のハイライト。
   - 紙: (.953,.941,.91) + 粒状ノイズ ±.006。折り返し側の最暗は (.1,.09,.12) で止める。
   - 見出し: 2D canvas(768×160、Noto Serif JP 600 96px)をテクスチャにし、くさびの中心角 `π/N·.5`、半径 `1.7R` の位置に幅 `1.25R` で置いて墨 60% で乗せる。
3. **破片の運動(JS、極座標)**
   - 破片はくさび内の極座標 `(a, r)` を持つ。`a` は `[-.08, 1.08]·π/6`、`r` は `[1.04R + .5sc, R + L + .3sc]` に弾性で留める。ゆらぎは `sin/cos(t·.17〜.3 + 位相)`。減衰 `.2^dt`。
   - カーソル: 画面座標を同じ折り返し(角度の mod と鏡写し、半径の偶奇反転)でくさび座標に変換し、`d < .9R` の破片を `700·k` で押す(反射を押すと元の破片が動く)。押されると回転も乱れる。
4. **読める円**: DOM の `.disc`(直径 2R、`rgba(250,249,245,.82)` の生成り、1px の輪郭と 60px の生成りのグロー)を各区画の中央に置く。シェーダーの無変形領域と同じ半径なので、区画が中央にあるとき文字は紙の上に直接見える。

```glsl
float a=atan(p.y,p.x)+uRot; float seg=2.*PI/uN;
float a2=mod(a,seg); if(a2>seg*.5) a2=seg-a2;
float t=(r-uR)/L; float k=floor(t); float f=fract(t); if(mod(k,2.)>.5) f=1.-f;
vec2 q=vec2(cos(a2),sin(a2))*(uR+f*L);
vec3 col=mix(source(p),source(q),smoothstep(uR-10.,uR+10.,r));
```

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --ivory | #f3f0e8 | 紙。画面全体の地、footer |
| --ivory2 | #faf9f5 | 読める円の地(82%)、ガラス写真の円 |
| --ink | #1b1a17 | 見出しとワードマークとボタン |
| --sub | #4c4a44 | 本文 |
| --mute | #8a877e | ラベル、脚注、計測値のラベル |
| --line | #d9d5cb | footer の罫線 |
| glass ruby | #d62942 | 破片 |
| glass amber | #ed9e33 | 破片 |
| glass cobalt | #3361d6 | 破片 |
| glass emerald | #2ba66b | 破片 |
| glass rose | #e6669e | 破片 |
| glass teal | #2bb0b0 | 破片 |
| glass lemon | #fad140 | 破片 |
| glass violet | #9438b3 | 破片。紫は破片の 1 色としてのみ |

## Typography
- 見出し: Noto Serif JP 600。h1 `clamp(44px, 6.5vw, 88px)` line-height 1.1、letter-spacing .04em。h2 `clamp(22px, 2.6vw, 34px)` line-height 1.45(モバイル 20px)。
- 本文: Zen Kaku Gothic New 300、`clamp(13.5px, 1.05vw, 15px)`、line-height 1.9、最大幅 22em、中央揃え。
- ラベル: DM Mono 400 11px、大文字、letter-spacing .14em。計測値(分割/回転/反射)は 12px、tabular-nums、値だけ墨。
- くさびの中の見出しは同じ Noto Serif JP をテクスチャ化したもの。文字は反射で逆さや鏡文字になるが、読ませない前提。

## Spacing & Layout
- 横余白 `--gx: clamp(20px, 5.5vw, 84px)`。区画は `min-height: 100svh`、`place-items: center`、上下 `clamp(72px, 10vh, 120px)`。
- 読める円 `--R: clamp(150px, 21vw, 300px)`(640px 未満は 172px)、内側パディング `clamp(22px, 3.4vw, 44px)`。文字は円の中で縦積み、gap 14px。
- 中身の区画だけ円が写真(色ガラス片)で、下にキャプション。
- 締めは円の中にボタン。footer は 1px 罫線と 2 ラベル。

## Motion
- rAF は 1 本。`visibilitychange` で停止。
- 回転はスクロールに直結(.0016 rad/px)。分割数と反射回数はスクロール進行度で段階的に変わる。
- 破片はゆっくり漂い(減衰 .2^dt)、カーソルの反射に触れると 700·k の力で逃げ、回転が乱れる。
- 「入れ替える」で破片を新しく配り、トップへ戻る。
- `prefers-reduced-motion: reduce`: 破片の漂いとカーソル反応を止め、回転と分割はスクロール位置に直結のまま(静止画として成立)。
- WebGL2 が無い場合: canvas を消し、紙の上に円と文字だけを出し、hero に 1 行の説明を出す。

## Components
- Inside の説明: 写真の円の下に、紙色 94% の角丸 28px の札を敷き、その上に見出しと本文を置く(模様の上で文字が読めるように)。
- hero: 読める円に英字ラベルと h1 と 2 文と操作説明(タッチ端末で文言差し替え)。
- section: 読める円に英字ラベルと h2 と 1 文。「回す」の円だけ計測値 3 つ(分割・回転・反射)を実値で表示。
- glass: 直径 2R の円に写真、内側に 1px の輪郭と 80px の影。
- button: 角丸 999px、墨の塗り、hover で反転、focus-visible は墨 2px。
- footer: `VALE / PLAY 005` と `設計と実装: VALE`。
- header: ワードマークと `Play 005` を生成り 78% の丸いピルに載せ、模様の上でも読めるようにする。

## Do / Don't
- Do: 破片はくさびの中だけに置く。画面全体に置くと反射で増えない。
- Do: 中央の円は無変形のまま、文字は円の中に収める。円から出た文字は読めない。
- Do: 紙の色は温かい生成りに留め、UI は墨 1 色。色は破片だけに任せる。
- Don't: 分割数を 20 以上にしない。破片が線になって模様が消える。
- Don't: 破片の透過を強くしすぎない(.7 以下)。重なると黒くなる。
- Don't: 回転を自動で回さない。スクロールで回すから「覗いている」感覚になる。

## References
- Anthropic: 「温かい生成りの紙の上に、セリフの見出しと静かな本文を置く」構成と配色の考え方を借りた。粘土色のアクセントは使わず、色をすべて破片に移した。
- Ui(shadcn): 「白い紙に墨 1 色、ヘアラインと大きな角丸で区切る」無彩色の規律を借りた。カードの代わりに円を使い、罫線は footer の 1 本だけにした。