Guide · Agent skill
How to use the Interactive Particle Trail Builder agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
This guide explains the build-interactive-particle-trail agent skill, a set of written instructions that teaches an AI coding agent how to build a web effect where a mouse, finger or pen leaves a trail of small particles. It is for front-end developers and designers who want a hover or touch particle effect with a clear implementation method. After reading, you will know how to install the skill, how to ask for it in plain language, and what the agent should produce.
Interactive Particle Trail BuilderMengTo/Skills · MIT Download the skill Quick start
- 1Download and unzip. Download the skill ZIP from this page and unzip the build-interactive-particle-trail folder.
- 2Place the folder. Move it to ~/.claude/skills/ for personal use or to .claude/skills/ inside your project.
- 3Or upload in the Claude apps. In the Claude apps, open Settings → Capabilities → Skills and upload the skill.
- 4Ask for the effect. Describe a pointer or touch particle trail in plain words, or use $build-interactive-particle-trail directly.
- 5Check the Three.js setup. Confirm your project can render THREE.Points in a WebGL browser, since the method depends on it.
- 6Run the verification checks. Test slow and fast gestures, leave and re-enter, the keyboard burst, reduced motion and both viewport sizes.
What the skill makes the agent do
The skill tells the agent how to build a cursor or touch particle interaction. Particles are emitted by distance along the path the pointer travels, so a fast flick and a slow crawl leave evenly spaced particles instead of gaps or a pile-up under a resting hand.
The particles are stored in a fixed-size recycled pool on the GPU and rendered as one THREE.Points draw call. The skill also covers keyboard-triggered bursts, reduced-motion handling and clean teardown. It is a written method and demo page; it does not run anything on your computer by itself.
- Emits particles per unit of pointer travel, spread along the whole segment
- Uses a fixed pool of 620 points by default, recycled in a ring
- Animates flight in the vertex shader rather than on the CPU
- Offers a Release pollen button for keyboard and focus users
- Handles prefers-reduced-motion, pausing and resize
Install the skill
Download the ZIP of the skill from this page and unzip it. For a personal install, place the folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder.
You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/build-interactive-particle-trail/
- Project: .claude/skills/build-interactive-particle-trail/
- Claude apps: Settings → Capabilities → Skills, then upload
Trigger the skill with a natural request
Ask for the effect in plain words that mention pointer, touch, pollen, dust or particle trails. The skill's description covers requests such as interactive particle trails, dust disturbed by a pointer, hover particle bursts and motes whose spacing must stay consistent at different gesture speeds.
The demo's PROMPT.md uses the explicit form $build-interactive-particle-trail, which names the skill directly.
Use $build-interactive-particle-trail to lift discrete pollen along this pointer path with consistent spacing at any gesture speed.Examples of what to ask for
The skill includes a demo recreation prompt. It describes a standalone local HTML page with a composed pollen trace on the first screen, replaced by a live trail once the user moves the pointer, pen or touch. You can adapt that brief to your own visual style.
For a continuous fluid or shader ribbon, the skill says to use add-shader-cursor-trail instead. For ambient particles that move without user input, it points to ambient-section-particles.
- Recreate the included demo as a standalone local HTML page
- Add a particle trail to a hero section on a landing page
- Add a keyboard-accessible burst button that reuses the same pool
Requirements and safety notes
The skill needs a web browser with WebGL support and a Three.js setup, since the guidance assumes GPU point rendering. Projects without that setup will need a different approach.
The skill does not run scripts and does not use the network, according to its listing. Review the generated code as you would any code from an agent before deploying it.
- Requires: a browser with WebGL support and Three.js
- Runs scripts: no
- Uses network: no
- Licence: MIT
Tips for good results
Check the verification list the skill provides: compare slow and fast passes over the same path, leave and re-enter the surface, test a burst, and test the reduced-motion version. Measure GPU frame time on a dense display before claiming a speed gain.
Keep the defaults unless you have a reason to change them. Spacing of 7 units, a 14-mote cap per frame, a 1.6 second lifetime and a 620-point pool are the values the source uses.
- Use the demo as the working reference and remix it
- Test on a phone-sized and a desktop-sized viewport
- Reduce lifetime before increasing the pool size if performance is poor
What people use it for
- A hero section where a cursor lifts pollen-like motes off a dark illustration
- A landing page with a touch and pen particle trail that works on phones
- A hover burst on a product image triggered by a button for keyboard users
- A standalone local demo remixed into a client's own visual style
Frequently asked questions
How do I install the build-interactive-particle-trail skill?
Download the ZIP from this page and unzip it. Place the folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
What does the build-interactive-particle-trail skill require?
It requires a web browser with WebGL support and a Three.js setup, because the guidance assumes GPU point rendering. According to its listing, it does not run scripts and does not use the network.
Is the build-interactive-particle-trail skill free to use?
The skill is published under the MIT licence, as stated on its listing. Check the licence file in the source repository for the full terms.
Does the skill run code on my computer?
No. The skill is a set of written instructions and a demo page. It does not itself run anything, so the code the agent writes is what you run and review.
What should I use instead for a continuous fluid trail?
The skill says to use add-shader-cursor-trail for continuous fluid or shader ribbon trails. For decorative particles that move without user input, it points to ambient-section-particles.
Why does my particle trail have gaps or pile up when I stop moving?
The skill emits particles by distance rather than by time, so fast movement is filled in along the segment. When the pointer rests, it trickles one particle every 55 ms instead of piling them up. If you see gaps, check that the spacing and per-frame logic from the SKILL.md are followed.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer or designer building a WebGL or Three.js hover or touch particle effect and want a clear, tested-by-checklist method. Pick a different skill if you need a continuous fluid ribbon, purely ambient background particles, or your project has no WebGL setup.
Download the skill