Automated Short-Form Video Production: The Complete Technical Pipeline from HTML Templates to FFmpeg

Table of Contents

1. The Raw Efficiency of Short-Form Video
2. System Architecture Overview
3. Stage 1: HTML Animation Templates
4. Stage 2: Playwright Capture
5. Stage 3: FFmpeg Compositing
6. Three Psychological Trigger Templates
7. Fear Type
8. Efficiency Type
9. Greed Type
10. Batch Production Workflow
11. Cost Structure
12. Who Is This For?
13. Conclusion

#The Raw Efficiency of Short-Form Video

A 15-second video conveys far more information than a 200-word text block. On Instagram Reels, YouTube Shorts, and TikTok, short-form videos have the highest reach and engagement rates of any content format.

The problem: producing a short-form video is incredibly time-consuming.

Manually editing a 15-second video in Premiere Pro or CapCut, from concept to completion, takes at least 30-60 minutes. What if you need to post 3-5 per day?

Our solution: automate the production with code.

#System Architecture Overview

Ultra Lab's automated short-form video production system has three stages:

HTML Animation Templates -> Playwright Capture -> FFmpeg Compositing

#Stage 1: HTML Animation Templates

Use web technologies (HTML + CSS + JavaScript) to create every frame of the video animation.

Why HTML instead of After Effects?

• Programmable: Text, numbers, and colors can all be controlled with variables
• Templatized: One template can be used with hundreds of different content variations
• No Adobe license needed: Open-source tech, zero cost
• Version controlled: Templates are code, manageable with Git

A typical template structure:

<div class="video-container" style="width:1080px; height:1920px;">
  <div class="background-animation">...</div>
  <div class="text-layer">
    <h1 class="hook-text">Did you know?</h1>
    <p class="main-content">90% of people don't know this...</p>
  </div>
  <div class="cta-layer">
    <span>Follow @ultralab.tw</span>
  </div>
</div>

CSS animations handle all entrance, emphasis, and transition effects:

.hook-text {
  animation: slideUp 0.6s ease-out 0.5s both;
}
.main-content {
  animation: fadeIn 0.8s ease-out 1.5s both;
}

#Stage 2: Playwright Capture

Playwright is a headless browser automation tool. We use it to:

1. Open the HTML template page
2. Wait for animations to complete
3. Capture screenshots frame by frame (30 FPS = 30 images per second)
4. Output as an image sequence

Why Playwright over Puppeteer?

• Supports more browser engines
• More accurate CSS animation rendering
• Built-in waiting mechanisms, less prone to dropped frames

Each frame is a 1080x1920 PNG image. A 15-second video produces approximately 450 images.

#Stage 3: FFmpeg Compositing

FFmpeg is the Swiss Army knife of audio/video processing. We use it to composite the image sequence into the final video:

ffmpeg -framerate 30 -i frame_%04d.png \
  -i background_music.mp3 \
  -c:v libx264 -pix_fmt yuv420p \
  -shortest output.mp4

During this stage, we also add:

• Background music: Automatically selected from a preset music library
• Sound effects: Notification sounds when text appears
• Subtitle tracks: Auto-generated SRT subtitles

#Three Psychological Trigger Templates

We've designed three categories of proven short-form video templates, each targeting a different psychological trigger:

#Fear Type

Open with alarming data or facts to trigger "Do I have this problem too?" anxiety.

Examples:

• "90% of people won't have enough retirement savings"
• "Your password may have already been leaked"

#Efficiency Type

Show a quick way to solve a problem, making viewers think "It's that simple?"

Examples:

• "3 steps to automate your IG posting"
• "This tool saves me 2 hours every day"

#Greed Type

Showcase potential gains or opportunities to trigger "I want that too" desire.

Examples:

• "This side hustle earns $1,500/month"
• "A single SaaS tool generating $30,000/year in revenue"

Each category has 3-5 visual variations, totaling 10-15 templates that rotate to prevent viewer fatigue.

#Batch Production Workflow

The complete workflow in practice:

1. Once per week: Set the week's topics and content direction
2. AI auto-generates: Gemini creates copy based on template type
3. Auto-template insertion: Code injects the copy into HTML templates (why not have Gemini write the HTML directly? We compared both approaches when rebuilding UltraSite)
4. Batch capture: Playwright captures each template sequentially
5. Batch compositing: FFmpeg batch-processes all videos
6. Scheduled publishing: Videos automatically enter the publishing queue

Batch-processing 20 videos takes approximately 15-20 minutes (depending on machine performance). Once videos are in the queue, posting windows and account safety for automated IG publishing are covered in the five stages of IG Reel automation, from copy to auto-publishing.

#Cost Structure

Item	Cost
HTML template development	One-time setup cost
Playwright + FFmpeg	Open-source, free
AI copy generation	NT$300-500/month
Server / local compute	Existing hardware is sufficient
Background music licensing	Free asset libraries
Monthly total	NT$300-500

Compared with commissioning a single short-form video from an editor (NT$1,000-3,000/video), the automated production system costs 1/100th of manual production.

#Who Is This For?

• Brand owners: Need consistent short-form video output but don't have an editing team
• Content creators: One person managing short-form video across multiple platforms
• Marketing teams: Batch-producing short-form videos for multiple brands
• E-commerce sellers: Product showcases, promotional countdowns, unboxing videos

#Conclusion

Automated short-form video production doesn't require After Effects skills or expensive software licenses. With the open-source combination of HTML + Playwright + FFmpeg, you can build a high-efficiency short-form video production pipeline.

Every piece in this pipeline is open source, so you can rebuild it yourself with the steps above.

FAQ

How do you automate short-form video production with code?

Split it into three stages. Build HTML, CSS and JavaScript animation templates for every frame of the video, use Playwright to open each template and capture screenshots frame by frame into an image sequence, then use FFmpeg to composite the sequence into the final video while adding background music, sound effects and auto-generated SRT subtitle tracks.

Why use HTML instead of After Effects for short-form video animation?

HTML templates are programmable, so text, numbers and colors can all be controlled with variables. One template can be used with hundreds of different content variations, the stack is open source with no Adobe license needed, and templates are code that can be version controlled with Git.

Why use Playwright instead of Puppeteer to capture video frames?

Playwright supports more browser engines, renders CSS animations more accurately and has built-in waiting mechanisms, so it is less prone to dropped frames. Capturing at 30 FPS, each frame is a 1080x1920 PNG, and a 15-second video produces about 450 images.

How much does automated short-form video production cost per month?

About NT$300-500 per month in total, mostly for AI copy generation. Playwright and FFmpeg are open source and free, background music comes from free asset libraries, and existing hardware is enough for compute. Compared with NT$1,000-3,000 to commission a single short-form video, that is about 1/100th the cost of manual production.

How long does it take to batch-produce 20 short-form videos?

About 15-20 minutes for a batch of 20 videos, depending on machine performance. The workflow sets topics once a week, has Gemini generate copy by template type, injects the copy into HTML templates, then captures with Playwright and composites with FFmpeg in batch, and the videos automatically enter the publishing queue.