How Lumitree Works: Building Interactive Micro-Worlds in Under 50KB

I've been building side projects for years, and at some point I got tired of everything needing a business model. So I built something that has none.

Lumitree is a website that starts as a single tree. Visitors type what they want to see — "a bioluminescent ocean", "a city made of music", "a galaxy of fireflies" — and AI generates a unique interactive micro-world in real-time. Each world becomes a branch on the tree. The tree grows collectively.

The 50KB constraint

Every micro-world is a self-contained HTML file under 50KB. No external dependencies. Everything is inline CSS and JavaScript. This constraint is the engine of the project — when you can't import Three.js or p5.js, you have to build things from scratch.

Some of the WebGL shader worlds do surprisingly complex raymarching in ~30 lines of GLSL. The particle systems use object pooling to stay under 500 active objects. The constraint forces creative solutions that often produce richer results than unlimited budgets would.

Six generation types

Each micro-world uses one of six visual techniques:

• Canvas 2D art — particle systems, physics simulations, procedural landscapes, flow fields
• WebGL shaders — fragment shaders, SDF raymarching, generative patterns
• Mini-games — interactive game loops with scoring, physics, and touch controls
• Visual poetry — kinetic typography, animated text, CSS art
• Tiny worlds — isometric dioramas, pseudo-3D scenes, miniature landscapes
• Sound gardens — interactive soundscapes using Web Audio API, procedural music

Every world must use a different technique than the ones before it. No two branches look the same.

The techniques behind the worlds

Some of the generative techniques that show up across the micro-worlds:

• Flow fields and Perlin noise landscapes
• SDF raymarching in fragment shaders
• L-systems and recursive tree growth
• Cellular automata with color mapping
• Particle systems with spring physics
• Fourier-based shape morphing
• Reaction-diffusion patterns

The tree visualization

The tree itself is a procedural Canvas 2D renderer with growth animation and bioluminescent glow effects. It renders in real-time, with each branch position calculated to create a natural, organic feel. Branches grow outward from the trunk with randomized angles and lengths, creating a shape that's different every time but always recognizable as a tree.

Architecture

The stack is intentionally straightforward:

• Frontend: Next.js (App Router) deployed on Netlify
• Backend: Express + TypeScript on Railway
• Database: Supabase for the tree structure
• Rendering: Each world in a sandboxed iframe

Content moderation happens pre-generation — prompts are filtered before anything is built. The generation pipeline produces complete HTML documents with embedded styles and scripts.

Performance

Lighthouse scores: 93 (Performance), 95 (Accessibility), 96 (Best Practices), 100 (SEO). Every world uses requestAnimationFrame for animation with a cap of 500 active objects and object pooling. The tree renderer uses a persistent offscreen canvas to avoid re-drawing static branches.

There's no login, no accounts, no tracking beyond basic analytics. You plant, it grows, you move on. Or you stay and explore what others have planted.

Want to plant a branch? Visit lumitree.art and describe what you want to see.