ripple-effect: Material Design Ripples in JavaScript

ripple-effect is a lightweight vanilla JavaScript library that adds Material Design-inspired click ripples to HTML elements.

Features

• Built-in white and black ripple modes.
• Ripple origin follows the pointer position.
• Dynamically inserted [data-ripples] elements work immediately.
• Custom classes can define different ripple colors for individual elements.

How To Use It

Installation

For a direct browser setup, load the ripples.js script from the dist directory:

<script src="./js/ripples.js" defer></script>

For npm projects:

npm install @gabrielfins/ripple-effect

Import the package from your JavaScript entry file:

import '@gabrielfins/ripple-effect';

Basic Usage

Place the data-ripples attribute on the element that should display the effect:

<button type="button" data-ripples>
  Save Changes
</button>

No JavaScript initialization is required.

Ripple Color Modes

The data-ripples attribute accepts two color values.

Use the dark mode when a white ripple has too little contrast with the element background:

<button type="button" data-ripples="dark">
  Continue
</button>

Styling And Customization

Override .ripple inside [data-ripples] to change the generated ripple color and opacity:

[data-ripples] .ripple {
  background-color: #38bdf8;
  opacity: 0.32;
}

A custom class can limit the override to selected elements:

<button class="ripples-purple" type="button" data-ripples>
  Purple Ripple
</button>

.ripples-purple .ripple {
  background-color: #a855f7;
  opacity: 0.32;
}

Dynamic Elements

The library listens for pointerdown on document and checks the event target for the nearest [data-ripples] element. Newly inserted elements work as soon as the attribute is present:

const button = document.createElement('button');
button.type = 'button';
button.textContent = 'New Action';
button.setAttribute('data-ripples', 'dark');
document.querySelector('#actions').appendChild(button);

Alternatives And Related Resources

• Google Material Design Ripple Effects with Wave.js
• Dynamic Ripple Click/Tap Effect In JavaScript – rippleEffect
• Material Design Ripple Click Effect With Pure CSS
• Minimal Ripple Click & Hover Effect – ripple.js