# マスクで現れる — Style Reference > 星の出た夜の面に「夜明け」の三文字だけ穴が開き、その奥に朝の空が見える。スクロールで字が育ち、中心から円が開いて山頂の朝が全面に出る。 **Theme:** dark **Series:** PARTS 065 **World:** 山頂観測所の夜間観測が終わり、日の出と同時にドームが開く朝。 ## Concept 手前の夜と奥の朝、2枚の画面を重ね、手前に字形と円形の穴を開ける。字の穴は「何の場面か」を一語で伝え、同時にその字の中に次の画面の色が見える。読み込み直後の静止画は、夜の面に朝の色の三文字が浮かぶ状態で止まる(進み具合 12%)。スクロールで字が 2.6 倍まで育ち、続けて字の中心から円が開いて、最後は朝の山頂と見出しだけが残る。 ## Signature Technique 2枚の canvas を重ね、手前の canvas に `globalCompositeOperation = 'destination-out'` で穴を切る。 - **奥(#day)**: 一度だけ描く。縦グラデーション(#1238d8 → #4f9cf2 → #bfe8ff → #fff1dc → #eaf3fb)、太陽の放射グラデーション(中心 x .5 / y .66、半径 0.55 × max(W,H))、薄い雲の楕円 7 本、山の稜線 2 層(奥 #6c87c9 α .9、手前 #0d1330。15 点を二次ベジェで結ぶ)、中央の観測ドームと開いたスリットの光。 - **手前(#night)**: スクロールのたびに描き直す。夜のグラデーション(#070a1c → #101a42) → 星 220 個(#e8ecff、シード付き乱数で毎回同じ配置) → `destination-out` で字と円を塗る → `source-over` に戻して円の縁に 1.5px のシアン線。 - **進み具合**: `p = -scroller.top / (scroller.height - innerHeight)`。 - 字: `a = easeInOutCubic(p / 0.42)`、`scale = 1 + a × 1.6`。初期サイズは `min(W × fit / 文字数, H × 0.42)`、fit は 0.7(760px 未満は 0.78)。 - 円: `b = easeInOutCubic((p - 0.336) / (0.94 - 0.336))`、`r = b × hypot(W,H) × 0.62`。字が育ち切る少し前から開き始め、字と円が同時に見える区間を作る。 - **文字**: Zen Kaku Gothic New 900 を canvas の `font` に指定。`document.fonts.load()` 完了後に描き直し、穴の形が代替フォントのまま残らないようにする。 - 描画はスクロールイベント → rAF 1回にまとめる。常時ループはしない。 ```js c.fillStyle = nightGradient; c.fillRect(0,0,W,H); drawStars(); c.globalCompositeOperation = 'destination-out'; c.save(); c.translate(W*.5, H*.47); c.scale(s, s); c.fillText('夜明け', 0, 0); c.restore(); c.beginPath(); c.arc(W*.5, H*.47, r, 0, 7); c.fill(); c.globalCompositeOperation = 'source-over'; ``` ## Color Palette | Token | HEX | Role | |---|---|---| | --night | #070a1c | 夜の面(上端) | | night 下端 | #101a42 | 夜の面(下端、canvas) | | --night2 | #0d1433 | 予備(CSS 変数のみ) | | star | #e8ecff | 星 | | --silver | #8d93b4 | 夜の面の注記 | | --lilac | #d3d6ea | 注記の見出し | | head / tag | #9aa0c0 | ヘッダーとタグの文字(difference で重ねる) | | --blue | #1238d8 | 朝の空(天頂) | | --sky | #4f9cf2 | 朝の空(中) | | --day | #eaf3fb | 朝の空(下端) | | ridge | #6c87c9 | 奥の稜線 | | --cyan | #6fdcff | 円の縁の線 | | --gold | #ffd9a0 | 太陽の暈、ドームのスリット | | --ink | #0d1330 | 手前の稜線とドーム | ## Typography - 穴の字: Zen Kaku Gothic New 900、画面幅の 70%(スマホ 78%)に三文字。字間は詰めない(穴の間に夜が残るほうが読める)。 - 見出し(朝の画面): Zen Kaku Gothic New 500、clamp(30px, 4.2vw, 60px)、行間 1.18、字間 -0.02em、白。2行で改行位置を固定。 - 本文: 同 300、15px、行間 1.85、白 86%。見出しの下 14px。 - 夜の注記: 13px、行間 1.8、最大幅 26em。項目名は Inter 500 11px、字間 0.14em、大文字。 - ヘッダー: 12px、字間 0.08em。右の英字は Inter 500 13px、字間 0.02em。 - タグ: 11px、字間 0.1em。 ## Spacing & Layout - 左右余白 clamp(16px, 4vw, 56px)。見出しは左 clamp(16px, 6vw, 96px)、上 clamp(84px, 15vh, 150px)、最大幅 min(30em, 88vw)。 - ヘッダーは fixed、padding 上 18px(+safe-area)・下 14px。夜の注記は下から 66px、タグは下から 16px(どちらも +safe-area)。 - 舞台は `position: sticky` の 100svh、スクロール区間は 380vh。 - 760px 未満: 夜の注記を縦積み(間隔 8px、下から 82px)にし、Dawn 列を隠す。見出しの上は 84px。タグも縦積み(間隔 4px)。 ## Motion - スクロール連動のみ。自動再生なし。 - 字: 0〜42% で easeInOutCubic。円: 34〜94% で easeInOutCubic。円の縁線は開くほど薄くなる。 - 夜の注記は円が開き始めると 1/3 区間で消え、朝の見出しは 74〜92% で現れる。 - 読み込み時は 12% の位置へスクロールして、字の穴が見える状態から始める。 - reduced-motion: 自動の動きがないのでそのまま。操作説明に「自動の動きなし」を付ける。 ## Components - **head**: 左に施設名、右に英字ラベル。`mix-blend-mode: difference` で夜でも朝でも読める。 - **stage**: #day canvas、朝の見出し、#night canvas、夜の注記の順に重ねる。 - **tag**: 操作説明と `VALE / PARTS 065 / マスクで現れる`。 ## Do / Don't Do - 穴の字は太いウェイトで、場面を一語で言える語にする。 - 奥の画面は穴越しでも分かる色の変化(空の縦グラデーションと太陽)を持たせる。 - 字と円が同時に見える区間を作り、マスクの形が変わる瞬間を見せる。 Don't - 夜の面に背景グリッドや装飾線を置かない。星だけにする。 - 穴の字を細いウェイトにしない(穴が線になり奥が見えない)。 - 朝の見出しを穴の途中で見せない(字の中に断片が出て読めなくなる)。 ## References - **beehiiv**: 深夜の観測室とネオンの発光という配色の考え方を抜き出した。紫の発光は使わず、夜は紺、光は朝の空の青と金にした。 - **Ameba**: 暗い面の中で一色の電気的な青だけが脈打つ構成。円の縁の細いシアン線にその考え方を残し、すりガラスのパネルは使わない。 ## Usage 1. HTML: `.scroller > .stage` の中に `canvas#day`、見出し、`canvas#night`、注記を重ねる。`.scroller` の高さ(380vh)がスクロール区間。 2. CSS: `.stage{position:sticky;top:0;height:100svh;overflow:hidden}`、canvas は `position:absolute;inset:0`。 3. JS: `