Skip to content
Get packs

Ambient Section Particles

Adds a subtle, bounded particle animation (petals, snow, sparks) behind one page section

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

What it does

Teaches the agent how to build a decorative particle layer, such as falling petals, leaves, snow or confetti, confined to a single section of a web page. It covers choosing a rendering method, configuring motion, pausing when the section is off-screen, and falling back to a still image when the visitor prefers reduced motion. The skill is a set of instructions and a demo, so the agent writes the front-end code for you rather than you installing a ready-made library.

Great for

  • Front-end developers adding atmosphere to a landing page or hero section
  • Designers who want a themed particle effect explained and prototyped quickly
  • Teams that need motion effects to respect performance and accessibility rules

Skip it if

  • Projects needing a full-page animated background or 3D scenes, since the skill deliberately keeps effects bounded and suggests WebGL only for very large particle counts
  • Non-technical users who only want a finished widget to paste in, because the output is custom code that still needs review and testing

Try asking

  • “Add a gentle falling petal effect behind the hero section of my spring campaign page”
  • “Create a subtle snow layer for the footer that pauses when scrolled out of view and respects reduced motion”
  • “Build a spark effect in the pricing section with pointer disturbance and a static fallback”
Step-by-step guide: how to use Ambient Section ParticlesInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    ambient-section-particles.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip ambient-section-particles.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip ambient-section-particles.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

  • Describe the section's mood, content density and the particle shape you want so the agent picks the right renderer (canvas, DOM/SVG, or WebGL)
  • Review the generated code and test it at mobile and desktop widths and with reduced motion enabled, as the skill's verification checklist recommends
  • Open demo/index.html as a working reference to see the expected result before asking for a remix

What's inside

  • agents/openai.yaml
  • demo/index.html
  • demo/PROMPT.md
  • REFERENCES.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.