Water Ripple — Godsend

Preparing preview…

Installation

Choose your framework. The registry installs one component file and its PixiJS dependency.

Installation unavailable

The preview is public, but its installable release is still being prepared.

The registry command writes the component to src/lib/components/ui/WaterRipple.svelte and installs its dependencies.

The registry command writes the component to src/components/ui/WaterRipple.tsx and installs its dependencies.

The registry command writes the component to src/components/ui/WaterRipple.vue and installs its dependencies.

The ripple brush is embedded as a data URL, so installation does not create a separate image file.

Overview

Water Ripple turns any image into an interactive surface, stamping soft expanding displacement waves wherever the pointer moves.

The bundled ripple brush is embedded directly in the generated component, while the displayed image remains an explicit source supplied by the consumer.

Basic usage

The shader fills its parent. Your layout decides whether that parent is a card, hero, or viewport.

Hero.svelte

<script lang="ts">
	import WaterRipple from '$lib/components/ui/WaterRipple.svelte';
</script>

<section class="relative h-128 overflow-hidden">
	<WaterRipple
		class="absolute inset-0"
		src="/images/your-image.jpg"
	/>

	<div class="relative z-10">Your content</div>
</section>
<script lang="ts">
	import WaterRipple from '$lib/components/ui/WaterRipple.svelte';
</script>

<section class="relative h-128 overflow-hidden">
	<WaterRipple
		class="absolute inset-0"
		src="/images/your-image.jpg"
	/>

	<div class="relative z-10">Your content</div>
</section>

import { WaterRipple } from '@/components/ui/WaterRipple';

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<WaterRipple
				className="absolute inset-0"
				src="/images/your-image.jpg"
			/>

			<div className="relative z-10">Your content</div>
		</section>
	);
}
import { WaterRipple } from '@/components/ui/WaterRipple';

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<WaterRipple
				className="absolute inset-0"
				src="/images/your-image.jpg"
			/>

			<div className="relative z-10">Your content</div>
		</section>
	);
}

<script setup lang="ts">
import WaterRipple from '@/components/ui/WaterRipple.vue';
</script>

<template>
	<section class="relative h-128 overflow-hidden">
		<WaterRipple
			class="absolute inset-0"
			src="/images/your-image.jpg"
		/>

		<div class="relative z-10">Your content</div>
	</section>
</template>
<script setup lang="ts">
import WaterRipple from '@/components/ui/WaterRipple.vue';
</script>

<template>
	<section class="relative h-128 overflow-hidden">
		<WaterRipple
			class="absolute inset-0"
			src="/images/your-image.jpg"
		/>

		<div class="relative z-10">Your content</div>
	</section>
</template>

Give the component a resolved height through its class or parent container.
Remote image sources must allow cross-origin image loading when served from another origin.
Reduced-motion preferences pause the displacement animation without removing the source image.

Component API

Types below match the selected Svelte component.

Types below match the selected React component.

Types below match the selected Vue component.