I Open-Sourced 25 Code-Rendered Vertical Video Methods — Stop Losing the Prompt Lottery

Nick Wang — Thu, 12 Nov 2026 10:01:54 +0000

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:

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

Open-source core + runnable examples (MIT):
→ github.com/Nickwang684/ai-short-video-method-library
Complete Edition — all 25 runnable projects, 25 demo renders, 60-page bilingual handbook (instant delivery):
→ Gumroad ($29) · Payhip ($29) · itch.io
Handbook-only Edition ($12):
→ Gumroad · Payhip

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.

DEV Community: Nick Wang

I Open-Sourced 25 Code-Rendered Vertical Video Methods — Stop Losing the Prompt Lottery

The Core Trick: A Virtual Clock

25 Reproducible Visual Methods

Get the Library