hyperframes/docs/workflows.mdx

---
title: "Choose a creation workflow"
sidebarTitle: "Choose a workflow"
description: "Start with what you have and what you want to make. HyperFrames will route your agent to the right workflow."
---

You do not need to learn HyperFrames' internal workflow names. Find the situation that resembles yours, copy a useful request, and let the agent confirm the creative direction before it builds.

<Tip>
  If this is your first HyperFrames project, follow [Make your first video](/quickstart). This page is the faster route when you already know what HyperFrames is.
</Tip>

## Start with what you have

<CardGroup cols={2}>
  <Card title="A product, website, or launch brief" icon="rocket" href="#product-or-website">
    Make a launch video, product tour, promo, or showcase using the real product.
  </Card>
  <Card title="Notes, an article, or an idea" icon="lightbulb" href="#text-notes-or-an-idea">
    Explain something without relying on a website or existing footage.
  </Card>
  <Card title="Existing talking-head footage" icon="video" href="#existing-footage">
    Add readable captions or designed graphic overlays without changing the underlying clip.
  </Card>
  <Card title="A pull request" icon="code-pull-request" href="#a-pull-request">
    Turn a code change into a concise feature reveal, fix explanation, or changelog video.
  </Card>
  <Card title="A short motion-first idea" icon="wand-magic-sparkles" href="#a-short-motion-graphic">
    Animate a title, statistic, chart, logo sting, callout, or transparent overlay.
  </Card>
  <Card title="A music track" icon="music" href="#a-music-track">
    Let the beat drive a lyric video, visualizer, slideshow, or promo.
  </Card>
  <Card title="A presentation" icon="display" href="#a-presentation">
    Build a navigable deck with reveals, notes, branches, and hotspots.
  </Card>
  <Card title="Something custom" icon="shapes" href="#something-custom">
    Plan a longer video, montage, title card, loop, or composition that does not fit the focused paths.
  </Card>
</CardGroup>

## Product or website

**Best for:** launch videos, product tours, promos, and site showcases that should use the product's real interface.

**Give the agent:** a public URL or launch brief, the audience, the main promise, and any claims or screens that must appear.

```text
/hyperframes Make a 45-second launch video for https://example.com.
It is for small design teams. Show the real interface, focus on how quickly
a team can go from an idea to a shared result, and end with “Try it together.”
Keep the pacing confident rather than frantic.
```

[See the product and website workflow →](/guides/product-launch-video)

## Text, notes, or an idea

**Best for:** explainers where every visual should be invented from the subject rather than captured from a product site.

**Give the agent:** the source text, who needs to understand it, the desired takeaway, and the maximum length.

```text
/hyperframes Turn these notes into a 60-second visual explainer for a
non-technical audience. The viewer should understand the three stages and
why the second one prevents mistakes. Use diagrams and typography rather
than stock footage.
```

[See the explainer workflow →](/guides/faceless-explainer)

## Existing footage

Choose based on what must happen to the clip:

| Desired result | Best route |
| --- | --- |
| Plain or expressive subtitles; footage otherwise untouched | Embedded captions |
| Titles, quotes, lower thirds, data callouts, or side panels over untouched footage | Talking-head recut |
| Remove pauses, reorder speech, replace shots, or change the underlying edit | Custom video |

```text
/hyperframes Add clean word-level captions to this interview clip. Keep the
footage and audio unchanged. Use high contrast and emphasize only the most
important phrase in each sentence.
```

[Choose captions or a designed recut →](/guides/captions-and-recuts)

## A pull request

**Best for:** a feature reveal, fix explanation, refactor summary, or team changelog based on a GitHub PR.

**Give the agent:** the PR link, intended audience, desired tone, and whether the video should emphasize user impact or implementation.

```text
/hyperframes Turn https://github.com/example/repo/pull/123 into a concise
feature reveal for product engineers. Lead with what changed for users,
then show the two most important code decisions. Keep it under 60 seconds.
```

[See the PR-to-video workflow →](/guides/pr-to-video)

## A short motion graphic

**Best for:** motion-is-the-message pieces, usually under ten seconds, with no narration.

**Give the agent:** the exact text or data, dimensions, duration, visual tone, and whether the background must be transparent.

```text
/hyperframes Create a six-second vertical motion graphic announcing
“10 million renders.” Count up to the number, then reveal the label.
Use bold editorial type and export with a transparent background.
```

[See the motion graphics workflow →](/guides/motion-graphics)

## A music track

**Best for:** lyric videos, beat-synced slideshows, visualizers, and promos where music determines pacing.

**Give the agent:** the audio file, any lyrics, the media to use, and the intended format.

```text
/hyperframes Make a 30-second vertical promo driven by this music track.
Cut the attached product stills on the major beats, reserve the chorus for
the strongest image, and end on the supplied logo.
```

[See the music-to-video workflow →](/guides/music-to-video)

## A presentation

**Best for:** discrete slides with fragment reveals, speaker notes, branching, presenter mode, or clickable navigation.

Ask for a **slideshow** explicitly so the result remains a navigable deck rather than becoming a rendered linear video.

```text
/hyperframes Build a ten-slide interactive product briefing from these
notes. Use progressive reveals, add speaker notes, and include a final
branch where the presenter can open either the roadmap or pricing detail.
```

[See the slideshow workflow →](/guides/slideshow)

## Something custom

Use the general video path for longer or unusual work: multi-scene montages, title cards, static loops, mixed media, custom compositions, or projects where you want to co-create the structure with the agent.

[Plan a custom video →](/guides/general-video)

## What happens after you choose

<Steps>
  <Step title="Install the HyperFrames guidance once">
    In the project folder, run:

    ```bash
    npx hyperframes skills update
    ```

    Start a fresh agent session if the `/hyperframes` command is not recognized.
  </Step>
  <Step title="Send the request and source material">
    Begin with `/hyperframes`. Include the desired result, audience, source, tone, constraints, and anything that must be accurate.
  </Step>
  <Step title="Approve the direction">
    Check the message, format, length, visual approach, and required content before the agent builds.
  </Step>
  <Step title="Review the first version">
    Watch the complete result once. Make direct visible edits in [Studio](/studio); ask the agent for changes that affect the story, several scenes, or new media.
  </Step>
  <Step title="Export or continue improving">
    Use Studio's **Renders** panel when the result is ready. If something blocks you, start from the symptom in [Get unstuck](/help).
  </Step>
</Steps>

## A useful request has six parts

1. **Outcome:** what should exist when the work is done?
2. **Audience:** who will watch it?
3. **Source:** URL, file, text, PR, audio, or idea.
4. **Format:** landscape, vertical, square, transparent overlay, or presentation.
5. **Tone:** a few precise words or a useful reference.
6. **Constraints:** exact claims, words, visuals, duration, or exclusions.

You can refine the request with [Give your agent a useful brief](/guides/prompting).