Glitch Button

1"use client";
2import React, { useState, useRef } from "react";
3import { twMerge } from "tailwind-merge";
4 
5interface GlitchButtonProps
6  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
7  children: React.ReactNode;
8  className?: string;
9  glitchOnHover?: boolean;
10  glitchAlways?: boolean;
11  glitchColors?: {
12    primary?: string;
13    secondary?: string;
14  };
15  borderColor?: string;
16}
17 
18export const GlitchButton: React.FC<GlitchButtonProps> = ({
19  children,
20  className = "",
21  glitchOnHover = true,
22  glitchAlways = false,
23  glitchColors = {
24    primary: "#ef00ef",
25    secondary: "#00ffff",
26  },
27  borderColor = "white",
28  ...props
29}) => {
30  const [isHovering, setIsHovering] = useState(false);
31  const [isClicked, setIsClicked] = useState(false);
32  const buttonRef = useRef<HTMLButtonElement>(null);
33  const showGlitch = glitchAlways || (glitchOnHover && isHovering) || isClicked;
34  const bgColorClass = className.match(/bg-[a-z0-9-]+/)?.[0] || "bg-gray-900";
35  const textColorClass =
36    className.match(/text-[a-z0-9-]+/)?.[0] || "text-white";
37  const isRounded = /rounded(-[a-z]+)?/.test(className);
38 
39  const borderStyle = {
40    boxShadow: `inset ${borderColor} 5px 5px 0px, inset ${borderColor} -5px 5px 0px, inset ${borderColor} 5px -5px 0px, inset ${borderColor} -5px -5px 0px`,
41  };
42 
43  const textShadowStyle = {
44    textShadow: `
45      -1.5px -1.5px 0 ${glitchColors.primary}, 
46      1.5px 1.5px 0 ${glitchColors.secondary}
47    `,
48  };
49 
50  const handleMouseEnter = () => setIsHovering(true);
51  const handleMouseLeave = () => setIsHovering(false);
52 
53  const handleClick = () => {
54    setIsClicked(true);
55    setTimeout(() => setIsClicked(false), 500);
56  };
57 
58  const containerClasses = twMerge(
59    "relative cursor-pointer font-mono overflow-hidden",
60    "text-4xl",
61    "bg-gray-900",
62    "text-white",
63    "p-4 m-1.5",
64    "group",
65    "hover:shadow-none",
66    "hover:bg-gradient-to-r hover:from-fuchsia-600 hover:via-white hover:to-cyan-400",
67    isClicked ? "click-glitch" : "",
68    className,
69  );
70 
71  return (
72    <button
73      ref={buttonRef}
74      onClick={handleClick}
75      onMouseEnter={handleMouseEnter}
76      onMouseLeave={handleMouseLeave}
77      className={containerClasses}
78      style={borderStyle}
79      {...props}
80    >
81      <span
82        className={`
83        block
84        ${showGlitch ? "opacity-0" : "opacity-100"} 
85        transition-opacity
86        ${glitchAlways ? "flicker-animation" : ""}
87      `}
88      >
89        {children}
90      </span>
91 
92// … truncated