Svelte ripple action

Svelte directive for a ripple effect

GitHub Repo stars

Usage

Install the package from npm or any node package manager of your choice

npm i -D svelte-ripple-action

Import the CSS styles for the ripple effect.

import "svelte-ripple-action/ripple.css";

Import the directive from the package and use it on any element you want to have a ripple effect on

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

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

DONE! 🥳 you have a ripple effect on your element.

Options

You can pass options to the ripple action to customize the ripple effect.

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

<button use:ripple={options}>Click me</button>

center?: boolean

By default, the ripple effect starts from the point where the user clicks on the element. If you want the ripple effect to start from the center of the element, you can pass the center option.

<button use:ripple={{center:true}}>Click me</button>

color?: string

The color of the ripple effect. You can pass any valid CSS color value to the color option.

<button
  use:ripple={{
  	color: "rgba(255, 0, 0, 0.2)",
  }}
  style="background-color: white;color:red;border: 1px solid red;"
>
  Red ripple
</button>

duration?: number

Duration of the ripple effect in seconds. You can pass any valid number to the duration option.

<button use:ripple={{duration:2}}>2 seconds</button> 
<button use:ripple={{duration:0.2}}>0.2 seconds</button>

maxRadius?: number

Maximum radius of the ripple effect. You can pass any valid number maxRadius option.

<button use:ripple={{maxRadius:200}} style="width: 400px; height: 200px;">200px</button>

Some examples

Image ripple
Gradient ripple

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

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

<br />

<p>Needs to be wrapped in a div for void elements like img, input, etc.</p>
<div use:ripple class="imgbox">
	<img
		src="https://media.tenor.com/VFFJ8Ei3C2IAAAAM/rickroll-rick.gif"
		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;
}

.imgbox {
  height: 200px;
  width: 200px;
  border-radius: 5px;
  margin-top: 20px;
  margin-right: 20px;
  display: inline-flex;
  & img {
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  }
}

.imgripple {
  & .ripple {
  	background: url(https://media.tenor.com/VFFJ8Ei3C2IAAAAM/rickroll-rick.gif);
  	background-size: 80%;
  	background-position: center;
  	background-repeat: no-repeat;
  	z-index: -1;
  }
}

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