Glitch Effect

"use client";

export default function ImgfxGlitch() {
  return (
    <section className="relative w-full overflow-hidden bg-gradient-to-b from-zinc-50 to-zinc-100 px-6 py-24 dark:from-zinc-950 dark:to-black sm:py-28">
      <div className="mx-auto flex max-w-2xl flex-col items-center text-center">
        <span className="mb-4 inline-flex items-center gap-2 rounded-full border border-violet-300/60 bg-violet-100/50 px-3 py-1 font-mono text-[11px] font-medium uppercase tracking-[0.22em] text-violet-700 dark:border-violet-500/30 dark:bg-violet-500/10 dark:text-violet-300">
          <span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-rose-500" />
          Image FX / Glitch
        </span>

        <h2 className="text-balance font-mono text-3xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50 sm:text-4xl">
          Signal Lost
        </h2>

        <p className="mt-3 max-w-md text-pretty text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
          A clean frame that fractures into RGB-split, sliced, scan-lined static
          the moment you touch it.
        </p>

        <figure className="imgfxglitch-stage group relative mt-10 aspect-[4/3] w-full max-w-xl select-none overflow-hidden rounded-xl ring-1 ring-zinc-900/10 dark:ring-white/10">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/img/gallery/g07.webp"
            alt="A quiet architectural scene rendered sharp before the glitch takes hold"
            loading="lazy"
            draggable={false}
            className="imgfxglitch-base absolute inset-0 h-full w-full object-cover"
          />
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/img/gallery/g07.webp"
            alt=""
            aria-hidden="true"
            loading="lazy"
            draggable={false}
            className="imgfxglitch-chan imgfxglitch-chan-r absolute inset-0 h-full w-full object-cover"
          />
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/img/gallery/g07.webp"
            alt=""
            aria-hidden="true"
            loading="lazy"
            draggable={false}
            className="imgfxglitch-chan imgfxglitch-chan-c absolute inset-0 h-full w-full object-cover"
          />

          <span aria-hidden="true" className="imgfxglitch-scan pointer-events-none absolute inset-0" />
          <span aria-hidden="true" className="imgfxglitch-tear pointer-events-none absolute inset-0" />

          <figcaption className="pointer-events-none absolute bottom-3 left-3 z-10 rounded bg-black/55 px-2 py-1 font-mono text-[10px] uppercase tracking-[0.2em] text-white/90 backdrop-blur-sm">
            <span className="imgfxglitch-cap-stable group-hover:hidden">rec · stable</span>
            <span className="hidden text-rose-300 group-hover:inline">err · 0xC0FFEE</span>
          </figcaption>
        </figure>

        <p className="mt-5 font-mono text-xs uppercase tracking-[0.25em] text-zinc-400 dark:text-zinc-500">
          Hover to corrupt the feed
        </p>
      </div>

      <style>{`
        .imgfxglitch-chan {
          opacity: 0;
          mix-blend-mode: screen;
          will-change: transform, clip-path;
        }
        .imgfxglitch-chan-r { filter: sepia(1) saturate(6) hue-rotate(-42deg) brightness(1.05); }
        .imgfxglitch-chan-c { filter: sepia(1) saturate(6) hue-rotate(150deg) brightness(1.05); }

        .imgfxglitch-scan {
          opacity: 0;
          background-image: repeating-linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0px,
            rgba(0, 0, 0, 0) 2px,
            rgba(0, 0, 0, 0.28) 3px,
            rgba(0, 0, 0, 0) 4px
          );
          background-size: 100% 4px;
          mix-blend-mode: multiply;
        }

        .imgfxglitch-tear {
          opacity: 0;
          background: linear-gradient(
            180deg,
            transparent 0%,
            rgba(255, 255, 255, 0.18) 48%,
            rgba(120, 80, 255, 0.22) 52%,
            transparent 100%
          );
          height: 14%;
        }

        .imgfxglitch-stage:hover .imgfxglitch-base {
          animation: imgfxglitch-jitter 0.42s steps(2, end) infinite;
        }
        .imgfxglitch-stage:hover .imgfxglitch-chan {
          opacity: 0.9;
        }
        .imgfxglitch-stage:hover .imgfxglitch-chan-r {
          animation: imgfxglitch-slide-r 0.55s steps(1, end) infinite;
        }
        .imgfxglitch-stage:hover .imgfxglitch-chan-c {
          animation: imgfxglitch-slide-c 0.55s steps(1, end) infinite;
        }
        .imgfxglitch-stage:hover .imgfxglitch-scan {
          opacity: 1;
          animation: imgfxglitch-scanmove 0.5s linear infinite;
        }
        .imgfxglitch-stage:hover .imgfxglitch-tear {
          opacity: 1;
          animation: imgfxglitch-tearmove 0.9s steps(6, end) infinite;
        }

        @keyframes imgfxglitch-jitter {
          0%   { transform: translate(0, 0); }
          25%  { transform: translate(-1px, 0.5px); }
          50%  { transform: translate(1px, -0.5px); }
          75%  { transform: translate(-0.5px, 0); }
          100% { transform: translate(0, 0); }
        }

        @keyframes imgfxglitch-slide-r {
          0%   { transform: translate(0, 0);      clip-path: inset(0 0 0 0); }
          20%  { transform: translate(-7px, -2px); clip-path: inset(8% 0 62% 0); }
          40%  { transform: translate(6px, 1px);   clip-path: inset(48% 0 22% 0); }
          60%  { transform: translate(-5px, 2px);  clip-path: inset(30% 0 44% 0); }
          80%  { transform: translate(8px, -1px);  clip-path: inset(72% 0 6% 0); }
          100% { transform: translate(0, 0);       clip-path: inset(0 0 0 0); }
        }

        @keyframes imgfxglitch-slide-c {
          0%   { transform: translate(0, 0);       clip-path: inset(0 0 0 0); }
          20%  { transform: translate(7px, 2px);   clip-path: inset(58% 0 12% 0); }
          40%  { transform: translate(-6px, -1px); clip-path: inset(18% 0 52% 0); }
          60%  { transform: translate(5px, -2px);  clip-path: inset(40% 0 34% 0); }
          80%  { transform: translate(-8px, 1px);  clip-path: inset(4% 0 74% 0); }
          100% { transform: translate(0, 0);       clip-path: inset(0 0 0 0); }
        }

        @keyframes imgfxglitch-scanmove {
          0%   { background-position-y: 0; }
          100% { background-position-y: 4px; }
        }

        @keyframes imgfxglitch-tearmove {
          0%   { transform: translateY(-40%); opacity: 0.9; }
          15%  { transform: translateY(120%); opacity: 0.9; }
          16%  { opacity: 0; }
          50%  { opacity: 0; }
          55%  { transform: translateY(480%); opacity: 0.9; }
          70%  { transform: translateY(620%); opacity: 0.9; }
          71%  { opacity: 0; }
          100% { opacity: 0; }
        }

        @media (prefers-reduced-motion: reduce) {
          .imgfxglitch-stage:hover .imgfxglitch-base,
          .imgfxglitch-stage:hover .imgfxglitch-chan-r,
          .imgfxglitch-stage:hover .imgfxglitch-chan-c,
          .imgfxglitch-stage:hover .imgfxglitch-scan,
          .imgfxglitch-stage:hover .imgfxglitch-tear {
            animation: none !important;
          }
          .imgfxglitch-stage:hover .imgfxglitch-chan-r {
            opacity: 0.85;
            transform: translate(-5px, 0);
          }
          .imgfxglitch-stage:hover .imgfxglitch-chan-c {
            opacity: 0.85;
            transform: translate(5px, 0);
          }
          .imgfxglitch-stage:hover .imgfxglitch-scan { opacity: 1; }
        }
      `}</style>
    </section>
  );
}