ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-08-31 10:46:57 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
sync/hyperframes-codegen-df972e70
hyperframes/docs/guides/deploy.mdx
T
ukimsanov f595a7d683 docs: the last five blind guides now show the thing 
Rendering, Performance, Deploy, Figma and Bring in a design.

**Figma is the one worth reading about.** The first attempt failed honestly — no
token, no file key, so it refused to fake an import and built a generic design
handoff instead, where both panels looked identical and nothing was demonstrated.
A real token and file key were sitting in bug-bash-figma-hf. With genuine access
it makes the actual point: the same cursor and the same clicks land on a PNG export
and on the imported HTML, and only the HTML responds — the field takes text, the
button runs through its states. One side is pixels, the other is a component. It
replaces the placeholder comment on Bring in a design too.

**Performance is measured, not asserted.** 25.0s against 9.8s as the median of
three runs at 1920x1080 over 300 frames, one CSS declaration responsible for the
whole gap, and a pixel comparison at 43.7 dB PSNR confirming the picture did not
change. Real numbers from real runs on this machine.

**Rendering** shows the loop end to end. **Deploy** shows the four places a render
can run and labels anything not executed live.

All four carry their own audio at about -19 dB. Each was checked on a contact
sheet and for dead frames before publishing.

Guides with nothing to look at: 15 at the start of this work, 5 now. The five
left are pages where a video would be decoration — authentication, feedback, a
decision table, a comparison that carries code, and 4K, which is a paragraph
about a flag.
2026-08-04 03:14:43 -07:00

121 lines
5.3 KiB
Plaintext
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
title: "Deploy a preview and render API"
sidebarTitle: "Hosted templates"
description: "Start from an official Vercel, Cloudflare, or Modal template when you need a hosted preview and MP4 render endpoint."
---
import { DocsVideo } from "/snippets/docs-video.jsx";
HyperFrames has three official hosting templates. Each one previews a bundled
composition in `<hyperframes-player>` and renders it to MP4 on server-side
Chrome and FFmpeg.
Use these templates for a small hosted application. For managed rendering,
distributed infrastructure, or a Node backend, start with
[Choose a rendering path](/deploy/overview).
| Template | Rendering runtime | Output storage | Best fit |
| --- | --- | --- | --- |
| [Vercel](https://github.com/heygen-com/hyperframes-vercel-template) | Vercel Sandbox | Vercel Blob | A Next.js application already deployed on Vercel |
| [Cloudflare](https://github.com/heygen-com/hyperframes-cloudflare-template) | Cloudflare Container | R2 | A Workers application that needs a containerized renderer |
| [Modal](https://github.com/heygen-com/hyperframes-modal-template) | Spawned Modal Function | Modal Volume | A Python service with render jobs that run outside the web request |
<DocsVideo
title="The four places a render can run, and what each one changes"
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/render-targets-demo-v1.mp4"
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/render-targets-demo-v1.jpg"
/>
Local machine, HeyGen cloud, AWS Lambda, Google Cloud Run — what each is for and
what you trade. Anything not executed live is labelled on screen.
## Vercel
The Vercel template is a Next.js application. Its `/api/render` route restores
a prepared Sandbox, runs `hyperframes render`, uploads the MP4 to Blob, and
returns a public URL.
[Deploy the Vercel template](https://vercel.com/new/clone?demo-title=HyperFrames+on+Vercel&demo-description=Preview+HTML+video+compositions+in+the+browser+and+render+MP4s+server-side+on+Vercel+Sandbox.&demo-image=https%3A%2F%2Fraw.githubusercontent.com%2Fheygen-com%2Fhyperframes-vercel-template%2Fmain%2Fdocs%2Fpreview.png&demo-url=https%3A%2F%2Fhyperframes-on-vercel.vercel.app&from=templates&project-name=hyperframes-on-vercel&repository-name=hyperframes-on-vercel&repository-url=https%3A%2F%2Fgithub.com%2Fheygen-com%2Fhyperframes-vercel-template&stores=%5B%7B%22type%22%3A%22blob%22%2C%22access%22%3A%22public%22%7D%5D)
Deployment provisions the Blob store. Sandbox access uses Vercel's runtime
identity. Follow the repository README for current account requirements and
platform limits.
## Cloudflare
The Cloudflare template is a TanStack Start application on Workers. A
`RenderContainer` Durable Object runs the renderer and streams the result to
R2. The template also includes optional prompt-based generation with a user's
own OpenRouter credential.
[Deploy the Cloudflare template](https://deploy.workers.cloudflare.com/?url=https://github.com/heygen-com/hyperframes-cloudflare-template)
Cloudflare Containers require a Workers Paid plan. Disable the optional AI
generation surface before hosting a public demo unless you intend visitors to
submit their own compositions.
## Modal
The Modal template exposes a FastAPI application. `POST /api/render` starts a
separate render function and returns a call ID; the browser polls until the MP4
is available from a Modal Volume.
```bash
uv sync
source .venv/bin/activate
modal setup
modal deploy src/app.py
```
## Use your own composition
Author and check the project locally first:
```bash
npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes check
```
Then replace the bundled composition in the selected template:
| Template | Composition folder | Select the composition |
| --- | --- | --- |
| Vercel | `public/compositions/<name>/` | Update `PREVIEW_COMPOSITION_DIR` in `lib/preview.ts` |
| Cloudflare | `public/compositions/<name>/` | Set `PREVIEW_COMPOSITION_DIR=compositions/<name>` when building or deploying |
| Modal | `compositions/<name>/` | Update `PREVIEW_COMPOSITION` in `src/app.py` |
If the authored canvas is not 1920×1080, also update the player dimensions in
the template. Each repository README names the current file.
## Before exposing the endpoint
These repositories are working examples, not a complete multi-tenant render
service. Add authentication, request limits, input validation, and cost controls
before accepting public render requests. Add a queue when jobs need retries,
priorities, or controlled concurrency.
For infrastructure designed around distributed jobs, use
[AWS Lambda](/deploy/aws-lambda) or [Google Cloud Run](/deploy/gcp-cloud-run).
## Source
<CardGroup cols={2}>
<Card title="Vercel" icon="github" href="https://github.com/heygen-com/hyperframes-vercel-template">
Next.js, Sandbox, and Blob
</Card>
<Card title="Cloudflare" icon="github" href="https://github.com/heygen-com/hyperframes-cloudflare-template">
TanStack Start, Containers, and R2
</Card>
<Card title="Modal" icon="github" href="https://github.com/heygen-com/hyperframes-modal-template">
FastAPI, spawned functions, and Volume storage
</Card>
</CardGroup>
## Related topics
- [Compare every rendering path](/deploy/overview)
- [Deploy distributed rendering on AWS Lambda](/deploy/aws-lambda)
- [Deploy distributed rendering on Google Cloud Run](/deploy/gcp-cloud-run)
Reference in New Issue View Git Blame Copy Permalink