焔室 HOMURO / THERMAL PROTOCOL

上の提案をもとに AI が起こした詳細ブリーフです。これがそのままコードを書く AI への入力になりました。原文のまま載せています。

# 焔室 HOMURO / THERMAL PROTOCOL — 詳細ブリーフ v1

- 日付: 2026-08-26 / 選択案 no.1 / slug 案: `homuro`
- モード: 主 **Experience**(訪問者は制御盤の前に「いる」。UI が作品そのもの)。予約面だけ **Persuade**
- 既存スタックで足りるもの: three(`^0.185`、依存済み)/ Web Audio(標準)/ CSS scroll-driven animations(標準)。**GSAP・Lenis は足さない**(理由は「デザイン原則 > モーション言語」)

---

## 1. ブランド軸

| 項目 | 内容 |
|---|---|
| 名前 | 焔室 HOMURO(ほむろ)/ 副題 THERMAL PROTOCOL |
| 業種 | 体験型サウナ施設。都市型・完全個室(1〜2 名)・予約制の「サウナ実験場」 |
| ペルソナ | 28〜42 歳の都市生活者。デスクワークと通知で交感神経が張りっぱなし、眠りが浅い。サウナは 2〜3 回行って「整った」経験があり、次に欲しいのは**再現性**。Oura / Apple Watch で自分の数値を見る習慣があり、「気分」より「手順と数字」で納得する |
| 価格帯 | 1 セッション 90 分 ¥4,800(平日)/ ¥5,800(週末)。PROTOCOL MEMBER ¥19,800/月(週 1 枠固定)。銭湯サウナの 5 倍、ラグジュアリースパの半分 |
| ブランド人格 | **精密 / 無口 / 実験的 / 熱源**(4 語)。饒舌に癒さない。数字で示し、操作させ、結果は身体に言わせる |

**Why-This-Brand:** 都市の「休む」は受動的で、休めていない。休日に寝ても、癒し系の場所に行っても、月曜には元に戻る。焔室は「整い」を気分の問題から手順の問題へ移す。温度・湿度・静寂という 3 つの変数だけを個室の制御盤に載せ、客自身に操作させる。自分の手で熱を上げ、水を落とし、音を消したとき、自律神経の反応は初めて「自分で再現できるもの」になる。ここは施設ではなく、自分の身体を被験体にする実験場である。

**同カタログ内との棲み分け:** `nagi`(会員制アーバンスパ=無風・静・上質)と `nokto`(就寝前瞑想アプリ=淡い夜面・低速パルス)が既に wellness の「静」を担っている。焔室は同じ暗さでも**熱源側**に立つ。静寂は 3 プロトコルの 1 つに過ぎず、主役は「操作」。

---

## 2. 差別化軸

**同業の凡庸な見せ方(3 つ):**

1. **温泉旅館の借り物** — 白木のサウナ室の写真、湯気のスローモーション動画ヒーロー、筆文字で「ととのう」。木の香りを画面で語ろうとして、どこの施設か分からなくなる
2. **施設紹介 LP の線形構成** — 「サウナ室 / 水風呂 / 外気浴」の 3 カード → 料金表 → アクセス → 予約ボタン。読み終えても「行く理由」ではなく「行き方」しか残らない
3. **北欧ミニマルの本場語り** — ベージュ、細ゴシック、フィンランド国旗色の差し色で「本場のロウリュ」。どの新興サウナも同じ顔になる

**この案の踏み外し方:**

- **写真を封印し、蒸気そのものをシェーダで描く。** ヒーローは 1 枚も写真を使わない。蒸気・熱・水滴は全画面 WebGL で「いま生成されているもの」として存在する(素材調達ゼロ)。写真は 4 面の暗部に 3 枚だけ
- **ページを「読む」から「操作する」へ。** 参考サイトの線形スクロール章送りを捨て、画面下辺に常駐する**制御盤**から炉・水風呂・外気・予約の 4 面を呼び出す。訪問者はスクロールしない。押す・離す・切り替える
- **施設名より先に数字を見せる。** 最初に読めるのは「92°C / 12% / 0.0s」の計測 readout。ブランドは名乗る前に計測している
- **操作説明をコピーとして堂々と見せる。** 「HOLD TO ロウリュ」「TAP ANYWHERE TO CLOSE」「BETTER WITH SPEAKERS ON」は隠さない。探索型で迷子にしないための、この世界の正式な文体

---

## 3. トーン&マナー

- **一人称:** 使わない。主語は「焔室」か無主語(手順書の文体)。「私たちの想い」型の自己紹介は禁止
- **二人称:** 「あなた」は面 1 つにつき最大 1 回。それ以外は無主語の指示文で客を主語にする(「92°C まで上げる。水を落とす。」)
- **敬体/常体:** UI ラベルと本文は**常体・体言止め・動詞終止**。予約面の入力補助文だけ丁寧体(「ご希望の枠を選んでください」)
- **和欧の役割:** 操作ラベルは**欧文キャップス命令形**(HOLD / RELEASE / TAP / SWITCH)+和文の短い名詞(ロウリュ / 水風呂 / 外気)。思想と手順は和文。英語版(`.en.json`)は欧文ラベルが共通なので差分は和文部分だけ
- **抽象度:** 数字で語る。「深く整う」ではなく「92°C / 12% を 8 分。14°C を 60 秒。外気 6 分。3 セット」。形容詞は 1 文に 1 つまで
- **リズム:** 短文。三拍(温度・湿度・静寂/上げる・落とす・消す)。句点で切り、読点を減らす。見出しは最長 12 文字
- **避ける言葉:** 「ととのう」(手垢)/「癒し」「至福」「極上」「非日常」「こだわり」「本場」「贅沢」/「〜へようこそ」/ 感嘆符 / 絵文字 / 「サ活」「サ道」等のスラング / 「心と体」の並列常套句
- **数字の表記:** 半角、単位は記号(°C / % / s / min)、小数は 1 桁固定(`92.0`ではなく`92`、経過秒は`2.4s`)。全角数字禁止

---

## 4. デザイン原則

### 配色方向 — Drenched-dark、発光は常に 1 色

**物理的な場面:** 深夜 23 時、暗い個室。光源は炉の中で赤熱する石と、制御盤の数字だけ。目は暗順応している。→ ダークは選択ではなく必然。

| トークン | 値 | 役割 |
|---|---|---|
| `--iron` | `#0c0e10` | 黒鉄。面の 100%。**グラデ背景禁止**(暗さは canvas の蒸気が作る) |
| `--steam` | `#e6e8ea` | 白蒸気。本文・見出し。iron 上でコントラスト約 16:1 |
| `--steam-2` | `#8a9096` | 二次テキスト・単位・非活性ラベル(約 6.3:1) |
| `--line` | `rgba(230,232,234,.14)` | 制御盤の罫線。1px のみ |
| `--glow` | プロトコル依存 | **発光。同時に 1 色しか存在しない** |
| ├ 温度 HEAT | `oklch(68% 0.22 40)` ≒ `#ff5a1f` | 灼熱オレンジ |
| ├ 湿度 HUMID | `oklch(58% 0.20 262)` ≒ `#2a6cff` | 深青 |
| └ 静寂 SILENCE | `oklch(92% 0 0 / .0→.35)` | 無色。白蒸気の透過だけ |

- 発光色は `@property --glow { syntax: '<color>'; inherits: true; }` で登録し、プロトコル切替で **900ms** 補間。canvas 側も同じ値を uniform に受ける(UI と蒸気の色が絶対にずれない)。補間は **OKLCH 空間**で行う(sRGB で補間すると橙→青の中間が灰色に濁る)。`prefers-reduced-motion` では即時切替
- **発光色をテキストに使わない**(オレンジ 3.9:1・青 4.3:1 で本文には足りない)。線・点・進捗リング・数字の下線にだけ使う。例外は 24px 以上の readout 数字 1 箇所
- **ネオン多色禁止。** 2 色目の発光が同時に見えた時点で失敗。切替の 900ms 間だけ補間色が存在する

### タイポ体系

| 役割 | 書体 | 指定 |
|---|---|---|
| Display(見出し・ロゴタイプ) | **Unbounded**(Google Fonts、拡張 geometric、variable 200–900) | キャップス、`font-weight: 700`、`letter-spacing: .02em`、`clamp(56px, 11vw, 168px)`、`line-height: .92`。"Lead the Future" 型の強気。1 面に 1 行だけ |
| Readout(計測数字・操作ラベル) | **Martian Mono**(Google Fonts、拡張幅のモノスペース。Unbounded と幅の思想が揃う) | `11px / 13px`、`font-variant-numeric: tabular-nums slashed-zero`、`letter-spacing: .08em`、キャップス。単位は `0.7em` で数字のベースラインに合わせる |
| 和文本文 | **M PLUS 1**(Google Fonts、variable 100–900、幾何系ゴシック) | `15px / 1.9`、`font-weight: 400`、最大 **34ch**。見出し和文は `700`、`clamp(24px, 3.2vw, 40px)`、`line-height: 1.3` |

- Space Grotesk / Space Mono / Inter / IBM Plex は既存デモで既に多用されており、かつ「暗い技術系=モノスペース」の既定に落ちる。**Martian Mono は「拡張幅」という理由で選ぶ**(Unbounded の横幅感と揃い、計器の刻印に見える)
- 数字は**必ず tabular**。温度が 72→92 に上がるとき桁が踊ったら計器に見えない
- 英語版は Unbounded / Martian Mono をそのまま共有。和文の行だけ M PLUS 1 → 同じ 2 書体で組む
- フォント読込は既存慣習どおり Google Fonts `<link>` + `preconnect`、`display=swap`。Unbounded は `wght@700` のみ、Martian Mono `wght@400;500`、M PLUS 1 `wght@400;700`(合計 5 ウェイト以内)

### グリッド / レイアウト原則 — 単一空間の 3 層

```
L2  制御盤   画面下辺に fixed。desktop 高さ 96px / mobile は bottom sheet 132px
L1  オーバーレイ  本文。左上起点、最大 34ch、canvas の上に薄く。面(FACE)はここに立ち上がる
L0  canvas   全画面 WebGL。蒸気・熱・水滴。aria-hidden
```

- **主空間にスクロールは無い**(`body { overflow: hidden }`)。訪問者は制御盤から面を呼び出す。面の中身は 1 画面に収める(例外は「炉」面の SESSION LOG と予約フォーム。下記)
- 制御盤は 12 カラムではなく **8px の計測格子**。罫線は `--line` 1px、角丸 0、影なし。ボタンは面ではなく「区画」(罫線で仕切られたセル)
- 余白は二極: 制御盤の内側は密(8/16px)、中央は空(蒸気が主役)。中間の余白を作らない
- 最初の 1 画面(FIRST VIEWPORT): 左上に `HOMURO` ワードマーク(小)と readout 3 行、中央やや下に Display 見出し 1 行、下辺に制御盤。中央は蒸気。**見出しの真下に「HOLD TO ロウリュ」プロンプトを置き、主操作が最初から見えている**
- モバイル: 制御盤は 2 段(上段=プロトコルタブ 3 つ固定・横スクロールさせない/下段=HOLD 大ボタン 64px + 面ボタン 4 つ)。Display は `11vw` で 1 行 6〜7 文字に収まる語を選ぶ(「THERMAL」が入る)

### モーション言語 — 4 種しか無い

| 名前 | 発火 | 何が起きるか | 時間 |
|---|---|---|---|
| **HOLD** | 押し続け | 蒸気濃度 `--steam-density` が押下時間の**積分**で 0→1。離すと指数減衰 | 満ちるまで 2.4s / 減衰 6s |
| **SWITCH** | プロトコル切替 | `--glow` の色相遷移 + readout の数字が tick-up + canvas の熱マップが遷移 | 900ms / 数字は 1°C ごと 18ms |
| **BREATH** | 静寂プロトコル中 | 4-7-8(吸 4s・止 7s・吐 8s = 19s 周期)で蒸気の濃淡が呼吸する | ループ |
| **OPEN / CLOSE** | 面の呼び出し | 面が制御盤のボタン位置から `clip-path: inset()` で立ち上がる。canvas は消さず減光 | 開 380ms / 閉 220ms |

- **これ以外の動きを足さない。** セクション reveal、hover lift、カード fade-up、parallax は禁止。動く理由が「状態が変わった」「操作を受け取った」以外なら削る
- **parallax は使わない**(速度差でずらす装飾であり、この空間に意味を運ばない)。「ピン留めスクラブ」(画面を固定し、スクロール量を再生位置として使う機構)とは別物で、後者だけを 1 箇所使う
- **CSS scroll-driven animations を使う唯一の場所 = 「炉」面の SESSION LOG。** 12 分セッションの温度曲線を、面の中のスクロールで時間軸として進める(スクロール量 = セッションの経過時間)。スクロールの関係そのものが「時間が進む」意味を運ぶので許可する。実装:
  ```css
  @supports (animation-timeline: scroll()) {
    @property --session-t { syntax: '<number>'; inherits: true; initial-value: 0; }
    @property --furnace-temp { syntax: '<integer>'; inherits: true; initial-value: 72; }
    .log { animation: session-scrub linear both; animation-timeline: scroll(self); }
    @keyframes session-scrub { from { --session-t: 0; --furnace-temp: 72 } to { --session-t: 1; --furnace-temp: 92 } }
    .log__temp::after { counter-reset: t var(--furnace-temp); content: counter(t) }
  }
  ```
  温度の数字は `counter()` で CSS だけが描き、canvas は `--session-t` を毎フレーム `getComputedStyle` で読んで熱マップを追随させる(JS は読むだけ、書かない)。**非対応環境の静的フォールバック**: `@supports not` 側では曲線を静的 SVG(3 点のマーカー付き)で置き、数字は JSON の固定値を表示する。`prefers-reduced-motion` でも同じ静的版
- **依存を足さない理由:** three は既に依存済み(kumohara / refract と同じ `ShaderMaterial` 作法で書く)。**Lenis を足さない**のは主空間にスクロールが無いから。**GSAP を足さない**のは必要な補間が「exp 減衰の追従」1 種類で、`v += (target - v) * (1 - Math.exp(-dt * k))` の 1 行(kumohara `scene.ts` と同じ)で足りるから。View Transitions は面の OPEN に使えるが、`clip-path` の CSS transition で同じ結果が出るので **使わない**
- **`prefers-reduced-motion: reduce`:** BREATH のパルス停止(濃淡固定、readout の INHALE/HOLD/EXHALE 文字だけ進む)/ SWITCH は即時切替 / HOLD は積分でなく 3 段ステップ(0 → .5 → 1、押下ごと)/ OPEN・CLOSE は opacity 120ms のみ / SESSION LOG は静的版。**意味(状態が変わったこと)は残し、移動と脈動だけ消す**
- 60fps 未満なら簡略化: モバイルは DPR 上限 1.0・ノイズ 2 オクターブ、desktop は DPR 1.5・4 オクターブ。`visibilitychange` と面が開いている間の減光中は描画レートを半分に落とす

### WebGL の中身 — 素材調達ゼロで成立させる

- **蒸気 / 熱マップ:** 全画面クアッド 1 枚のフラグメントシェーダ。fbm ノイズ(値ノイズ 2〜4 オクターブ)を上方向にドリフトさせ、画面下中央からの放射状の熱グラデーションに乗せる。uniforms: `uTime` `uDensity`(HOLD の積分値)`uGlow`(vec3、`--glow` から)`uBreath`(0〜1、静寂時)`uProtocol`(0/1/2)
- **水滴(湿度・水風呂面):** `Points` 300 個(mobile 120)。落下は CPU で位置更新せず、頂点シェーダで `uTime` から算出(kumohara の星と同じ作法)。着水で同心円の波紋 1 段(距離場のリング)
- **HOLD の音・ジュッ:** ロウリュ開始の 120ms 後、蒸気が「立ち上がる」瞬間だけ密度に短いオーバーシュート(1.15 → 1.0、280ms)を入れる。水が石に当たって弾ける感じはこの 1 箇所で作る
- **WebGL が無い環境:** canvas を非表示にし、同じ `--glow` を使った CSS `radial-gradient` 2 枚 + `::before` の `@keyframes` ドリフト(reduced-motion では静止)。HOLD は `--steam-density` を CSS の `opacity` に流すだけで成立させる。**見た目は劣るが、操作の意味は全部残る**

### 写真 / 動画の役割 — 脇役として 3 枚だけ

- **動画は使わない**(蒸気は生成、調達不要)。「動画みたいに動く」の担い手は WebGL と決める
- 写真は 4 面のうち 炉 / 水風呂 / 外気 に **各 1 枚**、面の右下 40% 幅、`opacity: .55`、`mix-blend-mode: luminosity` で発光色に染める(色は必ず `--glow` 側が支配)。予約面は写真なし
- 3 枚とも `data-img-spec` 付きプレースホルダで置き、後工程(fill-images.sh)で生成する。spec の書き方: 「暗い個室サウナ、黒い鉄板壁、赤熱した石の上に一滴の水、ローキー、被写体は石のみ、人物なし」/「黒い水面に落ちる一滴、同心円、青い底光り、ローキー」/「夜の屋上、コンクリートの床に水滴、遠くの街灯 1 つ、無人」。**人物・木の内装・国旗・ハットを写さない**

---

## 5. ページ構成

単一空間。「セクション」は縦に並ばず、制御盤から**呼び出される面**として存在する。HTML には全面を静的に書き(`<section hidden>`)、JS はそれを見せる/隠すだけ(JS 失敗時も内容は DOM にある。クローラも読める)。

### 0. GATE(初回のみ、参考サイトの型)
- **主張:** 音があると別物になる。入る前に決めさせる
- 要素: 進捗 `0%`→`100%`(Martian Mono、tabular)、`BETTER WITH SPEAKERS ON`、ボタン 2 つ **ENTER WITH SOUND / ENTER SILENT**(どちらも同じ視覚重量。音を強要しない)。`sessionStorage` で 2 回目以降は出さない。Escape で ENTER SILENT

### 1. MAIN SPACE(= Hero、常時)
- **主張:** 整いは気分ではなく手順である
- 要素: 左上 `HOMURO` ワードマーク(小)+ 副題 `THERMAL PROTOCOL` / readout 3 行 `TEMP 92°C` `HUMID 12%` `HOLD 0.0s` / 中央 Display 1 行 / その直下に `HOLD TO ロウリュ` プロンプト(押下中は `RELEASE TO 蒸らす` に切替)/ 全画面 canvas
- 状態: プロトコルにより readout の値・`--glow`・Display の 1 語(HEAT / HUMID / SILENCE)が変わる

### 2. CONTROL PANEL(常駐、下辺)
- **主張:** ここが UI であり、サウナの操作盤である
- 要素(左→右): **PROTOCOL タブ ×3**(温度 HEAT / 湿度 HUMID / 静寂 SILENCE、`role="tablist"`)/ **readout 群**(°C・%・経過秒・静寂時は INHALE/HOLD/EXHALE + 残秒)/ **HOLD ボタン**(主操作。押下中は進捗リングが 0.0→2.4s を刻む、`aria-pressed`)/ **FACE ボタン ×4**(炉 FURNACE / 水風呂 PLUNGE / 外気 AIR / 予約 RESERVE)/ **音トグル**(`Mute Sound / Unmute Sound`、`aria-label`)
- キーボード: `Tab` で制御盤に到達、タブは矢印キー、HOLD は `Enter` / `Space` の押しっぱなし(`keydown` で開始・`e.repeat` は無視・`keyup` で離す)、面は `Enter` で開き `Escape` で閉じる。**pointer 専用にしない**
- readout は `aria-live="polite"` で **1 秒に 1 回だけ**更新(毎フレーム読み上げさせない)

### 3. FACE: 炉 FURNACE
- **主張:** 熱は上げるものであって、浴びるものではない
- 要素: 見出し 1 行 / 思想 3 文(34ch 以内)/ **PROTOCOL 手順書**(3 行: `92°C / 12% — 8 min` `14°C — 60 s` `外気 — 6 min` × 3 セット)/ **SESSION LOG**(12 分の温度曲線、面内スクロールで時間が進むピン留めスクラブ。上記 CSS)/ 写真 1(石と一滴)/ `TAP ANYWHERE TO CLOSE`
- 発光: 温度プロトコルへ自動切替(オレンジ)

### 4. FACE: 水風呂 PLUNGE
- **主張:** 60 秒。数えるのは体ではなく盤面
- 要素: 見出し / 本文 2 文 / 大きな readout `14°C` と `60 → 0` の秒カウント(面を開くと 1 回だけ 60 秒を刻む。reduced-motion は静止表示)/ 写真 2(黒い水面)/ canvas は水滴と波紋へ
- 発光: 湿度プロトコルへ自動切替(深青)

### 5. FACE: 外気 AIR
- **主張:** 最後の変数は音。消すと身体が聞こえる
- 要素: 見出し / 本文 2 文 / **4-7-8 呼吸ガイド**(`INHALE 4` `HOLD 7` `EXHALE 8` が順に発光。canvas の濃淡と同期)/ サイクル数 `01 / 12` / 写真 3(夜の屋上)/ 音は炉の唸りが 2 秒でフェードアウトし無音になる
- 発光: 静寂プロトコル(無色。白蒸気の透過だけ)

### 6. FACE: 予約 RESERVE(Persuade)
- **主張:** 実験は予約制。個室 1〜2 名、90 分
- 要素: 料金 3 行(平日 / 週末 / MEMBER)/ 営業 `10:00–24:00 最終入室 22:30` / 所在 `東京・渋谷 神泉`(架空、番地を書かない)/ **予約フォーム(mock)**: 日付・枠(90 分刻み)・人数(1 / 2)・プロトコル初期値・連絡先。送信は `preventDefault` + 完了表示のみ / 注意書き 3 行(飲酒後不可・高血圧の方は医師相談・12 歳未満不可)/ 丁寧体はこの面だけ
- フォームが 1 画面を超えるときだけ面内スクロール(通常のスクロール。演出しない)

### 7. FOOTER(予約面の底 + 制御盤右端の `i`)
- **主張:** 実在の施設として必要な情報は全部ある
- 要素: 施設名・所在・営業時間・Instagram(ダミー)・特商法/プライバシー(ダミーリンク)・`© 2026 HOMURO`。DemoBanner は全デモ共通仕様に従い上端赤帯のまま(制御盤と衝突しない)

---

## 6. コピー方針

### Hero(Display 1 行 + 和文リード 1 文)候補

| # | Display(Unbounded caps) | 和文リード | 狙い |
|---|---|---|---|
| **A(推奨)** | `THERMAL PROTOCOL` | 整いは、気分ではなく手順だ。 | テーゼ。副題そのものを見出しに昇格させ、ブランド名より思想を先に立てる |
| B | `92°C / 12% / —` | 三つの変数で、身体を再起動する。 | readout を見出しにする。最も「計器」らしいが、初見で読みにくい |
| C | `HOLD TO ロウリュ` | 押している間だけ、蒸気は満ちる。 | 操作説明を見出しに昇格。参考サイトの流儀に最も近い |
| D | `HEAT. HUMID. SILENCE.` | 上げる。落とす。消す。 | 三拍。英語版との対称が最も美しい |

**採用:** A を Display、**C の和文「押している間だけ、蒸気は満ちる。」を HOLD プロンプトの副文**に流用。D の「上げる。落とす。消す。」はプロトコルタブのツールチップ(`title`)と炉面の冒頭に使う。

### 面ごとの言葉のトーン

- **炉 FURNACE:** 手順書。動詞終止の短文。「92°C まで上げる。水を一滴だけ落とす。8 分、何もしない。」/ 思想は 3 文まで:「熱は浴びるものではない。上げるものだ。上げた人間だけが、下がり方を知る。」
- **水風呂 PLUNGE:** 数字が主語。「14°C。60 秒。数えるのは体ではなく、盤面。」
- **外気 AIR:** 最も静か。文を減らし、呼吸ガイドの 3 語(INHALE / HOLD / EXHALE)に語らせる。「最後の変数は、音。消すと、身体が聞こえる。」
- **予約 RESERVE:** 丁寧体、事務的、余計な誘い文句なし。「90 分の個室を、1 枠だけ。」+ 注意書きは箇条書き
- **操作ラベル(全面共通・欧文):** `HOLD TO ロウリュ` / `RELEASE TO 蒸らす` / `TAP ANYWHERE TO CLOSE` / `SWITCH PROTOCOL` / `BETTER WITH SPEAKERS ON` / `ENTER WITH SOUND` / `ENTER SILENT` / `Mute Sound` / `Unmute Sound`
- **英語版:** Display・操作ラベルは共通。和文リードの英訳は逐語でなく同じ拍数で。A → `Calm is a procedure, not a mood.` / 炉 → `Heat is not something you receive. You raise it.`

---

## 7. クラフトの肝 — ここで勝つ 5 点

1. **HOLD の「間」と積分感(モーション量)** — 押し始めの **120ms は何も起きない**(水が石に届くまでの時間を意図的に置く)。そこから密度が 2.4s かけて 1.0 へ、立ち上がりに 1.15 のオーバーシュート 280ms(ジュッ)。離すと 6s の指数減衰で**すぐには消えない**。ボタン自体は押下中 1px 沈み、進捗リングが tabular で `0.0s → 2.4s` を刻む。モバイルは `touch-action: none` + `-webkit-touch-callout: none` + `contextmenu` 抑止 + `setPointerCapture` で、長押しメニューに奪われない。**これが無いと「押し続ける」体験が成立しない**
2. **数字の追随(タイポ詳細)** — SWITCH で温度が 72→92 に変わるとき、値を瞬時に差し替えず **1°C ごと 18ms**(約 360ms)で tick-up。`tabular-nums slashed-zero` で桁が踊らない。単位 `°C` は `0.7em`・`--steam-2` で数字より一段引く。小数は経過秒だけ 1 桁固定(`2.4s`)。この「計器が追いつく」感じが、ただの色替えを「プロトコルが切り替わった」に変える
3. **発光 1 色の規律(色のニュアンス)** — `--glow` は canvas と UI の**唯一の共有変数**。切替の 900ms は OKLCH で補間(灰色を通らない)。UI 側は発光色を**線・点・リング・1 箇所の大 readout にだけ**使い、本文には決して使わない。静寂プロトコルでは発光そのものが消え、白蒸気の透過(`.0→.35`)だけが残る — 「色が無い」が第 3 の色として立つ
4. **面の開閉と減光の順序(間)** — 面を開くとき canvas は消さず **40% 減光 + `filter: blur(8px)`** に留め、「蒸気の向こうに文字がある」状態を保つ。閉じるときは**減光解除を先(140ms)、文字消去を後(220ms)**。逆順にするとチラつく。`TAP ANYWHERE TO CLOSE` は面の下辺に 11px で常駐し、消さない・点滅させない。ホバーは制御盤の区画に **1px の発光下線が左から 160ms で伸びる**だけ。区画全体を光らせない、浮かせない
5. **静寂プロトコルの三重表示(モーション量の引き算)** — 4-7-8 を canvas の濃淡・readout の `INHALE / HOLD / EXHALE`・残秒カウントの 3 系統で示す。イージングは吸 = `ease-in-out`(sine)、止 = 完全に平坦、吐 = `cubic-bezier(0.16, 1, 0.3, 1)`。**reduced-motion では濃淡を止め、文字と秒だけが進む**(意味を残して脈動だけ消す)。音は炉の唸りが 2s でフェードアウトし、無音が「効果」になる

**音の作り(調達ゼロ):** Web Audio で合成する。炉の唸り = ブラウンノイズ → lowpass 180Hz、石の弾け = 200〜900ms 間隔でランダムに白ノイズの 30ms バースト → bandpass 2.4kHz・急減衰、ロウリュのシュー = 白ノイズ → bandpass 3kHz、ゲインを `--steam-density` に追従。開始は必ずユーザー操作後(GATE のボタン)、`document.hidden` で `suspend()`、ミュートは制御盤右端。**音声ファイルを探さない・置かない**

---

## 8. ロゴ

- **何を象るか:** 「室(むろ)の中の焔」= **正方形の区画の中に発光点が 1 つ**。正方形は個室であり制御盤の 1 セルであり、点は赤熱した石であり、盤面の 1 目盛。幾何。**線ではなく面**(黒地に発光の面が 1 つだけ載る)。有機的な炎の輪郭・揺らぎは象らない
- **ブランド側の意味づけ:** 発光点の色は**プロトコルに追随して変わる**(温度=橙、湿度=青、静寂=無色=点が消えて枠だけ残る)。ロゴがそのまま状態表示になり、「操作すると変わる施設」を一つの記号で言う。静寂で点が消えるのは欠落ではなく「第 3 のプロトコル」の表現
- **言葉の扱い:** **欧文主**。`HOMURO` をキャップス(Unbounded)で主にし、和文「焔室」は副(小さく、縦組みで枠の外側に添える、または上付き)。タグライン `THERMAL PROTOCOL` は Martian Mono の小キャップスで併記(ワードマークと同幅に揃える)。略称は作らない(`HMR` 等の三文字化は禁止)
- **避けたい既視感:** 三角形の炎アイコン(🔥 型)/ 湯気の三本線 / 木の年輪・白木 / 北欧風の丸と細線 / サウナハットのピクト / フィンランド国旗色 / 筆文字の「焔」/ 温泉マーク ♨ の変形
- ※ シンボルの有無・線幅・字間・サイズ比などの「作り」はこの後の Step 1 で参考サイトの型紙(`ref-structure.json` の `logo`)に合わせて決める。ここではモチーフと意味づけまで

---

## 付録: 実装メモ(ビルダー向け・規約準拠)

- ファイル: `src/pages/homuro/index.astro` + `src/pages/homuro/en/index.astro` / `src/layouts/HomuroLayout.astro`(DemoBanner + skip link)/ `src/components/homuro/`(`Gate` `Stage` `Panel` `FaceFurnace` `FacePlunge` `FaceAir` `FaceReserve` `scene.ts`)/ `src/styles/homuro.css` / `site-content-homuro.json` + `.en.json`
- CSS 冒頭は **`@import "tailwindcss" source(none);` + 明示 `@source`**(リポ規約。デプロイ前に `npm run check:tailwind` が通ること)
- `scene.ts` は `initHomuroScene(canvas, { reducedMotion })` を export し、`ShaderMaterial` + 全画面クアッド、`IntersectionObserver` と `visibilitychange` で pause(kumohara / refract と同じ作法)。WebGL 取得失敗時は `null` を返し CSS フォールバックへ
- 面は `<section id="face-furnace" hidden>` で HTML に全部書く。開閉は `hidden` 属性と `inert` の付け外し + `clip-path` transition。フォーカスは開いたら面の見出しへ、閉じたら呼び出したボタンへ戻す
- 画像プレースホルダ 3 点は `data-img-spec` 付き(第 4 節の spec 文)。動画プレースホルダは置かない
- 直接の contract(THESIS / OWN-WORLD / STORY / FIRST VIEWPORT / FORM / FINISH)は `HomuroLayout.astro` の `<body>` 直下に HTML コメントで残す(Astro はスロット先頭のコメントを落とすのでレイアウト側に置く)