HyperFrames: make a release video you can revise and render again

What the documentation establishes

The repository requires Node.js 22+ and FFmpeg for the local CLI workflow. Source ↗

The developer guide supports a blank HTML project, local preview, project checks and MP4 rendering. Source ↗

A composition declares dimensions and duration; data-no-timeline explicitly opts out of animation timeline registration. Source ↗

The quickstart distinguishes local rendering from optional agent, hosted and media-generation costs. Source ↗

The walkthrough below is an original worked exercise. We have not independently tested this product’s performance.

1. Write a brief small enough to verify

Our fictional product is a reading list. The release adds saving, tagging and finding saved articles. Make three full-screen cards, four seconds each, at 1920 by 1080. The first trial uses hard cuts, text and flat color, without narration, music, generated footage or external images. That lets you isolate composition and rendering problems before adding media.

Choose the destination before polishing. A twelve-second landscape clip can work in a product update, but the same layout may be unreadable as a small portrait post. This guide produces the landscape version only. After it passes, author a separate portrait layout with new line breaks and repeat the review; stretching the old frame is not a layout check.

{
  "project": "reading-list-release",
  "durationSeconds": 12,
  "frame": {"width": 1920, "height": 1080},
  "beats": [
    {"start": 0, "end": 4, "headline": "Save a good read."},
    {"start": 4, "end": 8, "headline": "Give it a useful tag."},
    {"start": 8, "end": 12, "headline": "Find it when it matters."}
  ],
  "audio": "none",
  "acceptance": "Correct words, one visible card at a time, no empty ending"
}

2. Create an editable project

The repository lists Node.js 22+ and FFmpeg as prerequisites. In a parent folder where you keep video projects, use the documented CLI sequence below. These commands obtain and execute software when you run them; they have not been run by Current. Keep the new project separate from an application repository so a video experiment does not alter application dependencies.

The developer guide identifies index.html as the composition you can edit. Keep the scaffolded project files, and replace the content of its index.html with the complete example in the next section. Start preview from inside that project folder. Open the local Studio address printed by the command; do not assume a fixed port.

npx hyperframes init reading-list-release --example blank
cd reading-list-release
npx hyperframes preview

3. Start with a complete, inspectable composition

This example deliberately contains no animation script. The schema supports a timeline-free composition through data-no-timeline; the root still declares its length. The three timed sections use stable IDs, explicit start times and durations. Styling defines the visual frame, while the timing attributes define which card belongs at each moment.

Copy the whole example into index.html. The brief’s twelve seconds are a literal root value, not a variable changed after rendering begins. Use the preview timeline to inspect each card. Merely opening this file in a generic browser is not the same as viewing it through HyperFrames, whose runtime supplies the timed presentation.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=1920, height=1080">
  <title>Reading list release</title>
  <style>
    body { margin: 0; background: #191c20; }
    #release { position: relative; width: 1920px; height: 1080px;
      overflow: hidden; font-family: Arial, sans-serif; color: #f9f3df; }
    .clip { position: absolute; inset: 0; box-sizing: border-box;
      padding: 150px; display: grid; align-content: center; gap: 36px; }
    .kicker { font-size: 30px; letter-spacing: 3px; text-transform: uppercase; }
    h1 { font-size: 112px; line-height: 1.08; margin: 0; max-width: 1500px; }
    p { font-size: 42px; line-height: 1.4; margin: 0; max-width: 1320px; }
    #save { background: #242a35; }
    #tag { background: #35433b; }
    #find { background: #45342e; }
  </style>
</head>
<body>
  <main id="release" data-composition-id="reading-list"
    data-start="0" data-duration="12" data-width="1920" data-height="1080"
    data-no-timeline>
    <section id="save" class="clip" data-start="0" data-duration="4" data-track-index="0">
      <div class="kicker">Reading list / 01</div>
      <h1>Save a good read.</h1>
      <p>Keep the article you want to return to.</p>
    </section>
    <section id="tag" class="clip" data-start="4" data-duration="4" data-track-index="0">
      <div class="kicker">Reading list / 02</div>
      <h1>Give it a useful tag.</h1>
      <p>Try “weekend”, “design” or “research”.</p>
    </section>
    <section id="find" class="clip" data-start="8" data-duration="4" data-track-index="0">
      <div class="kicker">Reading list / 03</div>
      <h1>Find it when it matters.</h1>
      <p>Your next useful idea is already saved.</p>
    </section>
  </main>
</body>
</html>

4. Inspect the cut points before exporting

Run the documented diagnostics and inspect snapshots before committing to repeated exports. Check a frame in every card, then scrub just before and after four and eight seconds. The first card should disappear as the second begins. At 11.9 seconds, the final sentence should remain visible. Scrub backwards as well: a video project should resolve the same moment after seeking, not depend on how you arrived there.

The schema documentation distinguishes static lint checks from browser-based project checks. Neither substitutes for watching the delivered file. A successful command is evidence that a check completed, not evidence that the wording fits the audience. Read each headline at the size your viewers will see it.

npx hyperframes doctor
npx hyperframes lint
npx hyperframes check
npx hyperframes snapshot --at 0,4,8,11.9
npx hyperframes render --output reading-list-release.mp4

5. Use an agent for a bounded revision

Once the baseline passes, change the second headline to “Organize it your way.” Edit that text directly, or give a coding agent the request below. A narrowly scoped revision makes review easier: only the middle card should change. Compare the first and third snapshots before accepting the new render.

For an agent-assisted workflow, the repository documents npx hyperframes skills update as the core-skill installation path. Install it only if you want that agent integration. It is optional for the manual HTML exercise. Keep the agent’s environment and account costs separate from the renderer.

In this existing HyperFrames project, change only the second card headline
to “Organize it your way.” Keep the 12-second duration, three cut times,
frame size, colors, and all other copy.
Read the project before editing. Do not add remote assets, narration,
paid generation, extra packages, or a new animation system.
Run the documented lint and project checks if the environment allows.
Inspect frames at 0, 4, 8 and 11.9 seconds and render a new MP4.
Report the files changed, exact commands run, errors, and checks that
remain unperformed. Do not call an unviewed export visually verified.

Save the accepted source and render together under a revision name. Keep the earlier version until the replacement passes. For later motion work, add one transition at a time and preserve deterministic seeking. The schema requires a finite paused GSAP timeline registered under the composition ID; it warns against wall-clock state and unseeded randomness. Do not mix a new timeline into this baseline without rechecking the boundaries.

6. Recover from failures and hand over the source

Use npx hyperframes info to capture environment details when reporting a reproducible problem. Include the smallest non-sensitive project, the exact error, and whether the issue occurs in preview, validation or render. Do not keep changing the design to hide a renderer failure.

Hand over the brief, editable project, accepted MP4 and a short review note. Record the HyperFrames and runtime versions you actually used. System fonts and environment changes can alter layout between machines; this guide does not promise byte-identical output. For a repeatable team workflow, agree on the environment and recheck the same frames after upgrades.

The practical result is a video with a maintainable source and an explicit acceptance record. If your next job needs footage editing, sophisticated sound work or manual pacing adjustments, compare that job with your existing video editor. A successful three-card trial establishes a useful template workflow, not that this tool replaces every production tool.

Guide history

Revisions preserve the original instructions. A source recheck alone does not create a new revision.

Revision 1 · New original exercise, exact documented setup, copyable example, verification procedure and troubleshooting; documentation checked, not executed.

Continue learning