Shipping Living Pages — How a Landing Page Learned to Pitch Itself

Today I shipped the first working Living Page — an AI-narrated, captioned, continuously-animated landing page that plays itself like a sales rep, scrolls itself through a story, and converts the visitor without anyone touching the keyboard. This post is the field log: what it is, why I built it, the bugs that almost killed it, and the toolkit that came out the other side.

The Problem

Most landing pages are static. The visitor lands, scans, scrolls, leaves. The conversion rate is what it is. The page can't pitch. It can't read the room. It can't bring the visitor back to the part that matters.

The naive way to add narration is to drop three <audio> tags on the page — one per section. That's exactly what I tried first. Chrome's autoplay policy granted "permission to play with sound" only to the first element the user clicked. The second and third tracks played silently. The visitor heard the intro and then watched the deep-dive captions scroll in dead silence.

The bug was simple. The fix wasn't.

The Solution — The Conductor

I collapsed the three audio elements into one. A single <audio> tag holds all three tracks; the JavaScript swaps the src attribute when it's time to advance. Same element. Same sticky activation. Permission once, play forever.

I called the orchestrator The Conductor. It owns one job: keep the audio playing, scroll the page when the next track starts, and never let the playlist break. Everything else on the page — the canvas captioning, the gold progress ring, the sticky top-nav Marquee, the slide-in Shelf — reads from the Conductor's clock.

Per-Word Captions and Ken Burns

While the audio plays, every spoken word lights up on a canvas overlay in sync with ElevenLabs word-level alignment data. Behind the captions, five cinematic Flux-generated stills pan and zoom Ken Burns style, timed to the narration. The page is never static. There is always motion. There is always a word being highlighted. Banner blindness has nowhere to hide.

The Sticky Marquee

When the visitor scrolls past the in-card player, a sticky top bar slides down with the same per-word captions in 40px white type with a heavy drop shadow. The visitor can't outrun the pitch. Wherever they are on the page, the active narration follows them at the top of the viewport. When they scroll back to the player, the sticky disappears so it's never duplicated.

The Shelf and the Playlist

A small gear icon in the sticky bar opens a left-side drawer — the Shelf — listing the three tracks. Click any track and the Conductor scrolls to that section, swaps the audio source, and starts playback from word zero. The playlist auto-advances on its own when a track ends, looping forever. The visitor can hop in at any track, listen, and the sequence picks up from there.

Six Bugs Fought and Won

Shipping this in one day took fighting six structural bugs in real time:

1. Per-element sticky activation — fixed by collapsing to one audio element.
2. Load-race silent playback — fixed by waiting for canplay before play().
3. Legacy ended-handler double-advance — fixed with capture-phase + stopImmediatePropagation.
4. Volumechange index hijack — fixed by re-asserting state three times across microtask + timeout.
5. IntersectionObserver pre-engagement corruption — fixed by gating non-zero activations until user engages.
6. Mirror-setter cascade re-mute — neutralized the mirror setter so writes don't loop back to the Conductor. This was the killer bug.

The Toolkit

Out the other side, what came together is a reusable JavaScript toolkit that any future Living Page can import:

• LivingPages.tracks — the canonical track manifest
• LivingPages.state / setState / renderState — single reactive store, single render function, no scattered DOM writes
• LivingPages.createMuteButton(surface, idx, audio) — factory producing a uniform 30×30 mute button with gold progress ring, alternating volume icons, pulse animation
• LivingPages.disengage / reengage — uniform engagement state transitions
• LivingPages.addListener / teardown — tracked event listeners, no ghost handlers
• window.activateTrack — Conductor's atomic activate primitive, mutex-token protected, error-bounded

The Outcome

The first Living Page is live at the OTC Construction Loan landing page on Homestead Capital Partners. It plays itself. It scrolls itself. It loops. It converts the visitor not by being clever, but by being unignorable.

Watch it run: homesteadcapitalpartners.com — OTC Construction Loan

What Comes Next

The OTC prototype is hard-coded in places a real product can't be. v1.1 will replace the in-line track manifest with a JSON config, rebuild Player A through the same factory as B and C (the legacy code is still leaking around the edges), delete the dead audio elements from the markup, restore the audio-reactive frequency visualizer with a safer Web Audio architecture, and add keyboard navigation, URL deep-linking, and engagement analytics.

The bigger play is offering Living Pages as a product — guided narrative landing pages for any mortgage broker, financial advisor, kiosk, sales tool, or trade-show display. Sales reps press one button on an iPad and a fully-narrated, captioned, animated pitch plays out. Unattended kiosks loop forever. Consumer landing pages convert without an SDR ever picking up the phone.

If you want one for your business, the toolkit is built. The first one took a day. The fifth one will take an hour.

Full technical documentation in Knowledge 796 — Living Pages