Your Own Digital Flower Garden is an interactive 3D flower garden that lives in the browser. Built with Three.js and WebGL2, every click plants a generative flower that plays a procedural musical chord. Drag to paint a trail of blooms, right-drag to orbit the camera, and scroll to zoom. The garden persists across visits.
Designed as a meditative web toy. Every flower is a note, every note a small chord in an ambient soundscape. There is no score, no goal, no end state. Plant, listen, and watch the garden fill.
The top toolbar holds four brushes: Plant, Cut, Grow, and Shrink. Plant adds new flowers. Cut removes them with a descending chime. Grow and Shrink resize flowers one step per brush stroke. Use the bottom-right help button for keyboard shortcuts, or the top-right Settings button to change flower colors, ground shape, and visual effects.
Keyboard shortcuts: press L for Settings, H for Shortcuts, F to frame all flowers, S for a screenshot, M to mute, Ctrl+Z to undo, Ctrl+D to clear the garden.
Three.js 0.183, TypeScript, Vite, Web Audio API for procedural synthesis, GSAP for animation, Tweakpane for advanced controls, iro.js for color pickers. Low-poly flower models by Daniel Marquez, sourced from Sketchfab. No install, no account, no tracking.
Designed and built by Devanshu Tak at Studio Typo. A solo project exploring AI-assisted creative coding: the 3D craft is hand-authored, while Three.js scaffolding was directed through Claude. Visit devanshutak.xyz for more work.
Clear Garden?