Element: #384 Cursor trail (motion/hero-ambient)
What it shows: A chain of 14 dots that eases after the pointer, each one shrinking and following the dot ahead; autoplay traces a looping path.
When to use: Playful hero sections, creative portfolios and empty canvases where the cursor should leave a soft, short-lived mark.
Spec:
- `const N = 14` dots in a fixed pool: no node is created while the pointer moves
- Each frame every dot moves `0.32` of the way toward the dot ahead (`p.x += (prev.x - p.x) * 0.32`), the head follows the pointer
- Only `transform` is written: `translate3d(${p.x}px, ${p.y}px, 0) scale(${1 - i / (N + 4)})`
- The `requestAnimationFrame` loop stops when the demo leaves the viewport (`IntersectionObserver`) and when every dot has settled
- Autoplay drives a Lissajous path (`Math.cos(k * 2.1)`, `Math.sin(k * 3.2)`); under reduced motion no dots render
- `@media (pointer: coarse)` sets `touch-action: none` so a finger draws the trail instead of scrolling
Motion:
- transform: translate3d, scale (per dot): per frame 0.32 stagger 0.32
Names: Cursor trail | Mouse trail | Pointer trail | Rastro do cursor | Rastro do mouse | Estela del cursor
Tags: motion, cursor, trail, pointer, follow, playful
Needs: @codeatlasdev/ui@4.6.0
Components: MotionStage
Live demo: https://ui.codeatlas.com.br/docs/motion/hero-ambient#cursor-trail
{#snippet children(m)}