hyperframes/docs/quickstart.mdx

---
title: "Make your first video"
description: "Ask an AI agent to create a HyperFrames project, review it in Studio, and export the result."
---

The simplest way to start is to tell an AI coding agent what you want to make. HyperFrames gives the agent the product knowledge and workflows it needs; Studio gives you a visual place to review and improve the result.

## Before you start

You need:

- an AI coding agent such as Claude Code, Cursor, Codex, Gemini CLI, or GitHub Copilot CLI;
- Node.js installed on your computer;
- a folder where the agent can create the project.

You do **not** need to design the timeline or write a technical specification before you begin.

## Create the first version

<Steps>
  <Step title="Install the HyperFrames skills">
    Run this in your project folder:

    ```bash
    npx hyperframes skills update
    ```

    This installs the core guidance. The `/hyperframes` router adds a specialized workflow later when your request needs one.
  </Step>
  <Step title="Describe what you want">
    Start your request with `/hyperframes`, then explain the result in normal language.

    ```text
    /hyperframes Make a 30-second launch video for https://example.com.
    It should feel calm and premium, use the product's real interface,
    and end with “Start creating today.”
    ```

    A useful request usually includes:

    - the subject or source;
    - who the video is for;
    - the rough length and format, if they matter;
    - the feeling you want;
    - anything that must appear or must not appear.

    If something important is missing, the agent will ask. You do not need to know which HyperFrames workflow to choose.
  </Step>
  <Step title="Approve the direction">
    For a new project, the agent confirms the important creative choices before building. Read this like a short creative brief:

    - Is the main message right?
    - Does the proposed style fit?
    - Is the length realistic?
    - Are the required words, visuals, and call to action included?

    Fix the direction here if needed. It is faster than rebuilding a finished video around the wrong idea.
  </Step>
  <Step title="Review the result in Studio">
    The agent starts HyperFrames Studio and gives you a local project link. You can then:

    - play the full video;
    - inspect the storyboard;
    - move and trim clips on the timeline;
    - select text and visual elements on the canvas;
    - adjust design and animation;
    - ask the agent for broader changes.

    See the [Studio tour](/studio/tour) when you want to understand the workspace.
  </Step>
  <Step title="Ask for changes">
    Give feedback using the result you can see:

    ```text
    Make the opening faster and reveal the product by three seconds.
    Keep the current colors. Replace the final line with “Try it free.”
    ```

    Use Studio for direct visual adjustments. Use the agent when a change affects the story, several scenes, source files, or new media.
  </Step>
  <Step title="Export">
    Open the **Renders** panel in Studio, choose the format and resolution, and start the export.

    MP4 is the normal choice for a finished video. WebM or MOV may be more useful for transparent overlays or another editing workflow.
  </Step>
</Steps>

## Pick a request that matches your material

<CardGroup cols={2}>
  <Card title="A product or website" icon="globe" href="/guides/create-with-agent">
    Share the URL and explain what the video should help the audience understand or do.
  </Card>
  <Card title="Notes or an idea" icon="lightbulb" href="/guides/create-with-agent">
    Ask for an explainer when there is no website or existing footage to show.
  </Card>
  <Card title="Existing footage" icon="video" href="/guides/create-with-agent">
    Ask for captions or designed overlays, and say whether the underlying footage should remain untouched.
  </Card>
  <Card title="A song or audio track" icon="music" href="/guides/create-with-agent">
    Say that the music should drive the pacing and attach the media you want cut to the beat.
  </Card>
</CardGroup>

## If you prefer to start manually

<Accordion title="Create and open a blank project">
  Create a project:

  ```bash
  npx hyperframes init my-video
  cd my-video
  ```

  Open it in Studio:

  ```bash
  npx hyperframes preview
  ```

  HyperFrames projects use HTML files, but you can make many changes visually in Studio or hand the folder to an agent at any point.
</Accordion>

## If something goes wrong

- If the agent does not recognize `/hyperframes`, restart the agent session after installing the skills.
- If Studio does not open, run `npx hyperframes preview` inside the project folder.
- If a render fails, open [Troubleshooting](/guides/troubleshooting) and copy the error into your agent.

## Next

<CardGroup cols={2}>
  <Card title="Choose your path" icon="route" href="/guides/choose-your-path">
    See which workflow fits your source material and intended result.
  </Card>
  <Card title="Tour Studio" icon="palette" href="/studio/tour">
    Learn what the storyboard, canvas, inspector, timeline, and render queue are for.
  </Card>
</CardGroup>