dsh-drawai 0.4.2 → 0.4.4

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

@@ -1,54 +1,54 @@
-// origin: template/src/aifl/Caption.tsx（模板片同源组件）
-import { interpolate, useCurrentFrame } from 'remotion';
-
-const MONO = 'ui-monospace, SFMono-Regular, Menlo, monospace';
-const AMBER = 'oklch(52% 0.115 65)';
-
-/** Screen-space narration caption: a mono UI info-strip at the bottom of the
- * frame, led by a small amber square. Fades/rises in over 8 frames and fades
- * out over the last 8 of its window.
- *
- * 注意：22px 属"信息条"风格（大字距全大写作补偿），低于审美准则 Q11 的
- * 字幕线（≥56px）。作为叙事主字幕使用时应提到 56–60px 档或改用大字幕组件；
- * 沿用 22px 信息条风格属于 Q11 允许的有意识违反，需在项目说明中注明。 */
-export const Caption: React.FC<{ text: string; duration: number; bottom?: number }> = ({
-  text,
-  duration,
-  bottom = 72,
-}) => {
-  const frame = useCurrentFrame();
-  const inT = interpolate(frame, [0, 8], [0, 1], {
-    extrapolateLeft: 'clamp',
-    extrapolateRight: 'clamp',
-  });
-  const outT = interpolate(frame, [duration - 8, duration], [1, 0], {
-    extrapolateLeft: 'clamp',
-    extrapolateRight: 'clamp',
-  });
-
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        bottom,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'baseline',
-        gap: 14,
-        fontFamily: MONO,
-        fontSize: 22,
-        letterSpacing: '0.14em',
-        textTransform: 'uppercase',
-        color: 'oklch(45% 0.006 82)',
-        opacity: inT * outT,
-        transform: `translateY(${(1 - inT) * 8}px)`,
-        pointerEvents: 'none',
-      }}
-    >
-      <span style={{ width: 6, height: 6, background: AMBER, display: 'inline-block' }} />
-      <span>{text}</span>
-    </div>
-  );
-};
+// origin: template/src/aifl/Caption.tsx（模板片同源组件）
+import { interpolate, useCurrentFrame } from 'remotion';
+
+const MONO = 'ui-monospace, SFMono-Regular, Menlo, monospace';
+const AMBER = 'oklch(52% 0.115 65)';
+
+/** Screen-space narration caption: a mono UI info-strip at the bottom of the
+ * frame, led by a small amber square. Fades/rises in over 8 frames and fades
+ * out over the last 8 of its window.
+ *
+ * 注意：22px 属"信息条"风格（大字距全大写作补偿），低于审美准则 Q11 的
+ * 字幕线（≥56px）。作为叙事主字幕使用时应提到 56–60px 档或改用大字幕组件；
+ * 沿用 22px 信息条风格属于 Q11 允许的有意识违反，需在项目说明中注明。 */
+export const Caption: React.FC<{ text: string; duration: number; bottom?: number }> = ({
+  text,
+  duration,
+  bottom = 72,
+}) => {
+  const frame = useCurrentFrame();
+  const inT = interpolate(frame, [0, 8], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const outT = interpolate(frame, [duration - 8, duration], [1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'baseline',
+        gap: 14,
+        fontFamily: MONO,
+        fontSize: 22,
+        letterSpacing: '0.14em',
+        textTransform: 'uppercase',
+        color: 'oklch(45% 0.006 82)',
+        opacity: inT * outT,
+        transform: `translateY(${(1 - inT) * 8}px)`,
+        pointerEvents: 'none',
+      }}
+    >
+      <span style={{ width: 6, height: 6, background: AMBER, display: 'inline-block' }} />
+      <span>{text}</span>
+    </div>
+  );
+};

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

@@ -1,200 +1,200 @@
-import React from 'react';
-import {
-  OffthreadVideo,
-  Sequence,
-  interpolate,
-  staticFile,
-  useCurrentFrame,
-  useVideoConfig,
-} from 'remotion';
-
-// ClipCard — wraps an external video clip (mp4) into a "card hero" that shot
-// recipes designed for DOM/SVG subjects (spotlight-hero-card,
-// magician-card-flourish, neon-frame-orbit-drop, quad-split-parallel-scenes…)
-// can drive directly. Fills the library gap where every card assumes generated
-// DOM content or page screenshots, never real footage.
-//
-// Battle-tested in a delivered 39s promo (spotlight push-in at zoom 1.7 on a
-// 512×512 clip; 3-up quad-split with 32px captions after a Q11 readability
-// review finding — small cards need captionSize raised to keep ≥32px on-screen).
-//
-// Crossfade loop: OffthreadVideo (as of 4.0.484) has no `loop` prop and freezes
-// past media end. Pass `loopDurationInFrames` to enable a seamless dissolve
-// loop — each next pass fades in over the previous tail. The effective step is
-// `loopDurationInFrames - startFrom` (a `startFrom` trim shortens the playable
-// media), and layer count is derived from the enclosing shot's duration, not
-// the Composition's, so a short shot inside a long composition doesn't spawn
-// invisible layers. Layer audio is crossfaded with complementary `volume`
-// curves so an unmuted loop doesn't stack two full-volume tracks.
-
-const ACCENT = '#4da3ff';
-
-// Each loop layer crossfades BOTH its audio and its opacity at its edges:
-// an incoming fade 0→1 over `fadeIn` frames at the layer start, a steady body,
-// then an outgoing fade 1→0 over `fadeOut` frames ending at `step` — the frame
-// where the NEXT layer starts. Adjacent layers therefore overlap for exactly
-// `crossfade` frames and their envelopes are complementary (sum to 1), so an
-// unmuted loop never stacks two full-volume tracks; visual dissolve and audio
-// crossfade stay in sync since they share the same envelope.
-const LoopLayer: React.FC<{
-  src: string;
-  size: number;
-  muted: boolean;
-  startFrom: number;
-  fadeIn: number;
-  fadeOut: number;
-  step: number;
-}> = ({ src, size, muted, startFrom, fadeIn, fadeOut, step }) => {
-  const frame = useCurrentFrame();
-
-  // envelope(f): 0 at f=0 (unless fadeIn=0 → 1), 1 through the body, 0 at
-  // f=step+fadeOut. Adjacent layers are spaced `step` apart and each fades
-  // out over `fadeOut` into the next one's `fadeIn` window.
-  let envelope: number;
-  if (frame <= fadeIn) {
-    envelope = fadeIn === 0 ? 1 : interpolate(frame, [0, fadeIn], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
-  } else if (frame <= step) {
-    envelope = 1;
-  } else {
-    envelope = interpolate(frame, [step, step + fadeOut], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
-  }
-
-  const opacity = Math.max(0, Math.min(1, envelope));
-  const volume = muted ? 1 : opacity;
-
-  return (
-    <OffthreadVideo
-      src={staticFile(src)}
-      muted={muted}
-      volume={volume}
-      startFrom={startFrom}
-      style={{
-        position: 'absolute',
-        inset: 0,
-        width: size,
-        height: size,
-        objectFit: 'cover',
-        opacity,
-      }}
-    />
-  );
-};
-
-export const ClipCard: React.FC<{
-  src: string; // path under public/
-  caption?: string; // monospace caption bar under the clip
-  size?: number; // card edge (square clips)
-  radius?: number;
-  muted?: boolean;
-  captionSize?: number; // default 17 — raise on small/far cards to keep ≥32px on-screen text
-  startFrom?: number; // trim: play the clip from this frame
-  style?: React.CSSProperties;
-  loopDurationInFrames?: number; // playable clip length in comp frames → enables crossfade loop
-  loopCrossfadeInFrames?: number; // default 8
-  durationInFrames?: number; // enclosing shot duration — loop layer count is derived from this,
-  // not the Composition duration (a short shot in a long composition)
-}> = ({
-  src,
-  caption,
-  size = 560,
-  radius = 20,
-  muted = true,
-  startFrom = 0,
-  style,
-  captionSize = 17,
-  loopDurationInFrames,
-  loopCrossfadeInFrames = 8,
-  durationInFrames,
-}) => {
-  const { durationInFrames: compDuration } = useVideoConfig();
-  const capH = caption ? Math.round(captionSize * 2.6) : 0;
-
-  let video: React.ReactNode;
-  // Guard: a startFrom trim that reaches or exceeds the playable media (or any
-  // degenerate step) must NOT loop — falling back to a plain single pass keeps
-  // a visible, audible clip instead of a layer that instantly fades to 0.
-  // step must also be >= crossfade, else >2 layers overlap at once and the
-  // complementary envelopes no longer sum to 1 (visual/audio stack past full).
-  const step = loopDurationInFrames
-    ? loopDurationInFrames - startFrom - loopCrossfadeInFrames
-    : 0;
-  const canLoop =
-    !!loopDurationInFrames &&
-    loopDurationInFrames > loopCrossfadeInFrames &&
-    step >= loopCrossfadeInFrames;
-  if (canLoop) {
-    const shotFrames = durationInFrames ?? compDuration;
-    const n = Math.max(1, Math.ceil(shotFrames / step));
-    video = (
-      <div style={{ position: 'relative', width: size, height: size }}>
-        {Array.from({ length: n }, (_, i) => (
-          <Sequence
-            key={i}
-            from={i * step}
-            durationInFrames={loopDurationInFrames}
-            layout="none"
-          >
-            <LoopLayer
-              src={src}
-              size={size}
-              muted={muted}
-              startFrom={startFrom}
-              fadeIn={i === 0 ? 0 : loopCrossfadeInFrames}
-              fadeOut={loopCrossfadeInFrames}
-              step={step}
-            />
-          </Sequence>
-        ))}
-      </div>
-    );
-  } else {
-    video = (
-      <OffthreadVideo
-        src={staticFile(src)}
-        muted={muted}
-        startFrom={startFrom}
-        style={{
-          width: size,
-          height: size,
-          objectFit: 'cover',
-          display: 'block',
-        }}
-      />
-    );
-  }
-
-  return (
-    <div
-      style={{
-        width: size,
-        height: size + capH,
-        borderRadius: radius,
-        background: '#111116',
-        border: '1px solid rgba(255,255,255,0.10)',
-        boxShadow: '0 24px 80px rgba(0,0,0,0.55)',
-        overflow: 'hidden',
-        ...style,
-      }}
-    >
-      {video}
-      {caption ? (
-        <div
-          style={{
-            height: capH,
-            display: 'flex',
-            alignItems: 'center',
-            padding: '0 18px',
-            fontFamily: 'ui-monospace, Menlo, monospace',
-            fontSize: captionSize,
-            color: 'rgba(255,255,255,0.72)',
-            letterSpacing: 0.5,
-            borderTop: '1px solid rgba(255,255,255,0.10)',
-          }}
-        >
-          <span style={{ color: ACCENT, marginRight: 10 }}>▸</span>
-          {caption}
-        </div>
-      ) : null}
-    </div>
-  );
-};
+import React from 'react';
+import {
+  OffthreadVideo,
+  Sequence,
+  interpolate,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+} from 'remotion';
+
+// ClipCard — wraps an external video clip (mp4) into a "card hero" that shot
+// recipes designed for DOM/SVG subjects (spotlight-hero-card,
+// magician-card-flourish, neon-frame-orbit-drop, quad-split-parallel-scenes…)
+// can drive directly. Fills the library gap where every card assumes generated
+// DOM content or page screenshots, never real footage.
+//
+// Battle-tested in a delivered 39s promo (spotlight push-in at zoom 1.7 on a
+// 512×512 clip; 3-up quad-split with 32px captions after a Q11 readability
+// review finding — small cards need captionSize raised to keep ≥32px on-screen).
+//
+// Crossfade loop: OffthreadVideo (as of 4.0.484) has no `loop` prop and freezes
+// past media end. Pass `loopDurationInFrames` to enable a seamless dissolve
+// loop — each next pass fades in over the previous tail. The effective step is
+// `loopDurationInFrames - startFrom` (a `startFrom` trim shortens the playable
+// media), and layer count is derived from the enclosing shot's duration, not
+// the Composition's, so a short shot inside a long composition doesn't spawn
+// invisible layers. Layer audio is crossfaded with complementary `volume`
+// curves so an unmuted loop doesn't stack two full-volume tracks.
+
+const ACCENT = '#4da3ff';
+
+// Each loop layer crossfades BOTH its audio and its opacity at its edges:
+// an incoming fade 0→1 over `fadeIn` frames at the layer start, a steady body,
+// then an outgoing fade 1→0 over `fadeOut` frames ending at `step` — the frame
+// where the NEXT layer starts. Adjacent layers therefore overlap for exactly
+// `crossfade` frames and their envelopes are complementary (sum to 1), so an
+// unmuted loop never stacks two full-volume tracks; visual dissolve and audio
+// crossfade stay in sync since they share the same envelope.
+const LoopLayer: React.FC<{
+  src: string;
+  size: number;
+  muted: boolean;
+  startFrom: number;
+  fadeIn: number;
+  fadeOut: number;
+  step: number;
+}> = ({ src, size, muted, startFrom, fadeIn, fadeOut, step }) => {
+  const frame = useCurrentFrame();
+
+  // envelope(f): 0 at f=0 (unless fadeIn=0 → 1), 1 through the body, 0 at
+  // f=step+fadeOut. Adjacent layers are spaced `step` apart and each fades
+  // out over `fadeOut` into the next one's `fadeIn` window.
+  let envelope: number;
+  if (frame <= fadeIn) {
+    envelope = fadeIn === 0 ? 1 : interpolate(frame, [0, fadeIn], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+  } else if (frame <= step) {
+    envelope = 1;
+  } else {
+    envelope = interpolate(frame, [step, step + fadeOut], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+  }
+
+  const opacity = Math.max(0, Math.min(1, envelope));
+  const volume = muted ? 1 : opacity;
+
+  return (
+    <OffthreadVideo
+      src={staticFile(src)}
+      muted={muted}
+      volume={volume}
+      startFrom={startFrom}
+      style={{
+        position: 'absolute',
+        inset: 0,
+        width: size,
+        height: size,
+        objectFit: 'cover',
+        opacity,
+      }}
+    />
+  );
+};
+
+export const ClipCard: React.FC<{
+  src: string; // path under public/
+  caption?: string; // monospace caption bar under the clip
+  size?: number; // card edge (square clips)
+  radius?: number;
+  muted?: boolean;
+  captionSize?: number; // default 17 — raise on small/far cards to keep ≥32px on-screen text
+  startFrom?: number; // trim: play the clip from this frame
+  style?: React.CSSProperties;
+  loopDurationInFrames?: number; // playable clip length in comp frames → enables crossfade loop
+  loopCrossfadeInFrames?: number; // default 8
+  durationInFrames?: number; // enclosing shot duration — loop layer count is derived from this,
+  // not the Composition duration (a short shot in a long composition)
+}> = ({
+  src,
+  caption,
+  size = 560,
+  radius = 20,
+  muted = true,
+  startFrom = 0,
+  style,
+  captionSize = 17,
+  loopDurationInFrames,
+  loopCrossfadeInFrames = 8,
+  durationInFrames,
+}) => {
+  const { durationInFrames: compDuration } = useVideoConfig();
+  const capH = caption ? Math.round(captionSize * 2.6) : 0;
+
+  let video: React.ReactNode;
+  // Guard: a startFrom trim that reaches or exceeds the playable media (or any
+  // degenerate step) must NOT loop — falling back to a plain single pass keeps
+  // a visible, audible clip instead of a layer that instantly fades to 0.
+  // step must also be >= crossfade, else >2 layers overlap at once and the
+  // complementary envelopes no longer sum to 1 (visual/audio stack past full).
+  const step = loopDurationInFrames
+    ? loopDurationInFrames - startFrom - loopCrossfadeInFrames
+    : 0;
+  const canLoop =
+    !!loopDurationInFrames &&
+    loopDurationInFrames > loopCrossfadeInFrames &&
+    step >= loopCrossfadeInFrames;
+  if (canLoop) {
+    const shotFrames = durationInFrames ?? compDuration;
+    const n = Math.max(1, Math.ceil(shotFrames / step));
+    video = (
+      <div style={{ position: 'relative', width: size, height: size }}>
+        {Array.from({ length: n }, (_, i) => (
+          <Sequence
+            key={i}
+            from={i * step}
+            durationInFrames={loopDurationInFrames}
+            layout="none"
+          >
+            <LoopLayer
+              src={src}
+              size={size}
+              muted={muted}
+              startFrom={startFrom}
+              fadeIn={i === 0 ? 0 : loopCrossfadeInFrames}
+              fadeOut={loopCrossfadeInFrames}
+              step={step}
+            />
+          </Sequence>
+        ))}
+      </div>
+    );
+  } else {
+    video = (
+      <OffthreadVideo
+        src={staticFile(src)}
+        muted={muted}
+        startFrom={startFrom}
+        style={{
+          width: size,
+          height: size,
+          objectFit: 'cover',
+          display: 'block',
+        }}
+      />
+    );
+  }
+
+  return (
+    <div
+      style={{
+        width: size,
+        height: size + capH,
+        borderRadius: radius,
+        background: '#111116',
+        border: '1px solid rgba(255,255,255,0.10)',
+        boxShadow: '0 24px 80px rgba(0,0,0,0.55)',
+        overflow: 'hidden',
+        ...style,
+      }}
+    >
+      {video}
+      {caption ? (
+        <div
+          style={{
+            height: capH,
+            display: 'flex',
+            alignItems: 'center',
+            padding: '0 18px',
+            fontFamily: 'ui-monospace, Menlo, monospace',
+            fontSize: captionSize,
+            color: 'rgba(255,255,255,0.72)',
+            letterSpacing: 0.5,
+            borderTop: '1px solid rgba(255,255,255,0.10)',
+          }}
+        >
+          <span style={{ color: ACCENT, marginRight: 10 }}>▸</span>
+          {caption}
+        </div>
+      ) : null}
+    </div>
+  );
+};

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

@@ -1,45 +1,45 @@
-// origin: template/src/aifl/DigitRoll.tsx（模板片同源组件）
-import { interpolate, useCurrentFrame, Easing } from 'remotion';
-
-const DIGITS = '0123456789';
-
-/** Odometer-style digit column roll for monospace numerals. */
-export const DigitRoll: React.FC<{
-  value: string;
-  delay?: number;
-  fontSize?: number;
-  color?: string;
-}> = ({ value, delay = 0, fontSize = 30, color = 'oklch(52% 0.115 65)' }) => {
-  const frame = useCurrentFrame();
-  const lineH = fontSize * 1.15;
-  return (
-    <span style={{ display: 'inline-flex', overflow: 'hidden', height: lineH, verticalAlign: 'bottom' }}>
-      {value.split('').map((ch, i) => {
-        const target = DIGITS.indexOf(ch);
-        if (target < 0) {
-          return (
-            <span key={i} style={{ fontSize, lineHeight: `${lineH}px`, color }}>{ch}</span>
-          );
-        }
-        const t = interpolate(frame, [delay + i * 4, delay + i * 4 + 22], [0, 1], {
-          extrapolateLeft: 'clamp',
-          extrapolateRight: 'clamp',
-          easing: Easing.bezier(0.25, 0.8, 0.25, 1),
-        });
-        // roll through one full strip then land on the target digit
-        const offset = (10 + target) * t * lineH;
-        return (
-          <span key={i} style={{ display: 'inline-block', height: lineH }}>
-            <span style={{ display: 'block', transform: `translateY(${-offset}px)` }}>
-              {(DIGITS + DIGITS).split('').map((d, j) => (
-                <span key={j} style={{ display: 'block', fontSize, lineHeight: `${lineH}px`, color, fontVariantNumeric: 'tabular-nums' }}>
-                  {d}
-                </span>
-              ))}
-            </span>
-          </span>
-        );
-      })}
-    </span>
-  );
-};
+// origin: template/src/aifl/DigitRoll.tsx（模板片同源组件）
+import { interpolate, useCurrentFrame, Easing } from 'remotion';
+
+const DIGITS = '0123456789';
+
+/** Odometer-style digit column roll for monospace numerals. */
+export const DigitRoll: React.FC<{
+  value: string;
+  delay?: number;
+  fontSize?: number;
+  color?: string;
+}> = ({ value, delay = 0, fontSize = 30, color = 'oklch(52% 0.115 65)' }) => {
+  const frame = useCurrentFrame();
+  const lineH = fontSize * 1.15;
+  return (
+    <span style={{ display: 'inline-flex', overflow: 'hidden', height: lineH, verticalAlign: 'bottom' }}>
+      {value.split('').map((ch, i) => {
+        const target = DIGITS.indexOf(ch);
+        if (target < 0) {
+          return (
+            <span key={i} style={{ fontSize, lineHeight: `${lineH}px`, color }}>{ch}</span>
+          );
+        }
+        const t = interpolate(frame, [delay + i * 4, delay + i * 4 + 22], [0, 1], {
+          extrapolateLeft: 'clamp',
+          extrapolateRight: 'clamp',
+          easing: Easing.bezier(0.25, 0.8, 0.25, 1),
+        });
+        // roll through one full strip then land on the target digit
+        const offset = (10 + target) * t * lineH;
+        return (
+          <span key={i} style={{ display: 'inline-block', height: lineH }}>
+            <span style={{ display: 'block', transform: `translateY(${-offset}px)` }}>
+              {(DIGITS + DIGITS).split('').map((d, j) => (
+                <span key={j} style={{ display: 'block', fontSize, lineHeight: `${lineH}px`, color, fontVariantNumeric: 'tabular-nums' }}>
+                  {d}
+                </span>
+              ))}
+            </span>
+          </span>
+        );
+      })}
+    </span>
+  );
+};

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

@@ -1,20 +1,20 @@
-// origin: template/src/aifl/FlashCut.tsx（模板片同源组件）
-import { AbsoluteFill, interpolate, useCurrentFrame } from 'remotion';
-
-/** Bright-field cut: a warm-white bloom that flashes over the hard cut. */
-export const FlashCut: React.FC<{ duration?: number }> = ({ duration = 10 }) => {
-  const frame = useCurrentFrame();
-  const o = interpolate(frame, [0, duration * 0.4, duration], [0, 0.85, 0], {
-    extrapolateLeft: 'clamp',
-    extrapolateRight: 'clamp',
-  });
-  return (
-    <AbsoluteFill
-      style={{
-        pointerEvents: 'none',
-        opacity: o,
-        background: 'radial-gradient(ellipse at 50% 45%, rgba(255,248,235,0.98), rgba(255,244,224,0.55) 55%, transparent 80%)',
-      }}
-    />
-  );
-};
+// origin: template/src/aifl/FlashCut.tsx（模板片同源组件）
+import { AbsoluteFill, interpolate, useCurrentFrame } from 'remotion';
+
+/** Bright-field cut: a warm-white bloom that flashes over the hard cut. */
+export const FlashCut: React.FC<{ duration?: number }> = ({ duration = 10 }) => {
+  const frame = useCurrentFrame();
+  const o = interpolate(frame, [0, duration * 0.4, duration], [0, 0.85, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  return (
+    <AbsoluteFill
+      style={{
+        pointerEvents: 'none',
+        opacity: o,
+        background: 'radial-gradient(ellipse at 50% 45%, rgba(255,248,235,0.98), rgba(255,244,224,0.55) 55%, transparent 80%)',
+      }}
+    />
+  );
+};