mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 16:42:27 +00:00
style: format caption component files
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Miguel Ángel
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
78ddd2602b
commit
a19a772dc5
+150
-59
@@ -6,7 +6,10 @@
|
||||
<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" />
|
||||
<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>
|
||||
*,
|
||||
@@ -155,67 +158,117 @@
|
||||
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"
|
||||
"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": "🖼️"
|
||||
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}
|
||||
{ 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; });
|
||||
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) {
|
||||
@@ -272,7 +325,12 @@
|
||||
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) {
|
||||
if (
|
||||
!nextWord ||
|
||||
punctuation ||
|
||||
pause >= PAUSE_THRESHOLD ||
|
||||
current.length >= MAX_WORDS_PER_GROUP
|
||||
) {
|
||||
groups.push(makeGroup(current, groups.length));
|
||||
current = [];
|
||||
}
|
||||
@@ -285,9 +343,18 @@
|
||||
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; }
|
||||
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 };
|
||||
return {
|
||||
words: words.slice(),
|
||||
colors: colors,
|
||||
emoji: emoji,
|
||||
start: words[0].start,
|
||||
end: words[words.length - 1].end,
|
||||
};
|
||||
}
|
||||
|
||||
function shadowForColor(color) {
|
||||
@@ -295,7 +362,21 @@
|
||||
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)";
|
||||
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) {
|
||||
@@ -343,7 +424,9 @@
|
||||
return Math.max(0, group.start - entryLead);
|
||||
});
|
||||
|
||||
var allGroupEls = GROUPS.map(function (_, i) { return document.getElementById("caption-group-" + i); });
|
||||
var allGroupEls = GROUPS.map(function (_, i) {
|
||||
return document.getElementById("caption-group-" + i);
|
||||
});
|
||||
|
||||
GROUPS.forEach(function (group, groupIndex) {
|
||||
var groupEl = allGroupEls[groupIndex];
|
||||
@@ -356,8 +439,16 @@
|
||||
});
|
||||
|
||||
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.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);
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user