Cursor & Pointer · What the pointer touches
Cursor trail光标拖尾
- responsive
- afterglow
- tunable
Behind the pointer a chain of items drops, shrinks and fades — product shots here. The trick is that it drops rather than draws: one every 58ms, so it reads as beads, not a line.
When to use it
For pages whose whole point is browsing: product lists, portfolios, campaign pages. It is decoration, so keep it out of forms, settings and checkout — leaving a trail behind every pointer movement is a distraction where people are trying to concentrate. Touch screens have no pointer, so on phones this effect simply does not exist; do not make it the headline feature.
Parameters
spawn every 58ms · life 800ms · transform: scale 1→0.34 · opacity: (1−k²)×1.15 · 14-item pool · per frame, no easing
Recipe
spawn every 58msCursor trail → scale 1 → 0.34 @ 58msper-frame integration, no easing
One sentence for your AI
Give the pointer a trail: every 58ms drop a 46px image at its current position (rotating through a few product shots), then shrink it to 0.34× and fade it to 0 over 800ms while rotating it up to 16° alternating left and right by birth order. Reuse a pool of 14 elements instead of creating a new DOM node each time. Keep a small dot glued to the pointer with no easing — the trail may lag, the pointer may not. The interval is the whole feel of this effect; do not drop below 16ms or it smears into a blob.