dsh-drawai 0.3.4 → 0.4.0

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

@@ -0,0 +1,65 @@
+// origin: 模板片源仓库（本库模板未包含 3D 版，需 three + @react-three/fiber + @remotion/three）
+import * as THREE from 'three';
+import { useMemo } from 'react';
+
+/** Radial-gradient contact shadow texture, generated once. */
+const useShadowTexture = () => {
+  return useMemo(() => {
+    const c = document.createElement('canvas');
+    c.width = c.height = 128;
+    const ctx = c.getContext('2d')!;
+    const g = ctx.createRadialGradient(64, 64, 8, 64, 64, 64);
+    g.addColorStop(0, 'rgba(58,51,42,0.32)');
+    g.addColorStop(1, 'rgba(58,51,42,0)');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 128, 128);
+    const tex = new THREE.CanvasTexture(c);
+    return tex;
+  }, []);
+};
+
+/**
+ * A paper card lying flat on the desk. Plane with the UI texture facing up
+ * (texture top edge points toward world -z), soft contact shadow beneath.
+ */
+export const FlatPanel: React.FC<{
+  texture: THREE.Texture | null;
+  width: number;
+  height: number;
+  position?: [number, number, number];
+  yaw?: number;
+  opacity?: number;
+  glow?: number;
+  shadow?: boolean;
+}> = ({ texture, width, height, position = [0, 0.02, 0], yaw = 0, opacity = 1, glow = 0.3, shadow = true }) => {
+  const shadowTex = useShadowTexture();
+  const mat = useMemo(() => {
+    const m = new THREE.MeshStandardMaterial({
+      color: '#fdfcfa',
+      roughness: 0.62,
+      metalness: 0,
+      transparent: true,
+    });
+    return m;
+  }, []);
+  mat.map = texture ?? null;
+  mat.emissive = new THREE.Color('#ffffff');
+  mat.emissiveMap = texture ?? null;
+  mat.emissiveIntensity = glow;
+  mat.opacity = opacity;
+  mat.needsUpdate = true;
+
+  return (
+    <group position={position} rotation={[0, yaw, 0]}>
+      {shadow ? (
+        <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0.05, -0.012, 0.06]}>
+          <planeGeometry args={[width * 1.3, height * 1.3]} />
+          <meshBasicMaterial map={shadowTex} transparent opacity={0.85 * opacity} depthWrite={false} />
+        </mesh>
+      ) : null}
+      <mesh rotation={[-Math.PI / 2, 0, 0]} material={mat}>
+        <planeGeometry args={[width, height]} />
+      </mesh>
+    </group>
+  );
+};

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

@@ -0,0 +1,151 @@
+// origin: template/src/aifl/live/PageCam.tsx（模板片同源组件）
+import { AbsoluteFill, Img, interpolate, staticFile, useCurrentFrame, Easing } from 'remotion';
+
+export type CamKey = {
+  frame: number;
+  cx: number;
+  cy: number;
+  zoom: number;
+  rotX?: number; // deg, tilt about the horizontal axis (positive = top leans away, like looking at a table)
+  rotY?: number; // deg, tilt about the vertical axis (positive = right edge recedes, i.e. seen from the LEFT)
+  rotZ?: number; // deg, in-plane roll
+  persp?: number; // px, perspective strength (default 1400; smaller = stronger)
+};
+
+const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+
+/**
+ * 2.5D camera over a full-page screenshot. (cx, cy) is the page-space CSS
+ * point centered in the 1920x1080 viewport; zoom is scale (1 = 1 CSS px
+ * -> 1 output px). Page textures are 2x, rendered at CSS size via width.
+ *
+ * Optional 3D: keys may carry rotX/rotZ/persp to tilt the page like a plane
+ * seen from an oblique camera. When NO key declares any 3D field, the markup
+ * degrades to the original flat pan/zoom and renders pixel-identical.
+ *
+ * Optional DOF: a screen-space gradient-blur band approximating a focal plane
+ * near `focusY` (blurring the far/top part of a tilted page).
+ */
+export const PageCam: React.FC<{
+  src: string; // staticFile path under textures/live/
+  pageH: number; // CSS page height
+  keys: CamKey[];
+  children?: React.ReactNode; // page-space overlays (positioned in CSS px)
+  blur?: number;
+  saturate?: number;
+  ease?: (t: number) => number;
+  dof?: { focusY: number; strength: number };
+  // Optional absolute-frame override: when PageCam is rendered inside a
+  // <Sequence> (which rebases useCurrentFrame), the parent can pass the
+  // restored absolute comp frame so CAM_KEYS keep their absolute frame refs.
+  frame?: number;
+}> = ({ src, pageH, keys, children, blur = 0, saturate = 1, ease = Easing.bezier(0.33, 0, 0.15, 1), dof, frame: frameProp }) => {
+  const ownFrame = useCurrentFrame();
+  const frame = frameProp ?? ownFrame;
+  // find segment
+  let a = keys[0], b = keys[keys.length - 1];
+  for (let i = 0; i < keys.length - 1; i++) {
+    if (frame >= keys[i].frame && frame <= keys[i + 1].frame) { a = keys[i]; b = keys[i + 1]; break; }
+  }
+  const t = a.frame === b.frame ? 1 : interpolate(frame, [a.frame, b.frame], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: ease,
+  });
+  const cx = lerp(a.cx, b.cx, t);
+  const cy = lerp(a.cy, b.cy, t);
+  const zoom = lerp(a.zoom, b.zoom, t);
+
+  const filters: string[] = [];
+  if (blur > 0) filters.push(`blur(${blur}px)`);
+  if (saturate !== 1) filters.push(`saturate(${saturate})`);
+
+  // Does any key request 3D? If not, keep the original flat markup exactly.
+  const has3D = keys.some((k) => k.rotX !== undefined || k.rotY !== undefined || k.rotZ !== undefined || k.persp !== undefined);
+
+  if (!has3D) {
+    return (
+      <AbsoluteFill style={{ overflow: 'hidden', backgroundColor: '#faf7f2' }}>
+        <div
+          style={{
+            position: 'absolute', width: 1920, height: pageH,
+            transform: `translate(${960 - cx * zoom}px, ${540 - cy * zoom}px) scale(${zoom})`,
+            transformOrigin: '0 0',
+            filter: filters.length ? filters.join(' ') : undefined,
+          }}
+        >
+          <Img src={staticFile(src)} style={{ position: 'absolute', width: 1920, height: pageH }} />
+          {children}
+        </div>
+      </AbsoluteFill>
+    );
+  }
+
+  // 3D mode: pivot rotation/scale about the focal page-point (cx, cy) so it
+  // stays centered in the viewport. With rotX=rotZ=0 this reduces to the flat
+  // transform (proven identical: (960,540) + zoom*(p - (cx,cy))).
+  const rotX = lerp(a.rotX ?? 0, b.rotX ?? 0, t);
+  const rotY = lerp(a.rotY ?? 0, b.rotY ?? 0, t);
+  const rotZ = lerp(a.rotZ ?? 0, b.rotZ ?? 0, t);
+  const persp = lerp(a.persp ?? 1400, b.persp ?? 1400, t);
+
+  return (
+    <AbsoluteFill style={{ overflow: 'hidden', backgroundColor: '#faf7f2' }}>
+      <div
+        style={{
+          position: 'absolute', inset: 0,
+          perspective: `${persp * zoom}px`,
+          perspectiveOrigin: '960px 540px',
+        }}
+      >
+        {/* LAYOUT-SCALE zoom: instead of scale(zoom) in the transform chain (which
+            makes Chromium rasterize the 3D-composited layer at 1920-wide LAYOUT
+            size and then GPU-upscale by zoom — everything inside gets downsampled
+            before magnification, hence blurry text), we apply the magnification as
+            the CSS `zoom` property. `zoom` enlarges the layout box itself, so the
+            page + card textures rasterize at the ENLARGED device size and sample
+            down from their hi-res sources → sharp glyph edges under perspective.
+
+            Coordinate math: `zoom` scales this element's local coordinate space by
+            `zoom`, so a page point (cx,cy) renders at (cx*zoom, cy*zoom) device px
+            from the box origin, and a `translate(Tx px)` renders as Tx*zoom device
+            px. To land the focal point (cx,cy) at viewport centre (960,540):
+              cx*zoom + Tx*zoom = 960  ⟹  Tx = 960/zoom - cx  (likewise Ty).
+            Rotations pivot about transform-origin (cx,cy) = the focal point, so
+            they leave its screen position unchanged. With rot=0 this reduces to
+            translate(960/zoom - cx, 540/zoom - cy) under zoom — identical framing
+            to the old scale-based transform, just rasterized at layout scale. */}
+        <div
+          style={{
+            position: 'absolute', width: 1920, height: pageH,
+            zoom,
+            transform: `translate(${960 / zoom - cx}px, ${540 / zoom - cy}px) rotateY(${rotY}deg) rotateX(${rotX}deg) rotateZ(${rotZ}deg)`,
+            transformOrigin: `${cx}px ${cy}px`,
+            transformStyle: 'preserve-3d',
+            filter: filters.length ? filters.join(' ') : undefined,
+          }}
+        >
+          <Img src={staticFile(src)} style={{ position: 'absolute', width: 1920, height: pageH }} />
+          {children}
+        </div>
+      </div>
+
+      {/* Depth-of-field approximation: a top-band gradient blur (far part of a
+          tilted page reads soft). Screen-space, over the page. */}
+      {dof ? (
+        <div
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: 0,
+            height: Math.max(0, dof.focusY),
+            backdropFilter: `blur(${dof.strength}px)`,
+            WebkitBackdropFilter: `blur(${dof.strength}px)`,
+            maskImage: 'linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 100%)',
+            WebkitMaskImage: 'linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 100%)',
+            pointerEvents: 'none',
+          }}
+        />
+      ) : null}
+    </AbsoluteFill>
+  );
+};

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

@@ -0,0 +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>
+  );
+};

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

@@ -0,0 +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;
+};

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

@@ -0,0 +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);

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

@@ -0,0 +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;
+  };
+};

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

@@ -0,0 +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,
+];

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

@@ -0,0 +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;