Bough
A physics-sim tree with leaves that sway to the cursor, weighted to feel alive.
- Year
- 2026
- Status
- Shipped
- Stack
- React, Canvas API, Verlet integration, Perlin noise wind field
- Code
- GitHub →
Interactive canvas, embedded inline.
The premise
I wanted to know how few rules it takes to make something look alive. A tree is a beautiful test — it has structure (the trunk barely moves), tension (the twigs move more), and weather (the leaves give up first). Three layers, three timescales, one cursor.
How it works
Bough is a Verlet-integrated mass-spring system rendered to canvas. Each leaf is a particle anchored to its twig with a soft constraint; each twig is anchored to its branch with a stiffer one. Wind is a Perlin-noise field plus a radial term that responds to the cursor — close to the pointer, the wind picks up; far from it, the system relaxes back into stillness.
The trick that makes it feel like a tree and not a physics demo is the timescales. Leaves respond on every frame; twigs respond every fourth or fifth; the trunk barely moves at all. That layered cadence is what reads as life.
Decisions I made differently
Verlet over rigid-body.
A spring system was tempting but expensive at the leaf scale. Verlet is cheap, stable enough, and gives the right organic dampening for free.
Cursor as wind, not force.
The cursor doesn't push leaves directly. It modulates a wind field. That one indirection is the difference between "the leaves chase my mouse" and "the wind responds to me being there."
No JS-managed state per leaf.
Leaf state lives in typed arrays, not React. React owns the canvas; the simulation owns the pixels. It runs at 60fps on a phone.
What I’d do next
Sound — a gentle rustle that follows the wind field. And a second species of tree, since the algorithm generalizes more than the visuals do.