mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-05 00:56:23 +00:00
Vance IngallsandClaude Opus 4.8
082280e8de
Extend the rule beyond positional layout props to the text-reflow props letterSpacing / wordSpacing / fontSize. Animating them reflows text and snaps glyph positions to the pixel grid, so a slow ease-out tail micro-stutters exactly like left/top — measured on a real composition, a slow letterSpacing "settle" rendered 19/30 unique frames vs 30/30 for the transform-driven motion in the same piece. They have no transform replacement (fix: settle via scale or hold the value), and the snap happens during browser layout, upstream of the canvas raster, so they are never html-in-canvas-exempt. width/height stay excluded (legit animated uses — progress bars, reveals). Restructure the finding's message/fixHint to compose per category (positional -> x/y; reflow -> scale/hold; roundProps -> remove) instead of a two-branch ternary. Skill guidance (gsap-transforms-and-perf.md) broadened: "layout property" includes reflow; letterSpacing/fontSize named as the settle-trap. Migrate the one surfaced positive: registry/components/vignette/demo.html title settle letterSpacing -> a subtle scale settle (render-verified 20/20 unique frames, smooth). Blast radius across the registry was this one comp, zero false positives. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
236 lines
7.3 KiB
HTML
Vendored
236 lines
7.3 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">VIGNETTE</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-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. Settle via scale (transform), not letterSpacing:
|
|
// animating letter-spacing reflows text and snaps glyph positions to the pixel
|
|
// grid, so a slow ease-out tail micro-stutters. letter-spacing holds at its CSS
|
|
// resting value (0.18em); the subtle scale gives the same "settle into place" feel.
|
|
tl.fromTo(
|
|
".demo-title",
|
|
{ opacity: 0, y: 18, scale: 1.04 },
|
|
{ opacity: 1, y: 0, scale: 1, 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>
|