Glitch Text

"use client";
import { useState } from "react";

/* Two clipped colour copies offset behind the real text — the clip-path
   keyframes are what make it read as a signal drop rather than a blur. */
export function GlitchText({ children }: { children: string }) {
  const [glitch, setGlitch] = useState(false);
  return (
    <h2 onMouseEnter={() => setGlitch(true)} onMouseLeave={() => setGlitch(false)}
      className={`relative text-3xl font-bold ${glitch ? "animate-[glitch_0.3s_ease-in-out]" : ""}`}>
      <span className="relative">
        {glitch && (
          <>
            <span aria-hidden className="absolute left-0 top-0 animate-[glitchRed_0.3s_ease-in-out] text-red-500 opacity-70">{children}</span>
            <span aria-hidden className="absolute left-0 top-0 animate-[glitchBlue_0.3s_ease-in-out] text-blue-500 opacity-70">{children}</span>
          </>
        )}
        {children}
      </span>
    </h2>
  );
}