Guide · Agent skill
How to use the Falling Leaves Animation agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The falling-leaves skill gives an AI agent a set of instructions and code patterns for building falling leaf, petal or snow effects on a web page. It is aimed at front-end developers and designers who want recognisable foliage rather than a generic particle field. After following this guide you will be able to install the skill, ask your agent for a leaf or petal effect in plain language, and check the result against the skill's verification list.
Falling Leaves AnimationMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the falling-leaves ZIP from the page you are reading.
- 2Unzip into a skills folder. Extract it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
- 3Or upload in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill.
- 4Describe the effect. Ask for the foliage type, the location on the page and whether you want 2-D or 3-D.
- 5Review the generated code. Read the code the agent produces and check it runs without console errors at 390px and 1440px.
- 6Test the motion checks. Confirm leaves turn edge-on, the sideways drift follows the turn, and the effect pauses when hidden.
What the falling-leaves skill makes the agent do
The skill focuses on one problem: a falling particle reads as confetti unless it looks like a leaf. Each leaf turns about its own long axis so it shows a face, thins to an edge and opens out again. Its sideways drift is tied to that same turning motion, so the path looks aerodynamic rather than wind-blown.
The skill covers a 2-D canvas build and an instanced-3-D variant. It also gives guidance on layering leaves for depth, choosing density, colour under a tone-mapped composite, reduced motion and pausing when the page is hidden.
Install the falling-leaves skill
Download the ZIP for the skill from the page you are reading. Unzip it into your personal skills folder at ~/.claude/skills/, or into a project's .claude/skills/ folder if you want the skill available only in that project.
You can also upload the skill in the Claude apps. Open Settings, go to Capabilities, then Skills, and upload the skill there.
- Personal: unzip into ~/.claude/skills/
- Per project: unzip into the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload
Trigger the skill with a natural request
You do not need special syntax. Describe the effect you want and name the kind of foliage or petal. The demo prompt in the skill files refers to the skill as $falling-leaves, so including that name in your request is a clear way to call it.
Say what the effect is for and where it goes, such as a hero section or a single block of content. Mention if the leaves should pass in front of text, since the skill treats depth layering as part of the design.
- Name the foliage: maple, sakura petals, blossom, ash or snowfall shapes
- Name the location: hero section, landing page, one section of a page
- Ask for a 2-D or 3-D build if you have a preference
Use $falling-leaves to add a maple fall over this section, with leaves that tumble edge-on rather than a generic particle field.Examples of what to ask for
The skill's demo describes a full-viewport dark scene with a maple fall crossing the frame and three depth layers. Type and background stay quiet while the leaves carry the design. You can ask for a smaller version too, such as a few petals over one banner.
Reduced motion is part of the skill. If a visitor has reduced motion turned on, the skill asks for one still, well-composed frame instead of animation.
- A maple fall over a dark hero section with leaves passing in front of the headline
- Sakura petals drifting over a spring landing page at low density
- Snowfall-shaped flakes on a winter page, built as a 2-D canvas
What you need before you start
The skill lists no required tools, runs no scripts and makes no network calls. It is a set of written instructions and code snippets for the agent to adapt, so the work happens in the web code the agent produces for your project.
Check the generated code in a real browser before shipping it. The skill's checklist asks for a clean console at 390px and 1440px widths.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
Safety notes and limits
Because the skill runs no scripts and uses no network, it does not change your system on its own. The code it guides the agent to write still runs in the visitor's browser, so review it like any other front-end code.
The skill is not a fit for every project. It adds detail for 3-D and performance work, which may be more than a simple site needs. It is also not suited to video, print or game engines outside a browser canvas or the 3-D setup it describes, where the examples will not transfer directly.
- Review generated code before publishing
- Simple static sites may only need a basic CSS or generic particle effect
Tips for a more natural result
Ask for variation. The skill recommends randomising fall speed, tumble rate, roll rate, slip, scale and opacity for each leaf, because shared rhythms make the field look like a scrolling texture.
Keep density modest. Prefer a tighter recycle area before raising the leaf count, and expect a smaller count on phones. Use two or three near leaves in front of content rather than a curtain of them.
- Use distinct colours from a red-to-amber range rather than one red
- Make the back face of each leaf duller than the front
- Check that the effect pauses when the tab is hidden
What people use it for
- Adding an ambient autumn maple fall to a website hero section
- Replacing a generic particle effect on a landing page with recognisable petals
- Building a snowfall-style effect with flake shapes on a winter page
- Creating a 3-D leaf field in a scene where leaves are recycled ahead of the camera
Frequently asked questions
How do I install the falling-leaves agent skill?
Download the ZIP from the page you are reading and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings, then Capabilities, then Skills.
Does the falling-leaves skill need anything installed first?
The skill lists no required tools. It runs no scripts and uses no network. The code it guides the agent to write runs in the browser.
Is the falling-leaves skill free to use?
The skill is published under the MIT licence, as listed on the page. Check the licence file in the download for the full terms.
What is the difference between the 2-D canvas and 3-D versions?
The 2-D build draws each leaf as a sprite on a canvas and recycles leaves across the viewport. The 3-D build uses an instanced mesh of quads and recycles leaves ahead of the camera, which lets them go edge-on.
Why do my falling leaves look like confetti?
The skill's guidance is that a sprite which only spins in the picture plane reads as confetti. Make each leaf tumble through the plane so it thins to an edge, and tie the sideways drift to that tumble.
Does the skill respect reduced motion settings?
Yes. Under prefers-reduced-motion: reduce, the skill asks for one still, designed frame instead of animation, and redraws that still when a control changes.
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 who wants believable leaves or petals in a web page, in 2-D or 3-D. Pick something simpler, such as a basic CSS or generic particle effect, if you only need a light ambient touch or are working outside a browser.
Download the skill