Setting the file. One moment.
Skill 32 · Remotion To Hyperframes
Subchapter 32.5
references/limitations.mdMarkdown5 KBView on GitHub
What the skill explicitly cannot translate, separated from the
blocker-list (which is enforced by lint_source.py). These are
known gaps — surface them to the user as translation notes
when translating the surrounding composition.
Scripts
GitkeepscriptsSee escape-hatch.md. Any of these triggers a bow-out:
useState, useReducer driving animationuseEffect / useLayoutEffect with non-empty deps (side effects)calculateMetadata@remotion/lambda is no longer in this list — it’s a warning, not a
blocker, because Lambda config is orthogonal to composition rendering.
The skill drops the imports and renderMediaOnLambda(...) calls and
writes a TRANSLATION_NOTES.md entry. See
escape-hatch.md.
Remotion accepts a function for volume:
<Audio src={...} volume={(f) => interpolate(f, [0, 30], [0, 1])} />HF ramps volume with a data-automation volume lane on the <audio>
(form in hyperframes-core/references/creator-editing-recipes.md).
Translation: write the lane from the interpolate points, OR bake the ramp
into the audio file with ffmpeg afade. The dropped-ramp path produces audibly different
output but visually-identical video, so SSIM passes — just flag it.
<Loop durationInFrames={30}>
<CounterThatIncrementsViaUseRef />
</Loop>A bounded GSAP repeat can reproduce visual repetition when its finite count is derived
from the visible duration. If the looped child has cross-iteration state (a counter, a
randomness seed), HF won’t reproduce it identically per iteration. Bow out unless the child
is fully deterministic per-iteration; never use repeat: -1.
<Img src="https://other-domain.com/x.png" crossOrigin="anonymous" />HF’s renderer doesn’t enforce CORS the same way Remotion does. Most
public images work; private images served with auth headers won’t.
If the source uses crossOrigin="use-credentials", the asset needs
to be downloaded and inlined at translation time.
const customPresentation: PresentationComponent = ({ children, presentationProgress }) => {
return <div style={{ filter: `blur(${(1 - presentationProgress) * 20}px)` }}>{children}</div>;
};Pure presentations (transform/filter/opacity computed from progress)
translate to GSAP tweens cleanly. Presentations that read
useCurrentFrame() internally or have stateful children don’t —
bow out.
const HeavyChart = React.lazy(() => import("./HeavyChart"));React.lazy is async and doesn’t fit the deterministic-render model.
Translate to a regular import; the resulting HF composition will
just include all the code upfront.
<AbsoluteFill> and <Sequence> (any nesting)useCurrentFrame() derivations: interpolate, spring, Easing,
interpolateColors, manual math<Audio>, <Video>, <Img>, <IFrame> with simple propsstaticFile() referencesuseCurrentFrame@remotion/lottie (translates to HF’s Lottie adapter)@remotion/google-fonts/<Family> (translates to <link> or @font-face)calculateMetadata (resolved at translation time)<TransitionSeries> with built-in presentations (fade, slide,
wipe, clockWipe, flip, iris)These are out-of-scope by design:
<Composition> lists — translate one at a
time. The skill prompts the user to choose which composition.When translation produces something but the something has gaps, write
a TRANSLATION_NOTES.md next to the output:
# Translation notes
The following Remotion patterns were translated with caveats:
- `<Audio volume={(f) => ...}>` (line 15): volume ramp written as a
`data-automation` volume lane (see `creator-editing-recipes.md`); the
ffmpeg `afade` bake-in is the alternative.
- `<HeavyChart>` (line 30): translated as inline HTML. The original
React.lazy boundary was dropped — bundle size unchanged because HF
serves a single HTML file.
If any of these caveats matter, consider the runtime interop pattern
instead.This file is also generated by the skill alongside the HF output, not held in the corpus.