PressRipple
A ripple from the press point, as a real layer with a bounded lifetime.
@luc/ui/motionLive preview
For surfaces that are not already a Button; the rings are composited, so nothing re-renders per frame.
<PressRipple rings={2}>
<Text variant="body">Press anywhere on this surface</Text>
</PressRipple>Other configurations
The same primitive, arranged differently. Each snippet is printed from the props its preview above was rendered with.
One ring, quick
A single short ring for a dense surface, where two overlapping rings would be noise.
One ring
<PressRipple rings={1} duration={420}>
<Text variant="body">One ring</Text>
</PressRipple>A wider reach
`maxScale` is how far the ring travels relative to the press point, so a wide surface can answer further out.
Press for a wider ring
<PressRipple rings={2} maxScale={9} duration={760}>
<Text variant="body">Press for a wider ring</Text>
</PressRipple>Usage
import { PressRipple } from "@luc/ui/motion";<PressRipple rings={2}>
<Text variant="body">Press anywhere on this surface</Text>
</PressRipple>API
| Export | Kind | Signature |
|---|---|---|
PressRipple | 5 documented props | ({ children, className, rings, maxScale, duration, color, disabled, onPointerDown, ...props }: PressRippleProps) => import("@types/react").JSX.Element |
RippleLayer | 3 documented props | ({ ripples, duration, color, className, style, ...props }: RippleLayerProps) => import("@types/react").JSX.Element |
usePressRipple | export | ({ rings, maxScale, duration, disabled, }?: UsePressRippleOptions) => PressRippleApi |
PressRipple props
Type: PressRippleProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
color? | string | undefined | — | |
disabled? | boolean | undefined | — | |
duration? | number | undefined | — | |
maxScale? | number | undefined | — | |
rings? | number | undefined | — |
RippleLayer props
Type: RippleLayerProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
color? | string | undefined | — | Ring pigment. `currentColor` reads on filled and quiet controls alike. |
duration? | number | undefined | — | Milliseconds a ring lives. Must match the hook's `duration`. |
ripples | readonly PressRippleRing[] | — |
Accessibility
The accessibility contract is the one the primitive underneath the component already honours — the platform element for a control, or the ARIA pattern the component implements — and the Showcase's own pages are scanned for violations with axe.
What happens on the server, and when hydration changes it.
Family
Feedback
A press, a change, a selection — acknowledged without shouting.
Related