# ビロード — Style Reference
> 深紅のビロードの幕が画面を埋める。襞の稜線が桃色に光り、光を動かすと毛並みの明暗が入れ替わる。

**Theme:** dark  **Series:** PARTS 024  **World:** 赤い幕の小さな劇場。今月の演目と開演時間を載せるサイト。

## Concept
全画面のビロードの幕。主役は布のシェーダーで、フレネル(縁が光る)と逆フレネル(正面で毛の奥が見えて暗い)を毛並みの向きで切り替える。
寝た毛の斑では関係が反転し、同じ光で明暗が入れ替わる。これが「光の向きで色が変わる布」の正体。
文字はクリーム1色で中央に1本。ボタンもクリーム。色は幕の赤だけに任せる。

## Signature Technique
全画面1枚の三角形に対するフラグメントシェーダー(WebGL1)。外部ライブラリなし。

- 襞の高さ場(縦の襞、上で密・下で広がる、ゆっくり揺れる):
  ```glsl
  float height(vec2 p, float t){
    float wob = fbm(p*vec2(.9,.5) + vec2(0., t*.08)) * SWAY;   // SWAY .35
    float gather = mix(1.25, .85, p.y);
    float x = p.x*FOLDS*gather + wob*3.;                        // FOLDS 7 (mobile 5)
    float h = sin(x)*.55 + sin(x*2.1+1.7+wob*2.)*.22 + sin(x*.47+wob)*.35;
    return h + fbm(p*1.7 + vec2(t*.03,0.))*.35;
  }
  ```
  法線は有限差分(e = .004)、傾き `g = dh/e * DEPTH * .06`(DEPTH 3.2)。
- 毛並み: `nap = (noise(fc/NAP_SCALE) - .5) * NAP`(NAP .28、NAP_SCALE 2.2px)。
- 寝た毛の斑: `crush = fbm(p*CRUSH_SCALE)*2-1`、`flip = smoothstep(-.15,.15,crush)`(0 寝ている / 1 立っている)。寝た毛は `lay = (0,-.6)*(1-flip)*CRUSH` で下向きに傾く。
- 法線 `n = normalize(vec3(-g + nap + lay, 1))`。
- 視線 `V = normalize(((.5*asp,.5) - p)*.35, 1)`、光 `L = normalize((mouse - p, LIGHT_Z))`(LIGHT_Z .7)。
- ビロードの反射:
  - フレネル `fres = pow(1 - n·V, FRESNEL)`(FRESNEL 2.6)
  - 逆フレネル `inv = pow(n·V, 3)`
  - `sheen = mix(inv*.9, fres, flip)` — 立った毛は縁で、寝た毛は正面で光る
  - `col = mix(DARK, BASE, wrap*.85+.15)`(wrap = (n·L+.5)/1.5)
  - `col += SHEEN_COL * sheen * SHEEN * (.35+.65*n·L)`、`col += LIGHT_COL * pow(n·L,6) * .12 * (1 - flip*.5)`
- 仕上げ: 襞の谷 `smoothstep(.6,-.6,h)` で 35% 暗く、粒 `.96+.08*noise(fc/NAP_SCALE*1.7)`、周辺減光 `1 − .35·(|uv − (.5,.45)|·1.25)^2.2`。
- NAP_SCALE は SCALE を掛けて渡すので、毛並みの粒は CSS px で一定の細かさになる。
- 解像度: desktop `min(dpr,1.5)`、mobile 0.6 倍。

## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| --velvet | #3A0B16 | html背景(読み込み前) |
| DARK | #290812 | 毛の奥(暗部) |
| BASE | #6B1224 | 布の地色 |
| SHEEN_COL | #F27385 | 毛先の光(桃色) |
| LIGHT_COL | #FFEDD1 | 光源の色(クリーム) |
| --cream | #FFF6E5 | 見出し・ロゴ・ボタン地 |
| --cream-mute | rgba(255,246,229,.62) | ヘッダー右・フッター |
| eyebrow | rgba(255,246,229,.92) | eyebrow。幕の明るい襞の上でも読めるよう濃くする |
| lead | rgba(255,246,229,.86) | 本文 |
| cta-text | #2A0810 | ボタン文字 |

## Typography
- 見出し: Shippori Mincho 600、`clamp(40px, 6.6vw, 92px)`、line-height 1.22、letter-spacing .02em、中央揃え。mobile `clamp(36px, 10vw, 50px)` で `<br class="m">` 2行。`text-shadow 0 2px 24px rgba(20,0,6,.45)` で幕から浮かせる。
- 本文・ラベル: Zen Kaku Gothic New。本文 400、`clamp(14px, 1.15vw, 17px)`、line-height 1.9、最大 30em、`<br>` で2文に分ける。
- eyebrow: weight 500 / 12px、letter-spacing .26em(mobile .18em)、`text-shadow 0 0 2px rgba(20,0,6,.5), 0 1px 12px rgba(20,0,6,.7)`。ロゴ: weight 500 / 12px / .24em。ヘッダーは `0 1px 10px rgba(20,0,6,.6)` の影で桃色の照りの上でも沈ませない。
- 本文の影: `0 1px 12px rgba(20,0,6,.5)`。
- ボタン: weight 500 / 13px / letter-spacing .1em。

## Spacing & Layout
- 1画面 = `100svh`、`grid-template-rows: auto 1fr auto`。本文ブロックは中央、最大幅 980px。
- 左右余白 `clamp(20px, 5vw, 72px)`、上 26px、下 22px(+safe-area)。
- eyebrow → h1 28px、h1 → lead 26px、lead → CTA 36px。
- breakpoint 640px: 襞 5本、本文最大 24em、フッター2行積み。

## Motion
- 光源 lerp 0.06、カーソル有効度は 0.04 で立ち上がる。待機時は `(.5+.4*sin(t*.18), .8+.1*cos(t*.13))` を回る(舞台照明が上手から下手へ)。
- 襞は `t*.08` の fbm で揺れ、形が数十秒で変わる。
- requestAnimationFrame 1本、dt は 0〜0.05 秒。`visibilitychange` と IntersectionObserver で停止。
- `prefers-reduced-motion`: t=12、光源 (.62,.8) の静止フレームを1回描く。フッター文言を差し替える。
- WebGL 非対応: `.still` に repeating-linear-gradient の襞 + 縦のグラデーション。

## Components
- hero: 全画面。上に劇場名と業種、中央に eyebrow / h1 / lead / CTA。
- button(.cta): 高さ44px、pill、クリーム地に深紅の文字。hover で白くなり1px浮く。focus-visible はクリームのリング。
- footer(.bot): 11px、左に操作説明、右に `VALE / PARTS 024 / ビロード`。
- section: このパーツには無い。

## Do / Don't
- Do: 幕は1色。桃色の光は毛先の色として1色だけ足す。
- Do: 文字はクリーム1色、text-shadow で幕から浮かせる。
- Do: CRUSH は .3〜.5。斑が強いと襞が消える。
- Don't: 襞を増やしすぎない(FOLDS 10 以上で縞模様になる)。
- Don't: NAP を .5 以上にしない。砂目になって布に見えない。
- Don't: 幕の上に装飾を置かない。文字と pill ボタンだけ。

## References
- Allfeat: 炭色の面に温かいクリームの文字という配分を抽象化。炭色を深紅のビロードに置き換え、青緑の光は使わず、光の色を毛先の桃色にした。
- Tana: 暗い面に淡い色のボタンが1つという「色は1か所」の考え方を抽象化。ライムは使わず、ボタンの色を文字と同じクリームにして幕の赤を主役にした。

## Usage
1. `<canvas id="gl">`、`.still`、`#hint` と `<script>` ブロックを切り出す。
2. canvas は `position:fixed; inset:0`。上に載せる要素は `position:relative; z-index:1`。文字は明るい色にし、text-shadow を付ける。
3. パラメータは JS 冒頭の `P`:
   - `SCALE` 描画解像度倍率
   - `FOLDS` 襞の本数(7 / mobile 5)、`DEPTH` 襞の深さ(3.2)、`SWAY` 揺れ(.35)
   - `NAP` 毛並みの乱れ(.28)、`NAP_SCALE` 細かさ(2.2px)
   - `CRUSH` 寝た毛の斑(.45)、`CRUSH_SCALE` 斑の大きさ(1.5)
   - `FRESNEL` 縁の光の指数(2.6)、`SHEEN` 縁の光の強さ(1.0)、`LIGHT_Z` 光源の高さ(.7)
   - `DARK` `BASE` `SHEEN_COL` `LIGHT_COL` の4色
4. 色替え: 紺のビロードなら `DARK [.04,.05,.14]`、`BASE [.10,.14,.36]`、`SHEEN_COL [.55,.65,.95]`。緑なら `BASE [.06,.24,.16]`、`SHEEN_COL [.55,.9,.7]`。
5. 幕を横に垂らすなら `height()` の `p.x` と `p.y` を入れ替え、`lay` の向きを `(-.6,0)` にする。
6. 光源を固定にするなら `mouse.tact` を 0 のままにし、`ix, iy` を定数にする。