Ripple Effect

PreviousNext

Ripple effect is a modern animation component designed to enrich user interaction by creating a dynamic ripple effect when clicking on buttons or any HTML element. Built with Tailwind CSS and Motion.

Docs
bunduicomponent

Preview

Loading preview…
examples/motion/animations/ripple-effect/01/page.tsx
import { RippleEffect } from "./ripple-effect";
import { Button } from "@/components/ui/button";

export default function RippleEffectButton() {
  return (
    <RippleEffect className="rounded-lg">
      <Button size="lg">Click Me</Button>
    </RippleEffect>
  );
}

Installation

npx shadcn@latest add @bundui/ripple-effect-01

Usage

import { RippleEffect01 } from "@/components/ripple-effect-01"
<RippleEffect01 />