HDR Ripple Button
Material-inspired ripple effect with P3 wide-gamut color and additive HDR blending. Pure CSS animations, zero dependencies.
Press and hold, then drag
Most popular
Core
Everything your team needs to ship faster.
$19 /user/mo
- ↔Blended inbound/outbound
- ▲Agent desktop plus
- ●Geo redundancy
How it works
The ripple is a single DOM element with a radial gradient, animated through three states: press-in, hold, and release. No JavaScript animation frames – all motion is CSS keyframes and transitions.
- •P3 wide-gamut color – on supported displays (most Apple screens), the ripple uses Display P3 values that exceed sRGB, producing richer, more vivid light.
- •Additive blending –
mix-blend-mode: plus-lighteradds the ripple luminance to the button surface, simulating real light on HDR panels. - •Cursor tracking – pointer events reposition the ripple origin every frame during press, so the wave follows your finger or cursor.
- •Three animation states – press (expand + pulse), hold (gentle breathing), release (accelerate out + fade). Keyboard triggers a centered ripple.
- •Zero dependencies – no animation library. Pure CSS keyframes driven by class toggling. Respects
prefers-reduced-motion.