Your first video

You will write one HTML file, scrub it in the browser, then export a five-second MP4. No build step, no framework, no waiting on a queue.

What you'll learn

• How a composition declares its own dimensions and duration
• How to drive animation from the hf-seek event instead of the wall clock
• How to swap in variables so the same composition produces a personalized video per row of data
• How to hand the finished file to the renderer

Step 1: A blank canvas with a duration

Every HyperFrames composition is a plain HTML document. The first element with data-width, data-height, and data-duration is the composition root. Nothing outside it ends up in the video.

Step 2: Lay down structure

Drop in a logo mark, a name slot, and an accent bar. No animation yet — just static layout at frame zero.

Step 3: Drive animation from hf-seek

The renderer walks frame by frame and dispatches hf-seek on window with the current time in seconds. Read event.detail.time and update the DOM. Do not call requestAnimationFrame, setTimeout, or Date.now() — those are not the source of truth in a deterministic render.

Step 4: Parameterize it

Replace the hardcoded name and color with {{$NAME}} and {{$ACCENT}}. The same file now drives a thousand personalized cards.

Step 5: Render to MP4

Save the file as intro.html and call the renderer:

hyperframes render intro.html \
  --out ada.mp4 \
  --vars NAME="Ada Lovelace" ACCENT="#f97316"

For a CSV of recipients, swap --vars for --variants people.csv and the renderer emits one MP4 per row. The bytes for ada.mp4 are identical on your laptop, on CI, and on a teammate's machine.

Next

• Concepts in one page
• Programmatic video from data