Ripple

Material-style press ripple. Pro · Effects › Cursor and press feedback

Material-style press feedback for any clickable element: a ripple spreads from the press point (or from the centre for Enter and Space), clipped to the element's own corner radius and tinted with its text colour, and fades once released. Ripples are CSS animations of transform and opacity, removed when done; nothing re-renders. Disabled elements don't ripple; with reduced motion the ripple fades in place without spreading.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add ripple

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { Ripple } from 'valyro-ui-pro';

Props

Prop	Type	Default
`inline`	`boolean`	`true`	Wrap inline, for buttons and chips. Pass `false` for full-width rows and cards.
`color`	`string`		Ripple colour. Default: the text colour of the wrapped element.
`disabled`	`boolean`	`false`	Turns ripples off. A disabled wrapped element never ripples regardless.

Related components

Cursor Glow — Glow and tilt that follow the cursor
Magnetic — Magnetic pull toward the cursor
Tilt Card — 3D tilt with glare and parallax
Confetti — Confetti: a component and fireConfetti()
Glass Lens — Glass lens with real refraction
Morphing Capsule — Capsule that flows between states
Floating Tab Bar — Floating glass tab bar
Aurora Background — Slow aurora behind your content
Gradient Background — Slowly shifting gradient
Bubble Background — Soft colored bubbles, one follows the cursor
Stars Background — Starry sky with cursor parallax
Hexagon Background — Hexagon grid with a glowing trail

Previous: Tilt Card · Next: Confetti · All Effects