"use client"; import { useEffect, useRef, useState, useCallback } from "react"; const r = (a, b) => a + Math.random() * (b - a); const ri = (a, b) => Math.floor(r(a, b + 1)); const mkSlices = (n) => Array.from({ length: n }, (_, k) => ({ k, top: r(0, 85), h: r(2, 14), tx: r(-18, 18), op: r(0.5, 1), })); export default function GlitchButton({ label = "GLITCH", sublabel = "", accent = "#ff003c", colorR = "#ff003c", colorG = "#00ff9f", colorB = "#00b8ff", pill = false, className = "", onClick, }) { const [hovered, setHovered] = useState(false); const [glitching, setGlitching] = useState(false); const [pressed, setPressed] = useState(false); const [cuts, setCuts] = useState([]); const [scanY, setScanY] = useState(0); const timerRef = useRef(null); const rafRef = useRef(null); const glitch = useCallback((ms = 600) => { setGlitching(true); let t = 0; const tick = () => { setCuts(mkSlices(ri(3, 8))); t += 60; timerRef.current = setTimeout( t < ms ? tick : () => { setGlitching(false); setCuts([]); }, ri(40, 90) ); }; tick(); }, []); // idle random glitch useEffect(() => { let active = true; const loop = () => { timerRef.current = setTimeout(() => { if (!active) return; glitch(280); loop(); }, r(2800, 5500)); }; loop(); return () => { active = false; clearTimeout(timerRef.current); }; }, [glitch]); // scanline sweep while hovered useEffect(() => { if (!hovered) return; let y = 0; const loop = () => { y = (y + 1.8) % 110; setScanY(y); rafRef.current = requestAnimationFrame(loop); }; rafRef.current = requestAnimationFrame(loop); return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); }; }, [hovered]); const handleClick = () => { setPressed(true); glitch(900); onClick?.(); setTimeout(() => setPressed(false), 120); }; const active = hovered || glitching; const shape = pill ? "rounded-full" : "rounded-lg"; return (

{/* glow halo */}

{/* shell */}

{ setHovered(true); glitch(700); }} onMouseLeave={() => setHovered(false)} onClick={handleClick} className={`relative w-48 h-14 overflow-hidden cursor-pointer select-none border-2 ${shape} ${pressed ? "scale-95" : "scale-100" } ${className}`} style={{ background: "var(--glitch-bg)", borderColor: active ? accent : "var(--glitch-border)", boxShadow: hovered ? `0 0 0 1px ${accent}33, inset 0 0 20px ${accent}12` : "none", transition: "border-color 0.2s, box-shadow 0.2s, transform 0.1s", }} > {/* scanline sweep */} {hovered && (

)} {/* CRT texture */}

{/* RGB ghost layers */} {glitching && [colorR, colorB].map((c, i) => (

{label}

))} {/* slice distortion */} {cuts.map((sl) => (

{label}

))} {/* main label */}

{label}

{/* corner brackets */} {[ ["top-1 left-1", "border-t-2 border-l-2"], ["top-1 right-1", "border-t-2 border-r-2"], ["bottom-1 left-1", "border-b-2 border-l-2"], ["bottom-1 right-1", "border-b-2 border-r-2"], ].map(([pos, brd], i) => (

))}

{/* sublabel */} {sublabel && ( {sublabel} )}

); }

Components

Glitch Button

Installation

Tailwind Setup