A material-style ripple that spreads from the exact point you click.
npx shadcn@latest add https://hyperblur.dev/r/ripple-click.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/ripple-click.tsx.
import { RippleClick } from "@/components/hyperblur/ripple-click"
<RippleClick className="rounded-full"><button>Click</button></RippleClick>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | What to wrap, usually a button. |
| color | string | "rgba(255,255,255,0.35)" | Color of the ripple. |
| duration | number | 0.6 | Seconds each ripple takes to fade out. |