npm i svelte-ripple-action

Installation

Install the package from npm

npm i svelte-ripple-action

Is this compatible with Svelte 5?

Yep, versions 2.0.0 onwards support Svelte 5

Usage

Import the base styles inside the root of your app

<script>
	import "svelte-ripple-action/ripple.css"
</script>

Use the directive in your components

<script>
	import { ripple } from "svelte-ripple-action";
</script>

<button use:ripple>Click me</button>

Options

You can pass an object to the directive to customize the ripple effect

color?: string color of the ripple

duration?: number duration of the ripple in seconds

maxRadius?: number maximum radius of the ripple

center?: boolean whether to start the ripple from the center

disabled?: boolean disable the ripple effect

Preview

<button 
	use:ripple={{
		color: "rgba(255,255,255,0.2)",
		duration: 0.6,
		maxRadius: 0,
		center: false,
		disabled: false,
	}}
>
	Click me
</button>

Other examples

Image ripple

Gradient ripple

Needs to be wrapped in a div for void elements like img, input, etc.

<script>
	import { ripple } from "svelte-ripple-action";
</script>

<div use:ripple class="box imgripple">Image ripple</div>
<div use:ripple class="box gradient">Gradient ripple</div>

<br />
<br />

<p>Needs to be wrapped in a div for void elements like img, input, etc.</p>

<div use:ripple class="imgbox">
	<img
		src="...."
		alt="Man dancing"
	/>
</div>

<div
	use:ripple={{
		color: "rgba(0,0,0,0.5)",
	}}
>
	<input type="text" placeholder="Type something" style="width: 100%;" />
</div>

<style>
	.box {
		height: 200px;
		width: 200px;
		align-items: center;
		justify-content: center;
		border: 1px solid black;
		border-radius: 5px;
		margin-top: 20px;
		margin-right: 20px;
		display: inline-flex;
		user-select: none;
	}

	.imgbox {
		height: 200px;
		width: 200px;
		border-radius: 5px;
		margin-top: 20px;
		margin-right: 20px;
		display: inline-flex;
	}

	.imgbox img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	:global(.imgripple .ripple) {
		background: url(.....);
		background-size: 80%;
		background-position: center;
		background-repeat: no-repeat;
		z-index: -1;
	}

	:global(.gradient .ripple) {
		background: linear-gradient(
			45deg, 
			#f3ed783d, 
			#af4261
		);
	}
</style>