mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 04:38:33 +00:00
vanceingallsandClaude Fable 5
e2846eb7cc
caption-highlight was already IIFE-wrapped; the other four leaked their runtime (hfAttach/hfBuild/...) as script-scope globals. Harmless when boot was synchronous, but the data-driven retrofit defers attach behind fonts.ready + the sibling fetch — with two caption components pasted into one composition document, every script finishes before any deferred boot runs, the last script's definitions win the shared scope, and the first component never registers its timeline (a renderer waiting on it hangs to timeout). Wrapping each template's script keeps its internals private so each boot attaches its own component. window.__HF_CAPTION_ATTACH__ remains intentionally window-scoped (last-defined-wins). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
641 lines
23 KiB
HTML
Vendored
641 lines
23 KiB
HTML
Vendored
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=1920, height=1080" />
|
|
<title>Weight Shift</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<style>
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background: transparent;
|
|
font-family: "Montserrat", Arial, sans-serif;
|
|
}
|
|
|
|
#weight-shift {
|
|
pointer-events: none;
|
|
position: relative;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
background: transparent;
|
|
}
|
|
|
|
.caption-layer {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 20;
|
|
pointer-events: none;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
.safe-zone {
|
|
position: absolute;
|
|
bottom: 100px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 1400px;
|
|
height: 278px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.caption-group {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 1400px;
|
|
height: 278px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transform-origin: 50% 50%;
|
|
will-change: transform;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.caption-copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
max-width: 1400px;
|
|
text-align: center;
|
|
}
|
|
|
|
.caption-line {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
width: max-content;
|
|
max-width: 1400px;
|
|
line-height: 1.1;
|
|
white-space: nowrap;
|
|
color: var(--hf-caption-primary, #ffffff);
|
|
font-family: "Montserrat", Arial, sans-serif;
|
|
font-weight: 300;
|
|
font-size: 72px;
|
|
letter-spacing: -0.03em;
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
text-transform: lowercase;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div
|
|
id="weight-shift"
|
|
data-composition-id="caption-weight-shift"
|
|
data-timeline-locked
|
|
data-start="0"
|
|
data-duration="8"
|
|
data-fps="30"
|
|
data-width="1920"
|
|
data-height="1080"
|
|
>
|
|
<div class="caption-layer" aria-hidden="true">
|
|
<div id="caption-stage" class="safe-zone"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// IIFE: keep every template's runtime private to itself so two caption
|
|
// components pasted into one composition document can't clobber each
|
|
// other's hfAttach/hfBuild via shared script-scope names (boot is async,
|
|
// so collisions surface AFTER all scripts have executed).
|
|
(function () {
|
|
var HF_COMPOSITION_ID = "caption-weight-shift";
|
|
var HF_ROOT_ID = "weight-shift";
|
|
var HF_GROUP_SELECTOR = ".caption-group";
|
|
|
|
var HF_DEMO_DATA = {
|
|
version: 1,
|
|
segments: [
|
|
{
|
|
start: 0,
|
|
text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
|
|
words: [
|
|
{ text: "Every", start: 0.0, end: 0.3 },
|
|
{ text: "great", start: 0.3, end: 0.55 },
|
|
{ text: "video", start: 0.55, end: 0.85 },
|
|
{ text: "starts", start: 0.85, end: 1.1 },
|
|
{ text: "with", start: 1.1, end: 1.25 },
|
|
{ text: "a", start: 1.25, end: 1.35 },
|
|
{ text: "single", start: 1.35, end: 1.65 },
|
|
{ text: "frame.", start: 1.65, end: 2.0 },
|
|
{ text: "HyperFrames", start: 2.1, end: 2.65 },
|
|
{ text: "lets", start: 2.65, end: 2.85 },
|
|
{ text: "you", start: 2.85, end: 2.95 },
|
|
{ text: "write", start: 2.95, end: 3.15 },
|
|
{ text: "HTML", start: 3.15, end: 3.55 },
|
|
{ text: "and", start: 3.55, end: 3.65 },
|
|
{ text: "render", start: 3.65, end: 3.95 },
|
|
{ text: "professional", start: 3.95, end: 4.45 },
|
|
{ text: "video.", start: 4.45, end: 4.8 },
|
|
{ text: "No", start: 4.9, end: 5.05 },
|
|
{ text: "timeline.", start: 5.05, end: 5.45 },
|
|
{ text: "No", start: 5.5, end: 5.65 },
|
|
{ text: "drag", start: 5.65, end: 5.85 },
|
|
{ text: "and", start: 5.85, end: 5.95 },
|
|
{ text: "drop.", start: 5.95, end: 6.25 },
|
|
{ text: "Just", start: 6.35, end: 6.55 },
|
|
{ text: "code", start: 6.55, end: 6.8 },
|
|
{ text: "that", start: 6.8, end: 6.95 },
|
|
{ text: "becomes", start: 6.95, end: 7.3 },
|
|
{ text: "cinema.", start: 7.3, end: 7.7 },
|
|
],
|
|
},
|
|
],
|
|
};
|
|
|
|
/* ── HyperFrames caption-data runtime (shared across caption templates) ── */
|
|
var HF_CONTRACT_VERSION = 1;
|
|
var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
|
|
|
|
function hfFlattenSegments(segments) {
|
|
var out = [];
|
|
(segments || []).forEach(function (seg) {
|
|
((seg && seg.words) || []).forEach(function (w) {
|
|
var start = Math.max(0, Number(w.start) || 0);
|
|
out.push({
|
|
text: String(w.word || w.text || "").trim(),
|
|
start: start,
|
|
end: Math.max(start, Number(w.end) || 0),
|
|
});
|
|
});
|
|
});
|
|
out.sort(function (a, b) {
|
|
return a.start - b.start;
|
|
});
|
|
return out.filter(function (w) {
|
|
return w.text.length > 0;
|
|
});
|
|
}
|
|
|
|
function hfDeriveDuration(words) {
|
|
var end = 0;
|
|
words.forEach(function (w) {
|
|
if (w.end > end) end = w.end;
|
|
});
|
|
return end;
|
|
}
|
|
|
|
function hfValidate(data) {
|
|
if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
|
|
if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
|
|
return { ok: false, reason: "unsupported-version" };
|
|
}
|
|
if (!Array.isArray(data.segments) || data.segments.length === 0) {
|
|
return { ok: false, reason: "no-segments" };
|
|
}
|
|
if (data.displayMode != null && data.displayMode !== "full") {
|
|
return { ok: false, reason: "unsupported-displayMode" };
|
|
}
|
|
var words = hfFlattenSegments(data.segments);
|
|
if (words.length === 0) return { ok: false, reason: "no-words" };
|
|
return { ok: true, words: words, durationS: hfDeriveDuration(words) };
|
|
}
|
|
|
|
function hfApplyStageConfig(data, durationS) {
|
|
var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
|
|
var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
|
|
var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
|
|
var root = document.getElementById(HF_ROOT_ID);
|
|
[document.documentElement, document.body, root].forEach(function (el) {
|
|
el.style.width = W + "px";
|
|
el.style.height = H + "px";
|
|
});
|
|
root.setAttribute("data-width", String(W));
|
|
root.setAttribute("data-height", String(H));
|
|
root.setAttribute("data-duration", String(durationS));
|
|
var brand = (data && data.brand) || {};
|
|
if (typeof brand.primaryColor === "string" && brand.primaryColor) {
|
|
root.style.setProperty("--hf-caption-primary", brand.primaryColor);
|
|
} else {
|
|
root.style.removeProperty("--hf-caption-primary");
|
|
}
|
|
if (typeof brand.accentColor === "string" && brand.accentColor) {
|
|
root.style.setProperty("--hf-caption-accent", brand.accentColor);
|
|
} else {
|
|
root.style.removeProperty("--hf-caption-accent");
|
|
}
|
|
return {
|
|
W: W,
|
|
H: H,
|
|
scaleX: W / 1920,
|
|
scaleY: H / 1080,
|
|
fontScale: Math.min(W, H) / 1080,
|
|
};
|
|
}
|
|
|
|
function hfPublishStatus(status) {
|
|
window.__HF_CAPTION_STATUS = status;
|
|
document
|
|
.getElementById(HF_ROOT_ID)
|
|
.setAttribute("data-caption-status", status.ok ? "ok" : "failed");
|
|
}
|
|
|
|
function hfRunGate(words, durationS, failReason) {
|
|
if (failReason) {
|
|
hfPublishStatus({
|
|
ok: false,
|
|
present: false,
|
|
contained: false,
|
|
reason: failReason,
|
|
version: HF_CONTRACT_VERSION,
|
|
durationS: durationS || 0,
|
|
});
|
|
return;
|
|
}
|
|
var root = document.getElementById(HF_ROOT_ID);
|
|
var rootRect = root.getBoundingClientRect();
|
|
var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
|
|
var present = false;
|
|
var contained = true;
|
|
var tokens = [];
|
|
words.forEach(function (w) {
|
|
var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
|
|
if (t) tokens.push(t);
|
|
});
|
|
groups.forEach(function (el) {
|
|
var prevOpacity = el.style.opacity;
|
|
var prevVisibility = el.style.visibility;
|
|
el.style.opacity = "1";
|
|
el.style.visibility = "visible";
|
|
var r = el.getBoundingClientRect();
|
|
if (r.width > 0 && r.height > 0) {
|
|
var text = (el.textContent || "").toLowerCase();
|
|
for (var i = 0; i < tokens.length; i++) {
|
|
if (text.indexOf(tokens[i]) !== -1) {
|
|
present = true;
|
|
break;
|
|
}
|
|
}
|
|
if (
|
|
r.left < rootRect.left - 1 ||
|
|
r.right > rootRect.right + 1 ||
|
|
r.top < rootRect.top - 1 ||
|
|
r.bottom > rootRect.bottom + 1
|
|
) {
|
|
contained = false;
|
|
}
|
|
}
|
|
el.style.opacity = prevOpacity;
|
|
el.style.visibility = prevVisibility;
|
|
});
|
|
hfPublishStatus({
|
|
ok: present && contained,
|
|
present: present,
|
|
contained: contained,
|
|
version: HF_CONTRACT_VERSION,
|
|
durationS: durationS,
|
|
});
|
|
}
|
|
|
|
var SAFE_ZONE_WIDTH, MAX_LINE_WIDTH, CAPTION_FONT_SIZE, DURATION;
|
|
var MAX_WORDS_PER_GROUP = 4;
|
|
var WORD_SPACING_DESIGN = 12;
|
|
var WORD_SPACING;
|
|
var PAUSE_THRESHOLD = 0.1;
|
|
var ENTRY_DURATION = 100 / 1000;
|
|
var WEIGHT_TRANSITION = 100 / 1000;
|
|
var FONT_WIDTH_SAFETY = 1.14;
|
|
var FONT_WEIGHT_LIGHT = 300;
|
|
var FONT_WEIGHT_BOLD = 700;
|
|
|
|
function normalizeWords(rawWords) {
|
|
return rawWords
|
|
.map(function (item) {
|
|
return {
|
|
text: String(item.word || item.text || "").trim(),
|
|
start: Math.max(0, Number(item.start) || 0),
|
|
end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
|
|
};
|
|
})
|
|
.filter(function (word) {
|
|
return word.text.length > 0;
|
|
});
|
|
}
|
|
|
|
var _fitCanvas = document.createElement("canvas");
|
|
var _fitCtx = _fitCanvas.getContext("2d");
|
|
function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
|
|
var size = baseFontSize;
|
|
var minSize = Math.floor(baseFontSize * 0.45);
|
|
while (size > minSize) {
|
|
_fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
|
|
if (_fitCtx.measureText(text).width <= maxWidth) return size;
|
|
size -= 2;
|
|
}
|
|
return minSize;
|
|
}
|
|
|
|
var measureCanvas = document.createElement("canvas");
|
|
var measureContext = measureCanvas.getContext("2d");
|
|
|
|
function measureWord(word) {
|
|
return measureContext.measureText(word.text.toLowerCase()).width * FONT_WIDTH_SAFETY;
|
|
}
|
|
|
|
function measureLineWidth(words) {
|
|
return words.reduce(function (total, word, index) {
|
|
return total + measureWord(word) + (index ? WORD_SPACING : 0);
|
|
}, 0);
|
|
}
|
|
|
|
function fitsInTwoLines(words) {
|
|
return measureLineWidth(words) <= MAX_LINE_WIDTH * 1.8;
|
|
}
|
|
|
|
function splitLines(words) {
|
|
if (words.length < 2) {
|
|
return [{ words: words, startIndex: 0 }];
|
|
}
|
|
var bestSplit = Math.ceil(words.length / 2);
|
|
var bestDiff = Infinity;
|
|
for (var s = 1; s < words.length; s++) {
|
|
var w1 = measureLineWidth(words.slice(0, s));
|
|
var w2 = measureLineWidth(words.slice(s));
|
|
if (w1 <= MAX_LINE_WIDTH && w2 <= MAX_LINE_WIDTH) {
|
|
var diff = Math.abs(w1 - w2);
|
|
if (diff < bestDiff) {
|
|
bestDiff = diff;
|
|
bestSplit = s;
|
|
}
|
|
}
|
|
}
|
|
var result = [];
|
|
var line1 = words.slice(0, bestSplit);
|
|
var line2 = words.slice(bestSplit);
|
|
if (line1.length) result.push({ words: line1, startIndex: 0 });
|
|
if (line2.length) result.push({ words: line2, startIndex: line1.length });
|
|
return result;
|
|
}
|
|
|
|
function avoidSingleWordGroups(groups) {
|
|
var out = [];
|
|
groups.forEach(function (group) {
|
|
if (
|
|
group.words.length === 1 &&
|
|
out.length > 0 &&
|
|
out[out.length - 1].words.length < MAX_WORDS_PER_GROUP
|
|
) {
|
|
out[out.length - 1] = makeGroup(out[out.length - 1].words.concat(group.words));
|
|
} else {
|
|
out.push(group);
|
|
}
|
|
});
|
|
|
|
for (var i = 0; i < out.length; i++) {
|
|
if (out[i].words.length !== 1) continue;
|
|
if (i + 1 < out.length && out[i + 1].words.length < MAX_WORDS_PER_GROUP) {
|
|
out[i] = makeGroup(out[i].words.concat(out[i + 1].words));
|
|
out.splice(i + 1, 1);
|
|
} else if (i > 0 && out[i - 1].words.length < MAX_WORDS_PER_GROUP) {
|
|
out[i - 1] = makeGroup(out[i - 1].words.concat(out[i].words));
|
|
out.splice(i, 1);
|
|
i--;
|
|
}
|
|
}
|
|
|
|
return out;
|
|
}
|
|
|
|
function makeGroups(words) {
|
|
var groups = [];
|
|
var current = [];
|
|
words.forEach(function (word, index) {
|
|
var nextWord = words[index + 1];
|
|
var testGroup = current.concat([word]);
|
|
if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsInTwoLines(testGroup)) {
|
|
if (current.length) groups.push(makeGroup(current));
|
|
current = [word];
|
|
return;
|
|
}
|
|
current.push(word);
|
|
var punctuation = /[,.:!?]$/.test(word.text);
|
|
var pause = nextWord ? nextWord.start - word.end : 0;
|
|
if (
|
|
!nextWord ||
|
|
punctuation ||
|
|
pause >= PAUSE_THRESHOLD ||
|
|
current.length >= MAX_WORDS_PER_GROUP
|
|
) {
|
|
groups.push(makeGroup(current));
|
|
current = [];
|
|
}
|
|
});
|
|
if (current.length) groups.push(makeGroup(current));
|
|
return avoidSingleWordGroups(groups);
|
|
}
|
|
|
|
function makeGroup(words) {
|
|
return {
|
|
words: words.slice(),
|
|
lines: splitLines(words),
|
|
start: words[0].start,
|
|
end: words[words.length - 1].end,
|
|
};
|
|
}
|
|
|
|
function buildCaptions(groups) {
|
|
var stage = document.getElementById("caption-stage");
|
|
groups.forEach(function (group, groupIndex) {
|
|
var groupText = group.words
|
|
.map(function (w) {
|
|
return w.text.toLowerCase();
|
|
})
|
|
.join(" ");
|
|
var computedSize = fitFontSize(
|
|
groupText,
|
|
CAPTION_FONT_SIZE,
|
|
"700",
|
|
"Montserrat",
|
|
MAX_LINE_WIDTH,
|
|
);
|
|
var groupEl = document.createElement("div");
|
|
var copyEl = document.createElement("div");
|
|
groupEl.id = "caption-group-" + groupIndex;
|
|
groupEl.className = "caption-group";
|
|
copyEl.className = "caption-copy";
|
|
group.lines.forEach(function (line, lineIndex) {
|
|
var lineEl = document.createElement("div");
|
|
lineEl.className = "caption-line";
|
|
lineEl.id = "caption-group-" + groupIndex + "-line-" + lineIndex;
|
|
lineEl.style.fontWeight = lineIndex === 0 ? FONT_WEIGHT_BOLD : FONT_WEIGHT_LIGHT;
|
|
lineEl.style.fontSize = computedSize + "px";
|
|
lineEl.style.maxWidth = SAFE_ZONE_WIDTH + "px";
|
|
line.words.forEach(function (word, wordIndex) {
|
|
var wordEl = document.createElement("span");
|
|
wordEl.textContent = word.text.toLowerCase();
|
|
wordEl.style.display = "inline-block";
|
|
lineEl.appendChild(wordEl);
|
|
});
|
|
copyEl.appendChild(lineEl);
|
|
});
|
|
groupEl.appendChild(copyEl);
|
|
stage.appendChild(groupEl);
|
|
});
|
|
}
|
|
|
|
function hfTeardown() {
|
|
document.getElementById("caption-stage").innerHTML = "";
|
|
}
|
|
|
|
function hfBuild(words, layout, durationS) {
|
|
DURATION = durationS;
|
|
CAPTION_FONT_SIZE = Math.round(72 * layout.fontScale);
|
|
SAFE_ZONE_WIDTH = Math.round(1400 * layout.scaleX);
|
|
MAX_LINE_WIDTH = SAFE_ZONE_WIDTH - Math.round(40 * layout.scaleX);
|
|
WORD_SPACING = Math.round(WORD_SPACING_DESIGN * layout.fontScale);
|
|
|
|
var stage = document.getElementById("caption-stage");
|
|
var stageHeight = Math.round(278 * layout.fontScale);
|
|
stage.style.width = SAFE_ZONE_WIDTH + "px";
|
|
stage.style.height = stageHeight + "px";
|
|
stage.style.bottom = Math.round(100 * layout.scaleY) + "px";
|
|
|
|
measureContext.font = "700 " + CAPTION_FONT_SIZE + "px Montserrat";
|
|
|
|
var WORDS = normalizeWords(words);
|
|
var GROUPS = makeGroups(WORDS);
|
|
buildCaptions(GROUPS);
|
|
// set per-group sizing to match the runtime stage
|
|
GROUPS.forEach(function (_, i) {
|
|
var el = document.getElementById("caption-group-" + i);
|
|
el.style.width = SAFE_ZONE_WIDTH + "px";
|
|
el.style.height = stageHeight + "px";
|
|
});
|
|
|
|
var tl = gsap.timeline({ paused: true });
|
|
|
|
var visibleStarts = GROUPS.map(function (group, groupIndex) {
|
|
var prev = GROUPS[groupIndex - 1];
|
|
var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
|
|
var entryLead = Math.min(ENTRY_DURATION, availableGap);
|
|
return Math.max(0, group.start - entryLead);
|
|
});
|
|
|
|
var allGroupEls = GROUPS.map(function (_, i) {
|
|
return document.getElementById("caption-group-" + i);
|
|
});
|
|
|
|
GROUPS.forEach(function (group, groupIndex) {
|
|
var groupEl = allGroupEls[groupIndex];
|
|
var visibleStart = visibleStarts[groupIndex];
|
|
var visibleEnd =
|
|
groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
|
|
|
|
// Each group already owns its full opacity lifecycle (set 0 at its
|
|
// own visibleStart, animated to 1, then set back to 0 at its own
|
|
// visibleEnd below), and groups occupy non-overlapping windows, so
|
|
// explicitly hiding every OTHER group here was redundant and made
|
|
// timeline construction O(groups^2) — this collapsed under dense
|
|
// stress transcripts (many short groups). Removed; behavior is
|
|
// unchanged (verified against templates.test.ts).
|
|
|
|
tl.set(groupEl, { opacity: 0, scale: 0.85 }, visibleStart);
|
|
tl.to(
|
|
groupEl,
|
|
{ opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
|
|
visibleStart,
|
|
);
|
|
|
|
if (group.lines.length === 2) {
|
|
var line1El = document.getElementById("caption-group-" + groupIndex + "-line-0");
|
|
var line2El = document.getElementById("caption-group-" + groupIndex + "-line-1");
|
|
var line2FirstWord = group.lines[1].words[0];
|
|
var switchTime = line2FirstWord.start;
|
|
|
|
tl.to(
|
|
line1El,
|
|
{ fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.out" },
|
|
switchTime,
|
|
);
|
|
tl.to(
|
|
line2El,
|
|
{ fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" },
|
|
switchTime,
|
|
);
|
|
}
|
|
|
|
tl.set(groupEl, { opacity: 0 }, visibleEnd);
|
|
});
|
|
|
|
return tl;
|
|
}
|
|
|
|
var hfCurrentTimeline = null;
|
|
|
|
function hfAttach(data) {
|
|
var v = hfValidate(data);
|
|
if (!v.ok) {
|
|
hfRunGate([], 0, v.reason);
|
|
return;
|
|
}
|
|
if (hfCurrentTimeline) {
|
|
hfCurrentTimeline.kill();
|
|
hfCurrentTimeline = null;
|
|
}
|
|
hfTeardown();
|
|
var layout = hfApplyStageConfig(data, v.durationS);
|
|
var tl = hfBuild(v.words, layout, v.durationS);
|
|
tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
|
|
// GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
|
|
// so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
|
|
// at t=0 — the first frame would show pre-timeline CSS defaults (usually
|
|
// hidden). render(time, suppressEvents, force) with force=true bypasses that.
|
|
tl.render(0, true, true);
|
|
hfCurrentTimeline = tl;
|
|
window.__timelines = window.__timelines || {};
|
|
window.__timelines[HF_COMPOSITION_ID] = tl;
|
|
hfRunGate(v.words, v.durationS, null);
|
|
}
|
|
window.__HF_CAPTION_ATTACH__ = hfAttach;
|
|
|
|
(function hfBoot() {
|
|
function start(data) {
|
|
var ready =
|
|
document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
|
|
ready.then(function () {
|
|
hfAttach(data);
|
|
});
|
|
}
|
|
if (window.__HF_CAPTION__) {
|
|
start(window.__HF_CAPTION__);
|
|
return;
|
|
}
|
|
fetch("./caption-data.json")
|
|
.then(function (r) {
|
|
return r.ok ? r.json() : null;
|
|
})
|
|
.catch(function () {
|
|
return null;
|
|
})
|
|
.then(function (json) {
|
|
start(json || HF_DEMO_DATA);
|
|
});
|
|
})();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|