# スイッチ — Style Reference
> 樫の机の上に真鍮のつまみとスイッチとレバー。回すと部屋の明るさが変わり、紙の影まで同じ光で動く。

**Theme:** light  **Series:** PLAY 009  **World:** 触れるつまみとスイッチ。木と真鍮とアイボリーの机の上。

## Concept
画面は机の天板を斜め上から見た three.js のシーンで、文章はその上に置かれたアイボリーの紙。操作できるものは三つ。真鍮のつまみ(明るさ)、アイボリーのロッカースイッチ(色温度)、真鍮のレバー(光の向き)。どれも実物のように掴んで動かす。
つまみを回すと窓の光と卓上ランプと環境光が一緒に落ち、トーンマッピングの露出も下がって部屋が暗くなる。紙(DOM)は CSS 変数で同じ値を受け取り、明度とセピアの色味と影の向きが 3D と同期する。スクロールはカメラが机の奥へ進む移動で、つまみ → スイッチ → レバーの順に手元へ来る。

## Signature Technique
- レンダリング: three.js 0.170、1 枚の fixed canvas。ACESFilmic トーンマッピング、PCFSoft 影(2048、スマホ 1024)、RoomEnvironment を PMREM で環境光に。
- 机: 24×90 の平面に樫の天板テクスチャ(`assets/desk.webp` 1024px)を 17×30 回、MirroredRepeat で継ぎ目を消して繰り返す。色 #C4B8A6、roughness 0.62。onBeforeCompile で map の彩度を 0.52 倍に落とし、真鍮だけが画面で一番暖かい色になるようにする。
- 真鍮: MeshStandardMaterial color #C9A24A、metalness 0.92、roughness 0.28〜0.32、envMapIntensity 1.1。つまみの側面は canvas で描いた 120 本の放射状の筋を bumpMap(0.6)にしたローレット。
- つまみ: LatheGeometry(8 点のプロファイル、96 分割)+ 天面の円盤 + 墨色の指標。周りに 11 本のアイボリーの目盛(-135°〜+135°)。ドラッグで `angle += dx*0.9`、離すと `angVel` を `0.08^dt` で減衰させる慣性。`lum = (angle+135)/270`。
- ロッカー: 真鍮の枠の上でアイボリーのキーが x 軸に ±0.25rad 傾く。クリックで `warm` を 0/1 に切り替え。
- レバー: 墨色のレール上を真鍮の球付きステムが x = ±0.9 で滑る。ドラッグは y=0.2 の平面とレイの交点から位置を取る。
- 光: 窓 = DirectionalLight(影あり)、色は黒体放射近似 `kelvin(K)`(Tanner Helland 式)、K = 2700 → 5000 を warm で補間、位置 x は `kx*8` でカメラに追従。卓上ランプ = SpotLight(角度 0.5、penumbra 0.55、距離 20、減衰 1.3、影 2048px / スマホ 1024px)。位置は操作物の左 6.7、高さ 2.9。ランプ本体は画面左外に置き、光とつまみの長い影だけを見せる。強度 `14 + 125*lum`、窓 `0.12 + 2.3*lum`、半球光 `0.02 + 0.1*lum` に抑えてランプの影の濃さを出す。`scene.environmentIntensity = 0.1 + 0.6*lum`、露出 `0.4 + 0.7*lum`。
- DOM 同期: `--lum`、`--kx`、`--warm` を html に書き、紙は `filter: brightness(.5+.5*lum) sepia(.35*(1-lum))`、`box-shadow: calc(kx*-28px) 22px 46px rgba(40,25,10,.18+.22*lum)`。
- カメラ: fov 34、位置 (0.6, 6.4, z+4.6)、注視 (0.6, 0, z-0.9)、`z = -13.5*scroll`。スマホは真上寄り (0, 7.2, z+3.2)。
- 読み取り: 紙の下に「明るさ 80% / 色温度 2700K」を表示(実際の状態値)。

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --ivory | #F6F1E6 | 紙、ヘッダーとフッターの文字 |
| --ink | #2A2420 | 文字とつまみの指標とレール |
| --mute | #7C7067 | ラベル、ヒント |
| --brass | #B8892E | CTA(真鍮の押しボタン)。3D の真鍮は #C9A24A |
| oak | #C4B8A6 × テクスチャ(彩度 0.52 倍) | 机。真鍮より冷たく、彩度を抑える |
| walnut | #4E3320 | 操作盤の台座 |
| key | #F3EADA | ロッカーのキー |
| warm | 2700K ≈ #FFA657 | 電球色の光 |
| cool | 5000K ≈ #FFE4CE | 昼白色の光 |

## Typography
- 見出し: Zen Kaku Gothic New 500。h1 `clamp(56px,7vw,112px)` 行間 1、1 行固定。h2 `clamp(30px,3.6vw,48px)` 行間 1.2。
- 本文: Zen Kaku Gothic New 400、`clamp(15px,1.2vw,18px)`、行間 1.9、最大 26 字。
- ラベル・読み取り値: Inter 500、11〜12px、字間 .08〜.16em、数字は等幅。
- スマホ: h1 `clamp(52px,14vw,76px)`、h2 `clamp(26px,7vw,34px)`、本文 15px。

## Spacing & Layout
- 各セクション 100svh。縦中央で左寄せ。余白 `14vh 7vw 12vh`。紙は最大幅 560px、内側 `44px 48px 48px`、角丸 2px。
- 3D の操作物は x = 1.9(右)、z = 0 / -4.6 / -9.2 に置き、紙の右側に来る。
- ヘッダー固定、左 VALE、右 Play 009 — Switch(アイボリー、薄い影)。フッターも同じ色。
- breakpoint 720px 以下: 操作物は x = 0、カメラは真上寄り、セクションの下余白 46vh で紙の下に操作物が見える。

## Motion
- RAF 1 本。状態は毎フレーム 0.14 の線形補間で追従(warm は 0.1)。
- つまみの慣性は離してから約 1 秒で止まる。端(±135°)で止める。
- CTA「消灯」はつまみを 12% に戻し、先頭へスクロール。押すと 3px 沈む。
- `prefers-reduced-motion`: 補間を即時にし、慣性は残す(ユーザー操作のみ)。スクロールは auto。
- WebGL 不可: canvas を隠し、暗い木色の放射グラデーション地に紙だけ。本文末尾に 1 行で案内。

## Components
- hero: 日本語ラベル + h1「スイッチ」+ 一文 + 操作ヒント(掴むと消える)+ 読み取り値。右につまみ。
- section: ラベル(01 — Rocker …)+ h2(1 文)+ 本文(1 文)+ ヒント 1 行。見出しは読点で改行を固定(「倒すと、/光の色が変わる。」「消灯して、/最初に戻る。」)。スマホは本文も句点で改行(`br.sp`)して 1〜2 字の折り返しを出さない。
- button: 真鍮のグラデーションのピル、内側のハイライトと下端の影、`:active` で沈む。focus-visible は墨 3px の outline。
- footer: 左 `VALE / PLAY 009`、右 `Knob, Rocker, Lever`。

## Do / Don't
Do
- 色は木・真鍮・アイボリー・墨だけ。光の色は温度で決める。
- 操作物は 1 画面に 1 つ。紙は 1 枚。
- 3D と DOM の影は同じ変数から作る。
- 数値は実際の状態値だけ表示する。
Don't
- 既存製品のつまみやスイッチの意匠を写さない。形は円筒・箱・球の組み合わせに留める。
- アイコンや絵文字を置かない。
- 机の上に小物を増やさない(鉛筆とランプまで)。
- 影を CSS の固定値にしない。必ず `--kx` と `--lum` から導く。

## References
- Laura Monin: 白い紙に黒いインク、要素を手で置いたような余白の取り方を抽象化した。紙は机の上の 1 枚のシートに、インクは墨色の文字にした。
- Clay: 単色の作業面の上に重さのある手触りの物体を置く考え方を抽象化した。鮮やかな粘土色は真鍮の 1 色に絞り、物体は three.js の PBR で作った。