Confetti Button

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export interface ConfettiButtonProps extends React.ComponentProps<"button"> {
8  /** Pieces thrown by one press. */
9  count?: number
10  /** Milliseconds a piece stays in the air. */
11  duration?: number
12  /** Furthest a piece travels sideways, in pixels. */
13  spread?: number
14  /** Colours a piece is picked from. */
15  colors?: string[]
16}
17 
18interface Piece {
19  id: number
20  drift: number
21  rise: number
22  fall: number
23  spin: number
24  size: number
25  color: string
26  radius: string
27}
28 
29const DEFAULT_COLORS = ["#2dd4bf", "#38bdf8", "#3b82f6", "#67e8f9", "#fbbf24"]
30 
31/**
32 * Two nested spans per piece, because a lob is two motions on two clocks: the
33 * outer drifts sideways at a constant rate while the inner rises and falls.
34 * One element could only ever travel in a straight line.
35 */
36export function ConfettiButton({
37  children,
38  className,
39  count = 18,
40  duration = 900,
41  spread = 90,
42  colors = DEFAULT_COLORS,
43  onClick,
44  disabled,
45  style,
46  ...props
47}: ConfettiButtonProps) {
48  const [pieces, setPieces] = React.useState<Piece[]>([])
49  const nextId = React.useRef(0)
50  const timers = React.useRef<number[]>([])
51 
52  React.useEffect(() => {
53    const pending = timers.current
54    return () => {
55      for (const timer of pending) {
56        window.clearTimeout(timer)
57      }
58    }
59  }, [])
60 
61  const burst = React.useCallback(() => {
62    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
63      return
64    }
65 
66    const palette = colors.length > 0 ? colors : DEFAULT_COLORS
67    const thrown: Piece[] = Array.from({ length: count }, () => {
68      // A fan across the top rather than a full circle. Pieces that start
69      // downward read as a leak, not a throw.
70      const angle = (-160 + Math.random() * 140) * (Math.PI / 180)
71      const reach = spread * (0.45 + Math.random() * 0.55)
72 
73      return {
74        id: nextId.current++,
75        drift: Math.cos(angle) * reach,
76        rise: Math.sin(angle) * reach,
77        fall: Math.abs(Math.sin(angle) * reach) + spread * 0.85,
78        spin: Math.round(Math.random() * 720 - 360),
79        size: 5 + Math.round(Math.random() * 4),
80        color: palette[Math.floor(Math.random() * palette.length)],
81        // A mix of chips and dots, so a burst does not read as one shape
82        // repeated at different angles.
83        radius: Math.random() < 0.4 ? "9999px" : "1px",
84      }
85    })
86 
87    setPieces((current) => [...current, ...thrown])
88 
89// … truncated