The first screen of Traveling Houston: the inside of the Apollo lunar module Eagle, its triangular windows and instrument panels, under the words “Houston, Tranquility Base here.”

Our own project · A 3D field guide

A field guide to Houston that starts on the Moon.

A blank page became a working guide and a flight at the same time. There are fourteen Top 10 lists of real places, each one checked against its own official source. They sit inside a 3D city built from OpenStreetMap and open building data, with the live weather overhead and a radio that follows the map. And every page still works without any of it.

Project
Traveling Houston
Sector
Travel · City guide
Where
Houston, Texas
Engagement
Our own project, self-initiated
Year
2026
Services
Concept and creative direction · Research and fact-checking · Art direction and type · Real-time 3D in the browser (WebGL) · Interaction and game design · Sound design and original music · Five languages, one of them right to left · Accessibility and speed · Live data feeds and simple hosting
Built with
Next.js · React · TypeScript · three.js · GSAP · Lenis · Web Audio · OpenStreetMap and open building data · NASA and USDA imagery · Suno and Mureka · Umami and Sentry

The problem

Client work is shaped, rightly, by what the business needs: a way to book, or an order form that can't oversell a day. It rarely gets to ask what we can do when the only limit is our own standard. Traveling Houston answers that question, about the city we work in.

It still had to be useful. A portfolio piece that's only a demo tells you that ambition and usefulness are a trade-off. We don't think they are. So the brief asked for both at once: the most useful guide to Houston we could make, and something no one else would have built.

Before: no client, no brief, one word

There was no old site to look over and no one to answer to. Traveling Houston is our own project, made to show what we build when no one sets the limits. It started from one fact: when the Eagle landed on 20 July 1969, the first word of the message home was the name of this city.

The rules it was built under

There's no old site here to pick apart. So instead, here are the rules the guide is held to. You can check each one on the live site today.

  1. 01

    Useful first, impressive second

    The brief asked for two things, in this order: a guide accurate enough to plan a trip with, and a flight you'll remember. Every page is complete before the 3D loads, and every fact on it is real text.

  2. 02

    Checked, or left out

    Every place was checked in September and October 2026 against its official site and recent news. If we couldn't confirm a fact, we left it out instead of guessing. The six places still being confirmed say so on their own pages.

  3. 03

    Nothing sponsored

    No place paid to be in it, and nothing in the guide is paid for. A place gets onto a list because of the research.

  4. 04

    No made-up ratings

    No stars and no scores. Each place says what it is, what to do or order there, and one practical tip.

  5. 05

    No fake photos of real places

    The only imagery under the 3D models comes from NASA and the USDA. Nothing that looks like a photo of a restaurant or a park was generated.

  6. 06

    Every source credited

    The map and building data, the NASA and USDA imagery, the weather, the plane feed, and every archive recording and field sound are credited, with their licenses, on the site's About page.

The big idea

Start where the word did, and never stop flying.

“Contact light” came first. Then Neil Armstrong's message home began with the name of a city: “Houston, Tranquility Base here. The Eagle has landed.” So the story opens inside the lunar module's cabin, with the mission clock at 102:45:58. The scroll is the trip home: out through the Commander's window, past the Earth, back into the air over the Gulf, and down into Houston.

From there, the camera never stops. Every guide is a flight plan, every place is a stop on it, and changing pages means flying across town. Carrying one idea all the way through is what keeps fourteen guides and 140 places from feeling like fourteen separate sites.

Underneath is the rule that makes this a guide and not a demo. The 3D and animation code (three.js, GSAP and Lenis) never loads first. Every page is finished, readable HTML before it arrives. Screen readers skip the 3D view, every game is optional, and if you've asked your device for less motion, the camera cuts instead of flying. Take the 3D away and the whole guide is still there.

After: a guide you fly

Fourteen guides of ten places each, plus a page for the two airports. Every place is a real stop the camera flies to, at its own spot on the map. Every guide has one game that only exists on its page. Turn on the live sky and you get Houston's real sun and weather, with real planes overhead. The radio in the corner changes stations as you reach each stop. Every screenshot below is from the live site, taken on 7 October 2026.

The Descent

It starts with a title card: our name in machined metal letters, at sunrise on the Moon. Then it's one long scroll from the Moon down to the city.

We built the cabin from the measurements in Grumman's LM News Reference: the angled windows, the panels and circuit breakers, the guidance computer's display showing P68. The lander outside is NASA's own public-domain model, cut down to 62,000 triangles and refinished in crumpled Kapton foil and aluminum. The flag stands where the moonwalk photos put it. At liftoff, the top half of the lander leaves the bottom half on the plain, just as it did.

The Earth is NASA's Blue Marble and Black Marble, with the sun where it really was: dawn over Houston, the West Coast still dark. As you drop back into the air, the ground turns into USDA aerial photos. The coastline is stored as a distance field, a bit of math that keeps it smooth at any height.

It has a soundtrack. The real Apollo recordings play between the mission's radio beeps (quindar tones), each one captioned. The opening has its own instrumental. At first it sounds like it's coming through the hull, then it opens up as you fall toward the city. The fall pauses once, at the first step on the Moon, shown as a radio transmission with a live sound wave.

The Apollo lunar module on the gray lunar plain with the Earth in the black sky above it, under the headline “Twenty-one hours on the Moon.” and a caption of Armstrong's first step.
Eagle on the plain, with the real recording of the first step captioned below.
Black space with the ascent stage and a small Earth beside it, over the headline “Every mission answered to Houston.”
Liftoff, with 238,900 miles to go. The readout counts them down.
The Earth from space, the Americas half lit, dawn crossing the Gulf of Mexico, with a small point of light where Houston is.
NASA's Blue Marble and Black Marble on the way home, with dawn just reaching Houston.
The upper Texas coast from high above, the Houston region spread out as aerial photography with Galveston Bay beyond, under the headline “Welcome to Houston.”
Coming in over the upper Texas coast, on USDA aerial photos.

A city built from its own map

Houston here is built from OpenStreetMap and open building data: 84,506 buildings on their real footprints. Most come from OpenStreetMap. Around some stops, where the map has no buildings, Microsoft's building footprints fill the gaps. Each building rises to its mapped height where the map has one, and to a typical height for its type where it doesn't. Each one is painted from a Houston palette, with window grids, glass towers and lit rooms at night. The freeways carry 22,000 lights of traffic, and the landmarks are models built from published measurements.

The streets have life in them. People walk with real gaits and use the crosswalks. They sit, fill the stands, push strollers and hold their kids' hands, and their skin and hair follow Houston's mix in the 2020 Census. There are seven kinds of Houston trees plus palms, placed using the county's tree cover as mapped from infrared aerial photos. Cars sit in striped lots, and traffic keeps its distance, stops at lights and lets people cross. METRO buses run Route 82 down Westheimer. At night, the water reflects the city's glow.

Then the stops. As the camera heads toward a place, 133 of them rebuild their own block, now including both airports and Space Center Houston. You get the buildings around it, a storefront facing the right street, the place's real name on its sign and the neighbors' names on theirs, the parking lot, the patio, the pits and the picnic tables. About twenty stops were rebuilt from sources with life in them: the Houston Zoo has its elephants, giraffes and sea lions, Kemah Boardwalk is there as it stands in 2026, and the Rodeo grounds follow the 2026 official map.

Bellaire Boulevard got a street of its own. Its strip centers are lettered with the tenants on the map, and the street signs are in English and Vietnamese on one side of the Beltway, English and Chinese on the other. Further out, 24 distant towns, from Galveston and Kemah to Brenham and Huntsville, get their own streets and buildings.

The first stop, Space Center Houston, approached from the air over Clear Lake: neighborhoods and the NASA campus in the 3D city, under the place's name and the Land the Eagle game.
Stop one: coming in over Clear Lake toward Space Center Houston, with Land the Eagle waiting underneath.
Bellaire Boulevard at dusk in the 3D city, its streets drawn as lines of light under a beam marking the stop, beside the place's name and field notes.
Bellaire Boulevard at dusk, lit up from end to end.

Houston, right now

The clock in the header is also a switch. Turn it on and the hour we picked for the look gives way to the real one: the sun where it is over Houston this minute, and the latest weather the National Weather Service reported at Bush Intercontinental. Clouds gray the light, and rain streaks the lens.

The planes over the city are real too. They fly at the positions they broadcast, picked up by volunteer receivers and updated every ten seconds. Planes on the FAA's privacy programs are left out. The ships on the Ship Channel are real, and METRORail's trains are where the timetable puts them. Nothing about you is sent anywhere to make any of this work.

Some weather is written in. The Top 10's stop at Buffalo Bayou always arrives in a thunderstorm: sixty thousand raindrops, lightning that lights up the city, and thunder that comes as late as the strike's distance says it should.

Under the park is the Cistern, a 1926 reservoir with a 17-second echo, and you can step inside it. The page goes away, the radio pauses, and each tap is a clap that rings for as long as the real room does.

Downtown Houston under a thunderstorm in the 3D city, rain streaking across the view and a ring of light marking the Buffalo Bayou stop, beside the place's name and notes.
Buffalo Bayou, in the storm it always arrives in.
Inside the Cistern on the live site: pale concrete columns receding into the dark and reflected in still water, with the line “Tap to clap. Drag to look around.”
Inside the Cistern. Everything you hear rings in the room's own 17 seconds.

A game for every guide, and two more

Every guide has the same honest backbone: ten places, flown to on the real map. Each one also has a game that only exists on that page. You don't need any of them to use the guide, every one plays from the keyboard, and no two of the fourteen use the same technique. Two more games live on single stops: Final Approach, where you land an airliner on the real FAA runways at Bush Intercontinental or Hobby, and Barrel Race, for RodeoHouston at NRG. Every game fills the screen while you play, shows a calm scene before you press Start, and has a strip of controls you can hide.

Land the Eagle is the last three and a half minutes of Apollo 11, played as real physics. It starts at 102:42:15 and 3,140 feet, with the real 1201 and 1202 alarms and West crater's boulders below. Armstrong landed with about 45 seconds of fuel left. See how close you can get.

The 14-Hour Brisket is a whole overnight cook. Hold the smoker at 250 to 275 °F, ride out the stall, wrap in paper or foil, and probe until it's tender. Then a judge scores it. White smoke means the fire is starved of air. Chopped & Screwed is a two-deck rhythm game on “Clutch City,” one of our own songs, at 150 beats per minute. You screw, chop and cut, slowing the record into a 40 to 48 percent band, and the first time you play, it teaches you how.

The Road Atlas drives a car down the real mapped freeways to each day trip, onto the Bolivar ferry when the route needs it. Latte Art is a fluid simulation running on the graphics card. Lotería isn't 3D at all: it's real cards you can reach with the keyboard, and a Spanish caller in your browser's own voice.

The 14-Hour Brisket on the Barbecue guide: an offset smoker on a lit patio at night under string lights, with the game's card explaining the overnight cook and its controls.
The 14-Hour Brisket. Keep the fire steady all night and have it probe tender by the 11 a.m. doors.
Chopped & Screwed on the Live Music guide: two turntables under purple light with the game's card, its difficulty settings and a Drop the needle button, and the guide's ten venues listed beside it.
Chopped & Screwed: two decks, one song, and the purple band to hold the record in.
Latte Art on the Coffee and Brunch guide: a cup of coffee seen from above, waiting for the pour, with the guide's ten places listed beside it and a Pour a heart for me button.
Latte Art. The milk is a fluid simulation running on the graphics card.
Lotería on the Tacos and Tex-Mex guide: a red deck beside a tabla of illustrated cards, most of them marked with a place from the guide, and a Start the game button.
Lotería, made with plain HTML and CSS instead of 3D: real cards you can reach with the keyboard, marked with places from the guide.

A radio that follows the map

The radio in the corner has nine stations and 158 original songs. Digital Wonders wrote them for the site and produced them with Suno (20 songs) and Mureka (138). They run from honky-tonk, western swing, Tejano, mariachi and Frenchtown zydeco to Third Ward gospel and blues, slowed and chopped H-Town rap, Afrobeats, lion-dance trap for Bellaire, a sea shanty for the Bolivar ferry, and crunk. The lyrics are about real places in the guide, and most places have a song of their own. A tenth station plays public-domain records.

The radio follows the camera. When you reach a stop, it switches to that stop's station. If the stop has its own song, it usually comes in at the first chorus. At stops with a field recording, the song starts quietly under the voice instead. The song on air keeps playing until the new one is actually sounding. Every song is a radio edit, trimmed to its first and last sung lines using the timings in its own lyrics, and no song plays twice on a page. The panel tells you why a song is playing and lists the songs.

Under the music are real voices, captioned as they play. You hear Apollo's calls on the way down, and Kennedy at Rice at three stops: Space Center Houston, Rice Village and downtown. In the Third Ward there's a 1941 Library of Congress interview with Laura Smalley, remembering Juneteenth, and in the East End a 1939 recording of the López family. There are field sounds too: the Waugh Drive bats, a hawk at Armand Bayou, an alligator at Brazos Bend and a rodeo auctioneer.

Under all of it is a background sound made live in your browser. It follows the time of day and the camera's speed: wind only while you're really moving, cicadas at dusk, crickets at night.

The radio panel open over Bellaire Boulevard: the World Kitchen station playing Lion Drums, a note on the song, the choice to follow the tour, stay on one station or see all songs, and the stations listed below.
The radio at the Bellaire stop, playing Lion Drums. It says why the song is on and lets you follow the tour, stay on one station, or pick from every song.

Five languages, one source of facts

The whole guide is also in Spanish, Vietnamese, Chinese and Arabic, because Houston speaks them. Each edition has its own web addresses that search engines can find. It isn't a translate button. The Arabic edition reads right to left, all the way down to the header and the flight readouts.

Each language gets fonts that can carry it. The Vietnamese edition sets its italics in Newsreader, because the headline font has no Vietnamese letters. The Arabic edition uses IBM Plex Sans Arabic and Noto Naskh Arabic, and the Chinese edition uses your device's own fonts. The editions were translated with help from AI and checked against the English for consistency. The English stays the source for every fact.

The Arabic edition of Traveling Houston: the arrival over the Texas coast with the headline and body set right to left and the header mirrored.
The Arabic edition, right to left, over the same coast.

Every kind of page gets its own idea

The events page is a split-flap departures board, like an old airport's. It refreshes every six hours from box offices and the parks' own calendars. If organizers haven't announced a date, the board says so instead of guessing.

Your plan started as a boarding pass. Now it's a full trip planner. Save places and it works out real drive times, splits the trip into timed days, warns you when a place is closed, points out METRO rides with no transfers, and shows the forecast. One press flies the whole trip, day by day. Your plan lives in your own browser and only leaves if you share it as a link. The pages of a saved trip are kept on your device, so it opens with no signal.

Free flight hands you a drone over the whole city, with ten beacons on the Top 10 to find. Any view can become a postcard, a big-letter “Greetings from” card made from the 3D scene. A wrong address lands on Apollo 13, adrift, with the real recording of the call. There are shows, too: the Top 10 ends with a finale called “Every Light in Houston,” and the Astrodome's “Next Act” is a 51-shot concert film with fireworks. And the site has its own making-of page, where every count comes straight from the data the site runs on.

The events page: the word Departures over the night city, and a split-flap board of what is on now, with venues and statuses.
Events, as a departures board over the night city.
Free flight over the 3D city, with the flight controls listed on screen.
Free flight. Use W, A, S and D to fly, and P for a postcard.
The page for a wrong address: the Apollo 13 spacecraft drifting in space beside the headline “Houston, we have a problem” and the real flight transcript.
The wrong-address page (the 404): Apollo 13, adrift, with the transcript as the Flight Journal gives it.
The making-of page: the headline “The making of Traveling Houston” over an aerial view of the Houston region.
The site's own report on how it was made.

One canvas, and a guide without it

These are the parts that decide whether all of this holds up for a real visitor on a real phone.

  1. 01

    One 3D canvas for everything

    The city is the background, and every game is drawn into the same canvas, inside its own rectangle. So there's one WebGL context (the page's single link to the graphics card) for everything. Images are shared, and the browser never hits its limit on how many it allows. The small programs that run on the graphics card are prepared in parallel before anything new is drawn, and the sharpness adjusts to the device as it runs. Weak graphics chips start one step lower, so the city stays smooth.

  2. 02

    Complete without the 3D

    Every page is finished HTML before the 3D and animation code arrives. Screen readers skip the 3D view, and every fact is real text. If you've asked your device for less motion, the camera cuts instead of flying and there's no lightning. Nothing is cut off or zoomed on a 320-pixel phone.

  3. 03

    Contrast measured on the letters

    axe-core, an automated accessibility checker, reports no violations on the pages we audited, at desktop and phone sizes. It can't see through to a moving 3D scene, so we also measure contrast on the letters themselves, frame by frame, against the city behind them.

  4. 04

    A one-pixel bug, found and fenced

    A black block kept blinking over one downtown bar. The cause was a single pixel whose value wasn't a number, spread out by the glow effect. The fix was one word in a shader. To keep it fixed, a scanner now checks the glow effect's input, stop by stop.

  5. 05

    Ordinary hosting, rebuilt on a schedule

    The whole site is a set of ready-made pages on ordinary shared hosting, with the live plane feed behind one small go-between server. A change goes live in about a minute. About 800 automated tests run before every update, and the site rebuilds itself every six hours, so nothing on it is dated by hand.

  6. 06

    No accounts, and simple visit counts

    There's nothing to sign up for. The site counts visits with Umami, a cookie-free analytics tool that doesn't collect anything that identifies you, and sends error reports to Sentry. Both are listed on the site's About page. A saved plan stays in your own browser.

On a phone

It's the same flight, sized for the device: the Earth at 2,048 pixels instead of 4,096, a third of the freeway traffic, and fewer raindrops. Text is sized from measured letter widths, so a long place name never runs off a small screen. The row of stops along the bottom lets you jump ahead.

We've kept making it lighter. In our tests on a simulated phone, 95 percent of frames now take 15.0 milliseconds or less, down from 17.2. The most graphics memory it uses went from 276 MB to 238 MB. And no single task ties up the browser for more than 150 milliseconds on a computer, or 120 on a phone.

Traveling Houston on a phone: the lunar module cabin's window above the headline “Houston, Tranquility Base here.”
Eagle's cabin, 390px.
The Buffalo Bayou stop on a phone, rain over the city behind the place's name and description.
Buffalo Bayou in the rain, 390px.
The Arabic edition of Traveling Houston on a phone, the arrival over the Texas coast with the headline set right to left.
The Arabic edition, 390px.
The Bellaire Boulevard stop on a phone, the lit boulevard at dusk behind the place's name.
Bellaire Boulevard, 390px.

Goals, not results yet

What this is designed to change

Traveling Houston has no client to report to. It does count visits now, with privacy-friendly analytics, but there isn't enough data yet to be worth quoting. So there's no traffic figure here, and none is implied. What follows is what it was built to show, and you can check each item by opening the site.

  • One site that shows the whole range of what we build: real-time 3D, interaction and game design, sound design and original music, research, five languages, and the hosting underneath.
  • Every place in the guide checked against its official source, with nothing sponsored and nothing guessed.
  • The whole guide readable without the 3D, with reduced motion, and on a 320-pixel phone.
  • Live weather, planes and events on ordinary shared hosting, with nothing on the site dated by hand.
  • A saved trip that opens with no signal.

Client work shows what we do for a business. This shows what we do when the only brief is our own: the same refusal to guess at a fact, and no ceiling on the craft.

Still open

  • Card proof. The site now counts visits, but there isn't enough data yet to be worth quoting. Once there is, a real visit figure could go on its card. No one outside the studio has been quoted about it yet, either. Until then, the slot stays empty instead of holding a number no one measured.
  • A native speaker's review of the Spanish, Vietnamese, Chinese and Arabic editions. They were translated with help from AI and checked against the English for consistency.
  • Frame rate across a range of real phones. So far it's been tested in a headless browser (one with no screen) and under a slowed-down phone profile, which isn't the same thing.

Have something that deserves a world of its own?

Traveling Houston is what we build when nobody sets the limits. Bring us a place, a product or a story, and we’ll tell you what it could be before anyone designs anything.

Start a project