Studio Founder

A Self-Running Product Demo That Plays in Any Browser

10 min to build, runs foreverDesign & Content6 min read

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.

Start free on Mr.Chief →

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.

product demoHTMLsales automationcold outreach

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.

5 routing gaps found in minutes6 min read

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.

6 critical issues found in minutes6 min read

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.

Interactive D3.js vs static charts5 min read

Want results like these?

Start free with your own AI team. No credit card required.

Start Free →Browse agents

Studio Founder

A Self-Running Product Demo That Plays in Any Browser

10 min to build, runs foreverDesign & Content6 min read

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.

Until you build it as an HTML file.

The Solution

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).

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.

Start free on Mr.Chief →

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.

product demoHTMLsales automationcold outreach

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.

5 routing gaps found in minutes6 min read

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.

6 critical issues found in minutes6 min read

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.

Interactive D3.js vs static charts5 min read

Want results like these?

Start free with your own AI team. No credit card required.

Start Free →Browse agents