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

style: apply oxfmt baseline formatting across all source files (#25)

Browse Source 
## Summary
- Run `oxfmt .` across the entire codebase to establish formatted baseline
- 299 files changed — mechanical formatting only, no logic changes
- Double quotes, semicolons, 2-space indent, trailing commas, 100 print width

Part 3/4 of [VA-851](https://linear.app/heygen/issue/VA-851/pre-migration-configure-eslint-prettier-and-conventional-commits)

## Test plan
- [x] `pnpm format:check` — all 426 files pass
- [x] `pnpm -r typecheck` — all packages pass
- [x] `pnpm build` — all packages build
- [x] All 348 tests pass
This commit is contained in:
Vance Ingalls
2026-03-23 17:15:14 -07:00
committed by GitHub
parent 323ff8f860
commit 20be2ea1c2
299 changed files with 27750 additions and 16792 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/producer/tests/style-3-prod/meta.json
+1 -6
View File
@@ -1,12 +1,7 @@
{
"name": "style-3-prod",
"description": "Regression fixture imported from normalized style pack style-3-prod",
"tags": [
"style-regression",
"prod-style",
"slow",
"landscape"
],
"tags": ["style-regression", "prod-style", "slow", "landscape"],
"minPsnr": 30,
"maxFrameFailures": 0,
"minAudioCorrelation": 0.9,
packages/producer/tests/style-3-prod/output/compiled.html
+650 -438
View File
File diff suppressed because one or more lines are too long
packages/producer/tests/style-3-prod/src/code_review.md
+11
View File
@@ -1,14 +1,17 @@
# HyperFrame Schema Compliance Review
## Executive Summary
- Total files reviewed: 4
- Critical issues: 0
- Overall compliance status: PASS
## Critical Issues
None. All files now comply with the HyperFrame schema.
## Compliance Checklist
- [x] All compositions have `data-width` and `data-height` attributes
- [x] All timelines are finite with duration > 0
- [x] All compositions registered in `window.__timelines`
@@ -28,26 +31,34 @@ None. All files now comply with the HyperFrame schema.
## File Reviews
### index.html
**Status**: COMPLIANT
**Issues Found**:
- None. Correctly uses `data-composition-id`, `data-width`, `data-height`, and `data-duration`. Registers `master` timeline.
### compositions/intro.html
**Status**: COMPLIANT
**Issues Found**:
- None. Correctly uses `<template>`, registers `intro` timeline, and has required attributes.
### compositions/captions.html
**Status**: HAS_ISSUES
**Issues Found**:
- **Line 95**: Attempting to set `data-duration` via script. This should be a static attribute on the composition root (Line 2).
- **Line 2**: `data-duration="30"` is set, but the script calculates a different duration. These should be synchronized manually in the HTML.
### compositions/graphics.html
**Status**: COMPLIANT
**Issues Found**:
- **Line 135**: Redundant GSAP script import inside a composition template. While not a schema violation, it's unnecessary as GSAP is loaded in `index.html`.
packages/producer/tests/style-3-prod/src/compositions/captions.html
+64 -16
View File
@@ -7,7 +7,7 @@
width: 1920px;
height: 1080px;
position: relative;
font-family: 'Helvetica', 'Arial', sans-serif;
font-family: "Helvetica", "Arial", sans-serif;
font-weight: bold;
overflow: hidden;
}
@@ -24,7 +24,7 @@
}
[data-composition-id="captions"] .caption-box {
background-color: #0A1E3D; /* Solid navy */
background-color: #0a1e3d; /* Solid navy */
padding: 20px 40px;
display: none; /* Hidden by default, shown via GSAP */
justify-content: center;
@@ -33,7 +33,7 @@
}
[data-composition-id="captions"] .caption-text {
color: #F2F2F2; /* Off-white */
color: #f2f2f2; /* Off-white */
font-size: 72px;
text-transform: uppercase; /* Swiss style often uses uppercase for impact */
letter-spacing: -2px;
@@ -44,9 +44,57 @@
</style>
<script>
(function() {
const TRANSCRIPT = [{'text': 'We', 'start': 0.119, 'end': 0.259}, {'text': 'asked', 'start': 0.319, 'end': 0.479}, {'text': 'what', 'start': 0.519, 'end': 0.659}, {'text': 'you', 'start': 0.699, 'end': 0.819}, {'text': 'needed.', 'start': 0.859, 'end': 1.819}, {'text': 'Forty-seven', 'start': 1.86, 'end': 2.299}, {'text': 'percent', 'start': 2.399, 'end': 2.679}, {'text': 'of', 'start': 2.7, 'end': 2.799}, {'text': 'you', 'start': 2.839, 'end': 2.939}, {'text': 'said', 'start': 3.039, 'end': 3.179}, {'text': 'motion', 'start': 3.24, 'end': 3.559}, {'text': 'graphics,', 'start': 3.579, 'end': 4.599}, {'text': 'sixty-two', 'start': 4.679, 'end': 5.179}, {'text': 'percent', 'start': 5.299, 'end': 5.759}, {'text': 'said', 'start': 5.859, 'end': 5.98}, {'text': 'static', 'start': 6.079, 'end': 6.399}, {'text': 'content', 'start': 6.46, 'end': 6.879}, {'text': 'was', 'start': 6.92, 'end': 7.079}, {'text': 'costing', 'start': 7.099, 'end': 7.48}, {'text': 'you', 'start': 7.5, 'end': 7.579}, {'text': 'attention,', 'start': 7.679, 'end': 8.659}, {'text': 'and', 'start': 8.699, 'end': 8.86}, {'text': 'three', 'start': 8.88, 'end': 9.06}, {'text': 'out', 'start': 9.079, 'end': 9.18}, {'text': 'of', 'start': 9.199, 'end': 9.34}, {'text': 'four', 'start': 9.38, 'end': 9.799}, {'text': 'said', 'start': 9.84, 'end': 10.0}, {'text': 'you', 'start': 10.019, 'end': 10.159}, {'text': 'know', 'start': 10.179, 'end': 10.36}, {'text': 'the', 'start': 10.38, 'end': 10.42}, {'text': 'look', 'start': 10.519, 'end': 10.699}, {'text': 'you', 'start': 10.739, 'end': 10.859}, {'text': 'want', 'start': 10.98, 'end': 11.34}, {'text': 'but', 'start': 11.359, 'end': 11.52}, {'text': "don't", 'start': 11.56, 'end': 11.779}, {'text': 'have', 'start': 11.819, 'end': 11.94}, {'text': 'the', 'start': 11.96, 'end': 12.06}, {'text': 'editing', 'start': 12.079, 'end': 12.4}, {'text': 'skills', 'start': 12.52, 'end': 12.86}, {'text': 'to', 'start': 12.88, 'end': 13.0}, {'text': 'get', 'start': 13.019, 'end': 13.18}, {'text': 'there.', 'start': 13.22, 'end': 14.22}, {'text': 'So', 'start': 14.239, 'end': 14.399}, {'text': 'we', 'start': 14.42, 'end': 14.52}, {'text': 'built', 'start': 14.619, 'end': 14.88}, {'text': 'Editor', 'start': 15.079, 'end': 15.42}, {'text': 'Agent.', 'start': 15.619, 'end': 16.02}];
const container = document.getElementById('caption-container');
(function () {
const TRANSCRIPT = [
{ text: "We", start: 0.119, end: 0.259 },
{ text: "asked", start: 0.319, end: 0.479 },
{ text: "what", start: 0.519, end: 0.659 },
{ text: "you", start: 0.699, end: 0.819 },
{ text: "needed.", start: 0.859, end: 1.819 },
{ text: "Forty-seven", start: 1.86, end: 2.299 },
{ text: "percent", start: 2.399, end: 2.679 },
{ text: "of", start: 2.7, end: 2.799 },
{ text: "you", start: 2.839, end: 2.939 },
{ text: "said", start: 3.039, end: 3.179 },
{ text: "motion", start: 3.24, end: 3.559 },
{ text: "graphics,", start: 3.579, end: 4.599 },
{ text: "sixty-two", start: 4.679, end: 5.179 },
{ text: "percent", start: 5.299, end: 5.759 },
{ text: "said", start: 5.859, end: 5.98 },
{ text: "static", start: 6.079, end: 6.399 },
{ text: "content", start: 6.46, end: 6.879 },
{ text: "was", start: 6.92, end: 7.079 },
{ text: "costing", start: 7.099, end: 7.48 },
{ text: "you", start: 7.5, end: 7.579 },
{ text: "attention,", start: 7.679, end: 8.659 },
{ text: "and", start: 8.699, end: 8.86 },
{ text: "three", start: 8.88, end: 9.06 },
{ text: "out", start: 9.079, end: 9.18 },
{ text: "of", start: 9.199, end: 9.34 },
{ text: "four", start: 9.38, end: 9.799 },
{ text: "said", start: 9.84, end: 10.0 },
{ text: "you", start: 10.019, end: 10.159 },
{ text: "know", start: 10.179, end: 10.36 },
{ text: "the", start: 10.38, end: 10.42 },
{ text: "look", start: 10.519, end: 10.699 },
{ text: "you", start: 10.739, end: 10.859 },
{ text: "want", start: 10.98, end: 11.34 },
{ text: "but", start: 11.359, end: 11.52 },
{ text: "don't", start: 11.56, end: 11.779 },
{ text: "have", start: 11.819, end: 11.94 },
{ text: "the", start: 11.96, end: 12.06 },
{ text: "editing", start: 12.079, end: 12.4 },
{ text: "skills", start: 12.52, end: 12.86 },
{ text: "to", start: 12.88, end: 13.0 },
{ text: "get", start: 13.019, end: 13.18 },
{ text: "there.", start: 13.22, end: 14.22 },
{ text: "So", start: 14.239, end: 14.399 },
{ text: "we", start: 14.42, end: 14.52 },
{ text: "built", start: 14.619, end: 14.88 },
{ text: "Editor", start: 15.079, end: 15.42 },
{ text: "Agent.", start: 15.619, end: 16.02 },
];
const container = document.getElementById("caption-container");
const tl = gsap.timeline({ paused: true });
if (!TRANSCRIPT || TRANSCRIPT.length === 0) {
@@ -57,7 +105,7 @@
// Group transcript into max 5 words per group
const groups = [];
let currentGroup = [];
TRANSCRIPT.forEach((word, index) => {
currentGroup.push(word);
// Group by 5 words OR if it's the last word
@@ -69,14 +117,14 @@
// Create DOM elements and timeline for each group
groups.forEach((group, i) => {
const box = document.createElement('div');
box.className = 'caption-box';
const box = document.createElement("div");
box.className = "caption-box";
box.id = `group-${i}`;
const text = document.createElement('div');
text.className = 'caption-text';
text.textContent = group.map(w => w.text).join(' ');
const text = document.createElement("div");
text.className = "caption-text";
text.textContent = group.map((w) => w.text).join(" ");
box.appendChild(text);
container.appendChild(box);
@@ -84,8 +132,8 @@
const endTime = group[group.length - 1].end;
// Hard cut animation (no fades) as requested
tl.set(box, { display: 'flex' }, startTime);
tl.set(box, { display: 'none' }, endTime);
tl.set(box, { display: "flex" }, startTime);
tl.set(box, { display: "none" }, endTime);
});
window.__timelines["captions"] = tl;
packages/producer/tests/style-3-prod/src/compositions/graphics.html
+51 -43
View File
@@ -31,8 +31,8 @@
<style>
[data-composition-id="graphics"] {
font-family: 'Helvetica', Arial, sans-serif;
color: #0A1E3D;
font-family: "Helvetica", Arial, sans-serif;
color: #0a1e3d;
background: transparent;
width: 1920px;
height: 1080px;
@@ -56,9 +56,9 @@
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
background: #F2F2F2;
background: #f2f2f2;
padding: 40px;
border-left: 10px solid #D4A017;
border-left: 10px solid #d4a017;
box-shadow: 20px 20px 0px rgba(10, 30, 61, 0.1);
}
@@ -81,7 +81,7 @@
[data-composition-id="graphics"] .stat-value {
font-size: 140px;
font-weight: 900;
color: #D4A017;
color: #d4a017;
line-height: 0.8;
margin-bottom: 15px;
}
@@ -89,7 +89,7 @@
[data-composition-id="graphics"] .stat-label {
font-size: 24px;
font-weight: 300; /* Lighter weight */
color: #0A1E3D;
color: #0a1e3d;
letter-spacing: 2px;
text-transform: uppercase;
}
@@ -98,16 +98,16 @@
[data-composition-id="graphics"] .progress-container {
width: 100%;
height: 24px;
background: #E0E0E0;
background: #e0e0e0;
margin-top: 30px;
border: 2px solid #0A1E3D;
border: 2px solid #0a1e3d;
position: relative;
}
[data-composition-id="graphics"] .progress-bar {
width: 0%;
height: 100%;
background: #D4A017;
background: #d4a017;
}
/* Grid Blocks for Stat 3 */
@@ -120,23 +120,23 @@
[data-composition-id="graphics"] .block {
width: 80px;
height: 80px;
border: 3px solid #0A1E3D;
border: 3px solid #0a1e3d;
}
[data-composition-id="graphics"] .block.gold {
background: #D4A017;
background: #d4a017;
}
[data-composition-id="graphics"] .block.navy {
background: #0A1E3D;
background: #0a1e3d;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
(function() {
(function () {
const tl = gsap.timeline({ paused: true });
// Timing Constants
const S1_START = 1.86;
const S1_END = 4.5;
@@ -144,55 +144,63 @@
const S2_END = 8.6;
const S3_START = 8.88;
const S3_END = 14.2;
const SLIDE_DUR = 0.25; // 250ms
const SHARP_EASE = "power2.out";
// Stat 1 Animation
tl.fromTo('#stat1',
{ x: -200, opacity: 0 },
{ x: 0, opacity: 1, duration: SLIDE_DUR, ease: SHARP_EASE },
S1_START
tl.fromTo(
"#stat1",
{ x: -200, opacity: 0 },
{ x: 0, opacity: 1, duration: SLIDE_DUR, ease: SHARP_EASE },
S1_START,
);
tl.to('#stat1',
{ x: 200, opacity: 0, duration: SLIDE_DUR, ease: "power2.in" },
S1_END - SLIDE_DUR
tl.to(
"#stat1",
{ x: 200, opacity: 0, duration: SLIDE_DUR, ease: "power2.in" },
S1_END - SLIDE_DUR,
);
// Stat 2 Animation
tl.fromTo('#stat2',
{ y: 200, opacity: 0 },
{ y: 0, opacity: 1, duration: SLIDE_DUR, ease: SHARP_EASE },
S2_START
tl.fromTo(
"#stat2",
{ y: 200, opacity: 0 },
{ y: 0, opacity: 1, duration: SLIDE_DUR, ease: SHARP_EASE },
S2_START,
);
// Progress bar fill
tl.to('#stat2 .progress-bar',
{ width: '62%', duration: S2_END - S2_START - (SLIDE_DUR * 2), ease: "none" },
S2_START + SLIDE_DUR
tl.to(
"#stat2 .progress-bar",
{ width: "62%", duration: S2_END - S2_START - SLIDE_DUR * 2, ease: "none" },
S2_START + SLIDE_DUR,
);
tl.to('#stat2',
{ y: -200, opacity: 0, duration: SLIDE_DUR, ease: "power2.in" },
S2_END - SLIDE_DUR
tl.to(
"#stat2",
{ y: -200, opacity: 0, duration: SLIDE_DUR, ease: "power2.in" },
S2_END - SLIDE_DUR,
);
// Stat 3 Animation
tl.fromTo('#stat3',
{ x: 200, opacity: 0 },
{ x: 0, opacity: 1, duration: SLIDE_DUR, ease: SHARP_EASE },
S3_START
tl.fromTo(
"#stat3",
{ x: 200, opacity: 0 },
{ x: 0, opacity: 1, duration: SLIDE_DUR, ease: SHARP_EASE },
S3_START,
);
// Stagger blocks
tl.from('#stat3 .block',
{ scale: 0, duration: 0.3, stagger: 0.1, ease: "back.out(1.7)" },
S3_START + SLIDE_DUR
tl.from(
"#stat3 .block",
{ scale: 0, duration: 0.3, stagger: 0.1, ease: "back.out(1.7)" },
S3_START + SLIDE_DUR,
);
tl.to('#stat3',
{ x: -200, opacity: 0, duration: SLIDE_DUR, ease: "power2.in" },
S3_END - SLIDE_DUR
tl.to(
"#stat3",
{ x: -200, opacity: 0, duration: SLIDE_DUR, ease: "power2.in" },
S3_END - SLIDE_DUR,
);
window.__timelines["graphics"] = tl;
})();
</script>
</div>
</template>
</template>
packages/producer/tests/style-3-prod/src/compositions/intro.html
+41 -25
View File
@@ -10,7 +10,7 @@
<style>
[data-composition-id="intro"] {
background-color: #F5F5F5; /* Off-white */
background-color: #f5f5f5; /* Off-white */
width: 1920px;
height: 1080px;
display: flex;
@@ -36,7 +36,7 @@
top: 50%;
width: 0px;
height: 12px;
background-color: #0A1E3D; /* Navy */
background-color: #0a1e3d; /* Navy */
transform: translateY(-180px); /* Positioned above the text */
}
@@ -48,7 +48,7 @@
}
[data-composition-id="intro"] .title {
color: #0A1E3D;
color: #0a1e3d;
font-size: 180px;
font-weight: 900; /* Black weight */
line-height: 0.9;
@@ -59,7 +59,7 @@
}
[data-composition-id="intro"] .subtitle {
color: #0A1E3D;
color: #0a1e3d;
font-size: 64px;
font-weight: 300; /* Lighter weight for contrast */
line-height: 1.2;
@@ -72,7 +72,7 @@
</style>
<script>
(function() {
(function () {
const tl = gsap.timeline({ paused: true });
// Mechanical timing: 200ms (0.2s)
@@ -80,32 +80,48 @@
const STAGGER = 0.1;
// 1. Animate the grid line first
tl.to('.grid-line', {
width: '1200px',
duration: 0.4,
ease: 'power4.out'
}, 0.2);
tl.to(
".grid-line",
{
width: "1200px",
duration: 0.4,
ease: "power4.out",
},
0.2,
);
// 2. Slide in the title
tl.to('.title', {
x: 0,
duration: MECHANICAL_DURATION,
ease: 'power2.inOut'
}, 0.5);
tl.to(
".title",
{
x: 0,
duration: MECHANICAL_DURATION,
ease: "power2.inOut",
},
0.5,
);
// 3. Slide in the subtitle with a slight stagger
tl.to('.subtitle', {
x: 0,
duration: MECHANICAL_DURATION,
ease: 'power2.inOut'
}, 0.5 + STAGGER);
tl.to(
".subtitle",
{
x: 0,
duration: MECHANICAL_DURATION,
ease: "power2.inOut",
},
0.5 + STAGGER,
);
// 4. Subtle ambient motion (slow drift) to keep it alive
tl.to('.text-wrapper', {
x: 30,
duration: 1.16, // Adjusted to fit 1.86s total
ease: 'none'
}, 0.7);
tl.to(
".text-wrapper",
{
x: 30,
duration: 1.16, // Adjusted to fit 1.86s total
ease: "none",
},
0.7,
);
window.__timelines["intro"] = tl;
})();
packages/producer/tests/style-3-prod/src/design_review.md
+6
View File
@@ -1,6 +1,7 @@
# HyperFrames Design Review
## First Impression
This looks like a "Swiss Style" template that someone found in a dumpster and tried to glue back together. It’s a clinical, soulless mess that mistakes "minimalism" for "I didn't have time to finish the design."
---
@@ -8,18 +9,21 @@ This looks like a "Swiss Style" template that someone found in a dumpster and tr
## CRITICAL Design Failures
### The "Swiss Grid" is a Lie
**Where:** `assets/swiss-grid.svg` and `index.html`
**What's wrong:** You’ve included a grid background that looks like a blueprint for a parking lot. It’s distracting, cluttered, and serves no purpose other than to scream "I'm trying to be edgy." The intersections and thick lines create a visual vibration that makes the actual content hard to focus on.
**Why it matters:** A grid should be a guide for the designer, not a cage for the viewer. It’s visually exhausting and makes the entire composition feel like a technical drawing rather than a professional video.
**Fix it:** Lower the opacity of the grid to 0.05 or remove it entirely. Use the grid to align elements, don't make the viewer look at it.
### Typography Hierarchy is Non-Existent
**Where:** `compositions/intro.html` and `compositions/graphics.html`
**What's wrong:** You’re using Helvetica (the default choice of the uninspired) and just cranking the font size up to 180px. The "EDITOR AGENT" title is so massive it’s practically shouting in the viewer's face, while the subtitle is just... there. There’s no elegance, no play with weight, just "BIG TEXT" and "SMALLER TEXT."
**Why it matters:** Without a clear typographic hierarchy, the viewer doesn't know where to look first. It feels amateur and "default."
**Fix it:** Experiment with tighter letter spacing (kerning) and more dramatic weight contrasts. Try a heavier weight for the title and a much lighter, tracked-out weight for the subtitle.
### The "Gold" is Actually Mustard
**Where:** `compositions/graphics.html` (`#D4A017`)
**What's wrong:** You’ve paired a sophisticated Navy (`#0A1E3D`) with a "gold" that looks like expired Dijon mustard. It’s flat, muddy, and lacks any premium feel.
**Why it matters:** Color choice dictates the "vibe." This color palette feels like a budget airline from the 90s, not a cutting-edge "Editor Agent."
@@ -30,11 +34,13 @@ This looks like a "Swiss Style" template that someone found in a dumpster and tr
## Design Improvements
### Robotic Motion
**Where:** `compositions/graphics.html` and `index.html`
**The problem:** The animations are "mechanical" in the worst way. `power2.out` is the "I just started using GSAP" of easing functions. The A-roll video jumps around the screen like a glitchy security camera.
**Make it better:** Use more sophisticated easing like `expo.out` or `customEase`. Add some secondary motion—maybe the text doesn't just slide, it scales slightly or has a subtle blur on entry. Make the transitions feel like they have weight and momentum.
### Caption Box Laziness
**Where:** `compositions/captions.html`
**The problem:** A solid navy box with white text. It’s the most basic implementation possible. It covers up the A-roll and looks like a closed-captioning fail.
**Make it better:** Lose the solid box. Use a subtle text shadow or a semi-transparent blurred background (glassmorphism) to keep the text readable without blocking the frame. Or, lean into the Swiss style and use a high-contrast, offset background block that actually feels intentional.
packages/producer/tests/style-3-prod/src/index.html
+222 -147
View File
@@ -1,172 +1,247 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Swiss Grid - Editor Agent</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<style>
body, html {
margin: 0;
padding: 0;
width: 1920px;
height: 1080px;
background-color: #F2F2F2;
overflow: hidden;
font-family: 'Helvetica', Arial, sans-serif;
}
body,
html {
margin: 0;
padding: 0;
width: 1920px;
height: 1080px;
background-color: #f2f2f2;
overflow: hidden;
font-family: "Helvetica", Arial, sans-serif;
}
#master-root {
width: 1920px;
height: 1080px;
position: relative;
}
#master-root {
width: 1920px;
height: 1080px;
position: relative;
}
.background-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.background-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
/* A-roll styling */
#short_mag_cut_frame {
position: absolute;
border-radius: 8px; /* Required */
z-index: 1;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
overflow: hidden;
background: #000;
}
/* A-roll styling */
#short_mag_cut_frame {
position: absolute;
border-radius: 8px; /* Required */
z-index: 1;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
overflow: hidden;
background: #000;
}
#short_mag_cut,
#short_mag_cut_frame > img.__render_frame__,
#short_mag_cut_frame > img.__preview_render_frame__ {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
#short_mag_cut,
#short_mag_cut_frame > img.__render_frame__,
#short_mag_cut_frame > img.__preview_render_frame__ {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Overlay layers */
.overlay-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* Overlay layers */
.overlay-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
#intro-comp { z-index: 2; }
#graphics-comp { z-index: 3; }
#captions-comp { z-index: 4; }
#intro-comp {
z-index: 2;
}
#graphics-comp {
z-index: 3;
}
#captions-comp {
z-index: 4;
}
</style>
</head>
<body>
<div id="master-root" data-composition-id="master" data-width="1920" data-height="1080" data-duration="16.04">
<!-- Background Grid -->
<img id="bg-grid"
class="background-grid"
src="assets/swiss-grid.svg"
alt="Grid"
data-start="0"
data-duration="16.04"
data-track-index="0">
</head>
<body>
<div
id="master-root"
data-composition-id="master"
data-width="1920"
data-height="1080"
data-duration="16.04"
>
<!-- Background Grid -->
<img
id="bg-grid"
class="background-grid"
src="assets/swiss-grid.svg"
alt="Grid"
data-start="0"
data-duration="16.04"
data-track-index="0"
/>
<!-- A-roll Video -->
<div id="short_mag_cut_frame">
<video id="short_mag_cut"
src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/uploaded_assets/8eb26801_b5ca4d50bb91437dac375c58b86d005c.mp4"
data-start="0"
data-duration="16.04"
data-track-index="1">
</video>
</div>
<!-- A-roll Video -->
<div id="short_mag_cut_frame">
<video
id="short_mag_cut"
src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/uploaded_assets/8eb26801_b5ca4d50bb91437dac375c58b86d005c.mp4"
data-start="0"
data-duration="16.04"
data-track-index="1"
></video>
</div>
<!-- Intro Sub-composition -->
<div id="intro-comp"
class="overlay-layer"
data-composition-id="intro"
data-composition-src="compositions/intro.html"
data-start="0"
data-duration="1.86"
data-track-index="2">
</div>
<!-- Intro Sub-composition -->
<div
id="intro-comp"
class="overlay-layer"
data-composition-id="intro"
data-composition-src="compositions/intro.html"
data-start="0"
data-duration="1.86"
data-track-index="2"
></div>
<!-- Graphics Sub-composition -->
<div id="graphics-comp"
class="overlay-layer"
data-composition-id="graphics"
data-composition-src="compositions/graphics.html"
data-start="0"
data-duration="16.04"
data-track-index="3">
</div>
<!-- Graphics Sub-composition -->
<div
id="graphics-comp"
class="overlay-layer"
data-composition-id="graphics"
data-composition-src="compositions/graphics.html"
data-start="0"
data-duration="16.04"
data-track-index="3"
></div>
<!-- Captions Sub-composition -->
<div id="captions-comp"
class="overlay-layer"
data-composition-id="captions"
data-composition-src="compositions/captions.html"
data-start="0"
data-duration="16.04"
data-track-index="4">
</div>
<!-- Captions Sub-composition -->
<div
id="captions-comp"
class="overlay-layer"
data-composition-id="captions"
data-composition-src="compositions/captions.html"
data-start="0"
data-duration="16.04"
data-track-index="4"
></div>
<!-- Sound Effects -->
<audio id="sfx-intro" data-start="0" data-track-index="5" data-duration="1" src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/051b5d38_af2426f283a749de94ab615d459a565d.mp3"></audio>
<audio id="sfx-stat1" data-start="1.86" data-track-index="5" data-duration="1" src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/bd3cb328_5d3f0ddf41c14bb8bfad8ae242024334.mp3"></audio>
<audio id="sfx-stat2" data-start="4.68" data-track-index="5" data-duration="1" src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/61ada7ed_142d9432f783410185afebd0d00f1b7a.mp3"></audio>
<audio id="sfx-stat3" data-start="8.88" data-track-index="5" data-duration="1" src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/bd3cb328_5d3f0ddf41c14bb8bfad8ae242024334.mp3"></audio>
<!-- Sound Effects -->
<audio
id="sfx-intro"
data-start="0"
data-track-index="5"
data-duration="1"
src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/051b5d38_af2426f283a749de94ab615d459a565d.mp3"
></audio>
<audio
id="sfx-stat1"
data-start="1.86"
data-track-index="5"
data-duration="1"
src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/bd3cb328_5d3f0ddf41c14bb8bfad8ae242024334.mp3"
></audio>
<audio
id="sfx-stat2"
data-start="4.68"
data-track-index="5"
data-duration="1"
src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/61ada7ed_142d9432f783410185afebd0d00f1b7a.mp3"
></audio>
<audio
id="sfx-stat3"
data-start="8.88"
data-track-index="5"
data-duration="1"
src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/bd3cb328_5d3f0ddf41c14bb8bfad8ae242024334.mp3"
></audio>
<script>
window.__timelines = window.__timelines || {};
const masterTL = gsap.timeline({ paused: true });
const v = document.getElementById('short_mag_cut_frame');
<script>
window.__timelines = window.__timelines || {};
// --- A-ROLL MOVEMENT (Structured Swiss Layout) ---
// 1. Entrance (0-1.86s): Slide in from left, settle centered for Intro
masterTL.fromTo(v,
{ x: -1000, y: 120, width: 960, height: 840 },
{ x: 480, y: 120, width: 960, height: 840, duration: 0.8, ease: "power2.out" },
0
);
const masterTL = gsap.timeline({ paused: true });
const v = document.getElementById("short_mag_cut_frame");
// 2. Stat 1 (1.86s - 4.68s): Move to right side (Graphic is on left)
masterTL.to(v, {
x: 1080, y: 120, width: 720, height: 720,
duration: 0.25, ease: "expo.out"
}, 1.86);
// --- A-ROLL MOVEMENT (Structured Swiss Layout) ---
// 3. Stat 2 (4.68s - 8.88s): Stay right, zoom in slightly
masterTL.to(v, {
x: 1080, y: 60, width: 780, height: 780,
duration: 0.25, ease: "expo.out"
}, 4.68);
// 1. Entrance (0-1.86s): Slide in from left, settle centered for Intro
masterTL.fromTo(
v,
{ x: -1000, y: 120, width: 960, height: 840 },
{ x: 480, y: 120, width: 960, height: 840, duration: 0.8, ease: "power2.out" },
0,
);
// 4. Stat 3 (8.88s - 14.2s): Move to left side (Graphic is on right)
masterTL.to(v, {
x: 120, y: 120, width: 720, height: 720,
duration: 0.25, ease: "expo.out"
}, 8.88);
// 2. Stat 1 (1.86s - 4.68s): Move to right side (Graphic is on left)
masterTL.to(
v,
{
x: 1080,
y: 120,
width: 720,
height: 720,
duration: 0.25,
ease: "expo.out",
},
1.86,
);
// 5. Conclusion (14.2s - 16.04s): Center large
masterTL.to(v, {
x: 240, y: 60, width: 1440, height: 810,
duration: 0.5, ease: "expo.out"
}, 14.2);
// 3. Stat 2 (4.68s - 8.88s): Stay right, zoom in slightly
masterTL.to(
v,
{
x: 1080,
y: 60,
width: 780,
height: 780,
duration: 0.25,
ease: "expo.out",
},
4.68,
);
window.__timelines["master"] = masterTL;
</script>
// 4. Stat 3 (8.88s - 14.2s): Move to left side (Graphic is on right)
masterTL.to(
v,
{
x: 120,
y: 120,
width: 720,
height: 720,
duration: 0.25,
ease: "expo.out",
},
8.88,
);
// 5. Conclusion (14.2s - 16.04s): Center large
masterTL.to(
v,
{
x: 240,
y: 60,
width: 1440,
height: 810,
duration: 0.5,
ease: "expo.out",
},
14.2,
);
window.__timelines["master"] = masterTL;
</script>
</div>
</body>
</body>
</html>