An ExplorableExplorableExplorable Ambient Worldongoing

An explorable ambient world is a small 3D place that runs beside your work: as a website, a floating player or a new browser tab. The first world, Long Evening, is a wild Estonian bog at dusk with a short-eared owl that follows your cursor. Later you can leave the owl's stump and wander through the bog.

Role

Concept, product definition, art direction, design engineering

Stack

three.js, WebGL2, TypeScript, Vite, Vercel. Built with Claude Code

Channels

Website, floating player, new tab extension. Later a Notion embed and a desktop companion

The sounds come from the mixer in this site's footer. I recorded the nature sounds and produced the music myself. In the world each sound has a place, and its volume follows your distance to it. The levels are calibrated so equal sliders sound equally loud, and the cranes call at random intervals of one to three minutes, so the loop never gives itself away.

There are no textures and no 3D models. The terrain, water, pines, mist and owl are generated in code when the page loads.

0

texture or model files

~1,500

feathers on the owl

6 to 26 s

between gusts

±60°

head turn

3 KB

boot code

610 KB

scene

12 to 20 fps

when embedded

• Mist: volumetric, computed per pixel in a post pass. Patchy banks over the water that drift and get pushed by gusts.
• Wind: one gust schedule drives the grass, the pine tips, the owl's feathers and the ripples on the pool.
• Owl: one gaze target for the whole head, limited to sixty degrees each way, both eyes blinking together.
• Framing: the camera shifts so the owl stays at the lower-right third on any screen, from phone to ultra-wide.
• Embeds: a still frame shows first and the live scene fades in over it. Rendering pauses when the world is not visible, and the cursor is sent from the page around it.
• Budget: lower resolution and half-resolution mist when embedded, and no rendering at all off screen.