Two cloned text layers are absolutely positioned over the button. On hover, staggered clip-path animations in steps() slice each clone into horizontal bands while offsetting them in opposite directions — one red-tinted, one cyan-tinted — creating an RGB channel-split digital glitch effect. No dependencies.
Goal: Create a "Glitch" button animation.
Visual behavior: On hover, the button text appears to digitally glitch — two clones of the label are positioned absolutely over the original. One is red-tinted (#f87171), the other cyan-tinted (#67e8f9). Each clone has a step-based clip-path keyframe animation that reveals different horizontal slices of the button at different times, offset left/right by ±4px. This creates an RGB channel-split effect identical to a digital signal glitch. Off-hover: all clones are invisible. The button itself has a dark (#0f0f1a) background with uppercase tracking text.
Technique: Three spans inside the button: (1) the real label with relative positioning and z-index 1, (2) a red-tinted clone with [data-glitch="1"], (3) a cyan clone with [data-glitch="2"]. Clones are position: absolute; inset: 0. CSS keyframes use clip-path: inset() to slice horizontal bands; animation uses steps(1) timing so slices jump rather than ease. Hover is driven by a [data-btn="glitch"]:hover selector targeting data-glitch spans. Clone spans should have aria-hidden="true".
Accessibility: Glitch spans are aria-hidden. Under prefers-reduced-motion, clone animations are disabled and clones opacity set to 0.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.