CSS グリッチ テキスト効果

機能

• 強さ三段階：たまに跳ねる / 途切れずに揺れる / はっきり裂ける
• 複製の色は調整可能。既定はシアンとマゼンタ（色収差の模倣）
• プレビューはループ再生。ホバーで一時停止して 1 フレームを確認できます
• 入力欄に文字を打つとプレビューできます
• 出力は完全な CSS と `data-text` の HTML 側の要件を含みます
• `prefers-reduced-motion` の処理を自動で添付
• アニメーション名にランダムな接尾辞。既存の同名キーフレームと衝突しません
• コードはハイライト付き、コピーはボタン一つ
• 計算はすべてブラウザー内で完結します

使い方

1. 上の入力欄に文字を入れます
2. 強さを選びます：見出しには「強」、通常の内容のアクセントには「弱」
3. 二つの複製の色を調整します。差を広げるほど裂けが強くなります
4. コードをコピーし、要素に同じ内容の `data-text` 属性を忘れずに付けてください

よくある質問

コードを貼ったのに複製が空なのはなぜですか？

`data-text` 属性が欠けているためです。二つの複製は `content: attr(data-text)` で作られ、要素のテキスト内容ではなくその属性の値を読みます。したがって HTML は `<div class="glitch" data-text="同じ文字">同じ文字</div>` とし、両方を一致させます。プレビューでは設定済みですが、ご自身のプロジェクトでは自分で追加してください。この純 CSS 効果が HTML 側の協力を必要とする唯一の点です。

実際に画面を裂かず `clip-path` を使うのはなぜですか？

CSS に「裂く」操作はなく、あるのはクリップだからです。そこで発想を逆にします：まずずらした複製を用意し、それぞれを数本の水平な帯としてだけ見せ（`clip-path: polygon(...)`）、その帯を時間とともに動かします。目は「一部の横帯がずれている」と捉え、信号の不具合と解釈します。これが CSS でできる近似であり、ウェブでのこの効果の一般的な作り方です。

この効果のアクセシビリティへの影響は？

このセットの中で最もアクセシビリティに不向きな効果です。 理由は三つ。文字が常に揺れており読みにくいため、本文には絶対に使わないでください。速い明滅は光過敏の方にリスクがあり（重い場合には光感受性てんかんを誘発することもあります）、同梱の `prefers-reduced-motion` がそれに対応します。そして必ず注意を引くため、他の内容の隣では気が散ります。したがって、見出し・404 ページ・ゲーム風の画面に限り、流し続けないでください。