Documentation
Back to Dashboard

Video Rendering Pipeline

Follow how a VideoSpec becomes a finished MP4, from assembly and headless frame capture through stitching, audio mixing, and final export.

How your VideoSpec becomes a finished MP4, from assembly through frame capture to final stitching.

Pipeline Stages

1. Assembly

The assembly engine reads your VideoSpec, loads each scene's template HTML, fills content slots, injects brand CSS variables, and produces a single HTML composition with a master GSAP timeline that sequences all scenes.

2. Scene Rendering

Each scene is rendered individually through a headless Chromium instance. The browser captures frames at the target resolution, then FFmpeg encodes them into a per-scene MP4 segment. Progress updates are stored in the database in real time.

3. Stitching

Once all scene segments are ready, FFmpeg's concat demuxer joins them into a single MP4 without re-encoding. This is lossless and fast.

4. Audio Mixing

If any scenes have voiceover audio, the pipeline downloads each VO clip, aligns it to the correct timeline position using FFmpeg delay filters, and overlays the mixed audio onto the video as an AAC track. Videos without voiceover pass through unchanged.

5. Upload & Export

The finished MP4 and individual segments are uploaded to cloud storage. An export record is created with the download URL, file size, dimensions, and duration.

Surgical Re-rendering

Need to tweak one scene? The pipeline supports re-rendering a single scene and re-stitching it into the existing video, no need to re-render every other scene.

  1. Edit Scene: Update slot content or duration in the editor
  2. Re-render Scene: Only the changed scene is re-captured
  3. Re-stitch: New segment replaces the old one in the final MP4

Real-time Progress

The admin editor polls the server during rendering and displays live progress. Each stage updates the database with a percentage and label.

  • Assembling...
  • Rendering scene 2/4
  • Stitching...
  • Mixing audio...
  • Complete

Technical Details

Infrastructure

  • Headless Chromium for frame capture
  • FFmpeg for encoding and stitching
  • Cloud-native serverless execution
  • Supabase Storage for video assets

Limits

  • Max render timeout: 300 seconds
  • Supported resolutions: up to 1920 x 1920
  • Output format: MP4 (H.264)
  • Scene segments stored for future re-use

Next

Want this page as machine-readable markdown? GET /docs/features/video-generation/rendering.md