Motion Core

Canvas

Water Ripple

A fluid distortion effect simulating water ripples triggered by interaction.

ogl

Installation

Install the component

Run the following command to install the component and its dependencies: 
npx @motion-core/cli add water-ripple
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

Props

100
<script lang="ts">
	import { WaterRipple } from "motion-core";
	import type { ComponentProps } from "svelte";

	type Props = Partial<ComponentProps<typeof WaterRipple>>;

	let { brushSize = 100 }: Props = $props();
</script>

<WaterRipple
	src="/images/photos/sample-image-18.webp"
	class="h-full min-h-96 w-full"
	{brushSize}
/>

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

	type Props = Partial<ComponentProps<typeof WaterRipple>>;

	let { brushSize = 100 }: Props = $props();
</script>

<WaterRipple
	src="/images/photos/sample-image-18.webp"
	class="h-full min-h-96 w-full"
	{brushSize}
/>

Props

WaterRipple

PropTypeDefault
src
string —
brushSize
number 100
class
string ""