Particle Logo

"use client";

// A logo made of dots. They drift in from across the frame and gather into
// the logo the first time it scrolls into view, part around the pointer like
// sand and spring back when it leaves, and a press scatters them outward
// before they find their way home. An image logo keeps its own colours.
// Drawn on a 2D canvas in a handful of batched paths; the loop stops as soon
// as every dot is at rest, sleeps off screen, and reduced motion skips straight
// to the finished logo.

import { useEffect, useRef, type CSSProperties, type HTMLAttributes, type PointerEvent } from "react";
import { cn } from "@/lib/utils";
import { MARK, loadImage, lowEnd, paintLogo, useDarkLook, type LogoTheme } from "../_logo/logo-kit";

export type ParticleLogoShape = "dot" | "square";
export type ParticleLogoEntrance = "gather" | "fade" | "none";

export type ParticleLogoProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
  /** Width of the frame in px; it shrinks to fit its container. */
  size?: number;
  /** Your own logo as an SVG path `d`, drawn on a 24 × 24 grid. Defaults to the uibrik mark. */
  logoPath?: string;
  /** Your own logo as an image URL (same-origin or CORS-enabled). Dots take its colours. */
  logoSrc?: string;