dsh-drawai 0.3.4 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/rhythm/quad-split-parallel-scenes/QuadSplitParallelScenes.tsx

@@ -0,0 +1,252 @@
+// quad-split-parallel-scenes — Quad Split 四宫并行蒙太奇
+// 手法卡：画面硬切 2×2 四宫格，四个象限并行跑各自独立的微场景，关键节拍互相错开 3–6 帧、全程无转场，
+// 靠并行密度制造信息轰炸（格内内容可整体替换，错拍表才是配方）。
+//
+// 第二轮重设计（余烬 · 发布日的四个现场）：
+// - look = ember（暖黑 · 橙 · 琥珀点缀）。四格是 video-shotcraft 出一支宣传片时同时发生的四件事，按明度做棋盘交错：
+//   TL 奶油色 · 浏览器打开本地预览页（Launch film.）｜ TR 暖黑 · 终端 npx remotion render + 急推到「promo.mp4 ready」
+//   BL 橙色实底 · 「Prompt. Render. Ship.」三个巨大的词逐个砸下（瑞士海报）｜ BR 拿铁色 · 光标点 Approve → Publish → 上线通知弹出
+//   四格之间 8px 暖黑缝 + 20px 圆角，像一块 bento 发布板；格内字全部按 1080p 可读字号重排（≥32px，主词 132px）。
+// - 错拍表（帧，30fps）——任意相邻重事件间隔 ≥3f，从不齐动：
+//     TL  tab 6 / 11 / 16 / 21 弹入 · 0–40 地址栏打字 · 44 页面载入（大标题滑入）· 全程 inQuad 慢推 1→1.1
+//     TR  0–24 命令打字 · 27 / 33 两行输出 · 37 末行出现 + 37–47 whip 急推 1→1.85（sin 包络模糊）
+//     BL  14「Write.」· 30「Ship.」· 49「Repeat.」（overshoot 下落）
+//     BR  4–14 卡片滑入 · 14–25 光标飞向 Approve · 25 点击 · 27–33 按钮变 Approved · 38–50 飞向 Publish · 52 点击 · 56 通知弹出
+//   两处打字光标闪烁周期错开（16f vs 14f + 5 相位）。
+// - 原版 2.1s 无收尾，这一轮加到 90f：0–62 并行轰炸，62–90 四格都落在终态海报上 hold（只剩光标闪烁与慢推）。
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, Grain, mix, ramp } from '../../_fixtures/Polish';
+import { LOOKS, Stage, alpha, type } from '../../_fixtures/Look';
+import { BRAND, PITCH, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const QUAD_SPLIT_PARALLEL_SCENES_DURATION = 90;
+
+const L = LOOKS.ember;
+const CREAM = '#f7eee4';
+const LATTE = '#e9d7c4';
+const ORANGE = L.accent;
+const DARK = '#160d09';
+
+// 四格几何：外边距 = 缝宽 8px
+const G = 8;
+const QW = (1920 - 3 * G) / 2; // 948
+const QH = (1080 - 3 * G) / 2; // 528
+const QUADS = [
+  { x: G, y: G },
+  { x: 2 * G + QW, y: G },
+  { x: G, y: 2 * G + QH },
+  { x: 2 * G + QW, y: 2 * G + QH },
+];
+
+const blink = (f: number, period: number, phase = 0) => (Math.floor((f + phase) / (period / 2)) % 2 === 0 ? 1 : 0);
+const typed = (s: string, f: number, a: number, b: number) => s.slice(0, Math.floor(ramp(f, a, b - a, EASE.linear) * s.length));
+
+// 四格通用：角标（纹理级小字，不必读）
+const Corner: React.FC<{ n: string; label: string; color: string }> = ({ n, label, color }) => (
+  <div style={{ position: 'absolute', left: 34, top: 28, ...type(20, 700, { caps: true }), letterSpacing: '0.2em', color, opacity: 0.7 }}>
+    {n} — {label}
+  </div>
+);
+
+// ───────────── TL：浏览器打开本地预览页（不编域名：localhost 预览）─────────────
+const URL = 'localhost:3000/promo';
+const TABS = ['Recipes', 'Gallery', 'Docs', 'Promo'];
+const QuadTL: React.FC<{ f: number }> = ({ f }) => {
+  const push = mix(1, 1.1, Math.pow(Math.min(1, f / 90), 2)); // inQuad 慢推：底噪运动
+  const load = ramp(f, 44, 14, EASE.snappy);
+  return (
+    <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(ellipse 90% 90% at 30% 20%, #fffaf3 0%, ${CREAM} 55%, #efe2d3 100%)` }}>
+      <div style={{
+        position: 'absolute', left: 104, top: 112, width: 740, height: 390, borderRadius: 20, background: '#fffdf9', overflow: 'hidden',
+        border: '1px solid rgba(60,30,10,0.10)', boxShadow: `inset 0 1px 0 #fff, 0 2px 4px rgba(60,30,10,0.08), 0 30px 60px -24px rgba(60,30,10,0.35)`,
+        transform: `scale(${push})`, transformOrigin: '50% 90%',
+      }}>
+        {/* 标签栏 */}
+        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 58, padding: '0 18px', background: '#f3e9de' }}>
+          <div style={{ display: 'flex', gap: 8, alignSelf: 'center', marginRight: 10 }}>
+            {['#ff6a52', '#ffbd3d', '#5fcf6a'].map((c) => <i key={c} style={{ width: 13, height: 13, borderRadius: 7, background: c }} />)}
+          </div>
+          {TABS.map((t, i) => {
+            const k = ramp(f, 6 + i * 5, 9, EASE.overshoot);
+            const active = i === TABS.length - 1;
+            if (k <= 0) return null;
+            return (
+              <div key={t} style={{
+                padding: '9px 20px 11px', borderRadius: '12px 12px 0 0', ...type(24, active ? 650 : 500),
+                background: active ? '#fffdf9' : 'rgba(60,30,10,0.05)', color: active ? DARK : '#8c7867',
+                transform: `scale(${k})`, transformOrigin: '50% 100%',
+              }}>{t}</div>
+            );
+          })}
+        </div>
+        {/* 地址栏 */}
+        <div style={{ margin: '16px 22px', height: 62, borderRadius: 31, background: '#f6eee5', display: 'flex', alignItems: 'center', padding: '0 24px', gap: 14 }}>
+          <svg width={22} height={22} viewBox="0 0 24 24" fill="none" stroke="#a08c7a" strokeWidth={2.2}><rect x={5} y={10} width={14} height={10} rx={2} /><path d="M8 10V7a4 4 0 0 1 8 0v3" /></svg>
+          <span style={{ ...type(34, 550), color: DARK }}>{typed(URL, f, 0, 40)}</span>
+          <span style={{ width: 3, height: 36, background: ORANGE, opacity: f < 44 ? blink(f, 16) : 0, marginLeft: -10 }} />
+        </div>
+        {/* 页面：44f 载入，大标题从下滑入 */}
+        <div style={{ position: 'absolute', left: 44, top: 168, right: 44 }}>
+          <div style={{ height: 6, borderRadius: 3, background: ORANGE, width: `${load * 100}%`, opacity: 1 - ramp(f, 56, 6, EASE.linear), marginBottom: 20 }} />
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10, opacity: load }}>
+            <ShotcraftMark size={30} tone="light" />
+            <span style={{ fontFamily: BRAND.font, fontSize: 24, fontWeight: 700, letterSpacing: '0.03em', lineHeight: 1, color: DARK }}>{BRAND.name}</span>
+          </div>
+          <div style={{ overflow: 'hidden', marginTop: 8 }}>
+            <div style={{ ...type(96, 850), color: DARK, transform: `translateY(${(1 - load) * 110}%)` }}>Launch film.</div>
+          </div>
+          <div style={{ ...type(32, 500), color: '#7a6555', marginTop: 12, opacity: ramp(f, 50, 10, EASE.out) }}>{PITCH.en.taglines[0]}</div>
+        </div>
+      </div>
+      <Corner n="01" label="Web" color="#9b8a7a" />
+    </div>
+  );
+};
+
+// ───────────── TR：终端渲染 + whip 急推 ─────────────
+const CMD = 'npx remotion render';
+const QuadTR: React.FC<{ f: number }> = ({ f }) => {
+  const zip = ramp(f, 37, 10, EASE.smooth);
+  const zoom = mix(1, 1.85, zip);
+  const blur = 5 * Math.sin(Math.PI * zip);
+  const old = 1 - 0.92 * zip; // 急推时前几行退成背景
+  const line = (at: number) => ramp(f, at, 5, EASE.out);
+  const mono = (s: number, w = 500): React.CSSProperties => ({ ...type(s, w, { mono: true }), whiteSpace: 'pre' });
+  return (
+    <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(ellipse 80% 90% at 70% 10%, #2a1810 0%, ${DARK} 60%, #0d0705 100%)` }}>
+      <div style={{
+        position: 'absolute', left: 80, top: 100, width: 800,
+        transform: `translateY(${(-40 * zip).toFixed(2)}px) scale(${zoom})`, transformOrigin: '0px 225px', filter: blur > 0.2 ? `blur(${blur.toFixed(2)}px)` : undefined,
+      }}>
+        <div style={{ ...mono(36), color: L.ink, opacity: old }}>
+          <span style={{ color: ORANGE }}>$ </span>{typed(CMD, f, 0, 24)}
+          <span style={{ display: 'inline-block', width: 20, height: 38, verticalAlign: '-6px', background: L.ink, opacity: f < 27 ? blink(f, 14, 5) : 0 }} />
+        </div>
+        <div style={{ ...mono(32), color: L.ink2, marginTop: 30, opacity: line(27) * old, transform: `translateX(${(1 - line(27)) * -16}px)` }}>
+          <span style={{ color: L.accent2 }}>✓</span> bundle     1.8s
+        </div>
+        <div style={{ ...mono(32), color: L.ink2, marginTop: 14, opacity: line(33) * old, transform: `translateX(${(1 - line(33)) * -16}px)` }}>
+          <span style={{ color: L.accent2 }}>✓</span> frames     900/900
+        </div>
+        <div style={{ ...mono(40, 700), color: L.ink, marginTop: 36, opacity: line(37) }}>
+          <span style={{ color: ORANGE, textShadow: `0 0 18px ${alpha(ORANGE, 0.8)}` }}>●</span> promo.mp4 <span style={{ color: L.accent2 }}>ready</span>
+        </div>
+      </div>
+      <Corner n="02" label="Render" color={L.ink3} />
+    </div>
+  );
+};
+
+// ───────────── BL：三词砸下 ─────────────
+const WORDS: Array<[string, number]> = [['Prompt.', 14], ['Render.', 30], ['Ship.', 49]];
+const QuadBL: React.FC<{ f: number }> = ({ f }) => (
+  <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(150deg, #ff8340 0%, ${ORANGE} 45%, #e8541c 100%)` }}>
+    <div style={{ position: 'absolute', left: 64, top: 70 }}>
+      {WORDS.map(([w, at], i) => {
+        const s = Math.min(1, Math.max(0, (f - at) / 8));
+        if (s <= 0) return <div key={w} style={{ height: 132 * 0.98 }} />;
+        const y = (1 - EASE.overshoot(s)) * -70;
+        const last = i === WORDS.length - 1;
+        return (
+          <div key={w} style={{
+            ...type(132, 900), lineHeight: 0.98, color: last ? CREAM : DARK, opacity: Math.min(1, s * 3),
+            transform: `translateY(${y.toFixed(2)}px) scale(${mix(1.12, 1, EASE.snappy(s)).toFixed(4)})`, transformOrigin: '0% 100%',
+          }}>{w}</div>
+        );
+      })}
+    </div>
+    <Corner n="03" label="Brand" color={DARK} />
+  </div>
+);
+
+// ───────────── BR：审批 → 发布 → 上线通知 ─────────────
+// 光标锚点（格内坐标，tip）
+const P_START: [number, number] = [860, 470];
+const P_APPROVE: [number, number] = [270, 318];
+const P_PUBLISH: [number, number] = [560, 318];
+const qBez = (a: number[], b: number[], c: number[], t: number): [number, number] => {
+  const u = 1 - t;
+  return [u * u * a[0] + 2 * u * t * b[0] + t * t * c[0], u * u * a[1] + 2 * u * t * b[1] + t * t * c[1]];
+};
+const QuadBR: React.FC<{ f: number }> = ({ f }) => {
+  const slide = ramp(f, 4, 10, EASE.snappy);
+  const m1 = ramp(f, 14, 11, EASE.swift);
+  const m2 = ramp(f, 38, 12, EASE.swift);
+  const p = m2 > 0 ? qBez(P_APPROVE, [470, 250], P_PUBLISH, m2) : qBez(P_START, [620, 520], P_APPROVE, m1);
+  const press = (at: number) => Math.sin(Math.PI * Math.min(1, Math.max(0, (f - at) / 5)));
+  const approved = ramp(f, 27, 6, EASE.snappy);
+  const published = f >= 54;
+  const toast = ramp(f, 56, 10, EASE.overshoot);
+  return (
+    <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(ellipse 90% 90% at 70% 20%, #f4e6d6 0%, ${LATTE} 60%, #dcc5ae 100%)` }}>
+      {/* 发布审批卡 */}
+      <div style={{
+        position: 'absolute', left: 120, top: 120, width: 620, padding: '30px 34px', borderRadius: 22, background: '#fffaf4',
+        border: '1px solid rgba(60,30,10,0.10)', boxShadow: '0 2px 4px rgba(60,30,10,0.08), 0 26px 50px -22px rgba(60,30,10,0.4)',
+        transform: `translateX(${(1 - slide) * -60}px)`, opacity: slide,
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
+          <div style={{ ...type(40, 750), color: DARK }}>Launch film · cut 3</div>
+          <div style={{ marginLeft: 'auto', display: 'flex' }}>
+            {['#e8541c', '#3d5a80', '#c4552d'].map((c, i) => (
+              <div key={c} style={{ width: 40, height: 40, borderRadius: 20, background: c, border: '3px solid #fffaf4', marginLeft: i ? -12 : 0, ...type(18, 700), color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{'MJR'[i]}</div>
+            ))}
+          </div>
+        </div>
+        <div style={{ ...type(30, 500), color: '#7a6555', marginTop: 10 }}>12 shots · 2 reviewers</div>
+        <div style={{ display: 'flex', gap: 16, marginTop: 30 }}>
+          <div style={{
+            width: 260, height: 70, borderRadius: 16, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
+            border: `2px solid ${approved > 0.5 ? '#2f9e5b' : 'rgba(60,30,10,0.22)'}`, background: approved > 0.5 ? 'rgba(47,158,91,0.12)' : 'transparent',
+            ...type(32, 650), color: approved > 0.5 ? '#237a46' : DARK, transform: `scale(${1 - 0.06 * press(25)})`,
+          }}>{approved > 0.5 ? 'Approved ✓' : 'Approve'}</div>
+          <div style={{
+            width: 280, height: 70, borderRadius: 16, display: 'flex', alignItems: 'center', justifyContent: 'center',
+            background: published ? ORANGE : DARK, ...type(32, 700), color: published ? L.onAccent : CREAM,
+            opacity: mix(0.45, 1, approved), transform: `scale(${1 - 0.06 * press(52)})`,
+          }}>{published ? 'Published' : 'Publish'}</div>
+        </div>
+      </div>
+      {/* 上线通知：链尾重音 */}
+      {toast > 0 && (
+        <div style={{
+          position: 'absolute', right: 56, bottom: 44, padding: '20px 26px', borderRadius: 18, background: DARK, display: 'flex', alignItems: 'center', gap: 16,
+          boxShadow: '0 24px 50px -18px rgba(30,12,4,0.7)', transform: `translateY(${(1 - toast) * 40}px) scale(${mix(0.85, 1, toast)})`, opacity: Math.min(1, toast * 2),
+        }}>
+          <span style={{ width: 16, height: 16, borderRadius: 8, background: ORANGE, boxShadow: `0 0 14px ${ORANGE}` }} />
+          <span style={{ ...type(32, 650), color: CREAM }}>Live · <span style={{ fontVariantNumeric: 'tabular-nums' }}>{Math.round(3214 * ramp(f, 56, 30, EASE.snappy)).toLocaleString('en-US')}</span> views</span>
+        </div>
+      )}
+      {/* 光标 */}
+      {f >= 10 && f < 76 && (
+        <svg width={34} height={46} viewBox="-1 -1 18 26" style={{
+          position: 'absolute', left: p[0], top: p[1], overflow: 'visible', opacity: ramp(f, 10, 4, EASE.out) * (1 - ramp(f, 68, 8, EASE.exit)),
+          transform: `scale(${1 - 0.18 * Math.max(press(25), press(52))})`, transformOrigin: '0 0', filter: 'drop-shadow(0 3px 5px rgba(40,20,8,0.4))',
+        }}>
+          <path d="M0 0 L0 20.5 L4.9 15.9 L8.1 23.4 L11.4 22 L8.3 14.7 L14.8 14.7 Z" fill={DARK} stroke="#fff" strokeWidth={1.6} strokeLinejoin="round" />
+        </svg>
+      )}
+      <Corner n="04" label="Review" color="#8f735c" />
+    </div>
+  );
+};
+
+export const QuadSplitParallelScenes: React.FC = () => {
+  const f = useCurrentFrame();
+  const scenes = [<QuadTL f={f} />, <QuadTR f={f} />, <QuadBL f={f} />, <QuadBR f={f} />];
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT.sans, overflow: 'hidden' }}>
+      <Stage look={L} keyLight={{ x: 0.5, y: 0.5 }} fill={null} grain={0} vignette={0.3} />
+      {QUADS.map((q, i) => (
+        <div key={i} style={{
+          position: 'absolute', left: q.x, top: q.y, width: QW, height: QH, borderRadius: 20, overflow: 'hidden',
+          boxShadow: `inset 0 1px 0 ${alpha('#ffffff', i === 1 ? 0.06 : 0.35)}`,
+        }}>
+          {scenes[i]}
+        </div>
+      ))}
+      <Grain opacity={0.06} blend="overlay" />
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/rhythm/rhythm-interrupt-moves/JumpCutPunchIn.tsx

@@ -0,0 +1,106 @@
+// 三级跳切推近（jump-cut-punch-in）——节奏剪辑｜戈达尔跳切/纪录片 punch-in。
+// FakeDashboard A 固定构图，放大中心钉在第 2 行中间卡（Deploys）中心
+// (1071px, 817px)。三次无补间硬切逐级放大：跳变本身刻意零 interpolate，
+// 切换帧一帧到位。每次跳切帧叠 2f 整画面 brightness 0.92 加深脉冲当 tick。
+// 关键帧：0–34 scale 1.0 → 帧 35 直跳 1.6（35–36 加深脉冲）→ 帧 70 直跳 2.6
+// （70–71 加深脉冲）→ 末挡 86–134 全静止（49f ≥45f）。
+// 质感：放大走 CSS zoom（布局级缩放，Chromium 按放大后尺寸栅格化，2.6x 字边仍锐，Q2）；
+// 前两挡挡内各有 0.8% 极缓漂移推近（in-out，起止无速度突变）让定格不死，跳变仍是硬切；
+// 末挡 16f ease-out 收完后真静止。目标卡是 UI 里真实的"选中态"（强调色细环 + 柔晕），
+// 第三跳"就是它"时选中环加深一档；暗角随挡位收紧把视线压向目标，全片 4.5% 颗粒。
+import React from 'react';
+import { AbsoluteFill, Freeze, useCurrentFrame } from 'remotion';
+import { G, FakeDashboard } from '../../_fixtures/Fixtures';
+import { EASE, Grain, Vignette, mix, ramp } from '../../_fixtures/Polish';
+
+export const JUMP_CUT_PUNCH_IN_DURATION = 135; // 35f 全景 + 35f 中景 + 65f 末挡（含 49f 真静止）
+
+// 目标卡片（3×2 网格第 2 行中间卡）几何：
+// 侧栏 220 + 内边距 36；卡宽 (1920-220-72-56)/3 = 524.67，卡高 (1080-72-72-28)/2 = 454
+const CARD_L = 220 + 36 + 524.67 + 28; // ≈808.67
+const CARD_T = 72 + 36 + 454 + 28; // 590
+const CARD_W = 524.67;
+const CARD_H = 454;
+const ORIGIN_X = CARD_L + CARD_W / 2; // ≈1071
+const ORIGIN_Y = CARD_T + CARD_H / 2; // 817
+
+const JUMP_1 = 35;
+const JUMP_2 = 70;
+const STEPS = [1.0, 1.6, 2.6]; // 挡差 ≥1.5×，否则读作画面抖了一下
+
+// 三级硬切挡位（零补间）
+const stepAt = (f: number): number => (f < JUMP_1 ? 0 : f < JUMP_2 ? 1 : 2);
+
+// 挡内漂移：前两挡 35f 内 in-out 推 0.8%（活镜头），末挡 16f ease-out 推 0.8% 后静止
+const driftAt = (f: number): number => {
+  const st = stepAt(f);
+  if (st === 0) return mix(1, 1.008, ramp(f, 0, JUMP_1, EASE.smooth));
+  if (st === 1) return mix(1, 1.008, ramp(f, JUMP_1, JUMP_2 - JUMP_1, EASE.smooth));
+  return mix(1, 1.008, ramp(f, JUMP_2, 16, EASE.out));
+};
+
+// 跳切帧 2f 加深脉冲（整画面 brightness 0.92）
+const pulseAt = (f: number): number =>
+  (f >= JUMP_1 && f <= JUMP_1 + 1) || (f >= JUMP_2 && f <= JUMP_2 + 1) ? 0.92 : 1;
+
+export const JumpCutPunchIn: React.FC = () => {
+  const frame = useCurrentFrame();
+  const st = stepAt(frame);
+  const s = STEPS[st]; // 挡位倍率：走 CSS zoom（布局级、每挡只变一次）
+  const drift = driftAt(frame); // 挡内漂移：走 transform（亚像素平滑，不触发重排）
+  const b = pulseAt(frame);
+
+  // 选中环：前两挡安静存在，第三跳"就是它"起 8f ease-out 加深一档（元素层，不动画面）
+  const lock = ramp(frame, JUMP_2, 8, EASE.out);
+  const ringA = mix(0.42, 0.85, lock);
+  const haloA = mix(0.07, 0.14, lock);
+
+  return (
+    <AbsoluteFill style={{ background: G.canvas, overflow: 'hidden' }}>
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          filter: b < 1 ? `brightness(${b})` : undefined,
+          transform: `scale(${drift})`,
+          transformOrigin: `${ORIGIN_X}px ${ORIGIN_Y}px`,
+        }}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            // zoom 连自身 left/top 一起放大：left = O/s − O ⇒ 放大中心 O 在屏上不动（同 origin 跳切）
+            left: ORIGIN_X / s - ORIGIN_X,
+            top: ORIGIN_Y / s - ORIGIN_Y,
+            width: 1920,
+            height: 1080,
+            zoom: s,
+          }}
+        >
+          <FakeDashboard variant="A" />
+          {/* 目标卡选中态：强调色 1.5px 细环 + 柔晕，随构图一起放大 */}
+          <div
+            style={{
+              position: 'absolute',
+              left: CARD_L - 5,
+              top: CARD_T - 5,
+              width: CARD_W + 10,
+              height: CARD_H + 10,
+              borderRadius: 19,
+              border: `1.5px solid rgba(91,99,211,${ringA.toFixed(3)})`,
+              boxShadow: `0 0 0 5px rgba(91,99,211,${haloA.toFixed(3)}), 0 18px 48px -18px rgba(91,99,211,${(haloA * 1.6).toFixed(3)})`,
+              boxSizing: 'border-box',
+              pointerEvents: 'none',
+            }}
+          />
+        </div>
+      </div>
+      {/* 镜头暗角：挡位越近压得越重，把视线收向目标卡 */}
+      <Vignette strength={[0.1, 0.14, 0.18][st]} inner={0.52} color="#1a1c24" cx={ORIGIN_X / 1920} cy={0.56} />
+      {/* 颗粒在末挡推完（86f）冻结，末挡尾段像素级真静止 */}
+      <Freeze frame={JUMP_2 + 16} active={frame >= JUMP_2 + 16}>
+        <Grain opacity={0.045} />
+      </Freeze>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/rhythm/sakuga-timing-shift/SakugaTimingShift.tsx

@@ -0,0 +1,288 @@
+// sakuga-timing-shift —— 一拍三转一拍一（作画打拍切换）
+//
+// 第二轮重设计（动画师的作画纸 · 赛璐珞卡）：
+// - look = paper（暖白纸 · 墨 · 朱红）。整个画面是一张动画作画纸：顶部定位孔（peg holes）、淡蓝铅笔的
+//   安全框/十字（field guide）当纹理；底部是一行真正的「摄影表」（タイムシート）——一拍三时只有每 3 格写
+//   原画号 ①④⑦…、中间格画竖线（摄影表里竖线 = 沿用上一张），一拍一时格格都有号。观众直接"看见"每秒画了几张。
+// - 主体是一张赛璐珞风格的 video-shotcraft 产品卡：5px 墨线描边、平涂纸色、无模糊的硬边赛璐珞投影，
+//   卡里是 150px 的「30fps」+「every frame, crafted」——运动本身就是"逐帧作画"的冲刺，与一拍一的 30 张/秒呼应。
+// - 手法：0–48f 驱动帧 q = floor(f/3)·3，16 张原画手翻书式横移（每步 65px），每张姿势不同（摆角 ±5°、
+//   挤压/拉伸交替、一高一低的小跳）；48f 一拍一 + 两帧「冲击帧」（画面反相成墨底、集中线炸开 = 日式作画的高潮标记），
+//   50–68f 逐帧丝滑冲刺折返中央（out-poly(4)），身后挂按速度生成的横向速度线，过冲 40px 后回弹落位。
+//
+// 时间表（30fps，共 150f）：
+//   0–48    一拍三：16 张原画，角标「ON 3s / 3コマ打ち」，摄影表每 3 格一个号
+//   48–49   冲击帧（全片唯一的全画面冲击）；角标切「ON 1s / 1コマ打ち」并 pop 1.25×
+//   50–68   冲刺：out-poly(4) 高初速，scaleX 按速度拉到 ≈1.3、速度线随速度伸缩
+//   68–74   过冲回弹落位；74–80 落地挤压 0.9/1.08 → 1
+//   80–150  hold：镜头 2% 极缓推进（ease-out），角标线沸腾在 108f 冻结
+import React from 'react';
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
+import { EASE, FONT, mix, ramp } from '../../_fixtures/Polish';
+import { LOOKS, SERIF, Stage, alpha, type } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const SAKUGA_TIMING_SHIFT_DURATION = 150; // 一拍三 48f + 冲刺落位 32f + hold 70f
+
+const L = LOOKS.paper;
+const PENCIL = '#4f78b8'; // 淡蓝铅笔（动画纸上的构图线颜色）
+
+const W = 1920;
+const CARD_W = 600;
+const CARD_H = 360;
+const CARD_Y = 330;
+const X_LEFT = 140;
+const X_RIGHT = 1180;
+const X_CENTER = (W - CARD_W) / 2; // 660
+const OVERSHOOT = 40;
+
+const SWITCH = 48;
+const ARRIVE = 68;
+const SETTLE = 74;
+const BOIL_FREEZE = 108;
+
+const C = { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } as const;
+
+// 段一：一拍三——位置线性（机械等距步进是"手翻书"语义），只在 q 上取值
+const pos1 = (t: number) => interpolate(t, [0, SWITCH - 3], [X_LEFT, X_RIGHT], C);
+// 段二：一拍一——out-poly(4) 冲刺到过冲点 → 回弹
+const pos2 = (t: number) =>
+  t < ARRIVE
+    ? interpolate(t, [SWITCH, ARRIVE], [X_RIGHT, X_CENTER - OVERSHOOT], { ...C, easing: Easing.out(Easing.poly(4)) })
+    : interpolate(t, [ARRIVE, SETTLE], [X_CENTER - OVERSHOOT, X_CENTER], { ...C, easing: Easing.inOut(Easing.cubic) });
+
+const h = (n: number) => {
+  const s = Math.sin(n * 127.3) * 43758.5453;
+  return s - Math.floor(s);
+};
+
+// 摄影表
+const STRIP_N = 30;
+const CELL = 44;
+const CELL_GAP = 6;
+const STRIP_W = STRIP_N * CELL + (STRIP_N - 1) * CELL_GAP; // 1494
+const STRIP_X = (W - STRIP_W) / 2;
+const STRIP_Y = 826;
+
+// 赛璐珞卡
+const CelCard: React.FC = () => (
+  <div style={{
+    width: CARD_W, height: CARD_H, borderRadius: 30, background: L.surface, border: `5px solid ${L.ink}`,
+    boxSizing: 'border-box', padding: '30px 40px', position: 'relative', overflow: 'hidden',
+  }}>
+    {/* 赛璐珞的"影色"：右下一块硬边暗面 */}
+    <div style={{ position: 'absolute', right: -60, bottom: -80, width: 360, height: 220, borderRadius: '50%', background: alpha(L.ink, 0.045) }} />
+    <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
+      <ShotcraftMark size={38} tone="light" frameColor={L.ink} />
+      <div style={{ ...type(32, 800), fontFamily: BRAND.font, color: L.ink, letterSpacing: '0.01em' }}>{BRAND.name}</div>
+      <div style={{ marginLeft: 'auto', ...type(22, 600, { mono: true }), color: L.ink2 }}>render 2048</div>
+    </div>
+    <div style={{ ...type(160, 900), color: L.ink, marginTop: 22, letterSpacing: '-0.05em', lineHeight: 0.9 }}>
+      30<span style={{ color: L.accent, fontSize: 120, marginLeft: 6 }}>fps</span>
+    </div>
+    <div style={{ ...type(38, 600), color: L.ink2, marginTop: 18 }}>every frame, crafted</div>
+  </div>
+);
+
+export const SakugaTimingShift: React.FC = () => {
+  const f = useCurrentFrame();
+  const onThrees = f < SWITCH;
+  const impact = f >= SWITCH && f <= SWITCH + 1;
+
+  // ---- 卡片 ----
+  const q = Math.floor(f / 3) * 3;
+  const drawing = q / 3; // 第几张原画
+  const x = onThrees ? pos1(q) : pos2(f);
+  // 一拍三姿势（随 q 冻结）：摆角 + 挤压/拉伸交替 + 一高一低
+  const rot = onThrees
+    ? Math.sin(q * 0.7) * 5
+    : interpolate(f, [SWITCH, SWITCH + 8], [-4, 0], { ...C, easing: Easing.out(Easing.cubic) });
+  const hop = onThrees ? (drawing % 2 === 0 ? -18 : -2) : 0;
+  const poseSX = onThrees ? (drawing % 2 === 0 ? 0.97 : 1.035) : 1;
+  const poseSY = onThrees ? (drawing % 2 === 0 ? 1.035 : 0.97) : 1;
+
+  // 冲刺速度 → 运动拉伸 + 速度线
+  const v = onThrees ? 0 : Math.abs(pos2(f) - pos2(f - 1));
+  const sFac = Math.min(v / 60, 1);
+  const stretchX = 1 + 0.3 * sFac;
+  const stretchY = 1 - 0.1 * sFac;
+  // 落地挤压
+  const sqX = interpolate(f, [SETTLE - 2, SETTLE + 1, SETTLE + 6], [1, 0.92, 1], { ...C, easing: Easing.out(Easing.cubic) });
+  const sqY = interpolate(f, [SETTLE - 2, SETTLE + 1, SETTLE + 6], [1, 1.07, 1], { ...C, easing: Easing.out(Easing.cubic) });
+  // 硬边投影：一拍三随跳高变化，冲刺时拉远
+  const shOff = onThrees ? (hop < -5 ? 18 : 10) : 10 + 10 * sFac;
+
+  // ---- 角标沸腾（每 4 帧换一张，108f 冻结） ----
+  const qb = Math.min(Math.floor(f / 4) * 4, BOIL_FREEZE);
+  const bx = (h(qb + 1) - 0.5) * 5;
+  const by = (h(qb + 2) - 0.5) * 5;
+  const brot = (h(qb + 3) - 0.5) * 2;
+  const ul = [0, 1, 2, 3].map((i) => (h(qb * 3 + i * 7 + 11) - 0.5) * 8);
+  const pop = interpolate(f, [SWITCH, SWITCH + 3, SWITCH + 10], [1, 1.25, 1], { ...C, easing: Easing.out(Easing.cubic) });
+
+  // 入场：角标 / 摄影表上浮（0 帧就有纸与卡，不空白）
+  const labelIn = ramp(f, 0, 14, EASE.out);
+  const stripIn = ramp(f, 4, 16, EASE.out);
+  // hold 段极缓推进
+  const cam = mix(1, 1.02, ramp(f, SETTLE, 150 - SETTLE, EASE.out));
+
+  // 摄影表播放头：一秒一循环；hold 段 110f 停在当前格
+  const head = Math.min(f, 110) % STRIP_N;
+
+  // 速度线（冲刺段）：卡片身后（右侧）9 条横向锥形墨线，长度 ∝ 速度，y 位置逐帧伪随机
+  const speedLines = !onThrees && !impact && sFac > 0.08
+    ? Array.from({ length: 9 }, (_, i) => {
+        const yy = CARD_Y + 20 + h(i * 7.3 + f * 0.37) * (CARD_H - 40);
+        const len = (160 + h(i * 3.1 + f) * 260) * sFac;
+        const x0 = x + CARD_W * stretchX * 0.8 + h(i * 5.7 + f * 1.3) * 80;
+        const th = 3 + h(i * 2.9) * 6;
+        return { yy, len, x0, th };
+      })
+    : [];
+
+  // 冲击帧：集中线（以卡片中心为焦点的放射楔形）
+  const cx = x + CARD_W / 2;
+  const cy = CARD_Y + CARD_H / 2;
+  const focusLines = impact
+    ? Array.from({ length: 64 }, (_, i) => {
+        const a = (i / 64) * Math.PI * 2 + h(i + f) * 0.05;
+        const r0 = 300 + h(i * 1.7 + f) * 220;
+        const r1 = 1500;
+        const wd = 0.012 + h(i * 4.1) * 0.02;
+        const p = (r: number, aa: number) => `${(cx + Math.cos(aa) * r).toFixed(1)},${(cy + Math.sin(aa) * r).toFixed(1)}`;
+        return `M${p(r0, a)} L${p(r1, a - wd)} L${p(r1, a + wd)} Z`;
+      }).join(' ')
+    : '';
+
+  const inkBg = impact; // 冲击帧：画面反相成墨底
+  const lineColor = inkBg ? L.bg[0] : L.ink;
+
+  return (
+    <AbsoluteFill style={{ overflow: 'hidden', fontFamily: FONT.sans, background: L.bg[1] }}>
+      <div style={{ position: 'absolute', inset: 0, transform: `scale(${cam.toFixed(5)})`, transformOrigin: '50% 46%' }}>
+        <Stage look={L} keyLight={{ x: 0.45, y: 0.2 }} fill={null} grain={0.06}>
+          {/* 动画纸：定位孔 */}
+          {[-1, 0, 1].map((k) => (
+            <div key={k} style={{
+              position: 'absolute', top: 34, left: 960 + k * 330 - (k === 0 ? 50 : 17), width: k === 0 ? 100 : 34, height: 34, borderRadius: 17,
+              background: alpha(L.shadow, 0.13), boxShadow: `inset 0 3px 5px ${alpha(L.shadow, 0.22)}`,
+            }} />
+          ))}
+          {/* 淡蓝铅笔 field guide：安全框 + 十字 + 刻度 */}
+          <svg width={1920} height={1080} style={{ position: 'absolute', inset: 0 }}>
+            <g stroke={alpha(PENCIL, 0.22)} strokeWidth={1.5} fill="none">
+              <rect x={110} y={110} width={1700} height={860} rx={4} />
+              <rect x={260} y={190} width={1400} height={700} strokeDasharray="10 8" />
+              <line x1={940} x2={980} y1={540} y2={540} />
+              <line x1={960} x2={960} y1={520} y2={560} />
+              {Array.from({ length: 17 }, (_, i) => <line key={i} x1={110 + i * 106.25} x2={110 + i * 106.25} y1={110} y2={124} />)}
+            </g>
+            <text x={1800} y={100} textAnchor="end" fill={alpha(PENCIL, 0.45)} fontSize={22} fontFamily={FONT.mono}>12 FLD</text>
+          </svg>
+        </Stage>
+
+        {/* 冲击帧：墨底 + 集中线 */}
+        {inkBg && (
+          <AbsoluteFill style={{ background: L.ink }}>
+            <svg width={1920} height={1080} style={{ position: 'absolute', inset: 0 }}>
+              <path d={focusLines} fill={L.bg[0]} opacity={0.9} />
+            </svg>
+          </AbsoluteFill>
+        )}
+
+        {/* 中央落位槽：铅笔虚线框（原画师标的"落点"） */}
+        {!inkBg && (
+          <div style={{
+            position: 'absolute', left: X_CENTER - 10, top: CARD_Y - 10, width: CARD_W + 20, height: CARD_H + 20, borderRadius: 36,
+            border: `2px dashed ${alpha(PENCIL, 0.4)}`, boxSizing: 'border-box',
+          }} />
+        )}
+
+        {/* 速度线 */}
+        {speedLines.length > 0 && (
+          <svg width={1920} height={1080} style={{ position: 'absolute', inset: 0 }}>
+            {speedLines.map((s, i) => (
+              <path key={i} d={`M${s.x0} ${s.yy - s.th / 2} L${s.x0 + s.len} ${s.yy} L${s.x0} ${s.yy + s.th / 2} Z`} fill={L.ink} opacity={0.85} />
+            ))}
+          </svg>
+        )}
+
+        {/* 主卡：硬边赛璐珞投影 + 本体 */}
+        <div style={{
+          position: 'absolute', left: 0, top: CARD_Y,
+          transform: `translate(${x}px, ${hop}px) rotate(${rot}deg) scaleX(${stretchX * sqX * poseSX}) scaleY(${stretchY * sqY * poseSY})`,
+          transformOrigin: '50% 100%',
+        }}>
+          <div style={{
+            position: 'absolute', left: shOff, top: shOff + (onThrees ? -hop * 0.6 : 0), width: CARD_W, height: CARD_H, borderRadius: 30,
+            background: inkBg ? L.accent : L.ink, opacity: inkBg ? 1 : 0.92,
+          }} />
+          <div style={{ position: 'relative' }}><CelCard /></div>
+        </div>
+
+        {/* 角标：ON 3s / ON 1s（手绘沸腾） */}
+        <div style={{ position: 'absolute', left: 150, top: 120, opacity: labelIn, transform: `translateY(${mix(16, 0, labelIn)}px)` }}>
+          <div style={{ transform: `translate(${bx}px, ${by}px) rotate(${brot}deg) scale(${pop})`, transformOrigin: '0% 60%', display: 'inline-block' }}>
+            <div style={{ display: 'flex', alignItems: 'baseline', gap: 26 }}>
+              <div style={{ ...type(112, 900), fontStyle: 'italic', color: lineColor, letterSpacing: '-0.04em' }}>
+                ON <span style={{ color: onThrees ? lineColor : L.accent }}>{onThrees ? '3s' : '1s'}</span>
+              </div>
+              <div style={{ ...type(40, 700, { serif: true }), fontFamily: `${SERIF}`, color: L.accent }}>
+                {onThrees ? '3コマ打ち' : '1コマ打ち'}
+              </div>
+            </div>
+            <svg width={300} height={24} style={{ display: 'block', marginTop: 2, overflow: 'visible' }}>
+              <path d={`M 4 ${12 + ul[0]} Q 90 ${8 + ul[1]} 170 ${13 + ul[2]} T 296 ${10 + ul[3]}`} fill="none"
+                stroke={onThrees ? lineColor : L.accent} strokeWidth={8} strokeLinecap="round" />
+            </svg>
+          </div>
+          <div style={{ ...type(36, 500), color: inkBg ? L.bg[2] : L.ink2, marginTop: 10 }}>
+            {onThrees ? '10 drawings per second' : '30 drawings per second'}
+          </div>
+        </div>
+
+        {/* 右上：摄影表抬头（纹理字） */}
+        <div style={{ position: 'absolute', right: 150, top: 146, textAlign: 'right', opacity: labelIn }}>
+          <div style={{ ...type(26, 600, { mono: true }), color: inkBg ? L.bg[2] : L.ink3, letterSpacing: '0.12em' }}>SC 012 · CUT 04</div>
+          <div style={{ ...type(26, 600, { mono: true }), color: inkBg ? L.bg[2] : L.ink3, letterSpacing: '0.12em', marginTop: 8 }}>
+            {onThrees ? `A${String(drawing + 1).padStart(2, '0')} · 16 dwg` : `B${String(Math.min(f - SWITCH, SETTLE - SWITCH) + 1).padStart(2, '0')} · ${SETTLE - SWITCH + 1} dwg`}
+          </div>
+        </div>
+
+        {/* 摄影表：30 格 = 1 秒。一拍三：每 3 格一个原画号，中间格画竖线（= 沿用）；一拍一：格格有号 */}
+        {!inkBg && (
+          <div style={{ position: 'absolute', left: STRIP_X, top: STRIP_Y, opacity: stripIn, transform: `translateY(${mix(14, 0, stripIn)}px)` }}>
+            <div style={{ position: 'absolute', left: -6, top: -6, width: STRIP_W + 12, height: 76, borderRadius: 8, border: `1.5px solid ${alpha(L.ink, 0.25)}` }} />
+            {Array.from({ length: STRIP_N }).map((_, i) => {
+              const key = onThrees ? i % 3 === 0 : true;
+              const isHead = i === head;
+              const num = onThrees ? i / 3 + 1 : i + 1;
+              return (
+                <div key={i} style={{
+                  position: 'absolute', left: i * (CELL + CELL_GAP), top: 0, width: CELL, height: 64, borderRadius: 4,
+                  background: isHead ? alpha(L.accent, 0.14) : 'transparent',
+                  boxShadow: isHead ? `inset 0 0 0 2.5px ${L.accent}` : `inset 0 0 0 1px ${alpha(L.ink, 0.1)}`,
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                }}>
+                  {key ? (
+                    <div style={{
+                      width: 34, height: 34, borderRadius: 17, border: `2.5px solid ${onThrees ? L.ink : L.accent}`, boxSizing: 'border-box',
+                      display: 'flex', alignItems: 'center', justifyContent: 'center',
+                      ...type(17, 700, { mono: true }), color: onThrees ? L.ink : L.accent,
+                    }}>{num}</div>
+                  ) : (
+                    <div style={{ width: 3, height: 44, borderRadius: 2, background: alpha(L.ink, 0.45) }} />
+                  )}
+                </div>
+              );
+            })}
+            <div style={{ position: 'absolute', left: 0, top: 92, width: STRIP_W, display: 'flex', justifyContent: 'space-between', ...type(32, 500), color: L.ink3 }}>
+              <span>Exposure sheet</span>
+              <span style={{ fontFamily: FONT.mono, fontSize: 28 }}>1 sec · 30 frames</span>
+            </div>
+          </div>
+        )}
+      </div>
+    </AbsoluteFill>
+  );
+};