# ノイズで溶ける — Style Reference > 暖かい黒の上で、画面が砂のように崩れ、縁だけ琥珀色に燃えて次の画面になる。 **Theme:** dark **Series:** PARTS 075 **World:** 遷移とローディング。暗い部屋で一枚の紙が端から燃えて落ちるような画面切り替え。 ## Concept ページ遷移を「崩す」で作る。ノイズのしきい値を 0 → 1 に動かし、しきい値を越えた画素から順に古い画面が砂になって下へ流れ、同じ場所に新しい画面が座る。燃えている縁だけが唯一の色。デモは 2 枚のプレート(01 夜の便 / 02 朝の便)を往復し、初期表示は2割ほど崩れた状態(見出しは読める)で6秒止めてから往復を始める。 ## Signature Technique - 全画面 WebGL1 の 1 パス。2 枚の画面は 2D canvas に描いてテクスチャ `uA` `uB` にする(DPR 上限 2、文字も canvas に描くので画素単位で崩せる)。 - しきい値場 `ns = 1.9·(fbm₄(q·3.2) - 0.5) + 0.5 + 0.22·(y-0.5)`(滑らかな前線)、`n = ns + 0.05·grain(520q)`(砂の粒)。縁の光は `ns` で、崩れる判定は `n` で行う。下ほど先に崩れるバイアス付き。 - 見出しの保護: 見出しと本文の矩形 `uText`(2 枚の画面の和、v 座標)の中だけ `ns = mix(ns, ns·0.5 + 0.5, mask)` とし、しきい値を上半分に寄せる。マスクの縁は矩形の外側 0.05・内側 0.02 の smoothstep。見出しは最後に崩れ、途中の静止画でも読める。 - 進捗 `p = ease(t)·1.35 - 0.17`(両端で完全に収束するよう余らせる。保護した見出し部分は最大 1.17 付近まで届く)。初回は `t = 0.41`(p ≈ 0.2、画面の約2割が崩れた状態)で止める。`d = p - n`。 - `d ≤ 0`: 古い画面 A。 - `0 < d < 0.22`: 砂。A を `(-0.01…0.01, -0.16·f²·(0.6…1.4))` だけずらしてサンプルし、`keep = (1-f)·(hash > 1.3f ? 0.95 : 0.05)` で粒を間引く。列ごとの hash で落下速度が違う。 - `d ≥ 0.22`: 新しい画面 B。 - 縁の光: `e = exp(-|ds|/0.03)`。しきい値の手前は `e`、通過後は `0.35e` を 0.9 倍して琥珀 `#F2C14E` を加算、芯に `e⁵·0.5` の暖かい白 (1, .93, .8)。前線の上に毎秒 6 回入れ替わる 1.5% の火花(×0.8)。 - 2/255 のディザ。 - タイムライン: 保持 1.1 秒 → 崩壊 2.4 秒(cubic in-out)→ 保持 → 逆再生で戻る。初回は `prog01 = 0.41`(p ≈ 0.2)で 6 秒止めてから B へ進む。クリックで保持を打ち切り、崩壊中にクリックすると向きが反転する。 ## Color Palette | Token | HEX | 役割 | |---|---|---| | `--void` | `#141216` | 地。暖かい黒 | | plate | `#1A171C` / `#1C1A1E` | 画面 01 / 02 のプレート | | `--bone` | `#F3EFE6` | 見出し、ブランド | | lead | `#A9A3AC` | プレート内の説明文 | | `--fog` | `#8E8890` | ラベル、操作説明 | | `--ash` | `#2B272E` | 進捗バーの溝 | | `--ember` | `#F2C14E` | 燃える縁、見出し上のラベル、進捗バー。唯一の色 | ## Typography - 見出し: **Shippori Mincho** 500、58px(mobile 38px)、プレート内の canvas 描画。 - ラベル: **Zen Kaku Gothic New** 500、11px、`letter-spacing .14〜.22em`(canvas 内は hair space を挟んで字間を作る)。 - 説明文: Zen Kaku Gothic New 300、16px(mobile 14px)、行送り 28px(mobile 24px)、プレート幅から 112px 引いた幅で文字単位に折り返す。 - UI の chrome(四隅)は 11px、`letter-spacing .14em`、line-height 1.6、`--fog`。太字部分は 500、`.22em`、`--bone`。 - プレート下端のページ送り表記: Zen Kaku Gothic New 500 11px、`--fog`。 - フォールバックの見出し: Shippori Mincho 500 `clamp(34px, 5vw, 64px)`、行送り 1.25。注意書き 14px、`--fog`。 ## Spacing & Layout - プレートは画面中央、最大 760×420(幅 640px 未満は 560×380)、画面端から `clamp(20px, 4vw, 48px)`、高さはさらに 120px 引いた値が上限。罫線 1px(白 12%)。 - プレート内: 左 56px(mobile 28px)。ラベルは上から 96px(64px)、見出しはその 84px(58px)下、説明文はさらに 52px(44px)下。下端から 48px(36px)に 40px の短い罫(白 25%)とページ送り表記。 - 四隅の chrome: `padding 24px clamp(20px,4vw,48px) 22px`、`grid-template-rows: auto 1fr auto`。右上に名前と 120px の進捗バー、右下に `VALE / PARTS 075 / ノイズで溶ける`、左下に 1 行の操作説明。 - 640px 以下で下段を縦積み(間隔 6px、左揃え)。 ## Motion - rAF 1 本、`dt` 上限 1/30 秒、`document.hidden` 中は更新しない。 - 崩壊 2.4 秒、保持 1.1 秒、初回停止 6 秒。イージング cubic in-out。 - 進捗バーは `prog01` にそのまま追従。 - reduced-motion: `prog01 = 0.41`(p ≈ 0.2)の静止画を 1 回描き、リサイズ時のみ再描画。 - WebGL が無い端末: `.static` に見出しと 1 行の注意書き。 ## Components - **canvas#gl**: 全画面、`cursor: pointer`。pointerdown で遷移。 - **.chrome**: 四隅のラベル群。`pointer-events: none`。 - **.bar**: 1px の溝 + `--ember` の進捗。 - **.static**: WebGL 非対応時のフォールバック。 ## Do / Don't **Do** - 崩す対象は「画面全体」。要素ごとに別々に崩さない。 - 色は縁の 1 色だけ。砂と新しい画面は無彩色のまま。 - 初期表示は途中の状態にして、静止画でも遷移だと分かるようにする。崩壊は2割程度に留め、見出しは保護マスクで読める状態を保つ。 - 進捗の数値は出さない。バーだけ。 **Don't** - 紫や虹色のグローを縁に足さない。 - 画素を上に飛ばさない(砂は落ちる)。 - 崩壊時間を 1 秒以下にしない(砂が見えない)。 - プレートの外にノイズの模様を常時表示しない。 ## References - **Cassette**(stock/refero/md/cassette.md): 暖かい黒の上に高視認の黄色を 1 色だけ置く構えを借りた。黄色は燃える縁に合う琥珀 `#F2C14E` に変え、「縁の光」にだけ使う。 - **Authkit**(stock/refero/md/authkit.md): 深夜の地に薄いガラスの板を置く階層(地 → プレート → 文字)を借りた。青いフロストは使わず、プレートは地より 1 段だけ明るい暖黒にし、罫線は 12% の白。 ## Usage 1. `` と `