How to Automate Loom-style Product Demos with TypeScript

If you've ever recorded a product demo, you know the drill: record the screen, record your face, then spend an hour in a video editor trying to sync the two, add a nice circular border to your camera, and painstakingly type out captions. It's a workflow that works for one-offs, but it's a massive bottleneck for engineering teams shipping weekly features.

What if you could automate Loom-style product demos directly from your CI/CD pipeline or a simple script? With VideoFlow, you can turn raw screen recordings into polished, branded demos using nothing but TypeScript.

Why Automate Your Demos?

Manual video editing doesn't scale. When your product UI changes, your old demos become obsolete. By treating your demos as code, you can:

• Maintain Consistency: Every demo uses the same branding, padding, and effects.
• Scale Content: Generate personalized demos for every prospect or new user automatically.
• Version Control: Store your video "source code" in Git and diff changes over time.

The Anatomy of a Programmatic Demo

A professional demo typically consists of three layers: the screen recording, the "face-cam" overlay, and dynamic captions. Let's look at how to build this stack using the VideoFlow core builder API.

1. The Screen Recording

First, we add the main screen recording. We'll set it to cover the canvas and add a subtle blur transition when it starts.

import VideoFlow from '@videoflow/core';

const $ = new VideoFlow({ width: 1920, height: 1080, fps: 30 });

const screen = $.addVideo(
  { fit: 'cover' },
  {
    source: 'https://assets.videoflow.dev/samples/screen-record.mp4',
    transitionIn: { transition: 'blurResolve', duration: '800ms' }
  }
);

2. The Face-Cam Overlay

The "Loom look" is defined by that circular face-cam in the corner. In VideoFlow, we can achieve this by simply setting the borderRadius on a video layer and positioning it in normalized coordinates.

const camera = $.addVideo(
  {
    position: [0.1, 0.85], // Bottom-left corner
    scale: 0.2,
    borderRadius: '50%',   // The circular look
    filterBrightness: 1.1,
    boxShadowColor: 'rgba(0,0,0,0.5)',
    boxShadowBlur: 20,
  },
  { source: 'https://assets.videoflow.dev/samples/webcam.mp4' }
);

3. Dynamic Captions

Finally, we add captions to ensure the demo is accessible and engaging even without sound. We can use the $.addCaptions method, which accepts a WhisperX-style JSON array.

$.addCaptions(
  {
    fontSize: 4,
    fontWeight: 700,
    color: '#FF5A1F', // VideoFlow orange
    position: [0.5, 0.9],
    textAlign: 'center',
  },
  {
    captions: [
      { caption: 'Welcome to the new dashboard.', startTime: 0, endTime: 2.5 },
      { caption: 'You can now track metrics in real-time.', startTime: 2.6, endTime: 5.0 },
    ]
  }
);

$.wait('5s');

Rendering Anywhere

One of the most powerful features of VideoFlow is that the same code can render anywhere. You can use the DOM renderer for a 60 FPS live preview inside your internal tools, or use the server-side renderer in a Node.js environment to export an MP4 without even having FFmpeg installed.

Moving Beyond the Basics

Once you have the basic structure, you can start adding cinematic touches. Want to highlight a specific feature? Use $.group to bundle layers and animate them together, or add a glow effect to a shape layer to draw the user's eye to a button.

If you're already automating YouTube Shorts or vertical content, you'll find that the same logic applies here—VideoFlow's resolution-agnostic units (em) make it trivial to repurpose your demo logic for different aspect ratios.

Get Started

Ready to stop manual editing and start automating? Head over to the VideoFlow GitHub repository to explore the source, or try out your ideas instantly in the interactive Playground. For a deeper dive into the API, check out our comprehensive documentation.

Happy rendering!