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 motion-blocks add water-ripple

npx motion-blocks add water-ripple

bunx --bun motion-blocks add water-ripple

yarn dlx motion-blocks add water-ripple

Usage

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

import "@/components/motion-blocks/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-blocks/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-blocks/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-blocks/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`