Pixel Bloom Grid

"use client";

import { type ReactNode, useCallback, useEffect, useRef } from "react";
import { cn } from "@/lib/cn";

/* ------------------------------------------------------------------ */
/*  PixelBloomGrid                                                    */
/* ------------------------------------------------------------------ */

export type AnimationPattern =
  | "center"
  | "top"
  | "bottom"
  | "left"
  | "right"
  | "diagonal"
  | "ascend"
  | "edges"
  | "spiral"
  | "cursor"
  | "random";

/** One animated square: grows in after its delay, shimmers at full size,
 *  shrinks away on disappear. */
export class Pixel {
  private ctx: CanvasRenderingContext2D;
  private x: number;
  private y: number;
  private color: string;
  private speed: number;
  private size = 0;
  private sizeStep = 0.4 * Math.random();
  private minSize = 0.5;
  private maxSizeInteger = 2;
  private maxSize: number;
  private counter = 0;
  private counterStep: number;
  private isReverse = false;
  private isShimmer = false;
  delay: number;
  isIdle = false;

  constructor(
    canvas: HTMLCanvasElement,
    ctx: CanvasRenderingContext2D,
    x: number,
    y: number,
    color: string,
    speed: number,
    delay: number,
  ) {
    this.ctx = ctx;
    this.x = x;
    this.y = y;
    this.color = color;
    this.speed = (Math.random() * 0.8 + 0.1) * speed;
    this.maxSize = Math.random() * (this.maxSizeInteger - this.minSize) + this.minSize;
    this.delay = delay;
    this.counterStep = 4 * Math.random() + (canvas.width + canvas.height) * 0.01;
  }

  private draw() {
    const offset = 0.5 * this.maxSizeInteger - 0.5 * this.size;
    this.ctx.fillStyle = this.color;
    this.ctx.fillRect(this.x + offset, this.y + offset, this.size, this.size);
  }

  private shimmer() {
    if (this.size >= this.maxSize) this.isReverse = true;
    else if (this.size <= this.minSize) this.isReverse = false;
    this.size += this.isReverse ? -this.speed : this.speed;
  }

  appear() {
    this.isIdle = false;
    if (this.counter <= this.delay) {
      this.counter += this.counterStep;
      return;
    }
    if (this.size >= this.maxSize) this.isShimmer = true;
    if (this.isShimmer) this.shimmer();
    else this.size += this.sizeStep;
    this.draw();
  }

  disappear() {
    this.isShimmer = false;
    this.counter = 0;
    if (this.size <= 0) {
      this.isIdle = true;
      return;
    }
    this.size -= 0.1;
    this.draw();
  }

  resetCounter() {
    this.counter = 0;
  }

  get px() {
    return this.x;
  }
  get py() {
    return this.y;
  }
}

/** Delay field per pattern: how long each pixel waits before appearing. */
function patternDelay(
  pattern: AnimationPattern,
  x: number,
  y: number,
  w: number,
  h: number,
  cx?: number,
  cy?: number,
): number {
  switch (pattern) {
    case "top":
      return y;
    case "bottom":
      return h - y;
    case "left":
      return x;
    case "right":
      return w - x;
    case "diagonal":
      return x + y;
    case "ascend":
      return x + (h - y);
    case "edges":
      return Math.min(x, w - x, y, h - y);
    case "spiral": {
      const hw = w / 2;
      const hh = h / 2;
      const dx = x - hw;
      const dy = y - hh;
      const angle = (Math.atan2(dy, dx) + Math.PI) / (2 * Math.PI);
      const maxR = Math.sqrt(hw * hw + hh * hh);
      return ((Math.sqrt(dx * dx + dy * dy) / maxR) * 3 + angle) * maxR * 0.5;
    }
    case "cursor": {
      const dx = x - (cx ?? w / 2);
      const dy = y - (cy ?? h / 2);
      return Math.sqrt(dx * dx + dy * dy);
    }
    case "random":
      return Math.random() * Math.sqrt(w * w + h * h) * 0.5;
    default: {
      const dx = x - w / 2;
      const dy = y - h / 2;
      return Math.sqrt(dx * dx + dy * dy);
    }
  }
}

interface PixelBloomGridProps {
  /** Grid pitch in px between pixels [Optional, default: 5] */
  gap?: number;
  /** Shimmer speed 0-100 [Optional, default: 35] */
  speed?: number;
  /** Delay field shaping the reveal wave [Optional, default: "center"] */
  pattern?: AnimationPattern;
  /** Comma-separated fill colors, sampled per pixel [Optional] */
  colors?: string;
  className?: string;
  children?: ReactNode;
}

/**
 * A canvas of tiny shimmering squares that wave in when hovered: every pixel
 * gets a delay from the chosen pattern field (center, spiral, cursor
 * distance...), grows in after it, then shimmers between sizes. Leaving
 * reverses the wave. The rAF loop parks itself once every pixel is idle.
 * @param {AnimationPattern} pattern - Reveal order field [Optional, default: "center"]
 * @param {string} colors - Comma-separated palette [Optional]
 */
export function PixelBloomGrid({
  gap = 5,
  speed = 35,
  pattern = "center",
  colors = "#a1a1aa,#71717a,#52525b",
  className,
  children,
}: PixelBloomGridProps) {
  const hostRef = useRef<HTMLDivElement | null>(null);
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const pixelsRef = useRef<Pixel[]>([]);
  const rafRef = useRef<number | null>(null);
  const lastTimeRef = useRef(0);
  const reducedRef = useRef(false);

  useEffect(() => {
    reducedRef.current = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    lastTimeRef.current = performance.now();
  }, []);

  const build = useCallback(() => {
    const host = hostRef.current;
    const canvas = canvasRef.current;
    const ctx = canvas?.getContext("2d");
    if (!host || !canvas || !ctx) return;
    const rect = host.getBoundingClientRect();
    const w = Math.floor(rect.width);
    const h = Math.floor(rect.height);
    canvas.width = w;
    canvas.height = h;
    canvas.style.width = `${w}px`;
    canvas.style.height = `${h}px`;

    const palette = colors.split(",");
    const pitch = Math.max(1, Math.floor(gap));
    const speedFactor =
      speed <= 0 || reducedRef.current ? 0 : speed >= 100 ? 0.1 : 0.001 * speed;
    const list: Pixel[] = [];
    for (let x = 0; x < w; x += pitch) {
      for (let y = 0; y < h; y += pitch) {
        const color = palette[Math.floor(Math.random() * palette.length)];
        const delay = reducedRef.current ? 0 : patternDelay(pattern, x, y, w, h);
        list.push(new Pixel(canvas, ctx, x, y, color, speedFactor, delay));
      }
    }
    pixelsRef.current = list;
  }, [gap, speed, colors, pattern]);

  /** Drive all pixels through `phase` at ~60fps; park when everyone idles. */
  const run = useCallback((phase: "appear" | "disappear") => {
    const tick = () => {
      rafRef.current = requestAnimationFrame(tick);
      const now = performance.now();
      const elapsed = now - lastTimeRef.current;
      if (elapsed < 1000 / 60) return;
      lastTimeRef.current = now - (elapsed % (1000 / 60));

      const canvas = canvasRef.current;
      const ctx = canvas?.getContext("2d");
      if (!canvas || !ctx) return;
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      let allIdle = true;
      for (const pixel of pixelsRef.current) {
        pixel[phase]();
        if (!pixel.isIdle) allIdle = false;
      }
      if (allIdle && rafRef.current !== null) cancelAnimationFrame(rafRef.current);
    };
    if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
    rafRef.current = requestAnimationFrame(tick);
  }, []);

  useEffect(() => {
    build();
    const obs = new ResizeObserver(build);
    if (hostRef.current) obs.observe(hostRef.current);
    return () => {
      obs.disconnect();
      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
    };
  }, [build]);

  return (
    <div
      ref={hostRef}
      className={cn("relative isolate overflow-hidden", className)}
      onMouseEnter={(e) => {
        if (pattern === "cursor" && hostRef.current) {
          const rect = hostRef.current.getBoundingClientRect();
          const cx = e.clientX - rect.left;
          const cy = e.clientY - rect.top;
          for (const pixel of pixelsRef.current) {
            pixel.delay = patternDelay("cursor", pixel.px, pixel.py, rect.width, rect.height, cx, cy);
            pixel.resetCounter();
          }
        }
        run("appear");
      }}
      onMouseLeave={() => run("disappear")}
    >
      <canvas ref={canvasRef} className="pointer-events-none absolute inset-0 h-full w-full" />
      <div className="relative z-[1]">{children}</div>
    </div>
  );
}