235 lines
20 KiB
HTML
235 lines
20 KiB
HTML
|
<template id="captions-template" data-composition-id="captions" data-width="1080" data-height="1920">
|
||
|
|
<script src="assets/vendor/gsap.min.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
<style data-brand-tokens>
|
||
|
|
@font-face { font-family: 'Quicksand'; src: url('assets/fonts/quicksand-var.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; }
|
||
|
|
:root {
|
||
|
|
--cream: #F5F0E6;
|
||
|
|
--turquoise: #7ECDC0;
|
||
|
|
--soft-pink: #F7C8D4;
|
||
|
|
--butter: #FDE68A;
|
||
|
|
--mint: #A8E6CF;
|
||
|
|
--lavender: #D4A5E8;
|
||
|
|
--peach: #FFCBA4;
|
||
|
|
--sky: #A8D8F0;
|
||
|
|
--coral: #F8635F;
|
||
|
|
--text-dark: #2D2D2D;
|
||
|
|
--text-muted: #6B6B6B;
|
||
|
|
--white: #FFFFFF;
|
||
|
|
--cap-ink: #2D2D2D;
|
||
|
|
--cap-canvas: #F5F0E6;
|
||
|
|
--cap-accent: #F8635F;
|
||
|
|
--cap-accent-2: #FDE68A;
|
||
|
|
--font-display: "Fredoka One", system-ui, serif;
|
||
|
|
--font-body: "Quicksand", system-ui, sans-serif;
|
||
|
|
--cap-band-top: 1600px;
|
||
|
|
--cap-band-height: 320px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
@font-face { font-family: "Fredoka"; src: url("assets/fonts/fredoka-600.woff2") format("woff2"); font-weight: 600; font-style: normal; }
|
||
|
|
@font-face { font-family: "Fredoka One"; src: url("assets/fonts/fredoka-600.woff2") format("woff2"); font-weight: 600; font-style: normal; }
|
||
|
|
@font-face { font-family: "Quicksand"; src: url("assets/fonts/quicksand-var.woff2") format("woff2"); font-weight: 500 700; font-style: normal; }
|
||
|
|
#captions-root {
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
.caption-layer {
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
z-index: 20;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
/* the keep-out band, from captionBand(H) — frame content stays above it */
|
||
|
|
.caption-stage {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
top: var(--cap-band-top, 900px);
|
||
|
|
height: var(--cap-band-height, 180px);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.caption-group {
|
||
|
|
/* every group is absolutely stacked over the SAME band — exactly one shown at a
|
||
|
|
time via opacity. Must be absolute: in-flow groups would lay out side-by-side. */
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* THE picture-book card — cream surface, 3px charcoal outline, generous 24px radius,
|
||
|
|
a hard 6px charcoal offset shadow (no blur): the sticker-on-paper signature */
|
||
|
|
.caption-pill {
|
||
|
|
max-width: 80%;
|
||
|
|
padding: 18px 40px 22px;
|
||
|
|
background: var(--cap-canvas, #f5f0e6);
|
||
|
|
border: 3px solid var(--cap-ink, #2d2d2d);
|
||
|
|
border-radius: 24px;
|
||
|
|
box-shadow: 6px 6px 0 var(--cap-ink, #2d2d2d);
|
||
|
|
}
|
||
|
|
.caption-line {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 0.18em 0.32em;
|
||
|
|
font-family: "Fredoka One", sans-serif;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: clamp(38px, 4.2vw, 56px);
|
||
|
|
line-height: 1.22;
|
||
|
|
letter-spacing: 0.02em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* upcoming — muted charcoal, no candy block */
|
||
|
|
.caption-word {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 0.02em 0.16em;
|
||
|
|
border-radius: 12px;
|
||
|
|
color: color-mix(in srgb, var(--cap-ink, #2d2d2d) 52%, var(--cap-canvas, #f5f0e6));
|
||
|
|
}
|
||
|
|
/* current word — THE sunny-pastel candy block: a rounded coral chip with a 3px
|
||
|
|
charcoal outline + a hard 3px charcoal offset shadow (no blur), charcoal on top */
|
||
|
|
.caption-word.is-active {
|
||
|
|
color: var(--cap-ink, #2d2d2d);
|
||
|
|
background: var(--cap-accent, #f8635f);
|
||
|
|
border-radius: 12px;
|
||
|
|
box-shadow:
|
||
|
|
0 0 0 3px var(--cap-ink, #2d2d2d),
|
||
|
|
3px 5px 0 0 var(--cap-ink, #2d2d2d);
|
||
|
|
}
|
||
|
|
/* already spoken — solid charcoal, candy block cleared */
|
||
|
|
.caption-word.is-spoken {
|
||
|
|
color: var(--cap-ink, #2d2d2d);
|
||
|
|
background: transparent;
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* optional per-word accents (dormant until a word-classer tags them) */
|
||
|
|
/* brand / key term — a butter candy chip, the cheerful second pastel */
|
||
|
|
.caption-word.cap-brand {
|
||
|
|
color: var(--cap-ink, #2d2d2d);
|
||
|
|
background: var(--cap-accent-2, #fde68a);
|
||
|
|
border-radius: 12px;
|
||
|
|
box-shadow: 0 0 0 3px var(--cap-ink, #2d2d2d);
|
||
|
|
}
|
||
|
|
/* numerals / data — Quicksand, slightly recessed */
|
||
|
|
.caption-word.cap-num {
|
||
|
|
font-family: "Quicksand", system-ui, sans-serif;
|
||
|
|
font-weight: 700;
|
||
|
|
color: color-mix(in srgb, var(--cap-ink, #2d2d2d) 78%, var(--cap-canvas, #f5f0e6));
|
||
|
|
}
|
||
|
|
/* emphasis — a butter underline rule (the second sunny pastel) */
|
||
|
|
.caption-word.cap-cta {
|
||
|
|
text-decoration: underline;
|
||
|
|
text-decoration-thickness: 3px;
|
||
|
|
text-decoration-color: var(--cap-accent-2, #fde68a);
|
||
|
|
text-underline-offset: 0.12em;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-aspect-ratio: 9/16) {
|
||
|
|
.caption-pill {
|
||
|
|
max-width: 92%;
|
||
|
|
}
|
||
|
|
.caption-line {
|
||
|
|
font-size: clamp(32px, 5.2vw, 46px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div
|
||
|
|
id="captions-root"
|
||
|
|
data-composition-id="captions"
|
||
|
|
data-timeline-locked
|
||
|
|
data-start="0"
|
||
|
|
data-duration="54.733"
|
||
|
|
data-fps="30"
|
||
|
|
data-width="1080"
|
||
|
|
data-height="1920"
|
||
|
|
>
|
||
|
|
<div class="caption-layer" aria-hidden="true">
|
||
|
|
<div id="caption-stage" class="caption-stage"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// captions.mjs injects the engine's scene-aware groups + real duration here.
|
||
|
|
var GROUPS = [{"id":"caption-group-0","frame":1,"start":0.8,"end":1.28,"text":"Where are","words":[{"id":"caption-word-0-0","text":"Where","start":0.8,"end":1.058},{"id":"caption-word-0-1","text":"are","start":1.08,"end":1.264}]},{"id":"caption-group-1","frame":1,"start":1.28,"end":1.8,"text":"they right","words":[{"id":"caption-word-1-0","text":"they","start":1.28,"end":1.501},{"id":"caption-word-1-1","text":"right","start":1.52,"end":1.778}]},{"id":"caption-group-2","frame":1,"start":1.8,"end":2.44,"text":"now And","words":[{"id":"caption-word-2-0","text":"now","start":1.8,"end":2.205},{"id":"caption-word-2-1","text":"And","start":2.24,"end":2.424}]},{"id":"caption-group-3","frame":1,"start":2.44,"end":2.88,"text":"what are","words":[{"id":"caption-word-3-0","text":"what","start":2.44,"end":2.661},{"id":"caption-word-3-1","text":"are","start":2.68,"end":2.864}]},{"id":"caption-group-4","frame":1,"start":2.88,"end":3.44,"text":"they really","words":[{"id":"caption-word-4-0","text":"they","start":2.88,"end":3.101},{"id":"caption-word-4-1","text":"really","start":3.12,"end":3.414}]},{"id":"caption-group-5","frame":1,"start":3.44,"end":3.88,"text":"doing on","words":[{"id":"caption-word-5-0","text":"doing","start":3.44,"end":3.698},{"id":"caption-word-5-1","text":"on","start":3.72,"end":3.867}]},{"id":"caption-group-6","frame":1,"start":3.88,"end":4.718,"text":"that phone","words":[{"id":"caption-word-6-0","text":"that","start":3.88,"end":4.101},{"id":"caption-word-6-1","text":"phone","start":4.12,"end":4.598}]},{"id":"caption-group-7","frame":2,"start":6.14,"end":8.158,"text":"Endless scrolling Arguments at","words":[{"id":"caption-word-7-0","text":"Endless","start":6.14,"end":6.548},{"id":"caption-word-7-1","text":"scrolling","start":6.583,"end":7.353},{"id":"caption-word-7-2","text":"Arguments","start":7.42,"end":7.918},{"id":"caption-word-7-3","text":"at","start":7.961,"end":8.142}]},{"id":"caption-group-8","frame":2,"start":8.158,"end":9.388,"text":"dinner And that","words":[{"id":"caption-word-8-0","text":"dinner","start":8.158,"end":8.792},{"id":"caption-word-8-1","text":"And","start":8.847,"end":9.073},{"id":"caption-word-8-2","text":"that","start":9.093,"end":9.365}]},{"id":"caption-group-9","frame":2,"start":9.388,"end":10.078,"text":"quiet worry","words":[{"id":"caption-word-9-0","text":"quiet","start":9.388,"end":9.705},{"id":"caption-word-9-1","text":"worry","start":9.733,"end":10.05}]},{"id":"caption-group-10","frame":2,"start":10.078,"end":10.668,"text":"you never","words":[{"id":"caption-word-10-0","text":"you","start":10.078,"end":10.304},{"id":"caption-word-10-1","text":"never","start":10.324,"end":10.641}]},{"id":"caption-group-11","frame":2,"start":10.668,"end":11.824,"text":"say out loud","words":[{"id":"caption-word-11-0","text":"say","start":10.668,"end":10.895},{"id":"caption-word-11-1","text":"out","start":10.914,"end":11.141},{"id":"caption-word-11-2","text":"loud","start":11.16,"end":11.704}]},{"id":"caption-group-12","frame":3,"start":13.251,"end":13.823,"text":"There has","words":[{"id":"caption-word-12-0","text":"There","start":13.251,"end":13.558},{"id":"caption-word-12-1","text":"has","start":13.584,"end":13.803}]},{"id":"caption-group-13","frame":3,"start":13.823,"end":14.204,"text":"to be","words":[{"id":"caption-word-13-0","text":"to","start":13.823,"end":13.998},{"id":"caption-word-13-1","text":"be","start":14.013,"end":14.188}]},{"id":"caption-group-14","frame":3,"start":14.204,"end":15.251,"text":"a better way","words":[{"id":"caption-word-14-0","text":"a","start":14.204,"end":14.335},{"id":"caption-word-14-1","text":"better","start":14.346,"end":14.697},{"id":"caption-word-14-2","text":"way","start":14.727,"end":15.209}]},{"id":"caption-group-15","frame":3,"start":15.251,"end":16.823,"text":"Meet lookatu The child","words":[{"id":"caption-word-15-0","text":"Meet","start":15.251,"end":15.514},{"id":"caption-word-15-1","text":"lookatu","start":15.537,"end":16.194},{"id":"caption-word-15-2","text":"The","start":16.252,"end":16.471},{"id":"caption-word-15-3","text":"child","start":16.4
|
||
|
|
var DURATION = 54.733;
|
||
|
|
|
||
|
|
(function () {
|
||
|
|
var stage = document.getElementById("caption-stage");
|
||
|
|
|
||
|
|
// build DOM: one .caption-group per group, .caption-word per word
|
||
|
|
GROUPS.forEach(function (group, g) {
|
||
|
|
var groupEl = document.createElement("div");
|
||
|
|
groupEl.className = "caption-group";
|
||
|
|
groupEl.id = "caption-group-" + g;
|
||
|
|
var pill = document.createElement("div");
|
||
|
|
pill.className = "caption-pill";
|
||
|
|
var line = document.createElement("div");
|
||
|
|
line.className = "caption-line";
|
||
|
|
(group.words || []).forEach(function (w, i) {
|
||
|
|
var span = document.createElement("span");
|
||
|
|
span.className = "caption-word";
|
||
|
|
span.id = "caption-word-" + g + "-" + i;
|
||
|
|
span.textContent = String(w.text);
|
||
|
|
line.appendChild(span);
|
||
|
|
});
|
||
|
|
pill.appendChild(line);
|
||
|
|
groupEl.appendChild(pill);
|
||
|
|
stage.appendChild(groupEl);
|
||
|
|
});
|
||
|
|
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
var tl = gsap.timeline({ paused: true });
|
||
|
|
|
||
|
|
GROUPS.forEach(function (group, g) {
|
||
|
|
var groupEl = document.getElementById("caption-group-" + g);
|
||
|
|
var words = group.words || [];
|
||
|
|
var next = GROUPS[g + 1];
|
||
|
|
var isLast = g === GROUPS.length - 1;
|
||
|
|
var start = Math.max(0, Number(group.start));
|
||
|
|
var end = isLast ? DURATION : Math.min(Number(next.start), Number(group.end) + 0.3);
|
||
|
|
if (end <= start) end = start + 0.01;
|
||
|
|
|
||
|
|
// group on/off — exactly one group visible at a time
|
||
|
|
tl.set(groupEl, { opacity: 1 }, start);
|
||
|
|
tl.set(groupEl, { opacity: 0 }, end);
|
||
|
|
|
||
|
|
// 3-state karaoke via className SETS — seek-safe (gsap.set applies on the
|
||
|
|
// engine's frame-by-frame seek; .call callbacks would NOT fire).
|
||
|
|
words.forEach(function (w, i) {
|
||
|
|
var el = document.getElementById("caption-word-" + g + "-" + i);
|
||
|
|
var at = Math.max(start, Number(w.start));
|
||
|
|
tl.set(el, { className: "caption-word" }, start); // upcoming (also resets on reverse-seek)
|
||
|
|
tl.set(el, { className: "caption-word is-active" }, at); // current
|
||
|
|
tl.fromTo(el, { scale: 0.82 }, { scale: 1, duration: 0.2, ease: "back.out(2.6)" }, at);
|
||
|
|
if (i + 1 < words.length) {
|
||
|
|
var nextAt = Math.max(start, Number(words[i + 1].start));
|
||
|
|
tl.set(el, { className: "caption-word is-spoken" }, nextAt); // demote when next activates
|
||
|
|
}
|
||
|
|
});
|
||
|
|
if (words.length) {
|
||
|
|
var lastEl = document.getElementById("caption-word-" + g + "-" + (words.length - 1));
|
||
|
|
var lastSpoken = Math.min(end, Number(words[words.length - 1].end) + 0.1);
|
||
|
|
tl.set(lastEl, { className: "caption-word is-spoken" }, lastSpoken);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// full-span anchor so the sub-comp timeline spans the whole video
|
||
|
|
tl.to({}, { duration: DURATION }, 0);
|
||
|
|
window.__timelines["captions"] = tl;
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.caption-line { line-height: 1.1 !important; }
|
||
|
|
</style>
|
||
|
|
</template>
|