@sprid/cli 1.0.0 → 1.0.4

package/src/post/recipes/screen.mjs

@@ -23,6 +23,7 @@ import {
   kit, readJson, resolveDevice, runScript, simkit, sleep, startRecording, writeJson,
 } from "../screen/sim.mjs";
 import { settle as settleFor } from "../screen/sim.mjs";
+import { captionSafeRect } from "../rules/video-safe-zones.mjs";
 import { layout } from "../screen/captions.mjs";
 import { hasBaguette, openInput } from "../screen/input.mjs";
 import {
@@ -220,7 +221,7 @@ export async function buildScreen({ spec, script, root, out, tmp, recut = false,
     : FONT_CANDIDATES.find(existsSync);
   const rendered = renderCaptions(cards, {
     simkitBin: bin, dir: join(tmp, "captions"), fontFile,
-    size: cfg.capSize, width: Math.round(W * 0.88), pill: cfg.pill ?? 0,
+    size: cfg.capSize, width: Math.floor(captionSafeRect(W, H, W / 45 + Math.abs(cfg.drift) * 1.6).width), pill: cfg.pill ?? 0,
     ...(cfg.stroke != null ? { stroke: cfg.stroke } : {}),
   });
 

package/src/post/rules/video-safe-zones.d.mts

@@ -0,0 +1,6 @@
+export interface SafeZoneBand { readonly key: string; readonly left: number; readonly top: number; readonly width: number; readonly height: number; }
+export interface VideoRect { x: number; y: number; width: number; height: number; }
+export const SAFE_ZONE_BANDS: readonly SafeZoneBand[];
+export function captionSafeRect(width: number, height: number, padding?: number): VideoRect;
+export function overlapsSafeZones(rect: VideoRect, width: number, height: number): boolean;
+export function captionPlacement(card: {w: number; h: number}, width: number, height: number, bottom: number, motion?: number): {x: number; y: number};

package/src/post/rules/video-safe-zones.mjs

@@ -0,0 +1,27 @@
+/** Approximate TikTok/Reels interface bands. Guides, never a crop or guarantee. */
+export const SAFE_ZONE_BANDS = Object.freeze([
+  Object.freeze({ key: "caption", left: 0, top: 0.8, width: 1, height: 0.2 }),
+  Object.freeze({ key: "rail", left: 0.86, top: 0.38, width: 0.14, height: 0.42 }),
+]);
+
+/** Conservative subtitle rectangle left of the rail and above the bottom band. */
+export function captionSafeRect(width, height, padding = width / 45) {
+  if (![width, height, padding].every(Number.isFinite) || width <= 0 || height <= 0 || padding < 0) throw new Error("Invalid video dimensions");
+  const bottom = SAFE_ZONE_BANDS.find(b => b.key === "caption");
+  const rail = SAFE_ZONE_BANDS.find(b => b.key === "rail");
+  const rect = { x: padding, y: rail.top * height + padding, width: rail.left * width - 2 * padding, height: (bottom.top - rail.top) * height - 2 * padding };
+  if (rect.width <= 0 || rect.height <= 0) throw new Error("Safe zone has no room for captions");
+  return rect;
+}
+
+/** Rectangle includes every visible pixel, including text stroke or a caption box. */
+export function overlapsSafeZones(rect, width, height) {
+  return SAFE_ZONE_BANDS.some(b => rect.x < (b.left + b.width) * width && rect.x + rect.width > b.left * width && rect.y < (b.top + b.height) * height && rect.y + rect.height > b.top * height);
+}
+
+/** Place a rendered caption card safely, reserving room for its rise animation. */
+export function captionPlacement(card, width, height, bottom, motion = 0) {
+  const safe = captionSafeRect(width, height, width / 45 + motion);
+  if (![card.w, card.h, bottom, motion].every(Number.isFinite) || card.w <= 0 || card.h <= 0 || motion < 0 || card.w > safe.width || card.h > safe.height - 14) throw new Error("Caption exceeds safe zone; shorten the phrase or reduce its size");
+  return { x: safe.x + (safe.width - card.w) / 2, y: Math.max(safe.y, Math.min(bottom - card.h, safe.y + safe.height - card.h - 14)) };
+}

package/src/post/screen/compose.mjs

@@ -14,6 +14,7 @@
 // Nothing in it is clever. The two places that cost a rebuild if you get them
 // wrong are marked.
 
+import { captionSafeRect, captionPlacement } from "../rules/video-safe-zones.mjs";
 import { spawnSync } from "node:child_process";
 import { existsSync, mkdirSync } from "node:fs";
 import { dirname, join } from "node:path";
@@ -89,7 +90,7 @@ export function solveClock(plateaus, wallStartMs, wallEndMs) {
 // the caption cards
 // ---------------------------------------------------------------------------
 
-export function renderCaptions(cards, { simkitBin, dir, fontFile, size = 82, width = 940, stroke = 5, pill = 0, color = "ffffff" }) {
+export function renderCaptions(cards, { simkitBin, dir, fontFile, size = 82, width = captionSafeRect(W, H).width, stroke = 5, pill = 0, color = "ffffff" }) {
   mkdirSync(dir, { recursive: true });
   return cards.map((c, i) => {
     const out = join(dir, `cap-${String(i).padStart(3, "0")}.png`);
@@ -137,8 +138,9 @@ function wrap(text, max = 22) {
  */
 function driftExpr(amp) {
   const a = amp;
-  if (!a) return { x: "0", y: "0" };
+  if (!a) return { x: "0", y: "0", margin: 0 };
   return {
+    margin: Math.abs(a) * 1.6,
     x: `(${n(a * 1.0)}*sin(2*PI*t/7.3)+${n(a * 0.6)}*sin(2*PI*t/4.1+1.1))`,
     y: `(${n(a * 0.8)}*sin(2*PI*t/5.9+0.4)+${n(a * 0.5)}*sin(2*PI*t/3.3))`,
   };
@@ -224,8 +226,9 @@ export function buildGraph({ cards, gestures, geom, drift, videoOffsetMs, dotSiz
     if (t1 <= 0) { input += 1; continue; }
     // The pop: 14 pixels of rise over the first 90ms. A scale-up would be
     // truer to the platform and costs a second scaled copy of every card.
+    const placement = captionPlacement(c, W, H, capY, drift.margin ?? 0);
     const rise = `14*max(0,1-(t-${n(t0)})/0.09)`;
-    parts.push(`[${last}][${input}:v]overlay=x='(W-w)/2+${drift.x}':y='${n(capY - c.h, 1)}+${rise}+${drift.y}':enable='between(t,${n(Math.max(0, t0))},${n(t1)})'[v${input}]`);
+    parts.push(`[${last}][${input}:v]overlay=x='${n(placement.x, 1)}+${drift.x}':y='${n(placement.y, 1)}+${rise}+${drift.y}':enable='between(t,${n(Math.max(0, t0))},${n(t1)})'[v${input}]`);
     last = `v${input}`;
     input += 1;
   }