# 斜めのヒーロー — Style Reference > 画面を一本の斜線で割る。左は紫の夜に白い斜体の見出し、右は金の光と球。カーソルで斜線が傾き、二つの面が別の速さで動く。 **Theme:** dark **Series:** PARTS 086 **World:** 山の上の小さな観測所「Kanrin」。昼は展示、夜は望遠鏡を開く。 ## Concept 夜と昼を一本の線で隣り合わせにする。線はカーソルの位置で角度と位置が変わり、夜の面・星・金の面・球がそれぞれ別の量で動く。見出しは夜の側に一本だけ、右下に金の面の事実(標高)を小さく置く。色は紫の夜と金の 2 つ。 ## Signature Technique **clip-path の斜め分割 + CSS 変数で駆動する多層の視差。** ライブラリなし。 1. 面は `inset: -6%` で画面より一回り大きい `.layer` を重ねる。夜 `.night`(放射グラデーション)、星 `.stars`(radial-gradient の点 7 個)、金 `.day`(放射グラデーション + 斜めの細い線を overlay で重ねる)、球 `.orb`。 2. 金の面は `clip-path: polygon(calc(--cut + tan(--ang)·50%) 0, 100% 0, 100% 100%, calc(--cut − tan(--ang)·50%) 100%)`。`--cut` は画面幅に対する切り位置、`--ang` は斜線の角度。`tan()` は CSS の三角関数。 3. 斜線 `.edge` と影 `.shadow` は同じ式の多角形で、横幅 2px / 70px の帯として切り出す。グラデーションの角度では多角形と合わないので、必ず同じ polygon を使う。 4. 視差は `--px` / `--py` を各層の `transform: translate3d(calc(--px · k))` で参照する。k は夜が −.4 で星が −.7、金が +.35 で球が +.8。 5. JS はカーソル位置を −1〜1 に正規化し、`FOLLOW` .06 で追従、`--ang` に `ANG_SWAY` 7°、`--cut` に `CUT_SWAY` 5% を足す。放置時は `sin/cos` でゆっくり漂う。画面外と非表示タブでは rAF を止める。 6. 760px 以下は上下分割に切り替え(`--ang` −18°、`--cut` 62%)、多角形は y で切る。 7. reduced-motion では固定値で 1 回だけ描く。 ## Color Palette | Token | HEX | Role | |---|---|---| | --night | #1E1538 | 夜の面の外側 | | --night-2 | #2A1D4D | 夜の面の中心の明るみ | | --lavender | #DCCBFF | 本文、星の色 | | --lavender-2 | #9F8CC7 | 補足文、ヒント | | --gold | #C9A24A | 金の面の中間、ラベル | | --gold-2 | #F1D98A | 金の面のハイライトと斜線とボタン | | --gold-3 | #8C6A24 | 金の面の外側 | | --ink | #1A1230 | 金の面の上の文字、ボタンの文字 | ## Typography - **Shippori Mincho 500 Italic**: 見出し `clamp(38px, 5.4vw, 80px)` 行間 1.2、白。右下の事実 20px。 - **Zen Kaku Gothic New 400/500**: 本文 15px / 1.7、ボタン 14px 500 字間 .04em、ラベル 11px 字間 .22em 大文字(金)、ヒント 12px。 - 760px 以下: 見出し `clamp(34px, 10vw, 48px)`。 ## Spacing & Layout - hero は 100svh(min 600px)、`overflow:hidden`。 - 見出しブロックは左 gutter、縦中央、最大幅 `min(44vw, 560px)`。右下の事実は最大幅 16em。 - 球は `left 68% / top 38%`、幅 `min(34vw, 380px)`。塗りは `radial-gradient(circle at 38% 32%, #FFF4CF, #E3C26C 45%, #A77F2B 85%, #7A5A1E)` で、左上から光が当たる金属の玉にする。 - 760px 以下: 見出しブロックを下から 34% に、球を右上に、右下の事実とヒントは非表示。 ## Motion - 追従 `FOLLOW` .06(約 0.5 秒で追いつく)。放置時の漂い 0.3 / 0.23 rad/s。 - 視差の最大 36px(縦はその 60%)。 - rAF 1 本。IntersectionObserver と visibilitychange で停止。 - reduced-motion: 静止。 ## Components - **copy**: ラベル / 斜体の見出し / 本文 / 金のピルボタン(高さ 50px)。 - **right**: 金の面の右下に事実 1 行(斜体 20px)+ 補足 13px。 - **edge / shadow**: 2px の金の線と 70px の暗い帯。線は常に多角形と一致。 - **badge**: 右下 `VALE / PARTS 086 / 斜めのヒーロー`。 ## Do / Don't **Do** - 斜線と影は面と同じ polygon で切る。 - 層は画面より 6% 大きく作り、視差で端が見えないようにする。 - 面は 2 色。夜と昼のどちらにも文字を置けるよう、文字色は面ごとに決める。 - 球や光は 1 つ。面の主役は線。 **Don't** - 斜線の角度を 25° 以上にしない。文字の置き場が無くなる。 - 視差の係数を層ごとに同じにしない。差が無いと動いて見えない。 - 金の面に写真を敷かない。グラデーションと球で足りる。 - カーソルに即時追従させない。遅れがあるから重く見える。 ## References - **Monologue** (Refero): 暗い広間に斜体セリフの見出しを一本だけ置き、光を一点に絞る構成を参考にした。シアンの光は金に変え、光を「面」として半分に広げた。 - **EPIC agency** (Refero): 茄子紺の夜空に薄い藤色と金の細部を浮かべる配色を抜き出した。金を片面全体に広げ、藤色は文字に限定した。 ## Usage 1. `.hero` 全体を切り出す。`