Files
lukeandClaude Opus 5 821b78aa74 Give episode pages margins and centre the player bar
The player, transcript and nav sections had no width constraint at all, so
they ran edge to edge while .page-header above them sat in the site's usual
900px centred container.

- Transcript now sits in a 680px centred column at 1.05rem/1.7, which holds
  the measure near 75 characters per line; 900px runs past 90, which is tiring
  over a full transcript. Gutters are 1.5rem, tightening to 1.15rem under 600px
- Player bar is centred at max-width 640px instead of stretching the column,
  and goes full width on phones
- Bumped the stylesheet cache-buster to v=8 and regenerated all 58 episode
  pages so existing transcripts pick the styles up

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-15 17:05:25 -05:00

681 lines
46 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How It Works — Luke at the Roost</title>
<meta name="description" content="How Luke at the Roost works: AI-generated callers with structured personalities, real Big Bend geography, a live research intern, voice-personality matching, multi-stem recording, and automated post-production.">
<meta name="theme-color" content="#1a1209">
<link rel="canonical" href="https://lukeattheroost.com/how-it-works">
<meta property="og:site_name" content="Luke at the Roost">
<meta property="og:title" content="How It Works — Luke at the Roost">
<meta property="og:description" content="The tech behind a one-of-a-kind AI radio show: real-time caller generation, multi-stem recording, automated post-production, and global CDN distribution — all custom-built.">
<meta property="og:image" content="https://cdn.lukeattheroost.com/media/podcasts/LukeAtTheRoost/cover_feed.png?v=3">
<meta property="og:url" content="https://lukeattheroost.com/how-it-works">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="How It Works — Luke at the Roost">
<meta name="twitter:description" content="The tech behind a one-of-a-kind AI radio show: real-time caller generation, multi-stem recording, automated post-production, and global CDN distribution.">
<meta name="twitter:image" content="https://cdn.lukeattheroost.com/media/podcasts/LukeAtTheRoost/cover_feed.png?v=3">
<link rel="icon" href="favicon.ico" sizes="48x48">
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192.png">
<link rel="icon" type="image/png" sizes="48x48" href="favicon-48.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16.png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="alternate" type="application/rss+xml" title="Luke at the Roost RSS Feed" href="https://podcast.macneilmediagroup.com/@LukeAtTheRoost/feed.xml">
<link rel="stylesheet" href="css/style.css?v=8">
<!-- Structured Data -->
<script type="application/ld+json">
[{
"@context": "https://schema.org",
"@type": "TechArticle",
"headline": "How Luke at the Roost Works",
"description": "How Luke at the Roost works: AI-generated callers with unique personalities, real phone calls, voice synthesis, multi-stem recording, and automated post-production.",
"url": "https://lukeattheroost.com/how-it-works",
"image": "https://cdn.lukeattheroost.com/media/podcasts/LukeAtTheRoost/cover_feed.png?v=3",
"author": {
"@type": "Person",
"name": "Luke MacNeil"
},
"publisher": {
"@type": "Organization",
"name": "MacNeil Media Group"
},
"about": {
"@type": "PodcastSeries",
"name": "Luke at the Roost",
"url": "https://lukeattheroost.com"
},
"inLanguage": "en"
},
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://lukeattheroost.com" },
{ "@type": "ListItem", "position": 2, "name": "How It Works" }
]
}]
</script>
<script defer data-domain="lukeattheroost.com" data-api="/p/event" src="/p/script"></script>
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
<nav class="site-nav">
<a href="/" class="site-nav-brand">Luke at the Roost</a>
<div class="site-nav-links">
<a href="/how-it-works" aria-current="page">How It Works</a>
<a href="/clips">Clips</a>
<a href="/stats">Stats</a>
</div>
</nav>
<main id="main-content">
<!-- Page Header -->
<section class="page-header">
<h1>How It Works</h1>
<p class="page-subtitle">Every caller on the show is a one-of-a-kind character — generated in real time by a custom-built AI system. Here's a peek behind the curtain.</p>
</section>
<!-- Steps -->
<section class="hiw-section">
<h2>The Anatomy of an AI Caller</h2>
<div class="hiw-steps">
<div class="hiw-step">
<div class="hiw-step-number">1</div>
<div class="hiw-step-content">
<h3>A Person Is Born</h3>
<p>Every caller starts as a blank slate. At the top of each show the system writes a full roster of ten callers in a single pass — each with a name, age, hometown, and identity, plus the situation they're in, the reason they're calling tonight, and the first line out of their mouth. Each one also carries a secret want they never state outright, two or three specific details that could only belong to them, and an emotional register that sets how they hold themselves on the air.</p>
<p>The roster is built for contrast. A hard anti-collision rule keeps any two callers from sharing an obsession, a profession archetype, or a story theme — no two taxidermists, no two callers with ex-spouse drama, no two people chasing the same phenomenon. Each caller's hook appears exactly once in a roster, and the system rescans its own output to swap out anything that doubles up. Each caller is then matched to a voice that fits: a 60-year-old rancher outside Marathon doesn't sound like a 29-year-old grad student in Alpine.</p>
<p>Some callers become regulars. After a strong call, a first-timer can be promoted into a recurring character with their own file — a frozen set of canonical traits plus a running arc log that gets appended every time they call back. They remember past conversations, reference what they talked about before, and their stories move forward between episodes. Silas has spent his arc dragging The Wellspring out of New Mexico to a stretch of desert outside Terlingua, and the move is fracturing the community. Crispin, an MFA student at Sul Ross, is still living down the story he published about his ex. They're not reset between shows.</p>
<p>And some callers are drunk, high, or flat-out unhinged. They'll call with conspiracy theories about pigeons being government drones, existential crises about whether fish know they're wet, or to confess they accidentally set their kitchen on fire trying to make grilled cheese at 3 AM.</p>
<div class="hiw-detail-grid">
<div class="hiw-detail">
<span class="hiw-detail-label">Callers Per Show</span>
<span class="hiw-detail-value">10</span>
</div>
<div class="hiw-detail">
<span class="hiw-detail-label">Voice Roster</span>
<span class="hiw-detail-value">82 voices</span>
</div>
<div class="hiw-detail">
<span class="hiw-detail-label">Identity Fields</span>
<span class="hiw-detail-value">11 per caller</span>
</div>
<div class="hiw-detail">
<span class="hiw-detail-label">Named Regulars</span>
<span class="hiw-detail-value">2 callers</span>
</div>
</div>
</div>
</div>
<div class="hiw-step">
<div class="hiw-step-number">2</div>
<div class="hiw-step-content">
<h3>They Know Their World</h3>
<p>Callers know real facts about where they live. The show broadcasts from Alpine, Texas, and the system carries accurate geographic knowledge of the Big Bend country of far West Texas — Alpine and Sul Ross State University, the Marfa Lights and the Chinati Foundation, the Gage Hotel in Marathon, the Terlingua ghost town and its chili cookoff, oilfield work up in Fort Stockton, and the Chisos Mountains and dark skies of Big Bend itself. Callers are held to real places only — they don't invent businesses or landmarks that aren't there. They know the current weather outside their window, what day of the week it is, how many hours it takes to drive anywhere out here, and what it's like living up against the border. They have strong opinions about their town and get nostalgic about how it used to be. The system also pulls in real-time news so callers can reference things that actually happened today.</p>
</div>
</div>
<div class="hiw-step">
<div class="hiw-step-number">3</div>
<div class="hiw-step-content">
<h3>They Have a Reason to Call</h3>
<p>Some callers have a problem — a fight with a neighbor, a situation at work, something weighing on them at 2 AM. Others call to share a strange-but-true story, geek out about an obsession, or lay out a pattern only they can see. Nothing is drawn from a list: every caller's reason for calling is written fresh for that caller, tied to why they picked up the phone tonight specifically. Every caller has a purpose, not just a script.</p>
<p>The whole thing is tuned for comedy. Not "AI tries to be funny" comedy — more like the energy of late-night call-in radio meets stand-up meets the kind of confessions you only hear at 2 AM. Some calls are genuinely heartfelt. Some are absurd. Some start serious and go completely sideways. The system knows how to build a call for comedic timing — when to hold back a detail, when to escalate, when to let the awkward silence do the work. It's not random chaos; it's structured chaos.</p>
<div class="hiw-split-stat">
<div class="hiw-stat">
<span class="hiw-stat-number">45</span>
<span class="hiw-stat-label">Dilemma calls</span>
</div>
<div class="hiw-stat">
<span class="hiw-stat-number">23</span>
<span class="hiw-stat-label">Stories &amp; enthusiasts</span>
</div>
<div class="hiw-stat">
<span class="hiw-stat-number">12</span>
<span class="hiw-stat-label">True believers &amp; chaos</span>
</div>
</div>
</div>
</div>
<div class="hiw-step">
<div class="hiw-step-number">4</div>
<div class="hiw-step-content">
<h3>The Conversation Is Real</h3>
<p>Luke talks to each caller using push-to-talk, just like a real radio show. His voice is transcribed in real time, sent to an AI that responds in character, and then converted to speech using a voice engine — all in a few seconds. The AI doesn't just answer questions; it reacts, gets emotional, goes on tangents, and remembers what was said earlier in the show.</p>
<p>Callers don't just exist in isolation — the show tracks what's been discussed and matches callers thematically. If someone just called about a messy divorce, the next caller who references marriage didn't pick that topic randomly. The system scores every previous caller against the current one for topic overlap and decides whether the new caller should reference them, disagree with them, or build on what they said. The strength of the match sets how likely that reaction is: a strong thematic hit fires most of the time, a weak one only occasionally, so callbacks land when they're earned instead of on every single call.</p>
<p>And when a call has run its course, Luke can hit "Wrap It Up" — a signal that tells the caller to wind things down gracefully. Instead of an abrupt hang-up, the caller gets the hint and starts wrapping up their thought, says their goodbyes, and exits naturally. Just like a real radio host giving the "time's up" hand signal through the glass.</p>
</div>
</div>
<div class="hiw-step">
<div class="hiw-step-number">5</div>
<div class="hiw-step-content">
<h3>Real Callers Call In Too</h3>
<p>When you dial 208-439-LUKE, your call goes into a live queue. Luke sees you waiting and can take your call right from the control room. Your voice streams in real time — no pre-recording, no delay. You're live on the show, talking to Luke, and the AI callers might even react to what you said. And if Luke isn't live, you can leave a voicemail — it gets transcribed and may get played on a future episode.</p>
</div>
</div>
<div class="hiw-step">
<div class="hiw-step-number">6</div>
<div class="hiw-step-content">
<h3>Listener Emails</h3>
<p>Listeners can send emails to <a href="mailto:submissions@lukeattheroost.com" style="color:var(--accent)">submissions@lukeattheroost.com</a> and have them read on the show. A background poller checks for new messages every 30 seconds — they show up in the control room as soon as they arrive. Luke can read them himself on the mic, or hit a button to have an AI voice read them aloud on the caller channel. It's like a call-in show meets a letters segment — listeners who can't call in can still be part of the conversation.</p>
</div>
</div>
<div class="hiw-step">
<div class="hiw-step-number">7</div>
<div class="hiw-step-content">
<h3>Devon the Intern</h3>
<p>Every show needs someone to yell at. Devon is the show's intern — a 23-year-old NMSU grad who's way too eager, occasionally useful, and frequently wrong. He's not a caller; he's a permanent fixture of the show. When Luke needs a fact checked, a topic researched, or someone to blame for a technical issue, Devon's there.</p>
<p>Devon has real tools. He can search the web, pull up news headlines, look things up on Wikipedia, and read articles — all live during the show. When a caller claims that octopuses have three hearts, Devon's already looking it up. Sometimes he interjects on his own when he thinks he has something useful to add. Sometimes he's right. Sometimes Luke tells him to shut up. He monitors conversations in the background and pipes up with suggestions that the host can play or dismiss. He's the kind of intern who tries really hard and occasionally nails it.</p>
</div>
</div>
<div class="hiw-step">
<div class="hiw-step-number">8</div>
<div class="hiw-step-content">
<h3>The Control Room</h3>
<p>The entire show runs through a custom-built control panel. Luke manages callers, plays music and sound effects, runs ads and station idents, monitors the call queue, and controls everything from one screen. Audio is routed across eight independent channels simultaneously — host mic, AI caller voices, Devon, live phone audio, music, sound effects, ads, and station idents all on separate tracks. The website shows a live on-air indicator so listeners know when to call in.</p>
<div class="hiw-detail-grid">
<div class="hiw-detail">
<span class="hiw-detail-label">Audio Channels</span>
<span class="hiw-detail-value">8 independent</span>
</div>
<div class="hiw-detail">
<span class="hiw-detail-label">Caller Slots</span>
<span class="hiw-detail-value">10 per session</span>
</div>
<div class="hiw-detail">
<span class="hiw-detail-label">Phone System</span>
<span class="hiw-detail-value">VoIP + WebSocket</span>
</div>
<div class="hiw-detail">
<span class="hiw-detail-label">Live Status</span>
<span class="hiw-detail-value">Real-time CDN</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Overview -->
<section class="hiw-section">
<div class="hiw-card hiw-hero-card">
<div class="hiw-diagram">
<!-- Row 1: Inputs -->
<div class="diagram-label">Live Show</div>
<div class="diagram-row diagram-row-split">
<div class="diagram-box diagram-accent">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
</div>
<span>Luke (Host)</span>
</div>
<div class="diagram-box diagram-accent">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<span>AI Callers</span>
</div>
<div class="diagram-box diagram-accent">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
</div>
<span>Real Callers</span>
</div>
<div class="diagram-box diagram-accent">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="16" rx="2"/><path d="M2 6l10 7 10-7"/></svg>
</div>
<span>Voicemails</span>
</div>
<div class="diagram-box diagram-accent">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
</div>
<span>Listener Emails</span>
</div>
</div>
<div class="diagram-arrow">&#8595;</div>
<!-- Row 2: Control Room -->
<div class="diagram-row">
<div class="diagram-box">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
</div>
<span>Control Room</span>
</div>
</div>
<div class="diagram-arrow">&#8595;</div>
<!-- Row 3: Engine Layer -->
<div class="diagram-row diagram-row-split">
<div class="diagram-box">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
</div>
<span>LLM Dialog</span>
</div>
<div class="diagram-box">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/></svg>
</div>
<span>Voice Synthesis</span>
</div>
<div class="diagram-box">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
</div>
<span>Live Data</span>
</div>
<div class="diagram-box">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
</div>
<span>Audio Router</span>
</div>
<div class="diagram-box">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
</div>
<span>Phone System</span>
</div>
<div class="diagram-box">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
</div>
<span>Ad Engine</span>
</div>
</div>
<!-- Row 4: Recording -->
<div class="diagram-row">
<div class="diagram-box">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3" fill="currentColor"/></svg>
</div>
<span>Multi-Stem Recorder</span>
</div>
</div>
<div class="diagram-arrow">&#8595;</div>
<!-- Row 5: Post-Production -->
<div class="diagram-label">Post-Production</div>
<div class="diagram-row diagram-row-split">
<div class="diagram-box">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
</div>
<span>Compression &amp; Ducking</span>
</div>
<div class="diagram-box">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
</div>
<span>Loudness Normalization</span>
</div>
<div class="diagram-box">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
</div>
<span>Transcription</span>
</div>
</div>
<div class="diagram-arrow">&#8595;</div>
<!-- Row 6: Publishing -->
<div class="diagram-label">Publishing</div>
<div class="diagram-row diagram-row-split">
<div class="diagram-box">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg>
</div>
<span>Podcast Server</span>
</div>
<div class="diagram-box">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
</div>
<span>CDN Edge Network</span>
</div>
<div class="diagram-box">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
</div>
<span>Website</span>
</div>
<div class="diagram-box">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="11" rx="2"/><path d="M7 21h10"/><path d="M12 14v7"/><polygon points="10 8 16 11 10 14 10 8"/></svg>
</div>
<span>Social Clips</span>
</div>
<div class="diagram-box">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
</div>
<span>Monitoring</span>
</div>
</div>
<div class="diagram-arrow">&#8595;</div>
<!-- Row 7: Distribution -->
<div class="diagram-label">Distribution</div>
<div class="diagram-row-compact">
<div class="diagram-box diagram-accent">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg>
</div>
<span>Spotify</span>
</div>
<div class="diagram-box diagram-accent">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M5.34 0A5.328 5.328 0 0 0 0 5.34v13.32A5.328 5.328 0 0 0 5.34 24h13.32A5.328 5.328 0 0 0 24 18.66V5.34A5.328 5.328 0 0 0 18.66 0z"/></svg>
</div>
<span>Apple</span>
</div>
<div class="diagram-box diagram-accent">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814z"/><path d="M9.545 15.568V8.432L15.818 12z" fill="#fff"/></svg>
</div>
<span>YouTube</span>
</div>
<div class="diagram-box diagram-accent">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6.503 20.752c0 1.794-1.456 3.248-3.251 3.248S0 22.546 0 20.752s1.456-3.248 3.252-3.248 3.251 1.454 3.251 3.248z"/><path d="M.002 9.473v4.594c5.508.163 9.929 4.584 10.092 10.091h4.594"/><path d="M.006 0v4.604C10.81 4.77 19.23 13.19 19.396 24h4.604"/></svg>
</div>
<span>RSS</span>
</div>
<div class="diagram-box diagram-accent">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm3.1 14.5c-1.7 1-3.8.6-4.8-1.1-1-1.7-.6-3.8 1.1-4.8 1.7-1 3.8-.6 4.8 1.1 1 1.7.5 3.8-1.1 4.8z"/></svg>
</div>
<span>Instagram</span>
</div>
<div class="diagram-box diagram-accent">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
</div>
<span>Facebook</span>
</div>
<div class="diagram-box diagram-accent">
<div class="diagram-icon">
<svg viewBox="0 0 568 501" fill="currentColor"><path d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C10.945 203.659 1 75.291 1 57.946 1-28.906 76.134-1.612 123.121 33.664z"/></svg>
</div>
<span>Bluesky</span>
</div>
<div class="diagram-box diagram-accent">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054 19.648 19.648 0 0 0 4.636.528c.164 0 .329 0 .494-.002 1.694-.042 3.48-.152 5.12-.554 2.21-.543 4.137-2.186 4.348-4.55.162-1.808.21-3.627.142-5.43-.02-.6-.168-1.874-.168-1.874z"/><path d="M19.903 7.515v5.834c0 1.226-.996 2.222-2.222 2.222h-.796c-1.226 0-2.222-.996-2.222-2.222V7.628c0-1.226.996-2.222 2.222-2.222h.796c.122 0 .242.01.36.03 1.076.164 1.862 1.098 1.862 2.192zM9.337 7.515v5.834c0 1.226-.996 2.222-2.222 2.222h-.796c-1.226 0-2.222-.996-2.222-2.222V7.628c0-1.226.996-2.222 2.222-2.222h.796c.122 0 .242.01.36.03 1.076.164 1.862 1.098 1.862 2.192z" fill="#fff"/></svg>
</div>
<span>Mastodon</span>
</div>
<div class="diagram-box diagram-accent">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.186.31a.27.27 0 0 0-.372 0C8.46 3.487 2.666 9.93 2.666 15.042c0 5.176 4.183 8.958 9.334 8.958s9.334-3.782 9.334-8.958c0-5.112-5.794-11.555-9.148-14.732z"/></svg>
</div>
<span>Nostr</span>
</div>
<div class="diagram-box diagram-accent">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</div>
<span>LinkedIn</span>
</div>
<div class="diagram-box diagram-accent">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.159 2c-5.543 0-9.94 4.486-9.94 9.94 0 2.16.72 4.148 1.897 5.852l-1.26 4.463 4.612-1.188A9.882 9.882 0 0 0 12.16 22c5.543 0 9.94-4.486 9.94-9.94 0-5.543-4.486-10.06-9.94-10.06z"/></svg>
</div>
<span>Threads</span>
</div>
<div class="diagram-box diagram-accent">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
</div>
<span>TikTok</span>
</div>
<div class="diagram-box diagram-accent">
<div class="diagram-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 20V10"/><path d="M12 20V4"/><path d="M6 20v-6"/></svg>
</div>
<span>Analytics</span>
</div>
</div>
</div>
</div>
</section>
<!-- Post-Production Pipeline -->
<section class="hiw-section">
<h2>From Live Show to Podcast</h2>
<div class="hiw-steps">
<div class="hiw-step">
<div class="hiw-step-number">9</div>
<div class="hiw-step-content">
<h3>Multi-Stem Recording</h3>
<p>During every show, the system records seven separate audio stems simultaneously: host microphone, AI caller voices, Devon, music, sound effects, ads, and station idents. Each stem is captured as an independent WAV file with sample-accurate alignment. This gives full control over the final mix — like having a recording studio's multitrack session, not just a flat recording.</p>
<div class="hiw-detail-grid">
<div class="hiw-detail">
<span class="hiw-detail-label">Stems Captured</span>
<span class="hiw-detail-value">7 parallel</span>
</div>
<div class="hiw-detail">
<span class="hiw-detail-label">Format</span>
<span class="hiw-detail-value">48kHz WAV</span>
</div>
<div class="hiw-detail">
<span class="hiw-detail-label">Sync Method</span>
<span class="hiw-detail-value">Time-aligned</span>
</div>
<div class="hiw-detail">
<span class="hiw-detail-label">Architecture</span>
<span class="hiw-detail-value">Lock-free I/O</span>
</div>
</div>
</div>
</div>
<div class="hiw-step">
<div class="hiw-step-number">10</div>
<div class="hiw-step-content">
<h3>Dialog Editing in REAPER</h3>
<p>Before the automated pipeline runs, the raw stems are loaded into REAPER for dialog editing. A custom Lua script analyzes voice tracks to detect silence gaps — the dead air between caller responses, TTS latency pauses, and gaps where Luke is reading the control room. The script strips these silences and ripple-edits all tracks in sync so ads, idents, and music shift with the dialog cuts. Protected regions marked as ads or idents are preserved — the script knows not to remove silence during an ad break even if the voice tracks are quiet. This tightens a raw two-hour session into a focused episode without cutting any content.</p>
</div>
</div>
<div class="hiw-step">
<div class="hiw-step-number">11</div>
<div class="hiw-step-content">
<h3>Post-Production Pipeline</h3>
<p>Once the show ends, a 15-step automated pipeline processes the raw stems into a broadcast-ready episode. Ads and sound effects are hard-limited to prevent clipping. The host mic gets a high-pass filter, de-essing, and breath reduction. Voice tracks are compressed — the host gets aggressive spoken-word compression for consistent levels, callers get telephone EQ to sound like real phone calls. All stems are level-matched, music is ducked under dialog and muted during ads, then everything is mixed to stereo with panning and width. A bus compressor glues the final mix together before silence trimming, fades, and EBU R128 loudness normalization.</p>
<div class="hiw-detail-grid">
<div class="hiw-detail">
<span class="hiw-detail-label">Pipeline Steps</span>
<span class="hiw-detail-value">15</span>
</div>
<div class="hiw-detail">
<span class="hiw-detail-label">Loudness Target</span>
<span class="hiw-detail-value">-16 LUFS</span>
</div>
<div class="hiw-detail">
<span class="hiw-detail-label">Loudness Range</span>
<span class="hiw-detail-value">~5.5 LU</span>
</div>
<div class="hiw-detail">
<span class="hiw-detail-label">Output</span>
<span class="hiw-detail-value">Stereo MP3</span>
</div>
</div>
</div>
</div>
<div class="hiw-step">
<div class="hiw-step-number">12</div>
<div class="hiw-step-content">
<h3>Automated Publishing</h3>
<p>A single command takes a finished episode and handles everything: the audio is transcribed using MLX Whisper running on Apple Silicon GPU to generate full-text transcripts, then an LLM analyzes the transcript to write the episode title, description, and chapter markers with timestamps. The episode is uploaded to the podcast server and directly to YouTube with chapters baked into the description. Chapters and transcripts are attached to the RSS metadata, all media is synced to a global CDN, and social posts are pushed to eight platforms — all from one command.</p>
<div class="hiw-detail-grid">
<div class="hiw-detail">
<span class="hiw-detail-label">Transcription</span>
<span class="hiw-detail-value">MLX Whisper (GPU)</span>
</div>
<div class="hiw-detail">
<span class="hiw-detail-label">Metadata</span>
<span class="hiw-detail-value">LLM-generated</span>
</div>
<div class="hiw-detail">
<span class="hiw-detail-label">Chapters</span>
<span class="hiw-detail-value">Auto-detected</span>
</div>
<div class="hiw-detail">
<span class="hiw-detail-label">Deploy Time</span>
<span class="hiw-detail-value">~2 min</span>
</div>
</div>
</div>
</div>
<div class="hiw-step">
<div class="hiw-step-number">13</div>
<div class="hiw-step-content">
<h3>Automated Social Clips</h3>
<p>No manual editing, no scheduling tools. After each episode, an LLM reads the full transcript and picks the best moments — funny exchanges, wild confessions, heated debates. Each clip is automatically extracted, transcribed with word-level timestamps, then polished by a second LLM pass that fixes punctuation, capitalization, and misheard words while preserving timing. The clips are rendered as vertical video with speaker-labeled captions and the show's branding. A third LLM writes platform-specific descriptions and hashtags. Then clips are uploaded directly to YouTube Shorts and Bluesky via their APIs, and pushed to Instagram Reels, Facebook Reels, Mastodon, Nostr, LinkedIn, Threads, and TikTok — nine platforms, zero manual work.</p>
<div class="hiw-detail-grid">
<div class="hiw-detail">
<span class="hiw-detail-label">Human Effort</span>
<span class="hiw-detail-value">Zero</span>
</div>
<div class="hiw-detail">
<span class="hiw-detail-label">Video Format</span>
<span class="hiw-detail-value">1080x1920 MP4</span>
</div>
<div class="hiw-detail">
<span class="hiw-detail-label">Captions</span>
<span class="hiw-detail-value">LLM-polished</span>
</div>
<div class="hiw-detail">
<span class="hiw-detail-label">Simultaneous Push</span>
<span class="hiw-detail-value">9 platforms</span>
</div>
</div>
</div>
</div>
<div class="hiw-step">
<div class="hiw-step-number">14</div>
<div class="hiw-step-content">
<h3>Global Distribution</h3>
<p>Episodes are served through a CDN edge network for fast, reliable playback worldwide. The RSS feed is automatically updated and picked up by Spotify, Apple Podcasts, YouTube, and every other podcast app. The website pulls the live feed to show episodes with embedded playback, full transcripts, and chapter navigation — all served through Cloudflare with edge caching. From recording to available on every platform, the whole pipeline is automated end-to-end.</p>
<div class="hiw-detail-grid">
<div class="hiw-detail">
<span class="hiw-detail-label">Audio Delivery</span>
<span class="hiw-detail-value">Global CDN</span>
</div>
<div class="hiw-detail">
<span class="hiw-detail-label">Website</span>
<span class="hiw-detail-value">Cloudflare Edge</span>
</div>
<div class="hiw-detail">
<span class="hiw-detail-label">Platforms</span>
<span class="hiw-detail-value">5+ directories</span>
</div>
<div class="hiw-detail">
<span class="hiw-detail-label">Feed Format</span>
<span class="hiw-detail-value">RSS + Podcast 2.0</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- What makes it different -->
<section class="hiw-section">
<h2>What Makes This Different</h2>
<div class="hiw-features">
<div class="hiw-feature">
<div class="hiw-feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
</div>
<h3>Not Scripted</h3>
<p>Every conversation is improvised. Luke doesn't know what the caller is going to say. The AI doesn't follow a script. It's a real conversation between a human and an AI character who has a life, opinions, and something on their mind.</p>
</div>
<div class="hiw-feature">
<div class="hiw-feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</div>
<h3>Built From Scratch</h3>
<p>This isn't an app with a plugin. Every piece — the caller generator, the voice engine, the control room, the phone system, the post-production pipeline, the publishing automation — was built specifically for this show.</p>
</div>
<div class="hiw-feature">
<div class="hiw-feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
</div>
<h3>Real Time</h3>
<p>Everything happens live. Caller generation, voice synthesis, news lookups, weather checks, phone routing — all in real time during the show. There's no post-production trickery on the caller side. What you hear is what happened.</p>
</div>
<div class="hiw-feature">
<div class="hiw-feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<h3>They Listen to Each Other</h3>
<p>Callers aren't isolated — the system matches callers thematically to what's already been discussed. A caller might disagree with the last guy, back someone up, or call in because something another caller said hit close to home. And the roster is deliberately mixed before the show even starts, so heavy calls, wild stories, and true believers are spread across the night instead of stacking up.</p>
</div>
<div class="hiw-feature">
<div class="hiw-feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
</div>
<h3>Broadcast-Grade Audio</h3>
<p>Every episode runs through a 15-step post-production pipeline: stem limiting, high-pass filtering, de-essing, breath reduction, spoken-word compression, telephone EQ, level matching, music ducking with ad muting, stereo imaging, bus compression, and EBU R128 loudness normalization.</p>
</div>
<div class="hiw-feature">
<div class="hiw-feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"/></svg>
</div>
<h3>Fully Automated Pipeline</h3>
<p>From recording to your podcast app, the entire pipeline is automated. Post-production kicks off when the show ends, then a publish script handles transcription, AI-generated metadata, chapter detection, CDN sync, and RSS distribution — all with a single command.</p>
</div>
</div>
</section>
<!-- Post-Production Automation Video -->
<section class="hiw-section">
<h2>Post-Production in Action</h2>
<div class="hiw-hero-card">
<video class="hiw-video" controls playsinline preload="metadata" poster="">
<source src="https://cdn.lukeattheroost.com/videos/reaper-postprod.mp4" type="video/mp4">
</video>
<p class="hiw-video-caption">The entire post-production pipeline runs automatically through Reaper scripting. Silence removal, ad ducking, and EBU R128 loudness normalization — all triggered with a single command when the show ends.</p>
</div>
</section>
<!-- CTA -->
<section class="hiw-section hiw-cta">
<p>Want to hear it for yourself?</p>
<a href="/" class="hiw-cta-btn">Listen to Episodes</a>
<div class="hiw-cta-phone">
Or call in live: <strong>208-439-LUKE</strong>
</div>
<a href="https://ko-fi.com/lukemacneil" target="_blank" rel="noopener" class="hiw-cta-support">Support the Show</a>
</section>
</main>
<footer class="footer"></footer>
<script src="js/footer.js"></script>
</body>
</html>