ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-03 04:38:33 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
09a5ef70925f8a67276df0166ff1e1a6eca5db6f
hyperframes/registry/components/caption-emoji-pop/caption-emoji-pop.html
T
Miguel Ángel 9734578e60 feat(registry): bring back the video-primitive moves (#3169) 
Restores the 208 catalog items reverted after their previews 404'd in
production, this time on the payload mechanism rather than the .html files
that caused the outage.

The generator no longer writes a preview document to docs/public. That writer,
and the machinery under it, existed only to produce files the docs host
discards, so it is gone rather than bypassed. Items now embed the composition
itself via a payload, which is what the previous change already does for the
items that were already in the catalog.

The variables explorer is parked, not restored: it drove its preview through
the same unpublished .html path, so it would have shown an empty frame. Items
that declare variables get the live player plus the static variables table, and
reconnecting the explorer to payloads is a follow-up.
2026-08-10 18:46:03 -04:00

468 lines
14 KiB
HTML
Vendored
Raw Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1920, height=1080" />
<title>Emoji Pop</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=Gabarito:wght@900&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: "Gabarito", Arial, sans-serif;
}
#emoji-pop {
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: 80px;
left: 50%;
transform: translateX(-50%);
width: 1400px;
height: 280px;
display: flex;
align-items: center;
justify-content: center;
}
.caption-group {
position: absolute;
left: 0;
top: 0;
width: 1400px;
height: 280px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform-origin: 50% 50%;
will-change: transform;
backface-visibility: hidden;
}
.caption-emoji {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% - 70px));
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
font-size: 56px;
line-height: 1;
text-align: center;
}
.caption-line {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
width: max-content;
max-width: 1400px;
line-height: 1.1;
white-space: nowrap;
}
.caption-word {
display: inline-block;
color: #ffffff;
font-family: "Gabarito", Arial, sans-serif;
font-weight: 900;
font-size: 72px;
line-height: 1.1;
letter-spacing: -0.03em;
text-transform: uppercase;
-webkit-text-stroke: 3px #000000;
paint-order: stroke fill;
}
</style>
</head>
<body>
<div
id="emoji-pop"
data-composition-id="caption-emoji-pop"
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>
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([
"the",
"a",
"an",
"and",
"or",
"but",
"is",
"are",
"was",
"were",
"to",
"of",
"in",
"on",
"at",
"for",
"with",
"by",
"from",
"as",
"it",
"its",
"this",
"that",
"these",
"those",
"be",
"been",
"have",
"has",
"had",
"do",
"does",
"did",
"will",
"would",
"could",
"should",
"may",
"might",
"must",
"can",
"if",
"then",
"so",
"just",
"not",
"no",
"yes",
"up",
"out",
"about",
]);
// Emoji map for key words
var WORD_EMOJI = {
hyperframes: "🎬",
html: "💻",
professional: "✨",
code: "⌨️",
cinema: "🎥",
video: "📹",
frame: "🖼️",
};
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 },
];
function normalizeWords(rawWords) {
return rawWords
.map(function (item) {
var text = String(item.word || item.text || "").trim();
var clean = text.toLowerCase().replace(/[^a-z]/g, "");
return {
text: text,
start: Math.max(0, Number(item.start) || 0),
end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
emoji: WORD_EMOJI[clean] || null,
};
})
.filter(function (word) {
return word.text.length > 0;
});
}
function seededRandom(seed) {
var x = Math.sin(seed * 9999) * 10000;
return x - Math.floor(x);
}
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 (TRANSITION_WORDS.has(clean)) return PRIMARY_COLOR;
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];
}
return PRIMARY_COLOR;
});
}
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, fontSize) {
measureContext.font = "900 " + fontSize + "px Gabarito";
return measureContext.measureText(word.text.toUpperCase()).width * FONT_WIDTH_SAFETY;
}
function measureLineWidth(words, fontSize) {
return words.reduce(function (total, word, index) {
return total + measureWord(word, fontSize) + (index ? WORD_SPACING : 0);
}, 0);
}
function fitsLine(words) {
return measureLineWidth(words, CAPTION_FONT_SIZE) <= SAFE_ZONE_WIDTH;
}
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 || !fitsLine(testGroup)) {
if (current.length) groups.push(makeGroup(current, groups.length));
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, groups.length));
current = [];
}
});
if (current.length) groups.push(makeGroup(current, groups.length));
return groups;
}
function makeGroup(words, groupIndex) {
var colors = assignWordColors(words, groupIndex);
var emoji = null;
for (var i = 0; i < words.length; i++) {
if (words[i].emoji) {
emoji = words[i].emoji;
break;
}
}
return {
words: words.slice(),
colors: colors,
emoji: emoji,
start: words[0].start,
end: words[words.length - 1].end,
};
}
function shadowForColor(color) {
var hex = color.replace("#", "");
var r = parseInt(hex.slice(0, 2), 16);
var g = parseInt(hex.slice(2, 4), 16);
var b = parseInt(hex.slice(4, 6), 16);
return (
"0 4px 8px rgba(0,0,0,0.7), 0 0 2px rgba(" +
r +
"," +
g +
"," +
b +
",1), 0 0 8px rgba(" +
r +
"," +
g +
"," +
b +
",0.6)"
);
}
function buildCaptions(groups) {
var stage = document.getElementById("caption-stage");
groups.forEach(function (group, groupIndex) {
var groupText = group.words
.map(function (w) {
return w.text.toUpperCase();
})
.join(" ");
var computedSize = fitFontSize(
groupText,
CAPTION_FONT_SIZE,
"900",
"Gabarito",
SAFE_ZONE_WIDTH,
);
var groupEl = document.createElement("div");
groupEl.id = "caption-group-" + groupIndex;
groupEl.className = "caption-group";
if (group.emoji) {
var emojiEl = document.createElement("div");
emojiEl.className = "caption-emoji";
emojiEl.textContent = group.emoji;
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 wordEl = document.createElement("span");
wordEl.className = "caption-word";
wordEl.textContent = word.text.toUpperCase();
wordEl.style.color = color;
wordEl.style.fontSize = computedSize + "px";
wordEl.style.textShadow = shadowForColor(color);
lineEl.appendChild(wordEl);
});
groupEl.appendChild(lineEl);
stage.appendChild(groupEl);
});
}
var WORDS = normalizeWords(TRANSCRIPT);
var GROUPS = makeGroups(WORDS);
buildCaptions(GROUPS);
window.__timelines = window.__timelines || {};
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;
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);
});
window.__timelines["caption-emoji-pop"] = tl;
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink