"use client"; import * as React from "react"; import { motion, AnimatePresence, type HTMLMotionProps, type Transition, } from "motion/react"; import { cn } from "@/lib/utils"; const sizes = { default: "size-8 [&_svg]:size-5", sm: "size-6 [&_svg]:size-4", md: "size-10 [&_svg]:size-6", lg: "size-12 [&_svg]:size-7", }; const animations = { pulse: { initial: { scale: 1.2, opacity: 0 }, animate: { scale: [1.2, 1.8, 1.2], opacity: [0, 0.3, 0] }, transition: { duration: 1.2, ease: "easeInOut" }, }, glow: { initial: { scale: 1, opacity: 0 }, animate: { scale: [1, 1.5], opacity: [0.8, 0] }, transition: { duration: 0.8, ease: "easeOut" }, }, particle: (index: number) => ({ initial: { x: "50%", y: "50%", scale: 0, opacity: 0 }, animate: { x: `calc(50% + ${Math.cos((index * Math.PI) / 3) * 30}px)`, y: `calc(50% + ${Math.sin((index * Math.PI) / 3) * 30}px)`, scale: [0, 1, 0], opacity: [0, 1, 0], }, transition: { duration: 0.8, delay: index * 0.05, ease: "easeOut" }, }), }; type IconButtonProps = Omit, "color"> & { icon: React.ElementType; active?: boolean; className?: string; animate?: boolean; size?: keyof typeof sizes; color?: [number, number, number]; transition?: Transition; }; function IconButton({ icon: Icon, className, active = false, animate = true, size = "default", color = [59, 130, 246], transition = { type: "spring", stiffness: 300, damping: 15 }, ...props }: IconButtonProps) { return ( {active && ( )} {animate && active && ( <> {[...Array(6)].map((_, i) => ( ))} )} ); } export { IconButton, sizes, type IconButtonProps };

Animate UI

Icon Button

Installation

Examples