Components
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.
"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>
);
}