What problem does it solve?
Timer-based particle emitters leave gaps behind fast pointer flicks and pile up bright clumps under a resting cursor. This Skill builds a cursor or touch particle trail that emits motes by distance traveled along the full segment, recycles a fixed GPU point pool, and keeps spacing consistent at any gesture speed.
Core Features & Use Cases
- Distance-based emission: Raycast the pointer onto one interaction plane and spawn particles every 7 units along the traveled segment, capped at 14 per frame, with a 55 ms idle trickle.
- Recycled GPU pool: A fixed 620-point ring buffer stores origin, velocity, birth time, and random seed in dynamic attributes while the vertex shader integrates flight over a 1.6-second lifetime in a single THREE.Points draw call.
- Accessible bursts and lifecycle safety: A keyboard-focusable burst button reuses the same pool, reduced-motion mode renders a composed still, and the demo handles DPR caps, visibility pauses, resize, and full teardown.
- Use Case: Add a pollen-lift hover effect to a nature landing page hero where pointer, pen, or touch movement sheds evenly spaced motes, with a "Release pollen" button triggering a 52-mote burst.
Quick Start
Use $build-interactive-particle-trail to add a distance-sampled cursor trail with pooled GPU particles to my landing page hero section.
