Glitch Text
グリッチテキスト
GLITCH
どんな動き？
テキストの色や位置がランダムにズレたり、走査線のように切り刻まれたりを周期的に繰り返す、デジタルノイズのようなグリッチ演出。RGBずれ（色収差）やクリップ位置のジッターを組み合わせて表現され、テック・ゲーム系サイトやエラー表示、サイバーパンクな世界観を演出したい場面でインパクトを出すために使われる。
よく使う場所
テック系サイトゲームUIエラー表示サイバーパンク演出
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Distort the text periodically with color-split layers and jittering clipped slices, like a digital glitch.Trigger:
Continuous, starts automatically and loops.
Initial state:
Clean, stable text with no distortion.
Animation:
At intervals, the text briefly jitters horizontally, its slices clip and offset, and two color-shifted duplicate layers (e.g. accent and cyan) flash with a slight horizontal split before the text snaps back to normal.
Final state:
Returns to the clean, stable text between bursts, repeating indefinitely.
Timing:
duration: ~2.4s per cycle (the glitch burst lasts ~150ms within it)
easing: steps()
iteration: infinite実装方法の候補
この動きは以下の技術で実装できます。
CSSJavaScript
別名・関連ワード
Glitch EffectRGB Split TextDigital Distortion Text