Mesh Overlay Effect

"use client";

import { useReducedMotion } from "motion/react";

export default function ImgFxMeshOverlay() {
  const reduceMotion = useReducedMotion();

  return (
    <section className="relative w-full overflow-hidden bg-gradient-to-b from-slate-50 to-slate-100 px-6 py-20 dark:from-zinc-950 dark:to-zinc-900 sm:px-10 sm:py-28">
      <style>{`
        @keyframes imgfxMesh_driftA {
          0%   { transform: translate3d(-8%, -6%, 0) rotate(0deg) scale(1.25); }
          50%  { transform: translate3d(6%, 8%, 0) rotate(18deg) scale(1.4); }
          100% { transform: translate3d(-8%, -6%, 0) rotate(0deg) scale(1.25); }
        }
        @keyframes imgfxMesh_driftB {
          0%   { transform: translate3d(7%, 5%, 0) rotate(0deg) scale(1.3); }
          50%  { transform: translate3d(-9%, -7%, 0) rotate(-22deg) scale(1.45); }
          100% { transform: translate3d(7%, 5%, 0) rotate(0deg) scale(1.3); }
        }
        @keyframes imgfxMesh_hue {
          0%   { filter: hue-rotate(0deg); }
          100% { filter: hue-rotate(360deg); }
        }
        @keyframes imgfxMesh_rise {
          from { opacity: 0; transform: translateY(18px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        .imgfxMesh_riseIn { animation: imgfxMesh_rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
        .imgfxMesh_layerA { animation: imgfxMesh_driftA 16s ease-in-out infinite; }
        .imgfxMesh_layerB { animation: imgfxMesh_driftB 20s ease-in-out infinite; }
        .imgfxMesh_layerHue { animation: imgfxMesh_hue 24s linear infinite; }
        @media (prefers-reduced-motion: reduce) {
          .imgfxMesh_riseIn,
          .imgfxMesh_layerA,
          .imgfxMesh_layerB,
          .imgfxMesh_layerHue { animation: none !important; }
        }
      `}</style>

      <div className="relative mx-auto max-w-2xl">
        <div className={reduceMotion ? undefined : "imgfxMesh_riseIn"}>
          <p className="mb-3 text-xs font-semibold uppercase tracking-[0.25em] text-indigo-600 dark:text-indigo-400">
            Image Effect / Mesh Overlay
          </p>
          <h2 className="mb-8 text-3xl font-bold tracking-tight text-slate-900 dark:text-zinc-50 sm:text-4xl">
            Gradient mesh drift
          </h2>
        </div>

        <figure className="group relative aspect-[4/5] w-full overflow-hidden rounded-3xl shadow-2xl shadow-slate-900/20 ring-1 ring-slate-900/10 dark:ring-white/10 sm:aspect-[3/2]">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/img/gallery/g14.webp"
            alt="Aerial coastline caught in soft evening light"
            loading="lazy"
            draggable={false}
            className="absolute inset-0 h-full w-full object-cover"
          />

          <div
            className="pointer-events-none absolute inset-0 mix-blend-soft-light imgfxMesh_layerHue"
            aria-hidden="true"
          >
            <div
              className="imgfxMesh_layerA absolute -inset-1/4 opacity-80 blur-2xl"
              style={{
                background:
                  "radial-gradient(38% 44% at 22% 30%, rgba(99,102,241,0.95) 0%, rgba(99,102,241,0) 60%), radial-gradient(42% 48% at 78% 24%, rgba(236,72,153,0.9) 0%, rgba(236,72,153,0) 62%), radial-gradient(46% 50% at 60% 82%, rgba(16,185,129,0.9) 0%, rgba(16,185,129,0) 64%)",
              }}
            />
            <div
              className="imgfxMesh_layerB absolute -inset-1/4 opacity-70 blur-2xl"
              style={{
                background:
                  "radial-gradient(40% 46% at 82% 68%, rgba(139,92,246,0.9) 0%, rgba(139,92,246,0) 60%), radial-gradient(44% 50% at 18% 74%, rgba(245,158,11,0.85) 0%, rgba(245,158,11,0) 62%), radial-gradient(40% 44% at 46% 22%, rgba(56,189,248,0.85) 0%, rgba(56,189,248,0) 64%)",
              }}
            />
          </div>

          <div
            className="pointer-events-none absolute inset-0 bg-gradient-to-t from-slate-950/50 via-transparent to-transparent"
            aria-hidden="true"
          />

          <figcaption className="absolute bottom-0 left-0 right-0 p-5 text-sm font-medium text-white/90 sm:p-6">
            Living color, layered without touching the pixels beneath.
          </figcaption>
        </figure>

        <p className="mt-5 text-sm text-slate-500 dark:text-zinc-400">
          Two blurred gradient meshes drift and hue-shift over the photo in soft-light blend for a slow, breathing wash of color.
        </p>
      </div>
    </section>
  );
}