ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-12 15:20:13 +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-7-prod/meta.json
+1 -6
View File
@@ -1,12 +1,7 @@
{
"name": "style-7-prod",
"description": "Regression fixture imported from normalized style pack style-7-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-7-prod/output/compiled.html
+528 -389
View File
File diff suppressed because one or more lines are too long
packages/producer/tests/style-7-prod/src/code_review.md
+12
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 found. All compositions follow the deterministic and finite timeline requirements.
## 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,36 +31,44 @@ None found. All compositions follow the deterministic and finite timeline requir
## File-by-File Analysis
### index.html
**Status**: COMPLIANT
**Observations**:
- Correctly defines the root composition with `data-composition-id="root"`.
- Properly loads sub-compositions using `data-composition-src`.
- Registers the root timeline in `window.__timelines`.
- Audio clip has all required attributes (`id`, `data-start`, `data-duration`, `data-track`).
### compositions/intro.html
**Status**: COMPLIANT
**Observations**:
- Uses `<template>` tag correctly.
- Composition root has `data-width`, `data-height`, and `data-duration`.
- Script is deterministic (uses string splitting and fixed durations).
- Timeline is correctly registered.
### compositions/captions.html
**Status**: COMPLIANT
**Observations**:
- Uses `<template>` tag correctly.
- Composition root has `data-width`, `data-height`, and `data-duration`.
- Script is deterministic, iterating over a fixed array of caption data.
- Timeline is correctly registered.
### compositions/main.html
**Status**: COMPLIANT
**Observations**:
- Uses `<template>` tag correctly.
- Composition root has `data-width`, `data-height`, and `data-duration`.
- Video clip has all required attributes (`id`, `data-start`, `data-duration`, `data-track`).
@@ -65,4 +76,5 @@ None found. All compositions follow the deterministic and finite timeline requir
- Timeline is correctly registered.
## Actionable Fixes
No fixes required. The project structure and implementation are in full accordance with the HyperFrame schema.
packages/producer/tests/style-7-prod/src/compositions/captions.html
+28 -14
View File
@@ -21,7 +21,12 @@
left: 0;
width: 100%;
height: 25%; /* Reduced height to focus on bottom */
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 100%);
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.9) 0%,
rgba(0, 0, 0, 0.6) 50%,
rgba(0, 0, 0, 0) 100%
);
pointer-events: none;
opacity: 0;
}
@@ -48,8 +53,8 @@
}
[data-composition-id="captions"] #caption-text {
color: #FFFFFF;
font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #ffffff;
font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 42px;
font-weight: 300; /* Light */
text-transform: uppercase;
@@ -60,10 +65,14 @@
</style>
<script>
(function() {
(function () {
const tl = gsap.timeline({ paused: true });
const container = document.querySelector('[data-composition-id="captions"] #caption-container');
const textElement = document.querySelector('[data-composition-id="captions"] #caption-text');
const container = document.querySelector(
'[data-composition-id="captions"] #caption-container',
);
const textElement = document.querySelector(
'[data-composition-id="captions"] #caption-text',
);
const bgGradient = document.querySelector('[data-composition-id="captions"] .bg-gradient');
const OFFSET = 0; // Adjusted to 0 as per standard unless specified otherwise by Lyra's context, but keeping logic flexible.
@@ -77,7 +86,7 @@
{ start: 10.0, end: 11.3, text: "KNOW THE LOOK YOU WANT" },
{ start: 11.3, end: 12.8, text: "BUT NO EDITING SKILLS" },
{ start: 12.8, end: 14.2, text: "TO GET THERE" },
{ start: 14.2, end: 16.2, text: "SO WE BUILT EDITOR AGENT" }
{ start: 14.2, end: 16.2, text: "SO WE BUILT EDITOR AGENT" },
];
if (captions.length > 0) {
@@ -85,19 +94,24 @@
const lastEnd = captions[captions.length - 1].end + OFFSET;
// Fade in gradient and container
tl.to([bgGradient, container], { opacity: 1, duration: 0.5, ease: "power2.out" }, firstStart);
tl.to(
[bgGradient, container],
{ opacity: 1, duration: 0.5, ease: "power2.out" },
firstStart,
);
captions.forEach((cap, index) => {
const startTime = cap.start + OFFSET;
// Update text
tl.set(textElement, { innerText: cap.text }, startTime);
// Subtle scale/fade effect for each new line to make it feel modern
tl.fromTo(textElement,
{ opacity: 0.7, scale: 0.98 },
{ opacity: 1, scale: 1, duration: 0.3, ease: "power1.out" },
startTime
tl.fromTo(
textElement,
{ opacity: 0.7, scale: 0.98 },
{ opacity: 1, scale: 1, duration: 0.3, ease: "power1.out" },
startTime,
);
});
packages/producer/tests/style-7-prod/src/compositions/intro.html
+51 -35
View File
@@ -14,7 +14,7 @@
justify-content: center;
align-items: center;
font-family: "Helvetica", "Arial", sans-serif;
color: #FFFFFF;
color: #ffffff;
overflow: hidden;
}
@@ -32,7 +32,7 @@
text-transform: uppercase;
letter-spacing: 1em;
/* Offset the last letter's spacing to keep it centered */
margin-right: -1em;
margin-right: -1em;
display: flex;
justify-content: center;
}
@@ -45,60 +45,76 @@
[data-composition-id="intro"] .rule {
width: 800px;
height: 4px;
background-color: #FFFFFF;
background-color: #ffffff;
transform: scaleX(0);
transform-origin: center;
}
</style>
<script>
(function() {
(function () {
const compId = "intro";
const root = document.querySelector(`[data-composition-id="${compId}"]`);
const titleEl = root.querySelector('.title');
const ruleEl = root.querySelector('.rule');
const titleEl = root.querySelector(".title");
const ruleEl = root.querySelector(".rule");
// Split text into spans for staggered animation
const text = titleEl.textContent;
titleEl.innerHTML = '';
[...text].forEach(char => {
const span = document.createElement('span');
span.textContent = char === ' ' ? '\u00A0' : char;
span.className = 'char';
titleEl.innerHTML = "";
[...text].forEach((char) => {
const span = document.createElement("span");
span.textContent = char === " " ? "\u00A0" : char;
span.className = "char";
titleEl.appendChild(span);
});
const tl = gsap.timeline({ paused: true });
// 1. Horizontal rule expands from center
tl.to(ruleEl, {
scaleX: 1,
duration: 1.5,
ease: "power4.inOut"
}, 0);
tl.to(
ruleEl,
{
scaleX: 1,
duration: 1.5,
ease: "power4.inOut",
},
0,
);
// 2. Tracking animation (letter-spacing: 1em to 0.5em)
tl.to(titleEl, {
letterSpacing: "0.5em",
marginRight: "-0.5em",
duration: 3,
ease: "power2.out"
}, 0);
tl.to(
titleEl,
{
letterSpacing: "0.5em",
marginRight: "-0.5em",
duration: 3,
ease: "power2.out",
},
0,
);
// 3. Staggered letter fade-in
tl.to(root.querySelectorAll('.char'), {
opacity: 1,
duration: 0.8,
stagger: 0.1,
ease: "power1.out"
}, 0.2);
tl.to(
root.querySelectorAll(".char"),
{
opacity: 1,
duration: 0.8,
stagger: 0.1,
ease: "power1.out",
},
0.2,
);
// Ambient motion: subtle scale pulse for the whole container
tl.to(root.querySelector('.container'), {
scale: 1.05,
duration: 3,
ease: "none"
}, 0);
tl.to(
root.querySelector(".container"),
{
scale: 1.05,
duration: 3,
ease: "none",
},
0,
);
window.__timelines[compId] = tl;
})();
packages/producer/tests/style-7-prod/src/compositions/main.html
+87 -58
View File
@@ -1,14 +1,15 @@
<template id="main-template">
<div data-composition-id="main" data-width="1920" data-height="1080" data-duration="16.7">
<!-- A-roll Video -->
<video id="aroll"
src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/uploaded_assets/70648f53_abe84fb9991841ae8ba82ee21ba6d37e.mp4"
data-start="0"
data-duration="16.7"
data-track-index="1"
muted
crossorigin="anonymous">
</video>
<video
id="aroll"
src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/uploaded_assets/70648f53_abe84fb9991841ae8ba82ee21ba6d37e.mp4"
data-start="0"
data-duration="16.7"
data-track-index="1"
muted
crossorigin="anonymous"
></video>
<!-- Statistics Overlay -->
<div class="stats-container">
@@ -38,7 +39,7 @@
<style>
[data-composition-id="main"] {
background-color: #000000;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
overflow: hidden;
width: 1920px;
height: 1080px;
@@ -79,7 +80,7 @@
display: flex;
flex-direction: column;
align-items: center;
bottom: 15%;
bottom: 15%;
left: 50%;
transform: translateX(-50%);
}
@@ -108,80 +109,108 @@
[data-composition-id="main"] .stat-value {
font-size: 180px; /* Large, centered, and precise */
font-weight: 900;
color: #6B0F1A; /* Deep Burgundy for emphasis */
color: #6b0f1a; /* Deep Burgundy for emphasis */
line-height: 0.9;
letter-spacing: -5px;
text-shadow: 0 10px 30px rgba(0,0,0,0.5);
text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
[data-composition-id="main"] .stat-subtext {
font-size: 60px;
font-weight: 700;
color: #FFFFFF;
color: #ffffff;
letter-spacing: 4px;
margin-top: 10px;
text-transform: uppercase;
text-shadow: 0 5px 15px rgba(0,0,0,0.5);
text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
</style>
<script>
(function() {
(function () {
const tl = gsap.timeline({ paused: true });
const aroll = '#aroll';
const aroll = "#aroll";
// 1. At 3.0s: A-roll fades in smoothly (500ms) at 100% scale, centered.
tl.to(aroll, {
opacity: 1,
duration: 0.5,
ease: 'power2.inOut'
}, 3.0);
tl.to(
aroll,
{
opacity: 1,
duration: 0.5,
ease: "power2.inOut",
},
3.0,
);
// 2. Stat 1 (1.8s - 4.6s)
tl.to('#stat-1', {
opacity: 1,
y: -20,
duration: 0.8,
ease: 'expo.out'
}, 1.8);
tl.to(
"#stat-1",
{
opacity: 1,
y: -20,
duration: 0.8,
ease: "expo.out",
},
1.8,
);
// 3. At 4.6s (Stat 2): Cross-dissolve Stat 1 to Stat 2
tl.to('#stat-1', {
opacity: 0,
y: -40,
duration: 0.5,
ease: 'power2.inOut'
}, 4.6);
tl.to(
"#stat-1",
{
opacity: 0,
y: -40,
duration: 0.5,
ease: "power2.inOut",
},
4.6,
);
tl.to('#stat-2', {
opacity: 1,
y: -20,
duration: 0.8,
ease: 'expo.out'
}, 4.6);
tl.to(
"#stat-2",
{
opacity: 1,
y: -20,
duration: 0.8,
ease: "expo.out",
},
4.6,
);
// 4. At 8.6s (Stat 3): Cross-dissolve Stat 2 to Stat 3
tl.to('#stat-2', {
opacity: 0,
y: -40,
duration: 0.5,
ease: 'power2.inOut'
}, 8.6);
tl.to(
"#stat-2",
{
opacity: 0,
y: -40,
duration: 0.5,
ease: "power2.inOut",
},
8.6,
);
tl.to('#stat-3', {
opacity: 1,
y: -20,
duration: 0.8,
ease: 'expo.out'
}, 8.6);
tl.to(
"#stat-3",
{
opacity: 1,
y: -20,
duration: 0.8,
ease: "expo.out",
},
8.6,
);
// 5. At 14.2s: Stat 3 fades out.
tl.to('#stat-3', {
opacity: 0,
y: -40,
duration: 0.5,
ease: 'power2.inOut'
}, 14.2);
tl.to(
"#stat-3",
{
opacity: 0,
y: -40,
duration: 0.5,
ease: "power2.inOut",
},
14.2,
);
window.__timelines["main"] = tl;
})();
packages/producer/tests/style-7-prod/src/design_review.md
+6
View File
@@ -1,6 +1,7 @@
# HyperFrames Design Review
## First Impression
This looks like a "minimalist" template designed by someone who thinks Helvetica and a black background are a substitute for actual creative direction. It's safe, it's sterile, and it's dangerously close to being completely forgettable.
---
@@ -10,18 +11,21 @@ This looks like a "minimalist" template designed by someone who thinks Helvetica
Issues that make this look unprofessional or straight-up ugly. These MUST be fixed.
### The "Giant Stat" Obstruction
**Where:** `compositions/main.html` - `.stat-value` (240px)
**What's wrong:** You've slapped a 240px font size statistic right in the middle of the screen. It's not "bold," it's obnoxious. It's going to cover the subject's face or the primary action of the A-roll video.
**Why it matters:** If I can't see the video because a giant "47%" is screaming in my face, the video is useless. You're sacrificing the primary content for a secondary metric.
**Fix it:** Reduce the `stat-value` to 120px-140px and move the `.stat-item` to a corner (e.g., bottom-left or top-right) with proper padding. Let the video breathe.
### Caption Letter-Spacing Overkill
**Where:** `compositions/captions.html` - `#caption-text` (`letter-spacing: 0.6em`)
**What's wrong:** 0.6em letter spacing on a 42px font is absurd. It makes the words fall apart. The human eye shouldn't have to work this hard to reassemble "MOTION GRAPHICS" into a coherent thought.
**Why it matters:** Captions are for readability. This is "aesthetic" at the expense of function. It looks like a broken typewriter.
**Fix it:** Bring that `letter-spacing` down to 0.1em or 0.2em max. If you want "wide," do it subtly, not like you're trying to fill the entire 1920px width with one word.
### The "Vignelli" Identity Crisis
**Where:** `compositions/intro.html`
**What's wrong:** You claim "Vignelli style" in the comments but then use a 1em letter-spacing on the title. Vignelli was about tight, intentional kerning and powerful grids, not "let's see how far apart I can push these letters before they fall off the screen."
**Why it matters:** It feels like a parody of modernism rather than an execution of it.
@@ -34,11 +38,13 @@ Issues that make this look unprofessional or straight-up ugly. These MUST be fix
Things that aren't broken but are boring, lazy, or could be significantly better.
### Robotic Stat Transitions
**Where:** `compositions/main.html` - GSAP Timeline
**The problem:** The stats just fade and move 'y: -20'. It's the most basic "PowerPoint" transition imaginable.
**Make it better:** Use a "counter" animation for the numbers. Have the percentage roll up from 0 to 47. It adds dynamic energy and makes the data feel "live" rather than static.
### Generic Background Gradient
**Where:** `compositions/captions.html` - `.bg-gradient`
**The problem:** A simple black-to-transparent linear gradient is the "I don't know what else to do" of video design.
**Make it better:** Add a subtle blur or a frosted glass (backdrop-filter) effect to the caption container instead. It feels more premium and less like a 2010 YouTube tutorial.
packages/producer/tests/style-7-prod/src/index.html
+75 -69
View File
@@ -1,82 +1,88 @@
<!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>Editor Agent - Velvet Standard</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;
overflow: hidden;
background-color: #000;
}
#viewport {
width: 1920px;
height: 1080px;
position: relative;
}
body,
html {
margin: 0;
padding: 0;
width: 1920px;
height: 1080px;
overflow: hidden;
background-color: #000;
}
#viewport {
width: 1920px;
height: 1080px;
position: relative;
}
</style>
</head>
<body>
<div id="viewport"
data-composition-id="root"
data-width="1920"
data-height="1080"
data-duration="16.7">
<!-- Intro Sequence (0-3s) -->
<div id="intro-layer"
data-composition-src="compositions/intro.html"
data-composition-id="intro"
data-start="0"
data-duration="3"
data-width="1920"
data-height="1080"
data-track-index="10"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;">
</div>
</head>
<body>
<div
id="viewport"
data-composition-id="root"
data-width="1920"
data-height="1080"
data-duration="16.7"
>
<!-- Intro Sequence (0-3s) -->
<div
id="intro-layer"
data-composition-src="compositions/intro.html"
data-composition-id="intro"
data-start="0"
data-duration="3"
data-width="1920"
data-height="1080"
data-track-index="10"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10"
></div>
<!-- Main A-roll and Stats (3s - End) -->
<div id="main-layer"
data-composition-src="compositions/main.html"
data-composition-id="main"
data-start="0"
data-duration="16.7"
data-width="1920"
data-height="1080"
data-track-index="5"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5;">
</div>
<!-- Main A-roll and Stats (3s - End) -->
<div
id="main-layer"
data-composition-src="compositions/main.html"
data-composition-id="main"
data-start="0"
data-duration="16.7"
data-width="1920"
data-height="1080"
data-track-index="5"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5"
></div>
<!-- Captions (3s - End) -->
<div id="captions-layer"
data-composition-src="compositions/captions.html"
data-composition-id="captions"
data-start="0"
data-duration="16.7"
data-width="1920"
data-height="1080"
data-track-index="20"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20;">
</div>
<!-- Captions (3s - End) -->
<div
id="captions-layer"
data-composition-src="compositions/captions.html"
data-composition-id="captions"
data-start="0"
data-duration="16.7"
data-width="1920"
data-height="1080"
data-track-index="20"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20"
></div>
<!-- Background Audio (A-roll Audio) -->
<audio id="aroll-audio"
src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/uploaded_assets/70648f53_abe84fb9991841ae8ba82ee21ba6d37e.mp4"
data-start="0"
data-duration="16.7"
data-track-index="1">
</audio>
<!-- Background Audio (A-roll Audio) -->
<audio
id="aroll-audio"
src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/uploaded_assets/70648f53_abe84fb9991841ae8ba82ee21ba6d37e.mp4"
data-start="0"
data-duration="16.7"
data-track-index="1"
></audio>
</div>
<script>
window.__timelines = {};
const mainTimeline = gsap.timeline({ paused: true });
window.__timelines["root"] = mainTimeline;
window.__timelines = {};
const mainTimeline = gsap.timeline({ paused: true });
window.__timelines["root"] = mainTimeline;
</script>
</body>
</body>
</html>