# スポットライト — Style Reference > 真っ暗な収蔵庫。カーソルの光が当たった所だけ、白い文字と暖かい光が現れる **Theme:** dark **Series:** PARTS 054 **World:** 架空の収蔵庫「Kura」のトップ。暗闇の中で一点ずつ照らす、という見せ方をカーソルで体験させる。 ## Concept 同じレイアウトを2層重ねる。下の層は輪郭線の見出しと暗い灰色の文字だけ。上の層は白い文字と暖かい光で、カーソル位置を中心にした `radial-gradient` のマスクで切り抜かれている。光の縁は 150px から 320px にかけて柔らかく消える。無操作時は光が見出し語の上をゆっくり往復するので、静止画でも「照らすと見える」ことが伝わる。色は黒と白と、光の琥珀色だけ。 ## Signature Technique CSS `mask-image` + CSS 変数。JS はカーソルの追従だけ。 - **2層**: `.layer.dark`(`aria-hidden`)と `.layer.lit`。同じ HTML を2回置き、`position: absolute; inset: 0` で重ねる。 - **マスク**: `.lit { mask-image: radial-gradient(circle at var(--x) var(--y), #000 0, #000 var(--r0), transparent var(--r1)) }`。`--r0: 150px`、`--r1: 320px`(モバイル 110 / 240)。 - **暗い層**: 見出しは `color: transparent; -webkit-text-stroke: 1px #2a2a2a`、本文は #2e2e2e、仕様は #262626。 - **光の色**: `.lit::after` に `radial-gradient` の琥珀(rgba(255,154,92,.16) → .05 → 0)を `mix-blend-mode: screen` で重ねる。暗い層の上にも `.beam` で同じ中心の弱い光(rgba(255,170,110) を .09 → 40% で .025 → 65% で 0)を置き、文字の無い所でも光の芯が見える。 - **追従**: `--x / --y` を `documentElement` に px で書く。目標へ 12%/フレーム。 - **無操作時**: 見出し語 `.word` の矩形を中心に、横 ±42%、縦 ±50% のリサージュ(0.26 rad/s)。初期位置も見出しの上。 - `@media (hover: hover)` で `cursor: none`。 ```css .lit{ mask-image: radial-gradient(circle at var(--x) var(--y), #000 0, #000 var(--r0), transparent var(--r1)); } .dark .word{ color: transparent; -webkit-text-stroke: 1px #2a2a2a; } .lit::after{ background: radial-gradient(circle at var(--x) var(--y), rgba(255,154,92,.16), rgba(255,154,92,.05) 35%, transparent 60%); mix-blend-mode: screen; } ``` ## Color Palette | Token | HEX | Role | |---|---|---| | --void | #000000 | 地 | | --bone | #ffffff | 照らされた見出し、ブランド名、クレジット | | --frost | #e2e2e2 | 照らされた仕様の文字 | | --ash | #8a8a86 | 照らされたヘッダー補助とフッター | | --ember | #ff9a5c | 光の色。面には使わず、screen で重ねるだけ | | --line / #2a2a2a / #2e2e2e | #262626 / #2a2a2a / #2e2e2e | 暗い層の文字と仕様、見出しの輪郭、日本語見出し | | (暗い層の強調) | #3a3a3a | 暗い層のブランド名とクレジット | | --copper | #8b867f | 予備 | ## Typography - 見出し語: Inter 800、`clamp(64px, 13.5vw, 200px)`(モバイル `clamp(60px, 19vw, 120px)`)、line-height 0.9、letter-spacing −0.045em、大文字。暗い層では 1px の輪郭のみ。 - 日本語見出し: Noto Sans JP 500、`clamp(18px, 1.7vw, 24px)`、line-height 1.5、letter-spacing 0.01em、最大幅 22em。 - 仕様: JetBrains Mono 400 12px、letter-spacing 0.06em、行間 1.9、最小幅 16em。 - ラベル: JetBrains Mono 400、11–12px。 ## Spacing & Layout - hero `min-height: 100svh`。各層は 3行グリッド(header / stage / footer)で同じ余白。 - 余白: 横 `clamp(20px, 5vw, 72px)`、上 `clamp(20px, 3vw, 40px)`、下 `clamp(18px, 2.6vw, 32px)`。モバイル左右 18px。 - stage は見出し語の下 `clamp(18px, 2.4vw, 32px)` に、日本語見出しと仕様を間隔 `clamp(24px, 5vw, 72px)` で横並び(モバイルは縦、間隔 14px)。 - breakpoint 760px: ヘッダー右とメタ情報を消し、フッターを縦積み、光の半径を縮める。 ## Motion - 光は 12%/フレームでカーソルに追いつく(約 0.25 秒)。 - 無操作時・タッチ端末では見出し語の上を周期約 24 秒 / 15 秒で往復。 - rAF 1本。IntersectionObserver と visibilitychange で画面外停止。 - `prefers-reduced-motion: reduce`: 見出し語の上に置いた位置で止め、カーソル移動のときだけ更新する。追従が収束したら rAF を止める。 ## Components - hero: `.beam`(光の芯)+ `.layer.dark` + `.layer.lit`。 - header: 左に名前、右に技法名(両層に同じ)。 - stage: 見出し語+日本語見出し+仕様3行。 - footer: 左下に光の径と減衰、右下に `VALE / PARTS 054 / スポットライト` と操作説明(タッチ端末では差し替え)。 ## Do / Don't - Do: 暗い層にも輪郭を残す。真っ暗だと何を照らせばいいか分からない。 - Do: 光の縁は半径の 1.5〜2.5 倍まで伸ばして柔らかくする。 - Do: 光の色は screen で薄く重ねる。面を塗ると色付きの円に見える。 - Don't: 照らす対象を画像だけにしない。文字が読めるようになる変化が要る。 - Don't: 光を 2 つ以上にしない。 - Don't: 暗い層の文字を #333 より明るくしない。照らす意味が薄れる。 ## References - MekaVerse: 純黒の空間に幾何学的なグロテスクを極端な大きさで置き、モノスペースの小さな文字で情報を添える型を借りた。3D の収蔵品の代わりに文字そのものを照らす対象にした。 - Retool: 暖かい黒に琥珀色の光がにじむ作業台の空気を借りた。光を背景のグラデーションから、カーソルで動くスポットに変えた。 ## Usage 1. 同じ HTML を `.layer.dark` と `.layer.lit` に2回置く(暗い層は `aria-hidden`)。 2. `.lit` の `mask-image` と `.dark` の文字色、`.beam` の CSS を移植する。 3. `