mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 07:19:52 +00:00
JamesandClaude Opus 4.6
a146c9e527
- New regression test `webm-transparency`: minimal transparent composition
rendered to WebM, validates VP9 codec and visual quality at 100
checkpoints against golden baseline
- Extend regression harness: `renderConfig.format` field ("mp4" | "webm"),
format-aware output paths and snapshot filenames
- Fix `extractMonoPcm16` to gracefully handle videos without audio
streams (WebM without audio was throwing instead of returning empty)
- Unit tests for `getEncoderPreset()`: VP9/yuva420p for WebM,
h264/yuv420p for MP4, preset mapping, quality preservation
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
72 lines
1.7 KiB
HTML
72 lines
1.7 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<style>
|
|
* { margin: 0; padding: 0; }
|
|
html, body { background: transparent; overflow: hidden; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div
|
|
id="root"
|
|
data-composition-id="main"
|
|
data-start="0"
|
|
data-duration="2"
|
|
data-width="640"
|
|
data-height="360"
|
|
style="width: 640px; height: 360px; background: transparent; position: relative"
|
|
>
|
|
<!-- Semi-transparent red box that animates across the frame -->
|
|
<div
|
|
id="box"
|
|
data-start="0"
|
|
data-duration="2"
|
|
data-track-index="0"
|
|
style="
|
|
width: 120px;
|
|
height: 120px;
|
|
background: rgba(255, 0, 0, 0.7);
|
|
border-radius: 16px;
|
|
position: absolute;
|
|
top: 120px;
|
|
left: 50px;
|
|
"
|
|
></div>
|
|
|
|
<!-- White text with transparent background -->
|
|
<div
|
|
id="label"
|
|
data-start="0.5"
|
|
data-duration="1.5"
|
|
data-track-index="1"
|
|
style="
|
|
font-family: sans-serif;
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
color: white;
|
|
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
|
|
position: absolute;
|
|
top: 280px;
|
|
left: 50px;
|
|
opacity: 0;
|
|
"
|
|
>Overlay Test</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
|
|
<script>
|
|
window.__timelines = window.__timelines || {};
|
|
const tl = gsap.timeline({ paused: true });
|
|
|
|
// Animate box sliding right
|
|
tl.to("#box", { left: 470, duration: 2, ease: "power2.inOut" }, 0);
|
|
|
|
// Fade in label
|
|
tl.to("#label", { opacity: 1, duration: 0.5, ease: "power2.out" }, 0.5);
|
|
|
|
window.__timelines["main"] = tl;
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|