Setting the file. One moment.
Skill 32 · Remotion To Hyperframes
Subchapter 32.39
assets/test-corpus/tier-2-multi-scene/README.mdMarkdown3 KBView on GitHub
Scripts
GitkeepscriptsThree-scene composition. Each scene exercises a different Remotion idiom:
spring({damping:12, stiffness:100, mass:1})
driving a transform: scale() on text. Tests the lossy spring → GSAP ease translation.staticFile-loaded image and
linearly scales it from 0.8 → 1.0. Tests asset paths + linear interpolate.A silent 6-second WAV plays throughout at volume={0.5}. Tests <Audio> translation.
If a translation passes T2, the skill correctly handles <Sequence> boundaries,
<Audio> / <Img> / staticFile, and the Remotion spring → GSAP ease heuristic.
| Remotion | HyperFrames |
|---|---|
<Sequence from={0} durationInFrames={60}> | host <div data-composition-src="compositions/scene-1.html" data-start="0" data-duration="2" data-track-index="0"> |
spring({frame, fps, config: {damping:12, stiffness:100, mass:1}}) | gsap.to(target, { scale: 1, duration: 0.7, ease: "back.out(1.4)" }) |
<Audio src={staticFile("music.wav")} volume={0.5} /> | <audio src="assets/music.wav" data-start="0" data-duration="6" data-volume="0.5" data-track-index="1"> |
<Img src={staticFile("square.png")} /> | <img src="../assets/square.png"> inside compositions/scene-2.html (with setup.sh copying into both trees) |
interpolate(frame, [0, 15], [0, 1]) at 30 fps | gsap.to(target, { opacity: 1, duration: 0.5, ease: "none" }) |
The scene crossfading is a HyperFrames idiom, not a Remotion one: at scene boundaries
each scene sub-composition sets its own gsap.set(scene, { opacity: 0 }) at its local end so the scene disappears at the
right time. Remotion does this implicitly by virtue of <Sequence>‘s durationInFrames.
# 1. Generate the binary assets (PNG + WAV) via ffmpeg
./setup.sh
# 2. Render Remotion baseline
cd remotion-src && npm install && npm run render
# 3. Render HyperFrames translation
cd ../hf-src && npx hyperframes render --output ../hf.mp4
# 4. Compare
../../../scripts/render_diff.sh ./remotion-src/out/baseline.mp4 ./hf.mp4 ./diffSame threshold as T1 (expected.json codifies it for the orchestrator). Spring → back.out(1.4)
came in cleaner than predicted during calibration — the validated mean is 0.985 against the
0.95 gate. If the translation breaks anything else (spring overshoot wrong, stagger off,
asset path drift), mean SSIM will fall well below 0.95 — that’s the failure signal.