Online demoBuilt for everyday life
Garden Planner
A botanical catalogue and a walkable 3D garden for one real yard.

The plan view shows a real yard, so it isn't pictured. The catalogue, specimen pages and illustrations are.
Why it matters
Garden Planner turns a planting spreadsheet into a living plan. Beds, paths and structures are drawn to measured lengths, plants are placed from an illustrated catalogue, and the same scene can be walked through in 3D across the seasons.
- 01
A catalogue with sources
156 plants, each fact linked to where it came from. A blank stays “Unknown”, and safety for pets is never assumed.
- 02
Botanical illustrations
141 plants have a watercolour-style illustration, with a manager for replacing them.
- 03
Walk the garden in 3D
Orbit or walk through the same scene, with seasonal light, on a desktop or a phone.
- 04
Plans drawn to measure
Draw beds, paths and structures, drag corners or type exact edge lengths, with undo that survives a reload.
The details
Open any part for the full story.
Features6
- A bird's-eye plan: draw beds, paths and structures, drag corners or type exact edge lengths.
- Painted plan textures, labels that never overlap, a month scrubber and layers.
- A 3D walkthrough with orbit and walk modes, seasonal light and a breeze.
- A 156-plant catalogue with sourced evidence and planner rules.
- Botanical illustrations for 141 plants, with a manager for replacements.
- Spreadsheet import that gives the same result on every run.
How it works
- An art pipeline turns the master illustrations into responsive WebP files. The illustrations were generated with an image model and curated by hand.
- 3D work runs in workers behind a pixel-diff gate, and a phone performance pass cut the worst blocking task from about 5.5 s to under 300 ms.
Technology
- React
- TypeScript
- Vite
- three.js
- React Three Fiber
- Zustand
- Hono
- SQLite
- Playwright
Development notes
My part
Status and context
- Status
- PrototypeDemo site being set up
- When
- Oct 2026 — now
- Kind
- Built for everyday life
Who it’s for
The problem it solves
Screens








Plant catalogue titled “The garden's plants” with search, filters and illustrated cards for beans, carrots and a sweet cherry







