Ken Burns Effect

"use client";

export default function ImgfxKenBurns() {
  return (
    <section className="relative w-full overflow-hidden bg-neutral-50 px-6 py-20 sm:py-28 dark:bg-neutral-950">
      <style>{`
        @keyframes imgfxKb_drift {
          0% {
            transform: scale(1.05) translate3d(-1.5%, 1.5%, 0);
            transform-origin: 20% 80%;
          }
          50% {
            transform: scale(1.18) translate3d(1.5%, -1%, 0);
            transform-origin: 80% 30%;
          }
          100% {
            transform: scale(1.05) translate3d(-1.5%, 1.5%, 0);
            transform-origin: 20% 80%;
          }
        }
        @keyframes imgfxKb_driftAlt {
          0% {
            transform: scale(1.16) translate3d(2%, -1.5%, 0);
            transform-origin: 75% 25%;
          }
          50% {
            transform: scale(1.04) translate3d(-1%, 1%, 0);
            transform-origin: 25% 75%;
          }
          100% {
            transform: scale(1.16) translate3d(2%, -1.5%, 0);
            transform-origin: 75% 25%;
          }
        }
        .imgfxKb_pan {
          animation: imgfxKb_drift 26s ease-in-out infinite;
          will-change: transform;
        }
        .imgfxKb_panAlt {
          animation: imgfxKb_driftAlt 30s ease-in-out infinite;
          will-change: transform;
        }
        @media (prefers-reduced-motion: reduce) {
          .imgfxKb_pan,
          .imgfxKb_panAlt {
            animation: none;
            transform: scale(1.04);
          }
        }
      `}</style>

      <div className="relative mx-auto max-w-6xl">
        <div className="mb-10 max-w-xl">
          <p className="text-xs font-semibold uppercase tracking-[0.22em] text-indigo-600 dark:text-indigo-400">
            Image Effect / Ken Burns
          </p>
          <h2 className="mt-3 text-3xl font-semibold tracking-tight text-neutral-900 sm:text-4xl dark:text-neutral-50">
            Slow motion in a still photo
          </h2>
          <p className="mt-3 text-sm leading-relaxed text-neutral-600 dark:text-neutral-400">
            A gentle, endless pan-and-zoom that gives a single frame the feel of
            cinema. No JavaScript, no interaction needed.
          </p>
        </div>

        <div className="grid grid-cols-1 gap-6 lg:grid-cols-[1.6fr_1fr]">
          <figure className="group relative overflow-hidden rounded-3xl bg-neutral-200 shadow-xl ring-1 ring-neutral-900/10 dark:bg-neutral-800 dark:ring-white/10">
            <div className="aspect-[16/10] w-full overflow-hidden">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src="/img/gallery/g07.webp"
                alt="Sunlit mountain ridge slowly drifting into frame"
                loading="lazy"
                draggable={false}
                className="imgfxKb_pan h-full w-full object-cover"
              />
            </div>
            <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-neutral-950/55 via-transparent to-transparent" />
            <figcaption className="absolute inset-x-0 bottom-0 flex items-center justify-between p-5">
              <span className="text-sm font-medium text-white drop-shadow-sm">
                Golden ridge, first light
              </span>
              <span className="rounded-full bg-white/15 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wider text-white backdrop-blur-sm">
                26s loop
              </span>
            </figcaption>
          </figure>

          <figure className="relative overflow-hidden rounded-3xl bg-neutral-200 shadow-xl ring-1 ring-neutral-900/10 dark:bg-neutral-800 dark:ring-white/10">
            <div className="aspect-[4/5] h-full w-full overflow-hidden">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src="/img/gallery/g14.webp"
                alt="Quiet portrait scene easing across the frame"
                loading="lazy"
                draggable={false}
                className="imgfxKb_panAlt h-full w-full object-cover"
              />
            </div>
            <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-neutral-950/50 via-transparent to-transparent" />
            <figcaption className="absolute inset-x-0 bottom-0 p-5">
              <span className="text-sm font-medium text-white drop-shadow-sm">
                Different path, different pace
              </span>
            </figcaption>
          </figure>
        </div>

        <p className="mt-6 text-center text-xs text-neutral-500 dark:text-neutral-500">
          Tip: vary the origin and duration per image so no two loops feel the
          same.
        </p>
      </div>
    </section>
  );
}