USE CASE · LAUNCH

The launch kit on day one.

One composition becomes the trailer, the 9:16 vertical, the 1:1 feed cut and the 16:9 hero — all on brand, all rendered in CI before the launch tweet goes out.

Open the playground All use cases

One source, every cut

Responsive HTML compositions render 9:16, 1:1, 16:9 from the same file. No re-comping for vertical.

Brand kit in one PR

Colors, type scale, motion easings — locked in tokens.css. Update everywhere with a single merge.

CI ships the matrix

GitHub Actions or Vercel cron renders the full kit on every PR. Press team self-serves new dimensions.

SAMPLE LAUNCH

Trailer + social, from one composition.

launch-trailer.htmlhtml

<!-- launch-trailer.html -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/brand/tokens.css" />
  <style>
    .stage { aspect-ratio: var(--aspect, 16/9); container-type: inline-size; }
    .title { font-size: clamp(48px, 8cqw, 120px); font-family: var(--brand-serif); }
    .lockup { animation: settle 1s 4.6s both; }
  </style>
</head>
<body data-width="1920" data-height="1080" data-fps="30" data-duration="6">
  <div class="stage">
    <video data-start="0" data-duration="5" src="/launch/hero.mp4" />
    <h1 class="title" data-start="1.2" data-duration="4.4">
      Northwind <em>2.0</em>
    </h1>
    <img class="lockup" src="/brand/logo-on-dark.svg" />
  </div>
</body>
</html>

ship.shbash

# Ship the full kit from one source.
hyperframes render launch-trailer.html \
  --aspect 16:9,9:16,1:1 \
  --out ./dist/launch-{{aspect}}.mp4

# Optional: also render a 6s teaser cut.
hyperframes render launch-trailer.html \
  --duration 6 --aspect 9:16 \
  --out ./dist/teaser-9x16.mp4

FAQ

For launch crews and growth teams.

How does one composition produce every aspect ratio?: Compositions are responsive HTML. Set safe areas with CSS containers, and HyperFrames renders 16:9 for YouTube, 9:16 for Reels and TikTok, and 1:1 for feed posts — from the same source. Image and text scale with the viewport.
Can we render the trailer in CI on every PR?: Yes. GitHub Actions, Vercel cron, and GitLab pipelines all work. See the GitHub Actions integration page for a copy-paste workflow that renders variants and posts MP4s as PR comments.
What about brand consistency across the launch kit?: Define your brand tokens (colors, type scale, easings) in a shared CSS file. Import it from every composition. One PR updates the entire launch kit.
Can press teams self-serve cuts in their own dimensions?: Yes. The render CLI takes an --aspect flag with comma-separated ratios. Press teams kick off renders without involving engineering.

Ship the kit, not the file naming convention.

Render the entire launch matrix in CI. Free your team for hero work.

Open the playground GitHub Actions setup

Marketing teams Deploy on Vercel Next.js integration

Trailer + social, from one composition.

launch-trailer.htmlhtml

<!-- launch-trailer.html -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/brand/tokens.css" />
  <style>
    .stage { aspect-ratio: var(--aspect, 16/9); container-type: inline-size; }
    .title { font-size: clamp(48px, 8cqw, 120px); font-family: var(--brand-serif); }
    .lockup { animation: settle 1s 4.6s both; }
  </style>
</head>
<body data-width="1920" data-height="1080" data-fps="30" data-duration="6">
  <div class="stage">
    <video data-start="0" data-duration="5" src="/launch/hero.mp4" />
    <h1 class="title" data-start="1.2" data-duration="4.4">
      Northwind <em>2.0</em>
    </h1>
    <img class="lockup" src="/brand/logo-on-dark.svg" />
  </div>
</body>
</html>

ship.shbash

# Ship the full kit from one source.
hyperframes render launch-trailer.html \
  --aspect 16:9,9:16,1:1 \
  --out ./dist/launch-{{aspect}}.mp4

# Optional: also render a 6s teaser cut.
hyperframes render launch-trailer.html \
  --duration 6 --aspect 9:16 \
  --out ./dist/teaser-9x16.mp4

For launch crews and growth teams.

How does one composition produce every aspect ratio?

Compositions are responsive HTML. Set safe areas with CSS containers, and HyperFrames renders 16:9 for YouTube, 9:16 for Reels and TikTok, and 1:1 for feed posts — from the same source. Image and text scale with the viewport.

Can we render the trailer in CI on every PR?

Yes. GitHub Actions, Vercel cron, and GitLab pipelines all work. See the GitHub Actions integration page for a copy-paste workflow that renders variants and posts MP4s as PR comments.

What about brand consistency across the launch kit?

Define your brand tokens (colors, type scale, easings) in a shared CSS file. Import it from every composition. One PR updates the entire launch kit.

Can press teams self-serve cuts in their own dimensions?

Yes. The render CLI takes an --aspect flag with comma-separated ratios. Press teams kick off renders without involving engineering.