Holographic Effect

"use client";

export default function ImgfxHolographic() {
  return (
    <section className="relative w-full overflow-hidden bg-slate-50 px-6 py-20 dark:bg-zinc-950 sm:px-10 sm:py-28">
      <style>{`
        @keyframes imgfx-holo-drift {
          0%   { background-position: 0% 50%, 0% 0%; }
          50%  { background-position: 100% 50%, 12% 8%; }
          100% { background-position: 0% 50%, 0% 0%; }
        }
        .imgfx-holo-card {
          --imgfx-holo-x: 50%;
          --imgfx-holo-y: 50%;
          --imgfx-holo-opacity: 0;
          --imgfx-holo-shift: 0px;
        }
        .imgfx-holo-card:hover,
        .imgfx-holo-card:focus-within {
          --imgfx-holo-opacity: 1;
          --imgfx-holo-shift: -6px;
        }
        .imgfx-holo-sheen {
          opacity: var(--imgfx-holo-opacity);
          transition: opacity 500ms ease;
          background:
            linear-gradient(
              115deg,
              transparent 0%,
              rgba(255, 0, 128, 0.55) 18%,
              rgba(255, 200, 0, 0.5) 34%,
              rgba(0, 229, 160, 0.5) 50%,
              rgba(0, 170, 255, 0.55) 66%,
              rgba(180, 0, 255, 0.55) 82%,
              transparent 100%
            ),
            radial-gradient(
              120% 120% at var(--imgfx-holo-x) var(--imgfx-holo-y),
              rgba(255, 255, 255, 0.85) 0%,
              rgba(255, 255, 255, 0) 45%
            );
          background-size: 300% 300%, 180% 180%;
          background-position: 0% 50%, 0% 0%;
          mix-blend-mode: color-dodge;
        }
        .imgfx-holo-card:hover .imgfx-holo-sheen,
        .imgfx-holo-card:focus-within .imgfx-holo-sheen {
          animation: imgfx-holo-drift 4.5s ease-in-out infinite;
        }
        .imgfx-holo-grid {
          opacity: var(--imgfx-holo-opacity);
          transition: opacity 500ms ease;
          background-image: repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.16) 0px,
            rgba(255, 255, 255, 0.16) 1px,
            transparent 1px,
            transparent 4px
          );
          mix-blend-mode: overlay;
        }
        .imgfx-holo-photo {
          transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1), filter 500ms ease;
        }
        .imgfx-holo-card:hover .imgfx-holo-photo,
        .imgfx-holo-card:focus-within .imgfx-holo-photo {
          transform: scale(1.04) translateY(var(--imgfx-holo-shift));
          filter: saturate(1.15) contrast(1.03);
        }
        @media (prefers-reduced-motion: reduce) {
          .imgfx-holo-card:hover .imgfx-holo-sheen,
          .imgfx-holo-card:focus-within .imgfx-holo-sheen {
            animation: none;
          }
          .imgfx-holo-photo,
          .imgfx-holo-sheen,
          .imgfx-holo-grid {
            transition: opacity 300ms ease;
          }
          .imgfx-holo-card:hover .imgfx-holo-photo,
          .imgfx-holo-card:focus-within .imgfx-holo-photo {
            transform: none;
            filter: saturate(1.1);
          }
        }
      `}</style>

      <div className="relative mx-auto flex max-w-2xl flex-col items-center">
        <p className="mb-3 text-xs font-semibold uppercase tracking-[0.25em] text-indigo-600 dark:text-indigo-400">
          Image Effect
        </p>
        <h2 className="mb-2 text-center text-3xl font-bold tracking-tight text-slate-900 dark:text-zinc-50 sm:text-4xl">
          Holographic Sheen
        </h2>
        <p className="mb-10 text-center text-sm text-slate-500 dark:text-zinc-400">
          A rainbow foil catches the light and drifts across the surface. Hover or focus to reveal.
        </p>

        <figure
          tabIndex={0}
          className="imgfx-holo-card group relative w-full max-w-md overflow-hidden rounded-2xl outline-none ring-1 ring-slate-900/10 transition-shadow duration-500 hover:shadow-2xl hover:shadow-indigo-500/20 focus-visible:ring-2 focus-visible:ring-indigo-500 dark:ring-white/10 dark:hover:shadow-violet-500/25"
        >
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/img/gallery/g14.webp"
            alt="Studio portrait lit for a foil-catching holographic sheen effect"
            loading="lazy"
            draggable={false}
            className="imgfx-holo-photo block aspect-[4/5] w-full object-cover"
          />

          <span aria-hidden="true" className="imgfx-holo-sheen pointer-events-none absolute inset-0" />
          <span aria-hidden="true" className="imgfx-holo-grid pointer-events-none absolute inset-0" />

          <div
            aria-hidden="true"
            className="pointer-events-none absolute inset-0 rounded-2xl ring-1 ring-inset ring-white/10"
          />

          <figcaption className="pointer-events-none absolute inset-x-0 bottom-0 flex items-center justify-between gap-3 bg-gradient-to-t from-black/60 via-black/10 to-transparent px-4 py-3">
            <span className="text-sm font-medium text-white/95">Iridescent foil</span>
            <span className="rounded-full bg-white/15 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider text-white/90 backdrop-blur-sm">
              Hover
            </span>
          </figcaption>
        </figure>
      </div>
    </section>
  );
}