ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-10-30 17:27:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

test(producer): track the HDR overlay fixture's sub-composition

Browse Source
This commit is contained in:
Miguel Angel Simon Sierra
2026-10-28 04:35:07 -04:00
parent ffba78646c
commit 2eb9023c73
1 changed files with 58 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/producer/tests/hdr-overlay-filter-regression/src/compositions/reel.html
+58
View File
@@ -0,0 +1,58 @@
<template id="reel">
<div data-composition-id="reel" data-width="1920" data-height="1080" data-duration="4">
<style>
.stage {
position: absolute;
inset: 0;
filter: brightness(0.5);
}
.stage video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.progress {
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 40px;
background: #00ff00;
z-index: 10;
}
.logo {
position: absolute;
top: 60px;
right: 60px;
width: 240px;
height: 240px;
z-index: 10;
}
.title {
position: absolute;
top: 60px;
left: 60px;
padding: 20px;
font: 700 96px sans-serif;
color: #ffff00;
background: #0000ff;
z-index: 10;
}
</style>
<div class="stage">
<video class="clip" src="../assets/hlg-clip.mp4" data-start="0" data-duration="2" data-track-index="0" muted playsinline></video>
<video class="clip" src="../assets/sdr-clip.mp4" data-start="2" data-duration="2" data-track-index="0" muted playsinline></video>
</div>
<div class="progress" id="progress"></div>
<img class="logo" src="../assets/logo.svg" alt="" />
<div class="title">OVERLAY TEXT</div>
<script>
window.__timelines = window.__timelines || {};
window.__timelines.reel = gsap
.timeline({ paused: true })
.to("#progress", { width: "100%", duration: 4, ease: "none" }, 0);
</script>
</div>
</template>