Add HyperFrames video rendering template#974
Open
jrusso1020 wants to merge 6 commits intocloudflare:mainfrom
Open
Add HyperFrames video rendering template#974jrusso1020 wants to merge 6 commits intocloudflare:mainfrom
jrusso1020 wants to merge 6 commits intocloudflare:mainfrom
Conversation
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).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
<hyperframes-player>web component (self-hosted, no CDN dependency).@hyperframes/core/compiler.Verified
pnpm run check:templates,check:lockfiles,check:prettierall pass.src=\"/api/preview\", and/api/previewreturns 200 with the bundled composition's<title>.Notes for review