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-distortion/transitions-distortion.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

386 lines
11 KiB
HTML
Vendored
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1920, height=1080" />
<title>Distortion Transitions</title>
<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 {
background: #000;
overflow: hidden;
}
.scene {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.scene-inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#scene1 .scene-inner {
background: #1b263b;
}
#scene2 .scene-inner {
background: #e07a5f;
}
.scene-num {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 200px;
font-weight: 900;
color: rgba(255, 255, 255, 0.08);
line-height: 1;
}
.scene-label {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 48px;
font-weight: 600;
color: rgba(255, 255, 255, 0.25);
letter-spacing: 12px;
text-transform: uppercase;
margin-top: 10px;
}
.info-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.88);
padding: 28px 60px;
opacity: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.info-bar .info-name {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 32px;
font-weight: 700;
color: #fff;
}
.info-bar .info-cat {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: 500;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 4px;
text-transform: uppercase;
}
/* Title / Outro */
#title-card,
#outro-card {
position: absolute;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: #0d1117;
opacity: 0;
}
.card-title {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 72px;
font-weight: 800;
color: #fff;
}
.card-sub {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: 400;
color: rgba(255, 255, 255, 0.4);
margin-top: 16px;
letter-spacing: 6px;
text-transform: uppercase;
}
</style>
</head>
<body>
<div
id="main"
data-composition-id="main"
data-start="0"
data-duration="21"
data-width="1920"
data-height="1080"
style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000"
>
<!-- Title Card -->
<div id="title-card">
<div class="card-title">Distortion Transitions</div>
<div class="card-sub">Glitch &bull; Chromatic &bull; Ripple</div>
</div>
<!-- Scene A -->
<div id="scene1" class="scene" style="opacity: 0">
<div id="s1" class="scene-inner">
<div class="scene-num">ONE</div>
<div class="scene-label">Scene A</div>
</div>
</div>
<!-- Scene B -->
<div id="scene2" class="scene" style="opacity: 0">
<div id="s2" class="scene-inner">
<div class="scene-num">TWO</div>
<div class="scene-label">Scene B</div>
</div>
</div>
<!-- RGB channel overlays for glitch/chromatic -->
<div
id="glitch-r"
style="
position: absolute;
inset: 0;
z-index: 30;
opacity: 0;
pointer-events: none;
mix-blend-mode: screen;
"
>
<div
class="scene-inner"
style="
background: rgba(229, 56, 59, 0.35);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
"
>
<div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)">
ONE
</div>
</div>
</div>
<div
id="glitch-b"
style="
position: absolute;
inset: 0;
z-index: 30;
opacity: 0;
pointer-events: none;
mix-blend-mode: screen;
"
>
<div
class="scene-inner"
style="
background: rgba(72, 191, 227, 0.35);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
"
>
<div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)">
ONE
</div>
</div>
</div>
<!-- Info Bars -->
<div id="info1" class="info-bar">
<div class="info-name">Glitch</div>
<div class="info-cat">Distortion</div>
</div>
<div id="info2" class="info-bar">
<div class="info-name">Chromatic Aberration</div>
<div class="info-cat">Distortion</div>
</div>
<div id="info3" class="info-bar">
<div class="info-name">Ripple</div>
<div class="info-cat">Distortion</div>
</div>
<!-- Outro Card -->
<div id="outro-card">
<div class="card-title">Distortion Transitions</div>
<div class="card-sub">End</div>
</div>
</div>
<script>
(function () {
var tl = gsap.timeline({ defaults: { ease: "none" } });
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
function resetScenes() {
tl.set("#scene1", { opacity: 1 });
tl.set("#scene2", { opacity: 0 });
tl.set("#s1", { x: 0, y: 0, scale: 1, filter: "blur(0px)", opacity: 1 });
tl.set("#s2", { x: 0, y: 0, scale: 1, filter: "blur(0px)", opacity: 1 });
tl.set("#glitch-r", { opacity: 0, x: 0, y: 0 });
tl.set("#glitch-b", { opacity: 0, x: 0, y: 0 });
}
// ===== TITLE CARD (0–3s) =====
tl.set("#title-card", { opacity: 1 }, 0);
tl.fromTo(
".card-title",
{ y: 30, opacity: 0 },
{ y: 0, opacity: 1, duration: 0.6, ease: "power2.out" },
0.4,
);
tl.fromTo(
".card-sub",
{ y: 20, opacity: 0 },
{ y: 0, opacity: 1, duration: 0.5, ease: "power2.out" },
0.8,
);
tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power2.in" }, 2.6);
// ===== DEMO 1: Glitch (3–8s) =====
var T;
// Reset & show scene A
tl.call(function () {}, [], 3);
resetScenes();
// Show info bar
tl.to("#info1", { opacity: 1, duration: 0.3, ease: "power2.out" }, 3);
// Hold 1.5s, transition at T=4.5
T = 4.5;
// Glitch transition
tl.set("#glitch-r", { opacity: 1, x: 40, y: -8 }, T);
tl.set("#glitch-b", { opacity: 1, x: -30, y: 12 }, T);
tl.set("#s1", { x: -15 }, T);
tl.set("#glitch-r", { x: -30, y: 15 }, T + 0.03);
tl.set("#glitch-b", { x: 50, y: -10 }, T + 0.03);
tl.set("#s1", { x: 20 }, T + 0.03);
tl.set("#glitch-r", { x: 60, y: -20 }, T + 0.06);
tl.set("#glitch-b", { x: -40, y: 8 }, T + 0.06);
tl.set("#s1", { x: -25 }, T + 0.06);
tl.set("#glitch-r", { x: -20, y: 5 }, T + 0.09);
tl.set("#glitch-b", { x: 35, y: -15 }, T + 0.09);
// Swap at T + 0.12
tl.set("#scene1", { opacity: 0 }, T + 0.12);
tl.set("#scene2", { opacity: 1 }, T + 0.12);
// Clear
tl.set("#glitch-r", { opacity: 0, x: 0, y: 0 }, T + 0.15);
tl.set("#glitch-b", { opacity: 0, x: 0, y: 0 }, T + 0.15);
tl.set("#s1", { x: 0 }, T + 0.15);
// Hold 1.0s, hide info, gap 0.5s
tl.to("#info1", { opacity: 0, duration: 0.3, ease: "power2.in" }, 7.0);
// ===== DEMO 2: Chromatic Aberration (8–13s) =====
tl.call(function () {}, [], 8);
resetScenes();
tl.to("#info2", { opacity: 1, duration: 0.3, ease: "power2.out" }, 8);
T = 9.5;
// Chromatic aberration transition
tl.set("#glitch-r", { opacity: 0.6, x: 0 }, T);
tl.set("#glitch-b", { opacity: 0.6, x: 0 }, T);
tl.to("#glitch-r", { x: -80, opacity: 0.8, duration: 0.3, ease: "power2.in" }, T);
tl.to("#glitch-b", { x: 80, opacity: 0.8, duration: 0.3, ease: "power2.in" }, T);
// Swap
tl.set("#scene1", { opacity: 0 }, T + 0.3);
tl.set("#scene2", { opacity: 1 }, T + 0.3);
// Converge back
tl.to("#glitch-r", { x: 0, opacity: 0, duration: 0.3, ease: "power2.out" }, T + 0.3);
tl.to("#glitch-b", { x: 0, opacity: 0, duration: 0.3, ease: "power2.out" }, T + 0.3);
tl.to("#info2", { opacity: 0, duration: 0.3, ease: "power2.in" }, 12.0);
// ===== DEMO 3: Ripple (13–18s) =====
tl.call(function () {}, [], 13);
resetScenes();
tl.to("#info3", { opacity: 1, duration: 0.3, ease: "power2.out" }, 13);
T = 14.5;
// Ripple distortion transition
tl.to("#s1", { x: 30, scale: 1.02, duration: 0.04, ease: "none" }, T);
tl.to(
"#s1",
{ x: -25, scale: 0.98, filter: "blur(4px)", duration: 0.04, ease: "none" },
T + 0.04,
);
tl.to(
"#s1",
{ x: 20, scale: 1.01, filter: "blur(6px)", duration: 0.04, ease: "none" },
T + 0.08,
);
tl.to(
"#s1",
{ x: -15, scale: 0.99, filter: "blur(8px)", duration: 0.04, ease: "none" },
T + 0.12,
);
tl.to(
"#s1",
{ x: 10, opacity: 0, filter: "blur(10px)", duration: 0.04, ease: "none" },
T + 0.16,
);
tl.set("#scene2", { opacity: 1 }, T + 0.16);
tl.fromTo(
"#s2",
{ x: -15, scale: 1.02, filter: "blur(8px)" },
{ x: 0, scale: 1, filter: "blur(0px)", duration: 0.2, ease: "power2.out" },
T + 0.2,
);
tl.to("#info3", { opacity: 0, duration: 0.3, ease: "power2.in" }, 17.0);
// ===== OUTRO (18–21s) =====
tl.set("#scene1", { opacity: 0 }, 18);
tl.set("#scene2", { opacity: 0 }, 18);
tl.set("#outro-card", { opacity: 1 }, 18);
tl.fromTo(
"#outro-card .card-title",
{ y: 30, opacity: 0 },
{ y: 0, opacity: 1, duration: 0.6, ease: "power2.out" },
18.3,
);
tl.fromTo(
"#outro-card .card-sub",
{ y: 20, opacity: 0 },
{ y: 0, opacity: 1, duration: 0.5, ease: "power2.out" },
18.7,
);
tl.to("#outro-card", { opacity: 0, duration: 0.4, ease: "power2.in" }, 20.5);
})();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink