TEXT EFFECT
故障文字Glitch Text
文字带红青双色错位的抖动，像信号故障。ReactBits 的 GlitchText、Magic UI 的 Hyper Text 都在这个家族。
效果预览
GLITCH
适合用在哪
赛博/科幻主题、游戏与音乐产品、报错页的趣味化表达。字幕式标题慎用，可读性会下降。
容易踩的坑
- 抖动频率过快或整屏闪烁，可能触发光敏性癫痫风险。
- 伪元素复制的 data-t 文案未同步更新，红青层显示的是旧文字。
- 用于超过一行的正文或小于 16px 的字，错位后几乎无法阅读。
设计提示词 · Prompt
故障文字（Glitch Text）：主文本正常显示，另外用 ::before 与 ::after 复制同一段文字（content:attr(data-t)），分别染成红（#ef4444）与青（#06b6d4）。::before 用 clip-path:inset(0 0 58% 0) 只露上半，::after 用 inset(56% 0 0 0) 只露下半。两个伪元素在 2.4s steps(2) 无限循环里各自做 2-3px 的反向位移抖动（translate(-2.5px,-1.5px) 等关键帧）。主文字保持不动，保证还能读。
Glitch Text: the main text displays normally, while ::before and ::after duplicate the same text (content:attr(data-t)) and are tinted red (#ef4444) and cyan (#06b6d4) respectively. ::before uses clip-path:inset(0 0 58% 0) to reveal only the top half, and ::after uses inset(56% 0 0 0) to reveal only the bottom half. Both pseudo-elements jitter 2-3px in opposite directions in a 2.4s steps(2) infinite loop (keyframes like translate(-2.5px,-1.5px)). The main text stays still so it remains readable.
常见搭配
同一页面里经常和「故障文字」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center"> <div class="tx-glitch" data-t="GLITCH">GLITCH</div> </div>