mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-12 20:47:30 +00:00
chore: archive dq8-audioctx worktree state 2026-09-25
This commit is contained in:
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,328 +1,3 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Kinetic Typography Sequence</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||
<style>
|
||||
[data-composition-id="typography"] .text-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
[data-composition-id="typography"] .phrase {
|
||||
font-size: 100px;
|
||||
font-weight: 500;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -2px;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
[data-composition-id="typography"] .word {
|
||||
opacity: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
[data-composition-id="typography"] .glitch-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
mix-blend-mode: screen;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
[data-composition-id="typography"] .chromatic {
|
||||
color: #ff00ff;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
[data-composition-id="typography"] .chromatic-2 {
|
||||
color: #00ffff;
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
|
||||
[data-composition-id="typography"] .cursor {
|
||||
opacity: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
[data-composition-id="typography"] .thank-you {
|
||||
font-size: 150px;
|
||||
background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}[data-composition-id="typography"] /* Glitch Effect Classes */
|
||||
.glitch-flicker {
|
||||
animation: flicker 0.1s infinite;
|
||||
}
|
||||
|
||||
@[data-composition-id="typography"] keyframes flicker {[data-composition-id="typography"] 0% { opacity: 0.5; transform: skew(2deg); }[data-composition-id="typography"] 50% { opacity: 1; transform: skew(-2deg); }[data-composition-id="typography"] 100% { opacity: 0.8; transform: skew(0deg); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="main"
|
||||
data-composition-id="main-comp"
|
||||
data-width="1080"
|
||||
data-height="1920"
|
||||
data-start="0"
|
||||
data-duration="15"
|
||||
>
|
||||
<!-- Audio Asset -->
|
||||
<audio
|
||||
id="bg-music"
|
||||
src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/generated_assets/f87f97d4_0c49f6fa95224cc3bd4f5ea3a0d937c5.wav"
|
||||
data-start="0"
|
||||
data-duration="15"
|
||||
data-track-index="0"
|
||||
data-end="15"
|
||||
></audio>
|
||||
|
||||
<!-- Typography Composition -->
|
||||
<div
|
||||
style="position: relative; width: 1080px; height: 1920px"
|
||||
data-height="1920"
|
||||
data-width="1080"
|
||||
id="typography-layer"
|
||||
data-composition-id="typography"
|
||||
data-start="0"
|
||||
data-track-index="1"
|
||||
>
|
||||
<div class="text-container">
|
||||
<div id="scene-1" class="phrase">
|
||||
<span class="word">TEXT</span>
|
||||
<span class="word">ANIMATION</span>
|
||||
</div>
|
||||
<div id="scene-2" class="phrase">
|
||||
<span class="word">WHAT</span>
|
||||
<span class="word">DO</span>
|
||||
<span class="word">YOU</span>
|
||||
<span class="word">WANT</span>
|
||||
<span class="word">TO</span>
|
||||
<span class="word">WRITE?</span>
|
||||
</div>
|
||||
<div id="scene-3" class="phrase">
|
||||
<span class="word">EVERYTHING</span>
|
||||
<span class="word">YOU</span>
|
||||
<span class="word">WANT,</span>
|
||||
</div>
|
||||
<div id="scene-4" class="phrase">
|
||||
<span class="word">STANDING</span>
|
||||
<span class="word">IN</span>
|
||||
<span class="word">FRONT</span>
|
||||
<span class="word">OF</span>
|
||||
<span class="word">YOU.</span>
|
||||
</div>
|
||||
<div id="scene-5" class="phrase">
|
||||
<span class="word">VERY</span>
|
||||
<span class="word">EASY,</span>
|
||||
</div>
|
||||
<div id="scene-6" class="phrase">
|
||||
<span class="word">AND</span>
|
||||
<span class="word">FAST.</span>
|
||||
</div>
|
||||
<div id="scene-7" class="phrase">
|
||||
<span class="word">SIT</span>
|
||||
<span class="word">BACK</span>
|
||||
<span class="word">AND</span>
|
||||
<span class="word">RELAX</span>
|
||||
<span class="cursor">|</span>
|
||||
</div>
|
||||
<div id="scene-8" class="phrase">
|
||||
<span class="word">WHAT</span>
|
||||
<span class="word">YOU</span>
|
||||
<span class="word">ARE</span>
|
||||
<span class="word">LOOKING</span>
|
||||
<span class="word">FOR?</span>
|
||||
</div>
|
||||
<div id="scene-9" class="phrase">
|
||||
<span class="word">THERE</span>
|
||||
<span class="word">YOU</span>
|
||||
<span class="word">HAVE</span>
|
||||
<span class="word">IT!</span>
|
||||
</div>
|
||||
<div id="scene-10" class="phrase thank-you">
|
||||
<span class="word">THANK</span>
|
||||
<span class="word">YOU</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const masterTL = gsap.timeline({ paused: true });
|
||||
window.__timelines["main-comp"] = masterTL;
|
||||
(function () {
|
||||
var __compId = "typography";
|
||||
var __run = function () {
|
||||
try {
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
const scenes = [
|
||||
{ id: "#scene-1", start: 0.5, duration: 1.2 },
|
||||
{ id: "#scene-2", start: 2.0, duration: 1.8 },
|
||||
{ id: "#scene-3", start: 4.0, duration: 1.0 },
|
||||
{ id: "#scene-4", start: 5.2, duration: 1.5 },
|
||||
{ id: "#scene-5", start: 7.0, duration: 0.8 },
|
||||
{ id: "#scene-6", start: 8.0, duration: 0.8 },
|
||||
{ id: "#scene-7", start: 9.0, duration: 1.8 },
|
||||
{ id: "#scene-8", start: 11.0, duration: 1.5 },
|
||||
{ id: "#scene-9", start: 12.8, duration: 1.0 },
|
||||
{ id: "#scene-10", start: 14.0, duration: 1.0 },
|
||||
];
|
||||
|
||||
scenes.forEach((scene, index) => {
|
||||
const startTime = scene.start;
|
||||
const sceneEl = document.querySelector(scene.id);
|
||||
const words = sceneEl.querySelectorAll(".word");
|
||||
|
||||
// Show scene container
|
||||
tl.set(scene.id, { opacity: 1 }, startTime);
|
||||
|
||||
// Word by word appearance
|
||||
words.forEach((word, wIndex) => {
|
||||
const wordStart = startTime + wIndex * 0.2;
|
||||
|
||||
// Creative Animation Variations
|
||||
if (index % 3 === 0) {
|
||||
// Fly-in from sides
|
||||
const xOffset = wIndex % 2 === 0 ? -500 : 500;
|
||||
tl.fromTo(
|
||||
word,
|
||||
{ opacity: 0, x: xOffset, scale: 0.5 },
|
||||
{ opacity: 1, x: 0, scale: 1, duration: 0.4, ease: "back.out(1.7)" },
|
||||
wordStart,
|
||||
);
|
||||
} else if (index % 3 === 1) {
|
||||
// Fade-in with scale and rotation
|
||||
tl.fromTo(
|
||||
word,
|
||||
{ opacity: 0, scale: 0, rotation: -45 },
|
||||
{
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
rotation: 0,
|
||||
duration: 0.5,
|
||||
ease: "elastic.out(1, 0.5)",
|
||||
},
|
||||
wordStart,
|
||||
);
|
||||
} else {
|
||||
// Pop-In & Flicker (Original)
|
||||
tl.set(word, { opacity: 1, scale: 1.5 }, wordStart);
|
||||
tl.to(word, { scale: 1, duration: 0.1, ease: "power4.out" }, wordStart);
|
||||
}
|
||||
|
||||
// Glitch/Chromatic Aberration & Horizontal Displacement on major beats
|
||||
tl.to(
|
||||
scene.id,
|
||||
{
|
||||
x: wIndex % 2 === 0 ? 15 : -15,
|
||||
skewX: wIndex % 2 === 0 ? 5 : -5,
|
||||
duration: 0.05,
|
||||
repeat: 1,
|
||||
yoyo: true,
|
||||
ease: "none",
|
||||
},
|
||||
wordStart,
|
||||
);
|
||||
|
||||
// Color flash for specific words (purple, cyan, teal)
|
||||
if (
|
||||
word.textContent.includes("ANIMATION") ||
|
||||
word.textContent.includes("WRITE") ||
|
||||
word.textContent.includes("FAST") ||
|
||||
word.textContent.includes("EASY")
|
||||
) {
|
||||
tl.to(
|
||||
word,
|
||||
{ color: "#a855f7", duration: 0.1, repeat: 1, yoyo: true },
|
||||
wordStart,
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// Typewriter Cursor for Scene 7
|
||||
if (scene.id === "#scene-7") {
|
||||
const cursor = sceneEl.querySelector(".cursor");
|
||||
tl.set(cursor, { opacity: 1 }, startTime + words.length * 0.2);
|
||||
tl.to(
|
||||
cursor,
|
||||
{ opacity: 0, duration: 0.4, repeat: 3, yoyo: true, ease: "steps(1)" },
|
||||
startTime + words.length * 0.2,
|
||||
);
|
||||
}
|
||||
|
||||
// Outro: Whole line disappears
|
||||
tl.set(scene.id, { opacity: 0 }, startTime + scene.duration);
|
||||
});
|
||||
|
||||
// Special Outro for Thank You
|
||||
tl.to(
|
||||
"#scene-10",
|
||||
{
|
||||
filter: "hue-rotate(360deg) drop-shadow(0 0 30px rgba(0, 255, 255, 1))",
|
||||
scale: 1.2,
|
||||
duration: 1.0,
|
||||
ease: "power1.inOut",
|
||||
},
|
||||
14.0,
|
||||
);
|
||||
|
||||
tl.to(
|
||||
"#scene-10 .word",
|
||||
{
|
||||
opacity: 0,
|
||||
y: -50,
|
||||
stagger: 0.1,
|
||||
duration: 0.5,
|
||||
ease: "power2.in",
|
||||
},
|
||||
14.5,
|
||||
);
|
||||
|
||||
window.__timelines["typography"] = tl;
|
||||
} catch (_err) {
|
||||
console.error("[Compiler] Composition script failed", __compId, _err);
|
||||
}
|
||||
};
|
||||
if (!__compId) {
|
||||
__run();
|
||||
return;
|
||||
}
|
||||
var __selector = '[data-composition-id="' + (__compId + "").replace(/"/g, '\\"') + '"]';
|
||||
var __attempt = 0;
|
||||
var __tryRun = function () {
|
||||
if (document.querySelector(__selector)) {
|
||||
__run();
|
||||
return;
|
||||
}
|
||||
if (++__attempt >= 8) {
|
||||
__run();
|
||||
return;
|
||||
}
|
||||
requestAnimationFrame(__tryRun);
|
||||
};
|
||||
__tryRun();
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:82b3a8f3cd08e580cc925a901957e7a61ad6a811d8a6c085ecd26f4135575222
|
||||
size 11102
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,82 +1,3 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1080, height=1920">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||
<style>body { margin: 0; background: #000; width: 1080px; height: 1920px; overflow: hidden; }
|
||||
|
||||
:root {
|
||||
--test-bg: #9bbc0f;
|
||||
--test-fg: #0f380f;
|
||||
}
|
||||
|
||||
[data-composition-id="overlay"] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
background-color: var(--test-bg);
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
color: var(--test-fg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
[data-composition-id="overlay"] .box {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border: 8px solid var(--test-fg);
|
||||
background: var(--test-bg);
|
||||
}
|
||||
|
||||
[data-composition-id="overlay"] .title {
|
||||
font-size: 48px;
|
||||
margin-top: 40px;
|
||||
}</style>
|
||||
<link as="style" href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="preload"><link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"></head>
|
||||
<body>
|
||||
<div id="root" data-composition-id="root" data-width="1080" data-height="1920" data-duration="5" style="position:absolute;width:1080px;height:1920px;">
|
||||
<div style="width:1080px;height:1920px" data-composition-id="overlay" data-start="0" data-track-index="1" data-width="1080" data-height="1920">
|
||||
<div class="box"></div>
|
||||
<div class="title">CSS IMPORT TEST</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>const tl = gsap.timeline({ paused: true });
|
||||
tl.set({}, {}, 5);
|
||||
window.__timelines["root"] = tl;
|
||||
;
|
||||
(function(){
|
||||
var __compId = "overlay";
|
||||
var __run = function() {
|
||||
try {
|
||||
(function() {
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
tl.from('[data-composition-id="overlay"] .box', { scale: 0, duration: 1, ease: 'power2.out' }, 0);
|
||||
tl.from('[data-composition-id="overlay"] .title', { opacity: 0, y: 30, duration: 0.5 }, 0.5);
|
||||
tl.set({}, {}, 5);
|
||||
window.__timelines["overlay"] = tl;
|
||||
})();
|
||||
} catch (_err) {
|
||||
console.error("[Compiler] Composition script failed", __compId, _err);
|
||||
}
|
||||
};
|
||||
if (!__compId) { __run(); return; }
|
||||
var __selector = '[data-composition-id="' + (__compId + '').replace(/"/g, '\\"') + '"]';
|
||||
var __attempt = 0;
|
||||
var __tryRun = function() {
|
||||
if (document.querySelector(__selector)) { __run(); return; }
|
||||
if (++__attempt >= 8) { __run(); return; }
|
||||
requestAnimationFrame(__tryRun);
|
||||
};
|
||||
__tryRun();
|
||||
})()</script></body>
|
||||
</html>
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:24327fe1869fd90efaff6ad5d85064835f23b78798efb24894d38f2ef4ce6503
|
||||
size 2768
|
||||
|
||||
@@ -1,21 +1,3 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
body { margin: 0; background: #0a0a0f; width: 1920px; height: 1080px; color: #e0e0e0; font-family: system-ui, sans-serif; }
|
||||
.stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 60px; }
|
||||
.spinner { width: 200px; height: 200px; border: 16px solid rgba(255,255,255,0.12); border-top-color: #5eead4; border-radius: 50%; animation: spin 1s linear infinite; }
|
||||
.label { font-size: 40px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" data-composition-id="css-spinner" data-width="1920" data-height="1080" data-start="0" data-duration="5">
|
||||
<div class="stage clip" data-start="0" data-duration="5">
|
||||
<div class="spinner"></div>
|
||||
<div class="label">Loading</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>window.__timelines = window.__timelines || {};</script></body>
|
||||
</html>
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:e4927706cd5ed83fadfbed5b2afa1172292a417612016d8ee9ba2690b1cf87a9
|
||||
size 1011
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,12 +1,3 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>body { margin: 0; background: #000; width: 1920px; height: 1080px; } iframe { border: 0; display: block; }</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" data-composition-id="iframe-test" data-width="1920" data-height="1080" data-start="0" data-duration="5">
|
||||
<iframe src="target.html" width="1920" height="1080" class="clip" data-start="0" data-duration="5"></iframe>
|
||||
</div>
|
||||
|
||||
<script>window.__timelines = window.__timelines || {};</script></body>
|
||||
</html>
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:cc795c332a17d38cfe2eb457e26744bf4e82fdb91c96bb3790ba9baac68dc418
|
||||
size 493
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+3
-139
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
@@ -1,23 +1,3 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>body { margin: 0; background: #000; width: 1920px; height: 1080px; } canvas { display: block; }</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" data-composition-id="raf-ball" data-width="1920" data-height="1080" data-start="0" data-duration="5">
|
||||
<canvas id="c" width="1920" height="1080" class="clip" data-start="0" data-duration="5"></canvas>
|
||||
</div>
|
||||
|
||||
<script>const ctx = document.getElementById('c').getContext('2d');
|
||||
function draw(t) {
|
||||
ctx.fillStyle = '#000'; ctx.fillRect(0, 0, 1920, 1080);
|
||||
const x = 960 + Math.sin(t / 1000 * Math.PI) * 700;
|
||||
ctx.fillStyle = '#f87171';
|
||||
ctx.beginPath(); ctx.arc(x, 540, 80, 0, Math.PI * 2); ctx.fill();
|
||||
ctx.fillStyle = '#9ca3af'; ctx.font = '32px system-ui, sans-serif';
|
||||
ctx.fillText(`t = ${t.toFixed(0)} ms`, 40, 60);
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
requestAnimationFrame(draw);
|
||||
window.__timelines = window.__timelines || {};</script></body>
|
||||
</html>
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:362ff01000c74232839c6f53382b95acfa274cd79d005628e467b468d4b727e9
|
||||
size 981
|
||||
|
||||
@@ -1,13 +1,3 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="shared/brand.css">
|
||||
</head>
|
||||
<body style="margin: 0">
|
||||
<div data-composition-id="render-symlinked-assets" data-width="320" data-height="180" data-duration="5" style="position: relative; width: 320px; height: 180px; overflow: hidden">
|
||||
<div class="stage clip" data-start="0" data-duration="5">
|
||||
<div class="card">SYMLINK CSS</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:3594fb2d8e58b22e5ab7a34d7d7521bd48563440def34458503c832c18e095c3
|
||||
size 454
|
||||
|
||||
@@ -1,78 +1,3 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=480, height=270">
|
||||
<title>Video Overlay Stretch Regression</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 480px;
|
||||
height: 270px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#root {
|
||||
position: relative;
|
||||
width: 480px;
|
||||
height: 270px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.scene-video {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center center;
|
||||
}
|
||||
|
||||
.transition-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
.cut-label {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
z-index: 20;
|
||||
padding: 5px 8px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.88);
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.68);
|
||||
font: 700 13px Arial, Helvetica, sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" data-composition-id="video-overlay-stretch" data-start="0" data-duration="4" data-width="480" data-height="270">
|
||||
<video id="clip-a" class="clip scene-video" src="clip.mp4" data-start="0" data-duration="2" data-track-index="0" muted playsinline data-end="2" data-has-audio="false"></video>
|
||||
|
||||
<video id="clip-b" class="clip scene-video" src="clip.mp4" data-start="2" data-duration="2" data-track-index="1" muted playsinline data-end="4" data-has-audio="false"></video>
|
||||
|
||||
<img id="transition" class="clip transition-overlay" src="transition-overlay.png" data-start="1.6" data-duration="0.8" data-track-index="10" alt="">
|
||||
|
||||
<div class="clip cut-label" data-start="0" data-duration="2" data-track-index="20">
|
||||
CLIP A
|
||||
</div>
|
||||
<div class="clip cut-label" data-start="2" data-duration="2" data-track-index="21">
|
||||
CLIP B
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>window.__timelines = window.__timelines || {};</script></body>
|
||||
</html>
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:5b49e97a5790955c731e273114098622a13dac4f5952cb7d5d0de5bb86e31026
|
||||
size 2251
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,109 +1,3 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head><style data-hyperframes-text-rendering="true">html,body,*{text-rendering:geometricPrecision}</style>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=640, height=360">
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 640px;
|
||||
height: 360px;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: #f5fafd;
|
||||
}
|
||||
|
||||
#root {
|
||||
position: relative;
|
||||
width: 640px;
|
||||
height: 360px;
|
||||
overflow: hidden;
|
||||
background: #f5fafd;
|
||||
}
|
||||
|
||||
.scene {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#scene-a {
|
||||
background: #f8fbff;
|
||||
}
|
||||
|
||||
#scene-b {
|
||||
background: #f5fafd;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: absolute;
|
||||
inset: 22px 42px 48px;
|
||||
border: 3px solid #333b44;
|
||||
border-radius: 8px;
|
||||
background: #fffdfa;
|
||||
}
|
||||
|
||||
.panel::before {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 34px;
|
||||
width: 170px;
|
||||
height: 18px;
|
||||
border-radius: 999px;
|
||||
background: #333b44;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.panel::after {
|
||||
position: absolute;
|
||||
top: 84px;
|
||||
left: 34px;
|
||||
width: 310px;
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
background: #9aa7b5;
|
||||
box-shadow:
|
||||
0 24px 0 #c3ccd7,
|
||||
0 48px 0 #d6dde7;
|
||||
content: "";
|
||||
}
|
||||
|
||||
#leaky-band {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
height: 31px;
|
||||
background: #daebff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" data-composition-id="main" data-root="true" data-width="640" data-height="360" data-start="0" data-duration="9">
|
||||
<section id="scene-a" class="scene clip" data-start="0" data-duration="6">
|
||||
<div class="panel"></div>
|
||||
<div id="leaky-band" class="clip" data-start="0" data-duration="9"></div>
|
||||
</section>
|
||||
<section id="scene-b" class="scene clip" data-start="6" data-duration="3">
|
||||
<div class="panel"></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<script>window.__timelines = window.__timelines || {};
|
||||
window.__timelines.main = {
|
||||
duration: function () {
|
||||
return 9;
|
||||
},
|
||||
totalDuration: function () {
|
||||
return 9;
|
||||
},
|
||||
pause: function () {},
|
||||
seek: function () {},
|
||||
};</script></body>
|
||||
</html>
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:93e349ab3cf09c15b5289d73bf5276a223e45a00463cafc634e3be1cca116377
|
||||
size 2515
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,106 +1,3 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head><style data-hyperframes-text-rendering="true">html,body,*{text-rendering:geometricPrecision}</style>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
background: #000;
|
||||
}
|
||||
[data-composition-id="webgl-video-texture-test"] {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
#gl {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1280px;
|
||||
height: 720px;
|
||||
}
|
||||
/* Texture-source video: sampled into WebGL only, parked off-canvas. */
|
||||
#vid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" data-composition-id="webgl-video-texture-test" data-width="1280" data-height="720" data-start="0" data-duration="2">
|
||||
<video id="vid" class="clip" data-start="0" data-duration="2" data-track-index="0" src="clip.mp4" muted playsinline data-end="2" data-has-audio="false"></video>
|
||||
<canvas id="gl"></canvas>
|
||||
|
||||
|
||||
</div>
|
||||
<script>// WebGL2 textured fullscreen triangle sampling the source video element.
|
||||
// The handler uploads that video as a texture on every hf-seek — the
|
||||
// natural author pattern. In headless render, Chrome can't supply decoded
|
||||
// video frames to WebGL, so the core video-texture patch substitutes the
|
||||
// engine's injected, decoded render-frame image, and the post-injection
|
||||
// GPU reseek re-runs this handler. With the fix, render reproduces the
|
||||
// preview snapshot (PSNR high); without it the canvas is black (PSNR
|
||||
// collapses). NB: avoid writing literal tag syntax in comments here — the
|
||||
// compiler's media-attribute injection scans the raw HTML for it.
|
||||
(function () {
|
||||
var canvas = document.getElementById("gl");
|
||||
canvas.width = 1280;
|
||||
canvas.height = 720;
|
||||
var gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true });
|
||||
if (!gl) return;
|
||||
|
||||
var VS =
|
||||
"#version 300 es\n" +
|
||||
"in vec2 p; out vec2 uv;\n" +
|
||||
"void main(){ uv = vec2(p.x*0.5+0.5, 0.5-p.y*0.5); gl_Position = vec4(p,0.0,1.0); }";
|
||||
var FS =
|
||||
"#version 300 es\n" +
|
||||
"precision highp float; in vec2 uv; uniform sampler2D tex; out vec4 c;\n" +
|
||||
"void main(){ c = texture(tex, uv); }";
|
||||
|
||||
function sh(type, src) {
|
||||
var s = gl.createShader(type);
|
||||
gl.shaderSource(s, src);
|
||||
gl.compileShader(s);
|
||||
return s;
|
||||
}
|
||||
var prog = gl.createProgram();
|
||||
gl.attachShader(prog, sh(gl.VERTEX_SHADER, VS));
|
||||
gl.attachShader(prog, sh(gl.FRAGMENT_SHADER, FS));
|
||||
gl.linkProgram(prog);
|
||||
gl.useProgram(prog);
|
||||
|
||||
var buf = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
|
||||
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
|
||||
var loc = gl.getAttribLocation(prog, "p");
|
||||
gl.enableVertexAttribArray(loc);
|
||||
gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
|
||||
|
||||
var tex = gl.createTexture();
|
||||
gl.bindTexture(gl.TEXTURE_2D, tex);
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
||||
|
||||
var video = document.getElementById("vid");
|
||||
|
||||
function render() {
|
||||
if (video && video.readyState >= 2) {
|
||||
gl.bindTexture(gl.TEXTURE_2D, tex);
|
||||
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);
|
||||
}
|
||||
gl.clearColor(0, 0, 0, 1);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
gl.drawArrays(gl.TRIANGLES, 0, 3);
|
||||
}
|
||||
|
||||
window.addEventListener("hf-seek", function () {
|
||||
render();
|
||||
});
|
||||
render();
|
||||
})();</script></body>
|
||||
</html>
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:253e2b94f1babe8290f5f1c20e51c0d79d8b21cf1af4fecfa6a0d22733d9298d
|
||||
size 4110
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user