Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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.
.claude/skills/nexu-io-ripple-press/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-04 | ✗→✓ | ▲ Improved | -37% | 0% |
| case-01 | ✗→✓ | ▲ Improved | -1% | 0% |
| case-03 | ✗→✓ | ▲ Improved | -10% | 0% |
| case-08 | ✗→✓ | ▲ Improved | -29% | 0% |
| case-09 | ✗→✓ | ▲ Improved | -22% | 0% |
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):html <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'scurrentColor — set text color to control it.
Other measured skills in the registry, with their headline benchmark lift.