Skip to content
All projects

Case study2026

Lucky Wander Wyatt

My Appalachian Trail journal from 2012–13, rebuilt as a 3D world you walk through: each entry at its place on the trail, in that day’s terrain, weather and sky, read aloud in my own voice.

  • three.js
  • WebGL
  • React
  • TypeScript
  • Sound design
  • Narration
  • SEO
A journal entry from luckywanderwyatt.com: its words over the 3D trail, mountains and sky behind themVisit luckywanderwyatt.com (opens in a new tab)
journal entries
114
miles walked
1,353
photographs
413
read aloud
5.6 h
Built
2026, from a blog kept in 2012–13
Role
Concept, design and direction; engineered with Claude Code
Stack
React, three.js, TypeScript, Vite, Cloudflare Pages
Voice and sound
ElevenLabs, from my own voice

Overview

In 2012 I set out from Springer Mountain, Georgia, to walk the Appalachian Trail, and wrote about it as I went, from shelters, hostels and the occasional town library. A year later I went back and walked on to Bear Mountain, New York. The blog ended at 114 entries: about 60,000 words, 413 photos and 30 video clips.

Rebuilding it, I wanted the reading to feel like the walking. On luckywanderwyatt.com, scrolling is the walk: the page moves along the real trail, mile by mile and hour by hour, and each entry is written over the place and the day it describes.

A journal you walk through

Every entry sits at the mile it was written at. As you read down an entry the day passes: the sun crosses the sky, evening comes on near its end, and the night falls before the next one. The ground is the real ground, built from USGS and Canadian elevation data under satellite imagery from Copernicus Sentinel-2, and trees stand wherever that imagery shows forest, in its colours, bare above the spring’s leaf-out line.

The weather is the real weather too. NOAA’s hourly station records drive the clouds, the wind, the fog and the rain on each day of the walk; rain falls on the wind and hazes the distance, lightning is drawn as real geometry, and lakes mirror the sky and the hills around them.

The 3D trail from luckywanderwyatt.com with the journal text put away: ridgelines under a clouded sky
With the words put away: the same day, as I walked it.

In my own voice

Every entry is read aloud, 5.6 hours in all, in a voice made with ElevenLabs from my own. Press Listen and the page walks at the pace of the reading, puts the text away, and brings up each photo beside the path as the words reach it. It carries on with the screen off, entry after entry, with the lock screen’s controls, and picks up where you stopped.

Underneath is the sound of the place, worked out from the same state as the picture: wind and rain at the day’s strength, birds, crickets in late summer, tree frogs on spring nights, traffic from the actual roads nearby, thunder arriving after each strike at the speed of sound, and footsteps on earth, mud or snow.

Night at the last camp, Bear Mountain, New York: stars over the hills and town lights along the Hudson, in the luckywanderwyatt.com 3D scene
The last night, at Bear Mountain: the stars of that date, and the towns’ lights along the Hudson.

Fast on a phone

A world this size has to arrive quickly on a phone. The opening asks only for the data its first view reaches, about 5 MB, and fetches the rest nearest first once you are in. Every shader is compiled behind the loader, so nothing stutters after it, and the frame rate settles when nothing on screen is moving. The loading hiker is baked from the scene itself, so the hand-over to the 3D hiker can’t be seen.

The rest of the site is ordinary, quick HTML: its content pages score 99 to 100 for performance in Lighthouse on mobile.

The trail map in luckywanderwyatt.com: the route from Georgia to New York with each night’s camp marked
The map: every camp from Georgia to New York, each one a way into its entry.

Readable by anyone, and anything

Search engines and AI crawlers don’t run a 3D scene, so each entry is also its own page of plain HTML: its words, photos and facts, with structured data giving its date, place and coordinates. There is an RSS feed, a sitemap with every photo, and llms.txt. Without WebGL the journal opens as text, and it works by keyboard and screen reader throughout.

It is held to that by 31 browser checks: shaders that compile in time, layout that doesn’t shift, a Content-Security-Policy with no violations, pages that hydrate cleanly. A nightly run opens the live site as a reader would.

The luckywanderwyatt.com home page: “Georgia to the Hudson, one day at a time” beside a photo of McAfee Knob
The home page, plain HTML like every page but the journal’s: McAfee Knob, day 65.

Outcome

What was a run of blog posts is now the walk itself, mile by mile, in the weather of the day, in my own voice. It’s the clearest thing I’ve made of what I care about most: the craft you notice only as a feeling, the detail under the surface that makes something feel real.

Visit luckywanderwyatt.com (opens in a new tab)

Like what you see?