@oh-story/dsh 0.1.9 → 0.1.11

package/lib/drama/skills/short-drama-edit/assets/remotion/src/Subtitles.tsx

@@ -1,87 +1,86 @@
-import React, { useMemo } from "react";
-import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
-import { Cue, SubtitleProps } from "./schema";
-import { assertFamilyResolves, waitForFonts } from "./font";
+import React from "react";
+import { AbsoluteFill, spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { Cue } from "./schema";
+import { assertFamilyResolves } from "./font";
+import { lineEms } from "./rules.mjs";
+import { SANS, SUBTITLE } from "./screen/tokens";
 
-waitForFonts();
+/** Splits a line into plain and highlighted runs, earliest keyword first. */
+const runs = (text: string, keys: string[]): { text: string; key: boolean }[] => {
+  const out: { text: string; key: boolean }[] = [];
+  let rest = text;
+  while (rest) {
+    const hit = keys
+      .map((key) => ({ key, at: rest.indexOf(key) }))
+      .filter((found) => found.at >= 0)
+      .sort((a, b) => a.at - b.at)[0];
+    if (!hit) {
+      out.push({ text: rest, key: false });
+      break;
+    }
+    if (hit.at) out.push({ text: rest.slice(0, hit.at), key: false });
+    out.push({ text: hit.key, key: true });
+    rest = rest.slice(hit.at + hit.key.length);
+  }
+  return out;
+};
 
 /**
- * A transparent subtitle layer, composited onto untouched picture.
- *
- * Everything here is expressed as a fraction of frame height, so the same
- * numbers hold for 768×1344 and 1080×1920. That is the whole reason this file
- * exists in pixels rather than in an ASS style: the subtitle renderer's own
- * `PlayRes` scaling was applied twice once already, and type three times too
- * large shipped in a sample film.
+ * The subtitle layer: Noto Sans SC 900, white or voice-coloured fill over a
+ * dark rim drawn beneath it, baseline about a quarter up the frame so the
+ * platform's own UI never covers it. Sizes are fractions of frame height.
  */
-export const Subtitles: React.FC<SubtitleProps> = ({
-  cues,
-  fontScale,
-  bottomScale,
-  fontFamily,
-}) => {
+export const Subtitles: React.FC<{ cues: Cue[] }> = ({ cues }) => {
   const frame = useCurrentFrame();
   const { fps, height, width } = useVideoConfig();
   const now = frame / fps;
-  const active = cues.find((cue: Cue) => now >= cue.start && now < cue.end);
-
-  const fontSize = height * fontScale;
-  // A dark rim on every side keeps white type legible over a bright frame
-  // without a caption box, which is what vertical drama expects. It depends
-  // only on the frame size, so it is built once — and it stays above the early
-  // return, because a hook may not be skipped on the frames with no line.
-  const shadow = useMemo(() => {
-    const rim = Math.max(2, height * 0.0024);
-    return [
-      `0 0 ${rim * 3}px rgba(0,0,0,0.85)`,
-      `${rim}px ${rim}px 0 rgba(0,0,0,0.92)`,
-      `-${rim}px ${rim}px 0 rgba(0,0,0,0.92)`,
-      `${rim}px -${rim}px 0 rgba(0,0,0,0.92)`,
-      `-${rim}px -${rim}px 0 rgba(0,0,0,0.92)`,
-    ].join(", ");
-  }, [height]);
-
-  // Checked against a line about to be filmed, so a missing font stops the
+  const cue = cues.find((item) => now >= item.start && now < item.end);
+  // Checked against a line about to be filmed, so a missing face stops the
   // render on the first subtitle frame rather than after the whole pass.
-  assertFamilyResolves(fontFamily, active?.text ?? "");
-  if (!active) return null;
-
-  // A short lift on entry reads as the line arriving with the delivery. It is
-  // over well before the first syllable ends, so it never delays reading.
-  const age = now - active.start;
-  const lift = Math.min(1, age / 0.12);
-  const eased = 1 - Math.pow(1 - lift, 3);
+  assertFamilyResolves(SANS, cue?.text ?? "");
+  if (!cue) return null;
 
+  const u = height / 100;
+  // One line: long lines are split upstream; what still does not fit shrinks.
+  const size = Math.min(u * 4.3, (width * 0.9) / (lineEms(cue.text) * 1.04));
+  const age = now - cue.start;
+  const pop = spring({ frame: Math.round(age * fps), fps, config: { damping: 12, stiffness: 260, mass: 0.5 } });
   return (
-    <AbsoluteFill
-      style={{
-        justifyContent: "flex-end",
-        alignItems: "center",
-        paddingBottom: height * bottomScale,
-        paddingLeft: width * 0.06,
-        paddingRight: width * 0.06,
-      }}
-    >
+    <AbsoluteFill style={{ justifyContent: "flex-end", alignItems: "center", paddingBottom: u * 24 }}>
       <div
         style={{
-          fontFamily,
-          fontSize,
-          fontWeight: 700,
-          color: "#ffffff",
+          fontFamily: SANS,
+          fontWeight: 900,
+          fontSize: size,
+          color: SUBTITLE.fill[cue.kind],
+          letterSpacing: size * 0.04,
           textAlign: "center",
-          lineHeight: 1.28,
-          letterSpacing: fontSize * 0.02,
-          textShadow: shadow,
-          opacity: eased,
-          transform: `translateY(${(1 - eased) * fontSize * 0.25}px)`,
-          // A long line wraps rather than running off the frame — the failure
-          // that made the first shipped version unreadable.
-          maxWidth: "100%",
-          wordBreak: "break-word",
-          whiteSpace: "pre-wrap",
+          lineHeight: 1.2,
+          whiteSpace: "nowrap",
+          WebkitTextStroke: `${u * 0.42}px ${SUBTITLE.rim}`,
+          paintOrder: "stroke fill",
+          textShadow: `0 ${u * 0.25}px ${u * 0.6}px rgba(0,0,0,0.55)`,
+          opacity: Math.min(1, age / 0.06),
+          transform: `scale(${0.94 + 0.06 * pop})`,
         }}
       >
-        {active.text}
+        {runs(cue.text, cue.keys).map((run, index) =>
+          run.key ? (
+            <span
+              key={index}
+              style={{
+                color: SUBTITLE.keyword,
+                display: "inline-block",
+                // A 120 ms pop as the word lands.
+                transform: `scale(${1.08 + 0.15 * Math.max(0, 1 - age / 0.12)})`,
+              }}
+            >
+              {run.text}
+            </span>
+          ) : (
+            <span key={index}>{run.text}</span>
+          ),
+        )}
       </div>
     </AbsoluteFill>
   );

package/lib/drama/skills/short-drama-edit/assets/remotion/src/font.ts

@@ -1,46 +1,56 @@
-import { continueRender, delayRender } from "remotion";
+import { useEffect, useState } from "react";
+import { cancelRender, continueRender, delayRender } from "remotion";
+import { FONT_WAIT_MS, familyIsMissing, fontLoadProblem, settleWithin } from "./rules.mjs";
+
+type Plan = { font: string; text: string }[];
 
 /**
- * Remotion captures a frame as soon as React has painted, so a font still being
- * fetched is simply absent from it. Nothing downstream reports that: the film
- * measures correct and reads wrong.
+ * Holds the first frame until every face in `plan` has the glyphs it will draw.
+ *
+ * Registered per mount rather than at module load, the way Remotion expects;
+ * bounded by `FONT_WAIT_MS`; and a face that is undeclared, fails, or never
+ * finishes cancels the render with the reason instead of shipping a fallback.
+ * Returns false until then, so nothing is drawn -- or measured -- early; the
+ * frame is released only after the ready tree has been committed.
  */
-export const waitForFonts = (): void => {
-  const handle = delayRender("等待字体就绪");
-  document.fonts.ready.then(
-    () => continueRender(handle),
-    () => continueRender(handle),
-  );
+export const useFaces = (plan: Plan): boolean => {
+  const [handle] = useState(() => delayRender("加载字体"));
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    const loads = Promise.all(plan.map((entry) => document.fonts.load(entry.font, entry.text)));
+    settleWithin(loads, FONT_WAIT_MS).then((outcome) => {
+      const problem = fontLoadProblem(plan, outcome, (font, text) => document.fonts.check(font, text));
+      if (problem) cancelRender(new Error(problem));
+      else setReady(true);
+    });
+  }, [plan]);
+  useEffect(() => {
+    if (ready) continueRender(handle);
+  }, [ready, handle]);
+  return ready;
 };
 
 /**
- * `document.fonts.ready` promises that loading finished, not that the requested
- * family exists — a missing face raises nothing, the browser substitutes, and
- * the film ships in the wrong typeface. Measuring is the only reliable test:
- * identical widths against a family that cannot exist mean nothing resolved.
+ * A second guard at draw time: measuring is the only test of what the frame
+ * actually uses, so a stack whose families all fall back stops the render.
  */
-let familyChecked = "";
+const checked = new Set<string>();
 
 export const assertFamilyResolves = (fontFamily: string, sample: string): void => {
   // Runs on every frame, so measure once per family.
-  if (!sample || familyChecked === fontFamily) return;
-  const canvas = document.createElement("canvas");
-  const context = canvas.getContext("2d");
+  if (!sample || checked.has(fontFamily)) return;
+  const context = document.createElement("canvas").getContext("2d");
   if (!context) return;
 
-  const measure = (family: string): number => {
-    context.font = `700 64px ${family}`;
-    return context.measureText(sample).width;
+  const measure = (stack: string, text: string): number => {
+    context.font = `700 64px ${stack}`;
+    return context.measureText(text).width;
   };
-  // A name no font can carry, so it always lands on the browser's last resort.
-  const fallbackOnly = measure('"__no_such_family__"');
-  const requested = measure(`${fontFamily}, "__no_such_family__"`);
-  if (requested === fallbackOnly) {
+  if (familyIsMissing(measure, fontFamily, sample)) {
     throw new Error(
-      `字幕字体 ${fontFamily} 在渲染环境里一个都没装上，` +
-        "画面会落到浏览器的兜底字体。装一款其中的字体，" +
-        "或给 render 传一个本机确实有的字体族。",
+      `字体 ${fontFamily} 在渲染环境里一个都没有，画面会落到浏览器的兜底字体。` +
+        "在 Remotion 工作区运行 npm install 装上字体包。",
     );
   }
-  familyChecked = fontFamily;
+  checked.add(fontFamily);
 };

package/lib/drama/skills/short-drama-edit/assets/remotion/src/rules.mjs

@@ -0,0 +1,188 @@
+// Decisions the overlay makes that do not need a browser. Plain JavaScript so
+// the suite's tests can import this file with Node and no build step.
+
+// ---------------------------------------------------------------- fonts
+
+/** The faces the overlay draws with, as `document.fonts.load` names them. */
+export const FACES = {
+  heavy: '900 16px "Noto Sans SC"',
+  bold: '700 16px "Noto Sans SC"',
+  mono: '800 16px "JetBrains Mono"',
+};
+
+/** Fixed words the panels draw themselves, so their glyphs are loaded too. */
+export const CHROME_TEXT = "【系统提示】【新任务】进度传说史诗稀有·";
+const DIGITS = "0123456789天:/, ";
+
+/**
+ * Which characters each face must have loaded before the first frame.
+ *
+ * The faces are split by unicode range, and a browser fetches a range only
+ * when text in it is laid out -- after the frame has been captured. Asking for
+ * every character the film will draw, up front, is what makes frame 0 look
+ * like frame 1000.
+ *
+ * @param {{ text: string }[]} cues
+ * @param {{ items: { text: string }[] }[]} screenTexts
+ */
+export const fontLoadPlan = (cues, screenTexts) => {
+  const unique = (/** @type {string} */ text) => [...new Set(Array.from(text))].join("");
+  const drawn = unique(
+    [...cues.map((cue) => cue.text), ...screenTexts.flatMap((piece) => piece.items.map((item) => item.text)),
+      CHROME_TEXT, DIGITS].join(""),
+  );
+  return [
+    { font: FACES.heavy, text: drawn },
+    { font: FACES.bold, text: drawn },
+    { font: FACES.mono, text: DIGITS },
+  ];
+};
+
+export const TIMED_OUT = "timed out";
+
+/**
+ * What is wrong with a finished load, or null when every face is ready.
+ *
+ * A face that no stylesheet declares loads as an empty list and raises
+ * nothing; the browser would substitute and the film would ship in the wrong
+ * typeface. So an empty list is a failure, as is a load that never finished.
+ *
+ * @param {{ font: string, text: string }[]} plan
+ * @param {unknown} outcome what `settleWithin(Promise.all(loads))` resolved to
+ * @param {(font: string, text: string) => boolean} check `document.fonts.check`
+ */
+export const fontLoadProblem = (plan, outcome, check) => {
+  if (outcome === TIMED_OUT) return `字体在 ${FONT_WAIT_MS / 1000} 秒内没有加载完：${plan.map((p) => p.font).join("、")}`;
+  if (outcome instanceof Error) return `字体加载失败：${outcome.message}`;
+  const loaded = /** @type {unknown[][]} */ (outcome);
+  const undeclared = plan.filter((_, index) => !loaded[index] || loaded[index].length === 0);
+  if (undeclared.length) {
+    return `没有声明这些字体（Remotion 工作区的字体包没装？）：${undeclared.map((p) => p.font).join("、")}`;
+  }
+  const pending = plan.filter((p) => !check(p.font, p.text));
+  if (pending.length) return `字体还没就绪：${pending.map((p) => p.font).join("、")}`;
+  return null;
+};
+
+export const FONT_WAIT_MS = 10000;
+
+/**
+ * Resolves with `promise`'s value, its error, or `TIMED_OUT` after `ms` --
+ * whichever comes first -- so a load that never settles cannot hold a frame
+ * until the whole render times out, and never resolves as if it had succeeded.
+ *
+ * @param {Promise<unknown>} promise
+ * @param {number} ms
+ * @returns {Promise<unknown>}
+ */
+export const settleWithin = (promise, ms) =>
+  new Promise((resolve) => {
+    const timer = setTimeout(() => resolve(TIMED_OUT), ms);
+    promise.then(
+      (value) => {
+        clearTimeout(timer);
+        resolve(value);
+      },
+      (error) => {
+        clearTimeout(timer);
+        resolve(error instanceof Error ? error : new Error(String(error)));
+      },
+    );
+  });
+
+const GENERIC_FAMILIES = new Set([
+  "serif", "sans-serif", "monospace", "cursive", "fantasy", "system-ui", "math",
+  "emoji", "fangsong", "ui-serif", "ui-sans-serif", "ui-monospace", "ui-rounded",
+]);
+
+/** The named families in a CSS font stack; generic keywords always resolve, so they prove nothing. */
+export const namedFamilies = (/** @type {string} */ stack) =>
+  stack
+    .split(",")
+    .map((part) => part.trim())
+    .filter((part) => part && !GENERIC_FAMILIES.has(part.replace(/^["']|["']$/g, "").toLowerCase()));
+
+// Latin glyphs in the probe, because a CJK-only probe cannot tell PingFang from
+// "nothing installed" on a machine whose CJK fallback is PingFang itself.
+const LATIN_PROBE = " Hamburgefonstiv 0123456789";
+// Two generic tails that never share Latin glyphs. A family that happens to
+// look like one of them still differs from the other.
+const PROBE_TAILS = ["serif", "monospace"];
+
+/**
+ * True when none of the stack's named families resolves.
+ *
+ * `measure(stack, text)` returns the rendered width of `text` in that stack.
+ * A family that resolves changes the width against at least one tail; only
+ * when the stack measures exactly like both bare tails did nothing resolve.
+ *
+ * @param {(stack: string, text: string) => number} measure
+ * @param {string} stack
+ * @param {string} sample
+ */
+export const familyIsMissing = (measure, stack, sample) => {
+  const named = namedFamilies(stack);
+  if (named.length === 0) return false;
+  const text = sample + LATIN_PROBE;
+  return PROBE_TAILS.every(
+    (tail) => measure(`${named.join(", ")}, ${tail}`, text) === measure(tail, text),
+  );
+};
+
+// ---------------------------------------------------------------- text
+
+/** Width of a line in ems: CJK and full-width forms are one, the rest a little over half. */
+export const lineEms = (/** @type {string} */ text) =>
+  Array.from(text).reduce((sum, ch) => sum + (ch.charCodeAt(0) > 0x2e7f ? 1 : 0.58), 0);
+
+/** Characters of `text` a typewriter shows `elapsed` seconds in, at 35 ms each after `delay`. */
+export const typedLength = (/** @type {number} */ elapsed, delay = 0) =>
+  Math.max(0, Math.floor((elapsed - delay) / 0.035 + 1e-9));
+
+/**
+ * `2 / 1,000,000` → { done: 2, total: 1000000, ratio }, or null when the item is
+ * not a progress reading. The ratio is clamped so the bar never overruns.
+ *
+ * @param {string} text
+ */
+export const parseProgress = (text) => {
+  const found = text.match(/^\s*([0-9][0-9,]*)\s*\/\s*([0-9][0-9,]*)\s*$/);
+  if (!found) return null;
+  const done = Number(found[1].replace(/,/g, ""));
+  const total = Number(found[2].replace(/,/g, ""));
+  if (!(total > 0)) return null;
+  return { done, total, ratio: Math.min(1, Math.max(0, done / total)) };
+};
+
+// ---------------------------------------------------------------- countdown
+
+/**
+ * Whole seconds still showing `elapsed` seconds after a countdown that read
+ * `countdown` at its first frame. Rounded up, as a timer reads: it shows its
+ * starting value for the whole first second. A pure function of the frame, so
+ * every render of the same frame shows the same digits.
+ *
+ * @param {number} countdown
+ * @param {number} elapsed
+ */
+export const secondsLeft = (countdown, elapsed) =>
+  Math.max(0, Math.ceil(countdown - elapsed - 1e-6));
+
+/** Seconds since the displayed digit last changed; drives the per-second pulse. */
+export const sinceTick = (/** @type {number} */ countdown, /** @type {number} */ elapsed) => {
+  const remaining = countdown - elapsed;
+  return Math.ceil(remaining - 1e-6) - remaining;
+};
+
+const two = (/** @type {number} */ n) => String(n).padStart(2, "0");
+
+/** `4天 23:59:58`, `01:05:00` or `00:42`, by the largest unit still in play. */
+export const formatCountdown = (/** @type {number} */ seconds) => {
+  const days = Math.floor(seconds / 86400);
+  const hours = Math.floor((seconds % 86400) / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const rest = seconds % 60;
+  if (days > 0) return `${days}天 ${two(hours)}:${two(minutes)}:${two(rest)}`;
+  if (hours > 0) return `${two(hours)}:${two(minutes)}:${two(rest)}`;
+  return `${two(minutes)}:${two(rest)}`;
+};

package/lib/drama/skills/short-drama-edit/assets/remotion/src/schema.ts

@@ -1,32 +1,45 @@
+export type CueKind = "line" | "vo" | "system";
+
 export type Cue = {
   /** Output-time seconds, measured from the rendered segments. */
   start: number;
   end: number;
-  /** The line as written in 剧本.md. Never a transcription. */
+  /** One on-screen line of a 剧本.md line in its burned form. */
   text: string;
+  /** Dialogue, an inner or narrating voice, or the system's voice -- read from 剧本.md. */
+  kind: CueKind;
+  /** Words to highlight, each occurring in `text`. */
+  keys: string[];
+};
+
+export type ScreenTextStyle = "card" | "system" | "task" | "corner";
+export type Rarity = "传说" | "史诗" | "稀有";
+
+export type ScreenText = {
+  /** Output-time seconds. */
+  start: number;
+  end: number;
+  style: ScreenTextStyle;
+  /** Rows or items, each traced to a [画面文字] line in 剧本.md. */
+  items: { text: string; rarity: Rarity | null }[];
+  /** Seconds left at `start`, already resolved for 「接续」; null when nothing counts down. */
+  countdown: number | null;
 };
 
-export type SubtitleProps = {
+export type OverlayProps = {
   cues: Cue[];
+  screenTexts: ScreenText[];
   width: number;
   height: number;
   fps: number;
   durationInSeconds: number;
-  /** Type size as a fraction of frame height, so one number survives any delivery. */
-  fontScale: number;
-  /** Distance from the bottom edge, also a fraction of frame height. */
-  bottomScale: number;
-  fontFamily: string;
 };
 
-export const defaultProps: SubtitleProps = {
+export const defaultProps: OverlayProps = {
   cues: [],
+  screenTexts: [],
   width: 1080,
   height: 1920,
-  fps: 24,
+  fps: 30,
   durationInSeconds: 1,
-  fontScale: 0.034,
-  bottomScale: 0.055,
-  fontFamily:
-    '"PingFang SC", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif',
 };

package/lib/drama/skills/short-drama-edit/assets/remotion/src/screen/Card.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
+import { COLOURS, MONO, SANS, StyleProps, TOP_U, entrance, exit, unit } from "./tokens";
+
+/**
+ * "主号 2" → name 主号, value 2; "主号 粉丝 2" adds 粉丝 as a small unit before
+ * the value. A row with one word is all name.
+ */
+const splitRow = (row: string): { name: string; unit: string; value: string } => {
+  const words = row.split(/[\s　]+/).filter(Boolean);
+  if (words.length < 2) return { name: row, unit: "", value: "" };
+  return { name: words[0], unit: words.slice(1, -1).join(" "), value: words[words.length - 1] };
+};
+
+/** A clean app dashboard card: white, rounded, a coloured dot per row, big red numbers. */
+export const Card: React.FC<StyleProps> = ({ text }) => {
+  const frame = useCurrentFrame();
+  const { fps, height, width } = useVideoConfig();
+  const u = unit(height);
+  const shown = entrance(frame, fps, 0, 15);
+  return (
+    <AbsoluteFill style={{ alignItems: "center", paddingTop: u * TOP_U.card, opacity: exit(frame, fps, text, 0.15) }}>
+      <div
+        style={{
+          width: width * 0.8,
+          background: COLOURS.cardSurface,
+          borderRadius: u * 1.6,
+          boxShadow: `0 ${u}px ${u * 4}px rgba(0,0,0,0.5)`,
+          padding: `${u * 0.7}px ${u * 2.2}px`,
+          fontFamily: SANS,
+          transform: `translateY(${(1 - shown) * u * 4}px) scale(${0.94 + 0.06 * shown})`,
+          opacity: shown,
+        }}
+      >
+        {text.items.map((item, index) => {
+          const row = splitRow(item.text);
+          return (
+            <div
+              key={index}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: u * 1.2,
+                padding: `${u * 1.1}px 0`,
+                borderTop: index ? `1px solid ${COLOURS.cardRule}` : "none",
+                opacity: entrance(frame, fps, 0.08 + index * 0.07),
+              }}
+            >
+              <span
+                style={{
+                  width: u * 3,
+                  height: u * 3,
+                  borderRadius: "50%",
+                  background: COLOURS.cardDots[index % COLOURS.cardDots.length],
+                }}
+              />
+              <span style={{ flex: 1, fontSize: u * 2.5, fontWeight: 700, color: COLOURS.cardName }}>{row.name}</span>
+              {row.unit ? (
+                <span style={{ fontSize: u * 1.7, fontWeight: 700, color: COLOURS.cardUnit, marginRight: u * 0.6 }}>
+                  {row.unit}
+                </span>
+              ) : null}
+              <span style={{ fontFamily: MONO, fontSize: u * 3.6, fontWeight: 800, color: COLOURS.cardValue }}>
+                {row.value}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};

package/lib/drama/skills/short-drama-edit/assets/remotion/src/screen/CornerChip.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
+import { formatCountdown, secondsLeft } from "../rules.mjs";
+import { Frame } from "./chrome";
+import { COLOURS, MONO, StyleProps, TOP_U, entrance, exit, unit } from "./tokens";
+
+/** The task chrome in miniature, top right: the label, and the countdown when there is one. */
+export const CornerChip: React.FC<StyleProps> = ({ text }) => {
+  const frame = useCurrentFrame();
+  const { fps, height } = useVideoConfig();
+  const u = unit(height);
+  const shown = entrance(frame, fps);
+  return (
+    <AbsoluteFill
+      style={{ alignItems: "flex-end", paddingTop: u * TOP_U.corner, paddingRight: u * 2.4, opacity: exit(frame, fps, text) }}
+    >
+      <div style={{ opacity: shown, transform: `translateX(${(1 - shown) * u * 6}px)` }}>
+        <Frame colour={COLOURS.task} width={u * 24} style={{ padding: `${u * 0.7}px ${u * 1.1}px` }}>
+          <div style={{ fontSize: u * 1.35, color: COLOURS.chipLabel, fontWeight: 700, letterSpacing: u * 0.2 }}>
+            {text.items.map((item) => item.text).join(" · ")}
+          </div>
+          {text.countdown === null ? null : (
+            <div
+              style={{
+                fontFamily: MONO,
+                fontWeight: 800,
+                fontSize: u * 2.4,
+                color: COLOURS.alarm,
+                textShadow: `0 0 ${u * 0.4}px ${COLOURS.alarm}`,
+              }}
+            >
+              {formatCountdown(secondsLeft(text.countdown, frame / fps))}
+            </div>
+          )}
+        </Frame>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/lib/drama/skills/short-drama-edit/assets/remotion/src/screen/ScreenText.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Sequence, useVideoConfig } from "remotion";
+import { ScreenTextStyle } from "../schema";
+import { assertFamilyResolves } from "../font";
+import { Card } from "./Card";
+import { CornerChip } from "./CornerChip";
+import { SystemPanel } from "./SystemPanel";
+import { TaskPanel } from "./TaskPanel";
+import { SANS, StyleProps } from "./tokens";
+
+/** One component per style; swapping a look never touches parsing or timing. */
+const STYLES: Record<ScreenTextStyle, React.FC<StyleProps>> = {
+  card: Card,
+  system: SystemPanel,
+  task: TaskPanel,
+  corner: CornerChip,
+};
+
+const Checked: React.FC<StyleProps> = ({ text }) => {
+  assertFamilyResolves(SANS, text.items.map((item) => item.text).join(""));
+  const Style = STYLES[text.style];
+  return <Style text={text} />;
+};
+
+/** Places one piece in output time; inside it, frame 0 is the piece's first frame. */
+export const ScreenTextLayer: React.FC<StyleProps> = ({ text }) => {
+  const { fps } = useVideoConfig();
+  const from = Math.round(text.start * fps);
+  const until = Math.round(text.end * fps);
+  if (until <= from) return null;
+  return (
+    <Sequence from={from} durationInFrames={until - from} layout="none">
+      <Checked text={text} />
+    </Sequence>
+  );
+};