mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 07:19:52 +00:00
JamesandClaude Opus 4.7
c9d5fe61ff
Align the no-op timeline duration with the root's data-duration. The
fixture's root has data-duration="3" but the placeholder timeline tween
was still { duration: 2 } — leftover from when I bumped the duration
from 2s to 3s to dodge the PSNR-checkpoint-at-1.99s parse edge case.
The tween is a no-op (no targets, no visible effect) so rendered pixels
don't change; baseline still passes Docker regression at 100/100
checkpoints.
Reuse + efficiency reviews otherwise clean. Two findings deferred:
silence.wav duplication is real but only 2 fixtures share it today —
worth extracting to tests/_shared/ when the third fixture lands.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
97 lines
2.7 KiB
HTML
97 lines
2.7 KiB
HTML
<!doctype html>
|
|
<html
|
|
lang="en"
|
|
data-composition-variables='[
|
|
{"id":"title","type":"string","label":"Title","default":"Default Title"},
|
|
{"id":"subtitle","type":"string","label":"Subtitle","default":"Default subtitle"},
|
|
{"id":"bgColor","type":"color","label":"Background","default":"#0b0b0d"}
|
|
]'
|
|
>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=1920, height=1080" />
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
}
|
|
body {
|
|
background: #0b0b0d;
|
|
font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
|
|
}
|
|
[data-composition-id="main"] {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
.title {
|
|
position: absolute;
|
|
top: 380px;
|
|
left: 0;
|
|
right: 0;
|
|
font-size: 140px;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
line-height: 1;
|
|
}
|
|
.subtitle {
|
|
position: absolute;
|
|
top: 600px;
|
|
left: 0;
|
|
right: 0;
|
|
font-size: 56px;
|
|
color: #9aa0a6;
|
|
text-align: center;
|
|
line-height: 1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div
|
|
id="root"
|
|
data-composition-id="main"
|
|
data-start="0"
|
|
data-duration="3"
|
|
data-width="1920"
|
|
data-height="1080"
|
|
>
|
|
<audio
|
|
id="silence-track"
|
|
src="silence.wav"
|
|
data-start="0"
|
|
data-duration="3"
|
|
data-track-index="0"
|
|
></audio>
|
|
<h1 id="title-el" class="title clip" data-start="0" data-duration="3"></h1>
|
|
<p id="subtitle-el" class="subtitle clip" data-start="0" data-duration="3"></p>
|
|
</div>
|
|
|
|
<script>
|
|
// Render-time values: declared defaults from data-composition-variables
|
|
// merged with overrides from meta.json's renderConfig.variables (which
|
|
// arrive via window.__hfVariables, injected by the engine).
|
|
const vars = window.__hyperframes.getVariables();
|
|
document.body.style.background = vars.bgColor;
|
|
document.getElementById("title-el").textContent = vars.title;
|
|
document.getElementById("subtitle-el").textContent = vars.subtitle;
|
|
|
|
window.__timelines = window.__timelines || {};
|
|
const tl = gsap.timeline({ paused: true });
|
|
// Static placement — no animation. Keeps the regression frame-stable
|
|
// and isolates "did the variables flow through?" from motion concerns.
|
|
tl.to({}, { duration: 3 });
|
|
window.__timelines["main"] = tl;
|
|
</script>
|
|
</body>
|
|
</html>
|