mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 16:42:27 +00:00
Miguel Ángel
ec66d59caa
Caption components are overlays — their root element should not intercept pointer events, allowing clicks to pass through to the underlying composition content in Studio.
402 lines
13 KiB
HTML
Vendored
402 lines
13 KiB
HTML
Vendored
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=1920, height=1080" />
|
|
<title>Pill Karaoke</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=Poppins:wght@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: "Poppins", Arial, sans-serif;
|
|
}
|
|
|
|
#pill-karaoke {
|
|
pointer-events: none;
|
|
position: relative;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
background: transparent;
|
|
}
|
|
|
|
#avatar-video {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.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: 1600px;
|
|
height: 220px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.caption-group {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 1600px;
|
|
height: 220px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
}
|
|
|
|
.caption-pill {
|
|
width: auto;
|
|
max-width: 1600px;
|
|
padding: 18px 60px 20px;
|
|
border-radius: 22px;
|
|
background: #e7e5e7;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
|
text-align: center;
|
|
overflow: visible;
|
|
}
|
|
|
|
.caption-copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
color: #a6a6a6;
|
|
font-family: "Poppins", Arial, sans-serif;
|
|
font-size: 72px;
|
|
font-weight: 700;
|
|
line-height: 1.16;
|
|
letter-spacing: 0;
|
|
white-space: nowrap;
|
|
word-break: normal;
|
|
overflow: visible;
|
|
}
|
|
|
|
.caption-line {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
width: 100%;
|
|
max-width: none;
|
|
line-height: 1.16;
|
|
white-space: nowrap;
|
|
overflow: visible;
|
|
}
|
|
|
|
.caption-word {
|
|
display: inline-block;
|
|
color: #a6a6a6;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div
|
|
id="pill-karaoke"
|
|
data-composition-id="caption-pill-karaoke"
|
|
data-timeline-locked
|
|
data-start="0"
|
|
data-duration="8"
|
|
data-fps="30"
|
|
data-width="1920"
|
|
data-height="1080"
|
|
>
|
|
<video
|
|
id="avatar-video"
|
|
muted
|
|
playsinline
|
|
data-start="0"
|
|
data-duration="8"
|
|
data-track-index="0"
|
|
data-has-audio="false"
|
|
></video>
|
|
|
|
<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 PILL_MAX_WIDTH = 1400;
|
|
var PILL_MIN_PADDING_X = 30;
|
|
var PILL_MAX_PADDING_X = 60;
|
|
var FONT_WIDTH_SAFETY = 1.18;
|
|
var FONT_FAMILY = "Poppins";
|
|
var FONT_WEIGHT = "700";
|
|
var BASE_FONT_SIZE = 72;
|
|
var MIN_FONT_SIZE = 52;
|
|
var MAX_WORDS_PER_GROUP = 4;
|
|
var WORD_SPACING = 16;
|
|
var PAUSE_THRESHOLD = 0.1;
|
|
var GROUP_END_BUFFER = 0.3;
|
|
var COLOR_INACTIVE = "#A6A6A6";
|
|
var COLOR_ACTIVE = "#1C1E1D";
|
|
var COLOR_FADE_DURATION = 0.1;
|
|
var WORD_FADE_LEAD = 0.05;
|
|
|
|
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();
|
|
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)),
|
|
};
|
|
})
|
|
.filter(function (w) {
|
|
return w.text.length > 0;
|
|
});
|
|
}
|
|
|
|
var measureCanvas = document.createElement("canvas");
|
|
var measureContext = measureCanvas.getContext("2d");
|
|
|
|
function measureWordWidth(text, fontSize) {
|
|
measureContext.font = FONT_WEIGHT + " " + fontSize + "px " + FONT_FAMILY;
|
|
return measureContext.measureText(text).width * FONT_WIDTH_SAFETY;
|
|
}
|
|
|
|
function measureLineWidth(words, fontSize) {
|
|
return words.reduce(function (total, word, index) {
|
|
return (
|
|
total + measureWordWidth(word.text.toLowerCase(), fontSize) + (index ? WORD_SPACING : 0)
|
|
);
|
|
}, 0);
|
|
}
|
|
|
|
function splitLinesForGroup(words, fontSize) {
|
|
var maxLineWidth = PILL_MAX_WIDTH - PILL_MIN_PADDING_X * 2;
|
|
if (
|
|
words.some(function (w) {
|
|
return measureWordWidth(w.text.toLowerCase(), fontSize) > maxLineWidth;
|
|
})
|
|
) {
|
|
return null;
|
|
}
|
|
if (measureLineWidth(words, fontSize) <= maxLineWidth) return [words];
|
|
var bestSplit = null;
|
|
var bestImbalance = Infinity;
|
|
for (var split = 1; split < words.length; split++) {
|
|
var firstLine = words.slice(0, split);
|
|
var secondLine = words.slice(split);
|
|
var firstWidth = measureLineWidth(firstLine, fontSize);
|
|
var secondWidth = measureLineWidth(secondLine, fontSize);
|
|
if (firstWidth <= maxLineWidth && secondWidth <= maxLineWidth) {
|
|
var imbalance = Math.abs(firstWidth - secondWidth);
|
|
if (imbalance < bestImbalance) {
|
|
bestSplit = [firstLine, secondLine];
|
|
bestImbalance = imbalance;
|
|
}
|
|
}
|
|
}
|
|
return bestSplit;
|
|
}
|
|
|
|
function fitsInTwoLinesAtSize(words, fontSize) {
|
|
return splitLinesForGroup(words, fontSize) !== null;
|
|
}
|
|
|
|
function planPillLayout(words, fontSize) {
|
|
var lines = splitLinesForGroup(words, fontSize) || [words];
|
|
var widestLine = lines.reduce(function (max, lineWords) {
|
|
return Math.max(max, measureLineWidth(lineWords, fontSize));
|
|
}, 0);
|
|
var availablePadding = Math.floor((PILL_MAX_WIDTH - widestLine) / 2);
|
|
var padX = Math.max(PILL_MIN_PADDING_X, Math.min(PILL_MAX_PADDING_X, availablePadding));
|
|
var pillWidth = Math.min(PILL_MAX_WIDTH, Math.ceil(widestLine + padX * 2));
|
|
return { lines: lines, padX: padX, pillWidth: pillWidth };
|
|
}
|
|
|
|
function makeGroups(words) {
|
|
var groups = [];
|
|
var current = [];
|
|
words.forEach(function (word, index) {
|
|
var testGroup = current.concat([word]);
|
|
var nextWord = words[index + 1];
|
|
var wouldExceedMaxWords = testGroup.length > MAX_WORDS_PER_GROUP;
|
|
var wouldExceedTwoLines = !fitsInTwoLinesAtSize(testGroup, BASE_FONT_SIZE);
|
|
if (wouldExceedMaxWords || wouldExceedTwoLines) {
|
|
if (current.length) {
|
|
groups.push({
|
|
words: current.slice(),
|
|
start: current[0].start,
|
|
end: current[current.length - 1].end,
|
|
});
|
|
}
|
|
current = [word];
|
|
return;
|
|
}
|
|
current.push(word);
|
|
var hasPunctuation = /[,.:!?]$/.test(word.text);
|
|
var pauseDuration = nextWord ? nextWord.start - word.end : 0;
|
|
var hasNaturalPause = pauseDuration >= PAUSE_THRESHOLD;
|
|
var maxWordsReached = current.length >= MAX_WORDS_PER_GROUP;
|
|
if (maxWordsReached || !nextWord || hasPunctuation || hasNaturalPause) {
|
|
groups.push({
|
|
words: current.slice(),
|
|
start: current[0].start,
|
|
end: current[current.length - 1].end,
|
|
});
|
|
current = [];
|
|
}
|
|
});
|
|
if (current.length)
|
|
groups.push({
|
|
words: current.slice(),
|
|
start: current[0].start,
|
|
end: current[current.length - 1].end,
|
|
});
|
|
return groups;
|
|
}
|
|
|
|
function fontSizeForGroup(words) {
|
|
var size = BASE_FONT_SIZE;
|
|
while (size > MIN_FONT_SIZE && !fitsInTwoLinesAtSize(words, size)) {
|
|
size -= 2;
|
|
}
|
|
return size;
|
|
}
|
|
|
|
function buildCaptions(groups) {
|
|
var stage = document.getElementById("caption-stage");
|
|
groups.forEach(function (group, groupIndex) {
|
|
var groupEl = document.createElement("div");
|
|
var pillEl = document.createElement("div");
|
|
var copyEl = document.createElement("div");
|
|
var fontSize = fontSizeForGroup(group.words);
|
|
groupEl.id = "caption-group-" + groupIndex;
|
|
groupEl.className = "caption-group";
|
|
pillEl.className = "caption-pill";
|
|
copyEl.className = "caption-copy";
|
|
copyEl.style.fontSize = fontSize + "px";
|
|
var indexedWords = group.words.map(function (word, wordIndex) {
|
|
return { text: word.text, start: word.start, end: word.end, wordIndex: wordIndex };
|
|
});
|
|
var layout = planPillLayout(indexedWords, fontSize);
|
|
pillEl.style.width = layout.pillWidth + "px";
|
|
pillEl.style.paddingLeft = layout.padX + "px";
|
|
pillEl.style.paddingRight = layout.padX + "px";
|
|
layout.lines.slice(0, 2).forEach(function (lineWords) {
|
|
var lineEl = document.createElement("div");
|
|
lineEl.className = "caption-line";
|
|
lineWords.forEach(function (word) {
|
|
var wordEl = document.createElement("span");
|
|
wordEl.id = "caption-word-" + groupIndex + "-" + word.wordIndex;
|
|
wordEl.className = "caption-word";
|
|
wordEl.textContent = word.text.toLowerCase();
|
|
lineEl.appendChild(wordEl);
|
|
});
|
|
copyEl.appendChild(lineEl);
|
|
});
|
|
pillEl.appendChild(copyEl);
|
|
groupEl.appendChild(pillEl);
|
|
stage.appendChild(groupEl);
|
|
});
|
|
}
|
|
|
|
var WORDS = normalizeWords(TRANSCRIPT);
|
|
var GROUPS = makeGroups(WORDS);
|
|
buildCaptions(GROUPS);
|
|
|
|
window.__timelines = window.__timelines || {};
|
|
var tl = gsap.timeline({ paused: true });
|
|
|
|
GROUPS.forEach(function (group, groupIndex) {
|
|
var groupEl = document.getElementById("caption-group-" + groupIndex);
|
|
var nextGroup = GROUPS[groupIndex + 1];
|
|
var isLastGroup = groupIndex === GROUPS.length - 1;
|
|
var effectiveEnd = isLastGroup
|
|
? DURATION
|
|
: Math.min(nextGroup.start, group.end + GROUP_END_BUFFER);
|
|
var visibleStart = Math.max(0, group.start);
|
|
var visibleEnd = Math.max(visibleStart + 0.01, effectiveEnd);
|
|
|
|
tl.set(groupEl, { opacity: 1 }, visibleStart);
|
|
tl.set(groupEl, { opacity: 0 }, visibleEnd);
|
|
|
|
group.words.forEach(function (word, wordIndex) {
|
|
var wordEl = document.getElementById("caption-word-" + groupIndex + "-" + wordIndex);
|
|
var isFirstWord = wordIndex === 0;
|
|
var wordStart = Math.max(visibleStart, word.start - WORD_FADE_LEAD);
|
|
tl.set(wordEl, { color: isFirstWord ? COLOR_ACTIVE : COLOR_INACTIVE }, visibleStart);
|
|
if (isFirstWord) return;
|
|
tl.to(
|
|
wordEl,
|
|
{ color: COLOR_ACTIVE, duration: COLOR_FADE_DURATION, ease: "none" },
|
|
wordStart,
|
|
);
|
|
});
|
|
});
|
|
|
|
window.__timelines["caption-pill-karaoke"] = tl;
|
|
</script>
|
|
</body>
|
|
</html>
|