Glitch Reveal Text

【対象要素】
- サイト内のテキスト1箇所（見出し・キャッチコピー・リード文等）に適用する

【演出内容】
- テキストが帯状に欠けた状態で現れ、欠ける位置と横のずれを変えながら最終的に完全な形に収束する
- 赤と青緑にずらした複製が背後で暴れ、色ずれした信号のように見せる

【品質要件】
- ずれは数px、コマ送りのイージングで動かす
- 1秒以内に必ず完全な状態へ収束させ、壊れたまま止めない
- prefers-reduced-motion 時は演出を無効化し、最初から完成した状態で表示する
- 演出中も文字が判読できなくなる時間を作らない。レイアウトを揺らさない

[Target element]
- Apply to one piece of text on your site (a heading, a tagline, a lead paragraph, etc.)

[Motion]
- The text appears with horizontal slices missing, then converges into its complete form as the slicing and offsets change
- Red and cyan offset copies thrash behind it, like a channel-split signal

[Quality requirements]
- Keep offsets to a few pixels and use stepped easing
- Always converge to the complete state within one second; never leave it broken
- When prefers-reduced-motion is set, disable the animation and show the finished state from the start
- Never let the text become unreadable during the animation, and never shift the surrounding layout