mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-11 06:30:03 +00:00
style: apply oxfmt baseline formatting across all source files (#25)
## 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
@@ -21,10 +21,10 @@
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 900px;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #ffffff;
|
||||
color: #000000;
|
||||
padding: 60px;
|
||||
border-top: 8px solid #CC0000;
|
||||
border-top: 8px solid #cc0000;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
@@ -43,27 +43,27 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
(function () {
|
||||
const TRANSCRIPT = [
|
||||
{ text: 'Hola,', start: 1.22, end: 1.879 },
|
||||
{ text: 'esto', start: 1.919, end: 2.119 },
|
||||
{ text: 'es', start: 2.139, end: 2.199 },
|
||||
{ text: 'una', start: 2.24, end: 2.46 },
|
||||
{ text: 'prueba.', start: 2.46, end: 4.239 },
|
||||
{ text: 'Yo', start: 4.279, end: 4.619 },
|
||||
{ text: 'quiero', start: 4.679, end: 4.979 },
|
||||
{ text: 'definitivamente', start: 5.0, end: 6.539 },
|
||||
{ text: 'poder', start: 6.559, end: 6.879 },
|
||||
{ text: 'grabar', start: 6.899, end: 7.279 },
|
||||
{ text: 'contenido,', start: 7.299, end: 8.099 },
|
||||
{ text: 'pero', start: 8.119, end: 8.3 },
|
||||
{ text: 'ser', start: 8.399, end: 8.519 },
|
||||
{ text: 'yo', start: 8.6, end: 8.74 },
|
||||
{ text: 'misma', start: 8.76, end: 9.14 },
|
||||
{ text: 'también', start: 9.159, end: 10.26 }
|
||||
{ text: "Hola,", start: 1.22, end: 1.879 },
|
||||
{ text: "esto", start: 1.919, end: 2.119 },
|
||||
{ text: "es", start: 2.139, end: 2.199 },
|
||||
{ text: "una", start: 2.24, end: 2.46 },
|
||||
{ text: "prueba.", start: 2.46, end: 4.239 },
|
||||
{ text: "Yo", start: 4.279, end: 4.619 },
|
||||
{ text: "quiero", start: 4.679, end: 4.979 },
|
||||
{ text: "definitivamente", start: 5.0, end: 6.539 },
|
||||
{ text: "poder", start: 6.559, end: 6.879 },
|
||||
{ text: "grabar", start: 6.899, end: 7.279 },
|
||||
{ text: "contenido,", start: 7.299, end: 8.099 },
|
||||
{ text: "pero", start: 8.119, end: 8.3 },
|
||||
{ text: "ser", start: 8.399, end: 8.519 },
|
||||
{ text: "yo", start: 8.6, end: 8.74 },
|
||||
{ text: "misma", start: 8.76, end: 9.14 },
|
||||
{ text: "también", start: 9.159, end: 10.26 },
|
||||
];
|
||||
|
||||
const container = document.getElementById('captions-container');
|
||||
const container = document.getElementById("captions-container");
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
const chunks = [];
|
||||
let currentChunk = [];
|
||||
@@ -77,13 +77,13 @@
|
||||
});
|
||||
|
||||
chunks.forEach((chunk, i) => {
|
||||
const group = document.createElement('div');
|
||||
group.className = 'caption-group';
|
||||
const group = document.createElement("div");
|
||||
group.className = "caption-group";
|
||||
group.id = `group-${i}`;
|
||||
|
||||
chunk.forEach((wordData) => {
|
||||
const span = document.createElement('span');
|
||||
span.className = 'word';
|
||||
const span = document.createElement("span");
|
||||
span.className = "word";
|
||||
span.textContent = wordData.text;
|
||||
group.appendChild(span);
|
||||
});
|
||||
@@ -97,14 +97,10 @@
|
||||
group,
|
||||
{ opacity: 0, y: 20 },
|
||||
{ opacity: 1, y: 0, duration: 0.3, ease: "power2.out" },
|
||||
startTime
|
||||
startTime,
|
||||
);
|
||||
|
||||
tl.to(
|
||||
group,
|
||||
{ opacity: 0, y: -10, duration: 0.2, ease: "power2.in" },
|
||||
endTime
|
||||
);
|
||||
tl.to(group, { opacity: 0, y: -10, duration: 0.2, ease: "power2.in" }, endTime);
|
||||
});
|
||||
|
||||
window.__timelines["captions"] = tl;
|
||||
|
||||
@@ -8,14 +8,14 @@
|
||||
|
||||
<div id="graphic-2" class="vignelli-container">
|
||||
<div class="white-box">
|
||||
<div class="text-black">GRABAR<br>CONTENIDO</div>
|
||||
<div class="text-black">GRABAR<br />CONTENIDO</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="graphic-3" class="vignelli-full">
|
||||
<div class="charcoal-bg"></div>
|
||||
<div class="full-content">
|
||||
<div class="text-white">SER YO<br>MISMA</div>
|
||||
<div class="text-white">SER YO<br />MISMA</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
left: 0;
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -42,14 +42,14 @@
|
||||
}
|
||||
|
||||
.white-box {
|
||||
background-color: #FFFFFF;
|
||||
background-color: #ffffff;
|
||||
padding: 40px 60px;
|
||||
border-left: 30px solid #CC0000;
|
||||
border-left: 30px solid #cc0000;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text-black {
|
||||
color: #1A1A1A;
|
||||
color: #1a1a1a;
|
||||
font-size: 100px;
|
||||
font-weight: 900;
|
||||
line-height: 0.9;
|
||||
@@ -87,7 +87,7 @@
|
||||
left: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #1A1A1A;
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
.full-content {
|
||||
@@ -95,12 +95,12 @@
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
text-align: left;
|
||||
border-left: 30px solid #CC0000;
|
||||
border-left: 30px solid #cc0000;
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
.full-content .text-white {
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
font-size: 180px;
|
||||
font-weight: 900;
|
||||
line-height: 0.85;
|
||||
@@ -109,7 +109,7 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
(function () {
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
const G1_IN = 1.22;
|
||||
@@ -120,49 +120,33 @@
|
||||
const G3_OUT = 10.24;
|
||||
|
||||
tl.fromTo(
|
||||
'#graphic-1',
|
||||
"#graphic-1",
|
||||
{ opacity: 0, x: -100 },
|
||||
{ opacity: 1, x: 0, duration: 0.8, ease: "power3.out" },
|
||||
G1_IN
|
||||
G1_IN,
|
||||
);
|
||||
|
||||
tl.to(
|
||||
'#graphic-1',
|
||||
{ opacity: 0, x: 100, duration: 0.4, ease: "power3.in" },
|
||||
G1_OUT - 0.4
|
||||
);
|
||||
tl.to("#graphic-1", { opacity: 0, x: 100, duration: 0.4, ease: "power3.in" }, G1_OUT - 0.4);
|
||||
|
||||
tl.fromTo(
|
||||
'#graphic-2',
|
||||
"#graphic-2",
|
||||
{ opacity: 0, x: -100 },
|
||||
{ opacity: 1, x: 0, duration: 0.8, ease: "power3.out" },
|
||||
G2_IN
|
||||
G2_IN,
|
||||
);
|
||||
|
||||
tl.to(
|
||||
'#graphic-2',
|
||||
{ opacity: 0, x: 100, duration: 0.4, ease: "power3.in" },
|
||||
G2_OUT - 0.4
|
||||
);
|
||||
tl.to("#graphic-2", { opacity: 0, x: 100, duration: 0.4, ease: "power3.in" }, G2_OUT - 0.4);
|
||||
|
||||
tl.to(
|
||||
'.charcoal-bg',
|
||||
{ left: 0, duration: 0.8, ease: "power3.inOut" },
|
||||
G3_IN
|
||||
);
|
||||
tl.to(".charcoal-bg", { left: 0, duration: 0.8, ease: "power3.inOut" }, G3_IN);
|
||||
|
||||
tl.fromTo(
|
||||
'.full-content',
|
||||
".full-content",
|
||||
{ opacity: 0, x: -50 },
|
||||
{ opacity: 1, x: 0, duration: 0.8, ease: "back.out(1.2)" },
|
||||
G3_IN + 0.4
|
||||
G3_IN + 0.4,
|
||||
);
|
||||
|
||||
tl.to(
|
||||
'#graphic-3',
|
||||
{ opacity: 0, duration: 0.24 },
|
||||
G3_OUT - 0.24
|
||||
);
|
||||
tl.to("#graphic-3", { opacity: 0, duration: 0.24 }, G3_OUT - 0.24);
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["overlays"] = tl;
|
||||
|
||||
@@ -1,74 +1,101 @@
|
||||
<!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>Vignelli Style Video</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||
<script src=""></script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #FFFFFF;
|
||||
overflow: hidden;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #ffffff;
|
||||
overflow: hidden;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
#main-composition {
|
||||
position: relative;
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
#main-composition {
|
||||
position: relative;
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
#a-roll-wrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
#a-roll-wrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
[data-composition-id="overlays"] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
[data-composition-id="overlays"] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
[data-composition-id="captions"] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
[data-composition-id="captions"] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="main-composition" data-composition-id="main-comp" data-width="1080" data-height="1920" data-duration="10.24">
|
||||
<div id="a-roll-wrapper">
|
||||
<video id="a-roll" src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/uploaded_assets/f140a7f9_c8ae0ae2698f4a6895110bb9cbaadd74.mp4" data-start="0" data-duration="10.24" data-track-index="0">
|
||||
</video>
|
||||
</div>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="main-composition"
|
||||
data-composition-id="main-comp"
|
||||
data-width="1080"
|
||||
data-height="1920"
|
||||
data-duration="10.24"
|
||||
>
|
||||
<div id="a-roll-wrapper">
|
||||
<video
|
||||
id="a-roll"
|
||||
src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/uploaded_assets/f140a7f9_c8ae0ae2698f4a6895110bb9cbaadd74.mp4"
|
||||
data-start="0"
|
||||
data-duration="10.24"
|
||||
data-track-index="0"
|
||||
></video>
|
||||
</div>
|
||||
|
||||
<div id="overlays-comp" data-composition-src="compositions/overlays.html" data-composition-id="overlays" data-start="0" data-duration="10.24" data-track-index="2" data-width="1080" data-height="1920">
|
||||
</div>
|
||||
<div
|
||||
id="overlays-comp"
|
||||
data-composition-src="compositions/overlays.html"
|
||||
data-composition-id="overlays"
|
||||
data-start="0"
|
||||
data-duration="10.24"
|
||||
data-track-index="2"
|
||||
data-width="1080"
|
||||
data-height="1920"
|
||||
></div>
|
||||
|
||||
<div id="captions-comp" data-composition-src="compositions/captions.html" data-composition-id="captions" data-start="0" data-duration="10.24" data-track-index="3" data-width="1080" data-height="1920">
|
||||
</div>
|
||||
<div
|
||||
id="captions-comp"
|
||||
data-composition-src="compositions/captions.html"
|
||||
data-composition-id="captions"
|
||||
data-start="0"
|
||||
data-duration="10.24"
|
||||
data-track-index="3"
|
||||
data-width="1080"
|
||||
data-height="1920"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["main-comp"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
<script>
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["main-comp"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user