You wrote a killer script with ChatGPT. You generated a great voiceover with ElevenLabs. Then comes the hard part: what actually goes on screen for the next 8 seconds?

Most creators face the same wall:

  • Pure AI video models (Sora, Runway, Kling): random seeds, uncontrollable motion, broken typography — and impossible to batch.
  • Manual editors (Premiere, CapCut): frame-perfect but unscalable, and they can't connect to live data.

There is a third path that indie hackers and automation engineers are quietly using: code-driven video rendering. Every frame is deterministically rendered by a script. Zero dropped frames. 100% reproducible. Batchable from a CLI.

The Core Trick: A Virtual Clock

Browsers drop frames when requestAnimationFrame gets busy. For video rendering that's fatal. The fix is to stop using real time entirely:

class VirtualTimeline { constructor(fps = 30) { this.frameDuration = 1 / fps; } seek(frameIndex) { const t = frameIndex * this.frameDuration; gsapTimeline.seek(t, false); // drive GSAP to exact time threeRenderer.render(scene, camera); // render on demand } }

A headless browser (Playwright) steps through frames one by one: seek(0) → screenshot → seek(1) → screenshot. FFmpeg then muxes the frame sequence into H.264/AAC with sample-accurate audio alignment. The result is a pixel-perfect 1080×1920 pipeline that renders the same output on every machine, every run.

25 Reproducible Visual Methods

I cataloged every visual pattern that works for vertical shorts into a method library:

  1. Kinetic typography & staggered cards (GSAP) — hooks and takeaway summaries
  2. 3D product pedestals (Three.js) — SaaS and hardware showcases
  3. Procedural 3D scenes (Blender bpy) — cinematic product shots
  4. Math animations (Manim) — 3Blue1Brown-style explainers
  5. Architecture walkthroughs (Motion Canvas) — system design content
  6. Lottie micro-interactions — counters, badges, UI flourishes
  7. FFmpeg filter grading — glitch, split screens, retro looks
  8. Synthetic app demos — landing page and app mockup walkthroughs
  9. Live browser automation capture (Playwright) — real workflow demos
  10. Data race charts (Vega-Lite/D3) — finance and growth shorts
  11. 2.5D parallax layers (Pixi.js) — photo storytelling
  12. 3D map flyovers (MapLibre) — travel routes, geopolitics
  13. Audio-synced word-by-word lyrics (Web Audio) — karaoke captions
  14. Generative particle waves (Perlin noise) — ambient backgrounds
  15. GLSL shader effects — music drops, futuristic vibes
  16. Diagrams-as-code animation (Mermaid) — cloud architecture content
  17. Terminal typing demos (asciinema) — developer tool content
  18. 2D physics drops (Matter.js) — viral packing challenges
  19. Audio frequency visualizers — music and podcast shorts
  20. Hand-drawn whiteboard (Rough.js) — sketch explainers
  21. Markdown slides → 9:16 video (Marp) — turn notes into videos
  22. Programmatic templates (Revideo) — personalized video at scale
  23. High-DPI desktop capture — software feature reveals
  24. Auto silence-cutting (FFmpeg silencedetect) — batch voiceover edits
  25. Viral retention architecture — hook/setup/twist/CTA timeline template

Each method ships as a minimal runnable project with a batch-render pipeline config.

Get the Library

If you're building faceless channels, data-driven content, or automated video pipelines, this saves you the 6 months I spent figuring out the frame-accurate rendering stack. Questions about the architecture? Drop a comment.