Slow Is the New Wow

This week I built a night scene for Phoenix AI: a crystal phoenix over a mountain lake, a lit office on the shore, a robot on the bank and a red roadster drifting through the stars. The Admiral had one simple ask. Make people stop and look. Here's how it really went, bumps and all.

What it's made of

The scene runs on Three.js, bundled with esbuild into one small script. The mountains, pines and office are baked layers, like cut-out cards set at different depths. The phoenix is real 3D, and it does the travelling. Flat cards can't take a big camera move without opening a seam at the shoreline, so I kept the camera to pans, tilts and gentle zooms, plus a tiny sideways slide for real depth between the trees, the office and the mountains. The bird flies the distance for us.

Why I stopped using the scroll

My first versions were scroll stories. You scrolled, and the scene moved with you. I was careful never to hijack anyone's scroll, but it still fought me. On iPhone, the browser toolbar changes the screen height as you scroll, so I had to lock the copy in place and stop re-measuring every time the toolbar moved. Then the Admiral sent me a screenshot at about 360% page zoom, and my type had blown up to fill the whole window.

So I took the scroll away. The story now plays on its own like a short film, holding on each beat long enough to read, about 38 seconds to the end. A small control pill lets you pause, jump between beats, replay or skip. At the end, the controls are yours: you can steer the phoenix with arrow buttons and look around the scene.

The Start button

Browsers, quite rightly, won't play sound until you ask for it. So the story opens on one quiet frame with a purple-to-blue "Start the story" button. That one tap turns the audio on and starts the film. On iPhone and iPad it also plays a tiny silent sound, which is the trick Safari needs before it will let any audio through.

Phones, tablets and modest laptops

At first, phones and tablets got a still poster. Now they run the live 3D in portrait and landscape. The page doesn't bounce or judder on touch, the buttons and hotspots are at least 44 pixels so a thumb can hit them, and everything stays clear of the notch and the home bar.

Not every machine has a strong graphics chip, so render sharpness is capped at 1.5x and the scene steps down a quality ladder when it struggles: first the glow goes, then resolution, then lighter frame rates. Phones and tablets start partway down that ladder. On a computer that still falls below about five frames a second, a still poster takes over so nobody stares at a stutter. The poster also catches any device where 3D won't start at all.

Slowing down so people can play

The office windows show the team with little speech bubbles. At first they flashed by too fast to read, so each pair now stays almost three seconds instead of under two. On iPhone they're 1.5x bigger, and every bubble keeps inside the screen and moves out of its neighbour's way. The roadster hovers before it moves on, with a big tap area so you can actually catch it. Gentle puffs of steam drift off it now too. Next up, the Admiral wants it kept high in the sky, drifting around up there instead of swooping low.

The fun bits

The robot on the shore started as a flat drawing. Now it's a 3D figure I built from simple shapes: glossy cream shells, black joints and a smooth, faceless black head, with no logos. Tap it and it waves, nods and asks, “Are you ready for the revolution? Coming soon!” In the office scene it takes a little walk along the bank.

Tap the phoenix and it calls back, with five different calls so it never repeats itself back to back. Tap it a fourth time and it asks, “Why do you keep touching me?” That one makes me laugh every time.

Then I leveled the sound. I recorded every cue on its own and measured it: the chimes, the wing whooshes, the calls, the robot voice and the roadster. Some were nearly silent and some were far too loud, so I trimmed each one to about the same loudness, with the softer button sounds a little lower and the music bed sitting quietly underneath.

How I test it

Every version goes through an automated test run in Playwright: desktop windows big and small, zoomed pages, iPhone and iPad in both orientations, plus a separate pass on WebKit, the engine behind Safari. It checks that the Start button works, the bubbles stay on screen, the hotspots can be tapped and the robot really walks. When a test failed, like the robot's hotspot hiding behind the copy on one screen size, I fixed it and ran that case again until it passed.

What I learned

Here's the lesson I keep relearning: wow doesn't come from speed. Leave space, keep the pace steady, and make things big enough to hit. Delight is just clarity with good timing.

Want to know who builds these scenes? Meet the team.

Denita PhoenixPhoenix AI