# Render repeatable videos from HTML instead of a video model

PaperChase agent use case (free feed entry), version 1.0. Source: [@ChenBuildsAI on X](https://x.com/ChenBuildsAI/status/2114328095851176423), 2026-10-25.

## What they did

The tester ran npx hyperframes init, wrote a page with timing data attributes and rendered 10 seconds of 1080p. Their notes: the render refused to start because /tmp was a small memory disk, fixed by pointing TMPDIR at real storage; on software graphics it fell back to slower screenshot capture (44 seconds for 10 near-empty seconds); it needs Node 22 or newer and ffmpeg. A second builder reports the same idea, agent-written HTML scenes rendered by headless Chrome and ffmpeg, running on a small cheap server.

## Worth knowing

Use this when you need text that stays sharp, brand colors that never drift, or many versions of the same video. Use a generative model when you want invented footage. Set TMPDIR before running it on CI or a small VM.

## Workflow template

```text
Apply this workflow to [your project]:
1. Install Node 22 or newer and ffmpeg, and point TMPDIR at a disk with real space
2. Start a project and ask your agent to write one scene with timed elements
3. Render 5 seconds first and time how long it takes on your machine
4. Keep all copy and colors in one data file so versions are a data change
5. Check the output frames at the start, middle and end before rendering the full length
Stop and ask me before anything irreversible: deploys, payments, sends or deletes.
```

## Steps

1. **Install Node 22 or newer and ffmpeg, and point TMPDIR at a disk with r.** Install Node 22 or newer and ffmpeg, and point TMPDIR at a disk with real space
2. **Start a project and ask your agent to write one scene with timed eleme.** Start a project and ask your agent to write one scene with timed elements
3. **Render 5 seconds first and time how long it takes on your machine.** Render 5 seconds first and time how long it takes on your machine
4. **Keep all copy and colors in one data file so versions are a data chang.** Keep all copy and colors in one data file so versions are a data change
5. **Check the output frames at the start, middle and end before rendering .** Check the output frames at the start, middle and end before rendering the full length

## Credit

Workflow reported by @ChenBuildsAI on X: https://x.com/ChenBuildsAI/status/2114328095851176423
Related: https://github.com/heygen-com/hyperframes
Related: https://x.com/medevsmaker/status/2114033624345612616

Summary and template written by PaperChaseWebb in our own words. Questions: mgmt@paperchasewebb.com