Lorenzo’s Portfolio
Store
← Interactive experiences

Interactive experience

The Workshop — Seaside

Lorenzo Colombani

A portfolio you walk into: a real-time 3D pavilion over the ocean, where the work sits on a table and opens when you touch it. Drag to look around, touch an object to use it. Still being built — shown as it renders today.

Behind the experience

A portfolio you can walk into.

An ivory pavilion over the ocean turns projects into objects on a table. The sea, mountains, light and companion are part of a real-time browser world, rather than a backdrop to a conventional list.

Drag empty space to look around, move closer and select an object to open its work. This is a working prototype: the published case study shows the experience while its materials, lighting and interactions are still being refined.

A public prototype, still being developed. Explore the version available today.

By
Lorenzo Colombani
Format
Interactive experience
Role
Concept, art direction, interaction design and technical direction
Made with
Three.js and WebGL
Status
Working prototype
Viewing
Desktop and phone
Preview
recorded project preview

Case study

The Workshop — Seaside

The idea

A portfolio is usually a page of cards. This one is a room. The work sits in it as objects, and you use an object to see the work. No cards, no back button: the controls belong to the world.

The world

An ivory pavilion over the ocean, with mountains behind it and a switch from daylight to blue hour. The droid, the sofa and the plants were modeled for this scene. The sea and the ridges are drawn live, not painted on a backdrop.

How you move through it

Drag empty space to look around. Pinch or scroll to move closer. Touch an object to use it. Open TVA Case File and its light rises through the roof until the title sequence takes over the whole view; draw downward and you are back at the table. OpenBots plays over the table as a looping capture. The field in the middle is yours to shape, then let go.

It is silent until you step in. Entering turns the sound on, and if you mute it, it stays muted.

How it was built

I design the product and make the technical calls — architecture, stack, interactions — then direct AI coding tools that build to my spec. I review and test everything that ships.

Here the stack is Three.js, self-hosted, running in the browser and built for desktop and phone, and the coding tool was Codex. The labels move with their objects.

Where it is going

Unfinished, and shown anyway. The render you see is an intermediate pass; the target is a finer finish in the materials, the light and the orb. It is also the direction for this site: in time, the Workshop becomes the way in.

From the original published project case study.