Skip to content

Add HyperFrames video rendering template#974

Open
jrusso1020 wants to merge 6 commits intocloudflare:mainfrom
jrusso1020:add-hyperframes-template
Open

Add HyperFrames video rendering template#974
jrusso1020 wants to merge 6 commits intocloudflare:mainfrom
jrusso1020:add-hyperframes-template

Conversation

@jrusso1020
Copy link
Copy Markdown

Adds hyperframes-template: Workers + Containers + R2 template for HyperFrames, an open-source HTML-based video rendering framework.

Standalone version of this template lives at heygen-com/hyperframes-cloudflare-template.

What it does

  • Preview HTML video compositions in the browser via the <hyperframes-player> web component (self-hosted, no CDN dependency).
  • Render MP4s server-side by streaming the composition to a Cloudflare Container running Chromium + ffmpeg + hyperframes pre-baked into the image, then streaming the response body directly through the Worker into R2.
  • Bundles sub-compositions into a single self-contained preview HTML at build time via @hyperframes/core/compiler.

Verified

  • pnpm run check:templates, check:lockfiles, check:prettier all pass.
  • Standalone version is deployed and end-to-end tested at hyperframes-on-cloudflare.jdrusso1020.workers.dev — cold render ~44s, warm render ~22s, MP4 stored in R2 and streamed back via the Worker.
  • Playwright smoke test included covering the preview UI loads, the player is wired with src=\"/api/preview\", and /api/preview returns 200 with the bundled composition's <title>.

Notes for review

  • `cloudflare.preview_image_url` and `icon_urls` are empty in `package.json` per CONTRIBUTING.md — happy to coordinate on hosted CDN URLs once your team adds the assets. Image and icon source files are at `hyperframes-template/docs/preview.png` (1200×628) and `hyperframes-template/docs/icon.svg` (16:9).
  • Container needs the Workers Paid plan to deploy. Called out in the README.
  • Render endpoint is not exercised by the Playwright test because it requires the container to be running with Docker; only the preview path is covered.

jrusso1020 and others added 6 commits April 28, 2026 17:05
Adds a Cloudflare Workers + Containers + R2 template for HyperFrames
(github.com/heygen-com/hyperframes), an open-source HTML-based video
rendering framework. The template:

- Previews HTML video compositions in the browser via the
  <hyperframes-player> web component (self-hosted, no CDN).
- Renders MP4s server-side by streaming the composition to a Cloudflare
  Container running Chromium + ffmpeg + hyperframes pre-baked into the
  image, then streaming the response body directly into R2.

The standalone version of this template lives at
github.com/heygen-com/hyperframes-cloudflare-template.

Includes Playwright smoke test covering the preview UI loads and that
/api/preview serves the bundled composition.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replaces the bundled ui-3d-reveal example with a new cloudflare-intro
composition (1920x1080, ~9s). Adapted from the vercel-intro composition
in heygen-com/hyperframes-vercel-template — same beat structure (logo
roll-in, "now on" reveal, icon lockup) but Cloudflare-themed: orange
cloud mark, "HyperFrames + Cloudflare" wordmark, no screen-recording
cut.
Two fixes after testing the bundled preview on the deployed
worker (https://hyperframes-on-cloudflare.jdrusso1020.workers.dev):

1. @hyperframes/core 0.4.x bundleToSingleHtml emitted a placeholder
   <script data-hyperframes-preview-runtime="1" src=""></script> with
   an empty src. Browsers treat empty src as the current document URL
   and the resulting parse error halts subsequent script execution, so
   the inline composition timeline never registered. 0.5.3 inlines the
   runtime directly into the bundle as a non-empty inline script.

2. The HF icon PNG was referenced via a relative path. bundleToSingleHtml
   inlines text assets but not binary, so the icon 404'd at runtime.
   Replaced with an inline data: URL so the bundle is self-contained.
- Use the official Cloudflare cloud SVG (simpleicons.org) for both
  the in-composition roll-in mark and the app-icon — replaces the
  hand-drawn approximation with the real brand silhouette + swoosh.
- Match vercel.webp's app-icon density: solid orange bg + white logo.
- Drop the cloud-as-"C" trick. The full word "Cloudflare" reveals
  cleanly, the cloud mark fades out at suffix reveal, and the line
  reads as "HyperFrames now on Cloudflare".
- Center the plus between the two app icons by restoring hf-word
  width to vercel's 700.
- Replace 100x100 hfsquare.png with hfsquare.svg vector (sharp at any
  display size, no longer blurry when scaled to 172px)
- Center the Cloudflare cloud vertically in the icon (was offset low
  in the rounded square)
- Bake rx=36 into the SVG so it looks correct even without CSS clip
Mark was 22px below the icon center; adjusted transform to translate(27, 28).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant