What happens when you hide functional technology inside something beautiful? 3D QR Tree answers that question by turning any URL into a procedurally generated cherry blossom tree — one that doubles as a fully scannable QR code.
The Concept
Enter a URL, and the app generates a miniature voxel landscape: a tree with branches, flowers, and grass, all sitting atop a grid of blocks. That grid is the QR code. Click the scene, and it smoothly transitions from an isometric 3D view to a flat top-down view, revealing the scannable pattern underneath the canopy.
The trick is that every dark module of the QR matrix becomes a raised block, while light modules stay low — creating a readable code that, from above, has enough contrast for any phone camera to decode. From the side, it just looks like terrain.
No Libraries, Just Math
The entire 3D scene runs on raw WebGPU with hand-written WGSL shaders — no Three.js, no Babylon, no abstraction layers. Branches grow from an L-system algorithm. Flowers are placed procedurally at branch tips. Grass sprouts from the edges of QR blocks. Petals tumble through the air with simulated physics. Every element is generated from the QR data itself, meaning each URL produces a unique tree.
Seasonal Palette
The scene ships with three seasons — Spring (pink blossoms), Summer (green canopy), and Autumn (golden leaves) — each with its own ambient soundscape. A color palette picker lets you shift the entire scene into lavender, coral, gold, sky blue, or snow white. The season and palette are encoded into the share URL, so recipients see exactly what the sender intended.
The 3D-to-2D Transition
A single progress uniform drives the entire transition between views. As it interpolates from 0 to 1, the camera rotates from isometric to orthographic top-down, canopy blocks shrink to reveal the pattern beneath, flowers and grass fade out, and QR contrast sharpens. It's one continuous animation controlled by a single float — elegant in its simplicity.
Why It Works as Design
QR codes are a solved UX problem with an unsolved aesthetics problem. They're functional but visually hostile — black-and-white grids that clash with any brand identity. 3D QR Tree sidesteps this entirely by making the code invisible until you need it. The shareable artifact is a tiny landscape, not a barcode. The function is still there — just hidden behind form.
Works 100% on the client-side. Your links are not share with anyone else.
ICQR
Discussion