Case study/ WebGL/ Showpiece

Selva

A six-chapter night walk through a rainforest, rendered live in WebGL. Our showpiece — no client, no brief, no limits.

Selva is a scroll story: one continuous camera path through a living rainforest built entirely in code — trunks, canopy, vines, a ruined stone city the jungle took back, a river that carries the moon, rain, mist and a clearing full of fireflies. Editorial chapters ride over the world; generated creatures perch at the edges of the frame. We built it to show what a website can be when it stops being a brochure.

Visit the live site
Concept · Design · BuildThree.js · vanilla JS · no build step
Screenshot of the Selva homepage

  1. The idea

    Most immersive websites are a video with text on top. We wanted the opposite: a world that is actually there, that the camera actually moves through, and that a phone can run. Six shots — the canopy under a huge moon, the understory, the river, a ruin, the fireflies, first light — each one composed like a frame, with the walk between them as the transition. Nothing in it is in a hurry.

  2. The build

    The forest is constructed at runtime in Three.js: three hundred trunks, ten thousand leaves — real leaves cut out of photographs, packed four to an atlas and dealt out across instanced planes — hanging vines, a river shader that carries the moon, mist, god rays, rain and seventeen hundred fireflies that blink on their own phases. At its centre is a ruined city: a seven-tier temple with a sixty-one-step stair and a pierced roof comb, a fountain with a mask carved on it at the scale of a door, two palace ranges facing each other across a levelled plaza, a gateway, standing and fallen stelae, and a sister pyramid the strangler figs have nearly finished eating — close to five thousand individual stones, every one carrying its own colour so the joints go dark, the ledges stain, and no two are the same grey. Every surface carries a normal map generated from its own photograph, so moonlight rakes across bark and stone instead of printing a flat picture on them — and it casts real shadows that follow the camera. Scroll drives one camera path; each chapter holds, then walks. Bloom, sharpening, film grain and vignette are hand-written passes. It ships as a single HTML page with local fonts and one vendored library, no framework, no trackers.

  3. What shipped

    A page you can walk through at isolume.studio/selva — on desktop with a custom cursor and a chapter rail, on a phone with a full mobile layout, and with reduced motion respected so the whole reading experience survives without the choreography. The creatures at the edges of each chapter were generated for the piece and composited into the moonlight; every photograph is credited in the footer.

Selva: 02 — The river, the moon broken into a path of sparks, and the light at the end of the reach
02 — The river, the moon broken into a path of sparks, and the light at the end of the reach
Selva: 03 — The temple: sixty-one steps, the mask fountain at its foot, fires still lit on the causeway
03 — The temple: sixty-one steps, the mask fountain at its foot, fires still lit on the causeway
Selva: 04 — The fireflies, over a court whose paving the forest is taking back
04 — The fireflies, over a court whose paving the forest is taking back
Selva: 05 — First light: the walk turns and looks back at what it came through
05 — First light: the walk turns and looks back at what it came through

Worth noticing

  • Every leaf in the 3D world is a photograph, cut out and set on a plane
  • Normal maps derived from each surface's own photograph, so moonlight has something to rake across
  • Five thousand stones, each with a dark arris and a stain of its own — the reason a heap of boxes reads as masonry
  • One camera path, six composed shots, the walk between them is the transition

Next project

Nine Fathom

Want a site that works this hard for your business?

Book a free 15-min call