The homepage that ends in a swamp.

Start with the night

The empty stage. A night sky washed in the shop's deep forest green, a moon with a soft halo, and a dozen fireflies, each wandering its own slow loop. No two share a flight path or a speed, so the sky never repeats itself.

One detail we fought for: the moon's glow is painted into the scene rather than generated by a browser effect. Early versions used the easy way and the glow would flicker off for a frame at a time on some machines. Painting it costs nothing and never blinks.

Hang the trees

These are real oaks. The owner supplied photographs of moss-draped trees; we cut the silhouettes out, sharpened the moss strands so they stay crisp at any size, and tinted them to the exact ink of the page so they sit inside the night instead of pasted on top. The moon now glows through the branches, which was a happy accident we kept.

The low branch on the right is hung deliberately: its moss reaches almost to where the water will be. Composition first, then code.

Fill the water

A still bayou rises to meet the trees. Cypress knees break the surface in two clusters, low mist drifts along the far bank, and the moon lays a soft reflection on the water directly under its side of the sky, with little glints that brighten and fade like the surface is actually moving.

Let the alligators in

Brightened here so you can see him clearly. On the real page he's subtler: a dark hump and two glowing eyes at the waterline, which is exactly how you'd actually spot one at night.

The gators run on their own random clocks. Each one picks a spot anywhere in the water, drifts there unseen, rises over a few seconds, lingers between five and twenty seconds, then sinks and disappears for up to half a minute. Closer gators render bigger. Each one claims its patch of water when it surfaces, so two never overlap. And there's a third gator most visitors will never see: he only comes up about 15% of the time.

Watch a real stretch of it, uncut. Two surface in this take:

Forty seconds of the live homepage. Fireflies wander, mist drifts, and the gators come and go on timers no one scripted. Every visit plays differently.

Clear the stage

The finished scene. One more piece of manners: the site's floating Order Pickup button quietly slides off-screen when the swamp comes into view, then returns when you scroll back up. Nothing sits on top of the bayou. The scene is the destination, and the page knows it.

The phone gets its own cut

A scene composed for a wide screen dies on a narrow one, so the phone version is reframed, not shrunk. The swamp takes 80% of the screen height. The waterline scene is enlarged and anchored so the moon's reflection stays in frame, and the gators render almost twice as large so they read at arm's length.

They also know where the phone's edges are. The visible stretch of water on a phone is a narrow window into the wide scene, so the gators only surface inside it. Nobody performs to an empty theater.

the mobile swamp · 80% of the screen

The build log