# 十二時まで — Style Reference
> 夜紺の中で、ガラスの靴が金の文字を屈折させる

**Theme:** dark (0時に light へ切り替わる)  **Series:** FABLE 005  **World:** ペロー版シンデレラ。舞踏会の夜、0時の鐘で魔法が解け、ガラスの靴だけが残る

## Concept
開いた瞬間に伝えること: 「0時までの残り時間」と「ガラスの靴」。右上に端末時刻から0時までの残りを数える時計、中央に本物の屈折を持つガラスの靴が、背後の見出し「十二時まで」を歪めながら揺れる。0時(または「鐘を鳴らす」ボタン)で、金と夜紺の装いがCSS変数のトランジションで麻布と木の色に解け、飾り罫が消える。靴だけがガラスのまま残り、物語の結末をそのまま画面の状態で示す。

## Signature Technique
Three.js 0.170。靴は手続き生成、ガラスは自前の ShaderMaterial(スクリーン空間屈折 + フレネル + 色収差 + 手描き環境マップ)。
- 形状(パンプス): 足跡の輪郭(Shape.splineThru 9点ミラー。踵座は幅 0.2 と細く、ボールは 0.38、爪先はアーモンド形で x=1.32 まで)→ ExtrudeGeometry(depth 0.06, bevel 0.02, bevelSegments 5, curveSegments 96)をソール。アッパーはソールの輪郭 220 点から上へ 26 段掃き上げた 1 枚の殻: 各点で閉じ具合 k = 0.12 + 0.88·smoothstep(0.18, 0.62, x)、角度 θ = v·k·π/2 で `y = H·sinθ/sin(kπ/2)`, `z = z₀·cosθ`。k=1 の爪先側は 1/4 楕円のドーム(ヴァンプ)になって中心線で閉じ、k が小さい土踏まず側は低い壁のまま開いた履き口になる。高さ H は履き口 0.13、踵 0.25(カウンター、上端を 0.07 内側へ倒す)、爪先は `0.3·√(1−((x−0.2)/1.18)²)`。ヒールはスティレット: CylinderGeometry(上 0.11 → 下 0.026, 48×12)、上端 12% を踵座へ広げ、下へ行くほど 0.1 後ろへ反らす。全頂点に `y += lift(x)`(x<0: 0.7·(−x/1.2)², x>0: 0.06·(x/1.25)³)で土踏まずの反り。靴の中心は y=0.52(見出しの帯に重なる高さ)。姿勢は rotation (0.14, 0.08 + 0.5·sin(0.33t − 1.15), −0.04) で側面寄りに揺らし(読み込み約3.5秒で真横に近い角度)、踵の高さと爪先の流れを輪郭で読ませる。
- 背景: 見出し「十二時まで」と夜紺の地+中央の紺のグロー(線形値で +(0.010,0.014,0.042)·glow、蝋燭色は glow² と床側に (0.016,0.011,0.005) だけ。sRGB 出力で持ち上がるので値は小さく保つ)を 1 枚の opaque な ShaderMaterial 平面(z=−4, 視錐台いっぱい)に描く。文字は CanvasTexture(白, Shippori Mincho, 最長辺 2048 / モバイル 1024)の α をマスクに `mix(bg, gold, a)`。
- 屈折パス: 靴を非表示にして平面だけを WebGLRenderTarget(描画バッファの最大2倍、長辺の上限 2880px / モバイル 1600px。ガラスが背景を拡大して見せるので、拡大しても文字の縁が階段状にならないよう超解像で持つ)へ描く(dirty 時のみ)。靴のフラグメントはこの RT を `suv + off` でサンプルする。`off = −n₀.xy·0.014·thick²·(n·v) + (center−suv)·0.055`。拡大(第2項)は全層で共通にし、法線のずれはソール(thick 1.0)だけに小さく残して視線が浅いほど 0 にする。n₀ は目の側へ反転する前の法線。層ごとにずれが違うと、重なった殻の壁ごとに文字が段々に切れるため、どの層を通しても見出しは一続きの拡大像になる。第2項は靴の中心(靴のワールド位置を project した画面座標)へ引き寄せる拡大。R/G/B を off×0.975 / 1.0 / 1.025 でずらして色収差。thick はソールとヒール 1.0、アッパーの殻 0.35。
- 反射: フレネル `F = 0.04 + 0.96·(1−n·v)^5`(ior 1.5)。環境は 1024×512 の canvas に手描きした等距円筒図(夜紺の壁、冷たい月光 4 本と蝋燭色 3 本の縦長の窓、天井のシャンデリアの光、床の蝋燭の溜まり)。`reflect` 方向でサンプルして 靴の面は屈折した背景(金の見出し)そのもので描き(`trans·(1.12 − 0.4·edge) + (0.006,0.008,0.015)·(1−edge) + through·0.08`、edge = smoothstep(0.35, 0.95, 1−n·v))、反射 `min(refl, 0.75)·F·1.5` とリム `(1−n·v)^2.2·0.7` は edge のある縁にだけ乗せる。正面を向いた面は鏡にならず、靴越しに金文字が透けて歪む。スペキュラ(2 灯 Blinn-Phong、pow 220 ×0.9 / pow 160 ×0.5)は 0.55 で頭打ちにし、殻では 0.3 倍まで落とす(平らな中敷きが白い帯に焼けるのを防ぐ)。法線は `dot(n, v) < 0` なら反転して常に目の側へ向ける(掃き上げた殻は巻き方向が混ざるため、gl_FrontFacing に頼らない)。
- 合成: 上記の通り面は屈折像、縁だけ反射とリム。tint は `mix(1, (0.94,0.98,1.0), thick·0.6)` のごく薄い青。解除時(`rel`)は反射とハイライトを半分に落とし、麻布の地をそのまま透かす。
- 床(セクション02): 別 renderer。PlaneGeometry 40×40 を −90° に倒し、大理石写真の下 78% を 1024² canvas に切り出して RepeatWrapping 5×5。MeshStandardMaterial roughness 0.22、envMap に同じ手描き環境(EquirectangularReflectionMapping)を intensity 0.45。カメラ (0, 1.05, 4.2) → (0, 0, −1.5)、Fog 3〜15 で地平線を夜紺に溶かす。PointLight(#ffc27a, 3.6, 距離 7, decay 2)と小球(炎)がポインタの床面交点(高さ 0.45)に追従、ゆらぎは 7.3/13.1/29 Hz の sin。2.5 秒入力がなければリサージュで漂う。解除時は color→#9a7a58、emissive→#8a6f52、roughness→0.67、fog と clearColor→麻布。
- 解除演出: 1 つの `state.t`(0→1, 2.4s power2.inOut)を GSAP で動かし、背景平面・ガラス・床の `rel`/色を同時に補間。CSS は `@property` 登録した色変数を `:root.released` で切り替え `transition 2.4s` で同期。
- 時計: `new Date()` と `setHours(24,0,0,0)` の差を毎フレーム比較、秒が変わった時だけ DOM 更新。残り 1.2s 未満で自動解除。
- 文字盤(セクション01): SVG 60 目盛、針は現在時刻から XII へ ScrollTrigger scrub 0.6。飾り罫は stroke-dashoffset をスクロールで描画。

## Color Palette
| Token | 夜 | 解除後 | 役割 |
|---|---|---|---|
| --bg | #0b0d18 | #e7e0d2 | ページ地。夜紺 → 麻布 |
| --surface | #10132a | #ddd4c3 | 壁、パネル下地 |
| --line | #2a2e4a | #c9bea7 | ヘアライン、文字盤の輪 |
| --gold | #d2ad68 | #6b5138 | 見出し文字(3D平面)と飾り罫とラベルに使う。解除後は木の茶 |
| --gold-dim | #7c6a44 | #a89778 | 目盛の副色 |
| --text | #f1e9d6 | #2a2420 | 本文、時刻 |
| --muted | #9892a6 | #6f6559 | 補足文 |
| glass tint | rgb(0.94,0.98,1.0) | 同じ | 殻の透過にかけるごく薄い青 |
| env moon window | #dfe6ff | — | 手描き環境マップの冷たい窓 |
| env candle window | #fff1d6 | — | 手描き環境マップの暖かい窓 |
| candle | #ffc27a | — | 床の PointLight |

## Typography
- 日本語: Shippori Mincho 400(見出し、本文)。本文 15px / 1.9 / 字間 0.04em。h2 clamp(28px, 3.2vw, 44px) / 1.35 / 字間 0.08em。3D平面の見出しは 1 文字ずつ描画し字間 0.14em(縦組みは 0.12em)。
- 欧文・数字: Cormorant Garamond。時刻は 300 / clamp(28px, 3vw, 40px) / 字間 0.04em、桁は 0.56em 固定幅の span でジッターを防ぐ。ラベルは 500 / 12px / 字間 0.22em / 大文字。
- ウェイトは 400 と 300 中心。太字は使わず、色(--text と --muted)とサイズで階層を作る。`<strong>` も 400 で色だけ変える。
- 390px では見出しを縦組み(文字を縦に積む)に切り替え、ヒーローの補足文は左下 1 行。

## Spacing & Layout
- 最大幅 1200px。左右ガター clamp(20px, 4vw, 56px)。
- セクション上下 clamp(96px, 14vh, 160px)。各セクション上端にガター内側のヘアライン 1px。
- 2 カラム grid 5fr/7fr(床セクションは 4fr/8fr)、gap clamp(32px, 6vw, 96px)。860px 以下で 1 カラム、gap 40px。
- ヒーローは 100svh(最小 560px)。飾り罫は inset clamp(12px, 2vw, 26px) の 1px 枠と四隅の 9px ひし形。
- 時計は fixed 右上、padding 22px × ガター。pointer-events none。
- ボタン: 16px × 34px、角丸 4px、1px 金の枠。
- breakpoints: 860px(グリッド)、720px(ヒーローの補助ラベル非表示)、560px(リストの列幅)。

## Motion
- 靴: 回転 y = −0.35 + sin(t·0.33)·0.7、x = 0.26 + sin(t·0.5)·0.08、上下 ±0.06。一周させず往復させて常に靴の横顔が読めるようにする。
- 解除: 2.4s、power2.inOut(GSAP)と cubic-bezier(.4,0,.2,1)(CSS)。全要素が同じ 1 本の進行値を見る。
- 文字盤の針: スクロール連動、scrub 0.6、現在時刻の角度 → 360°。
- 床の光: ポインタ追従は lerp 0.07、蝋燭のゆらぎは 7.3 / 13.1 / 29 Hz の sin 合成。無入力 2.5 秒でリサージュ漂流。
- rAF は 1 本。ヒーローと床はそれぞれ IntersectionObserver で画面内の時だけ描画、document.hidden で停止。リサイズは 120ms デバウンスで平面テクスチャを再生成。
- prefers-reduced-motion: 靴は静止ポーズで dirty 時のみ再描画、針はスクロール連動なし、床は時間項 0 でポインタ移動時のみ描画、解除は duration 0 で即時切替。
- WebGL 不可: `.no-webgl` で見出しを HTML(金、clamp(48px, 11vw, 160px))として表示。

## Components
- hero: 全画面 canvas + 飾り罫枠 + 左下ラベル/1 文 + 右下補助ラベル。h1 は視覚的に隠し、3D 平面に同じ文字を描く。
- clock: 右上固定。`0時まで` のラベルと HH:MM:SS。コロンは金。
- section: ヘアライン + ラベル(番号 / 英語 1 語)+ h2 + 1〜2 文。右側に技術 1 つ(文字盤 / 床 / リスト)。
- rows list: 7em / 1fr / auto の 3 列、各行 20px 上下、ヘアライン区切り、右端に 56×14 のスウォッチ。
- button `.bell`: 透明地、金 1px 枠、角丸 4px、hover で金地に反転。クリックで解除と復帰をトグル。
- footer: ヘアライン上、左に `VALE / FABLE 005`、右に作品名。

## Do / Don't
Do
- 金は見出し文字と細い線にだけ使い、面で塗らない。
- 靴の背後には必ず明るいもの(文字)を置き、屈折のズレと拡大が見えるようにする。地のグローは紺に留め、茶に寄せない。環境マップには細長い窓を入れ、稜線とリムに光を走らせる。
- 解除は全要素を同じ進行値で動かし、色・装飾・シェーダを一度に切り替える。
- 1 画面に見出し 1 本と短文 1〜2 文まで。
- 数字は端末時刻と屈折率など事実だけ。

Don't
- 紫のグラデーションや浮遊する球を足さない。
- 写真を主役にしない(舞踏会写真はぼかして輝度だけ使う)。
- 鐘の音を鳴らさない。
- ガラスに色をつけない(tint はごく薄い青まで)。
- ボタンを増やさない。操作は「鐘を鳴らす」1 つ。

## References
- Josh Warner(black void gallery wall): 「UI は額縁、主役は作品」という考え方と、単一ウェイト・広い字間で階層を作る手法を取り入れた。黒地と蛍光グリーンの単一アクセントは使わず、夜紺地と金、書体は Shippori Mincho + Cormorant Garamond に置き換え、主役を 3D のガラスにした。
- Vapi(Neon spectrogram across midnight concrete): ヘアライン 1px を骨格にする構成、角丸をほぼ直角(4px)に保つ判断、ラベルを小さな大文字・広い字間で置く手法を取り入れた。6 色のスペクトログラムは使わず、色の爆発はガラスの分散(dispersion)が生む虹 1 点だけに限定した。