From product to atmosphere

Phos is the product website for a designer lamp made by Estudio Once, a small studio in Uruguay. Instead of a traditional product page, we designed it as a single, scroll-driven experience — closer to a short film than to e-commerce.

The lamp itself is defined by warmth, materiality, and the kind of light you only really notice late in the day. The brief was to translate that into the web.

The site is live and currently being used to sell the product.

The brief, in two options

Estudio Once had a finished product but no digital presence that did it justice. 

The two options on the table were:

• A clean, conventional product page (fast to ship, generic feel)
• A custom experience that mirrored the care put into the object itself

We went with the second — but with a clear constraint: it had to be a real product website, not an experiment. People had to be able to understand the lamp, choose a configuration, and reach out to buy.

The cinematic layer had to coexist with usability.

The experience

The site is structured as one continuous scroll, divided into five moments:

• 01 — Atmosphere — A soft, blurred entry scene. Light, depth of field, and dust particles set the tone before the product is fully visible.
• 02 — Reveal — The user starts scrolling. The environment fades and the lamp becomes the focal point.
• 03 — Focus & motion — The lamp floats in space while the camera moves around it.
• 04 — Deconstruction — An exploded view introduces materials and components.
• 05 — Gallery & loop — A horizontal gallery of the lamp in real interiors. At the end, the system loops back to the beginning — without any visible cut.

Three design decisions
worth talking about

Phos isn't a portfolio piece — it's a working product site. Most of what looks like polish is actually a series of decisions where the obvious solution didn't work, and we had to find a different one.

The hardest question early on was: how do you connect a scroll gesture to a complex 3D camera move?

We could have built it frame by frame in JavaScript or used CSS keyframes. Instead, we exported the entire camera animation — trajectory, rotations, the slow orbit around the lamp — directly from the 3D software as a single GLB file.

The scroll doesn't generate the animation. It plays it.

That distinction matters: the camera moves with the same quality it would in a rendered video, because that's exactly what it is. The web isn't trying to imitate cinema — it's literally driving a film with the user's scroll.

At the end of the gallery, the experience has to return to the beginning without the user noticing.

The first attempt was a fractal-noise dissolve — the screen breaks apart and reassembles. Technically it worked. But it looked like a stock effect, with no relationship to the lamp.

We replaced it with a custom GLSL shader: a dark ink stain that expands from the exact on-screen position of the lamp. The edges splatter as they travel, the way real ink behaves on paper. The lamp covers the world, the system resets everything silently, and the lamp reveals it again.

It works because it has narrative logic — the object is the origin and the destination of the experience.

iOS blocks autoplay audio in the browser by default. The "correct" fix, per the docs, is to resume the audio context inside a user gesture. We tried that — several times, in several variants. None of them worked reliably on iPhone.

What ended up working was giving up on a unified solution.

• Desktop: Web Audio API, with fine control over volume and fades.
• Mobile: a native HTML <audio> element, started synchronously inside the tap on "Begin experience" — not on the next frame, not inside a promise. In the same gesture. It's the only pattern iOS accepts consistently.

The decision was to stop fighting the platform and treat mobile and desktop as separate contexts with different rules.

UX decisions, before the visual

Phos has to do two contradictory things at once: deliver a cinematic experience and let someone buy a lamp. The hardest decisions weren't visual or technical — they were about who comes through the door, and what each of them needs.

Two types of people land on Phos:

• The intentional buyer — already convinced, just wants to purchase.
• The curious explorer — not ready to buy yet. Came because the link looked interesting.

Most product sites optimize for one and lose the other. We built two paths in parallel:

• For the buyer: the "Buy" button is one of three UI elements visible at every moment, regardless of where they are in the experience. Two clicks to reach WhatsApp.
• For the explorer: the full scroll-driven experience. No conversion pressure, no popups, no urgency banners. Just the lamp, told as a story.

The first decision happened before any pixel of design: the headline says "Light for slower moments", not "Buy the PHOS lamp". The CTA says "Begin experience", not "Shop now".

This isn't copy. It's positioning. The word "begin" frames the site as something with a beginning, middle, and end — something to be inhabited, not scanned. It changes how the user moves through the page.

The biggest UX decision was what NOT to include:

• No cookies banner interrupting the entry
• No popups
• No progress bars
• No pagination
• No urgency or scarcity tactics

The only persistent UI elements are: a sound icon, a Menu, and the Buy button. Three elements. Everything else fades after 10 frames of scroll. Every UI element is designed to leave when its job is done.

Vertical scroll = reading. Horizontal scroll = browsing. The shift from vertical (the lamp's story) to horizontal (the lamp in real spaces) is deliberate. It tells the user, without words: the narrative is over, now look around.

The "Buy" CTA only appears in the gallery — after the user has been through the full experience. By the time they see it, they've understood the material, the light, the components, and the spaces it lives in. The CTA is the last beat of a sequence, not the first.

Two custom GLSL shaders

The atmospheric shader

Creates the sense of being in a room where light is volumetric, not just illuminating surfaces. There's a warm cone of light emanating from the lamp's exact on-screen position, with denser and thinner zones that move slowly — like dust or warm air. The background "breathes" with two overlapping pulses, so it never feels mechanical.

There are no UI elements: the atmosphere is the interface.

The transition shader

Powers the loop — the radial ink expansion described above. Custom FBM noise, dynamic edge softness, position-locked to the lamp.

How it's built

Phos runs on a custom real-time architecture, designed and shipped for both desktop and mobile with platform-specific behaviors:

• Three.js handles 3D rendering, PBR materials, and a selective bloom pipeline (only the bulb emits light)
• GSAP + ScrollTrigger drives the entire scroll narrative — animation scrub, overlay fades, horizontal gallery, snap to keyframes
• Custom GLSL shaders for atmosphere and the loop transition (FBM noise, radial expansion)
• GLB pipeline — the camera animation is exported from 3D software as a single file and consumed directly
• Web Audio API on desktop, HTML5 audio on mobile — split implementation for iOS compliance
• Fully responsive design — the experience was designed and built from the ground up for mobile too, with a separate audio strategy and adapted scroll pacing for touch devices
• Theatre.js was used during animation refinement, removed from the production build

Outcome

Phos is live and Estudio Once is using it as the primary channel to sell the lamp.

For me, it's the project that clarified what kind of designer I want to be — one that works at the intersection of product, atmosphere, and code, where the interface and the object aren't separate things.

Reflection

Phos pushed me into territory I hadn't worked in before: writing GLSL from scratch, packaging full 3D scenes into GLB, and treating scroll as a film playhead instead of an animation engine.

It also taught me how much of design happens in the conversation between disciplines. Three weeks of constant back-and-forth between modeling and code: every material change, every camera tweak, every export setting affected what I could build on the web side.

More than the technical layer, this project reinforced something about craft — that a technical decision can carry visual identity (the ink shader isn't just a transition, it's part of the product's language), and that the details no one notices consciously (the seamless loop, the breathing background, the audio fades) are what make something feel finished.