Particle Button

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Particle Button
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { MousePointerClick } from "lucide-react";
14import { AnimatePresence, motion } from "motion/react";
15import { type RefObject, useRef, useState } from "react";
16import type { ButtonProps } from "@/components/ui/button";
17import { Button } from "@/components/ui/button";
18import { cn } from "@/lib/utils";
19 
20interface ParticleButtonProps extends ButtonProps {
21  onSuccess?: () => void;
22  successDuration?: number;
23}
24 
25function SuccessParticles({
26  buttonRef,
27}: {
28  buttonRef: React.RefObject<HTMLButtonElement>;
29}) {
30  const rect = buttonRef.current?.getBoundingClientRect();
31  if (!rect) return null;
32 
33  const centerX = rect.left + rect.width / 2;
34  const centerY = rect.top + rect.height / 2;
35 
36  return (
37    <AnimatePresence>
38      {[...Array(6)].map((_, i) => (
39        <motion.div
40          animate={{
41            scale: [0, 1, 0],
42            x: [0, (i % 2 ? 1 : -1) * (Math.random() * 50 + 20)],
43            y: [0, -Math.random() * 50 - 20],
44          }}
45          className="fixed h-1 w-1 rounded-full bg-black dark:bg-white"
46          initial={{
47            scale: 0,
48            x: 0,
49            y: 0,
50          }}
51          key={i}
52          style={{ left: centerX, top: centerY }}
53          transition={{
54            duration: 0.6,
55            delay: i * 0.1,
56            ease: "easeOut",
57          }}
58        />
59      ))}
60    </AnimatePresence>
61  );
62}
63 
64export default function ParticleButton({
65  children,
66  onClick,
67  onSuccess,
68  successDuration = 1000,
69  className,
70  ...props
71}: ParticleButtonProps) {
72  const [showParticles, setShowParticles] = useState(false);
73  const buttonRef = useRef<HTMLButtonElement>(null);
74 
75  const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
76    setShowParticles(true);
77 
78    setTimeout(() => {
79      setShowParticles(false);
80    }, successDuration);
81  };
82 
83  return (
84    <>
85      {showParticles && (
86        <SuccessParticles
87          buttonRef={buttonRef as RefObject<HTMLButtonElement>}
88        />
89      )}
90      <Button
91        className={cn(
92          "relative",
93          showParticles && "scale-95",
94          "transition-transform duration-100",
95          className
96        )}
97        onClick={handleClick}
98        ref={buttonRef}
99        {...props}
100      >
101        {children}
102// … truncated