# 壊れる文字 — Style Reference
> 黒い画面の見出しが一瞬壊れて戻る。SVG フィルタだけで作る文字の破損。

**Theme:** dark  **Series:** PARTS 015  **World:** 放送局の見出し。信号が途切れる瞬間。

## Concept
見出しは常に少しだけ乱れていて、数秒ごとに大きく壊れ、すぐ戻る。画像も canvas も使わず、HTML の文字に SVG フィルタを掛けるだけ。水平の帯ごとに文字を真横へずらし、銅色と青の二版を左右にはみ出させ、横縞のマスクで一部を欠けさせる。

## Signature Technique
- `filter: url(#glitch)` を見出しに適用。フィルタの中身:
  1. `feTurbulence`(fractalNoise、baseFrequency x 0 / y 0.02〜0.08、seed は破損のたびに変更)。x を 0 にするので、ノイズは水平の帯だけになる。
  2. `feComponentTransfer` で R を `discrete`(tableValues `0.5 0.5 0.18 0.5 0.5 0.86 0.5 0.32 0.5 0.5 0.7 0.5`)に段階化し、G は 0.5 に固定。多くの帯はずれず、一部の帯だけが角の立った段差で横に裂ける。縦方向のずれは出さない。
  3. `feDisplacementMap`(scale 0〜70 × 字の大きさ係数。係数は見出しの font-size ÷ 158px、上限 1.2)
  4. `feColorMatrix` ×2 で版の形をそのまま単色に塗る。銅色版 `rgb(0.93, 0.56, 0.33)`、青版 `rgb(0.36, 0.62, 0.98)`。`feOffset` で dx ±(amount×10×max(係数, 0.5)) px にずらし、`feMerge` で 銅 → 青 → 白(元の版)の順に重ねる。白が上に載るので、色は字の縁にだけ出る。
  5. 別の `feTurbulence`(baseFrequency 0 0.4〜2.0)を `feColorMatrix` でしきい値処理した横縞マスク、`feComposite out` で欠けを作り `feMerge` で戻す
- 時間制御(JS、rAF 1 本): 常時 `BASE = 0.20 ± 0.06` の弱い乱れ。破損は 450〜950ms(初回 1100ms)、`1 - p*0.7` で減衰し、6 段階のステップと途中の seed 変更で滑らかさを消す。次の破損まで 1.8〜4.0 秒。2回目の破損だけは起動 2.9 秒後に 1.5 秒間と決めてあり、読み込み3秒後の静止画には裂けた状態が写る。クリック(Enter / Space)で即時に破損。
- `prefers-reduced-motion`: amount 0.45 で固定の静止画。rAF は回さない。
- フィルタ内の初期値(scale 28、dx ±6)は JS が無いときの見え方。JS が毎フレーム上書きする。

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --void | #08080A | 地 |
| --carbon | #121317 | 予備の面(今は未使用) |
| --line | rgba(242,241,236,.14) | フッター上の罫線 |
| --text | #F2F1EC | 見出し、本文 |
| --mute | #7C7E88 | ラベル、注釈 |
| --copper | #D9A066 | 計測値、focus ring |
| copper split | #ED8F54 | 銅色版。字の右側の縁 |
| blue split | #5C9EFA | 青版。字の左側の縁 |

## Typography
- 見出し: Zen Kaku Gothic New 900、`clamp(44px,11vw,176px)`、line-height 1、字間 -.03em、`white-space: nowrap` で 1 行固定。640px 以下は 11.5vw、字間 -.04em。
- 本文: h1 は Zen Kaku Gothic New 700 `clamp(17px,1.5vw,21px)`、line-height 1.6。p は 400 `clamp(13px,1.05vw,15px)`、最大幅 30em。
- ラベル・計測: JetBrains Mono 12px(タグ 11px)、字間 .06em(計測値は .04em、tabular-nums)。

## Spacing & Layout
- 全画面 1 区画。上にラベル行、中央に見出しと短文、下に罫線と計測値+タグ。余白 `clamp(20px,3vw,40px) clamp(20px,5vw,72px)`。
- 見出しと短文の間隔 `clamp(22px,3vw,40px)`、stage の上下 6vh。フッター上に 1px 罫線と 16px の余白。
- フィルタ領域は x -10% / width 120% / y -20% / height 140% で、ずれが切れない。
- breakpoint 640px: 左右 18px、ヘッダー右を消し、フッターを縦積み。

## Motion
- 常時 rAF(画面外でも止めない。複数置くなら IntersectionObserver で止める)。破損の振幅は段階的(6 ステップ)で、イージングを使わない。破損中は 40ms ごとの判定で seed を差し替える。
- 破損の間隔 1.8〜4.0 秒、長さ 0.45〜0.95 秒。初回は読み込み直後に 1.1 秒、2回目は 2.9 秒後に 1.5 秒。
- reduced-motion では amount 0.45 の破損状態で静止。

## Components
- stage: 見出し(role=button、クリックで破損)+ h1 + 一文。
- footer: 左に `displacement / split` の実測値、右に `VALE / PARTS 015 / 壊れる文字` と操作説明 1 行。

## Do / Don't
Do
- 破損は短く、戻りは速く。常時の乱れは弱く。
- 色ずれは銅色と青の二版だけ。純色の赤と青緑は使わない。
- 裂け方は水平の帯の段差にする。ギザギザの波形にしない。
- 見出しは 1 行、太いウェイト。
Don't
- 滑らかなイージングで壊さない。
- 画像に書き出さない。文字は選択できる HTML のまま。
- 紫や緑のネオンを足さない。

## References
- Slash: 黒に近い地に白い文字、1 色の銅色をアクセントに置く配分を抽象化した。セリフの見出しは Zen Kaku Gothic New 900 の日本語にした。
- herding.app: 暗い単色の編集的 UI に、1 色の鮮やかな事件を置く考え方を抽象化した。鮮やかな色は銅色と青の色ずれそのものにした。

## Usage
1. `<svg class="defs">` の `<filter id="glitch">` をページの先頭にコピーする。
2. 壊したい要素に `filter: url(#glitch); will-change: filter;` を付ける。
3. `<script>` の IIFE をコピーし、`#turb #disp #offR #offC #bands` の id を合わせる。壊す要素は `#word`(クリックと Enter / Space で破損)。計測表示 `#mScale` `#mSplit` を置かない場合は、`setGlitch` 末尾の `textContent` の2行を消す。
4. パラメータ: `BASE`(常時の乱れ 0〜0.3)、`burstLen`(ms)、`nextBurst`(ms)、`setGlitch` 内の係数(displacement 最大 70px × 字の大きさ係数、split 最大 10px、縞の周波数 0.4〜2.0)。帯の裂け方は `feFuncR` の tableValues で決まる。0.5 の個数を増やすと裂ける帯が減る。
5. 複数の要素に使うときは filter id を分けるか、同じ時間で壊してよいなら共有する。