Setting the file. One moment.
Skill 32 · Remotion To Hyperframes
Subchapter 32.7
references/media.mdMarkdown4 KBView on GitHub
Scripts
GitkeepscriptsRemotion’s staticFile("x.png") resolves to the project’s public/ directory.
HF uses relative paths from the composition’s index.html, conventionally
assets/:
<Img src={staticFile("logo.png")} /><img src="assets/logo.png" />When translating, copy the asset from remotion-src/public/x to
hf-src/assets/x. Multiple files can be batched with a setup script;
see T2’s setup.sh for an example pattern.
<Audio src={staticFile("music.wav")} volume={0.5} /><audio
data-start="0"
data-duration="6"
data-track-index="2"
data-volume="0.5"
src="assets/music.wav"
></audio>data-start and data-duration are required — the runtime needs them to
schedule the audio. Default to the composition’s full duration if Remotion
didn’t specify trim.
<Audio src={staticFile("music.wav")} volume={(f) => interpolate(f, [0, 30], [0, 1])} />Volume ramps become a data-automation volume lane on the <audio>
(form in hyperframes-core/references/creator-editing-recipes.md); data-volume
is the static baseline.
<Audio src={staticFile("music.wav")} startFrom={60} endAt={180} playbackRate={1.5} /><audio
data-start="0"
data-duration="<resolved from trim>"
data-trim-start="2"
data-trim-end="6"
data-playback-rate="1.5"
src="assets/music.wav"
></audio>startFrom / endAt are frame indexes; convert to seconds.
<Video src={staticFile("intro.mp4")} muted playsInline />
<OffthreadVideo src={staticFile("intro.mp4")} muted /><video
muted
playsinline
data-start="0"
data-duration="5"
data-track-index="0"
src="assets/intro.mp4"
></video><OffthreadVideo> is a Remotion-specific optimization for headless
rendering. HF runs in headless Chrome already, so the off-thread variant
collapses to a regular <video>.
muted and playsinline are required for the runtime to autoplay
(browser policy). Always emit them.
<Img src={staticFile("logo.png")} style={{ width: 200, height: 200 }} /><img src="assets/logo.png" style="width: 200px; height: 200px;" />Width/height get rounded to integer px. If the original style has animated dimensions, the GSAP tween animates them — see timing.md.
<IFrame src="https://example.com" /><iframe src="https://example.com"></iframe>When HF detects a nested iframe in a composition, it auto-falls back to screenshot mode rather than the deterministic BeginFrame mode. This costs render performance but produces visibly-correct output. See hyperframes-vs-remotion.mdx (opens in a new tab) for details.
const handle = delayRender();
useEffect(() => {
loadAsset().then(() => continueRender(handle));
}, []);Drop. HF waits on asset readiness via the Frame Adapter pattern (opens in a new tab) — images, videos, fonts, and Lottie animations all signal load completion natively. There’s nothing to do at the application level.
If Remotion’s media source is a Buffer, dataURL, or URL.createObjectURL, the asset doesn’t exist on disk and can’t be copied via setup.sh. Two options:
hf-src/assets/.src="data:image/png;base64,...")
for small assets (< 100 KB).For audio/video Buffers, option 1 is preferred — base64-encoded media bloats the HTML and slows the renderer.