ATTENTION EFFECT

Ripple.

An expanding ring acknowledges an activation.

See the movement

One intentional trigger

Duration 0.70s

Playback starts only when you request it. Stop returns to the still illustration.

What it does

A ring grows outward and fades from a control. The preview radiates from the center; a pointer-origin ripple may instead begin at the actual activation point.

Timing curveease-out

Default duration700ms

RepetitionOnce per trigger

Make the motion useful

Choose an effect that supports the component’s purpose. Keep the final state clear, preserve focus and reading order, and pair important feedback with a visible message.

CSS animation reference

TAKE THE MOVEMENT WITH YOU

Describe the effect.

Copy this into your next coding conversation, or pair it with a dictionary component.

Ripple: An expanding ring acknowledges an activation.
On activation, emit one decorative ring from the control’s center, expanding outward while fading. Keep it clipped or bounded appropriately, preserve the label, and hide the decorative layer from assistive technology.
Timing: 700ms; easing: ease-out; play once per intentional trigger.
Accessibility: respect prefers-reduced-motion with a static state or brief opacity-only change, and never rely on motion alone to convey meaning.

Find a component

For reduced motion, use a static state or a brief opacity change. Animation should never be required to understand the component.

See the movement

What it does

Make the motion useful

In the same family

Pulse

Shake

Bounce