Feedback & Interaction · What a tap feels like
Click spark点击火花
- at the fingertip
- spitting outward
- very brief
Sparks spit out from wherever you click, flying a short way and vanishing. The division of labour with a ripple is clear: a ripple says “this area was pressed”, sparks say “exactly this point”. They differ by an order of magnitude in size and in precision.
When to use it
Use it on small, precise controls — icon buttons, likes, favourites — and it suits pointer input best. Be restrained on touch: the finger covers the impact point, so most of the effect is invisible and you pay for it in battery anyway.
Parameters
on pointerdown · 8 sparks · length 0→14px · opacity 1→0 · 380ms ease-out
Recipe
Click spark → on pointerdown · 8 sparks · length 0→14px · opacity 1→0 · 380ms ease-out
One sentence for your AI
Build click sparks: on pointerdown, spawn 8 short lines at the impact point, one every 45 degrees, each growing from 0 to 14px while opacity falls 1 to 0 over 380ms ease-out, removing the elements when the animation ends. Position and stretch them with transform, not left/top.