Skip to main content

Documentation Index

Fetch the complete documentation index at: https://hyperframes.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

Hyperframes ships two official deployment templates that wrap a composition in a small web app: an in-browser preview and a /api/render endpoint that produces an MP4 server-side. Both are open source, Apache-2.0, and deploy from a single button.
TemplateComputeStorageDeploy
VercelVercel Sandbox (Firecracker microVM)Vercel Blobvercel.com/templates/ai/hyperframes-on-vercel
CloudflareCloudflare Containers (Workers + Durable Object)R2One-click button in the repo README
Both templates use the same shape:
  • Preview the bundled ui-3d-reveal composition in the browser via the <hyperframes-player> web component.
  • Render to MP4 by POSTing to /api/render. The handler ships the composition to a sandboxed runtime that has Chromium, FFmpeg, and hyperframes pre-installed, then streams the MP4 back to object storage and returns a public URL.
  • Author locally, deploy the preview + render API. Compositions are still built on your machine with npx hyperframes init, then dropped into the template’s public/compositions/ directory.

​
Choosing a template

Pick this if you already deploy on Vercel, want zero-config Blob storage, or want to reuse Vercel’s CI/preview environments.Deploy with VercelWhat you get
  • A Next.js app with <hyperframes-player> preview and a POST /api/render route.
  • A pre-baked Vercel Sandbox snapshot built during next build — cold renders skip the Chromium/FFmpeg install and restore from snapshot in ~100 ms.
  • A Vercel Blob store provisioned automatically on deploy. BLOB_READ_WRITE_TOKEN is injected for you.
PerformanceRenders run on standard-4 (4 vCPU). With --workers auto, three parallel Chrome workers cut render time meaningfully vs. single-worker. Concrete render time depends on composition length, complexity, and asset size.PricingVercel Pro plans include Sandbox credit each month. See Vercel Sandbox pricing for current per-vCPU and per-GB rates and the up-to-date credit allowance.
Vercel Functions cap at 300s and a 50 MB compressed bundle, which can’t fit Chromium + FFmpeg. The template uses Vercel Sandbox specifically because it’s the purpose-built primitive for this workload — up to 5 hours of runtime and up to 8 vCPUs per render.

​
Architecture

Both templates follow the same flow: the browser plays a preview locally, then POSTs to a render endpoint that delegates to a sandboxed runtime with Chromium + FFmpeg. 
 Browser                    Edge / Function              Sandboxed renderer
┌──────────────────┐       ┌────────────────────┐       ┌──────────────────────────┐
│ <hyperframes-    │ ────▶ │ /api/render        │ ────▶ │ hyperframes render       │
│  player>         │       │  ship composition  │       │  (Chromium + FFmpeg,     │
│ preview iframe   │       │  → renderer        │       │   pre-installed)         │
│                  │ ◀──── │  ← stream MP4      │ ◀──── │                          │
│                  │  url  │  → upload to blob  │  mp4  │                          │
└──────────────────┘       └────────────────────┘       └──────────────────────────┘
                                    │
                                    └─▶ Vercel Blob / Cloudflare R2
The key cost-saver in both templates is pre-baking the renderer. Installing Chromium system libraries plus chrome-headless-shell takes 30–60s, which would dominate every cold render. Vercel’s template snapshots the sandbox at build time; Cloudflare’s template bakes everything into the container image. Both restore in milliseconds and let you spend the entire request budget on actual rendering.

​
Swapping the composition

Both templates ship with one bundled composition (ui-3d-reveal). To use your own:
1

Author locally

Compositions are HTML — author them on your machine with the CLI:
Terminal
npx hyperframes init my-video
cd my-video
npx hyperframes preview
2

Drop the bundle into the template

Copy your composition into public/compositions/<your-name>/.
3

Point the template at it

  • Vercel: edit PREVIEW_COMPOSITION_DIR at the top of lib/preview.ts and the dimensions in app/page.tsx if it isn’t 1920×1080.
  • Cloudflare: set PREVIEW_COMPOSITION_DIR=compositions/<your-name> when running npm run deploy, or edit the default in scripts/build.mjs. Update player dimensions in public/index.html if needed.
4

Deploy

Terminal
# Vercel
vercel deploy

# Cloudflare
npm run deploy

​
When to use a template vs. roll your own

Templates are optimized for a single render endpoint behind a preview UI. They’re the fastest way to get a hosted Hyperframes render API running. If you need:
  • A render queue with retries, deduplication, or priorities — start from a template, then add your own queue (e.g. Vercel Queues, Cloudflare Queues, SQS).
  • Multi-tenant rendering with per-user composition uploads — start from a template, replace the bundled composition with a runtime-fetched one.
  • Self-hosted rendering — see the Rendering guide and run hyperframes render --docker on your own infrastructure.
For everything else, the templates are the recommended starting point.

​
Next Steps

Rendering

Render compositions locally or in Docker

Player package

Embed <hyperframes-player> in any HTML page

Vercel template

Source on GitHub

Cloudflare template

Source on GitHub