import React from "react";
import { interpolate, useCurrentFrame } from "remotion";
import { FONTS, usePalette } from "../theme";
import { useJobDesign, type DesignKicker } from "../job/script";
import { easeOutExpo, fade } from "./motion";
/**
* Editorial kicker label. The treatment (bar / chip / plain / none) is
* AI-authored per scene via the scene's `design.kicker`.
*/
export const Kicker: React.FC<{
children: React.ReactNode;
delay?: number;
color?: string;
center?: boolean;
variant?: DesignKicker;
}> = ({ children, delay = 0, color, center, variant }) => {
const frame = useCurrentFrame();
const palette = usePalette();
const design = useJobDesign();
const f = fade(frame, delay, 14);
const accent = color ?? palette.accent;
// Default to the classic bar kicker so scripts without an explicit
// design.kicker render exactly as before (minimal tones get the quiet
// underline variant inside the bar branch).
const v: DesignKicker = variant ?? "bar";
if (v === "none") return null;
if (v === "chip") {
return (
{children}
);
}
if (v === "plain") {
return (
{children}
);
}
// "bar" — the classic accent-bar kicker (quiet underline on minimal tones)
const underline = design?.tone === "minimal";
return (
{!underline && (
)}
{children}
{center && !underline && (
)}
{underline && (
)}
);
};
export const FadeUp: React.FC<{
children: React.ReactNode;
delay?: number;
dist?: number;
dur?: number;
style?: React.CSSProperties;
}> = ({ children, delay = 0, dist = 46, dur = 24, style }) => {
const frame = useCurrentFrame();
const f = fade(frame, delay, dur);
return (
{children}
);
};
export const Words: React.FC<{
text: string;
delay?: number;
stagger?: number;
style?: React.CSSProperties;
wordStyle?: React.CSSProperties;
/** Accent (italic) the final word — used by the "accent-word" headline style. */
accentLast?: boolean;
}> = ({ text, delay = 0, stagger = 4, style, wordStyle, accentLast }) => {
const frame = useCurrentFrame();
const palette = usePalette();
const words = text.split(" ");
// When accenting the last word, peel off trailing punctuation (and the
// closing quote from the intro tagline) so only the word itself gets colored.
const lastRaw = accentLast ? words[words.length - 1] : "";
const punctMatch = lastRaw.match(/[^\w']+$/);
const punct = accentLast && punctMatch ? punctMatch[0] : "";
const core = accentLast ? lastRaw.slice(0, lastRaw.length - punct.length) : "";
return (
{words.map((w, i) => {
const f = interpolate(
frame,
[delay + i * stagger, delay + i * stagger + 12],
[0, 1],
{ easing: easeOutExpo, extrapolateLeft: "clamp", extrapolateRight: "clamp" }
);
const isLast = accentLast && i === words.length - 1;
return (
{isLast ? (
<>
{core}
{punct}
) : (
w
)}
);
})}
);
};
export const Typewriter: React.FC<{
text: string;
delay?: number;
speed?: number;
style?: React.CSSProperties;
}> = ({ text, delay = 0, speed = 9, style }) => {
const frame = useCurrentFrame();
const palette = usePalette();
const n = Math.max(0, Math.floor((frame - delay) / speed));
const shown = text.slice(0, n);
const done = n >= text.length;
const blink = Math.abs(Math.sin(frame * 0.28)) > 0.4;
return (
{shown}
);
};
export const Counter: React.FC<{
to: number;
delay?: number;
dur?: number;
format?: (n: number) => string;
style?: React.CSSProperties;
}> = ({ to, delay = 0, dur = 42, format = (n) => `${n}`, style }) => {
const frame = useCurrentFrame();
const v = Math.round(
interpolate(frame, [delay, delay + dur], [0, to], {
easing: easeOutExpo,
extrapolateLeft: "clamp",
extrapolateRight: "clamp",
})
);
return {format(v)};
};
// Editorial highlight: soft accent marker behind serif italic text.
export const Highlight: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const palette = usePalette();
return (
{children}
);
};