Preview
Props
Variants
Toxic
Swap the two channel colors with colors.
Overload
Crank intensity and lengthen the burst for a more violent glitch on hover.
Auto
Set trigger="auto" to fire timed bursts on a random interval without needing a hover.
Always on
Set trigger="always" for a permanently corrupted signal.
Clean pill
Drop the scanlines with scanlines={false} and round it off via className.
Install
npx shadcn@latest add @evilbuttons/glitch-buttonUsage
import GlitchButton from "@/components/evil-buttons/glitch-button";
export function ButtonDemo() {
return <GlitchButton>DEPLOY DOOM</GlitchButton>;
}Props
The component spreads any <button> HTML attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
glitchInterval | number | 3500 | Base milliseconds between automatic bursts (±20% random jitter). Used when trigger is "auto". |
glitchDuration | number | 450 | Duration in milliseconds of a single glitch burst. |
colors | [string, string] | ["#ef4444", "#22d3ee"] | The two RGB-split channel colors. |
intensity | number | 1 | Multiplier on the channel and shake displacement. Higher is more violent. |
trigger | "auto" | "hover" | "always" | "hover" | When the glitch fires: only on hover, timed bursts, or continuously. |
scanlines | boolean | true | Toggle the scanline overlay. |
className | string | - | Extra classes passed to the button. |
children | React.ReactNode | - | The visible button label or content. |
Good to know
- Stays a dark screen in both themes.
- All motion stops under
prefers-reduced-motion.