wehub/heygen-com--hyperframes
1
0
Fork 0
Code Issues Pull Requests Actions Deployments Models Agent Notes Packages Projects Releases Wiki Activity
Files
main
heygen-com--hyperframes/registry/blocks/transitions-push/transitions-push.html
T
wehub-resource-sync 85453da49f
regression / regression-shards (style-16-prod style-9-prod style-17-prod iframe-render-compat variables-prod mp4-h265-sdr, shard-4) (push) Has been cancelled
Details
regression / regression-shards (style-4-prod style-11-prod style-2-prod animejs-adapter typegpu-adapter parallel-capture-regression, shard-5) (push) Has been cancelled
Details
regression / regression-shards (style-7-prod style-8-prod style-10-prod css-spinner-render-compat webm-transparency mp4-h264-sdr webm-vp9, shard-3) (push) Has been cancelled
Details
regression / regression-shards (sub-composition-video style-18-prod raf-ball-render-compat font-variant-numeric sub-comp-t0 sub-comp-id-selector, shard-7) (push) Has been cancelled
Details
Windows render verification / Detect changes (push) Has been cancelled
Details
Windows render verification / Preflight (lint + format) (push) Has been cancelled
Details
Windows render verification / Render on windows-latest (push) Has been cancelled
Details
Windows render verification / Tests on windows-latest (push) Has been cancelled
Details
CI / Detect changes (push) Has been cancelled
Details
CI / Build (push) Has been cancelled
Details
CI / Lint (push) Has been cancelled
Details
CI / Fallow audit (push) Has been cancelled
Details
CI / Format (push) Has been cancelled
Details
CI / Typecheck (push) Has been cancelled
Details
CI / Test (push) Has been cancelled
Details
CI / Producer: integration tests (push) Has been cancelled
Details
CI / Producer: unit tests (push) Has been cancelled
Details
CI / File size check (push) Has been cancelled
Details
CI / Test: skills (push) Has been cancelled
Details
CI / Skills: manifest in sync (push) Has been cancelled
Details
CI / CLI: npx shim (macos-latest) (push) Has been cancelled
Details
CI / CLI: npx shim (ubuntu-latest) (push) Has been cancelled
Details
CI / CLI: npx shim (windows-latest) (push) Has been cancelled
Details
CI / SDK: unit + contract + smoke (push) Has been cancelled
Details
CI / Test: runtime contract (push) Has been cancelled
Details
CI / Studio: load smoke (push) Has been cancelled
Details
CI / Smoke: global install (push) Has been cancelled
Details
CI / CLI smoke (required) (push) Has been cancelled
Details
CI / Semantic PR title (push) Has been cancelled
Details
Player perf / Detect changes (push) Has been cancelled
Details
Player perf / Preflight (lint + format) (push) Has been cancelled
Details
Player perf / player-perf (push) Has been cancelled
Details
Player perf / Perf: drift (push) Has been cancelled
Details
Player perf / Perf: fps (push) Has been cancelled
Details
Player perf / Perf: parity (push) Has been cancelled
Details
Player perf / Perf: scrub (push) Has been cancelled
Details
Player perf / Perf: load (push) Has been cancelled
Details
preview-regression / Detect changes (push) Has been cancelled
Details
preview-regression / Preflight (lint + format) (push) Has been cancelled
Details
preview-regression / Preview parity (push) Has been cancelled
Details
preview-regression / preview-regression (push) Has been cancelled
Details
regression / regression (push) Has been cancelled
Details
regression / Detect changes (push) Has been cancelled
Details
regression / Preflight (lint + format) (push) Has been cancelled
Details
regression / regression-shards (hdr-regression style-5-prod style-3-prod mov-prores, shard-1) (push) Has been cancelled
Details
regression / regression-shards (overlay-montage-prod style-12-prod chat missing-host-comp-id png-sequence portrait-edge-bleed, shard-6) (push) Has been cancelled
Details
regression / regression-shards (style-13-prod style-6-prod vignelli-stacking gsap-letters-render-compat audio-mux-parity, shard-8) (push) Has been cancelled
Details
regression / regression-shards (style-15-prod hdr-hlg-regression style-1-prod many-cuts vfr-screen-recording render-symlinked-assets, shard-2) (push) Has been cancelled
Details
CodeQL / Analyze (actions) (push) Has been cancelled
Details
CodeQL / Analyze (javascript-typescript) (push) Has been cancelled
Details
CodeQL / Analyze (python) (push) Has been cancelled
Details
Docs / Validate docs (push) Has been cancelled
Details
Sync skills to ClawHub / Publish changed skills (push) Has been cancelled
Details
chore: import upstream snapshot with attribution
2026-07-13 12:58:35 +08:00

384 lines
10 KiB
HTML
Vendored
Raw Permalink Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1920" />
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 1920px;
height: 1080px;
overflow: hidden;
background: #000;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.scene {
position: absolute;
top: 0;
left: 0;
width: 1920px;
height: 1080px;
overflow: hidden;
}
.scene-inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.info-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.88);
padding: 24px 60px;
display: flex;
align-items: center;
gap: 40px;
opacity: 0;
}
.info-num {
font-size: 14px;
font-weight: 700;
color: #e07a5f;
letter-spacing: 0.1em;
}
.info-name {
font-size: 20px;
font-weight: 700;
color: #fff;
}
.info-desc {
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
}
#title-card {
position: absolute;
top: 0;
left: 0;
width: 1920px;
height: 1080px;
background: #0d1b2a;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 50;
}
#outro-card {
position: absolute;
top: 0;
left: 0;
width: 1920px;
height: 1080px;
background: #0d1b2a;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 50;
opacity: 0;
}
</style>
</head>
<body>
<div
data-composition-id="main"
data-start="0"
data-duration="24"
data-width="1920"
data-height="1080"
>
<!-- Title Card -->
<div id="title-card">
<div
id="title-label"
style="
font-size: 14px;
font-weight: 700;
color: #e07a5f;
letter-spacing: 0.2em;
text-transform: uppercase;
opacity: 0;
"
>
TRANSITION CATALOG
</div>
<div
id="title-main"
style="font-size: 72px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
>
Push Transitions
</div>
<div
id="title-count"
style="
font-size: 24px;
font-weight: 400;
color: rgba(255, 255, 255, 0.4);
margin-top: 12px;
opacity: 0;
"
>
4 transitions
</div>
</div>
<!-- Scene A -->
<div id="scene1" class="scene" style="z-index: 1">
<div class="scene-inner" id="s1" style="background: #1b263b">
<div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)">
ONE
</div>
<div
style="
font-size: 32px;
font-weight: 700;
color: #778da9;
letter-spacing: 0.15em;
margin-top: -20px;
"
>
SCENE A
</div>
</div>
</div>
<!-- Scene B -->
<div id="scene2" class="scene" style="z-index: 2; opacity: 0">
<div class="scene-inner" id="s2" style="background: #e07a5f">
<div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.15)">
TWO
</div>
<div
style="
font-size: 32px;
font-weight: 700;
color: #fff;
letter-spacing: 0.15em;
margin-top: -20px;
"
>
SCENE B
</div>
</div>
</div>
<!-- Info Bars -->
<div id="info-1" class="info-bar">
<div class="info-num">01</div>
<div class="info-name">Push Slide</div>
<div class="info-desc">Use a push slide transition</div>
</div>
<div id="info-2" class="info-bar">
<div class="info-num">02</div>
<div class="info-name">Vertical Push</div>
<div class="info-desc">Use a vertical push transition</div>
</div>
<div id="info-3" class="info-bar">
<div class="info-num">03</div>
<div class="info-name">Elastic Push</div>
<div class="info-desc">Use an elastic push transition with overshoot</div>
</div>
<div id="info-4" class="info-bar">
<div class="info-num">04</div>
<div class="info-name">Squeeze</div>
<div class="info-desc">Use a squeeze transition</div>
</div>
<!-- Outro Card -->
<div id="outro-card">
<div
id="outro-label"
style="
font-size: 14px;
font-weight: 700;
color: #e07a5f;
letter-spacing: 0.2em;
text-transform: uppercase;
opacity: 0;
"
>
PUSH TRANSITIONS
</div>
<div
id="outro-main"
style="font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
>
4 Transitions
</div>
</div>
</div>
<script>
(function () {
var tl = gsap.timeline({ paused: true });
var t = 0;
// === TITLE CARD (3s) ===
tl.to("#title-label", { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, t + 0.3);
tl.fromTo(
"#title-main",
{ opacity: 0, y: 20 },
{ opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
t + 0.6,
);
tl.fromTo(
"#title-count",
{ opacity: 0 },
{ opacity: 1, duration: 0.4, ease: "power2.out" },
t + 1.0,
);
tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
t += 3;
function resetScenes() {
tl.set(
"#scene1",
{
opacity: 1,
x: 0,
y: 0,
scale: 1,
scaleX: 1,
rotation: 0,
filter: "none",
clipPath: "none",
zIndex: 1,
skewX: 0,
},
t,
);
tl.set(
"#scene2",
{
opacity: 0,
x: 0,
y: 0,
scale: 1,
scaleX: 1,
rotation: 0,
filter: "none",
clipPath: "none",
zIndex: 2,
skewX: 0,
},
t,
);
tl.set(
"#s1",
{
opacity: 1,
x: 0,
y: 0,
scale: 1,
rotation: 0,
filter: "none",
skewX: 0,
scaleX: 1,
transformOrigin: "50% 50%",
},
t,
);
tl.set(
"#s2",
{
opacity: 1,
x: 0,
y: 0,
scale: 1,
rotation: 0,
filter: "none",
skewX: 0,
scaleX: 1,
transformOrigin: "50% 50%",
},
t,
);
}
// === TRANSITION 1: Push Slide ===
resetScenes();
tl.to("#info-1", { opacity: 1, duration: 0.3 }, t + 0.2);
var T = t + 1.5;
tl.to("#s1", { x: -1920, duration: 0.5, ease: "power3.inOut" }, T);
tl.fromTo("#s2", { x: 1920 }, { x: 0, duration: 0.5, ease: "power3.inOut" }, T);
tl.set("#scene2", { opacity: 1 }, T);
t = T + 1.5 + 1.0;
tl.to("#info-1", { opacity: 0, duration: 0.2 }, t);
t += 0.5;
// === TRANSITION 2: Vertical Push ===
resetScenes();
tl.to("#info-2", { opacity: 1, duration: 0.3 }, t + 0.2);
T = t + 1.5;
tl.to("#s1", { y: -1080, duration: 0.5, ease: "power3.inOut" }, T);
tl.fromTo("#s2", { y: 1080 }, { y: 0, duration: 0.5, ease: "power3.inOut" }, T);
tl.set("#scene2", { opacity: 1 }, T);
t = T + 1.5 + 1.0;
tl.to("#info-2", { opacity: 0, duration: 0.2 }, t);
t += 0.5;
// === TRANSITION 3: Elastic Push ===
resetScenes();
tl.to("#info-3", { opacity: 1, duration: 0.3 }, t + 0.2);
T = t + 1.5;
tl.set("#scene2", { opacity: 1 }, T);
tl.to("#s1", { x: -1920, duration: 0.5, ease: "power3.in" }, T);
tl.fromTo("#s2", { x: 1920 }, { x: 30, duration: 0.4, ease: "power4.out" }, T + 0.1);
tl.to("#s2", { x: -15, duration: 0.15, ease: "sine.inOut" }, T + 0.5);
tl.to("#s2", { x: 0, duration: 0.1, ease: "sine.out" }, T + 0.65);
t = T + 1.5 + 1.0;
tl.to("#info-3", { opacity: 0, duration: 0.2 }, t);
t += 0.5;
// === TRANSITION 4: Squeeze ===
resetScenes();
tl.to("#info-4", { opacity: 1, duration: 0.3 }, t + 0.2);
T = t + 1.5;
tl.to(
"#s1",
{ scaleX: 0, transformOrigin: "left center", duration: 0.4, ease: "power3.inOut" },
T,
);
tl.set("#scene2", { opacity: 1 }, T);
tl.fromTo(
"#s2",
{ scaleX: 0, transformOrigin: "right center" },
{ scaleX: 1, duration: 0.4, ease: "power3.inOut" },
T + 0.1,
);
tl.set("#scene1", { opacity: 0 }, T + 0.5);
t = T + 1.5 + 1.0;
tl.to("#info-4", { opacity: 0, duration: 0.2 }, t);
t += 0.5;
// === OUTRO (3s) ===
tl.set("#scene1", { opacity: 0 }, t);
tl.set("#scene2", { opacity: 0 }, t);
tl.to("#outro-card", { opacity: 1, duration: 0.4, ease: "power2.inOut" }, t);
tl.to("#outro-label", { opacity: 1, duration: 0.4, ease: "power2.out" }, t + 0.3);
tl.fromTo(
"#outro-main",
{ opacity: 0, y: 20 },
{ opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
t + 0.6,
);
tl.to("#outro-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
})();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink