videobook 0.0.0-stage → 0.2.0

package/dist/remotion/subtitles/AliveCaptions.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCurrentFrame, useVideoConfig } from "remotion";
+import { loadFont } from "@remotion/google-fonts/Anton";
+import { ALIVE_LINE_HEIGHT, activeCue, cueFade, fitPunch, lineGap, punchWord, wordLook, } from "./alive-layout.js";
+const { fontFamily } = loadFont();
+function justifyFor(side) {
+    if (side === "left")
+        return "flex-start";
+    if (side === "right")
+        return "flex-end";
+    return "center";
+}
+function originFor(side) {
+    if (side === "left")
+        return "left bottom";
+    if (side === "right")
+        return "right bottom";
+    return "center bottom";
+}
+function textShadow(finish, fontSize) {
+    const glow = `0 ${Math.round(fontSize * 0.04)}px ${Math.round(fontSize * 0.3)}px rgba(0,0,0,0.5)`;
+    if (finish.shadowBlur <= 0)
+        return glow;
+    const offset = Math.round(finish.shadowBlur / 2);
+    return `${offset}px ${offset}px ${finish.shadowBlur}px rgba(0,0,0,${finish.shadowOpacity / 100}), ${glow}`;
+}
+const AliveLine = ({ words, fontSize, time, fade, settings, side, finish, last }) => {
+    const stroke = Math.min(finish.strokeWidth, fontSize * 0.035);
+    return (_jsx("div", { style: {
+            display: "flex",
+            justifyContent: justifyFor(side),
+            gap: Math.round(fontSize * 0.2),
+            fontSize,
+            lineHeight: ALIVE_LINE_HEIGHT,
+            height: fontSize * ALIVE_LINE_HEIGHT,
+            marginBottom: last ? 0 : lineGap(fontSize),
+            whiteSpace: "nowrap",
+        }, children: words.map((word, index) => {
+            const look = wordLook(word, time, settings, fontSize, fade);
+            return (_jsx("span", { style: {
+                    display: "inline-block",
+                    opacity: look.opacity,
+                    color: look.color,
+                    transform: `translateY(${look.translateY}px) scale(${look.scale})`,
+                    transformOrigin: originFor(side),
+                    WebkitTextStroke: stroke > 0 ? `${stroke}px ${finish.strokeColor}` : undefined,
+                    paintOrder: stroke > 0 ? "stroke fill" : undefined,
+                    textShadow: textShadow(finish, fontSize),
+                }, children: word.text.toUpperCase() }, `${word.start}-${index}`));
+        }) }));
+};
+function blockStyle(column, top) {
+    return {
+        position: "absolute",
+        left: column.x,
+        top,
+        width: column.width,
+        display: "flex",
+        flexDirection: "column",
+        fontFamily,
+        fontWeight: 400,
+        userSelect: "none",
+        pointerEvents: "none",
+    };
+}
+export const AliveCaptions = ({ cues, settings, ...finish }) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+    const time = frame / fps;
+    const cue = activeCue(cues, time);
+    if (!cue)
+        return null;
+    const fade = cueFade(cue, time);
+    if (settings.style === "punch") {
+        const word = punchWord(cue, time);
+        if (!word)
+            return null;
+        const fontSize = fitPunch(word, cue.column, settings.energySizing);
+        const top = cue.column.y + (cue.column.height - fontSize * ALIVE_LINE_HEIGHT) / 2;
+        return (_jsx("div", { style: blockStyle(cue.column, top), children: _jsx(AliveLine, { words: [word], fontSize: fontSize, time: time, fade: fade, settings: settings, side: cue.column.side, finish: finish, last: true }) }));
+    }
+    return (_jsx("div", { style: blockStyle(cue.column, cue.blockTop), children: cue.lines.map((line, index) => (_jsx(AliveLine, { words: line.words, fontSize: line.fontSize, time: time, fade: fade, settings: settings, side: cue.column.side, finish: finish, last: index === cue.lines.length - 1 }, `${cue.id}-${index}`))) }));
+};

package/dist/remotion/subtitles/Highlight.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCurrentFrame, useVideoConfig } from "remotion";
+import { getCurrentWordIndex } from "../util.js";
+import { getHighlightFontSize, getYPosition } from "../constants.js";
+export const Highlight = ({ chunks, position, fontSize, textColor, highlightColor, strokeWidth, strokeColor, shadowBlur, shadowOpacity, }) => {
+    const frame = useCurrentFrame();
+    const { fps, width, height } = useVideoConfig();
+    const currentTime = frame / fps;
+    const orientation = height > width ? "portrait" : width === height ? "square" : "landscape";
+    const fontPx = getHighlightFontSize(fontSize, orientation);
+    const yFraction = getYPosition(position, orientation);
+    const activeChunk = chunks.find((c) => currentTime >= c.start && currentTime <= c.end);
+    if (!activeChunk || activeChunk.words.length === 0)
+        return null;
+    const wordIdx = getCurrentWordIndex(activeChunk.words, currentTime, 0.05);
+    const boxPadding = 8;
+    const boxRadius = 8;
+    return (_jsx("div", { style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            alignItems: yFraction <= 0.3 ? "flex-start" : yFraction >= 0.6 ? "flex-end" : "center",
+            justifyContent: "center",
+            paddingTop: yFraction <= 0.3 ? `${Math.round(height * yFraction)}px` : undefined,
+            paddingBottom: yFraction >= 0.6 ? `${Math.round(height * (1 - yFraction))}px` : undefined,
+            pointerEvents: "none",
+        }, children: _jsx("div", { style: {
+                display: "flex",
+                flexWrap: "wrap",
+                justifyContent: "center",
+                alignItems: "center",
+                gap: `${Math.round(fontPx * 0.3)}px`,
+                maxWidth: `${width - 80}px`,
+                padding: "0 40px",
+            }, children: activeChunk.words.map((word, i) => {
+                const isActive = i === wordIdx;
+                const text = word.word.trim().toUpperCase();
+                if (!text)
+                    return null;
+                return (_jsx("span", { style: {
+                        fontFamily: "'Montserrat', 'Arial Black', Arial, sans-serif",
+                        fontWeight: 800,
+                        fontSize: fontPx,
+                        lineHeight: 1.2,
+                        color: textColor,
+                        WebkitTextStroke: strokeWidth > 0 ? `${strokeWidth}px ${strokeColor}` : undefined,
+                        paintOrder: strokeWidth > 0 ? "stroke fill" : undefined,
+                        textShadow: shadowBlur > 0 ? `${Math.round(shadowBlur / 2)}px ${Math.round(shadowBlur / 2)}px ${shadowBlur}px rgba(0,0,0,${shadowOpacity / 100})` : undefined,
+                        whiteSpace: "nowrap",
+                        padding: `${boxPadding}px`,
+                        borderRadius: isActive ? boxRadius : 0,
+                        backgroundColor: isActive ? highlightColor : "transparent",
+                    }, children: text }, i));
+            }) }) }));
+};

package/dist/remotion/subtitles/Impact.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCurrentFrame, useVideoConfig, interpolate, Easing } from "remotion";
+import { loadFont } from "@remotion/google-fonts/Anton";
+import { getCurrentWordIndex } from "../util.js";
+import { getImpactFontSize, getYPosition, POP_DURATION_FRAMES, POP_SCALE_START, POP_SCALE_END } from "../constants.js";
+const { fontFamily } = loadFont();
+export const Impact = ({ chunks, position, fontSize, textColor, highlightColor, strokeWidth, strokeColor, shadowBlur, shadowOpacity, }) => {
+    const frame = useCurrentFrame();
+    const { fps, width, height } = useVideoConfig();
+    const currentTime = frame / fps;
+    const orientation = height > width ? "portrait" : width === height ? "square" : "landscape";
+    const fontPx = getImpactFontSize(fontSize, orientation);
+    const yFraction = getYPosition(position, orientation);
+    const activeChunk = chunks.find((c) => currentTime >= c.start && currentTime <= c.end);
+    if (!activeChunk || activeChunk.words.length === 0)
+        return null;
+    const wordIdx = getCurrentWordIndex(activeChunk.words, currentTime);
+    return (_jsx("div", { style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            alignItems: yFraction <= 0.3 ? "flex-start" : yFraction >= 0.6 ? "flex-end" : "center",
+            justifyContent: "center",
+            paddingTop: yFraction <= 0.3 ? `${Math.round(height * yFraction)}px` : undefined,
+            paddingBottom: yFraction >= 0.6 ? `${Math.round(height * (1 - yFraction))}px` : undefined,
+            pointerEvents: "none",
+        }, children: _jsx("div", { style: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                gap: `${Math.round(fontPx * 0.25)}px`,
+                maxWidth: `${width - 80}px`,
+                padding: "0 40px",
+            }, children: activeChunk.words.map((word, i) => {
+                const isActive = i === wordIdx;
+                const text = word.word.trim();
+                if (!text)
+                    return null;
+                let scale = 1.0;
+                if (isActive) {
+                    const wordStartFrame = Math.round(word.start * fps);
+                    const framesSinceWordStart = frame - wordStartFrame;
+                    scale = interpolate(framesSinceWordStart, [0, POP_DURATION_FRAMES], [POP_SCALE_START, POP_SCALE_END], {
+                        extrapolateLeft: "clamp",
+                        extrapolateRight: "clamp",
+                        easing: Easing.out(Easing.cubic),
+                    });
+                }
+                return (_jsx("span", { style: {
+                        fontFamily,
+                        fontWeight: 400,
+                        fontSize: fontPx,
+                        lineHeight: 1.1,
+                        color: isActive ? highlightColor : textColor,
+                        WebkitTextStroke: strokeWidth > 0 ? `${strokeWidth}px ${strokeColor}` : undefined,
+                        paintOrder: strokeWidth > 0 ? "stroke fill" : undefined,
+                        textShadow: shadowBlur > 0 ? `${Math.round(shadowBlur / 2)}px ${Math.round(shadowBlur / 2)}px ${shadowBlur}px rgba(0,0,0,${shadowOpacity / 100})` : undefined,
+                        whiteSpace: "nowrap",
+                        transform: `scale(${scale})`,
+                        display: "inline-block",
+                        userSelect: "none",
+                    }, children: text.toUpperCase() }, i));
+            }) }) }));
+};

package/dist/remotion/subtitles/SubtitleOverlay.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Impact } from "./Impact.js";
+import { Highlight } from "./Highlight.js";
+export const SubtitleOverlay = ({ chunks, style, position, fontSize, textColor, highlightColor, strokeWidth, strokeColor, shadowBlur, shadowOpacity, }) => {
+    if (style === "highlight") {
+        return (_jsx(Highlight, { chunks: chunks, position: position, fontSize: fontSize, textColor: textColor, highlightColor: highlightColor, strokeWidth: strokeWidth, strokeColor: strokeColor, shadowBlur: shadowBlur, shadowOpacity: shadowOpacity }));
+    }
+    return (_jsx(Impact, { chunks: chunks, position: position, fontSize: fontSize, textColor: textColor, highlightColor: highlightColor, strokeWidth: strokeWidth, strokeColor: strokeColor, shadowBlur: shadowBlur, shadowOpacity: shadowOpacity }));
+};

package/dist/remotion/subtitles/alive-layout.js

@@ -0,0 +1,321 @@
+/**
+ * Pure layout for alive captions: phrase/line grouping, frame-aware column
+ * placement, stack fitting and per-frame word entrance. Shared by the
+ * Remotion renderer and the client studio so the preview matches the render.
+ */
+const PHRASE_GAP_SECONDS = 0.45;
+const PHRASE_MAX_WORDS = 8;
+const PHRASE_MAX_SECONDS = 3.4;
+const PHRASE_MAX_LINES = 4;
+const LINE_MAX_WORDS = 2;
+const LINE_MAX_CHARS = 11;
+const HERO_ENERGY = 0.8;
+const HERO_MIN_CHARS = 5;
+/** Average advance of the condensed display face per character, in em. */
+export const ALIVE_GLYPH_EM = 0.5;
+export const ALIVE_LINE_HEIGHT = 0.92;
+const LINE_GAP_EM = 0.06;
+const LEAD_SECONDS = 0.06;
+const HOLD_SECONDS = 0.5;
+const FADE_SECONDS = 0.18;
+const MIN_WORD_SECONDS = 0.05;
+const REGION_PAD = 0.02;
+const MIN_FREE_SPAN = 0.3;
+const SENTENCE_END = /[.!?]["')\]]*$/;
+const EDGE_PUNCTUATION = /^[^\p{L}\p{N}'’]+|[^\p{L}\p{N}'’]+$/gu;
+export function displayWord(raw) {
+    return raw.trim().replace(EDGE_PUNCTUATION, "");
+}
+function breaksBefore(current, word) {
+    if (current.length === 0)
+        return false;
+    const previous = current[current.length - 1];
+    return word.start - previous.end >= PHRASE_GAP_SECONDS
+        || current.length >= PHRASE_MAX_WORDS
+        || word.end - current[0].start > PHRASE_MAX_SECONDS;
+}
+/** Group one transcript segment's words into sung/spoken phrases. */
+export function splitPhrases(words) {
+    const phrases = [];
+    let current = [];
+    for (const word of words) {
+        if (breaksBefore(current, word)) {
+            phrases.push(current);
+            current = [];
+        }
+        current.push(word);
+        if (SENTENCE_END.test(word.raw.trim())) {
+            phrases.push(current);
+            current = [];
+        }
+    }
+    if (current.length > 0)
+        phrases.push(current);
+    return phrases;
+}
+function isHero(word) {
+    return word.energy >= HERO_ENERGY && word.text.length >= HERO_MIN_CHARS;
+}
+function lineChars(line) {
+    return line.reduce((sum, word) => sum + word.text.length, 0) + Math.max(0, line.length - 1);
+}
+function startsNewLine(line, word) {
+    if (line.length === 0)
+        return false;
+    return line.length >= LINE_MAX_WORDS
+        || lineChars(line) + 1 + word.text.length > LINE_MAX_CHARS
+        || isHero(word)
+        || line.some(isHero);
+}
+/** Stack a phrase into short lines; loud long words get a line of their own. */
+export function splitLines(words) {
+    const lines = [];
+    let line = [];
+    for (const word of words) {
+        if (startsNewLine(line, word)) {
+            lines.push(line);
+            line = [];
+        }
+        line.push(word);
+    }
+    if (line.length > 0)
+        lines.push(line);
+    return lines;
+}
+function toAliveWord(word) {
+    return {
+        text: displayWord(word.raw),
+        transcriptStart: word.start,
+        transcriptEnd: word.end,
+        onsetStart: word.onsetStart,
+        energy: word.energy,
+    };
+}
+function chunkLines(lines) {
+    const groups = [];
+    for (let index = 0; index < lines.length; index += PHRASE_MAX_LINES) {
+        groups.push(lines.slice(index, index + PHRASE_MAX_LINES));
+    }
+    return groups;
+}
+/** Phrase line stacks for a list of transcript segments, in time order. */
+export function buildPhraseLines(segments) {
+    return segments
+        .flatMap(splitPhrases)
+        .map((phrase) => phrase.map(toAliveWord).filter((word) => word.text.length > 0))
+        .filter((phrase) => phrase.length > 0)
+        .flatMap((phrase) => chunkLines(splitLines(phrase)));
+}
+export function phraseFrameTime(lines) {
+    const words = lines.flat();
+    const first = words[0];
+    const last = words[words.length - 1];
+    return (first.transcriptStart + last.transcriptEnd) / 2;
+}
+export function wordTiming(word, snapToOnsets) {
+    const shift = snapToOnsets ? word.onsetStart - word.transcriptStart : 0;
+    const start = word.transcriptStart + shift;
+    const end = Math.max(start + MIN_WORD_SECONDS, word.transcriptEnd + shift);
+    return { text: word.text, start, end, energy: word.energy };
+}
+/** Pixel rect of the contain-fitted source inside the target frame. */
+export function contentRect(geometry) {
+    const { sourceWidth, sourceHeight, targetWidth, targetHeight } = geometry;
+    const scale = Math.min(targetWidth / sourceWidth, targetHeight / sourceHeight);
+    const width = sourceWidth * scale;
+    const height = sourceHeight * scale;
+    return { x: (targetWidth - width) / 2, y: (targetHeight - height) / 2, width, height };
+}
+/** Map a source-normalized box into target-normalized coordinates. */
+export function regionToTarget(region, geometry) {
+    const content = contentRect(geometry);
+    return {
+        x: (content.x + region.x * content.width) / geometry.targetWidth,
+        y: (content.y + region.y * content.height) / geometry.targetHeight,
+        width: region.width * content.width / geometry.targetWidth,
+        height: region.height * content.height / geometry.targetHeight,
+    };
+}
+function columnCandidates(geometry) {
+    if (geometry.targetHeight > geometry.targetWidth)
+        return [{ side: "center", x0: 0.07, x1: 0.93 }];
+    return [
+        { side: "left", x0: 0.06, x1: 0.47 },
+        { side: "right", x0: 0.53, x1: 0.94 },
+    ];
+}
+function verticalBounds(geometry) {
+    const portrait = geometry.targetHeight > geometry.targetWidth;
+    return { y0: 0.08, y1: portrait ? 0.86 : 0.92 };
+}
+function blockersFor(candidate, boxes) {
+    return boxes
+        .filter((box) => box.x - REGION_PAD < candidate.x1 && box.x + box.width + REGION_PAD > candidate.x0)
+        .map((box) => ({ y0: box.y - REGION_PAD, y1: box.y + box.height + REGION_PAD }))
+        .sort((a, b) => a.y0 - b.y0);
+}
+/** Free vertical spans of `bounds` once the blocker spans are removed. */
+export function freeSpans(bounds, blockers) {
+    const spans = [];
+    let cursor = bounds.y0;
+    for (const blocker of blockers) {
+        if (blocker.y0 > cursor)
+            spans.push({ y0: cursor, y1: Math.min(blocker.y0, bounds.y1) });
+        cursor = Math.max(cursor, blocker.y1);
+        if (cursor >= bounds.y1)
+            break;
+    }
+    if (cursor < bounds.y1)
+        spans.push({ y0: cursor, y1: bounds.y1 });
+    return spans.filter((span) => span.y1 - span.y0 > 0);
+}
+function longestSpan(spans) {
+    return spans.reduce((best, span) => best === null || span.y1 - span.y0 > best.y1 - best.y0 ? span : best, null);
+}
+function blockedHeight(blockers) {
+    return blockers.reduce((sum, span) => sum + (span.y1 - span.y0), 0);
+}
+function scoreCandidate(candidate, bounds, boxes) {
+    const blockers = blockersFor(candidate, boxes);
+    return { candidate, span: longestSpan(freeSpans(bounds, blockers)), blocked: blockedHeight(blockers) };
+}
+function spanLength(scored) {
+    return scored.span ? scored.span.y1 - scored.span.y0 : 0;
+}
+function toColumn(candidate, span, geometry) {
+    return {
+        side: candidate.side,
+        x: candidate.x0 * geometry.targetWidth,
+        y: span.y0 * geometry.targetHeight,
+        width: (candidate.x1 - candidate.x0) * geometry.targetWidth,
+        height: (span.y1 - span.y0) * geometry.targetHeight,
+    };
+}
+/**
+ * Pick the stack column: the candidate side with the tallest stretch clear of
+ * avoided regions (target-normalized). Falls back to the least-covered
+ * full-height column when nothing leaves a usable free span.
+ */
+export function placeColumn(avoid, geometry) {
+    const bounds = verticalBounds(geometry);
+    const scored = columnCandidates(geometry).map((candidate) => scoreCandidate(candidate, bounds, avoid));
+    const best = scored.reduce((a, b) => (spanLength(b) > spanLength(a) + 0.02 ? b : a));
+    if (best.span && spanLength(best) >= MIN_FREE_SPAN)
+        return toColumn(best.candidate, best.span, geometry);
+    const leastBlocked = scored.reduce((a, b) => (b.blocked < a.blocked ? b : a));
+    return toColumn(leastBlocked.candidate, bounds, geometry);
+}
+export function avoidedRegions(regions, settings) {
+    return regions.filter((region) => (region.kind === "face" ? settings.avoidFaces : settings.avoidText));
+}
+function lineText(words) {
+    return words.map((word) => word.text).join(" ");
+}
+function lineEnergy(words) {
+    return Math.max(...words.map((word) => word.energy));
+}
+function fitToWidth(text, width, cap) {
+    return Math.min(cap, width / (Math.max(text.length, 2) * ALIVE_GLYPH_EM));
+}
+export function stackHeight(fontSizes) {
+    const total = fontSizes.reduce((sum, size) => sum + size * (ALIVE_LINE_HEIGHT + LINE_GAP_EM), 0);
+    return total - (fontSizes.length > 0 ? fontSizes[fontSizes.length - 1] * LINE_GAP_EM : 0);
+}
+export function lineGap(fontSize) {
+    return fontSize * LINE_GAP_EM;
+}
+/** Fit each stacked line to the column width, then shrink the block to fit its height. */
+export function fitStack(lines, column, energySizing) {
+    const cap = column.height * 0.36;
+    const fitted = lines.map((words) => fitToWidth(lineText(words), column.width, cap));
+    const sized = energySizing
+        ? fitted.map((size, index) => size * (0.7 + 0.3 * lineEnergy(lines[index])))
+        : fitted.map(() => Math.min(...fitted));
+    const scale = Math.min(1, column.height / stackHeight(sized));
+    return lines.map((words, index) => ({ words, fontSize: Math.round(sized[index] * scale * 10) / 10 }));
+}
+export function fitPunch(word, column, energySizing) {
+    const scale = energySizing ? 0.7 + 0.3 * word.energy : 0.85;
+    return Math.min(fitToWidth(word.text, column.width, column.height * 0.6), column.height * 0.6) * scale;
+}
+function cueWindow(lines, nextStart) {
+    const words = lines.flat();
+    const start = words[0].start - LEAD_SECONDS;
+    const hold = words[words.length - 1].end + HOLD_SECONDS;
+    const end = nextStart === null ? hold : Math.min(hold, nextStart - LEAD_SECONDS);
+    return { start, end: Math.max(end, start + 0.1) };
+}
+function firstStart(phrase, snap) {
+    return wordTiming(phrase.lines[0][0], snap).start;
+}
+/** Resolve analysed phrases into positioned, timed cues for one target frame. */
+export function resolveAliveCues(phrases, settings, geometry) {
+    return phrases.map((phrase, index) => {
+        const lines = phrase.lines.map((line) => line.map((word) => wordTiming(word, settings.snapToOnsets)));
+        const next = phrases[index + 1];
+        const window = cueWindow(lines, next ? firstStart(next, settings.snapToOnsets) : null);
+        const avoid = avoidedRegions(phrase.regions, settings).map((region) => regionToTarget(region, geometry));
+        const column = placeColumn(avoid, geometry);
+        const fitted = fitStack(lines, column, settings.energySizing);
+        const blockHeight = stackHeight(fitted.map((line) => line.fontSize));
+        return {
+            id: phrase.id,
+            start: window.start,
+            end: window.end,
+            column,
+            lines: fitted,
+            blockTop: column.y + (column.height - blockHeight) / 2,
+        };
+    });
+}
+export function activeCue(cues, time) {
+    return cues.find((cue) => time >= cue.start && time < cue.end) ?? null;
+}
+export function cueFade(cue, time) {
+    return clamp01((cue.end - time) / FADE_SECONDS);
+}
+/** The most recently started word of a cue, for punch style. */
+export function punchWord(cue, time) {
+    return cue.lines.flatMap((line) => line.words).filter((word) => word.start <= time).pop() ?? null;
+}
+const MOTIONS = {
+    pop: {
+        seconds: 0.14,
+        apply: (eased, _progress, energy, fontSize) => ({
+            opacity: eased,
+            scale: 1 + (1 - eased) * 0.3 * (0.6 + energy),
+            translateY: (1 - eased) * fontSize * 0.12,
+        }),
+    },
+    slam: {
+        seconds: 0.09,
+        apply: (eased, progress) => ({ opacity: clamp01(progress * 3), scale: 1 + (1 - eased) * 0.9, translateY: 0 }),
+    },
+    rise: {
+        seconds: 0.22,
+        apply: (eased, _progress, _energy, fontSize) => ({ opacity: eased, scale: 1, translateY: (1 - eased) * fontSize * 0.35 }),
+    },
+};
+function clamp01(value) {
+    return value < 0 ? 0 : value > 1 ? 1 : value;
+}
+function wordColor(word, time, settings) {
+    const started = time >= word.start;
+    const active = started && time < word.end;
+    return active || (started && word.energy >= HERO_ENERGY) ? settings.hitColor : settings.textColor;
+}
+export function wordLook(word, time, settings, fontSize, fade) {
+    const age = time - word.start;
+    const color = wordColor(word, time, settings);
+    if (settings.style === "karaoke") {
+        return { opacity: (age < 0 ? 0.3 : 1) * fade, scale: 1, translateY: 0, color };
+    }
+    if (age < 0)
+        return { opacity: 0, scale: 1, translateY: 0, color };
+    const curve = MOTIONS[settings.motion];
+    const progress = clamp01(age / curve.seconds);
+    const eased = 1 - Math.pow(1 - progress, 3);
+    const energy = settings.energySizing ? word.energy : 0.5;
+    const look = curve.apply(eased, progress, energy, fontSize);
+    return { ...look, opacity: look.opacity * fade, color };
+}

package/dist/remotion/subtitles/alive-types.js

@@ -0,0 +1,17 @@
+/**
+ * Alive captions: stacked, frame-aware, audio-timed music-video subtitles.
+ * These types are shared by the server (analysis, render) and the client
+ * studio preview, so this file must stay free of runtime imports.
+ */
+export const ALIVE_STYLES = ["stack", "punch", "karaoke"];
+export const ALIVE_MOTIONS = ["pop", "slam", "rise"];
+export const DEFAULT_ALIVE_SETTINGS = {
+    style: "stack",
+    motion: "pop",
+    energySizing: true,
+    snapToOnsets: true,
+    avoidFaces: true,
+    avoidText: true,
+    textColor: "#F8FAFC",
+    hitColor: "#72E7AA",
+};

package/dist/remotion/subtitles/chunker.js

@@ -0,0 +1,68 @@
+const CHUNK_LIMITS = {
+    "highlight:portrait": [40, 8],
+    "highlight:landscape": [60, 12],
+    "highlight:square": [60, 12],
+    "impact:portrait": [12, 2],
+    "impact:landscape": [16, 2],
+    "impact:square": [16, 2],
+};
+const MAX_DURATION = 6.0;
+function getChunkLimits(style, orientation) {
+    return CHUNK_LIMITS[`${style}:${orientation}`] ?? [42, 8];
+}
+export function chunkSegments(segments, orientation = "portrait", style = "impact") {
+    const [maxChars, maxWords] = getChunkLimits(style, orientation);
+    const chunked = [];
+    for (const segment of segments) {
+        const words = segment.words;
+        if (words.length === 0) {
+            const text = segment.text.trim();
+            if (text) {
+                chunked.push({ start: segment.start, end: segment.end, text, words: [] });
+            }
+            continue;
+        }
+        let currentWords = [];
+        let chunkStart = null;
+        for (let idx = 0; idx < words.length; idx++) {
+            const word = words[idx];
+            if (chunkStart === null) {
+                chunkStart = word.start;
+            }
+            const potentialText = [...currentWords, word].map((w) => w.word.trim()).join(" ");
+            const potentialDuration = word.end - chunkStart;
+            const wouldExceed = currentWords.length >= maxWords ||
+                potentialText.length > maxChars ||
+                potentialDuration > MAX_DURATION;
+            if (wouldExceed && currentWords.length > 0) {
+                const chunkText = currentWords.map((w) => w.word.trim()).join(" ");
+                const chunkEnd = currentWords[currentWords.length - 1].end;
+                chunked.push({
+                    start: chunkStart,
+                    end: chunkEnd,
+                    text: chunkText.trim(),
+                    words: [...currentWords],
+                });
+                currentWords = [];
+                chunkStart = word.start;
+            }
+            currentWords.push(word);
+            const wordText = word.word.trim();
+            const isSentenceEnd = wordText.endsWith(".") || wordText.endsWith("!") || wordText.endsWith("?");
+            const isLast = idx === words.length - 1;
+            if ((isSentenceEnd || isLast) && currentWords.length > 0) {
+                const chunkText = currentWords.map((w) => w.word.trim()).join(" ");
+                const chunkEnd = currentWords[currentWords.length - 1].end;
+                chunked.push({
+                    start: chunkStart,
+                    end: chunkEnd,
+                    text: chunkText.trim(),
+                    words: [...currentWords],
+                });
+                currentWords = [];
+                chunkStart = null;
+            }
+        }
+    }
+    return chunked;
+}

package/dist/remotion/subtitles/segments.js

@@ -0,0 +1,42 @@
+export function parseSegments(data) {
+    if (data.segments && data.segments.length > 0) {
+        return data.segments.map(parseOneSegment);
+    }
+    if (data.words && data.words.length > 0) {
+        const words = data.words
+            .filter((w) => (w.type ?? "word") === "word")
+            .map(parseOneWord)
+            .filter((w) => w !== null);
+        if (words.length === 0)
+            return [];
+        return [{
+                start: words[0].start,
+                end: words[words.length - 1].end,
+                text: words.map((w) => w.word).join(" "),
+                words,
+            }];
+    }
+    return [];
+}
+function parseOneSegment(seg) {
+    const words = (seg.words ?? [])
+        .filter((w) => (w.type ?? "word") === "word")
+        .map(parseOneWord)
+        .filter((w) => w !== null);
+    return {
+        start: seg.start ?? 0,
+        end: seg.end ?? 0,
+        text: (seg.text ?? "").trim(),
+        words,
+    };
+}
+function parseOneWord(w) {
+    const text = (w.text ?? w.word ?? "").trim();
+    if (!text)
+        return null;
+    return {
+        word: text,
+        start: w.start ?? 0,
+        end: w.end ?? 0,
+    };
+}

package/dist/remotion/subtitles/styles.js

@@ -0,0 +1,4 @@
+const SUBTITLE_STYLES = ["impact", "highlight", "alive"];
+export function isSubtitleStyle(value) {
+    return typeof value === "string" && SUBTITLE_STYLES.includes(value);
+}

package/dist/remotion/subtitles/types.js

@@ -0,0 +1 @@
+export {};