Botanical WebGL Experience

Kinetic Garden

Role

Creative Development

Year

2025

Client

Jardim Estrela

Dew drops on giant monstera leaves inside a greenhouse

Overview

Jardim Estrela wanted to bring people back to the garden in early spring, before most of it is in flower. The idea was to show what is happening out of sight: ferns uncoiling, roots lengthening, leaves turning to follow the light. The site became a time-lapse you control, one scroll at a time.

Every plant is procedural, grown from a few rules about branching and phototropism, then shaded in WebGL with soft translucency so leaves glow when backlit. Scroll speed feeds the growth rate, and the cursor acts as a sun the plants lean toward. A field guide sits underneath, set in plain type, for anyone who simply wants the names.

kinetic-garden.com

Kinetic Garden homepage — “A garden that grows as you scroll” with 3D leaves
An unfurling green fern fiddlehead
Moss and tiny ferns growing on a wet stone

Fig. 01

Reference — fiddleheads photographed weekly to tune the growth curves

Inside a Victorian glasshouse filled with tropical plants

kinetic-garden.com

Kinetic Garden plant index with leaf cards and Latin names

Fig. 02

Field guide — forty-one species, one line each

Fig. 03

Specimen view — every plant can be paused and turned

A gardener among tall ferns in a misty glasshouse

Credits

Creative development — Noor Calder · Botanical advice — Catarina Leal · Photography — Hugo Brandão · Sound — Elise Navarro

Create a free website with Framer, the website builder loved by startups, designers and agencies.