"use client"; import * as React from "react"; import { createPortal } from "react-dom"; import { motion } from "motion/react"; import { useMounted, useReducedMotion } from "@kineticui/core"; type Burst = { id: number; x: number; y: number }; const COLORS = [ "var(--kn-accent)", "#7C8CFF", "#F4A86A", "#F0A3D0", "#6EE7A0", "var(--kn-foreground)", ]; /** * const { fire, Confetti } = useConfetti(); * * */ export function useConfetti({ pieces = 28 }: { pieces?: number } = {}) { const [bursts, setBursts] = React.useState([]); const reduced = useReducedMotion(); // Portals only exist in the browser; render nothing until mounted to keep hydration in sync. const mounted = useMounted(); const fire = React.useCallback( (from?: { clientX: number; clientY: number } | HTMLElement | null) => { if (reduced) return; let x = window.innerWidth / 2; let y = window.innerHeight / 2; if (from instanceof HTMLElement) { const r = from.getBoundingClientRect(); x = r.left + r.width / 2; y = r.top + r.height / 2; } else if (from && "clientX" in from) { x = from.clientX; y = from.clientY; } const id = Date.now() + Math.random(); setBursts((b) => [...b, { id, x, y }]); setTimeout(() => setBursts((b) => b.filter((p) => p.id !== id)), 1400); }, [reduced], ); const Confetti = React.useCallback( () => !mounted ? null : createPortal(

{bursts.map((b) => Array.from({ length: pieces }).map((_, i) => { const angle = (i / pieces) * Math.PI * 2 + b.id; const dist = 90 + ((i * 37) % 80); return ( ); }), )}

, document.body, ), [bursts, pieces, mounted], ); return { fire, Confetti }; } export type ConfettiButtonProps = React.ButtonHTMLAttributes; /** A plain button that fires confetti from itself on click. Style it with className. */ export function ConfettiButton({ onClick, children, ...props }: ConfettiButtonProps) { const { fire, Confetti } = useConfetti(); return ( <> ); }

Confetti

Installation

Exports