ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-04 16:42:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(registry): make caption-emoji-pop data-driven with generic emoji lexicon

Browse Source 
Retrofits caption-emoji-pop onto the shared HyperFrames caption-data runtime
(Blocks A-D) and the emphasis heuristic (Block E), replacing the hardcoded
7-word emoji map, fixed KEYWORDS set, and TRANSITION_WORDS set with a
generic ~40-entry lexicon and HF_STOPWORDS/hfIsEmphasisWord. The component
now consumes brand.primaryColor (hfPrimaryColor) and brand.accentColor
(hfAccentColors) and rescales stage/font/emoji sizing to the runtime
resolution via layout.fontScale/scaleX/scaleY.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
vanceingalls
2026-07-23 21:31:46 +00:00
co-authored by Claude Sonnet 5
parent 020c8986f4
commit 392a9d251a
1 changed files with 419 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
registry/components/caption-emoji-pop/caption-emoji-pop.html
Vendored
+419 -100
View File
@@ -125,22 +125,185 @@
</div>
<script>
var DURATION = 8;
var SAFE_ZONE_WIDTH = 1400;
var CAPTION_FONT_SIZE = 72;
var MAX_WORDS_PER_GROUP = 3;
var WORD_SPACING = 14;
var PAUSE_THRESHOLD = 0.1;
var ENTRY_FRAMES = 4;
var EXIT_FRAMES = 3;
var FPS = 30;
var ENTRY_DURATION = ENTRY_FRAMES / FPS;
var EXIT_DURATION = EXIT_FRAMES / FPS;
var FONT_WIDTH_SAFETY = 1.14;
var PRIMARY_COLOR = "#FFFFFF";
var ACCENT_COLORS = ["#FF76FF", "#FF0002", "#B2F7FF"];
var KEYWORDS = new Set(["hyperframes", "html", "professional", "code", "cinema"]);
var TRANSITION_WORDS = new Set([
var HF_COMPOSITION_ID = "caption-emoji-pop";
var HF_ROOT_ID = "emoji-pop";
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);
}
if (typeof brand.accentColor === "string" && brand.accentColor) {
root.style.setProperty("--hf-caption-accent", brand.accentColor);
}
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 HF_STOPWORDS = new Set([
"the",
"a",
"an",
@@ -193,49 +356,115 @@
"up",
"out",
"about",
"into",
"over",
"after",
"before",
"your",
"you",
"our",
"we",
"they",
"them",
"their",
"there",
"here",
"when",
"what",
"which",
"who",
"how",
"all",
"any",
"some",
"more",
"most",
"other",
"than",
"too",
"very",
"also",
"because",
]);
// Emoji map for key words
var WORD_EMOJI = {
hyperframes: "🎬",
html: "💻",
professional: "✨",
code: "⌨️",
cinema: "🎥",
video: "📹",
frame: "🖼️",
};
function hfIsEmphasisWord(text) {
var clean = String(text)
.toLowerCase()
.replace(/[^a-z]/g, "");
return clean.length >= 5 && !HF_STOPWORDS.has(clean);
}
var TRANSCRIPT = [
{ 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 },
];
var DURATION, SAFE_ZONE_WIDTH, CAPTION_FONT_SIZE, WORD_SPACING;
var MAX_WORDS_PER_GROUP = 3;
var PAUSE_THRESHOLD = 0.1;
var ENTRY_FRAMES = 4;
var EXIT_FRAMES = 3;
var FPS = 30;
var ENTRY_DURATION = ENTRY_FRAMES / FPS;
var EXIT_DURATION = EXIT_FRAMES / FPS;
var FONT_WIDTH_SAFETY = 1.14;
var PRIMARY_COLOR = "#FFFFFF";
var ACCENT_COLORS = ["#FF76FF", "#FF0002", "#B2F7FF"];
var hfPrimaryColor = PRIMARY_COLOR;
var hfAccentColors = ACCENT_COLORS;
var hfFontScale = 1;
// Emoji map for a generic keyword lexicon (not tied to the demo transcript)
var WORD_EMOJI = {
amazing: "🤩",
awesome: "🔥",
big: "🐘",
brain: "🧠",
build: "🛠️",
built: "🛠️",
celebrate: "🎉",
change: "🔄",
cinema: "🎥",
code: "⌨️",
customers: "🤝",
data: "📊",
dream: "💭",
easy: "👌",
fast: "⚡",
fire: "🔥",
frame: "🖼️",
free: "🎁",
fun: "🎈",
future: "🔮",
global: "🌍",
grow: "📈",
growth: "📈",
heart: "❤️",
huge: "🐘",
idea: "💡",
launch: "🚀",
learn: "📚",
love: "❤️",
magic: "✨",
money: "💰",
music: "🎵",
new: "✨",
party: "🎉",
perfect: "💯",
power: "💪",
professional: "✨",
rocket: "🚀",
save: "🛟",
saves: "🛟",
secret: "🤫",
smart: "🧠",
star: "⭐",
stop: "✋",
strong: "💪",
success: "🏆",
team: "👥",
time: "⏰",
today: "📅",
video: "📹",
win: "🏆",
world: "🌍",
wow: "😮",
};
function normalizeWords(rawWords) {
return rawWords
@@ -262,17 +491,17 @@
function assignWordColors(words, groupIndex) {
return words.map(function (word, index) {
var clean = word.text.toLowerCase().replace(/[^a-z]/g, "");
if (KEYWORDS.has(clean)) {
var ci = Math.floor(seededRandom(groupIndex * 23 + index * 31) * ACCENT_COLORS.length);
return ACCENT_COLORS[ci];
if (hfIsEmphasisWord(word.text)) {
var ci = Math.floor(seededRandom(groupIndex * 23 + index * 31) * hfAccentColors.length);
return hfAccentColors[ci];
}
if (TRANSITION_WORDS.has(clean)) return PRIMARY_COLOR;
if (HF_STOPWORDS.has(clean)) return hfPrimaryColor;
var rand = seededRandom(groupIndex * 13 + index);
if (rand > 0.55) {
var ci2 = Math.floor(rand * ACCENT_COLORS.length) % ACCENT_COLORS.length;
return ACCENT_COLORS[ci2];
var ci2 = Math.floor(rand * hfAccentColors.length) % hfAccentColors.length;
return hfAccentColors[ci2];
}
return PRIMARY_COLOR;
return hfPrimaryColor;
});
}
@@ -398,13 +627,14 @@
var emojiEl = document.createElement("div");
emojiEl.className = "caption-emoji";
emojiEl.textContent = group.emoji;
emojiEl.style.fontSize = Math.round(56 * hfFontScale) + "px";
groupEl.appendChild(emojiEl);
}
var lineEl = document.createElement("div");
lineEl.className = "caption-line";
group.words.forEach(function (word, wordIndex) {
var color = group.colors[wordIndex] || PRIMARY_COLOR;
var color = group.colors[wordIndex] || hfPrimaryColor;
var wordEl = document.createElement("span");
wordEl.className = "caption-word";
wordEl.textContent = word.text.toUpperCase();
@@ -419,49 +649,138 @@
});
}
var WORDS = normalizeWords(TRANSCRIPT);
var GROUPS = makeGroups(WORDS);
buildCaptions(GROUPS);
function hfTeardown() {
document.getElementById("caption-stage").innerHTML = "";
}
window.__timelines = window.__timelines || {};
var tl = gsap.timeline({ paused: true });
function hfBuild(words, layout, durationS) {
DURATION = durationS;
CAPTION_FONT_SIZE = Math.round(72 * layout.fontScale);
SAFE_ZONE_WIDTH = Math.round(1400 * layout.scaleX);
WORD_SPACING = Math.round(14 * layout.fontScale);
hfFontScale = layout.fontScale;
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 stage = document.getElementById("caption-stage");
var stageHeight = Math.round(280 * layout.fontScale);
stage.style.width = SAFE_ZONE_WIDTH + "px";
stage.style.height = stageHeight + "px";
stage.style.bottom = Math.round(80 * layout.scaleY) + "px";
var allGroupEls = GROUPS.map(function (_, i) {
return document.getElementById("caption-group-" + i);
});
var rootEl = document.getElementById(HF_ROOT_ID);
var primary = getComputedStyle(rootEl).getPropertyValue("--hf-caption-primary").trim();
var accent = getComputedStyle(rootEl).getPropertyValue("--hf-caption-accent").trim();
hfPrimaryColor = /^#[0-9a-f]{6}$/i.test(primary) ? primary : "#FFFFFF";
hfAccentColors = /^#[0-9a-f]{6}$/i.test(accent)
? [accent]
: ["#FF76FF", "#FF0002", "#B2F7FF"];
GROUPS.forEach(function (group, groupIndex) {
var groupEl = allGroupEls[groupIndex];
var visibleStart = visibleStarts[groupIndex];
var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
var exitStart = Math.max(visibleStart, visibleEnd - EXIT_DURATION);
allGroupEls.forEach(function (otherEl, otherIndex) {
if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
var WORDS = normalizeWords(words);
var GROUPS = makeGroups(WORDS);
buildCaptions(GROUPS);
GROUPS.forEach(function (_, i) {
var el = document.getElementById("caption-group-" + i);
el.style.width = SAFE_ZONE_WIDTH + "px";
el.style.height = stageHeight + "px";
});
tl.set(groupEl, { opacity: 0, scaleX: 0.8, scaleY: 1 }, visibleStart);
tl.to(
groupEl,
{ opacity: 1, scaleX: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
visibleStart,
);
tl.to(
groupEl,
{ scaleX: 0.75, opacity: 0.8, duration: EXIT_DURATION, ease: "power2.in", force3D: true },
exitStart,
);
tl.set(groupEl, { opacity: 0 }, visibleEnd);
});
var tl = gsap.timeline({ paused: true });
window.__timelines["caption-emoji-pop"] = tl;
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;
var exitStart = Math.max(visibleStart, visibleEnd - EXIT_DURATION);
allGroupEls.forEach(function (otherEl, otherIndex) {
if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
});
tl.set(groupEl, { opacity: 0, scaleX: 0.8, scaleY: 1 }, visibleStart);
tl.to(
groupEl,
{ opacity: 1, scaleX: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
visibleStart,
);
tl.to(
groupEl,
{
scaleX: 0.75,
opacity: 0.8,
duration: EXIT_DURATION,
ease: "power2.in",
force3D: true,
},
exitStart,
);
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>