Feedback & Interaction · What a tap feels like
Shockwave冲击波
- a ring expanding
- impactful
- no particles
A hollow ring expands rapidly from the impact point, thinning and fading as it grows, then disappears. What separates it from a ripple is speed and scale: a ripple is slow and stays small, a shockwave is fast and claims a large part of the frame. Fast plus large is what makes it an impact.
When to use it
Use it on weighty impacts: a confirmation, a tip, a send. It is inherently loud, so keep it off high-frequency actions and never pair it with a particle burst — both are competing to be the loudest beat.
Parameters
on impact · transform: scale 0.2→1.5 · border-width 3→0.5px · opacity 0.85→0 · 620ms ease-out
Recipe
Shockwave → on impact · transform: scale 0.2→1.5 · border-width 3→0.5px · opacity 0.85→0 · 620ms ease-out
One sentence for your AI
Build a shockwave: place a hollow ring at the impact point, scaling from 0.2 to 1.5 while its stroke thins from 3px to 0.5px and opacity drops from 0.85 to 0, over 620ms ease-out. Animate transform and opacity only; the stroke can thin via border-width, but keep it on a pseudo-element that cannot affect layout.