No canvas, no shader — just ten copies of the same element and the Web Animations API.

The structure is the whole trick. The badge and the word sit in one wrapper, and that wrapper gets cloned into the same CSS grid cell, so every copy lands exactly on the original at any size. Clip a copy to a horizontal band, shove it sideways, and the badge and the glyphs tear together — the badge looks like it moves while carrying no animation of its own. Clone only the text and you get a word tearing in front of a perfectly static rectangle, which reads as two unrelated things.

The displaced copies are deliberately identical: no tint, no hue-rotate, no RGB split. A mis-registration reads as a bad decode because the copies match. Colour them and it turns into a rainbow.

One envelope drives everything — slices, shake, corner flex, the letter scramble. It ramps fast to a peak at ~30% of the burst window and decays slowly, then goes negative for a short tail, flipping every displacement so the burst lands instead of stopping. Real hardware overcorrects; returning cleanly to true is the one thing a decoder never does.

Hover it and the cycle shortens until it barely resolves. Move the cursor near it and the whole unit follows a fraction of the way. Under prefers-reduced-motion it's just a word on a badge.

import { GlitchWordCard } from "./glitch-word-card";

// Default export = what <ComponentPreview name="glitch-word" /> renders.
export default function GlitchWordPage() {
  return (
    <div className="w-full max-w-xl px-4">
      <GlitchWordCard />
    </div>
  );
}

import { GlitchWordCard } from "./glitch-word-card";

// Default export = what <ComponentPreview name="glitch-word" /> renders.
export default function GlitchWordPage() {
  return (
    <div className="w-full max-w-xl px-4">
      <GlitchWordCard />
    </div>
  );
}