ripple-press

ripple-press

A ripple that blooms from the press point. Part of motion-anything; obeys MOTION-SPEC.md. Based on the Material state-layer interaction, reimplemented dependency-free.

When to use it

• Buttons / clickable tiles where a tap should feel acknowledged; touch-first, app-like UIs.

When NOT to use it (restraint)

• Destructive actions (don't encourage repeat taps) and text links (feels heavy).
• Elements that already have a strong press state.

How to apply

1. Copy ripple.css and ripple.js into the project, and link them.
2. Mark the button (it should be position:relative; overflow:hidden — the CSS sets this):

   <button class="ripple">Save</button>
   

3. Auto-attaches to .ripple; a wave spawns at the pointer point and cleans itself up.

Accessibility & performance

• No ripple under prefers-reduced-motion; the native :active state provides feedback.
• Transform/opacity only; each wave removes itself on animationend.

Framework notes

• React: call attachRipple(ref.current) in useEffect. The tint comes from the element's currentColor — set text color to control it.