Gradient Frame Effect

"use client";

export default function ImgfxGradientFrame() {
  return (
    <section className="relative w-full bg-white dark:bg-neutral-950 py-20 sm:py-28">
      <style>{`
        @property --igf-angle {
          syntax: "<angle>";
          inherits: false;
          initial-value: 0deg;
        }
        @keyframes igf-spin {
          to { --igf-angle: 360deg; }
        }
        .igf-frame {
          --igf-angle: 0deg;
          background:
            conic-gradient(
              from var(--igf-angle),
              #6366f1,
              #8b5cf6,
              #f43f5e,
              #f59e0b,
              #10b981,
              #6366f1
            );
          transition: opacity 0.45s ease, transform 0.5s ease;
        }
        .igf-card:hover .igf-frame,
        .igf-card:focus-visible .igf-frame {
          animation: igf-spin 4s linear infinite;
        }
        .igf-glow {
          transition: opacity 0.5s ease;
        }
        .igf-card:hover .igf-glow,
        .igf-card:focus-visible .igf-glow {
          opacity: 0.55;
        }
        .igf-img {
          transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .igf-card:hover .igf-img,
        .igf-card:focus-visible .igf-img {
          transform: scale(1.04);
        }
        @media (prefers-reduced-motion: reduce) {
          .igf-card:hover .igf-frame,
          .igf-card:focus-visible .igf-frame {
            animation: none;
          }
          .igf-img,
          .igf-frame,
          .igf-glow {
            transition: none;
          }
          .igf-card:hover .igf-img,
          .igf-card:focus-visible .igf-img {
            transform: none;
          }
        }
      `}</style>

      <div className="mx-auto max-w-2xl px-6 text-center">
        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-indigo-600 dark:text-indigo-400">
          Conic Frame
        </p>
        <h2 className="mt-3 text-3xl font-semibold tracking-tight text-neutral-900 dark:text-neutral-50 sm:text-4xl">
          A living gradient border
        </h2>
        <p className="mt-4 text-base leading-relaxed text-neutral-600 dark:text-neutral-400">
          Hover the photo and a conic gradient sweeps continuously around its frame.
        </p>
      </div>

      <div className="mt-14 flex justify-center px-6">
        <div
          className="igf-card group relative outline-none"
          tabIndex={0}
          role="img"
          aria-label="Photograph framed by a rotating conic gradient border that animates on hover"
        >
          <div
            aria-hidden="true"
            className="igf-glow absolute -inset-4 rounded-[2rem] bg-[conic-gradient(from_0deg,#6366f1,#8b5cf6,#f43f5e,#f59e0b,#10b981,#6366f1)] opacity-0 blur-2xl"
          />

          <div className="igf-frame relative rounded-[1.6rem] p-[3px] shadow-xl shadow-neutral-900/10 dark:shadow-black/40">
            <div className="overflow-hidden rounded-[1.45rem] bg-white p-1.5 dark:bg-neutral-900">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src="/img/gallery/g07.webp"
                alt="Portrait photograph showcased inside an animated gradient frame"
                loading="lazy"
                draggable={false}
                className="igf-img block h-[26rem] w-[20rem] max-w-full rounded-[1.15rem] object-cover sm:h-[30rem] sm:w-[24rem]"
              />
            </div>
          </div>
        </div>
      </div>

      <p className="mt-10 text-center text-sm text-neutral-500 dark:text-neutral-500">
        Hover or focus the image to set the frame in motion.
      </p>
    </section>
  );
}