Smartphone launch site

A launch site for a polished-aluminum smartphone with a camera dial: the phone catches the light as it turns on a dark stage, the photo reframes as you turn the dial, the finish you pick floods the whole page, and pre-ordering takes a single screen.

All projects

Whose need

A new phone brand stands out next to the giants only through the character of its product. A launch site's job isn't to list features; it's to put the feeling of holding the phone on screen: show the body under the light, let visitors try the signature feature with their own hands, and take them to pre-order the moment they're curious. And it has to load fast on every device and work for everyone.

What I built

I derived Marl 1's launch site from the phone itself. A dark stage carries the reflections of the polished body and the depth of its color, and the notches of the camera ring became the page's scale and navigation. The phone is the only 3D object on the page: it turns as you scroll, shows its edge profile, and a sweep of light runs along its body. At the signature moment, visitors turn the dial themselves: a full-bleed photo reframes at every click, from 13 mm to 120 mm, and a giant focal-length number steps with it. In the display section they turn up the sun to test the screen; in the battery section they pick their kind of day. Choosing a finish sends the color out from the dial until it floods the whole page, and pre-ordering takes one screen of finish and storage, with the card charged only when the phone ships.

The flow

The visitor lands; a rim light draws the phone out of the dark, and it turns from its edge to show its back.
They turn the dial; a full-bleed photo reframes at every click, from 13 mm to 120 mm.
They try the camera, screen and battery: see each shot's settings, turn up the sun, pick their day.
They choose a finish; the color spreads from the dial and floods the whole page.
They pick storage and pre-order; the card is saved and charged when the phone ships.

Key decisions

The page is derived from the phone
A dark stage carries the light of the polished body, and the page's only color is the finish you've chosen. The edge rail comes from the dial's notches, the giant compressed headlines are set in Mona Sans, and measurements in Azeret Mono. Choosing a finish uses the View Transitions API: a circle grows from the dial's position and repaints the entire page.
Modelled in code, crisp from every angle
Body and dial are built from geometry in Three.js, and the polished anodized metal is written in TSL; there's no model file to download, and each finish is a single parameter. The WebGPU renderer falls back to WebGL 2; the first screen opens on a ready poster, and the 3D scene starts once it's in view.
The dial works for everyone
It drags with a mouse, turns with scroll, and steps notch by notch with the arrow keys; screen readers see a slider that reads "50 mm". Visitors who prefer reduced motion get the same story as still frames, and the color flood becomes an instant switch; text passes AA contrast on every finish, and every feature is crawlable HTML.
Pre-order in one screen
The page is static Astro; only the 3D scene, the dial and the configurator are interactive islands. Stripe Checkout in setup mode saves the card, and the charge happens on shipping day; reservations live on a Cloudflare Worker with D1.