@bendyline/squisq-cli 2.8.10 → 2.8.12

package/README.md

@@ -84,6 +84,7 @@ squisq video doc.json -o out.mp4
 | `--dither`                         | GIF dithering: `bayer`, `sierra2_4a`, or `none`                      | `sierra2_4a`              |
 | `--bayer-scale`                    | Ordered Bayer strength, 0–5                                          | 3                         |
 | `-t, --theme`                      | Squisq theme id to apply                                             | none                      |
+| `--motion`                         | Motion profile: `calm`, `documentary` or `vibrant`                   | doc's, then theme's       |
 | `--transform`                      | Transform style to apply before rendering                            | none                      |
 | `--cover-preroll`                  | Seconds of cover-slide pre-roll before the story starts              | 2                         |
 | `--width` / `--height`             | Dimension overrides in pixels — **must be even**                     | MP4 1080p; GIF 960×540    |

package/dist/{api-O34CQ6ZP.js → api-P7LOLIZT.js}

@@ -18,7 +18,7 @@ import {
   renderDocToMp4,
   resolveDashboardDimensions,
   validateDashboardImageDimensions
-} from "./chunk-4FJZYJC3.js";
+} from "./chunk-6MZC4YQV.js";
 import {
   GIF_EXPORT_DEFAULTS,
   framesToGifNative,

package/dist/api.d.ts

@@ -1,4 +1,4 @@
-import { Doc } from '@bendyline/squisq/schemas';
+import { Doc, MotionSpec } from '@bendyline/squisq/schemas';
 import { DashboardStyleId } from '@bendyline/squisq/doc';
 import { ContentContainer } from '@bendyline/squisq/storage';
 export { MemoryContentContainer } from '@bendyline/squisq/storage';
@@ -63,6 +63,8 @@ interface FrameManifest {
     width: number;
     height: number;
     captionStyle: string | null;
+    /** JSON of the motion spec the frames were captured with (`null` = doc/theme default). */
+    motion?: string | null;
     animationsEnabled: boolean;
     coverPreRoll: number;
     captureFormat: CaptureFormat;
@@ -344,6 +346,12 @@ interface RenderDocToMp4Options {
     height?: number;
     /** Caption mode to bake into the video (default: off). */
     captionStyle?: 'off' | 'standard' | 'social';
+    /**
+     * Motion profile override: `calm` (pre-profile output), `documentary` or
+     * `vibrant`, or a spec with overrides. Omitted → the doc's `motion` /
+     * frontmatter `squisq-motion`, then the theme's `renderStyle.motionProfile`.
+     */
+    motion?: MotionSpec | null;
     /** Render layer animations and block transitions (default: true). */
     animationsEnabled?: boolean;
     /**
@@ -405,6 +413,8 @@ interface RenderDocToGifOptions {
     height?: number;
     /** Caption mode to bake into the GIF (default: standard). */
     captionStyle?: 'off' | 'standard' | 'social';
+    /** Motion profile override (see {@link RenderDocToMp4Options.motion}). */
+    motion?: MotionSpec | null;
     /** Seconds of cover-slide pre-roll (default: 0). */
     coverPreRoll?: number;
     /** Render layer animations and block transitions (default: false). */

package/dist/api.js

@@ -1128,6 +1128,7 @@ async function withRenderPage(doc, container, options, fn) {
     height,
     includeAudio,
     captionStyle,
+    motion,
     animationsEnabled,
     displayMode,
     dashboard,
@@ -1188,6 +1189,7 @@ async function withRenderPage(doc, container, options, fn) {
     width,
     height,
     captionStyle,
+    motion,
     animationsEnabled,
     displayMode,
     dashboard
@@ -1198,7 +1200,14 @@ async function withRenderPage(doc, container, options, fn) {
   signal?.throwIfAborted();
   let browser;
   try {
-    browser = await chromium.launch({ headless: true });
+    browser = await chromium.launch({
+      headless: true,
+      // Keyframe animations must be sampled by the main thread: the
+      // compositor rasterises a transforming layer differently depending on
+      // whether it caught the animation running, which made mid-motion stills
+      // differ between otherwise identical renders.
+      args: ["--disable-threaded-animation"]
+    });
   } catch (err) {
     signal?.throwIfAborted();
     const detail = err instanceof Error ? err.message.split("\n")[0] : String(err);
@@ -1248,6 +1257,13 @@ Page errors:
         `The standalone player failed to boot in headless Chromium. Render API did not initialize within ${RENDER_BOOT_TIMEOUT_MS / 1e3} seconds.${errorDetail}`
       );
     }
+    signal?.throwIfAborted();
+    await page.evaluate(
+      () => Promise.race([
+        document.fonts?.ready ?? Promise.resolve(void 0),
+        new Promise((resolve2) => setTimeout(resolve2, 1e4))
+      ]).then(() => void 0)
+    );
     renderAPI = await page.evaluateHandle(() => {
       const root = document.getElementById("squisq-root");
       const player = window.SquisqPlayer;
@@ -1334,7 +1350,17 @@ async function iterateDocFrames(session, options, visit) {
   };
 }
 async function captureDocFrames(doc, container, options) {
-  const { fps, width, height, captionStyle, coverPreRoll, animationsEnabled, onProgress, signal } = options;
+  const {
+    fps,
+    width,
+    height,
+    captionStyle,
+    motion,
+    coverPreRoll,
+    animationsEnabled,
+    onProgress,
+    signal
+  } = options;
   signal?.throwIfAborted();
   resolveAppliedCoverPreRoll(coverPreRoll, true);
   const ffmpegPath = await requireFfmpeg(signal);
@@ -1343,7 +1369,16 @@ async function captureDocFrames(doc, container, options) {
     return await withRenderPage(
       doc,
       container,
-      { signal, width, height, includeAudio: true, captionStyle, animationsEnabled, onProgress },
+      {
+        signal,
+        width,
+        height,
+        includeAudio: true,
+        captionStyle,
+        motion,
+        animationsEnabled,
+        onProgress
+      },
       async (session) => {
         const loop = await iterateDocFrames(
           session,
@@ -1378,6 +1413,7 @@ async function renderDocToMp4Piped(doc, container, options, render) {
     throw new Error("resume requires framesDir so there is a spool to resume from");
   }
   const captionStyle = options.captionStyle === "off" ? void 0 : options.captionStyle;
+  const motion = options.motion ?? null;
   const animationsEnabled = options.animationsEnabled ?? true;
   const ffmpegPath = await requireFfmpeg(signal);
   const outputPath = resolvePath(options.outputPath);
@@ -1389,6 +1425,7 @@ async function renderDocToMp4Piped(doc, container, options, render) {
     width,
     height,
     captionStyle: captionStyle ?? null,
+    motion: motion === null ? null : JSON.stringify(motion),
     animationsEnabled,
     coverPreRoll,
     captureFormat
@@ -1406,7 +1443,16 @@ async function renderDocToMp4Piped(doc, container, options, render) {
     const { loop, activeSink } = await withRenderPage(
       doc,
       container,
-      { signal, width, height, includeAudio: true, captionStyle, animationsEnabled, onProgress },
+      {
+        signal,
+        width,
+        height,
+        includeAudio: true,
+        captionStyle,
+        motion,
+        animationsEnabled,
+        onProgress
+      },
       async (session) => {
         const hasCover = coverPreRoll > 0 ? await session.renderAPI.evaluate((api) => api.hasCoverBlock()) : false;
         const appliedCoverPreRoll = resolveAppliedCoverPreRoll(coverPreRoll, hasCover);
@@ -1606,6 +1652,7 @@ async function renderDocToMp4(doc, container, options) {
     width: dimensions.width,
     height: dimensions.height,
     captionStyle: options.captionStyle === "off" ? void 0 : options.captionStyle,
+    motion: options.motion ?? null,
     coverPreRoll: options.coverPreRoll ?? 0,
     animationsEnabled: options.animationsEnabled ?? true,
     onProgress: options.onProgress,
@@ -1669,6 +1716,7 @@ async function renderDocToGif(doc, container, options) {
     width,
     height,
     captionStyle: options.captionStyle === "off" ? void 0 : options.captionStyle ?? "standard",
+    motion: options.motion ?? null,
     coverPreRoll: options.coverPreRoll ?? 0,
     animationsEnabled: options.animationsEnabled ?? false,
     onProgress: options.onProgress,

package/dist/{chunk-4FJZYJC3.js → chunk-6MZC4YQV.js}

@@ -542,7 +542,7 @@ function mp4Format() {
       const animationsEnabled = typeof mp4Opts.animationsEnabled === "boolean" ? mp4Opts.animationsEnabled : MP4_DEFAULTS.animationsEnabled;
       const outputPath = join2(tmpdir(), `squisq-mp4-${randomBytes(8).toString("hex")}.mp4`);
       try {
-        const { renderDocToMp4: renderDocToMp42 } = await import("./api-O34CQ6ZP.js");
+        const { renderDocToMp4: renderDocToMp42 } = await import("./api-P7LOLIZT.js");
         await renderDocToMp42(input.doc, input.container, {
           outputPath,
           fps,
@@ -583,7 +583,7 @@ function gifFormat() {
       const defaultHeight = portrait ? GIF_DEFAULTS.width : GIF_DEFAULTS.height;
       const outputPath = join2(tmpdir(), `squisq-gif-${randomBytes(8).toString("hex")}.gif`);
       try {
-        const { renderDocToGif: renderDocToGif2 } = await import("./api-O34CQ6ZP.js");
+        const { renderDocToGif: renderDocToGif2 } = await import("./api-P7LOLIZT.js");
         const result = await renderDocToGif2(input.doc, input.container, {
           outputPath,
           fps: typeof gifOpts.fps === "number" ? gifOpts.fps : GIF_DEFAULTS.fps,
@@ -626,7 +626,7 @@ function pngFormat() {
     async exportDoc(input, options) {
       options.signal?.throwIfAborted();
       const pngOpts = options.formatOptions?.png ?? {};
-      const { renderDocToDashboardPng: renderDocToDashboardPng2 } = await import("./api-O34CQ6ZP.js");
+      const { renderDocToDashboardPng: renderDocToDashboardPng2 } = await import("./api-P7LOLIZT.js");
       const result = await renderDocToDashboardPng2(input.doc, input.container, {
         resolution: pngOpts.resolution,
         width: pngOpts.width,
@@ -1125,6 +1125,7 @@ async function withRenderPage(doc, container, options, fn) {
     height,
     includeAudio,
     captionStyle,
+    motion,
     animationsEnabled,
     displayMode,
     dashboard,
@@ -1185,6 +1186,7 @@ async function withRenderPage(doc, container, options, fn) {
     width,
     height,
     captionStyle,
+    motion,
     animationsEnabled,
     displayMode,
     dashboard
@@ -1195,7 +1197,14 @@ async function withRenderPage(doc, container, options, fn) {
   signal?.throwIfAborted();
   let browser;
   try {
-    browser = await chromium.launch({ headless: true });
+    browser = await chromium.launch({
+      headless: true,
+      // Keyframe animations must be sampled by the main thread: the
+      // compositor rasterises a transforming layer differently depending on
+      // whether it caught the animation running, which made mid-motion stills
+      // differ between otherwise identical renders.
+      args: ["--disable-threaded-animation"]
+    });
   } catch (err) {
     signal?.throwIfAborted();
     const detail = err instanceof Error ? err.message.split("\n")[0] : String(err);
@@ -1245,6 +1254,13 @@ Page errors:
         `The standalone player failed to boot in headless Chromium. Render API did not initialize within ${RENDER_BOOT_TIMEOUT_MS / 1e3} seconds.${errorDetail}`
       );
     }
+    signal?.throwIfAborted();
+    await page.evaluate(
+      () => Promise.race([
+        document.fonts?.ready ?? Promise.resolve(void 0),
+        new Promise((resolve2) => setTimeout(resolve2, 1e4))
+      ]).then(() => void 0)
+    );
     renderAPI = await page.evaluateHandle(() => {
       const root = document.getElementById("squisq-root");
       const player = window.SquisqPlayer;
@@ -1331,7 +1347,17 @@ async function iterateDocFrames(session, options, visit) {
   };
 }
 async function captureDocFrames(doc, container, options) {
-  const { fps, width, height, captionStyle, coverPreRoll, animationsEnabled, onProgress, signal } = options;
+  const {
+    fps,
+    width,
+    height,
+    captionStyle,
+    motion,
+    coverPreRoll,
+    animationsEnabled,
+    onProgress,
+    signal
+  } = options;
   signal?.throwIfAborted();
   resolveAppliedCoverPreRoll(coverPreRoll, true);
   const ffmpegPath = await requireFfmpeg(signal);
@@ -1340,7 +1366,16 @@ async function captureDocFrames(doc, container, options) {
     return await withRenderPage(
       doc,
       container,
-      { signal, width, height, includeAudio: true, captionStyle, animationsEnabled, onProgress },
+      {
+        signal,
+        width,
+        height,
+        includeAudio: true,
+        captionStyle,
+        motion,
+        animationsEnabled,
+        onProgress
+      },
       async (session) => {
         const loop = await iterateDocFrames(
           session,
@@ -1375,6 +1410,7 @@ async function renderDocToMp4Piped(doc, container, options, render) {
     throw new Error("resume requires framesDir so there is a spool to resume from");
   }
   const captionStyle = options.captionStyle === "off" ? void 0 : options.captionStyle;
+  const motion = options.motion ?? null;
   const animationsEnabled = options.animationsEnabled ?? true;
   const ffmpegPath = await requireFfmpeg(signal);
   const outputPath = resolvePath(options.outputPath);
@@ -1386,6 +1422,7 @@ async function renderDocToMp4Piped(doc, container, options, render) {
     width,
     height,
     captionStyle: captionStyle ?? null,
+    motion: motion === null ? null : JSON.stringify(motion),
     animationsEnabled,
     coverPreRoll,
     captureFormat
@@ -1403,7 +1440,16 @@ async function renderDocToMp4Piped(doc, container, options, render) {
     const { loop, activeSink } = await withRenderPage(
       doc,
       container,
-      { signal, width, height, includeAudio: true, captionStyle, animationsEnabled, onProgress },
+      {
+        signal,
+        width,
+        height,
+        includeAudio: true,
+        captionStyle,
+        motion,
+        animationsEnabled,
+        onProgress
+      },
       async (session) => {
         const hasCover = coverPreRoll > 0 ? await session.renderAPI.evaluate((api) => api.hasCoverBlock()) : false;
         const appliedCoverPreRoll = resolveAppliedCoverPreRoll(coverPreRoll, hasCover);
@@ -1603,6 +1649,7 @@ async function renderDocToMp4(doc, container, options) {
     width: dimensions.width,
     height: dimensions.height,
     captionStyle: options.captionStyle === "off" ? void 0 : options.captionStyle,
+    motion: options.motion ?? null,
     coverPreRoll: options.coverPreRoll ?? 0,
     animationsEnabled: options.animationsEnabled ?? true,
     onProgress: options.onProgress,
@@ -1666,6 +1713,7 @@ async function renderDocToGif(doc, container, options) {
     width,
     height,
     captionStyle: options.captionStyle === "off" ? void 0 : options.captionStyle ?? "standard",
+    motion: options.motion ?? null,
     coverPreRoll: options.coverPreRoll ?? 0,
     animationsEnabled: options.animationsEnabled ?? false,
     onProgress: options.onProgress,

package/dist/index.js

@@ -9,7 +9,7 @@ import {
   renderDocToDashboardPng,
   renderDocToGif,
   renderDocToMp4
-} from "./chunk-4FJZYJC3.js";
+} from "./chunk-6MZC4YQV.js";
 import "./chunk-Y5XKUWJ5.js";
 
 // src/index.ts
@@ -319,6 +319,7 @@ import { validateVideoExportOptions } from "@bendyline/squisq-video";
 var VALID_QUALITIES = ["draft", "normal", "high"];
 var VALID_ORIENTATIONS = ["landscape", "portrait"];
 var VALID_CAPTIONS = ["off", "standard", "social"];
+var VALID_MOTION = ["calm", "documentary", "vibrant"];
 var VALID_FORMATS2 = ["mp4", "gif"];
 var VALID_GIF_DITHERS = ["bayer", "sierra2_4a", "none"];
 var VALID_FRAME_TRANSPORTS = ["pipe", "memory"];
@@ -338,6 +339,9 @@ function registerVideoCommand(program2) {
     "--no-auto-templates",
     "Disable content-aware template auto-picking for unannotated headings"
   ).option("-t, --theme <id>", "Squisq theme ID to apply (e.g., documentary, cinematic, bold)").option(
+    "--motion <profile>",
+    `Motion profile: ${VALID_MOTION.join(", ")} (default: the doc's, then the theme's)`
+  ).option(
     "--transform <style>",
     "Transform style to apply before rendering (e.g., documentary, magazine, minimal)"
   ).option(
@@ -415,6 +419,10 @@ async function runVideo(inputPath, opts) {
   if (!VALID_CAPTIONS.includes(captions)) {
     throw new Error(`Invalid captions "${captions}". Valid: ${VALID_CAPTIONS.join(", ")}`);
   }
+  const motion = opts.motion;
+  if (motion !== void 0 && !VALID_MOTION.includes(motion)) {
+    throw new Error(`Invalid motion "${motion}". Valid: ${VALID_MOTION.join(", ")}`);
+  }
   const coverPreRoll = Number(opts.coverPreroll ?? "2");
   if (!Number.isFinite(coverPreRoll) || coverPreRoll < 0) {
     throw new Error("Cover pre-roll must be a number of seconds >= 0");
@@ -498,7 +506,7 @@ async function runVideo(inputPath, opts) {
   if (opts.theme) {
     doc = { ...doc, themeId: opts.theme };
   }
-  const motionLabel = animationsEnabled ? "animations on" : "animations off";
+  const motionLabel = animationsEnabled ? `animations on${motion ? ` (${motion})` : ""}` : "animations off";
   const qualityLabel = outputFormat === "mp4" ? `, quality: ${quality}, transport: ${frameTransport}` : "";
   console.error(
     `Rendering ${outputFormat.toUpperCase()}: ${fps} fps${qualityLabel}, orientation: ${orientation}, captions: ${captions}, ${motionLabel}`
@@ -510,6 +518,7 @@ async function runVideo(inputPath, opts) {
     width,
     height,
     captionStyle: captions,
+    motion,
     coverPreRoll,
     animationsEnabled,
     onProgress: (phase, percent) => writeProgress(phase, percent, 100)