"use client"; import React from "react"; import { cn } from "@/lib/utils"; interface RippleProps { className?: string; color?: string; duration?: number; } export const Ripple: React.FC = ({ className, color = "#007AFF", duration = 600, }) => { const [ripples, setRipples] = React.useState< { x: number; y: number; id: number }[] >([]); const handleClick = (e: React.MouseEvent) => { const rect = e.currentTarget.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const id = Date.now(); setRipples((prev) => [...prev, { x, y, id }]); setTimeout(() => { setRipples((prev) => prev.filter((r) => r.id !== id)); }, duration); }; return (

{ripples.map((ripple) => ( ))}

); }; // Button with Ripple effect interface RippleButtonProps extends React.ButtonHTMLAttributes { children: React.ReactNode; rippleColor?: string; className?: string; } export const RippleButton: React.FC = ({ children, rippleColor = "rgba(255, 255, 255, 0.3)", className, ...props }) => { const [ripples, setRipples] = React.useState< { x: number; y: number; id: number }[] >([]); const handleClick = (e: React.MouseEvent) => { const rect = e.currentTarget.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const id = Date.now(); setRipples((prev) => [...prev, { x, y, id }]); setTimeout(() => { setRipples((prev) => prev.filter((r) => r.id !== id)); }, 600); props.onClick?.(e); }; return ( ); }; // CSS for ripple animation const rippleStyles = ` @keyframes ripple { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.5; } 100% { transform: translate(-50%, -50%) scale(4); opacity: 0; } } .animate-ripple { animation: ripple 600ms ease-out forwards; width: 100px; height: 100px; } `; if (typeof document !== "undefined") { const styleId = "auralix-ripple-styles"; if (!document.getElementById(styleId)) { const style = document.createElement("style"); style.id = styleId; style.textContent = rippleStyles; document.head.appendChild(style); } }

Name	Type	Default	Description
`color`	`string`	`"#007AFF"`	Ripple color.
`duration`	`number`	`600`	Animation duration (ms).

Ripple

Preview

Installation

Usage

Ripple Button

Props