HyperFrames Tutorial: Antigravity Prompt & Asset Pack

This repository contains the companion files for the video "HyperFrames Tutorial: Edit Video With Antigravity".

These assets are designed to help you supervise Antigravity (or any developer agent) to assemble raw assets into a high-quality video using HyperFrames, saving you hours of manual keyframing and timeline editing.

Repository Structure

v12-hyperframes-pack/
  ├── README.md                 # This file
  ├── assets/                   # Download these files for the tutorial
  │   ├── bg-1.png              # Background for Scene 1
  │   ├── bg-2.png              # Background for Scene 2
  │   ├── bg-3.png              # Background for Scene 3
  │   ├── narration-1.wav       # Narration audio for Scene 1
  │   ├── narration-2.wav       # Narration audio for Scene 2
  │   └── narration-3.wav       # Narration audio for Scene 3
  ├── prompts/
  │   ├── first-video-prompt.md # Copy-paste prompt to start your video
  │   └── repair-render-errors.md # Prompt to fix lint/inspect errors
  └── skills/
      ├── video-storyboard-from-script/ # Step 1: Planning
      ├── hyperframes-scene-builder/    # Step 2: Building layout
      ├── hyperframes-render-checker/   # Step 3: Linting & inspecting
      └── video-polish-pass/            # Step 4: Visual refinements

Quick Start (Zero Terminal Interaction)

To build this project, you do not need to open a command line terminal or manually type commands. All tasks—from initializing the project and copying assets, to validation and rendering—are handled by your Antigravity agent.

1. Initialize the Project

Create a blank workspace directory on your machine, open your Antigravity agent window, and prompt:

Initialize a new HyperFrames project in a directory named satoshi-documentary. Create the folder structure, verify that Node.js and FFmpeg are installed, make sure the hyperframes CLI package is ready, and run 'hyperframes init --non-interactive' inside it.

2. Copy the Assets

Once the project is initialized, tell the agent to copy the pre-made backgrounds and narration audios:

Copy all files from the assets/ folder of my cloned pack directory into the satoshi-documentary/assets/ folder.

3. Assemble the Video

To start the documentary build, copy the starter prompt from prompts/first-video-prompt.md and send it to the agent.

Tip: The prompt specifies that the agent must propose a storyboard first for your creative approval before editing the HTML composition.

4. Handle Layout and Timing Errors

If the composition checks catch errors (such as timing overlaps or text overflows), copy the prompt template from prompts/repair-render-errors.md, paste the agent's check log output, and send it to the agent. The agent will automatically adjust the HTML tracks and GSAP timelines.

5. Render the Output

Once the composition is clean of errors, tell the agent to render the video:

• For a draft render:

  Render a fast draft video of the composition using 'hyperframes render --quality draft' and save it as renders/draft.mp4.
  

• For the final high-quality render:

  Render the final high-quality video at 30fps using 'hyperframes render --quality high --fps 30 --output final.mp4'.
  

---

Created by AI Edge