canvas

Water Ripple

A fluid distortion effect simulating water ripples triggered by interaction.

@threlte/core @threlte/extras three

Installation

Install the component

Run the following command to install the component and its dependencies:

npx @motion-core/cli add water-ripple

Import the component

Import the component into your Svelte file:

import { WaterRipple } from "$lib/motion-core";

import { WaterRipple } from "$lib/motion-core";

Usage

<script lang="ts">
	import { WaterRipple } from "motion-core";
</script>

<WaterRipple
	src="/images/demos/sample-15.jpg"
	brushSize={100}
	class="h-full min-h-96 w-full"
/>

Props

WaterRipple

Prop	Type	Default
`src`	`string`	`—`
`brushSize`	`number`	`100`
`class`	`string`	`""`