# 布 — Style Reference
> 暗い舞台に深紅のビロードの幕。襞に光が当たり、風でゆれ、引くと開いて見出しが現れる。

**Theme:** dark  **Series:** PLAY 004  **World:** 劇場の幕を一枚ずつ縫う「幕屋」のサイト。幕の後ろに内容があり、客は幕を引いて中を見る。

## Concept
画面全体が緞帳。左右二枚の幕が中央で重なって閉じていて、横に引くかスクロールすると開き、暗い舞台の上の見出しと本文が現れる。幕は布のシミュレーションで、風にゆれ、掴んだ場所が持ち上がる。質感は毛足のあるビロードで、襞の山が光り谷が沈む。色は深紅・金・暗い木の三つだけ。
下のセクションは幕の要素を一つずつ: 01 は生地(光で色が変わるビロード)、02 は襞(ひだ倍率で幕の表情が変わる)、03 は房(飾り紐の揺れ)。

## Signature Technique
**質点ばねの布シミュレーション(Verlet)+ 手続きビロード材質(three.js の ShaderMaterial)。**

1. **布 `Cloth`**: 格子 32×30(スマホ 20×22)。拘束は構造(隣接)、せん断(対角 2 本)、曲げ(2 つ先)の 3 種。`step` で Verlet 積分(減衰 0.985、重力 −2400px/s²、風を z と x に)、`solve` で拘束を 6 回(スマホ 4 回)反復、固定点は重み 0。
2. **吊り元(レール)**: 最上行を固定し、内側の端を `innerX = ∓W/2·open` に置く(open=0.5 で左右それぞれ画面幅の 25% だけ開く)。外端は 80px(スマホ 120px)外へ滑り、固定点は外端から innerX まで等間隔。z は `sin(iπ/2 + π/4)·amp`(4 列で 1 襞)、`amp = 26 + 60·min(1, 1.4·open)`。
3. **垂れの保持**: 各質点を自分の列の吊り元 x へ力 `(px − x)·220` で引き、さらに拘束解決の後に x を `(px − x)·0.5` だけ直接寄せる。下端まで吊り元と同じ幅で開き、V 字や裾の広がりが出ない。
3b. **スポットライト**: 幕のシェーダーに楕円のスポット `uSpot=(0, 0.1H, min(0.36W, 0.62H))` を足す。`pool = 1 − smoothstep(0.82, 1, r)` の縁のくっきりした当たりで、内側の色を `col·1.5·(N·L 半ランバート)` 持ち上げ、縁にフレネルの光沢と暖色の芯。開いた幕の内側の襞だけが照らされる。
4. **風 `windAt`**: 値ノイズ `noise(x/420 + .25t, y/300 − .18t) − .5` に大域のゆらぎを足し、z に ×900、x に ×225。reduced-motion では 0。
5. **掴む**: 幕の上で pointerdown すると最寄りの質点を指に固定(z=70 で手前に持ち上がる)。横に引いた距離 `/ (W·0.32)` が `open` に加算される。スクロールは hero 全体(220vh)の進行 55% で全開。`open` は実時間で `1 − e^(−3.4·dt)` 追従し、布はフレーム間の実時間を 12.5ms 刻みのサブステップ(最大 80)で進める。描画が重い端末でも幕がレールに遅れない。自動の開きは読み込み 0.3 秒後。
6. **ビロード材質 (GLSL)**: 法線に毛並みのノイズ(uv×900、±0.15)と寝た毛の斑(`fbm` → `flip`)を足し、`wrap = (n·L + .5)/1.5` で柔らかい拡散、フレネル `(1 − n·v)^2.6` で縁の光、寝た毛は逆に正面で光る(`(n·v)^3`)。色は DARK `(.14,.02,.05)` → BASE `(.5,.07,.13)`、縁の光 `(.92,.38,.42)`、光源色クリーム。z による遮蔽 `smoothstep(−110, 70, z)` で谷を 0.5 まで暗くする。
7. **描画**: `BufferGeometry` の position を毎フレーム更新して `computeVertexNormals`。透視カメラ fov 32°、距離は画面高さがぴったり収まる位置。`DoubleSide`。
8. **フォールバック**: WebGL 不可のとき幕は出さず、舞台の背景を深紅にして内容を直接見せる。

**01 生地**: 平面 160×100 分割、頂点シェーダで襞の高さ場 `foldH`(縦の正弦 3 本 + fbm の揺れ、上ほど襞が密)を z に 42px、法線に 170px 相当で与える。光源はカーソル(放置時は楕円軌道)。右下に実物の生地写真を 1 枚(幅 `min(34%, 260px)`、3:2、`height:auto` で比率を固定、金 1px の縁)。

**02 襞**: 同じ Cloth(40×20)を金のレールの下に吊り、スライダーのひだ倍率 f で吊り元の間隔を `sx/f` に縮める(1.0〜3.0 倍、0.06/フレームで追従)。列ごとの x 引き戻し ×70 で裾が吊り元の幅を保つ。初期は 1.0 倍から 2.0 倍へ寄せて始まる。

**03 房**: Verlet の鎖 28 節(10 回反復)と 11 本の房の糸(各 9 節、6 回反復)。風で揺れ、掴んで放すと振れる。Canvas2D で芯の暗い線 → 金の線 → 破線のより糸ハイライトの 3 層、房頭は金のグラデーションと深紅の帯。

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --stage | #141010 | 舞台の暗がり。ページの地 |
| --stage-2 | #1C1515 | 02 の地、わずかに明るい段 |
| --wood | #3A2418 | 舞台の床(グラデーションの中間) |
| --red | #7A0F1E | 幕箱(ペルメット)、房頭の帯、フォールバックの幕 |
| --red-2 | #2A0509 | 幕箱の下端の影 |
| velvet BASE | #801221 | 幕の地色(シェーダー、リニア (.5,.07,.13)) |
| velvet SHEEN | #EB616B | 襞の山の光(シェーダー) |
| --gold | #C9A24A | ラベル、レール、房、罫の差し色 |
| --cream | #F1E8D8 | 見出しとボタンと本文の文字 |
| --cream-2 | #B9AE9C | 補足文 |
| --muted | #847A6C | ヒント、フッター |

赤は幕にだけ大面積で使い、UI では金 1 色を差し色にする。

## Typography
- **Zen Old Mincho 700**: 見出し。hero h1 `clamp(34px, 5.2vw, 78px)`、行間 1.25、字間 .01em。セクション h2 `clamp(30px, 4vw, 64px)`、締め `clamp(30px, 4.6vw, 72px)`、ロゴ 20px、スライダーの数値 22px(400)。
- **Zen Kaku Gothic New 400/500**: 本文 16px / 1.7、ボタン 15px 500 字間 .06em、ラベル 12px 500 字間 .22em 大文字(金)、ヒント 13px。
- `font-feature-settings:"palt"`。

## Spacing & Layout
- gutter `clamp(20px, 4vw, 56px)`。
- hero: 220vh のセクションに 100svh の sticky(min 600px)。上端 54px の幕箱、内容は中央揃えで `translateY(−54%)`、床は下 18%。
- 01 / 03: 2 カラム grid(min-height 88vh / 80vh)、760px 以下で 1 カラム、ビューを上に(54vh)。
- 02: 上下 `clamp(56px, 8vh, 96px)`、ビュー `min(52vh, 460px)`、スライダー行は最大幅 520px。
- 締め: 上下 `clamp(120px, 18vh, 220px)`、中央揃え。

## Motion
- 布: 実時間 12.5ms 刻みのサブステップ、減衰 0.985、風は値ノイズで 0.25/s。開閉は `1 − e^(−3.4·dt)`。
- 01 の光: 追従 `1 − e^(−5dt)`、放置時の軌道 0.2/0.17 rad/s。03: 減衰 0.985(鎖)/0.97(糸)。
- rAF は 1 本。各ビューは IntersectionObserver で画面外は停止。
- reduced-motion: 風 0、開閉は即時、光は固定、房は静止したら停止。幕は閉じたままでも引けば開く。
- ヒント「幕を横に引くか、スクロールで開きます。」は最初の操作で消える。

## Components
- **pelmet(幕箱)**: 高さ 54px、深紅の 3 段グラデーション、下端に金の 1px 罫を 2 本、影。
- **hero**: 幕箱 → ロゴ(幕屋 / MAKUYA) → 幕 canvas → 舞台(ラベル・h1・本文・クリームのピルボタン) → ヒント。
- **button**: 高さ 52px、横 28px、`border-radius:999px`、クリーム地に舞台色の文字。`focus-visible` は金の 2px アウトライン。幕の下にあるボタンへのクリックは止め、キーボードは通す。
- **slider**: 2px のトラック、22px の金の丸いつまみ、右に明朝の数値。
- **rod(レール)**: 高さ 14px の金の棒、両端に 22px の飾り玉。
- **footer**: 11px 字間 .2em 大文字、上に薄い罫、`VALE / PLAY 004`。

## Do / Don't
**Do**
- 幕は中央で重ねて閉じる。隙間があると舞台に見えない。
- 襞は 4 列で 1 山の正弦で作る。隣接列の交互では細かすぎてギザギザになる。
- 開いた幕は列ごとに吊り元へ引き戻し、束のまま垂らす。
- 赤は幕だけ。UI の差し色は金 1 色。
- 谷を z で暗くする。これが無いと布が平らに見える。

**Don't**
- 寝た毛の斑(crush)を大きくしない。迷彩柄に見える。
- 幕の固定行の z 振幅を 90px 以上にしない。最上行が歯のように立つ。
- 布の拘束反復を 3 回以下にしない。伸びてゴムに見える。
- 背景に紫や青を混ぜない。舞台の暗がりは赤みのある黒。
- 幕の上に本文を置かない。文字は幕の後ろにある。

## References
- **Splice** (Refero): 深い暗がりの中で色を 1 色に絞り、面に影をつけず質感そのもので奥行きを出す考え方を抜き出した。青の差し色は金に、グラファイトの面は赤みのある黒に置き換え、暗がりの主役を写真からビロードのシミュレーションに変えた。
- **Charlie** (Refero): 黒い画面に赤の面を 1 つだけ置いて緊張を作る構成を参考にした。叫ぶような巨大サンセリフは使わず、赤い面を「開閉する幕」という動く物体にし、文字は幕の後ろに静かに置く明朝に変えた。