build-interactive-particle-trail
Build a cursor or touch particle interaction that emits by distance along the traveled segment into a recycled GPU point pool, with optional keyboard-triggered bursts. Use for interactive particle trails, pollen lifted from a surface, dust disturbed by a pointer, hover particle bursts, and discrete motes whose spacing must stay consistent at different gesture speeds.
Install
git clone https://github.com/MengTo/Skills /tmp/Skills && ln -s /tmp/Skills/agent-skills/web-design/build-interactive-particle-trail ~/.claude/skills/build-interactive-particle-trail
From README
Build an Interactive Particle Trail Emit discrete motes per unit of pointer travel, spread them across the entire segment, and recycle a fixed GPU pool. Reach for ambient-section-particles when particles are primarily autonomous atmosphere; reach for add-shader-cursor-trail when the output should be a continuous fluid or shader ribbon. Use this Skill when individual grains must react to the gesture. Extracted from inner-green-3d.html, where a pointer had to lift pollen off a procedural moss root without a fast sweep leaving gaps or a resting cursor pumping a bright clump. Resolve the interaction plane Convert the pointer into normalized device coordinates, raycast from the camera, and intersect one stable plane near the visual surface. Reuse that hit for all interaction systems. Reset the previous hit when the pointer leaves or the ray misses. Otherwise re-entry draws a long diagonal from the stale exit point.
More from this repo
add-mouse-driven-orbit
Used to add restrained mouse-driven orbit and parallax depth to a Three.js hero by damping one pointer target and...
build-wireframe-scan-reveal
Reveal Three.js geometry with an expanding world-space scan whose wire cage leads the solid surface, then burns away.
animation-systems
Used when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel.
