Motion Kit

Canvas

Water Ripple

Interactive water ripple effect on images. Creates realistic ripple distortions that follow pointer movement with expanding wave animations.

  • lit
  • ogl

Preview

Interactive water ripple effect — move your cursor over the image to create realistic ripple distortions with expanding wave animations.
Attributes

Installation

pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/water-ripple.json

Usage

---
import "@/components/motion-kit/water-ripple-element.ts";
---

<motion-water-ripple
  src="/path/to/image.jpg"
  brush-size={100}
  class="w-full h-[500px]"
/>

API Reference

Attribute Type Default
src The image source URL to apply the water ripple effect to. string
brush-size Size of the ripple brush in pixels. Larger values create bigger ripples. number 100