Canvas

Water Ripple

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

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

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

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

yarn 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]"
/>

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

export default function Page() {
  return (
    <motion-water-ripple
      src="/path/to/image.jpg"
      brush-size={100}
      className="w-full h-[500px]"
    />
  );
}

<script setup>
import "@/components/motion-kit/water-ripple-element.ts";
</script>

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

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

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

<script type="module" src="/components/motion-kit/water-ripple-element.js"></script>

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

API Reference

Attribute	Type	Default
`src`	`string`
`brush-size`	`number`	`100`