Glitch Heading

Sliced, colour-split copies of a heading glitch in short bursts. Pure CSS.

An original by PasteMotion · MIT License

WidthFull

Code

index.html

<h2 class="glitch-heading" data-text="SIGNAL LOST">SIGNAL LOST</h2>

Paste the HTML where the animation should appear.
Add the CSS to your stylesheet. Every class starts with the animation's name, so it won't clash with yours.
Adjust the custom properties (--accent, --color-2, --speed) on .glitch-heading to restyle it without touching the rest.
Reduced-motion users are covered: the animation calms down or stops when that setting is on.