Atriveo Reel Two clips in, one comparison reel out. Rendered by a worker that survives a closed tab.

Paste two video URLs, pick a moment in each, choose a layout, and download a 1080×1920 MP4. It's self-hosted on one Mac Mini, reached through a Cloudflare Tunnel, built over two weeks in August 2026.

Stack
Next.js · Remotion · FFmpeg · SQLite · Cloudflare Tunnel
Status
Open source · GitHub ↗︎
  • 4comparison layouts
  • 1080×1920output, 30 fps
  • 17commits over two weeks

Atriveo Reel

Next.js · Remotion · FFmpegView code
Atriveo Reel: two source clips, a caption band between them, and a 1080×1920 rendered reel

01 · Problem

A comparison video is five careful decisions, not one edit.

Two clips have to line up on the moment that matters, sit in a layout that makes the comparison obvious, and hold captions without one clip going blank while the other keeps playing.

02 · Solution

One workspace, four layouts, a worker that outlives the tab.

A single-page workspace replaced an earlier five-step wizard. The web app only writes a job row and returns; a separate worker polls SQLite and renders with FFmpeg and Remotion, so a render survives a browser refresh.

03 · Engineering

The shorter clip freezes on its last frame in a split layout, so the comparison pane never goes blank while the longer one keeps playing.

04 · Key decisions

  • Web never renders: a job row, then a worker
  • One render at a time, tuned for a Mac Mini
  • Hardware encoding via VideoToolbox by default
  • Caption band takes space, not covers it
  • Finished reels kept, unless retention is set

Engineering note

A caption never hides behind a title card. The band claims its strip first; the card lays out around it.

A caption band and a text card can run together: the band's height comes out of each pane rather than sitting over it, so a 1920px frame with a 220px band still leaves 850px of clear video each side. The card composites first, then the band goes on last, holding its strip for the card's whole duration.