# 影絵 — Style Reference
> 障子紙の上にランプが一つ。切り絵の影が、ランプの位置と距離だけで伸び縮みする。

**Theme:** light  **Series:** PLAY 006  **World:** 影絵芝居。障子紙を後ろから照らすランプと、紙の前に立てた切り絵(木・野うさぎ・座った子ども・草・鳥)。

## Concept
画面全体が一枚の障子紙。カーソル(スマホでは指)がランプになり、切り絵の影がランプと反対側へ伸びる。ランプを切り絵に近づけるほど影は大きくなり、縁はランプの炎の大きさの分だけぼける。止めるとランプはゆっくり定位置へ戻り、スクロールで定位置が少しずつ動く。
主役は影そのもの。影は 2D の距離場をレイマーチして求める物理的に筋の通ったもので、画像や固定の影を一切使わない。文章は左上に 1 画面 1 見出し + 一文。配色は紙の生成りと影の墨、ランプの橙だけ。

## Signature Technique
three.js r170(WebGL2)の全画面 ShaderMaterial 1 枚 + 2D canvas 1 枚。RAF 1 本。

切り絵
- 13 本の SVG パス(自作。1000×600 の設計箱、地面 y=600)。木・野うさぎ・座った子ども・草 8 本・鳥 2 羽。
- 木は手続き生成。枝は `strip(points, w0, w1)` で折れ線を先細りの帯にする(幹 26→12、枝 11→2.5、小枝 4→1.5)。葉は `clump(cx, cy, r, seed)`: 26〜33 頂点、3〜4 個の丸み `0.8 + 0.2·sin(lobes·a)` に、偶数/奇数頂点で 1 : 0.74 のギザギザ(鋏の刻み)を乗せた塊を枝先に 9 個。丸い団子にしない。
- 野うさぎと子どもは `bladeCuts(d, step, seed)` で輪郭に刃の跡を入れる。輪郭を 1.5 刻みでたどり、15〜18 ごと(±40%)に内向きの細い切れ込み(口の幅 1.6、深さ 6〜13、傾き ±0.35rad)を差し込む。地面の線と、切れ込みが外へ抜ける細い部分は避ける。
- 配置: PC は `S = clamp(max(W/1000, H/900), -, 1.7)`、右端を画面右に合わせる(`TX = W − 1000S`)。スマホは `S = clamp(H/1250, 0.5, 0.72)` で設計箱の中心を画面中心に。下端は常に画面下端(`TY = H − 600S`)。
- 輪郭は `SVGPathElement.getPointAtLength` で 5 単位ごとにサンプルして多角形にする(合計約 700 辺)。
- 見た目の切り絵は 2D canvas の `Path2D` で #1B1713 に塗る(輪郭をくっきり保つため)。WebGL 不可でもこの層は残る。

距離場(SDF)
- 画面の 0.2 倍(スマホ 0.3 倍)の解像度で CPU 計算。各テクセルについて全辺への最短距離の min、内外は多角形ごとの交差数判定。符号付き距離をピクセル単位で `HalfFloatType` の `DataTexture`(RedFormat、LinearFilter)に格納。
- 読み込み時とリサイズ(150ms デバウンス)時だけ再計算(1440×900 で約 150ms)。

影のレイマーチ(フラグメント)
- 画素 p(y 下向きのピクセル座標)からランプ l へ向かって進む。`t = 1.5` から始め、`h = sdf(p + dir·t)`、`h < 0.35` なら完全に影、`res = min(res, h·L / (t·r))`(r = ランプ半径 18px、スマホ 14px。区画の定位置ごとに ×0.8〜×2.8)、`t += clamp(h, 2, 48)`。最大 56 歩(スマホ 36)。
- `res` を smoothstep して半影にする。ランプに近い遮蔽物ほど `L/t` が大きく縁が硬い。遠いほど柔らかい。
- 光: `fall = 1 / (1 + (L / 0.62H)^2.2)`。`lit = paper · (0.28 + 1.05·fall·flick·shadow) · mix((0.88,0.90,0.95), (1.0,0.86,0.62), fall·shadow)`。影の中は冷たい灰、照らされた所は暖色。
- ランプ: `exp(−L/(2.6r))·0.9 + exp(−L/(9r))·0.18` の橙のグロー + 半径 0.35〜0.75r の白い芯。炎の揺れは `0.94 + 0.06 sin(9.3t) sin(2.7t+1) + 0.03 sin(23t)`。
- 紙: 障子紙の写真(512px webp、data URI)を画面全体に 1 枚貼り、生成り色 (0.95,0.91,0.83) と 0.38 で混ぜる。周辺減光 0.86 + 0.14v。

ランプの動き
- ポインタ移動(マウス、または押しながらの指)でランプの目標が追従(補間 0.18)。2.6 秒止まると定位置へ戻る(補間 0.035)。
- 定位置は区画ごとに 1 つ(`STOPS`: 画面比の x, y と炎の半径倍率)。PC は hero (0.1, 0.76, ×1) → 01「光は一つ」(0.08, 0.7, ×1) → 02「近いほど、大きい」(0.2, 0.86, ×0.8。うさぎの足もとへ寄せ、影が紙の端を越える) → 03「縁はぼける」(0.1, 0.74, ×2.8。炎を大きくして半影を広げる) → 04「影だけで足りる」(0.26, 0.5, ×1。高い位置から短く鋭い影) → 締め (0.13, 0.66, ×1)。スマホは (0.15,0.62,1)(0.12,0.66,1)(0.1,0.8,0.8)(0.12,0.62,2.6)(0.3,0.5,1)(0.2,0.6,1)。スクロール進行度 `prog` を区画数で割り、各区画の前後 20% は定位置に留まり、間の 60% を smoothstep で移る。炎の半径は 0.05/フレームで追従し `uLampR = 18px(スマホ 14px)× 倍率`。読み進めるだけで、本文の言っている影の変化が画面で起きる。
- 待機中も `sin(0.7t)·6px`、`cos(0.9t)·4px` で揺れる。

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --paper | #EFE7D8 | ページ地、フッター地、WebGL 不可時の地 |
| --paper-dim | #CFC4B0 | 影の中の紙(シェーダーでは paper × 0.28 × 冷色) |
| --ink | #1B1713 | 文字と切り絵とボタン罫とラベル罫 |
| --mute | #6E655A | ラベルとヒントとフッターの文字 |
| --line | rgba(27,23,19,.22) | フッター罫 |
| --lamp | #F2A23A | ランプの橙。focus ring。シェーダーでは (1.0,0.62,0.22) のグロー |
| warm light | (1.0,0.86,0.62) | 照らされた紙の色味 |
| shadow tint | (0.88,0.90,0.95) | 影の中の色味。わずかに青い |

## Typography
- Zen Old Mincho 1 書体のみ。見出し 700、本文・ラベル 400。
- h1 `clamp(96px,17vw,250px)` 行間 1 字間 −.03em。h2 `clamp(36px,4.8vw,66px)` 行間 1.15 字間 −.01em。
- 本文 `clamp(16px,1.35vw,20px)` 行間 1.95、最大 28 字。
- ラベル・ヘッダー・フッター 11px 字間 .22em 大文字(日本語ラベルは字間 .18em)。10px 台と 200px 台だけで中間サイズを使わない。
- スマホ: h1 `clamp(84px,24vw,120px)`、h2 `clamp(32px,9vw,44px)`、本文 15px。

## Spacing & Layout
- 各セクション `min-height:100svh`、上寄せ。内側余白 `18vh 7vw 12vh`(スマホ `16vh 20px 44vh`。下を空けて切り絵に文章を重ねない)。
- 文章ブロック最大幅 720px。1 画面に見出し 1 本 + 一文。
- 切り絵は画面下端に立ち、PC では右寄せ。文章の列(左 7vw〜)は紙だけ。
- ヘッダー/フッター 28px(スマホ 20px)。フッターは紙色の帯で切り絵の上に乗る。
- breakpoint: 640px。

## Motion
- ランプ追従 0.18、帰還 0.035。炎の揺れと位置の揺れは常時。
- スクロール連動は区画ごとの定位置と炎の大きさだけ。区画の前後 20% は留まり、間で smoothstep で移る。炎の半径は 0.05/フレームで追従。
- `prefers-reduced-motion`: 揺れと炎のちらつきを止め、補間なしで追従。描画はポインタ/スクロール/リサイズ時だけ(移動中は収束まで描く)。
- WebGL2 不可: WebGL canvas を隠し、放射グラデーションの紙地に 2D canvas の切り絵だけを残す。左下に一行で案内。

## Components
- hero: ラベル(切り絵と障子紙 — ランプは一つ)+ h1「影絵」+ 一文 + 縦罫つきヒント。ヒントはポインタ移動か 40px スクロールで消える。スマホは「指でなぞるとランプが動く」。
- section: 番号ラベル(01 — 光源 … 05 — 幕)+ h2 + 一文。
- button: 透明地に墨 1px の丸薬形、`15px 28px`、15px 字間 .12em、右に小さな山形。hover で墨地に紙色の文字。focus-visible は橙 2px の outline。
- footer: 上罫 1 本、紙色の帯、`VALE / PLAY 006` と `Shadow play — demo` を両端に。

## Do / Don't
Do
- 光源は一つ。影の向きと長さはランプの位置だけから決める。
- 切り絵は自作の単純な輪郭で。シルエットで何か分かる形にする。
- 文章は影の掛からない左の列に置く。ランプは切り絵の左に戻す。
- 紙の質感は薄く。生成り色と 4 割以下で混ぜる。
Don't
- 影を画像やぼかしフィルタで置かない。距離場のレイマーチだけ。
- 既存キャラクターの形を使わない。
- 色を足さない。橙はランプだけ。
- 切り絵を増やして画面を埋めない。木 1 本と動物 1 匹と人 1 人と鳥 2 羽と草だけ。

## References
- OFF+BRAND.: 温かい生成りの地に、ほぼ無彩色の構成で巨大な見出しと細いラベルだけを置き、彩度のある要素を一つに絞る、という組み立てを抽象化した。虹色の球はランプの橙の光に置き換え、書体はジオメトリックサンズから Zen Old Mincho にした。
- Oakâme: 10px 台の字間広いラベルと 120〜250px の見出しだけで中間サイズを使わない極端な比率、角丸の丸薬形コントロールと罫だけの UI、暖かい石の地色を抽象化した。写真が主役の構成は、切り絵と影のレイマーチに置き換えた。