Glitching Button

A word on a badge tearing itself apart — DOM + Web Animations API glitch. Stepped keyframes, envelope-driven slice bursts, negative overshoot tail, scrambled lookalike letters. Pauses offscreen/hidden, reduced-motion renders the plain word.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Glitching Button to your project and fits it to your theme.

"use client";

import { GlitchingButton } from "@/components/ui/glitching-button";

const settings = {
  word: "glitching",
  hot: false,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };

  return (
    <div className="flex min-h-screen items-center justify-center bg-background">
      <GlitchingButton word={s.word} hot={s.hot} />
    </div>
  );
}