Next.js Blur-up Image

"use client";

import Image, { type ImageProps } from "next/image";
import { motion, useReducedMotion } from "motion/react";
import { type SyntheticEvent, useCallback, useState } from "react";

export type BlurUpStatus = "idle" | "loading" | "ready" | "error";

export type BlurUpImageProps = Omit<
  ImageProps,
  "src" | "alt" | "width" | "height" | "fill" | "className" | "placeholder" | "blurDataURL" | "onLoad" | "onError"
> & {
  src?: ImageProps["src"];
  alt: string;
  width: number;
  height: number;
  placeholder?: string;
  color?: string;
  blur?: number;
  radius?: number;
  className?: string;
  imageClassName?: string;
  onReady?: () => void;
  onError?: () => void;
};

const REVEAL = { duration: 0.76, ease: [0.22, 1, 0.36, 1] } as const;

const sourceKey = (src: BlurUpImageProps["src"]) => {
  if (!src) return "pending";
  if (typeof src === "string") return src;
  return ("default" in src ? src.default : src).src;
};

const staticBlurData = (src: BlurUpImageProps["src"]) => {
  const image = typeof src === "object" && src !== null && "default" in src ? src.default : src;
  if (typeof image !== "object" || image === null || !("blurDataURL" in image)) return undefined;
  return typeof image.blurDataURL === "string" ? image.blurDataURL : undefined;
};

export function BlurUpImage(props: BlurUpImageProps) {
  return <BlurUpImageFrame key={sourceKey(props.src)} {...props} />;
}

function BlurUpImageFrame({
  src,
  alt,
  width,
  height,
  placeholder,
  color,
  blur = 18,
  radius = 12,
  className,
  imageClassName,
  onReady,
  onError,
  ...imageProps
}: BlurUpImageProps) {
  const [status, setStatus] = useState<BlurUpStatus>(src ? "loading" : "idle");
  const ready = status === "ready";
  const failed = status === "error";
  const reducedMotion = useReducedMotion();
  const lqip = placeholder ?? staticBlurData(src);

  const reveal = useCallback(async (event: SyntheticEvent<HTMLImageElement>) => {
    try {
      await event.currentTarget.decode?.();
      setStatus("ready");
      onReady?.();
    } catch {
      setStatus("error");
      onError?.();
    }
  }, [onError, onReady]);

  return (
    <div
      aria-busy={Boolean(src) && !ready && !failed}
      className={\`relative w-full overflow-hidden bg-muted \${className ?? ""}\`}
      style={{ aspectRatio: \`\${width} / \${height}\`, borderRadius: radius, backgroundColor: color }}
    >
      {lqip ? (
        <motion.img
          src={lqip}
          alt=""
          aria-hidden
          draggable={false}
          className="absolute inset-0 size-full object-cover will-change-[opacity,transform]"
          style={{ filter: \`blur(\${blur}px)\` }}
          initial={false}
          animate={ready ? { opacity: 0, scale: 1.015 } : { opacity: 1, scale: 1.08 }}
          transition={reducedMotion ? { duration: 0 } : REVEAL}
        />
      ) : null}

      {src ? (
        <motion.div
          className="absolute inset-0 will-change-[opacity,transform]"
          initial={false}
          animate={ready ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 1.02 }}
          transition={reducedMotion ? { duration: 0 } : REVEAL}
        >
          <Image
            {...imageProps}
            src={src}
            alt={alt}
            width={width}
            height={height}
            sizes={imageProps.sizes ?? "100vw"}
            onLoad={reveal}
            onError={() => { setStatus("error"); onError?.(); }}
            className={\`size-full object-cover \${imageClassName ?? ""}\`}
            style={{ width: "100%", height: "100%", objectFit: "cover" }}
          />
        </motion.div>
      ) : null}

      {failed ? (
        <motion.div
          role="status"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={reducedMotion ? { duration: 0 } : { duration: 0.22 }}
          className="absolute inset-0 grid place-items-center bg-background/90 text-center text-xs text-muted-foreground backdrop-blur-sm"
        >
          Image failed to load
        </motion.div>
      ) : null}
    </div>
  );
}

// Keep a local JPG, PNG, WebP, or AVIF beside this file.
import projectPreview from "./project-preview.jpeg";
import { BlurUpImage } from "@/components/interior/blur-up-image";

export function ProjectCard() {
  return (
    <BlurUpImage
      src={projectPreview}
      alt="Project preview"
      width={projectPreview.width}
      height={projectPreview.height}
      color="#18231c"
      sizes="(min-width: 768px) 420px, 100vw"
      quality={75}
      loading="lazy"
      radius={12}
    />
  );
}