mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-11 14:50:02 +00:00
James
9ff46d79b7
Adds the first two test fixtures the skill is graded against. Each fixture
ships:
- remotion-src/ full Remotion project (package.json, src/, remotion.config.ts, tsconfig.json)
- hf-src/ hand-translated HyperFrames composition (index.html)
- expected.json tier metadata + SSIM threshold + translation notes + measured validation
- README.md human walk-through of the translation choices
- setup.sh (T2 only) generates binary assets (PNG, WAV) via ffmpeg
T1 — title-card-fade
- 3 s @ 30 fps, 1280x720
- Single AbsoluteFill, single useCurrentFrame interpolate
with multi-segment input [0,15,75,90] -> [0,1,1,0]
- Validated mean SSIM 0.974, threshold 0.95
(~0.025 gap from font-fallback divergence between Remotion's bundled
Chromium and HF's chrome-headless-shell)
T2 — title-image-outro
- 6 s @ 30 fps, 1280x720, three Sequences (TitleScene, ImageScene, OutroScene)
- Exercises spring, interpolate, Audio, Img, staticFile
- Spring -> GSAP back.out(1.4) translation
- Validated mean SSIM 0.985, threshold 0.95
(translation came out cleaner than predicted; spring->back.out drift was
smaller than the ~0.05 budget I'd expected)
- setup.sh generates a 200x200 blue PNG and a 6 s silent WAV via ffmpeg
so binaries stay out of the repo
Calibration done end-to-end: rendered Remotion baseline + HF translation,
ran scripts/render_diff.sh, set thresholds ~0.02 below measured p05.
Critical Remotion config: setVideoImageFormat("png") + setColorSpace("bt709").
The default JPEG output writes yuvj420p (full-range) which costs ~0.05 SSIM
vs HF's yuv420p (limited-range). Both fixtures' remotion.config.ts encode
this so render_diff.sh measures translation fidelity, not encoder differences.
Both fixtures lint clean (0 blockers via scripts/lint_source.py).
T2 staticFile() references correctly flagged as info-level findings.
The fixtures are not yet wired into CI — that comes with PR 7's orchestrator.
For now, render and eval are documented in each README and run by hand.
2.2 KiB
2.2 KiB
Tier 1 — title-card-fade
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.
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.
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 eval harness (from skill scripts/)
../../../scripts/render_diff.sh ./remotion-src/out/baseline.mp4 ./hf.mp4 ./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.