Ripple

A Material-style ripple spreads from the point of contact. An App-UI micro-interaction (mobile component feedback). Honors prefers-reduced-motion. Keep it short and snappy; only on controls that actually change state.

xpert-ai 57d79c6 5 files · 4.6 KB Updated

File contents

Ripple

A Material-style ripple spreads from the point of contact. An App-UI micro-interaction. Part of motion-anything; obeys MOTION-SPEC.md.

When to use it

  • Native-feeling feedback on App components (buttons, tabs, sheets, toasts, form controls).

When NOT to use it (restraint)

  • Don't slow a frequent action. Don't decorate a control that doesn't change state.

Accessibility & performance

  • prefers-reduced-motion: shortened / disabled. Transform & opacity only (GPU-safe).

xpert-ai/xpert-plugins/tree/main/xpertai/apps/motion/assets/upstream/recipes/app/ripple commit 57d79c6cec

Frequently asked questions

npx skillmds@latest add xpert-ai/ripple