# 突き抜ける — Style Reference > 黒い幕に「入口」の形の穴。スクロールで穴が巨大になり、向こうの珊瑚色の光の部屋に入る **Theme:** dark **Series:** PARTS 068 **World:** 架空の執筆アプリ「Hollow」。通知のない部屋の入口。 ## Concept スクロール演出。近景は近黒の幕で、見出し「入口」が文字の形に切り抜かれ、向こう側の画面(珊瑚色の光の部屋)が透けて見える。読み込み時は 1.4 倍の位置に置き、二字と穴の奥の光が同時に見える。下へ送ると文字が 30 倍まで拡大し、「口」の左の縦画の中心を通って画面全体が穴になる。幕が消えた時点で向こう側の画面が本来の大きさに収まり、固定区画が終わって通常の流れに続く。 読み込み時は進行度 24%(`START`、約 1.4 倍)の途中状態から始まり、静止画でも「文字の穴を抜けている」ことが分かる。 ## Signature Technique - 構造: `.space`(360svh)の中に `position: sticky; top: 0; height: 100svh` の `.pin`。pin の中に (1) 向こう側 `.inner`、(2) 幕 `svg.gate`、(3) 近景の文字 `.near`。 - 幕: ``。mask は白い rect + 黒い `` 2 文字(Noto Sans JP 700、`font-size = min(.26W, .5H)`、640px 未満は `.27W`)。黒 = 透ける。 - 拡大: `word.setAttribute('transform', translate(ox oy) scale(s) translate(-ox -oy))`。`s = 1 + p³·(MAX-1)`、p は pin 区間の進行度。原点 `(ox, oy)` は「口」を canvas に描いて中央の行を走査し、最初に塗られた区間の中点(左の縦画の中心)。bbox からの推定だと画の外に落ち、拡大後に幕だけが残る。 - 通過: `p ≥ THROUGH(.7)` から幕の opacity を 1→0。Chrome は SVG マスク内の文字を約 50 倍以上で描かなくなるため、MAX は 30 に止め、残りは幕の opacity で抜ける。近景の文字は `clamp(1 - 2.6(p - .2), 0, 1)` で、読み込み時(p .24)はほぼ不透明のまま読め、向こう側の文字が出る前(p ≈ .58)に消える。向こう側は `scale(.72 → 1)`、地の opacity `.7 + 2p`、文字は p .45〜.7 で現れる(穴越しに断片が見えないように)。 - 左下に `scale N×` の実測を出す。 - `prefers-reduced-motion`: 進行度 50% の位置に置き、スクロールに直結(トゥイーンなし)。 ```js const s=1+p*p*p*(P.MAX-1); word.setAttribute('transform',`translate(${ox} ${oy}) scale(${s}) translate(${-ox} ${-oy})`); veil.style.opacity=1-Math.max(0,(p-P.THROUGH)/(1-P.THROUGH)); ``` ## Color Palette | Token | HEX | Role | |---|---|---| | --void | #0a0a0d | 幕、ページの地 | | --white | #f2f3f6 | 近景の文字、向こう側の見出し | | --mist | #8e93a0 | ラベルと脚注と計測値 | | room-core | #ffe3d4 | 向こう側の光の中心 | | room-mid | #ff9f7d | 向こう側の中間 | | room-edge | #e8583a | 向こう側の外周 | | room-deep | #7e2512 | 向こう側の四隅、続く区画の地 | | inner-label | #4a1406 | 向こう側のラベル | | inner-ink | #1d0a04 | 向こう側の見出しと CTA の地 | | inner-text | #3b160a | 向こう側の本文 | | after-text | #c9c3d6 | 続く区画の本文 | | --coral / --plum / --plum2 | #ff7a59 / #1c1626 / #2a2038 | 予備(変数だけ定義、現状は未使用) | ## Typography - 穴の文字: Noto Sans JP 700、`min(.26W, .5H)` px(640px 未満は .27W)、字間 .02em。太いほど穴が広く、抜けやすい。 - 向こう側の見出し: Space Grotesk 500、`clamp(30px, 4.6vw, 64px)`、letter-spacing -.02em。 - 近景の補足: Zen Kaku Gothic New、15px(太字行)+ 13.5px。 - ラベル: Space Grotesk 12px、大文字、letter-spacing .14〜.22em。 ## Spacing & Layout - pin は 100svh、余白 `clamp(20px, 5vw, 72px)`、上 28px、下 70px(タグと重ねない)。 - 文字は画面の横中央、縦 46%。向こう側の文は中央揃え、最大幅 30em。 - 後続の `.after` は部屋の外周と同じ #7e2512 で続け、幕が消えた後に段差がないようにする。 ## Motion - 全てスクロール直結。イージングは `p³`(最初はゆっくり、最後に一気に抜ける)。 - 幕の消失は進行度 70〜100%(THROUGH .7)。近景の文字は 20〜58% で消える。向こう側の文字は 45〜70% で現れ、部屋の拡大 `.72 → 1` は進行度 80% で終わる(`k = min(1, 1.25p)`)。 - `prefers-reduced-motion: reduce`: 同じ計算をスクロール位置で行うだけ(自動の動きはもともと無い)。 ## Components - near: 上ラベル行(アプリ名 / 文脈)と、左下の補足 2 行。 - inner: ラベル、見出し、1 文、CTA(焦茶 #1d0a04 の地に白、高さ 46px、pill)。 - meter: 左下の `scale N×`。Space Grotesk 11px、字間 .14em。位置は左 `clamp(16px, 5vw, 72px)`、下 16px(+safe-area)で本文の左端に揃える。640px 以下は出さない。 - tag: `VALE / PARTS 068 / 突き抜ける` と操作説明 1 行。11px、字間 .1em、右 `clamp(16px, 5vw, 72px)`(640px 以下は 16px)、下 16px。 ## Do / Don't - Do: 穴の文字は太いゴシックにする。細い書体だと抜ける前に縦画が画面幅に届かない。 - Do: 原点を縦画の中心に置く。空白に置くと幕が広がるだけで「抜ける」感じが出ない。 - Do: 向こう側は近景より明るい色にする。暗いと穴が見えない。 - Don't: 拡大を線形にしない。最初から速いと文字が読めない。 - Don't: 幕を途中でフェードしない。穴が広がって消えるから「突き抜ける」。 ## References - Cosmos Network: 「近黒の地に白い文字だけで構成する」禁欲的な構成を借りた。同心円の図は使わず、文字そのものを穴にした。 - Superlist: 「深い暗色の作業面に珊瑚色 1 点」という配色の考え方を借りた。紫は使わず、珊瑚色を向こう側の部屋全体の光に広げ、近景は無彩色に留めた。 ## Usage 1. HTML: `.space > .pin` の中に、向こう側の区画・`svg.gate`(mask と veil)・近景の文字を順に置く。`` `` を自分の文字に変える(1 文字なら t2 を消し、`P.HOLE` を 0 に)。 2. CSS: `.space`(高さ = スクロール量)、`.pin`、`svg.gate`、`.inner` の初期 transform/opacity を移植。 3. JS: `