framezero: turn HTML into scroll-stopping 4K60 app promo videos (TikTok, Reels, Shorts)

A video is just a function of time.

Every scene is one HTML file with a pure function seek(t) that draws the exact picture for instant t. That makes every frame reproducible, reviewable as a still, and renderable at any resolution.

// scene.html: no timers, no CSS animations
const DURATION = 12.6;
function seek(t) {
  // slam the hook word in at 0.0 s
  slam($('#hook'), t, 0);
  // camera pushes into the app at 3.4 s
  C.apply($('#cam'), C.track(keys, t - 2.4));
}

# look at 4 frames in ~2 seconds
python3 kit/render.py scene.html out/q \
        --stills 0,3.5,6.6,10.9

# music + effects from math (no copyright)
python3 soundtrack.py out/track.wav

# 4K60 master, fits in ~1 GB of RAM
python3 kit/render.py scene.html out/4K.mp4 \
  --scale 2 --fps 60 --audio out/track.wav \
  --frames-dir /tmp/frames

Write a scene

Plain HTML/CSS + tiny helpers: easings, slams, wipes, letter drops, and a phone camera that zooms into your real UI.

Review stills

Render single frames instantly and check a contact sheet before spending minutes on a full render.

Generate the soundtrack

Lo-fi Rhodes, swung drums and vinyl, plus whooshes, pops and coins, each placed at the second its animation happens.

Render 4K60

Headless Chromium + ffmpeg. CPU only, chunked encoding, and BT.709 color that looks right on phones.

Made for AI coding agents.

Agents write deterministic code well, but they can't watch motion. framezero gives them a loop they can run: script table → scene → stills → contact sheet → fix → render. AGENTS.md, an Agent Skill and llms.txt come in the box.

Clone https://github.com/matheusvibecoder-vibecodas/framezero and read AGENTS.md.
Make a 20-second vertical promo for my app (screenshots in ./shots).
Hook: a POV line readable on frame 0. Show 3 features with camera zooms and labels.
Calm lo-fi music. CTA: "coming soon, follow to know when it launches".
Show me a contact sheet of stills before the full 4K render.

Claude Code

Reads CLAUDE.md → AGENTS.md. Or install skills/framezero as a skill.

Codex · Cursor · Gemini CLI

All pick up AGENTS.md automatically.

GitHub Copilot

.github/copilot-instructions.md holds the hard rules.

The playbook that stops thumbs.

Learned from making a real series for a study app. Some of it was learned the hard way.

Frame 0 is the hook	All hook text is visible at t = 0, with no fade-in and no logo intro. The first frame is also your thumbnail.
Context by second 3	"5 things it does · the last one is the best". It promises a payoff and opens a loop.
Interrupt every 2–4 s	A new color, a zoom, a label or a sound resets attention.
Show the real product	Real screens in a phone. Viewers trust UI more than adjectives.
Every motion has a sound	Whoosh before cuts, impact on slams, pop on labels, coin on rewards.
A true CTA + a seamless loop	"Coming soon · follow" before launch, then wipe back into frame 0.

Quickstart

git clone https://github.com/matheusvibecoder-vibecodas/framezero && cd framezero
pip install -r requirements.txt && python3 -m playwright install chromium
python3 kit/render.py templates/starter.html out/shot --stills 0,3.5,6.6,10.9
python3 templates/soundtrack.py out/soundtrack.wav
python3 kit/render.py templates/starter.html out/starter.mp4 --audio out/soundtrack.wav

★ Star framezero on GitHub Read the guide

Your best frame is frame zero.