Add a material ripple effect by adding a .ripple class to any HTML element.
Works great with TailwindCSS.
Install the package.
npm install ripple-classImport the ripple library.
import "ripple-class";If module imports do not work, try the dynamic import function:
import('ripple-class')
Add a ripple listener to a HTML element by adding the ripple class name.
<button class="ripple">Click Me!</button>
You can use the CSS variables to change the ripple color, duration and scale.
.custom-ripple {
--ripple-color: rgba(255, 0, 0, 0.8); /* Default: rgba(255, 255, 255, 0.6) */
--ripple-duration: 1200ms; /* Default: 600ms */
--ripple-scale: 1; /* Default: 4 */
}<button class="ripple custom-ripple">Click Me!</button>
The .ripple class applies the following styles to your element:
| Style | Purpose |
|---|---|
transform: translateZ(0); |
Applied because the ripple objects use absolute positioning which requires either a set transform or a non-static position. Otherwise, when the element is position: static;, the ripple object will be created at incorrect coordinates (outside the target). |
overflow: hidden; |
Applied to prevent the ripple from overflowing from the parent. This is applied for convenience. The ripple will still work with any other overflow setting but may come with side-effects. |
The ripple target also needs to be either a block or inline-block display element.
Package and website is developed using SvelteKit.
Package code is located under src/lib.
Run demo website with development server:
npm run devBuild demo website for production and serve:
npm run build:website
npm run previewBuild the package and deploy to NPM:
npm run build:package
npm publish ./package