Studio demo · the morphing rooms

Garden

01  /  04  ·  one home, four rooms
Procedural geometry, no models, no textures
Drag to orbit · M morphs · L for night
Ulric.
Building the rooms
The miniature living room, lit for the evening, on its turntable

This browser cannot run WebGL, so the rooms are a still here. On a current phone or laptop they morph in front of you.

How it is built

One home. Four rooms. Not one model file.

Every chair, tree, lamp and duvet in the scene is drawn from code when the page loads: boxes, cylinders, a few rounded corners, and materials that get their wood grain and weave from a canvas the page paints itself. Nothing is downloaded but the library. Drag to walk round it, press Morph, and switch the light off for the evening.

The slots

The room is a set of twenty-eight slots: a table, a big plant, a rug, a lamp, the back wall. Each slot holds one object per room, so the same slot is a lantern post in the garden, a floor lamp in the living room and a chandelier over dinner.

The morph

A change of room is one 1.5 second tween per slot, each starting a little after the last. The old object shrinks away, the new one pops in with a short overshoot, and the whole thing lifts in an arc as it travels, which is what makes it feel placed rather than swapped.

The light

One sun with shadows, one hemisphere fill, and a handful of practicals in the furniture that only come on at night, with a slight flicker. The floor blends from grass to planks with the same weights that drive the rooms, so it never cuts.

Adapted from home-sweet-home by Techartist, released under the MIT licence. I moved the palette, the type and the interface into the studio's own, tuned it for phones, and kept the mechanism, which is the good part. Three.js r185.

Want a hero like this on your own site, drawn to your brand?

Book a call