Acknowledge a tap/click with a ripple that blooms from the exact press point. Fast and low-opacity so it reads as feedback, not decoration. No ripple under prefers-reduced-motion (native :active covers it). Avoid on destructive actions and text links.
The English summary is being prepared. Showing the original description.
See how to installReview the instructions the agent will receive before you install.
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.
ripple.css and ripple.js into the project, and link them.position:relative; overflow:hidden — the CSS sets this):
<button class="ripple">Save</button>
.ripple; a wave spawns at the pointer point and cleans itself up.prefers-reduced-motion; the native :active state provides feedback.animationend.attachRipple(ref.current) in useEffect. The tint comes from the element's
currentColor — set text color to control it.No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Back In Down — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
The English summary is being prepared. Showing the original description.
Back In Left — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
The English summary is being prepared. Showing the original description.
Back In Right — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
The English summary is being prepared. Showing the original description.
Back In Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
The English summary is being prepared. Showing the original description.
Back Out Down — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
The English summary is being prepared. Showing the original description.
Back Out Left — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
The English summary is being prepared. Showing the original description.