mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-08 10:46:06 +00:00
Miguel ÁngelandClaude Sonnet 4.6
dc864f3e6c
The text-rendering:geometricPrecision rule (b7bd9565) shifted glyph advances
~1% in headless Chrome. Baselines for png-sequence, heygen-promo-preview-assets,
and sub-composition-video were already regenerated — sub-comp-t0 was missed.
Also improves the fixture's visual contrast:
- Background: #07110d (near-black) → #0f172a (slate-900)
- Hook scene: background #1e293b, text #ef4444/#ffffff
- Later scene: background #334155, text #ffffff
- Absolute positioning for text elements (compiler inlines sub-comp
content at intrinsic width, collapsing the flex container)
Baseline regenerated inside Dockerfile.test per CLAUDE.md. Test passes:
0 failed frames, 100/100 checkpoints green.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
89 lines
2.1 KiB
HTML
89 lines
2.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<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 {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
background: #0f172a;
|
|
}
|
|
#root {
|
|
position: relative;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
background: #0f172a;
|
|
}
|
|
.scene {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
}
|
|
#scene-hook {
|
|
opacity: 1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div
|
|
id="root"
|
|
data-composition-id="main"
|
|
data-start="0"
|
|
data-duration="6"
|
|
data-width="1920"
|
|
data-height="1080"
|
|
>
|
|
<!-- First sub-comp at near-zero start: the bug trigger -->
|
|
<div
|
|
id="scene-hook"
|
|
class="scene"
|
|
data-layout-allow-overflow
|
|
data-composition-id="hook"
|
|
data-composition-src="compositions/hook.html"
|
|
data-start="0.001"
|
|
data-duration="2.0"
|
|
data-track-index="0"
|
|
></div>
|
|
|
|
<!-- Second sub-comp at a later start: works correctly -->
|
|
<div
|
|
id="scene-later"
|
|
class="scene"
|
|
data-layout-allow-overflow
|
|
data-composition-id="later"
|
|
data-composition-src="compositions/later.html"
|
|
data-start="2.5"
|
|
data-duration="3.5"
|
|
data-track-index="1"
|
|
></div>
|
|
</div>
|
|
|
|
<script>
|
|
window.__timelines = window.__timelines || {};
|
|
var tl = gsap.timeline({ paused: true });
|
|
|
|
// Transition: hook zooms out at 2.5s
|
|
tl.to("#scene-hook", { scale: 2.5, opacity: 0, duration: 0.4, ease: "power3.in" }, 2.5);
|
|
tl.fromTo(
|
|
"#scene-later",
|
|
{ scale: 0.5, opacity: 0 },
|
|
{ scale: 1, opacity: 1, duration: 0.4, ease: "power3.out" },
|
|
2.65,
|
|
);
|
|
|
|
window.__timelines["main"] = tl;
|
|
</script>
|
|
</body>
|
|
</html>
|