Export a GIF from Studio
Open the Renders panel, choose GIF, set the loop count, and click Export. Use0 to loop forever or an integer from 1 to 65535 for a finite loop count.
GIF exports have no audio and are capped at 30 fps; the 60 fps option is disabled
while GIF is selected. Finished GIFs preview in the render list and can be
opened, downloaded, or deleted there.
Render a normal video
From the project folder:--output, HyperFrames writes the result under renders/.
The normal workflow is:
lint checks the project structure. check opens the project in a browser and looks for runtime, layout, motion, media, and contrast problems.
Choose a format
Examples:
Transparent video
Use WebM for a transparent web overlay or MOV for a ProRes 4444 editing intermediate. Leave the composition background unpainted wherever the output must remain transparent; an opaquehtml, body, or full-frame background
will be encoded as visible pixels.
ffprobe reporting pix_fmt=yuv420p does not by itself mean
transparency was lost. FFmpeg’s default VP9 decoder can also produce an opaque
image from a file that contains alpha. To inspect a frame, explicitly select
the alpha-aware decoder before the input:
HLS streaming output
--format hls writes an HLS VOD stream into the output directory:
master.m3u8, video.m3u8 and video_NNNNN.ts, plus audio.m3u8 and
audio_NNNNN.ts when the composition has audio. The video and audio encodes
are identical to MP4; only the delivery container differs, and packaging is a
stream copy rather than a second encode.
--hls-segment-seconds long (default 4) except the last,
and every segment starts on a keyframe. HLS output is SDR only, so --hdr is
rejected, and --gpu is rejected because GPU encoders ignore the forced-keyframe
lock that fixed-length segments depend on. Cloud rendering (lambda,
cloudrun) does not offer HLS yet.
Input video codecs
The browser editor, preview,check, and published projects normally create cached browser
proxies for local video that Chrome cannot decode reliably, including common
HEVC and ProRes inputs. The original file stays in the project and remains the
render source.
If a clip is black only in preview, keep automatic proxying enabled, confirm the
source is local, and run npx hyperframes check. Disable proxying only when the
browser already supports the source or you are diagnosing the proxy itself.
Choose quality and frame rate
The defaultlooks quality (CRF 16) is the right choice for most finished work.
MOV is an editing intermediate. It uses ProRes 4444 with alpha unless
--prores-profile picks a smaller 4:2:2 profile (hq, 422, lt or proxy),
which has no alpha: transparent areas render black. --crf and --video-bitrate
do not map to ProRes and are rejected for MOV; choose MP4 or WebM when you need
those controls.
--keyframe-interval 2 puts a
keyframe at least every two seconds. --max-bitrate 8M caps the peak while the
quality target still decides the rest, and --buffer-size (default twice the cap)
sets the window the cap is measured over. Left out, the encode is unchanged.
On Lambda the interval is a maximum, because joining chunks adds keyframes, and
the cap holds per chunk, so a join can burst up to one buffer.
data-fps when present and otherwise defaults to 30 fps.
4:4:4 masters
MP4 output stores colour at half resolution in each direction (4:2:0). Thin coloured text, UI strokes and saturated edges can come out soft or fringed. For a master file that is mostly text and UI, render with full-resolution colour:444 supports SDR MP4 with the software encoder only. It is rejected with
--gpu, --hdr and other formats. Distributed renders (including Lambda and
Cloud Run) encode 4:2:0 only and reject a chromaSubsampling of "444".
Many players cannot decode 4:4:4, so use it for masters and editing handoff,
not for files you publish directly:
Tested with H.264 High 4:4:4 Predictive, 8-bit, 1920×1080. Every player above
plays the default 4:2:0 output.
Local or Docker
Local rendering is the normal choice:Render another composition
The rootindex.html is rendered by default. To target another standalone composition:
<template> wrappers should be rendered through the root composition that includes them.
Batch and cloud work
For several variable-driven versions, use batch rendering. For remote infrastructure, use HyperFrames cloud, AWS Lambda, or Google Cloud Run. Those workflows involve output naming, credentials, concurrency, and infrastructure choices. Start in the CLI guide and use the complete CLI reference when you need every flag.Render provenance
Rendered video carries two container metadata tags that say which tool wrote the file:.webm reports HYPERFRAMES_RENDERER.
Strip them whenever you like:
These tags are an unauthenticated diagnostic hint, not proof of origin. They are ordinary unsigned
container keys, so anything can write the same two values with a single
ffmpeg -metadata
command: a tag that is present means the file claims to be HyperFrames output, not that
HyperFrames wrote it. A tag that is absent means just as little, because re-encoding, remuxing, or
any tool that drops unknown keys strips it, and files rendered by older versions never carried it.
Treat it as a “what probably produced this file?” hint for support and debugging, never as an
authenticity, attribution, or licensing check. Verifiable provenance needs signed claims such as
C2PA.Ask the agent for the right output
The flags above are what the agent sets for you. Say what you need in the request and it picks them. The defaults (MP4, 1920×1080, 30fps,looks quality) are deliberately good, so most of the skill is knowing when not to ask for more.
Quality tier
Say the tier by name and the agent selects the matching encode preset — you don’t specify CRF or encoder speed:
The tiers trade encode time for fidelity.
looks (the default) is already visually lossless at 1080p, so reserve delivery for the master you’ll actually hand off, and use draft freely while iterating.
- Avoid:
render everything at high quality - Instead:
draft renders while we iterate, then one high-quality final— you spend the slow encode once, on the cut you’ve already approved
Format
MP4 is the default and the right answer for almost everything — it plays everywhere. Ask for a different container only when the delivery target needs one:Render this as a transparent WebM overlay.
Export a MOV I can drop into Premiere with the background knocked out.Transparency has a container hierarchy, and the tradeoffs are real:
Transparency also only means something on a design that has empty space to see through. A lower third, a subscribe card, or a logo sting is mostly empty canvas — transparency lets it composite over other footage. A full-frame scene (edge-to-edge background, full-bleed video, a title card with its own backdrop) has nothing to be transparent; the request produces a file that looks identical to the opaque one but is larger and plays in fewer places.
- Avoid:
render my full-screen product promo as a transparent WebM - Instead:
render the promo as MP4; export just the lower-third overlay as transparent WebM— transparency belongs to the layer meant to sit over other footage, not the finished full-frame film
A transparent render also depends on the composition leaving
html / body backgrounds unset — the transparency comes through only where nothing is painted. The skills handle this; see the Rendering guide if you’re hand-authoring an overlay.Resolution and framerate
1920×1080 at 30fps is the default. Both cost real time when you raise them, and both are frequently asked for out of habit rather than need. 4K is a render-time flag — the composition stays at its authored size and Chrome supersamples it to 3840×2160. That buys crisp text, SVG, and CSS at any scale, but it does nothing for content already locked to a pixel grid: a 1080p<video>, a fixed-size <canvas>, or a sub-4K image gain no detail from it. And it isn’t free — a 4K render is roughly 4× slower per frame and produces a 3–5× larger file. Ask for it when the delivery surface genuinely needs it (a 4K display, a client spec), not reflexively.
Render this at 4K for the trade-show display.Framerate follows the same logic: 60fps doubles the frames the engine captures and encodes. It’s worth it for fast motion graphics destined for a high-refresh screen; it’s wasted on a talking-head clip or a slow title sequence.
- Avoid:
render in 4K 60fpsfor a clip headed to Instagram — the platform will transcode it down anyway, and you paid the slow render for nothing - Instead: say nothing for social; name
4K(or60fps) only when the target actually resolves it
HDR
HDR output is HDR10 MP4 (H.265 10-bit, BT.2020) and it is source-driven — the render only goes HDR when your composition actually references HDR media (video tagged BT.2020 with PQ or HLG transfer, or a 16-bit PNG). Text, gradients, and GSAP animation are not HDR sources; a composition made entirely of them has nothing to render in HDR.This composition has an HDR drone clip — render it as HDR10.By default HDR is auto-detected, so with a real HDR source in the project you often need to say nothing. Force it explicitly only to override the probe:
- “force HDR” → forces the HDR path even without a detected HDR source
- “force SDR” → forces standard range even when HDR sources are present
Where the render runs
Local rendering is the default and the right choice for the whole iteration loop. Reach for cloud rendering only when a single machine is the bottleneck:Render this on Lambda.That routes to HyperFrames’ AWS Lambda path, which fans the render across many parallel workers. It’s the right call for renders that are too long or too large for one host — multi-minute videos, 4K masters, or large parallel batches — and it needs AWS credentials configured first. For dev-loop iteration, stay on local
render; the round-trip is faster than any cloud dispatch. Lambda is SDR-only (no HDR) and bills by compute time; the AWS Lambda guide covers setup, cost shape, and the conservative concurrency default.
- Avoid:
set up Lambda so I can preview edits faster— cloud dispatch adds latency to a fast local loop - Instead:
render the final 3-minute 4K cut on Lambda— the workload that actually justifies fanning out
Preview before you commit the slow render
The cheapest way to avoid a wastedhigh/4K/HDR render is to judge the frame first. The habit the skills follow:
- Keep
previewrunning and scrub the timeline — same runtime as the render, so what you see is what you get. - Iterate with
draftrenders when you need a real file to check. - Only when the cut is locked, ask for the final tier / resolution / format.
- Avoid:
render the final 4K HDR masteron a cut you haven’t watched end to end - Instead:
draft render so I can check timing→ approve →now the 4K final