Skills › HyperFrames › remotion-to-hyperframes › README.md

README.md

41 lines · skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/README.md at a595755

Open on GitHub

1# Tier 1 — title-card-fade

Tier 1 — title-card-fade

Raw lines 1 to 2

3## What it tests

5The simplest non-trivial Remotion → HyperFrames translation. A single text

6element fades in over the first 0.5 s, holds for 2.0 s, and fades out over

7the last 0.5 s. No audio, no media, no custom components.

9If a translation can't pass T1, it's broken on table-stakes basics:

10`AbsoluteFill`, `useCurrentFrame`, `interpolate` with multi-segment input,

11and the timing offset between Remotion's frame-based driver and HF's

12paused-GSAP driver.

What it tests

The simplest non-trivial Remotion → HyperFrames translation. A single text element fades in over the first 0.5 s, holds for 2.0 s, and fades out over the last 0.5 s. No audio, no media, no custom components.

If a translation can't pass T1, it's broken on table-stakes basics: AbsoluteFill, useCurrentFrame, interpolate with multi-segment input, and the timing offset between Remotion's frame-based driver and HF's paused-GSAP driver.

Raw lines 3 to 13

14## Translation walk-through

16| Remotion | HyperFrames |

17| ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |

18| `<AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>` | `<body style="background: #0a0a0a">` + a positioned root div |

19| `useCurrentFrame()` | dropped — HF seeks the timeline |

20| `interpolate(frame, [0, 15, 75, 90], [0, 1, 1, 0])` at fps=30 | `gsap.timeline({ paused: true })` with three `.to()` calls at offsets 0s/0.5s/2.5s, each `ease: "none"` |

21| `<div style={{ opacity }}>HELLO</div>` | static markup; opacity is animated by the timeline |

23The Remotion→HF time conversion is `time = frame / fps`. So

24`[0, 15, 75, 90]` at 30 fps becomes `[0, 0.5, 2.5, 3.0]` seconds.

Translation walk-through

Remotion	HyperFrames
`<AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>`	`<body style="background: #0a0a0a">` + a positioned root div
`useCurrentFrame()`	dropped — HF seeks the timeline
`interpolate(frame, [0, 15, 75, 90], [0, 1, 1, 0])` at fps=30	`gsap.timeline({ paused: true })` with three `.to()` calls at offsets 0s/0.5s/2.5s, each `ease: "none"`
`<div style={{ opacity }}>HELLO</div>`	static markup; opacity is animated by the timeline

The Remotion→HF time conversion is time = frame / fps. So [0, 15, 75, 90] at 30 fps becomes [0, 0.5, 2.5, 3.0] seconds.

Raw lines 14 to 25

26## How to render and evaluate

28```bash

29# Render Remotion baseline

30cd remotion-src && npm install && npm run render

31# Renders to remotion-src/out/baseline.mp4

33# Render HyperFrames translation

34cd ../hf-src && npx hyperframes render --output ../hf.mp4

36# Compare with the HF CLI

37npx hyperframes diff ../remotion-src/out/baseline.mp4 ../hf.mp4 --out ../diff

38```

40`expected.json` documents the SSIM threshold (0.95) for this fixture; the

41calibrated mean against Remotion @ 4.0 with PNG/BT.709 output is 0.974.

How to render and evaluate

# Render Remotion baseline
cd remotion-src && npm install && npm run render
# Renders to remotion-src/out/baseline.mp4

# Render HyperFrames translation
cd ../hf-src && npx hyperframes render --output ../hf.mp4

# Compare with the HF CLI
npx hyperframes diff ../remotion-src/out/baseline.mp4 ../hf.mp4 --out ../diff

expected.json documents the SSIM threshold (0.95) for this fixture; the calibrated mean against Remotion @ 4.0 with PNG/BT.709 output is 0.974.

Raw lines 26 to 41