Pixelated Canvas

"use client";
import { useEffect, useRef, useState } from "react";
import { PixelatedCanvas } from "@/lab/aceternity/ui/pixelated-canvas";

export default function PixelatedCanvasDemo() {
  const boxRef = useRef<HTMLDivElement>(null);
  const [size, setSize] = useState<{ width: number; height: number } | null>(null);

  useEffect(() => {
    const el = boxRef.current;
    if (!el) return;
    const ro = new ResizeObserver(([entry]) => {
      const { width: cw, height: ch } = entry.contentRect;
      // Original is 400×500 (4:5). Fit it inside the stage, snapped to 10px to avoid thrashing.
      let height = Math.min(ch * 0.88, 500);
      let width = height * 0.8;
      if (width > cw * 0.9) {
        width = cw * 0.9;
        height = width / 0.8;
      }
      const next = { width: Math.max(80, Math.round(width / 10) * 10), height: Math.max(100, Math.round(height / 10) * 10) };
      setSize((prev) => (prev && prev.width === next.width && prev.height === next.height ? prev : next));
    });
    ro.observe(el);
    return () => ro.disconnect();
  }, []);

  return (
    <div ref={boxRef} className="relative flex h-full w-full items-center justify-center overflow-hidden bg-neutral-950">
      {size && (
        <PixelatedCanvas
          src="https://assets.aceternity.com/manu-red.png"
          width={size.width}
          height={size.height}
          cellSize={3}
          dotScale={0.9}
          shape="square"
          backgroundColor="#000000"
          dropoutStrength={0.4}
          interactive
          distortionStrength={3}
          distortionRadius={80}
          distortionMode="swirl"
          followSpeed={0.2}
          jitterStrength={4}
          jitterSpeed={4}
          sampleAverage
          tintColor="#FFFFFF"
          tintStrength={0.2}
          className="rounded-xl border border-neutral-800 shadow-lg"
        />
      )}
    </div>
  );
}