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 gators learn to swim

The first version's gators surfaced, sat still, and sank. Real ones don't. Now every surfacing rolls one of seven behaviors: a lazy drift, a stalk that curls in close and grows before turning away, a shadow prowl where only a dark shape keeps moving under the surface, a back-and-forth patrol, an ambush that vanishes and erupts somewhere else, a slow circle around one patch of water, and a creep so slow you barely catch it.

Two rules hold it together. The gator graphic stays dead flat, because a tilting silhouette reads like a sticker sliding on glass, and before any gator starts a move it claims the entire path it's about to swim. If another gator holds any part of that water, it re-rolls a different move somewhere else. Two paths can never cross. On a phone, where the visible water is a narrow window, that same rule quietly makes them take turns.

The swamp lights

Louisiana folklore has a name for lights over the marsh at night: feu follet. Every thirty seconds, one rises off the water somewhere, wanders upward in a crooked line, and winks out. It's the smallest thing in the scene and the one people point at.

The chest in the water

Half-sunk, no glow, easy to miss. That's the point.

Watch the swamp for four real minutes and a crate drifts up out of the water. Not four minutes after the page loads: the timer only runs while the swamp is actually on your screen, so parking a tab in the background gets you nothing. Click the crate and it cracks open with a beam of gold light, and one of the shop's own tarot cards rises out.

The card art is the shop's real Major Arcana deck, the same art on their menu and their tarot pages.

Collect three cards and the swamp pays out: 10% off, claimed with a phone number, one coupon per number. The code isn't a shared string sitting in the page for anyone to read. The shop's own server, the same machine that runs their kitchen screens and booking system, mints a fresh single-use code for each claim on the spot. A homepage animation that runs a real promotion, with real fraud control, end to end.

The swamp knows what night it is

Rain in the swamp, with impact rings scattered across the water. You'll only ever see this when it's actually raining at the cafe.

The scene checks a live weather feed for the shop's own coordinates every ten minutes. When New Orleans gets one of its famous afternoon downpours, the swamp rains too. When the sky clears, so does the bayou. If the feed ever fails, the swamp stays dry, because a stuck rainstorm would be a bug and a dry night is just a nice evening.

A sabbat night. The whole swamp crosses over: sky, fireflies, swamp lights, moon halo, even the glints on the water.

It reads the calendar and the sky, too. On the eight witches' sabbats, the entire scene turns violet for the night and goes back to green at midnight. On real full-moon nights, computed from the actual lunar cycle rather than a schedule someone has to maintain, the crescent fills into a full disc with a deeper halo. And two small touches for whoever lingers: tap the water anywhere and it ripples where you touched it, and every tenth minute of watching, a bottle floats up carrying the month's gatherings.

The build log