Why did my glitch layers keep the old text after I edited the page?
The two glitch copies come from content: attr(data-text) on the pseudo-elements, not from the element's text node. The data-text attribute and the visible text have to be kept in sync. If you render the text from JavaScript, set both at once.
Can I apply the glitch to an image or a button?
Not to an image or any other replaced element, because they do not generate ::before and ::after pseudo-elements. A button works, since it is a normal element, but you still need the data-text attribute carrying the label.
Is glitch text bad for accessibility?
It can be. The animation never stops, which is a problem for people who have set prefers-reduced-motion, and some screen readers read pseudo-element content, so the word can be announced three times. Use it on decorative headings, guard it with a reduced-motion media query, and keep the real content in plain text.
How does the clipping actually create the tearing effect?
Each keyframe sets a clip-path: inset(...) that reveals only a horizontal band of the duplicated text, and shifts that band left or right with translateX. Cycling through five different bands at slightly different speeds for the two layers is what makes it look like a broken signal.
Will the effect show up in search results or on social cards?
No. Crawlers and social scrapers read the underlying text, not the CSS. That is a good thing: your headline stays indexable as plain text while the visual effect is purely presentational.
The glitch looks muddy on my light background. What should I change?
Glitch text is designed for dark backgrounds, which is why the preview panel is #0F172A. On light backgrounds the two bright offset layers wash out. Darken the base text color, pick more saturated layer colors, and drop the intensity to 2 or 3.