Skip to content
Get packs

Falling Leaves Animation

Makes an agent build realistic falling leaf or petal animations instead of generic confetti-like particles.

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

What it does

This skill gives the agent detailed know-how for building falling-leaf or petal effects on a web page, using either a 2-D canvas or a 3-D scene. The agent learns to make each leaf tumble so it visibly turns edge-on, to couple sideways drift to that tumble, to vary parameters per leaf, and to layer leaves for depth. It also covers performance, pausing when hidden, and reduced-motion handling. The skill is written as instructions and code snippets; it is meant to make the agent's generated web code look more natural.

Great for

  • Front-end developers adding ambient autumn, sakura or snow effects to a website
  • Designers or creative coders who want believable foliage motion in a hero section or landing page
  • Anyone asking an AI agent to replace a generic particle system with recognisable leaves or petals

Skip it if

  • Simple static sites or projects that only need a basic CSS or generic particle effect, since the detailed 3-D and performance guidance adds complexity
  • Non-web tasks such as video, print or game engines outside a browser canvas or the described 3-D setup, where the code examples will not transfer directly

Try asking

  • “Build a falling maple leaf animation on a canvas behind my homepage hero text”
  • “Add sakura petals drifting in front of the content, with a near layer and a far layer”
  • “Make a 3-D falling-leaves scene using Three.js instanced quads that respawn ahead of the camera”
  • “Adjust my existing snow effect so the flakes tumble and drift in a more natural way”
Step-by-step guide: how to use Falling Leaves AnimationInstall, 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.

    falling-leaves.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip falling-leaves.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip falling-leaves.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 visual you want (maple, sakura, ash, snow) and whether you need 2-D canvas or 3-D, so the agent picks the right section.
  • Ask for the demo files to be reviewed or run in a browser to check the tumble and density look right on desktop and mobile.
  • Mention your framework (plain canvas, Three.js, etc.) so the generated code matches your project.

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.