material‑design‑ripple

One function. No dependencies. The radial reaction on any element you point at.

import { ripple } from 'material-design-ripple'

ripple(['.card', '.button'])

Everything below is pressable — by mouse, touch, or Space/Enter once focused. Hold a press down and the wave waits for you.

Cards

Themed surface

Follows your OS theme. The ripple flips between black and white to keep contrast either way.

Fixed indigo

Always dark, so always a white ripple. Contrast is measured, not configured.

Transparent surface

No background of its own, so the effective colour is inherited from the ancestor that has one.

Buttons

Anchor

List items

Ripples on rows The wave covers the whole box diagonal
Pointer events Mouse, touch and pen, from a single listener
Zero dependencies Roughly a kilobyte, minified

Options

Chips

ripple animation material vanilla