グリッチ
見出しのRGBがずれ、ノイズ状のチラつきでグリッチエフェクトを演出。タップ/ホバーで発火。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- ゲーム・テック系のロゴ見出し
- ホバー／タップで一瞬だけ反応する演出
- 英大文字の短い単語
- 避ける場面
- 常時ループさせる装飾（点滅に敏感な人に負担）
- 本文・日本語の長文
- 構成要素
- 本体テキスト
- 赤ずれ層
- 青ずれ層
- ヒント文
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- キーボード
Tab でテキスト（button）へ、Enter／Space で発火
- 支援技術
テキストは button＋aria-label「グリッチを発火」。重ねた層は aria-hidden で読み上げは1回。focus-visible で輪郭。reduced-motion ではアニメ無し（発火しても静止）
- 動き
赤青のずれ層と本体を 400ms steps(4) で断続移動＋clip-path の帯切り、500ms で解除。ノイズ的な瞬間演出
デザインの要点
- steps(4) で 400ms。補間を切って 4 コマの飛び飛びにするから「壊れた信号」に見える。ease だと揺れているだけになる
- 赤と青の層は color: transparent＋text-stroke で輪郭だけ出す。塗りつぶすと本体が隠れて読めない
- clip-path の帯は赤と青で上下を逆に切る（赤は上 0→30→60%、青は下）。同じ帯だと 1 枚のずれにしか見えない
- 発火は 500ms で必ず解除し、ループさせない。点滅に敏感な人への負担と、見出しが読めない時間を最小にする
コード（コピーして使えます）
<div class="gl-outer">
<button class="gl-wrap" id="glWrap" type="button" aria-label="グリッチを発火">
<span class="gl-base" aria-hidden="true">GLITCH</span>
<span class="gl-r" aria-hidden="true">GLITCH</span>
<span class="gl-b" aria-hidden="true">GLITCH</span>
<span class="gl-vis">GLITCH</span>
</button>
<p class="gl-hint">タップ / ホバーで発火</p>
</div>