reelkit-cli 0.6.0 → 0.8.0

package/src/remotion/kit/Captions.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
 import type { WordTiming } from "../../pipeline/schema";
-import { captionGroups, groupAt, type CaptionGroup } from "./caption-groups";
+import { captionGroups, DEFAULT_GROUP_WORDS, groupAt, type CaptionGroup } from "./caption-groups";
+import { inkOnAccent, legibleAccent, PLATE_COLOR } from "./caption-style";
 import { fonts, springs } from "./theme";
 
 export type CaptionMode = "highlight" | "pop" | "karaoke";
@@ -10,11 +11,15 @@ export type CaptionMode = "highlight" | "pop" | "karaoke";
 //   highlight: a line of words, the spoken one in the highlight colour (calm, educational)
 //   pop:       one to three words at a time, each popping in as it is spoken (high energy)
 //   karaoke:   a line that fills with the highlight colour as it is spoken (voiceover, music)
-// group, when given, decides which words share the screen and replaces perLine:
-//   "word":   exactly one word at a time
-//   "phrase": words grouped as they are spoken: a group ends at a sentence end, at a comma or dash after three words, or at a pause of
-//             0.35 s, and never holds more than 6 words or about 32 characters
+// The words sit on a dark rounded plate (about 58% opaque) in white, so they read on cream and on a busy photo alike without choosing colours; the
+// spoken word is on a chip of `highlight` (the film's accent) with white or dark ink, whichever reads better on it (karaoke has no chip: its fill is
+// the accent mixed toward white only as far as it needs to stay legible on the plate).
+// group decides which words share the screen:
+//   "word":   exactly one word at a time (only when the plan says `captions: "word"`)
+//   "phrase": words grouped as they are spoken, at most `maxWords` (default 3) and about 32 characters: a group ends at a sentence end (. ? !, never
+//             spanning two sentences), at a comma or dash after three words, or at a pause of 0.35 s
 //   "none":   nothing is drawn (the plan's `captions: "none"`), so the manifest's value can be passed straight through
+// With neither group nor perLine the groups are the same as "phrase": a few words (3), never one. perLine alone counts words as it always did.
 export const Captions: React.FC<{
   words: WordTiming[];
   mode?: CaptionMode;
@@ -22,28 +27,37 @@ export const Captions: React.FC<{
   color?: string;
   perLine?: number;
   group?: CaptionGroup;
+  // The most words in a group (default 3) for "phrase" and for the default.
+  maxWords?: number;
   uppercase?: boolean;
   // Distance of the caption baseline from the bottom, as a fraction of the height. Default keeps it clear of platform UI.
   bottom?: number;
   // Font family. Set to font("heebo") or font("rubik") for Hebrew; rtl also reverses the word order on the line.
   face?: string;
   rtl?: boolean;
-}> = ({ words, mode = "highlight", highlight = "#ffe14d", color = "#ffffff", perLine, group, uppercase = false, bottom = 0.16, face, rtl = false }) => {
+}> = ({ words, mode = "highlight", highlight = "#ffe14d", color = "#ffffff", perLine, group, maxWords, uppercase = false, bottom = 0.16, face, rtl = false }) => {
   const frame = useCurrentFrame();
   const { fps, width, height } = useVideoConfig();
   const t = frame / fps;
   if (words.length === 0 || group === "none") return null;
 
   if (group === "word" && t < words[0]!.startSec) return null;
+  // Without group or perLine a group is a few words (3), as with "phrase".
+  const grouping = group ?? (perLine === undefined ? "phrase" : undefined);
+  const accent = legibleAccent(highlight);
+  const chipInk = inkOnAccent(highlight);
+  // Every word has the same padding, so the line does not shift as the chip moves from word to word.
+  const pad: React.CSSProperties = { borderRadius: "0.3em", padding: "0 0.14em" };
+  const chip: React.CSSProperties = { ...pad, background: highlight, color: chipInk, textShadow: "none" };
   let active: number, lineStart: number, line: WordTiming[];
-  if (group) {
-    const groups = captionGroups(words, group);
+  if (grouping) {
+    const groups = captionGroups(words, grouping, { maxWords: maxWords ?? DEFAULT_GROUP_WORDS });
     const at = groupAt(words, groups, t);
     active = at.active;
     [lineStart] = groups[at.index]!;
     line = words.slice(lineStart, groups[at.index]![1]);
   } else {
-    const size = perLine ?? (mode === "pop" ? 2 : 4);
+    const size = perLine ?? DEFAULT_GROUP_WORDS;
     active = words.findIndex((w) => t < w.endSec);
     if (active === -1) active = words.length - 1;
     lineStart = Math.floor(active / size) * size;
@@ -53,15 +67,16 @@ export const Captions: React.FC<{
 
   const base: React.CSSProperties = {
     fontFamily: face ?? fonts.body, fontWeight: 800, textAlign: "center", direction: rtl ? "rtl" : "ltr", padding: `0 ${width * 0.06}px`,
-    fontSize: width * (mode === "pop" || group === "word" ? 0.075 : 0.055), lineHeight: 1.15, color,
-    // A dark outline plus shadow keeps contrast above 4.5:1 on any background.
-    WebkitTextStroke: `${width * 0.006}px rgba(0,0,0,0.85)`, paintOrder: "stroke fill",
-    textShadow: "0 4px 18px rgba(0,0,0,0.7)",
+    fontSize: width * (mode === "pop" || group === "word" ? 0.075 : 0.055), lineHeight: 1.5, color,
+    textShadow: "0 2px 10px rgba(0,0,0,0.45)",
   };
+  // The plate: one dark rounded box behind each line of the group, so the white ink has 4.5:1 or more on any ground.
+  const plate: React.CSSProperties = { background: PLATE_COLOR, borderRadius: "0.42em", padding: "0.12em 0.5em", boxDecorationBreak: "clone", WebkitBoxDecorationBreak: "clone" };
 
   return (
     <AbsoluteFill style={{ justifyContent: "flex-end", alignItems: "center", paddingBottom: height * bottom }}>
       <div style={base}>
+        <span style={plate}>
         {line.map((w, i) => {
           const index = lineStart + i;
           const started = t >= w.startSec;
@@ -69,7 +84,7 @@ export const Captions: React.FC<{
             // A word appears on the frame it starts, never before, with a small overshoot.
             const p = spring({ frame: frame - Math.round(w.startSec * fps), fps, config: springs.snappy });
             return (
-              <span key={index} style={{ display: "inline-block", margin: `0 ${width * 0.012}px`, opacity: started ? 1 : 0, transform: `scale(${interpolate(p, [0, 1], [0.6, 1])})`, color: index === active ? highlight : color }}>
+              <span key={index} style={{ display: "inline-block", margin: `0 ${width * 0.012}px`, opacity: started ? 1 : 0, transform: `scale(${interpolate(p, [0, 1], [0.6, 1])})`, color, ...pad, ...(index === active ? chip : {}) }}>
                 {show(w)}
               </span>
             );
@@ -77,17 +92,18 @@ export const Captions: React.FC<{
           if (mode === "karaoke") {
             const fill = interpolate(t, [w.startSec, Math.max(w.endSec, w.startSec + 0.01)], [0, 100], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
             return (
-              <span key={index} style={{ display: "inline-block", marginRight: "0.28em", backgroundImage: `linear-gradient(90deg, ${highlight} ${fill}%, ${color} ${fill}%)`, WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent", WebkitTextStroke: "0px transparent", textShadow: "none", filter: "drop-shadow(0 3px 6px rgba(0,0,0,0.75))" }}>
+              <span key={index} style={{ display: "inline-block", marginRight: "0.28em", backgroundImage: `linear-gradient(90deg, ${accent} ${fill}%, ${color} ${fill}%)`, WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent", WebkitTextStroke: "0px transparent", textShadow: "none", filter: "drop-shadow(0 3px 6px rgba(0,0,0,0.75))" }}>
                 {show(w)}
               </span>
             );
           }
           return (
-            <span key={index} style={{ color: index === active && started ? highlight : color }}>
-              {show(w)}{" "}
+            <span key={index} style={index === active && started ? chip : { color, ...pad }}>
+              {show(w)}{i < line.length - 1 ? " " : ""}
             </span>
           );
         })}
+        </span>
       </div>
     </AbsoluteFill>
   );

package/src/remotion/kit/Card3D.tsx

@@ -0,0 +1,211 @@
+import React from "react";
+import { useCurrentFrame, useVideoConfig } from "remotion";
+import { useLoader } from "@react-three/fiber";
+import { CanvasTexture, FrontSide, Shape, ShapeGeometry, SRGBColorSpace, TextureLoader, type Texture } from "three";
+import { delayRender, continueRender } from "remotion";
+import { useMedia } from "./media";
+import { fonts } from "./theme";
+import { degToRad, floatAt, inkOn, mixHex, type Vec3 } from "./three-math";
+
+// A rounded rectangle, with its texture coordinates running 0 to 1 across it so that a picture fills it.
+function roundedCard(w: number, h: number, r: number): ShapeGeometry {
+  const x = -w / 2, y = -h / 2, k = Math.min(r, w / 2, h / 2);
+  const s = new Shape();
+  s.moveTo(x + k, y);
+  s.lineTo(x + w - k, y); s.quadraticCurveTo(x + w, y, x + w, y + k);
+  s.lineTo(x + w, y + h - k); s.quadraticCurveTo(x + w, y + h, x + w - k, y + h);
+  s.lineTo(x + k, y + h); s.quadraticCurveTo(x, y + h, x, y + h - k);
+  s.lineTo(x, y + k); s.quadraticCurveTo(x, y, x + k, y);
+  const g = new ShapeGeometry(s, 8);
+  const p = g.attributes.position!, uv = g.attributes.uv!;
+  for (let i = 0; i < p.count; i++) uv.setXY(i, (p.getX(i) - x) / w, (p.getY(i) - y) / h);
+  return g;
+}
+
+// A soft dark blur in the card's shape, for the shadow behind it. Drawn once on a canvas; it needs no light.
+function shadowTexture(): CanvasTexture {
+  const c = document.createElement("canvas");
+  c.width = 256; c.height = 256;
+  const g = c.getContext("2d")!;
+  g.filter = "blur(18px)";
+  g.fillStyle = "rgba(0,0,0,0.55)";
+  g.beginPath();
+  g.roundRect(48, 48, 160, 160, 28);
+  g.fill();
+  const t = new CanvasTexture(c);
+  t.colorSpace = SRGBColorSpace;
+  return t;
+}
+
+// Any CSS colour as "#rrggbb", by letting a canvas parse it.
+function normalise(color: string): string {
+  const g = document.createElement("canvas").getContext("2d")!;
+  g.fillStyle = "#000000";
+  g.fillStyle = color;
+  const v = String(g.fillStyle);
+  return v.startsWith("#") ? v : "#e8e8f0";
+}
+
+type Face = { color: string; accent?: string; label?: string; icon?: HTMLImageElement; family: string; ratio: number; radius: number };
+
+// The face of a card drawn on a canvas: a gradient (lighter at the top left), a soft highlight, a rim in the accent and, if given, an icon above a large
+// label. Drawn once; nothing here depends on the frame, so every frame shows the same face. The ink is white on a dark face and dark on a light one.
+function drawFace(f: Face): CanvasTexture {
+  const long = 1024, W = Math.round(long * Math.min(1, f.ratio)), H = Math.round(long * Math.min(1, 1 / f.ratio));
+  const c = document.createElement("canvas");
+  c.width = W; c.height = H;
+  const g = c.getContext("2d")!;
+  const base = normalise(f.color), accent = normalise(f.accent ?? mixHex(base, "#ffffff", 0.55));
+  const r = Math.min(W, H) * Math.min(0.5, f.radius / Math.min(f.ratio, 1) * 0.33);
+  const body = new Path2D();
+  body.roundRect(0, 0, W, H, r);
+  g.save();
+  g.clip(body);
+  const grad = g.createLinearGradient(0, 0, W * 0.8, H);
+  grad.addColorStop(0, mixHex(base, "#ffffff", 0.16));
+  grad.addColorStop(0.55, base);
+  grad.addColorStop(1, mixHex(base, "#000000", 0.3));
+  g.fillStyle = grad;
+  g.fillRect(0, 0, W, H);
+  const hi = g.createLinearGradient(0, 0, 0, H * 0.5);
+  hi.addColorStop(0, "rgba(255,255,255,0.20)");
+  hi.addColorStop(1, "rgba(255,255,255,0)");
+  g.fillStyle = hi;
+  g.fillRect(0, 0, W, H * 0.5);
+  g.restore();
+  // The rim: an outer line in the accent and a fine light line just inside it.
+  const edge = Math.max(4, Math.min(W, H) * 0.018);
+  g.lineWidth = edge;
+  g.strokeStyle = accent;
+  g.beginPath(); g.roundRect(edge / 2, edge / 2, W - edge, H - edge, Math.max(1, r - edge / 2)); g.stroke();
+  g.lineWidth = Math.max(1.5, edge * 0.35);
+  g.strokeStyle = "rgba(255,255,255,0.28)";
+  g.beginPath(); g.roundRect(edge * 1.7, edge * 1.7, W - edge * 3.4, H - edge * 3.4, Math.max(1, r - edge * 1.7)); g.stroke();
+
+  const ink = inkOn(base), m = Math.min(W, H);
+  const lines = (f.label ?? "").split("\n").filter(Boolean);
+  let px = m * 0.2;
+  if (lines.length) {
+    g.font = `800 ${px}px ${f.family}`;
+    const widest = Math.max(...lines.map((l) => g.measureText(l).width));
+    if (widest > W * 0.8) px *= (W * 0.8) / widest;
+    px = Math.min(px, H * 0.22);
+  }
+  const labelH = lines.length * px * 1.12;
+  const iconSize = f.icon ? (lines.length ? m * 0.4 : m * 0.55) : 0;
+  const gap = f.icon && lines.length ? m * 0.07 : 0;
+  let y = (H - (iconSize + gap + labelH)) / 2;
+  if (f.icon) {
+    // Fitted into a square of iconSize, keeping its shape.
+    const ratio = (f.icon.naturalWidth || 1) / (f.icon.naturalHeight || 1);
+    const dw = ratio >= 1 ? iconSize : iconSize * ratio, dh = ratio >= 1 ? iconSize / ratio : iconSize;
+    g.drawImage(f.icon, (W - dw) / 2, y + (iconSize - dh) / 2, dw, dh);
+    y += iconSize + gap;
+  }
+  g.fillStyle = ink;
+  g.textAlign = "center"; g.textBaseline = "middle";
+  g.font = `800 ${px}px ${f.family}`;
+  lines.forEach((l, i) => g.fillText(l, W / 2, y + (i + 0.5) * px * 1.12));
+  const t = new CanvasTexture(c);
+  t.colorSpace = SRGBColorSpace;
+  t.anisotropy = 8;
+  return t;
+}
+
+// Waits, before the frame is drawn, for the typeface and the icon, so that the label is set in the film's font and never in a fallback.
+function useFaceAssets(label: string | undefined, iconUrl: string | undefined, family: string): { ready: boolean; icon?: HTMLImageElement } {
+  const need = Boolean(label || iconUrl);
+  const [state, setState] = React.useState<{ ready: boolean; icon?: HTMLImageElement }>({ ready: !need });
+  React.useLayoutEffect(() => {
+    if (!need) { setState({ ready: true }); return; }
+    const handle = delayRender("Card3D face");
+    let live = true;
+    (async () => {
+      try { await Promise.all([document.fonts.load(`800 64px ${family}`, label ?? "A"), document.fonts.ready]); } catch { /* the fallback face is fine */ }
+      let icon: HTMLImageElement | undefined;
+      if (iconUrl) {
+        icon = new Image();
+        try { await new Promise<void>((ok, bad) => { icon!.onload = () => ok(); icon!.onerror = () => bad(new Error("icon")); icon!.src = iconUrl; }); } catch { icon = undefined; }
+      }
+      if (live) setState({ ready: true, icon });
+    })().finally(() => continueRender(handle));
+    return () => { live = false; };
+  }, [need, label, iconUrl, family]);
+  return state;
+}
+
+const Designed: React.FC<{ width: number; height: number; radius: number; color: string; accent?: string; label?: string; icon?: string; family: string }> = ({ width, height, radius, color, accent, label, icon, family }) => {
+  const iconUrl = useMedia(icon ?? "");
+  const assets = useFaceAssets(label, icon ? iconUrl : undefined, family);
+  const flat = React.useMemo(() => roundedCard(width, height, radius), [width, height, radius]);
+  const texture = React.useMemo(() => drawFace({ color, accent, label, icon: assets.icon, family, ratio: width / height, radius }), [color, accent, label, assets, family, width, height, radius]);
+  React.useEffect(() => () => texture.dispose(), [texture]);
+  return <Body geometry={flat} width={width} height={height}><meshBasicMaterial map={texture} toneMapped={false} /></Body>;
+};
+
+const Picture: React.FC<{ url: string; width: number; height?: number; radius: number }> = ({ url, width, height, radius }) => {
+  const texture = useLoader(TextureLoader, url) as Texture;
+  texture.colorSpace = SRGBColorSpace;
+  const img = texture.image as { width: number; height: number } | undefined;
+  const h = height ?? (img ? (width * img.height) / img.width : width * 0.66);
+  const geometry = React.useMemo(() => roundedCard(width, h, radius), [width, h, radius]);
+  return <Body geometry={geometry} width={width} height={h}><meshBasicMaterial map={texture} toneMapped={false} /></Body>;
+};
+
+// The card's body with its soft shadow. A face is drawn on both sides, so that one seen from behind (the far side of a ring) reads the right way round
+// rather than as a mirror image.
+const Body: React.FC<{ geometry: ShapeGeometry; width: number; height: number; children: React.ReactElement }> = ({ geometry, width, height, children }) => {
+  const shadow = React.useMemo(shadowTexture, []);
+  const face = React.cloneElement(children, { side: FrontSide } as never);
+  return (
+    <>
+      <mesh position={[0.04 * width, -0.07 * height, -0.04]} scale={[width * 1.7, height * 1.7, 1]}>
+        <planeGeometry args={[1, 1]} />
+        <meshBasicMaterial map={shadow} transparent depthWrite={false} toneMapped={false} />
+      </mesh>
+      <mesh geometry={geometry}>{face}</mesh>
+      <mesh geometry={geometry} rotation={[0, Math.PI, 0]} position={[0, 0, -0.004]}>{React.cloneElement(children, { side: FrontSide } as never)}</mesh>
+    </>
+  );
+};
+
+// A rounded plane in space that shows a picture (`src`, a project path or urls[...]) or a designed face, for screenshots and for cards that carry a
+// word or a mark. Without `src` the face is a gradient of `color` with a soft highlight and a rim in `accent` (default a light tint of the colour);
+// `label` is drawn large on it in the film's font (`font`, default the kit's display face) and `icon` (a project path to an image or svg, drawn in its
+// own colours) above the label; the ink is white on a dark colour and dark on a light one. Give every card in a ring a label or an icon. width is in
+// scene units (default 3); the height follows the picture's shape unless set. position is [x, y, z]; rotation is [x, y, z] in degrees; `tilt` is a
+// shorthand for the one tilt a card needs: a turn about the vertical axis in degrees, with a lean the other way about the horizontal. A soft shadow sits
+// behind it, and `float` makes it drift slowly (true, or a number for how much), the same at the same frame.
+export const Card3D: React.FC<{
+  src?: string;
+  color?: string;
+  width?: number;
+  height?: number;
+  radius?: number;
+  position?: Vec3;
+  rotation?: Vec3;
+  tilt?: number;
+  float?: boolean | number;
+  label?: string;
+  icon?: string;
+  accent?: string;
+  font?: string;
+}> = ({ src, color = "#e8e8f0", width = 3, height, radius = 0.12, position = [0, 0, 0], rotation = [0, 0, 0], tilt = 0, float: drift, label, icon, accent, font = fonts.display }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const url = useMedia(src ?? "");
+  const f = drift ? floatAt(frame, fps, drift === true ? 1 : drift, position[0] * 3 + position[1]) : { offset: [0, 0, 0] as Vec3, rotation: [0, 0, 0] as Vec3 };
+  const h = height ?? width * 0.66;
+  return (
+    <group
+      position={[position[0] + f.offset[0], position[1] + f.offset[1], position[2] + f.offset[2]]}
+      rotation={[degToRad(rotation[0] - tilt * 0.3) + f.rotation[0], degToRad(rotation[1] + tilt) + f.rotation[1], degToRad(rotation[2]) + f.rotation[2]]}
+    >
+      {src ? (
+        <React.Suspense fallback={null}><Picture url={url} width={width} height={height} radius={radius} /></React.Suspense>
+      ) : (
+        <Designed width={width} height={h} radius={radius} color={color} accent={accent} label={label} icon={icon} family={font} />
+      )}
+    </group>
+  );
+};

package/src/remotion/kit/ChapterFrame.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { font as loadFont, fonts, springs } from "./theme";
+import { inkOn, mixHex } from "./three-math";
+import { chapterFrames, clamp01 } from "./ui-math";
+import { rgba } from "./ui-theme";
+
+// The grammar of one chapter of a film, as slots, so that every scene of a film is built the same way: a counter "03 / 07" at the top with a progress rule
+// under it, a large ghost word behind everything, `children` as the hero in the middle, up to three `badges` (pills that pop in) and one `caption` line at the
+// bottom. `color` is the chapter's ground and fills the frame (a different one per chapter is the colour script); the ink is chosen to read on it. Use it
+// once per scene, with the same props shape in every scene. Times are frames from the component's own mount; chapterFrames({ delay, badges }) gives the
+// frames the badges pop, for sound. `index` counts from 1. `hero` tints the first badge and the rule's head.
+export const ChapterFrame: React.FC<{
+  index: number;
+  total: number;
+  color: string;
+  ghost?: string;
+  caption?: string;
+  badges?: string[];
+  hero?: string;
+  ink?: string;
+  font?: string;
+  delay?: number;
+  children?: React.ReactNode;
+}> = ({ index, total, color, ghost, caption, badges = [], hero, ink, font = fonts.display, delay = 0, children }) => {
+  const frame = useCurrentFrame();
+  const { fps, width: W, height: H } = useVideoConfig();
+  const text = ink ?? inkOn(color);
+  const mono = loadFont("jetbrainsMono");
+  const ev = chapterFrames({ delay, badges: badges.length });
+  const fill = interpolate(frame, [delay, ev.progressDone], [(index - 1) / total, index / total], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const letters = ghost ? [...ghost.toUpperCase()].length : 1;
+  const ghostSize = Math.max(W * 0.16, Math.min(W * 0.46, (W * 0.96) / (letters * 0.66)));
+  const ghostIn = spring({ frame: frame - delay, fps, config: springs.heavy });
+  const capIn = spring({ frame: frame - delay - 8, fps, config: springs.smooth });
+  const heroIn = spring({ frame: frame - delay + 2, fps, config: springs.smooth });
+  return (
+    <AbsoluteFill style={{ background: color, color: text, fontFamily: font, overflow: "hidden" }}>
+      {ghost ? (
+        <div style={{ position: "absolute", left: 0, right: 0, top: H * 0.5, transform: `translate(${interpolate(frame, [0, 150], [-W * 0.012, W * 0.012], { extrapolateRight: "extend" })}px, -50%) scale(${0.94 + 0.06 * ghostIn})`, textAlign: "center", fontSize: ghostSize, fontWeight: 900, letterSpacing: "-0.04em", lineHeight: 1, color: rgba(text, 0.1), whiteSpace: "nowrap", opacity: ghostIn }}>
+          {ghost.toUpperCase()}
+        </div>
+      ) : null}
+      <div style={{ position: "absolute", left: W * 0.07, right: W * 0.07, top: H * 0.055 }}>
+        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", fontFamily: mono, fontWeight: 700, fontSize: W * 0.04, letterSpacing: "0.04em" }}>
+          <span>{String(index).padStart(2, "0")}<span style={{ opacity: 0.45 }}> / {String(total).padStart(2, "0")}</span></span>
+        </div>
+        <div style={{ position: "relative", marginTop: W * 0.025, height: Math.max(4, W * 0.007), background: rgba(text, 0.18), borderRadius: 999 }}>
+          <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: `${clamp01(fill) * 100}%`, background: text, borderRadius: 999 }} />
+          {hero ? <div style={{ position: "absolute", top: "50%", left: `${clamp01(fill) * 100}%`, width: W * 0.026, height: W * 0.026, borderRadius: 999, background: hero, transform: "translate(-50%, -50%)", boxShadow: `0 0 ${W * 0.02}px ${rgba(hero, 0.8)}` }} /> : null}
+        </div>
+      </div>
+      <div style={{ position: "absolute", left: 0, right: 0, top: H * 0.15, bottom: H * 0.3, display: "flex", alignItems: "center", justifyContent: "center", opacity: heroIn, transform: `translateY(${(1 - heroIn) * H * 0.03}px)` }}>{children}</div>
+      <div style={{ position: "absolute", left: W * 0.05, right: W * 0.05, top: H * 0.72, display: "flex", justifyContent: "center", gap: W * 0.025, flexWrap: "wrap" }}>
+        {badges.slice(0, 3).map((b, i) => {
+          const p = spring({ frame: frame - ev.badges[i]!, fps, config: { stiffness: 260, damping: 14 } });
+          const lead = i === 0 && hero;
+          return (
+            <div key={i} style={{ transform: `scale(${p})`, opacity: clamp01(p * 2), fontWeight: 700, fontSize: W * 0.034, padding: `${W * 0.014}px ${W * 0.04}px`, borderRadius: 999, background: lead ? hero : rgba(text, 0.12), color: lead ? inkOn(hero!) : text, border: lead ? "none" : `${Math.max(2, W * 0.002)}px solid ${rgba(text, 0.3)}`, whiteSpace: "nowrap" }}>{b}</div>
+          );
+        })}
+      </div>
+      {caption ? (
+        <div style={{ position: "absolute", left: W * 0.07, right: W * 0.07, top: H * 0.8, textAlign: "center", fontWeight: 700, fontSize: W * 0.05, lineHeight: 1.18, letterSpacing: "-0.01em", color: mixHex(text, color, 0.08), opacity: capIn, transform: `translateY(${(1 - capIn) * W * 0.03}px)` }}>{caption}</div>
+      ) : null}
+    </AbsoluteFill>
+  );
+};

package/src/remotion/kit/CounterRoll.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
+import { Place } from "./Place";
+import { fonts } from "./theme";
+import { DEFAULT_HERO } from "./ui-theme";
+import { rollValue } from "./ui-math";
+
+const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
+
+// An odometer: a number whose digits roll like wheels from `from` to `to` over `frames`, easing out and landing exactly, in tabular digits so nothing
+// shifts sideways. `prefix` and `suffix` ("$", "%", "x") sit around it, `decimals` shows places after the point, `group` puts a comma between thousands
+// (default on), `label` is a small line under it. It is sized to fill `width` (a fraction of the frame, default 0.86) at most `maxSize` of the width (0.3).
+// Times are frames from the component's own mount: it starts at `delay` (default 0) and settleFrame({ delay, frames }) is the frame it lands, for a
+// chime. The wheels stay on the final number after that. Colour: `ink` for the digits (default white), `hero` for the prefix, suffix and label.
+export const CounterRoll: React.FC<{
+  to: number;
+  from?: number;
+  frames?: number;
+  delay?: number;
+  prefix?: string;
+  suffix?: string;
+  label?: string;
+  decimals?: number;
+  group?: boolean;
+  hero?: string;
+  ink?: string;
+  font?: string;
+  width?: number;
+  maxSize?: number;
+  y?: number;
+}> = ({ to, from = 0, frames = 45, delay = 0, prefix = "", suffix = "", label, decimals = 0, group = true, hero = DEFAULT_HERO, ink = "#f4f4f5", font = fonts.display, width: fraction = 0.86, maxSize = 0.3, y = 0.5 }) => {
+  const frame = useCurrentFrame();
+  const { width: W } = useVideoConfig();
+  const scale = 10 ** decimals;
+  const value = rollValue(frame, { from, to, frames, delay });
+  const scaled = value * scale;
+  const cols = Math.max(decimals + 1, String(Math.round(Math.max(Math.abs(to), Math.abs(from)) * scale)).length);
+  const extra = prefix.length * 0.6 + suffix.length * 0.6 + (group ? Math.floor((cols - 1 - decimals) / 3) * 0.3 : 0) + (decimals ? 0.3 : 0);
+  const em = cols * 0.64 + extra;
+  const size = Math.min(W * maxSize, (W * fraction) / em);
+  const lh = size * 1.06;
+  const cells: React.ReactNode[] = [];
+  for (let k = cols - 1; k >= 0; k--) {
+    const place = 10 ** k;
+    const lead = Math.floor(scaled / place) === 0 && k > decimals;
+    // The ones wheel turns continuously; every wheel above it only turns as the one below comes round to its carry, like a real odometer.
+    const x = scaled / place, whole = Math.floor(x + 1e-9), frac = Math.max(0, x - whole);
+    const pos = (whole % 10) + (k === 0 ? frac : Math.max(0, Math.min(1, (frac - 0.8) / 0.2)));
+    if (k === decimals - 1 && decimals > 0) cells.push(<span key="dot" style={{ width: size * 0.3, textAlign: "center", lineHeight: `${lh}px` }}>.</span>);
+    cells.push(
+      <span key={k} style={{ display: "inline-block", width: size * 0.64, height: lh, overflow: "hidden", position: "relative", opacity: lead ? 0 : 1, WebkitMaskImage: "linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%)", maskImage: "linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%)" }}>
+        <span style={{ display: "block", transform: `translateY(${-pos * lh}px)` }}>
+          {DIGITS.map((d, i) => <span key={i} style={{ display: "block", height: lh, lineHeight: `${lh}px`, textAlign: "center" }}>{d}</span>)}
+        </span>
+      </span>,
+    );
+    if (group && k > decimals && (k - decimals) % 3 === 0) {
+      const hide = Math.floor(scaled / 10 ** (k - 1)) === 0 && k - 1 > decimals;
+      cells.push(<span key={`c${k}`} style={{ display: "inline-block", width: size * 0.3, textAlign: "center", height: lh, lineHeight: `${lh}px`, opacity: hide || lead ? 0 : 1 }}>,</span>);
+    }
+  }
+  const settle = interpolate(frame, [delay, delay + frames], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return (
+    <Place y={y}>
+      <div style={{ textAlign: "center", fontFamily: font, fontWeight: 800, color: ink, fontVariantNumeric: "tabular-nums" }}>
+        <div style={{ display: "inline-flex", alignItems: "center", fontSize: size, height: lh }}>
+          {prefix ? <span style={{ color: hero, lineHeight: `${lh}px`, marginRight: size * 0.04 }}>{prefix}</span> : null}
+          {cells}
+          {suffix ? <span style={{ color: hero, lineHeight: `${lh}px`, marginLeft: size * 0.04 }}>{suffix}</span> : null}
+        </div>
+        {label ? <div style={{ marginTop: size * 0.1, fontSize: Math.max(W * 0.034, size * 0.2), fontWeight: 600, color: hero, opacity: 0.55 + 0.45 * settle, letterSpacing: "0.02em" }}>{label}</div> : null}
+      </div>
+    </Place>
+  );
+};

package/src/remotion/kit/GlassPanel.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { Place } from "./Place";
+import { DEFAULT_HERO, rgba, uiColors, type UiTheme } from "./ui-theme";
+import { PANEL_SPRING } from "./ui-math";
+
+// A slab for your own content: a near-black rounded panel (or a light one with theme="light") with a hairline stroke lit along its top edge, a coloured glow pool
+// behind it, an optional slight perspective `tilt` (degrees about the vertical axis, default 0; the horizontal tilt follows at 0.4 of it) and an entrance that
+// slides up and settles with a small overshoot. `delay` is a frame from the component's own mount (default 0); panelSettleFrame(delay, fps) is the frame it
+// lands, for a "snap" sound. `width` is a fraction of the frame's width (0.86), `height` a fraction of the frame's height (default: as tall as the content),
+// `glow` the colour of the pool (default the hero colour), `y` the height of its middle as a fraction of the frame (0.5). Children are laid out inside
+// with padding; text inside should be at least 0.032 of the frame's width.
+export const GlassPanel: React.FC<{
+  children?: React.ReactNode;
+  hero?: string;
+  glow?: string;
+  theme?: UiTheme;
+  width?: number;
+  height?: number;
+  tilt?: number;
+  delay?: number;
+  radius?: number;
+  padding?: number;
+  y?: number;
+}> = ({ children, hero = DEFAULT_HERO, glow, theme = "dark", width: fraction = 0.86, height, tilt = 0, delay = 0, radius = 0.06, padding = 0.05, y = 0.5 }) => {
+  const frame = useCurrentFrame();
+  const { fps, width: W, height: H } = useVideoConfig();
+  const c = uiColors(theme === "glass" ? "glass" : theme, hero);
+  const P = W * fraction;
+  const p = spring({ frame: frame - delay, fps, config: PANEL_SPRING });
+  const g = glow ?? hero;
+  const alpha = Math.min(1, p * 1.4);
+  return (
+    <Place y={y}>
+      <div style={{ position: "relative", width: P, perspective: P * 2.2, opacity: alpha }}>
+        <div style={{ position: "absolute", left: "-12%", right: "-12%", top: "-14%", bottom: "-14%", background: `radial-gradient(ellipse at 50% 55%, ${rgba(g, theme === "light" ? 0.35 : 0.62)} 0%, ${rgba(g, 0.0)} 66%)`, filter: `blur(${P * 0.06}px)`, transform: `translateY(${(1 - p) * H * 0.07}px)` }} />
+        <div style={{ position: "relative", transform: `translateY(${(1 - p) * H * 0.07}px) rotateY(${tilt * p}deg) rotateX(${-Math.abs(tilt) * 0.4 * p}deg)`, transformStyle: "preserve-3d", width: P, height: height === undefined ? undefined : H * height, boxSizing: "border-box", padding: P * padding, borderRadius: P * radius, background: theme === "light" ? c.panel : `linear-gradient(160deg, ${rgba("#2a2a3c", 0.72)} 0%, ${c.panel} 46%)`, border: `${Math.max(2, P * 0.003)}px solid ${c.stroke}`, boxShadow: `0 ${P * 0.05}px ${P * 0.12}px ${c.shadow}, inset 0 ${Math.max(2, P * 0.003)}px 0 ${theme === "light" ? "rgba(255,255,255,0.9)" : "rgba(255,255,255,0.22)"}` }}>
+          {children}
+        </div>
+      </div>
+    </Place>
+  );
+};