Add HyperFrames skills (from heygen-com/hyperframes, Apache-2.0)
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FXVsD1DgdzZLiPuwtKzMSY
This commit is contained in:
300 files changed
+49175
No files matched your search
@@ -0,0 +1,251 @@
|
||||
# Sequencing translation: Sequence, Series, Composition root
|
||||
|
||||
How Remotion's nested `Sequence` tree maps to one sub-composition host per
|
||||
scene in the root, each with its own paused GSAP timeline in local time.
|
||||
|
||||
## The core idea
|
||||
|
||||
Remotion's `<Sequence from={F} durationInFrames={D}>` is a coordinate
|
||||
transform: it shifts `useCurrentFrame()` by `F` and clips the child
|
||||
component to the window `[F, F+D]`. HF doesn't have a per-element
|
||||
"current frame" — there's a single composition seek time and the
|
||||
runtime hides/shows elements based on their `data-start` / `data-duration`.
|
||||
|
||||
Result: the nested tree flattens into a list of scene hosts on the same
|
||||
parent, each with its own time window; each scene's content lives in its
|
||||
own sub-composition file.
|
||||
|
||||
## `<Composition>` → root `#stage`
|
||||
|
||||
```tsx
|
||||
<Composition
|
||||
id="MyVideo"
|
||||
component={MyVideo}
|
||||
durationInFrames={300}
|
||||
fps={30}
|
||||
width={1280}
|
||||
height={720}
|
||||
/>
|
||||
```
|
||||
|
||||
```html
|
||||
<div
|
||||
id="stage"
|
||||
data-composition-id="MyVideo"
|
||||
data-start="0"
|
||||
data-duration="10" <!-- 300/30 -->
|
||||
data-fps="30"
|
||||
data-width="1280"
|
||||
data-height="720"
|
||||
>
|
||||
<!-- composition content -->
|
||||
</div>
|
||||
```
|
||||
|
||||
`data-start="0"` is required on `#stage` (the runtime needs it to anchor
|
||||
playback; missing it triggers a lint warning).
|
||||
|
||||
## `<AbsoluteFill>` → positioned div
|
||||
|
||||
```tsx
|
||||
<AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>...children...</AbsoluteFill>
|
||||
```
|
||||
|
||||
```html
|
||||
<div style="position:absolute;inset:0;background-color:#0a0a0a;">...children...</div>
|
||||
```
|
||||
|
||||
`AbsoluteFill` is just a styled div in Remotion. Translate to a div with
|
||||
`position:absolute; inset:0` and copy through any other style props.
|
||||
|
||||
## `<Sequence>` → sub-composition host
|
||||
|
||||
```tsx
|
||||
<Sequence from={0} durationInFrames={90}>
|
||||
<TitleCard />
|
||||
</Sequence>
|
||||
```
|
||||
|
||||
The root `#stage` only holds a host per scene; the scene's markup, styles
|
||||
and timeline live in their own sub-composition file, so the Studio timeline
|
||||
gets one readable row per scene and the lint has no nested structure to flag.
|
||||
|
||||
```html
|
||||
<!-- index.html -->
|
||||
<div
|
||||
id="scene-1"
|
||||
class="clip"
|
||||
data-composition-id="scene-1"
|
||||
data-composition-src="compositions/scene-1.html"
|
||||
data-start="0"
|
||||
data-duration="3"
|
||||
data-track-index="0"
|
||||
></div>
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- compositions/scene-1.html: TitleCard children inlined, timeline keyed "scene-1", local time starts at 0 -->
|
||||
<template id="scene-1-template">
|
||||
<div data-composition-id="scene-1" data-width="1280" data-height="720" data-duration="3">
|
||||
<!-- TitleCard children -->
|
||||
<script>
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
window.__timelines["scene-1"] = tl;
|
||||
</script>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
Convert frames to seconds: `from/fps`, `durationInFrames/fps`. Pick a
|
||||
`data-track-index` per parallel rendering layer (background = 0,
|
||||
overlays = 1, audio = 2, etc.). Sequential scenes can share an index.
|
||||
Inside the sub-composition, time is local: a tween that started at `F/fps`
|
||||
in the root starts at `0` here. Asset paths are relative to the
|
||||
sub-composition file (`../assets/x.png`).
|
||||
|
||||
## Nested `<Sequence>` flattens
|
||||
|
||||
Remotion adds offsets when sequences nest:
|
||||
|
||||
```tsx
|
||||
<Sequence from={60} durationInFrames={120}>
|
||||
<Sequence from={30} durationInFrames={60}>
|
||||
<ImageScene />
|
||||
</Sequence>
|
||||
</Sequence>
|
||||
```
|
||||
|
||||
The inner sequence's effective window is `[60+30, 60+30+60] = [90, 150]`.
|
||||
|
||||
Translate by computing the sum and emitting one host with the resolved
|
||||
window; the scene's children go in its sub-composition file:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="image-scene"
|
||||
data-composition-src="compositions/image-scene.html"
|
||||
data-start="3"
|
||||
data-duration="2"
|
||||
data-track-index="0"
|
||||
></div>
|
||||
```
|
||||
|
||||
## `<Series>` → siblings with sequential offsets
|
||||
|
||||
```tsx
|
||||
<Series>
|
||||
<Series.Sequence durationInFrames={60}>
|
||||
<A />
|
||||
</Series.Sequence>
|
||||
<Series.Sequence durationInFrames={120}>
|
||||
<B />
|
||||
</Series.Sequence>
|
||||
<Series.Sequence durationInFrames={90}>
|
||||
<C />
|
||||
</Series.Sequence>
|
||||
</Series>
|
||||
```
|
||||
|
||||
Each `Sequence.Sequence` lives in the next time slot. Emit siblings
|
||||
with `data-start` accumulating (each host mounts its scene file):
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="a"
|
||||
data-composition-src="compositions/a.html"
|
||||
data-start="0"
|
||||
data-duration="2"
|
||||
data-track-index="0"
|
||||
></div>
|
||||
<div
|
||||
data-composition-id="b"
|
||||
data-composition-src="compositions/b.html"
|
||||
data-start="2"
|
||||
data-duration="4"
|
||||
data-track-index="0"
|
||||
></div>
|
||||
<div
|
||||
data-composition-id="c"
|
||||
data-composition-src="compositions/c.html"
|
||||
data-start="6"
|
||||
data-duration="3"
|
||||
data-track-index="0"
|
||||
></div>
|
||||
```
|
||||
|
||||
## Crossfading scene boundaries
|
||||
|
||||
Remotion `<Sequence>` shows/hides at hard boundaries by default. HF does
|
||||
the same — but if your composition needs a smooth fade between scenes,
|
||||
you have to drive opacity explicitly with GSAP at the boundary. A scene can
|
||||
hard-cut itself with `gsap.set` at its local end (the corpus fixtures do). A
|
||||
fade between two scenes goes on the scene hosts from the root timeline, since
|
||||
a scene's own timeline only sees its own file:
|
||||
|
||||
```js
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
tl.set(scene1, { opacity: 1 }, 0);
|
||||
tl.set(scene1, { opacity: 0 }, 2); // hard cut at 2s
|
||||
tl.set(scene2, { opacity: 1 }, 2);
|
||||
```
|
||||
|
||||
For a 0.5 s crossfade:
|
||||
|
||||
```js
|
||||
tl.to(scene1, { opacity: 0, duration: 0.5 }, 1.5);
|
||||
tl.to(scene2, { opacity: 1, duration: 0.5 }, 1.5);
|
||||
```
|
||||
|
||||
For Remotion `<TransitionSeries>` translations see [transitions.md](transitions.md).
|
||||
|
||||
## `<Loop>`
|
||||
|
||||
```tsx
|
||||
<Loop durationInFrames={30}>
|
||||
<Spinner />
|
||||
</Loop>
|
||||
```
|
||||
|
||||
HF doesn't have a `<Loop>` primitive. Translate it to a bounded GSAP timeline using
|
||||
the time available at its insertion point:
|
||||
|
||||
```js
|
||||
const cycleDuration = 1;
|
||||
const availableDuration = compositionDuration - 3;
|
||||
const repeat = Math.max(0, Math.floor(availableDuration / cycleDuration) - 1);
|
||||
const spinTl = gsap.timeline({ paused: true, repeat, repeatRefresh: false });
|
||||
spinTl.to(spinner, { rotate: 360, duration: 1.0, ease: "none" });
|
||||
// Embed in the main composition timeline at the right offset:
|
||||
mainTl.add(spinTl, 3);
|
||||
```
|
||||
|
||||
This is fragile — Remotion's `<Loop>` resets internal state every iteration,
|
||||
which GSAP repeat does too, but if the looped child has its own animation,
|
||||
you need to be careful that GSAP's `repeatRefresh` is on or off as needed.
|
||||
The finite count is required because HyperFrames seeks a bounded composition frame-by-frame.
|
||||
|
||||
## `<Freeze>`
|
||||
|
||||
```tsx
|
||||
<Freeze frame={30}>
|
||||
<Animated />
|
||||
</Freeze>
|
||||
```
|
||||
|
||||
Drop the wrapper. `<Freeze>` pins `useCurrentFrame()` at a constant for
|
||||
the children — but in HF, the children's animation is already driven by
|
||||
explicit GSAP tweens, so freeze translates to "don't tween this element".
|
||||
|
||||
## Multiple parallel tracks
|
||||
|
||||
When you have a background video + overlay text + audio playing
|
||||
simultaneously, use distinct `data-track-index` values:
|
||||
|
||||
```html
|
||||
<div data-track-index="0">background video</div>
|
||||
<div data-track-index="1">overlay text</div>
|
||||
<audio data-track-index="2" ...></audio>
|
||||
```
|
||||
|
||||
The runtime picks track ordering from the index. See [media.md](media.md)
|
||||
for media-specific track conventions.
|
||||
Reference in new issue
Block a user