"use client";

import * as React from "react";
import confetti from "canvas-confetti";
import { cn } from "@/lib/utils";

interface ConfettiOptions {
  /**
   * Number of confetti particles
   * @default 100
   */
  particleCount?: number;
  /**
   * Spread angle in degrees
   * @default 70
   */
  spread?: number;
  /**
   * Starting velocity
   * @default 45
   */
  startVelocity?: number;
  /**
   * How quickly particles slow down (0-1)
   * @default 0.9
   */
  decay?: number;
  /**
   * How fast particles fall
   * @default 1
   */
  gravity?: number;
  /**
   * Horizontal drift
   * @default 0
   */
  drift?: number;
  /**
   * How long confetti takes to disappear in ticks
   * @default 200
   */
  ticks?: number;
  /**
   * Origin point (0-1 for x and y)
   */
  origin?: { x: number; y: number };
  /**
   * Colors for confetti pieces
   */
  colors?: string[];
  /**
   * Shapes: 'square', 'circle', or 'star'
   */
  shapes?: ("square" | "circle" | "star")[];
  /**
   * Whether confetti should be flat (no 3D effect)
   * @default false
   */
  flat?: boolean;
  /**
   * Scalar for particle size
   * @default 1
   */
  scalar?: number;
}

interface ConfettiProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * Whether the confetti is active
   * @default false
   */
  active?: boolean;
  /**
   * Confetti options
   */
  options?: ConfettiOptions;
  /**
   * Callback when animation completes
   */
  onComplete?: () => void;
}

const defaultColors = [
  "#FFD700", // Gold
  "#FF6B6B", // Coral
  "#4ECDC4", // Teal
  "#A855F7", // Purple
  "#F97316", // Orange
  "#3B82F6", // Blue
  "#EC4899", // Pink
  "#10B981", // Emerald
];

/**
 * Fire confetti with given options
 */
function fireConfetti(options: ConfettiOptions = {}) {
  const {
    particleCount = 100,
    spread = 70,
    startVelocity = 45,
    decay = 0.9,
    gravity = 1,
    drift = 0,
    ticks = 200,
    origin = { x: 0.5, y: 0.5 },
    colors = defaultColors,
    shapes = ["square", "circle"],
    flat = false,
    scalar = 1,
  } = options;

  confetti({
    particleCount,
    spread,
    startVelocity,
    decay,
    gravity,
    drift,
    ticks,
    origin,
    colors,
    shapes,
    flat,
    scalar,
    disableForReducedMotion: true,
  });
}

/**
 * Fire a celebration burst (multiple bursts for a bigger effect)
 */
function fireCelebration(origin: { x: number; y: number } = { x: 0.5, y: 0.5 }) {
  const count = 200;
  const defaults = {
    origin,
    colors: defaultColors,
    disableForReducedMotion: true,
  };

  function fire(particleRatio: number, opts: confetti.Options) {
    confetti({
      ...defaults,
      ...opts,
      particleCount: Math.floor(count * particleRatio),
    });
  }

  // Fire multiple bursts with different characteristics for a rich effect
  fire(0.25, {
    spread: 26,
    startVelocity: 55,
  });
  fire(0.2, {
    spread: 60,
  });
  fire(0.35, {
    spread: 100,
    decay: 0.91,
    scalar: 0.8,
  });
  fire(0.1, {
    spread: 120,
    startVelocity: 25,
    decay: 0.92,
    scalar: 1.2,
  });
  fire(0.1, {
    spread: 120,
    startVelocity: 45,
  });
}

/**
 * Fire confetti from both sides of the screen (cannon effect)
 */
function fireCannons() {
  const end = Date.now() + 1000;
  const colors = defaultColors;

  (function frame() {
    confetti({
      particleCount: 2,
      angle: 60,
      spread: 55,
      origin: { x: 0 },
      colors,
      disableForReducedMotion: true,
    });
    confetti({
      particleCount: 2,
      angle: 120,
      spread: 55,
      origin: { x: 1 },
      colors,
      disableForReducedMotion: true,
    });

    if (Date.now() < end) {
      requestAnimationFrame(frame);
    }
  })();
}

/**
 * Fire confetti that falls like snow/rain from the top
 */
function fireRain(durationMs: number = 3000) {
  const end = Date.now() + durationMs;
  const colors = defaultColors;

  (function frame() {
    confetti({
      particleCount: 1,
      startVelocity: 0,
      ticks: 300,
      gravity: 0.5,
      origin: {
        x: Math.random(),
        y: 0,
      },
      colors,
      disableForReducedMotion: true,
    });

    if (Date.now() < end) {
      requestAnimationFrame(frame);
    }
  })();
}

function Confetti({
  active = false,
  options,
  onComplete,
  className,
  ...props
}: ConfettiProps) {
  const prevActiveRef = React.useRef(false);

  React.useEffect(() => {
    // Only fire when transitioning from inactive to active
    if (active && !prevActiveRef.current) {
      fireCelebration(options?.origin);

      // Call onComplete after animation settles
      const timer = setTimeout(() => {
        onComplete?.();
      }, 2500);

      return () => clearTimeout(timer);
    }

    prevActiveRef.current = active;
  }, [active, options, onComplete]);

  // This component doesn't render anything visible
  // canvas-confetti creates its own canvas
  return (
    <div
      className={cn("pointer-events-none", className)}
      aria-hidden="true"
      {...props}
    />
  );
}

interface ConfettiButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /**
   * Confetti configuration
   */
  confettiProps?: Omit<ConfettiProps, "active">;
  /**
   * Type of confetti effect: 'burst', 'cannons', or 'rain'
   * @default 'burst'
   */
  effect?: "burst" | "cannons" | "rain";
  children: React.ReactNode;
}

function ConfettiButton({
  confettiProps,
  effect = "burst",
  children,
  onClick,
  className,
  ...props
}: ConfettiButtonProps) {
  const buttonRef = React.useRef<HTMLButtonElement>(null);

  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    // Calculate origin from button position
    if (buttonRef.current) {
      const rect = buttonRef.current.getBoundingClientRect();
      const x = (rect.left + rect.width / 2) / window.innerWidth;
      const y = (rect.top + rect.height / 2) / window.innerHeight;

      switch (effect) {
        case "cannons":
          fireCannons();
          break;
        case "rain":
          fireRain();
          break;
        case "burst":
        default:
          fireCelebration({ x, y });
          break;
      }
    } else {
      // Fallback to center
      fireCelebration({ x: 0.5, y: 0.5 });
    }

    onClick?.(e);
  };

  return (
    <button
      ref={buttonRef}
      onClick={handleClick}
      className={cn(
        "relative inline-flex items-center justify-center rounded-xl bg-primary px-6 py-3 font-medium text-primary-foreground transition-all hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 active:scale-95",
        className
      )}
      {...props}
    >
      {children}
    </button>
  );
}

export {
  Confetti,
  ConfettiButton,
  fireConfetti,
  fireCelebration,
  fireCannons,
  fireRain,
};
Confetti

Dependencies

Files

Installation
