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
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
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
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
Windows render verification / Detect changes (push) Has been cancelled
Windows render verification / Preflight (lint + format) (push) Has been cancelled
Windows render verification / Render on windows-latest (push) Has been cancelled
Windows render verification / Tests on windows-latest (push) Has been cancelled
CI / Detect changes (push) Has been cancelled
CI / Build (push) Has been cancelled
CI / Lint (push) Has been cancelled
CI / Fallow audit (push) Has been cancelled
CI / Format (push) Has been cancelled
CI / Typecheck (push) Has been cancelled
CI / Test (push) Has been cancelled
CI / Producer: integration tests (push) Has been cancelled
CI / Producer: unit tests (push) Has been cancelled
CI / File size check (push) Has been cancelled
CI / Test: skills (push) Has been cancelled
CI / Skills: manifest in sync (push) Has been cancelled
CI / CLI: npx shim (macos-latest) (push) Has been cancelled
CI / CLI: npx shim (ubuntu-latest) (push) Has been cancelled
CI / CLI: npx shim (windows-latest) (push) Has been cancelled
CI / SDK: unit + contract + smoke (push) Has been cancelled
CI / Test: runtime contract (push) Has been cancelled
CI / Studio: load smoke (push) Has been cancelled
CI / Smoke: global install (push) Has been cancelled
CI / CLI smoke (required) (push) Has been cancelled
CI / Semantic PR title (push) Has been cancelled
Player perf / Detect changes (push) Has been cancelled
Player perf / Preflight (lint + format) (push) Has been cancelled
Player perf / player-perf (push) Has been cancelled
Player perf / Perf: drift (push) Has been cancelled
Player perf / Perf: fps (push) Has been cancelled
Player perf / Perf: parity (push) Has been cancelled
Player perf / Perf: scrub (push) Has been cancelled
Player perf / Perf: load (push) Has been cancelled
preview-regression / Detect changes (push) Has been cancelled
preview-regression / Preflight (lint + format) (push) Has been cancelled
preview-regression / Preview parity (push) Has been cancelled
preview-regression / preview-regression (push) Has been cancelled
regression / regression (push) Has been cancelled
regression / Detect changes (push) Has been cancelled
regression / Preflight (lint + format) (push) Has been cancelled
regression / regression-shards (hdr-regression style-5-prod style-3-prod mov-prores, shard-1) (push) Has been cancelled
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
regression / regression-shards (style-13-prod style-6-prod vignelli-stacking gsap-letters-render-compat audio-mux-parity, shard-8) (push) Has been cancelled
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
CodeQL / Analyze (actions) (push) Has been cancelled
CodeQL / Analyze (javascript-typescript) (push) Has been cancelled
CodeQL / Analyze (python) (push) Has been cancelled
Docs / Validate docs (push) Has been cancelled
Sync skills to ClawHub / Publish changed skills (push) Has been cancelled
251 lines
8.0 KiB
HTML
Vendored
251 lines
8.0 KiB
HTML
Vendored
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=1920, height=1080" />
|
||
<title>Vignette — Demo</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;
|
||
}
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
width: 1920px;
|
||
height: 1080px;
|
||
overflow: hidden;
|
||
background: #000;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div
|
||
id="demo"
|
||
data-composition-id="vignette-demo"
|
||
data-width="1920"
|
||
data-height="1080"
|
||
data-duration="5"
|
||
>
|
||
<!-- Backdrop: a layered "cinematic still" — a warm key light at upper-left,
|
||
a teal rim light at lower-right, and a soft global glow. The vignette
|
||
overlay reads against this so the effect is unambiguous. -->
|
||
<div class="demo-bg">
|
||
<!-- Subject shapes — a stylized "moon" centered, with subtle haze rings
|
||
so the eye has something to anchor on. Without a subject the demo
|
||
looks like an abstract gradient and the vignette gets lost. -->
|
||
<div class="demo-haze haze-far"></div>
|
||
<div class="demo-haze haze-near"></div>
|
||
<div class="demo-subject"></div>
|
||
|
||
<div class="demo-text">
|
||
<div class="demo-title">
|
||
<span class="ch">V</span><span class="ch">I</span><span class="ch">G</span
|
||
><span class="ch">N</span><span class="ch">E</span><span class="ch">T</span
|
||
><span class="ch">T</span><span class="ch">E</span>
|
||
</div>
|
||
<div class="demo-subtitle">Frame the eye. Hold the moment.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- The vignette component -->
|
||
<div
|
||
id="hf-vignette"
|
||
style="
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
z-index: 90;
|
||
"
|
||
></div>
|
||
|
||
<style>
|
||
.demo-bg {
|
||
width: 1920px;
|
||
height: 1080px;
|
||
background:
|
||
radial-gradient(
|
||
circle at 22% 28%,
|
||
rgba(255, 196, 130, 0.85),
|
||
rgba(255, 196, 130, 0) 38%
|
||
),
|
||
radial-gradient(circle at 78% 78%, rgba(64, 175, 200, 0.55), rgba(64, 175, 200, 0) 42%),
|
||
radial-gradient(circle at 50% 50%, #3b2616 0%, #1a0e07 68%, #060403 100%);
|
||
position: relative;
|
||
overflow: hidden;
|
||
font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||
}
|
||
|
||
.demo-haze {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
border-radius: 50%;
|
||
transform: translate(-50%, -50%) scale(1);
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
}
|
||
.haze-far {
|
||
width: 1400px;
|
||
height: 1400px;
|
||
background: radial-gradient(
|
||
circle,
|
||
rgba(255, 220, 180, 0.18),
|
||
rgba(255, 220, 180, 0) 65%
|
||
);
|
||
filter: blur(40px);
|
||
}
|
||
.haze-near {
|
||
width: 900px;
|
||
height: 900px;
|
||
background: radial-gradient(
|
||
circle,
|
||
rgba(255, 240, 210, 0.32),
|
||
rgba(255, 240, 210, 0) 60%
|
||
);
|
||
filter: blur(20px);
|
||
}
|
||
|
||
.demo-subject {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 520px;
|
||
height: 520px;
|
||
border-radius: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background: radial-gradient(
|
||
circle at 35% 32%,
|
||
#fff6e0 0%,
|
||
#f4c47e 28%,
|
||
#b87a3f 62%,
|
||
#6b3d1c 88%,
|
||
#2a1607 100%
|
||
);
|
||
box-shadow:
|
||
inset -40px -40px 80px rgba(0, 0, 0, 0.55),
|
||
0 0 120px rgba(255, 180, 100, 0.35);
|
||
opacity: 0;
|
||
}
|
||
|
||
.demo-text {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 12%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 14px;
|
||
pointer-events: none;
|
||
/* Sits above the subject in document order; below the vignette in z-index */
|
||
z-index: 5;
|
||
}
|
||
|
||
.demo-title {
|
||
font-size: 108px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.18em;
|
||
color: #f6ecd0;
|
||
text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
|
||
opacity: 0;
|
||
}
|
||
.demo-title .ch {
|
||
display: inline-block;
|
||
}
|
||
|
||
.demo-subtitle {
|
||
font-size: 30px;
|
||
font-weight: 400;
|
||
letter-spacing: 0.32em;
|
||
text-transform: uppercase;
|
||
color: rgba(246, 236, 208, 0.72);
|
||
opacity: 0;
|
||
}
|
||
|
||
#hf-vignette {
|
||
background: radial-gradient(
|
||
var(--vignette-shape, ellipse) at center,
|
||
transparent var(--vignette-size, 45%),
|
||
var(--vignette-color, rgba(0, 0, 0, 0.7)) var(--vignette-edge, 100%)
|
||
);
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
(function () {
|
||
const tl = gsap.timeline({ paused: true });
|
||
|
||
// Reveal the backdrop subject and haze first so the vignette has
|
||
// something to frame. Without a subject the effect reads as a flat
|
||
// dark gradient — uninteresting in a still preview.
|
||
tl.to(".haze-far", { opacity: 1, duration: 0.8, ease: "power2.out" }, 0.0);
|
||
tl.to(".haze-near", { opacity: 1, duration: 0.8, ease: "power2.out" }, 0.15);
|
||
tl.to(".demo-subject", { opacity: 1, scale: 1, duration: 1.0, ease: "power3.out" }, 0.1);
|
||
|
||
// Title + subtitle settle in. The letters settle from wider spacing to their
|
||
// resting spacing — the faithful smooth equivalent of a letter-spacing tween is a
|
||
// per-glyph x spread (transform, sub-pixel smooth), NOT a uniform scale (which
|
||
// would resize the glyphs instead of closing the gaps). letter-spacing holds at
|
||
// its CSS resting 0.18em; each glyph starts offset by the extra gap the original
|
||
// tween opened — (0.32em − 0.18em) × 108px ≈ 15.12px per gap — and converges to 0,
|
||
// centered about the word (8 chars → center at index 3.5).
|
||
tl.fromTo(
|
||
".demo-title",
|
||
{ opacity: 0, y: 18 },
|
||
{ opacity: 1, y: 0, duration: 1.0, ease: "power3.out" },
|
||
0.6,
|
||
);
|
||
tl.from(
|
||
".demo-title .ch",
|
||
{ x: (i) => (i - 3.5) * 15.12, duration: 1.0, ease: "power3.out" },
|
||
0.6,
|
||
);
|
||
tl.to(".demo-subtitle", { opacity: 1, duration: 0.8, ease: "power3.out" }, 1.0);
|
||
|
||
// Vignette: start visibly soft (so viewers see the unframed scene),
|
||
// then ramp to a strong cinematic vignette and hold through the
|
||
// capture-time peak (~3.0s, picked to match the catalog thumbnail
|
||
// sampling at `Math.min(3.0, duration * 0.6)` for duration=5).
|
||
gsap.set("#hf-vignette", {
|
||
"--vignette-color": "rgba(0, 0, 0, 0.35)",
|
||
"--vignette-size": "70%",
|
||
"--vignette-edge": "100%",
|
||
});
|
||
tl.to(
|
||
"#hf-vignette",
|
||
{
|
||
"--vignette-color": "rgba(0, 0, 0, 0.92)",
|
||
"--vignette-size": "26%",
|
||
duration: 1.6,
|
||
ease: "power2.inOut",
|
||
},
|
||
1.4,
|
||
);
|
||
|
||
// Gentle breathing for the video loop so the effect reads as alive,
|
||
// not static. Keeps the still-frame at peak intensity around t≈3s.
|
||
tl.to(
|
||
"#hf-vignette",
|
||
{ "--vignette-size": "32%", duration: 0.9, ease: "sine.inOut" },
|
||
3.4,
|
||
);
|
||
tl.to(
|
||
"#hf-vignette",
|
||
{ "--vignette-size": "26%", duration: 0.9, ease: "sine.inOut" },
|
||
4.3,
|
||
);
|
||
|
||
window.__timelines = window.__timelines || {};
|
||
window.__timelines["vignette-demo"] = tl;
|
||
})();
|
||
</script>
|
||
</div>
|
||
</body>
|
||
</html>
|