Pixelate reveal

import { useEffect, useRef, useState } from 'react';
import { useInView, useReducedMotion } from 'motion/react';

const BLOCKS = [48, 24, 12, 6, 3]; // px per block, coarse to fine
const STEP_MS = 140;

type PixelateImageProps = {
  src: string;
  alt: string;
  width: number;
  height: number;
  delay?: number;
};

export function PixelateImage({
  src,
  alt,
  width,
  height,
  delay = 0
}: PixelateImageProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const inView = useInView(canvasRef, { once: true, amount: 0.4 });
  const reduceMotion = useReducedMotion();
  const [done, setDone] = useState(false);

  useEffect(() => {
    const context = canvasRef.current?.getContext('2d');
    if (!inView || !context || reduceMotion) return;
    const image = new Image();
    const small = document.createElement('canvas');
    let step = 0;
    let timer = 0;
    image.onload = () => {
      timer = window.setInterval(() => {
        const block = BLOCKS[step++];
        if (block === undefined) {
          window.clearInterval(timer);
          return setDone(true);
        }
        // Drawing tiny averages the colors; scaling up without smoothing
        // turns each tiny pixel into a sharp square.
        const [w, h] = [Math.ceil(width / block), Math.ceil(height / block)];
        small.width = w;
        small.height = h;
        small.getContext('2d')?.drawImage(image, 0, 0, w, h);
        context.imageSmoothingEnabled = false;
        context.drawImage(small, 0, 0, w * block, h * block);
      }, STEP_MS);
    };
    const start = window.setTimeout(() => (image.src = src), delay);
    return () => {
      window.clearTimeout(start);
      window.clearInterval(timer);
    };
  }, [inView, reduceMotion, src, width, height, delay]);

  return (
    <div
      className='relative overflow-hidden rounded-xl bg-muted'
      style={{ width, height }}
    >
      <canvas
        ref={canvasRef}
        width={width}
        height={height}
        aria-hidden
        className='absolute inset-0'
      />
      {/* The real image takes over for the last, sharp frame. */}
      <img
        src={src}
        alt={alt}
        width={width}
        height={height}
        className={`relative size-full object-cover ${done || reduceMotion ? '' : 'invisible'}`}
      />
    </div>
  );
}