dsh-drawai 0.4.1 → 0.4.3

package/lib/motion/shotcraft/upstream/assets/lib/VerticalTicker.tsx

@@ -1,129 +1,129 @@
-// origin: vibe-motion/skills remotion-3d-ticker assets/VerticalTicker.tsx
-//         (2026-07-13 扫描，2026-07-15 吸收；改动：items 泛化为 ReactNode、
-//          遮罩高度/透视角/scale/列宽/间距提为 props)
-import React from 'react';
-import { AbsoluteFill, useCurrentFrame, useVideoConfig } from 'remotion';
-
-export interface TickerColumn {
-  /** Column content — any ReactNode (screenshot-slice divs, <Img>, text cards…) */
-  items: React.ReactNode[];
-  /** Seconds for one full loop (one copy of items scrolling its own height) */
-  durationInSeconds: number;
-  /** -1 scrolls up, 1 scrolls down */
-  direction: -1 | 1;
-}
-
-export interface VerticalTickerProps {
-  columns: TickerColumn[];
-  /** Background color, also used by the top/bottom fade masks */
-  backgroundColor?: string;
-  /** Height of each fade mask in px */
-  maskHeight?: number;
-  /** rotateX tilt of the whole wall, degrees */
-  tiltDeg?: number;
-  /** CSS perspective distance in px */
-  perspective?: number;
-  /** Overall scale of the tilted wall (compensates perspective shrink) */
-  scale?: number;
-  /** Column width in px */
-  columnWidth?: number;
-  /** Gap between columns and between items within a column, px */
-  gap?: number;
-}
-
-/**
- * 3D 透视多列无限纵向滚动墙。每列 [...items, ...items] 翻倍 +
- * progress 取模 translateY 0→-50%：前半段恰好滚出视口时归零，
- * 后半段与前半段像素级一致，循环点不可见。
- * 接缝无痕的前提：-50% 必须恰等于单副本周期（内容高 + n 个 gap）。
- * 源实现用 flex gap（翻倍后只有 2n-1 个 gap）会差 gap/2 px 跳一下，
- * 这里改为每项 marginBottom = gap，容器高恰为周期两倍。
- */
-export const VerticalTicker: React.FC<VerticalTickerProps> = ({
-  columns,
-  backgroundColor = '#000',
-  maskHeight = 200,
-  tiltDeg = 20,
-  perspective = 1000,
-  scale = 1.2,
-  columnWidth = 400,
-  gap = 30,
-}) => {
-  return (
-    <AbsoluteFill style={{ backgroundColor, overflow: 'hidden' }}>
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          display: 'flex',
-          justifyContent: 'center',
-          gap,
-          transform: `perspective(${perspective}px) rotateX(${tiltDeg}deg) scale(${scale})`,
-          transformOrigin: 'center center',
-        }}
-      >
-        {columns.map((col, idx) => (
-          <Column key={idx} {...col} width={columnWidth} gap={gap} />
-        ))}
-      </div>
-      {/* Fade masks sit above the wall so rows enter/exit softly */}
-      <div
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          height: maskHeight,
-          background: `linear-gradient(to bottom, ${backgroundColor} 0%, transparent 100%)`,
-          zIndex: 10,
-        }}
-      />
-      <div
-        style={{
-          position: 'absolute',
-          bottom: 0,
-          left: 0,
-          right: 0,
-          height: maskHeight,
-          background: `linear-gradient(to top, ${backgroundColor} 0%, transparent 100%)`,
-          zIndex: 10,
-        }}
-      />
-    </AbsoluteFill>
-  );
-};
-
-const Column: React.FC<TickerColumn & { width: number; gap: number }> = ({
-  items,
-  durationInSeconds,
-  direction,
-  width,
-  gap,
-}) => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-
-  const loopFrames = durationInSeconds * fps;
-  const progress = (frame % loopFrames) / loopFrames;
-  // up: 0 → -50%; down: -50% → 0（起点即偏移半程，首帧无空白）
-  const translateY = direction === -1 ? progress * -50 : -50 + progress * 50;
-
-  return (
-    <div style={{ width, height: '100%', display: 'flex', flexDirection: 'column' }}>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          transform: `translateY(${translateY}%)`,
-          willChange: 'transform',
-        }}
-      >
-        {[...items, ...items].map((node, i) => (
-          <div key={i} style={{ marginBottom: gap }}>
-            {node}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
+// origin: vibe-motion/skills remotion-3d-ticker assets/VerticalTicker.tsx
+//         (2026-07-13 扫描，2026-07-15 吸收；改动：items 泛化为 ReactNode、
+//          遮罩高度/透视角/scale/列宽/间距提为 props)
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, useVideoConfig } from 'remotion';
+
+export interface TickerColumn {
+  /** Column content — any ReactNode (screenshot-slice divs, <Img>, text cards…) */
+  items: React.ReactNode[];
+  /** Seconds for one full loop (one copy of items scrolling its own height) */
+  durationInSeconds: number;
+  /** -1 scrolls up, 1 scrolls down */
+  direction: -1 | 1;
+}
+
+export interface VerticalTickerProps {
+  columns: TickerColumn[];
+  /** Background color, also used by the top/bottom fade masks */
+  backgroundColor?: string;
+  /** Height of each fade mask in px */
+  maskHeight?: number;
+  /** rotateX tilt of the whole wall, degrees */
+  tiltDeg?: number;
+  /** CSS perspective distance in px */
+  perspective?: number;
+  /** Overall scale of the tilted wall (compensates perspective shrink) */
+  scale?: number;
+  /** Column width in px */
+  columnWidth?: number;
+  /** Gap between columns and between items within a column, px */
+  gap?: number;
+}
+
+/**
+ * 3D 透视多列无限纵向滚动墙。每列 [...items, ...items] 翻倍 +
+ * progress 取模 translateY 0→-50%：前半段恰好滚出视口时归零，
+ * 后半段与前半段像素级一致，循环点不可见。
+ * 接缝无痕的前提：-50% 必须恰等于单副本周期（内容高 + n 个 gap）。
+ * 源实现用 flex gap（翻倍后只有 2n-1 个 gap）会差 gap/2 px 跳一下，
+ * 这里改为每项 marginBottom = gap，容器高恰为周期两倍。
+ */
+export const VerticalTicker: React.FC<VerticalTickerProps> = ({
+  columns,
+  backgroundColor = '#000',
+  maskHeight = 200,
+  tiltDeg = 20,
+  perspective = 1000,
+  scale = 1.2,
+  columnWidth = 400,
+  gap = 30,
+}) => {
+  return (
+    <AbsoluteFill style={{ backgroundColor, overflow: 'hidden' }}>
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          gap,
+          transform: `perspective(${perspective}px) rotateX(${tiltDeg}deg) scale(${scale})`,
+          transformOrigin: 'center center',
+        }}
+      >
+        {columns.map((col, idx) => (
+          <Column key={idx} {...col} width={columnWidth} gap={gap} />
+        ))}
+      </div>
+      {/* Fade masks sit above the wall so rows enter/exit softly */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          height: maskHeight,
+          background: `linear-gradient(to bottom, ${backgroundColor} 0%, transparent 100%)`,
+          zIndex: 10,
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: maskHeight,
+          background: `linear-gradient(to top, ${backgroundColor} 0%, transparent 100%)`,
+          zIndex: 10,
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+const Column: React.FC<TickerColumn & { width: number; gap: number }> = ({
+  items,
+  durationInSeconds,
+  direction,
+  width,
+  gap,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const loopFrames = durationInSeconds * fps;
+  const progress = (frame % loopFrames) / loopFrames;
+  // up: 0 → -50%; down: -50% → 0（起点即偏移半程，首帧无空白）
+  const translateY = direction === -1 ? progress * -50 : -50 + progress * 50;
+
+  return (
+    <div style={{ width, height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          transform: `translateY(${translateY}%)`,
+          willChange: 'transform',
+        }}
+      >
+        {[...items, ...items].map((node, i) => (
+          <div key={i} style={{ marginBottom: gap }}>
+            {node}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/lib/motion/shotcraft/upstream/assets/lib/helpers/camera.tsx

@@ -1,75 +1,75 @@
-// origin: 模板片源仓库 helpers
-import { useThree, useFrame } from '@react-three/fiber';
-import { useCurrentFrame, interpolate, Easing } from 'remotion';
-import * as THREE from 'three';
-import { handheld } from './shake';
-
-export type CamKeyframe = {
-  frame: number;
-  pos: [number, number, number];
-  look: [number, number, number];
-  fov?: number;
-};
-
-const easeInOut = Easing.bezier(0.4, 0.0, 0.2, 1.0);
-
-/**
- * Animates the default camera through keyframes (frames relative to the
- * enclosing Sequence). Position/look are eased segment by segment.
- * `shake` adds deterministic hand-held drift (world units).
- */
-export const Rig: React.FC<{
-  keyframes: CamKeyframe[];
-  easing?: (t: number) => number;
-  shake?: number;
-}> = ({ keyframes, easing = easeInOut, shake = 0 }) => {
-  const frame = useCurrentFrame();
-  const { camera } = useThree();
-
-  let a = keyframes[0];
-  let b = keyframes[keyframes.length - 1];
-  for (let i = 0; i < keyframes.length - 1; i++) {
-    if (frame >= keyframes[i].frame && frame <= keyframes[i + 1].frame) {
-      a = keyframes[i];
-      b = keyframes[i + 1];
-      break;
-    }
-  }
-  const t =
-    a.frame === b.frame
-      ? 1
-      : interpolate(frame, [a.frame, b.frame], [0, 1], {
-          extrapolateLeft: 'clamp',
-          extrapolateRight: 'clamp',
-          easing,
-        });
-
-  const lerp3 = (p: [number, number, number], q: [number, number, number]): THREE.Vector3 =>
-    new THREE.Vector3(
-      p[0] + (q[0] - p[0]) * t,
-      p[1] + (q[1] - p[1]) * t,
-      p[2] + (q[2] - p[2]) * t
-    );
-
-  const pos = lerp3(a.pos, b.pos);
-  const look = lerp3(a.look, b.look);
-  const fov = (a.fov ?? 36) + ((b.fov ?? 36) - (a.fov ?? 36)) * t;
-
-  useFrame(() => {
-    if (shake > 0) {
-      const [dx, dy] = handheld(frame, shake);
-      pos.x += dx;
-      pos.y += dy;
-      look.x += dx * 0.6;
-      look.y += dy * 0.6;
-    }
-    camera.position.copy(pos);
-    camera.lookAt(look);
-    if (camera instanceof THREE.PerspectiveCamera) {
-      camera.fov = fov;
-      camera.updateProjectionMatrix();
-    }
-  });
-
-  return null;
-};
+// origin: 模板片源仓库 helpers
+import { useThree, useFrame } from '@react-three/fiber';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import * as THREE from 'three';
+import { handheld } from './shake';
+
+export type CamKeyframe = {
+  frame: number;
+  pos: [number, number, number];
+  look: [number, number, number];
+  fov?: number;
+};
+
+const easeInOut = Easing.bezier(0.4, 0.0, 0.2, 1.0);
+
+/**
+ * Animates the default camera through keyframes (frames relative to the
+ * enclosing Sequence). Position/look are eased segment by segment.
+ * `shake` adds deterministic hand-held drift (world units).
+ */
+export const Rig: React.FC<{
+  keyframes: CamKeyframe[];
+  easing?: (t: number) => number;
+  shake?: number;
+}> = ({ keyframes, easing = easeInOut, shake = 0 }) => {
+  const frame = useCurrentFrame();
+  const { camera } = useThree();
+
+  let a = keyframes[0];
+  let b = keyframes[keyframes.length - 1];
+  for (let i = 0; i < keyframes.length - 1; i++) {
+    if (frame >= keyframes[i].frame && frame <= keyframes[i + 1].frame) {
+      a = keyframes[i];
+      b = keyframes[i + 1];
+      break;
+    }
+  }
+  const t =
+    a.frame === b.frame
+      ? 1
+      : interpolate(frame, [a.frame, b.frame], [0, 1], {
+          extrapolateLeft: 'clamp',
+          extrapolateRight: 'clamp',
+          easing,
+        });
+
+  const lerp3 = (p: [number, number, number], q: [number, number, number]): THREE.Vector3 =>
+    new THREE.Vector3(
+      p[0] + (q[0] - p[0]) * t,
+      p[1] + (q[1] - p[1]) * t,
+      p[2] + (q[2] - p[2]) * t
+    );
+
+  const pos = lerp3(a.pos, b.pos);
+  const look = lerp3(a.look, b.look);
+  const fov = (a.fov ?? 36) + ((b.fov ?? 36) - (a.fov ?? 36)) * t;
+
+  useFrame(() => {
+    if (shake > 0) {
+      const [dx, dy] = handheld(frame, shake);
+      pos.x += dx;
+      pos.y += dy;
+      look.x += dx * 0.6;
+      look.y += dy * 0.6;
+    }
+    camera.position.copy(pos);
+    camera.lookAt(look);
+    if (camera instanceof THREE.PerspectiveCamera) {
+      camera.fov = fov;
+      camera.updateProjectionMatrix();
+    }
+  });
+
+  return null;
+};

package/lib/motion/shotcraft/upstream/assets/lib/helpers/motion.ts

@@ -1,40 +1,40 @@
-// origin: disney-animation-rule-skill implementation-patterns (scanned 2026-07-13, absorbed 2026-07-15)
-
-/**
- * Motion-derived signal: sample a pure trajectory at frame±dt (central
- * difference) to get velocity, speed and heading. Drive stretch, smear,
- * blur or shake intensity from `speed`; normalize amplitude by subject
- * size. Works on any pure `posAt` — no per-frame state.
- */
-export const velocityAt = (
-  posAt: (f: number) => { x: number; y: number },
-  frame: number,
-  dt = 0.5,
-): { vx: number; vy: number; speed: number; direction: number } => {
-  const before = posAt(frame - dt);
-  const after = posAt(frame + dt);
-  const vx = (after.x - before.x) / (2 * dt);
-  const vy = (after.y - before.y) / (2 * dt);
-  return { vx, vy, speed: Math.hypot(vx, vy), direction: Math.atan2(vy, vx) };
-};
-
-/**
- * Follow-through without stateful simulation: a trailing layer is just the
- * primary state sampled at `frame − delayFrames`. Build drag hierarchies by
- * giving each attachment a larger delay and a smaller amplitude (shadow 2f,
- * ghost 4f, …). Never accumulate state across rendered frames — every layer
- * stays a pure function of the frame number.
- */
-export const lagged = <T>(
-  stateAt: (f: number) => T,
-  frame: number,
-  delayFrames: number,
-): T => stateAt(frame - delayFrames);
-
-/**
- * Closed-form damped oscillation for recoil/settle tails, t in frames from
- * impact. Returns a signed offset factor decaying to 0; scale by the desired
- * peak amplitude. freq in cycles/frame (~0.1), damping per frame (~0.15).
- */
-export const dampedSettle = (t: number, freq: number, damping: number): number =>
-  t <= 0 ? 0 : Math.exp(-damping * t) * Math.sin(2 * Math.PI * freq * t);
+// origin: disney-animation-rule-skill implementation-patterns (scanned 2026-07-13, absorbed 2026-07-15)
+
+/**
+ * Motion-derived signal: sample a pure trajectory at frame±dt (central
+ * difference) to get velocity, speed and heading. Drive stretch, smear,
+ * blur or shake intensity from `speed`; normalize amplitude by subject
+ * size. Works on any pure `posAt` — no per-frame state.
+ */
+export const velocityAt = (
+  posAt: (f: number) => { x: number; y: number },
+  frame: number,
+  dt = 0.5,
+): { vx: number; vy: number; speed: number; direction: number } => {
+  const before = posAt(frame - dt);
+  const after = posAt(frame + dt);
+  const vx = (after.x - before.x) / (2 * dt);
+  const vy = (after.y - before.y) / (2 * dt);
+  return { vx, vy, speed: Math.hypot(vx, vy), direction: Math.atan2(vy, vx) };
+};
+
+/**
+ * Follow-through without stateful simulation: a trailing layer is just the
+ * primary state sampled at `frame − delayFrames`. Build drag hierarchies by
+ * giving each attachment a larger delay and a smaller amplitude (shadow 2f,
+ * ghost 4f, …). Never accumulate state across rendered frames — every layer
+ * stays a pure function of the frame number.
+ */
+export const lagged = <T>(
+  stateAt: (f: number) => T,
+  frame: number,
+  delayFrames: number,
+): T => stateAt(frame - delayFrames);
+
+/**
+ * Closed-form damped oscillation for recoil/settle tails, t in frames from
+ * impact. Returns a signed offset factor decaying to 0; scale by the desired
+ * peak amplitude. freq in cycles/frame (~0.1), damping per frame (~0.15).
+ */
+export const dampedSettle = (t: number, freq: number, damping: number): number =>
+  t <= 0 ? 0 : Math.exp(-damping * t) * Math.sin(2 * Math.PI * freq * t);

package/lib/motion/shotcraft/upstream/assets/lib/helpers/rand.ts

@@ -1,11 +1,11 @@
-// origin: 模板片源仓库 helpers
-/** Deterministic PRNG — same seed always yields the same sequence. */
-export const mulberry32 = (seed: number) => {
-  let a = seed | 0;
-  return () => {
-    a = (a + 0x6d2b79f5) | 0;
-    let t = Math.imul(a ^ (a >>> 15), 1 | a);
-    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
-    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-  };
-};
+// origin: 模板片源仓库 helpers
+/** Deterministic PRNG — same seed always yields the same sequence. */
+export const mulberry32 = (seed: number) => {
+  let a = seed | 0;
+  return () => {
+    a = (a + 0x6d2b79f5) | 0;
+    let t = Math.imul(a ^ (a >>> 15), 1 | a);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+};

package/lib/motion/shotcraft/upstream/assets/lib/helpers/shake.ts

@@ -1,10 +1,10 @@
-// origin: 模板片源仓库 helpers
-/**
- * Deterministic hand-held camera noise. Layered sines at incommensurate
- * frequencies read as organic drift; amplitude in world units.
- */
-export const handheld = (frame: number, amp = 0.012): [number, number, number] => [
-  amp * (Math.sin(frame * 0.31) + 0.6 * Math.sin(frame * 0.83 + 1.7)),
-  amp * (Math.sin(frame * 0.47 + 0.9) + 0.5 * Math.sin(frame * 1.13 + 3.1)),
-  0,
-];
+// origin: 模板片源仓库 helpers
+/**
+ * Deterministic hand-held camera noise. Layered sines at incommensurate
+ * frequencies read as organic drift; amplitude in world units.
+ */
+export const handheld = (frame: number, amp = 0.012): [number, number, number] => [
+  amp * (Math.sin(frame * 0.31) + 0.6 * Math.sin(frame * 0.83 + 1.7)),
+  amp * (Math.sin(frame * 0.47 + 0.9) + 0.5 * Math.sin(frame * 1.13 + 3.1)),
+  0,
+];

package/lib/motion/shotcraft/upstream/assets/scripts/build-readme-cover.mjs

@@ -1,49 +1,49 @@
-// Rebuild the README's 3×2 animated cover from the current Gallery clips.
-// Usage: node assets/scripts/build-readme-cover.mjs [output.webp] [preview.mp4]
-// Requires FFmpeg with libwebp_anim; override its executable with FFMPEG.
-import { spawnSync } from 'node:child_process';
-import { mkdirSync } from 'node:fs';
-import { dirname, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const root = resolve(fileURLToPath(new URL('../../', import.meta.url)));
-const output = resolve(process.argv[2] ?? `${root}/assets/readme/cover.webp`);
-const preview = process.argv[3] && resolve(process.argv[3]);
-// Row-major order. panel-grid-moves uses its comic-panel-split variant;
-// space-camera-moves uses its exploded-view variant.
-const clips = [
-  'graze-face-tour',
-  'logo-shrink-wordmark-lockup',
-  'comic-panel-split',
-  'product-card-progressive-assemble',
-  'exploded-view',
-  'spotlight-hero-card',
-];
-const filters = clips.map((_, index) =>
-  `[${index}:v]setpts=PTS-STARTPTS,fps=15,scale=400:225:flags=lanczos,` +
-  `setsar=1,tpad=stop_mode=clone:stop_duration=6,trim=duration=6[v${index}]`,
-);
-filters.push(
-  clips.map((_, index) => `[v${index}]`).join('') +
-  'xstack=inputs=6:layout=0_0|404_0|808_0|0_229|404_229|808_229:fill=black[grid]',
-);
-// Each clip plays in full at its original speed, then holds its last frame
-// until the six-second grid loop restarts. Audio is intentionally omitted.
-filters.push(preview ? '[grid]split=2[cover][preview]' : '[grid]null[cover]');
-mkdirSync(dirname(output), { recursive: true });
-if (preview) mkdirSync(dirname(preview), { recursive: true });
-const args = [
-  '-hide_banner', '-y', '-filter_complex_threads', '1',
-  ...clips.flatMap(clip => ['-i', `${root}/gallery/media/${clip}.mp4`]),
-  '-filter_complex', filters.join(';'),
-  '-map', '[cover]', '-an', '-c:v', 'libwebp_anim',
-  '-quality', '68', '-compression_level', '6', '-loop', '0',
-  '-f', 'webp', output,
-];
-if (preview) args.push(
-  '-map', '[preview]', '-an', '-c:v', 'libx264', '-crf', '16',
-  '-pix_fmt', 'yuv420p', '-movflags', '+faststart', preview,
-);
-const result = spawnSync(process.env.FFMPEG ?? 'ffmpeg', args, { stdio: 'inherit' });
-if (result.error) throw result.error;
-process.exitCode = result.status ?? 1;
+// Rebuild the README's 3×2 animated cover from the current Gallery clips.
+// Usage: node assets/scripts/build-readme-cover.mjs [output.webp] [preview.mp4]
+// Requires FFmpeg with libwebp_anim; override its executable with FFMPEG.
+import { spawnSync } from 'node:child_process';
+import { mkdirSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = resolve(fileURLToPath(new URL('../../', import.meta.url)));
+const output = resolve(process.argv[2] ?? `${root}/assets/readme/cover.webp`);
+const preview = process.argv[3] && resolve(process.argv[3]);
+// Row-major order. panel-grid-moves uses its comic-panel-split variant;
+// space-camera-moves uses its exploded-view variant.
+const clips = [
+  'graze-face-tour',
+  'logo-shrink-wordmark-lockup',
+  'comic-panel-split',
+  'product-card-progressive-assemble',
+  'exploded-view',
+  'spotlight-hero-card',
+];
+const filters = clips.map((_, index) =>
+  `[${index}:v]setpts=PTS-STARTPTS,fps=15,scale=400:225:flags=lanczos,` +
+  `setsar=1,tpad=stop_mode=clone:stop_duration=6,trim=duration=6[v${index}]`,
+);
+filters.push(
+  clips.map((_, index) => `[v${index}]`).join('') +
+  'xstack=inputs=6:layout=0_0|404_0|808_0|0_229|404_229|808_229:fill=black[grid]',
+);
+// Each clip plays in full at its original speed, then holds its last frame
+// until the six-second grid loop restarts. Audio is intentionally omitted.
+filters.push(preview ? '[grid]split=2[cover][preview]' : '[grid]null[cover]');
+mkdirSync(dirname(output), { recursive: true });
+if (preview) mkdirSync(dirname(preview), { recursive: true });
+const args = [
+  '-hide_banner', '-y', '-filter_complex_threads', '1',
+  ...clips.flatMap(clip => ['-i', `${root}/gallery/media/${clip}.mp4`]),
+  '-filter_complex', filters.join(';'),
+  '-map', '[cover]', '-an', '-c:v', 'libwebp_anim',
+  '-quality', '68', '-compression_level', '6', '-loop', '0',
+  '-f', 'webp', output,
+];
+if (preview) args.push(
+  '-map', '[preview]', '-an', '-c:v', 'libx264', '-crf', '16',
+  '-pix_fmt', 'yuv420p', '-movflags', '+faststart', preview,
+);
+const result = spawnSync(process.env.FFMPEG ?? 'ffmpeg', args, { stdio: 'inherit' });
+if (result.error) throw result.error;
+process.exitCode = result.status ?? 1;