Simply Broken
Exploring / Launch Videos, Built from Code / v1
Version 1 · 22 August 2026

A launch video, made by reading the website

The claim was that a free tool can replace a thirty thousand dollar launch video shoot. So I pointed it at a live product site and let it run. It read the site, took its photographs, its typefaces and its colours, and rendered a sixteen second film on this machine in twenty four and a half seconds. No API key, no upload, no account. Here is the film, and here is the part nobody advertises: the checker that runs before it.

Six frames from the finished video in a grid, moving from a cream title card, to a photographed drawer being scanned, to items being labelled, to a search being typed and answered, to a closing card with the fox mascot and the price.
Six moments from the finished film, exported as stills straight from the timeline. Nothing here was drawn by hand: every photograph, colour and typeface came off the live site.
The test

One tool, one URL, one afternoon

HyperFrames is an open source project from HeyGen. The pitch is simple enough to be suspicious: describe a video, an agent writes it as a web page, and your own computer turns that page into a video file. Install it with npx skills add heygen-com/hyperframes and point it at a website.

The test site was noonfox.com, a product that is not launched yet.

It photographs your things and finds them later by description. A pre launch site is the honest test case: there is a real marketing page, real photography and a real palette, but no existing video to copy from and no agency footage to fall back on.

01

It read the site. Twelve scrolling screenshots, nine photographs, three illustrations, twenty seven vector icons, the three typeface files and the whole colour palette, pulled down into an editable folder.

02

It extracted the meaning, not just the pixels. Every heading, every paragraph, the pricing line and the font weights came out as structured data beside the images.

03

I wrote four scenes. The hook, the photograph being read, the search, the closing card. Plain HTML with a timeline, roughly four hundred lines.

04

The checker refused to pass it. Five errors, none of them cosmetic. That section is below, because it is the real finding.

05

It rendered. Four hundred and eighty frames at full high definition, encoded in twenty four and a half seconds on a desk machine.

The result

Sixteen seconds, built from a URL

The finished render, unedited. Sixteen seconds, 1920 by 1080, 3.4 MB. Every asset in it was downloaded from the website by the tool, including the fox and the photograph of the drawer.

The scenes follow the site's own argument rather than a generic template.

The site is organised around a first sixty seconds: open, snap, find. The film uses the same three beats and the same words, so the video and the page reinforce each other instead of telling two stories. That came from the extracted text, which is the part of the capture that turned out to matter most.

A dark frame of a photographed mudroom with white pill labels floating over it reading rain jacket, water bottle and inhaler, showing items being recognised inside one photo.
Beat two: one photograph, four recognised items.
A cream frame showing a search box with the words kid's snow boots typed into it and a result card below naming the exact shelf where the boots are.
Beat three: the search, answered in four tenths of a second.
The real finding

The checker is worth more than the renderer

Anything can turn a web page into frames. What surprised me is that the tool ships a linter, and the linter understands what a video is for. It refused to render five things, and every one of them was a genuine defect rather than a style preference.

What it caughtWhy it matters
Fade out with no hard stop My scene fades ended exactly where the next scene began. That looks correct when the film plays start to finish, and breaks the moment anyone drags the playhead. Three of the five errors were this.
Full frame panel starts visible Two scenes were on screen from frame zero, so they would have covered the opening seconds as a blank rectangle. This is the classic silent failure: it renders, it just renders wrong.
Two animations fighting Two instructions were changing the same property in the same tenth of a second. The result is undefined rather than wrong, which is worse, because it can differ between renders.
Overlapping text blocks A layout pass measured the actual rendered boxes and found two headline lines touching between 1.25 and 3.88 seconds. Not visible in a still. Visible on the screen.
The same image discovered twice One photograph appeared in two scenes and was queued twice by the compiler. Harmless here, expensive on a longer film.
What this changes

The interesting part of code generated video is not that a machine can draw. It is that a video becomes something a machine can check. A rendered file cannot be diffed, linted or unit tested. A composition can be, and this one was, before a single frame existed.

What it took off the site

It read the brand better than a brief would

The capture step is the quiet strength. It did not screenshot the page and call that a video. It downloaded the actual typeface files, listed every colour in use with its weight and size, and wrote out the headings in order.

Typography

Three families, eleven weight files, downloaded and named correctly. The film uses the same display serif as the site's own headlines, so the two read as one brand rather than as a page and a promo.

Structure

Fourteen colours in use, every heading with its level and size, ninety four running animations counted. Enough to write a storyboard without ever opening the site by eye.

One number in that report was not about video at all.

The contrast pass flagged orange on cream. The floor is 3 to 1 for very large text and 4.5 to 1 for body, and the brand orange clears neither. It is a miss on the live marketing site, not only in the film.

#FF6F00 on #FFFCF7 · 2.73:1 · under the 3:1 floor
#DD5900 · 3.73:1 · the fix for display text
#B34700 · 5.37:1 · the fix for body text and icons
Correction, same day

This page first quoted #FF7300 at 2.66 to 1 as the site's colour. Both figures came from the composition, not from the site. #FF7300 appears nowhere in the captured page: it is an artifact of the capture's derived token list, and the site's orange is #FF6F00 at 2.73 to 1. The finding survived the correction. The figures did not, and the rule earned from it is to grep the page before quoting a colour.

Checking the source rather than the report also turned one finding into three. Orange used as a foreground fails in all eleven places it appears, and that is now fixed. White text on the orange fill measures 2.79 to 1 in five more places, both calls to action included, which is the more serious half and is still open. Six older misses on a second brand colour sit just under the body floor.

The unexpected part

I went looking for a video tool and came back with a finding about the website. A checker built for one medium found a defect in another, because both are made of the same web page. That is an argument for building marketing assets in code that has nothing to do with saving money.

The honest ledger

Where this wins, and where it stops

Where it wins

Iteration is free. Change a word, re run, wait twenty five seconds. An agency round is a week and an invoice.

It is reproducible. The same input gives the same file, so a video can live in version control beside the product it advertises.

Nothing leaves the machine. Rendering is local. For an unlaunched product, that matters more than the price.

Where it stops

It cannot shoot what does not exist. There is no footage of a real person using the product, because no such footage was on the site.

Taste is still yours. The tool rendered my storyboard faithfully. It did not write it, and a bad storyboard renders just as fast as a good one.

Silence. This film has no voice and no music. Both are possible and both are more work than the picture was.

Two costs nobody mentions

It phones home by default. The setup step turns on anonymous usage telemetry without asking. One command turns it off, and it should be the first command you run.

It writes nine agent skills into your home directory. They then load into every unrelated session you open afterwards. That is a real running cost, paid in attention and in tokens, for a tool you may use twice a year.

Next

What a second version would test

  1. A narrated version, sixty to ninety seconds, through the tool's own launch video workflow rather than my hand built scenes. That is the shape an actual launch needs.
  2. The same film in three aspect ratios from one source. Vertical is where the audience is, and re cutting is a code change here rather than a re edit.
  3. The rest of the contrast work on the site. The foreground half is fixed: two new tokens, the fill colour untouched, verified by walking the rendered page and computing every element against its resolved background. The white on orange half changes both calls to action, so it is a design decision, not a defect fix.

HyperFrames, HeyGen, open source · https://hyperframes.heygen.com/

Full tutorial, Bin Liu and Jake Moran on Peter Yang's Behind the Craft · https://creatoreconomy.so/p/full-tutorial-make-professional-launch-videos-for-free-hyperframes-ai

The site under test · https://noonfox.com

Method

Run on 22 August 2026 on an Apple M4 desktop. HyperFrames 0.8.8, headless Chrome and FFmpeg, both already installed. Every figure on this page is measured from that run: 480 frames, 24.5 seconds of render, 3.4 MB of output, five linter errors. The contrast figures were re-measured against the site's own source rather than taken from the tool's report. The four scenes were written by hand against the captured assets; the tool captured, checked and rendered them.

Press Notes at the bottom right to mark up any block, or click any line to edit it directly.

Back to the topic · All explorations