Text Scramble
テキストスクランブル
Scramble
どんな動き？
文字がランダムなノイズのように高速で入れ替わりながら、最終的に本来のテキストへ収束していくアニメーション。ハッキングやデジタル演出を思わせるスタイリッシュな印象を与え、数値カウンターや見出し、テック系サービスのUIアクセントとして使われることが多い。
よく使う場所
数値カウンターテック系UI見出しローディング演出
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Rapidly cycle through random characters before settling into the final text.Trigger:
When the element enters the viewport, or on hover.
Initial state:
Final text hidden; random glitch characters flicker in its place.
Animation:
Random characters rapidly cycle (changing several times per second), gradually slowing and revealing correct characters until the full string resolves.
Final state:
The correct final text is fully visible and stable.
Timing:
duration: 0.8–1s total
interval: ~40-60ms per character change
Play once per trigger.実装方法の候補
この動きは以下の技術で実装できます。
JavaScript (setInterval/requestAnimationFrame)GSAP ScrambleTextPlugin
別名・関連ワード
Scramble TextGlitch TextDecrypt Text