Websites · Lab · 2026

Arc One

A launch site for a fictional phone. A Blender model turns, opens and comes apart as you scroll, on a static page that loads in 46 KB of script.

First load
46 KB of script
Model
246 KB
Lighthouse mobile / desktop
94 / 100
Security
Strict CSP
Arc One launch page: the heading "Arc One" beside a 3D phone showing a lock screen with a glowing gold arc

The problem

How do you make a product launch feel premium without making it heavy? I wanted a phone that turns, opens up and shows its insides as you scroll, on a plain static page under a strict security policy.

The approach

I modelled the phone by script in Blender: about 9,000 triangles in a 246 KB model. Three.js and GSAP move it through seven poses as you scroll. The finishes change live, the screen runs, the lenses fan out and the back lifts off to show the parts.

The page paints first with rendered stills and 46 KB of script. The 3D loads only when the browser is idle, and computers without a graphics card keep the stills.

The outcome

Lighthouse scores of 94 on mobile and 100 on desktop for performance, and 100 for accessibility and best practices. The page also works with reduced motion, without WebGL and without JavaScript. Arc One is fictional: the product, prices and specs are made up for the demo.

Arc One design section: the back of the phone with a gold light ring round the round camera island, and Graphite, Dune and Glacier finish buttons
One camera section: a close-up of the camera island with the glass elements of three lenses fanned out
Arc One inside section: the phone with its back lifted off, and labels for the camera modules, chip and 5,000 mAh battery

Have a project like this?

Tell me about it and you’ll hear back from me directly.

Start a project