falling-leaves

Builds tumbling falling-leaf animations on 2-D canvas or instanced 3-D with depth layers and per-leaf variance.

5.7k|685|Updated Feb 3, 2026
One-click install
npx skills add https://github.com/MengTo/Skills --skill falling-leaves
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: falling-leaves
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/falling-leaves
Command: npx skills add https://github.com/MengTo/Skills --skill falling-leaves

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generic particle fields make falling foliage read as confetti or scrolling texture. This Skill provides the motion model, rendering recipe, and performance budgets needed to make leaves tumble edge-on, slip sideways aerodynamically, and layer convincingly in depth.

Core Features & Use Cases

  • Tumble-driven motion: Each leaf rotates through the picture plane so it thins to an edge and reopens, with lateral slip coupled to the tumble angle rather than an independent sine.
  • 2-D and 3-D variants: Covers canvas sprite rendering with baked front/back faces and instanced-quad Three.js rendering with camera-ahead recycling and alpha-tested sorting.
  • Production guardrails: Density scaled by viewport area, dt clamping, DPR caps, visibility pausing, ResizeObserver sizing, and a composed still frame under prefers-reduced-motion.
  • Use Case: Add an autumn maple fall over a landing page hero, or remix it into a spring sakura drift, ash, or snowfall effect that reads as real drifting foliage at both 390px and 1440px.

Quick Start

Ask your agent to use the falling-leaves skill to add a maple fall over a page section, with leaves that tumble edge-on instead of a generic particle field.

Frequently Asked Questions about falling-leaves

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make falling leaves look realistic in canvas?

Rotate each leaf through the picture plane using a horizontal scale of cos(spin) so it thins to an edge and reopens, and drive sideways slip from sin(spin) so it slides fastest when edge-on. Bake separate front and back sprites and randomize every parameter per leaf.

How do I build a falling leaves effect in Three.js?

Instance quads rather than point sprites, since point sprites always face the camera and can never turn edge-on. Recycle leaves in a disc ahead of the camera along its sight line, and use alpha testing instead of alpha blending so leaves sort correctly without per-frame depth sorting.

Why does my particle field look like confetti instead of leaves?

A sprite that only spins in the picture plane reads as confetti or a paper scrap. The leaf read comes from the tumble crossing edge-on, two distinct baked faces, and per-leaf variance in fall speed, spin rate, roll, slip, scale, and opacity.

How many leaves should I use for a fullscreen effect?

Set density by recycle band area, not raw count, and scale the authored count by viewport area relative to a 1440x900 baseline. Halving the recycle radius quadruples on-screen density at the same count, while doubling count only doubles draw cost.

How do I handle reduced motion for canvas animations?

Under prefers-reduced-motion, render one composed still frame instead of hiding the leaves, since the composition was designed with them present. Redraw that still when a control changes so the controls remain functional.

Why do emissive red leaves turn pink in a tone-mapped scene?

An emissive red with nonzero green and blue channels comes back out of a tone-mapped composite as pink. Drive green and blue to zero, for example 0x780200 instead of 0x8c1410, to keep the fall from turning candy-coloured.