hyperframes/skills/remotion-to-hyperframes/references/limitations.md

# Translation limitations

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.

## React patterns the skill refuses

See [escape-hatch.md](escape-hatch.md). Any of these triggers
a bow-out:

- `useState`, `useReducer` driving animation
- `useEffect` / `useLayoutEffect` with non-empty deps (side effects)
- async `calculateMetadata`
- Third-party React UI libraries (MUI, Chakra, Mantine, antd, shadcn, Radix, NextUI)

`@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](escape-hatch.md).

## Patterns that work with caveats

### Volume ramps on `<Audio>`

Remotion accepts a function for `volume`:

```tsx
<Audio src={...} volume={(f) => interpolate(f, [0, 30], [0, 1])} />
```

HF supports static `data-volume` only. Translation: bake the ramp into
the audio file at translation time using `ffmpeg afade`, OR drop the
ramp with a note. The dropped-ramp path produces audibly different
output but visually-identical video, so SSIM passes — just flag it.

### `<Loop>` with stateful children

```tsx
<Loop durationInFrames={30}>
  <CounterThatIncrementsViaUseRef />
</Loop>
```

Loop with `repeat: -1` works for _visual_ repetition. 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.

### Remotion's `<Img>` with crossOrigin

```tsx
<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.

### Custom `presentation` in `<TransitionSeries>`

```tsx
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.

### Code-split components (`React.lazy`)

```tsx
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.

## Patterns that always work

- `<AbsoluteFill>` and `<Sequence>` (any nesting)
- `useCurrentFrame()` derivations: `interpolate`, `spring`, `Easing`,
  `interpolateColors`, manual math
- `<Audio>`, `<Video>`, `<Img>`, `<IFrame>` with simple props
- `staticFile()` references
- Custom React subcomponents that are pure functions of props
- Custom hooks that are pure derivations of `useCurrentFrame`
- `@remotion/lottie` (translates to HF's Lottie adapter)
- `@remotion/google-fonts/<Family>` (translates to `<link>` or `@font-face`)
- Sync `calculateMetadata` (resolved at translation time)
- `<TransitionSeries>` with built-in presentations (`fade`, `slide`,
  `wipe`, `clockWipe`, `flip`, `iris`)

## What the skill never tries to translate

These are out-of-scope by design:

- **HDR rendering** — HF supports HDR but Remotion doesn't, so there's
  nothing to translate from.
- **Variable frame rate** — both tools assume constant fps.
- **Multi-composition `<Composition>` lists** — translate one at a
  time. The skill prompts the user to choose which composition.
- **Remotion Studio props panel** — visual prop editing in HF Studio
  needs different infrastructure; out of scope.

## Reporting gaps to the user

When translation produces _something_ but the something has gaps, write
a `TRANSLATION_NOTES.md` next to the output:

```markdown
# Translation notes

The following Remotion patterns were translated with caveats:

- `<Audio volume={(f) => ...}>` (line 15): volume ramp dropped — added
  static `data-volume="0.5"`. To preserve the ramp, run
  `ffmpeg -i music.wav -af "afade=t=in:st=0:d=1" music.faded.wav` and
  swap the source file.
- `<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.