# How to create a product launch video with HyperFrames Build a 12 second, four scene product launch video from an empty folder with HyperFrames: the project layout, every file, the check and snapshot commands, a real render, and the mistakes the linter catches. Tested on HyperFrames 0.8.134. A launch video does one job: get a stranger to understand what your product does in about ten seconds. This tutorial builds one from an empty folder with [HyperFrames](https://hyperframes.heygen.com), the open source framework that turns HTML and GSAP animation into an MP4. You will write every file, run the real commands, and end with a rendered video. ![The four scenes of the finished launch video: a hook, the product reveal, three features and a call to action](/answers/shots/hyperframes-launch/storyboard.webp) Everything below was run on **HyperFrames 0.8.134** with Node.js 22, on a Mac. The product, Beacon, is made up. It needs no images, fonts or footage: every visual is HTML and CSS, so there is nothing to download. ## What you need - **Node.js 22 or newer.** - **FFmpeg** on your `PATH`. - A terminal. No AI agent is needed, though HyperFrames supports them. Check the machine first: ```bash npx hyperframes doctor ``` ```text ✓ FFmpeg ffmpeg 9.0.2 at /opt/homebrew/bin/ffmpeg ✓ FFprobe ffprobe 9.0.2 at /opt/homebrew/bin/ffprobe ✓ Chrome cache: ~/.cache/hyperframes/chrome/chrome-headless-shell/... ``` `doctor` also lists optional tools such as local text to speech and music models. Those can show as not installed, and a failed optional check does not stop you rendering. If FFmpeg is missing, see [the install answer](/answers/hyperframes-install-failed-npx-skills-add). ## Step 1: plan four scenes Decide the scenes before you write any code, because the code mirrors them. A launch video that works is usually one idea per scene: | Scene | Seconds | What it says | Why it is there | | --- | --- | --- | --- | | Hook | 0.0 to 3.1 | "Your dashboards are out of date." | A problem the viewer recognises, in the first three seconds | | Reveal | 2.8 to 6.6 | "Every metric. Live." beside the product | Shows the product doing the thing | | Features | 6.4 to 9.4 | Three short promises | The proof, one line each | | Call to action | 9.1 to 12.0 | "Beacon. Start free." | One next step | Each scene overlaps the next by 0.3 seconds so they cross-fade rather than cut. For more on what makes the content work, see [what makes a good launch video](/blog/what-makes-a-good-launch-video) and [how to make a product launch video](/blog/how-to-make-a-product-launch-video). ## Step 2: create the project ```bash npx hyperframes init hf-launch --example blank --non-interactive cd hf-launch ``` This scaffolds a folder with `index.html`, `hyperframes.json`, `package.json` and agent instruction files, and links the HyperFrames skills into your agents' directories. It ends by listing the commands you will use: ```text 4. Preview in the browser: cd hf-launch && npm run dev 5. Check the composition: cd hf-launch && npm run check 6. Render to MP4 when ready: cd hf-launch && npm run render ``` Add a folder for the scenes: ```bash mkdir compositions ``` ## Step 3: write the root, `index.html` The root does three things: it sets the canvas (1920 by 1080, 30 fps, 12 seconds), it holds the page background and the type styles every scene shares, and it mounts each scene as a clip. ```html

``` Four details are worth understanding, because they are where most first projects go wrong: - **`data-no-timeline`** on the root says this file registers no GSAP timeline of its own: the animation lives in the scenes. Without it, the renderer waits for a timeline that never arrives, which costs about 45 seconds on every render. See [why renders take 45 seconds longer](/answers/hyperframes-render-takes-45-seconds-longer). - **`class="clip"`** plus `data-start` and `data-duration` give each scene a window on the timeline. The runtime shows it only inside that window. - **`data-composition-src`** points at the scene file. Paths resolve from the project root, never from the file doing the referencing. - **Alternating `data-track-index`** puts overlapping scenes on different rows in the studio, so the cross-fade stays readable. Tracks are rows in the editor, not layers; use CSS `z-index` for paint order. Inter is named in the font stack but no file is declared. HyperFrames fetched it from Google Fonts and embedded it for the render (`check` logs `Fetched 11 font face(s) for "Inter" from Google Fonts`), which is fine for a local project. For anything cloud rendered, ship the font file: see [the fonts answer](/answers/hyperframes-fonts-wrong-in-render). ## Step 4: the hook, `compositions/intro.html` A scene file wraps everything in a `