Reveal Blur Effect

"use client";

import { useRef } from "react";
import { motion, useScroll, useTransform, useReducedMotion } from "motion/react";

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

  const cardRef = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: cardRef,
    offset: ["start 0.9", "start 0.35"],
  });

  const blur = useTransform(scrollYProgress, [0, 1], [24, 0]);
  const filter = useTransform(blur, (b) => `blur(${b}px)`);
  const scale = useTransform(scrollYProgress, [0, 1], [1.08, 1]);
  const opacity = useTransform(scrollYProgress, [0, 0.5, 1], [0.4, 0.85, 1]);

  const staticImage = reduceMotion;

  return (
    <section className="relative w-full overflow-hidden bg-neutral-50 px-6 py-24 sm:px-10 sm:py-32 dark:bg-neutral-950">
      <style>{`
        @keyframes irbz-focus {
          0% { filter: blur(24px); transform: scale(1.08); opacity: 0.4; }
          100% { filter: blur(0px); transform: scale(1); opacity: 1; }
        }
        @keyframes irbz-sweep {
          0% { transform: translateX(-120%); }
          100% { transform: translateX(220%); }
        }
        @media (prefers-reduced-motion: reduce) {
          .irbz-fallback { animation: none !important; filter: none !important; opacity: 1 !important; transform: none !important; }
          .irbz-sweep { animation: none !important; opacity: 0 !important; }
        }
      `}</style>

      {/* ambient glow */}
      <div
        aria-hidden
        className="pointer-events-none absolute -top-32 left-1/2 h-72 w-72 -translate-x-1/2 rounded-full bg-indigo-400/20 blur-3xl dark:bg-indigo-500/20"
      />

      <div className="relative mx-auto max-w-2xl">
        <div className="mb-8 text-center">
          <span className="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-white px-3 py-1 text-xs font-medium uppercase tracking-[0.18em] text-indigo-600 dark:border-indigo-500/30 dark:bg-neutral-900 dark:text-indigo-300">
            <span className="h-1.5 w-1.5 rounded-full bg-indigo-500" />
            Scroll to Focus
          </span>
          <h2 className="mt-5 text-balance text-3xl font-semibold tracking-tight text-neutral-900 sm:text-4xl dark:text-neutral-50">
            The image sharpens as it enters the frame
          </h2>
          <p className="mx-auto mt-3 max-w-md text-sm text-neutral-500 dark:text-neutral-400">
            Scroll down and watch the photo pull itself into crisp focus, tied
            frame-for-frame to your scroll position.
          </p>
        </div>

        <motion.div
          ref={cardRef}
          initial={reduceMotion ? false : { opacity: 0, y: 40 }}
          whileInView={reduceMotion ? undefined : { opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.3 }}
          transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
          className="group relative overflow-hidden rounded-3xl border border-neutral-200 bg-neutral-100 shadow-2xl shadow-neutral-900/10 dark:border-neutral-800 dark:bg-neutral-900 dark:shadow-black/40"
        >
          <div className="relative aspect-[4/5] w-full overflow-hidden sm:aspect-[3/4]">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <motion.img
              src="/img/gallery/g14.webp"
              alt="A quiet architectural scene resolving from soft blur into sharp detail"
              loading="lazy"
              draggable={false}
              style={
                staticImage
                  ? undefined
                  : { filter, scale, opacity, willChange: "filter, transform, opacity" }
              }
              className={`h-full w-full object-cover ${staticImage ? "irbz-fallback" : ""}`}
            />

            {/* focus sweep highlight */}
            <div
              aria-hidden
              className="pointer-events-none absolute inset-0 overflow-hidden"
            >
              <div className="irbz-sweep absolute inset-y-0 -left-1/3 w-1/3 skew-x-12 bg-gradient-to-r from-transparent via-white/25 to-transparent opacity-0 [animation:irbz-sweep_2.4s_ease-in-out_1.2s_1] group-hover:opacity-100" />
            </div>

            {/* corner focus brackets */}
            <div aria-hidden className="pointer-events-none absolute inset-4">
              <span className="absolute left-0 top-0 h-6 w-6 rounded-tl-lg border-l-2 border-t-2 border-white/70" />
              <span className="absolute right-0 top-0 h-6 w-6 rounded-tr-lg border-r-2 border-t-2 border-white/70" />
              <span className="absolute bottom-0 left-0 h-6 w-6 rounded-bl-lg border-b-2 border-l-2 border-white/70" />
              <span className="absolute bottom-0 right-0 h-6 w-6 rounded-br-lg border-b-2 border-r-2 border-white/70" />
            </div>

            {/* bottom caption bar */}
            <div className="absolute inset-x-0 bottom-0 flex items-center justify-between bg-gradient-to-t from-black/60 via-black/20 to-transparent px-5 pb-4 pt-16">
              <span className="text-sm font-medium text-white">
                Frame 14 · Focus lock
              </span>
              <span className="rounded-full bg-white/15 px-2.5 py-1 text-[11px] font-medium uppercase tracking-wider text-white backdrop-blur-sm">
                f/1.8
              </span>
            </div>
          </div>
        </motion.div>

        <p className="mt-5 text-center text-xs text-neutral-400 dark:text-neutral-500">
          Hint: scroll slowly to keep the blur under your control.
        </p>
      </div>
    </section>
  );
}