Click Ripples

A React component that creates a smooth, animated ripple effect at the point of user interaction. Perfect for adding delightful feedback to backgrounds, cards, or any interactive UI element.

Preview

Click anywhere to see the ripple effect

Installation

bunx --bun shadcn@latest add https://shahram.dev/r/click-ripples.json

Usage

Global Usage

import { ClickRipples } from "@/components/shahram.dev/click-ripples";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ClickRipples>
          {children}
        </ClickRipples>
      </body>
    </html>
  );
}

Local Usage

import { ClickRipples } from "@/components/shahram.dev/click-ripples";

export function CardWithRipple() {
  return (
    <ClickRipples radius={60} rippleTime_inSec={0.7} color="rgba(0,150,255,0.3)">
      <div className="rounded-lg bg-zinc-800 p-8 text-white">
        Click inside this card!
      </div>
    </ClickRipples>
  );
}

API Reference

Prop	Type	Default	Description
children	ReactNode	—	Content to render inside the ripple container
radius	number	50	Diameter of the ripple in pixels
rippleTime_inSec	number	0.3	Duration of the ripple animation (in seconds)
color	string	rgba(255,255,255,0.8)	Ripple color in rgba format