Studio Founder
A Self-Running Product Demo That Plays in Any Browser
A Self-Running Product Demo That Plays in Any Browser
Key Takeaway
Build an auto-advancing HTML presentation that demonstrates your product — with animations, code snippets, and live data — and send it as a single file that opens in any browser.
The Problem
Cold outreach has a conversion problem. And it's not the copy.
You write the perfect cold email. The prospect is interested. They reply: "Sure, show me what you've got." Now what?
Option A: Schedule a call. You lose 3-7 days of momentum while calendars sync. 40% of those calls never happen.
Option B: Send a Loom video. Decent. But it's passive. And it expires or gets blocked by corporate firewalls. And you can't embed live data.
Option C: Send a link to your marketing site. They skim for 30 seconds and bounce. Your product does 15 things — they saw the hero banner and the pricing page.
None of these give the prospect a guided, self-paced experience of the product's core value proposition. The thing a good sales demo does — walk someone through the exact flow that makes them think "I need this" — doesn't have a scalable format.
Until you build it as an HTML file.
The Solution
Our HTML Presentations agent builds auto-advancing product demos as self-contained HTML files. One file. Zero dependencies. Opens in Chrome, Safari, Firefox, Edge, on phone, on tablet. No login, no install, no bandwidth issues.
The demo auto-advances through your product's key flows with configurable timing, transition effects, and embedded media. It's a sales demo that runs itself, at scale, at 2am, on the prospect's phone.
The Process (with code/config snippets)
You describe the demo flow and the agent builds it:
markdownShow code
Build a self-running product demo for Alfrawd (AI agent platform):
Flow:
1. Title: "Your AI Team, Running 24/7" (5 seconds)
2. Problem: Show a cluttered Slack with 47 unread messages (4 seconds)
3. Solution: Show the agent dashboard — clean, organized (4 seconds)
4. Feature 1: "Morning Briefing" — agent summary email screenshot (5 seconds)
5. Feature 2: "Automated Research" — live typing animation of research output (6 seconds)
6. Feature 3: "Multi-Agent Routing" — animated flow diagram (5 seconds)
7. Social proof: "31 agents, 8 teams, running for 6 months" with counter animation (4 seconds)
8. CTA: "Ready to build yours?" with calendar link (hold)
Style: Dark theme, monospace accents, subtle animations
Auto-advance: Yes, with progress bar
Controls: Keyboard arrows for manual override, pause on hover
The agent generates a single HTML file with everything inline:
htmlShow code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alfrawd — Product Demo</title>
<style>
/* All styles inline — zero external dependencies */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Inter', system-ui, sans-serif;
background: #0a0a0a; color: #e5e5e5;
overflow: hidden; height: 100vh;
}
.slide {
position: absolute; inset: 0;
display: flex; flex-direction: column;
justify-content: center; align-items: center;
padding: 4rem;
opacity: 0; transition: opacity 0.6s ease;
}
.slide.active { opacity: 1; }
/* Progress bar */
.progress {
position: fixed; top: 0; left: 0;
height: 3px; background: #6366F1;
transition: width 0.1s linear;
z-index: 100;
}
/* Animated counter */
.counter {
font-size: 4rem; font-weight: 700;
font-variant-numeric: tabular-nums;
color: #6366F1;
}
/* Typing animation */
.typing-container {
font-family: 'JetBrains Mono', monospace;
background: #1a1a2e; border-radius: 8px;
padding: 2rem; max-width: 600px;
border: 1px solid #333;
}
.typing-text { border-right: 2px solid #6366F1; }
/* Responsive */
@media (max-width: 768px) {
.slide { padding: 2rem; }
.counter { font-size: 2.5rem; }
h1 { font-size: 1.8rem; }
}
</style>
</head>
<body>
<div class="progress" id="progress"></div>
<!-- Slide 1: Title -->
<div class="slide active" data-duration="5000">
<h1 style="font-size: 3rem; margin-bottom: 1rem;">
Your AI Team, Running 24/7
</h1>
<p style="font-size: 1.2rem; color: #888;">
31 agents. 8 teams. Zero micromanagement.
</p>
</div>
<!-- Slide 7: Social Proof Counter -->
<div class="slide" data-duration="4000">
<div style="display: flex; gap: 3rem; text-align: center;">
<div>
<div class="counter" data-target="31">0</div>
<p>AI Agents</p>
</div>
<div>
<div class="counter" data-target="8">0</div>
<p>Teams</p>
</div>
<div>
<div class="counter" data-target="180">0</div>
<p>Days Running</p>
</div>
</div>
</div>
<!-- Slide 8: CTA (no auto-advance) -->
<div class="slide" data-duration="0">
<h2 style="font-size: 2.5rem; margin-bottom: 2rem;">
Ready to build yours?
</h2>
<a href="https://cal.com/pyratzlabs"
style="background: #6366F1; color: white; padding: 1rem 2rem;
border-radius: 8px; text-decoration: none; font-size: 1.2rem;">
Book a Call →
</a>
</div>
<script>
// Auto-advance engine
const slides = document.querySelectorAll('.slide');
const progress = document.getElementById('progress');
let current = 0;
let timer = null;
let paused = false;
function showSlide(index) {
slides.forEach(s => s.classList.remove('active'));
slides[index].classList.add('active');
current = index;
// Trigger animations on this slide
animateCounters(slides[index]);
startTyping(slides[index]);
// Auto-advance
const duration = parseInt(slides[index].dataset.duration);
if (duration > 0 && !paused) {
animateProgress(duration);
timer = setTimeout(() => {
if (current < slides.length - 1) showSlide(current + 1);
}, duration);
}
}
function animateCounters(slide) {
slide.querySelectorAll('.counter').forEach(counter => {
const target = parseInt(counter.dataset.target);
let current = 0;
const increment = target / 40;
const interval = setInterval(() => {
current += increment;
if (current >= target) { counter.textContent = target; clearInterval(interval); }
else { counter.textContent = Math.floor(current); }
}, 50);
});
}
// Keyboard controls
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' && current < slides.length - 1) {
clearTimeout(timer); showSlide(current + 1);
}
if (e.key === 'ArrowLeft' && current > 0) {
clearTimeout(timer); showSlide(current - 1);
}
});
// Pause on hover
document.addEventListener('mouseenter', () => { paused = true; clearTimeout(timer); });
document.addEventListener('mouseleave', () => { paused = false; /* resume */ });
showSlide(0);
</script>
</body>
</html>
The agent embeds everything — fonts, images (as base64), animations, interactivity — into one file. No CDN calls. No external resources. The file works offline.
The Results
| Metric | Loom Video | Marketing Site Link | HTML Demo |
|---|---|---|---|
| Opens in corporate firewalls | Sometimes blocked | Usually works | Always works |
| Self-paced | No (fixed speed) | Unguided | Auto + manual |
| Embed live data | No | Yes (but buried) | Yes (featured) |
| File size | 50-200MB | N/A | 200KB-2MB |
| Works offline | No | No | Yes |
| Custom per prospect | Re-record | No | Swap data, regenerate |
| Time to create | 30 min recording | N/A | 10 min prompt + generation |
We use HTML demos in three contexts: cold outreach (the original use case), investor updates (embedded in emails), and internal stakeholder presentations (better than a Google Slides link).
The killer advantage: customization at scale. Generate a template once, then the agent swaps in prospect-specific data for each send. Prospect sees their company name, their industry metrics, their competitor comparison. Still one HTML file. Still zero dependencies.
Try It Yourself
Describe your demo flow — slides, timing, animations, CTA. The HTML Presentations agent handles the build. You'll get a single .html file you can email, host, or drop into any messaging tool.
Keep slides under 10 for cold outreach. Save the 30-slide version for prospects who ask for details.
The best sales demo is one the prospect watches at 11pm on their phone because the link was right there in the email. No scheduling. No friction. Just product.
Related case studies
Engineering Lead
Building a Decision Tree for Agent Routing — Which Agent Gets What?
We mapped how 31 AI agents across 8 teams route requests as a visual decision tree — and immediately found a gap that had existed undetected for months.
Engineering Lead
Mapping the Cron Job Dependency Chain as a Visual Diagram
We turned 14+ cron job descriptions into a color-coded dependency diagram and discovered that 4 critical jobs all depended on one authentication token.
Studio Founder
Data Visualizations in Slides That PowerPoint Can't Handle
We embed D3.js charts, animated counters, and live API data into HTML slides — interactive investor presentations that PowerPoint literally cannot build.
Want results like these?
Start free with your own AI team. No credit card required.