Back to Work
Grove
ShippedA scroll-driven walk through a living 3D garden — seven interactive stations, each one a working demo of a real frontend technique.
- Three.js
- React Three Fiber
- Next.js
- GSAP
- Tailwind CSS
- TypeScript
The Problem
Interactive 3D on the web often feels like a gimmick—fancy visuals disconnected from real utility or clear design principles. Developers build spinning 3D cubes or particle fields that look cool for 5 seconds but communicate nothing meaningful about frontend engineering depth or interactive techniques.
Grove was created to bridge this gap: a spatial presentation where every 3D object and camera milestone is a working demo of a fundamental web design pattern.
What It Does
Architecture & How It's Built
Decisions & Tradeoffs
- **Scroll-Driven Camera over Orbit Controls**: Unrestricted camera navigation confuses users; guided pathing ensures narrative flow while retaining 3D perspective.
- **Procedural Vegetation over Heavy Models**: Procedural GLSL geometries reduced initial 3D model asset bundle size by over 80%.
- **Graceful Fallbacks for Low-End GPUs**: Disables post-processing depth-of-field automatically on mobile chipsets to guarantee 60fps.
Roadmap & What's Next
- Expanding seasonal weather triggers (rain particle systems and snow accumulation).
- Adding spatial spatialized 3D audio positional nodes.
Technology Stack
Three.js
React Three Fiber
Next.js
GSAP
Tailwind CSS
TypeScript
Quick Links
Started Last updated