Skip to content
Get packs

Interactive Particle Trail Builder

Guides an agent to build cursor/touch particle trails with distance-based spacing and a recycled GPU pool.

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
4 files

What it does

When installed, the agent knows a specific method for building a web visual effect where moving a mouse, finger, or pen leaves a trail of small particles (like pollen or dust lifted off a surface). It explains how to space particles evenly based on how far the pointer travels, keep the particle count fixed for performance, handle reduced-motion and accessibility needs, and clean up properly. The skill is a set of written instructions and a demo page; it does not itself run anything on your computer.

Great for

  • Front-end developers building interactive hero sections or landing pages with Three.js-style effects
  • Designers who want a particle hover or touch effect and need a clear implementation brief
  • Creators remixing the included demo into their own site

Skip it if

  • Continuous fluid or shader ribbon trails: the skill says to use a different skill (add-shader-cursor-trail) for that
  • Simple decorative background motion that does not respond to the user: a separate ambient particles skill fits better
  • Projects without a WebGL/Three.js setup, since the guidance assumes GPU point rendering

Try asking

  • “Build an interactive particle trail that lifts dust from the page when the cursor moves over the hero section”
  • “Add a Release pollen button with a keyboard-accessible burst that reuses the same particle pool”
  • “Make the particle trail respect prefers-reduced-motion and pause when the tab is hidden”
Step-by-step guide: how to use Interactive Particle Trail BuilderInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    build-interactive-particle-trail.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip build-interactive-particle-trail.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip build-interactive-particle-trail.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the surface and size you need (for example, a hero section at 1440×900 and 390×844 mobile) so the agent applies the included verification checklist.
  • Ask the agent to follow demo/PROMPT.md when you want output close to the working demo rather than a fresh design.
  • Review generated code before deploying, and measure GPU frame time on a dense display as the skill itself recommends.

What's inside

  • agents/openai.yaml
  • demo/index.html
  • demo/PROMPT.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.