hyper-animator-codex 0.7.0 → 0.8.0

package/skills/hyper-animator-codex/references/shotcraft/source/demos/title-demote-to-label/TitleDemoteToLabel.tsx

@@ -0,0 +1,174 @@
+// title-demote-to-label —— 大标题降格为节标签
+// 源：perplexity-promo 16–18.5s。大标题居中显影站稳一拍，随后缩小 ~0.3x
+// 平移到左上角变小节标签，内容区（灰阶骨架块）在其下方生长。
+// 附加变体（framer text-selection-title）：标题登场带文本选中蓝高亮块、随后撤掉。
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G } from '../_fixtures/Fixtures';
+
+const FONT = 'Helvetica, Arial, sans-serif';
+const SEL = 'rgba(58, 128, 236, 0.35)';
+
+// 内容骨架块：随 t 依次生长
+const Skeleton: React.FC<{ t: number }> = ({ t }) => {
+  const blocks = [
+    { w: 1500, h: 26 },
+    { w: 1280, h: 26 },
+    { w: 1420, h: 26 },
+    { w: 760, h: 26 },
+    { w: 1500, h: 300, card: true },
+  ];
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 34 }}>
+      {blocks.map((b, i) => {
+        const bt = interpolate(t, [i * 0.16, i * 0.16 + 0.3], [0, 1], {
+          extrapolateLeft: 'clamp',
+          extrapolateRight: 'clamp',
+          easing: Easing.out(Easing.cubic),
+        });
+        return (
+          <div
+            key={i}
+            style={{
+              width: b.w * (0.35 + 0.65 * bt),
+              height: b.h,
+              background: b.card ? G.card : G.line,
+              border: b.card ? `2px solid ${G.border}` : 'none',
+              borderRadius: b.card ? 16 : 13,
+              opacity: bt,
+              transform: `translateY(${(1 - bt) * 28}px)`,
+              boxSizing: 'border-box',
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+// 一个完整的"显影→(可选高亮)→降格→内容生长"小节
+const DemoteScene: React.FC<{
+  frame: number;
+  title: string;
+  withSelection: boolean;
+}> = ({ frame, title, withSelection }) => {
+  // 时间轴（局部帧）
+  const REVEAL = 0; // 0–12 显影
+  const SEL_ON = 14; // 高亮扫入 14–24
+  const SEL_OFF = 32; // 高亮撤掉 32–40
+  const DEMOTE = withSelection ? 44 : 32; // 降格开始
+  const DEMOTE_END = DEMOTE + 20;
+  const GROW = DEMOTE + 12;
+
+  // 显影：blur + 淡入
+  const rev = interpolate(frame, [REVEAL, REVEAL + 12], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+
+  // 降格补间：scale 1 -> 0.3，中心 -> 左上
+  const dem = interpolate(frame, [DEMOTE, DEMOTE_END], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.inOut(Easing.cubic),
+  });
+  const scale = interpolate(dem, [0, 1], [1, 0.3]);
+  // 用 left/top 补间：起点居中（由外层 flex 定位换算），终点左上角
+  const x = interpolate(dem, [0, 1], [960, 150]);
+  const y = interpolate(dem, [0, 1], [480, 110]);
+
+  // 高亮块：从左扫入盖住文字，再从左撤掉
+  let selLeft = 0;
+  let selWidth = 0;
+  if (withSelection) {
+    const on = interpolate(frame, [SEL_ON, SEL_ON + 10], [0, 1], {
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp',
+      easing: Easing.out(Easing.quad),
+    });
+    const off = interpolate(frame, [SEL_OFF, SEL_OFF + 8], [0, 1], {
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp',
+      easing: Easing.in(Easing.quad),
+    });
+    selLeft = off * 100;
+    selWidth = Math.max(0, on * 100 - selLeft);
+  }
+
+  const growT = interpolate(frame, [GROW, GROW + 40], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  return (
+    <AbsoluteFill style={{ background: G.bg }}>
+      {/* 内容骨架区 */}
+      <div style={{ position: 'absolute', left: 150, top: 210 }}>
+        <Skeleton t={growT} />
+      </div>
+      {/* 标题：transform-origin 左中，位置补间 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: x,
+          top: y,
+          transform: `translate(${-(1 - dem) * 50}%, -50%) scale(${scale})`,
+          transformOrigin: 'left center',
+          opacity: rev,
+          filter: `blur(${(1 - rev) * 12}px)`,
+        }}
+      >
+        <div
+          style={{
+            position: 'relative',
+            fontFamily: FONT,
+            fontWeight: 800,
+            fontSize: 128,
+            color: G.ink,
+            letterSpacing: -2,
+            whiteSpace: 'nowrap',
+            padding: '10px 18px',
+          }}
+        >
+          {withSelection && selWidth > 0 && (
+            <div
+              style={{
+                position: 'absolute',
+                left: `${selLeft}%`,
+                top: 8,
+                width: `${selWidth}%`,
+                height: 'calc(100% - 16px)',
+                background: SEL,
+                borderRadius: 6,
+              }}
+            />
+          )}
+          <span style={{ position: 'relative' }}>{title}</span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+export const TitleDemoteToLabel: React.FC = () => {
+  const frame = useCurrentFrame();
+  const SPLIT = 92; // 变体 A 时长
+
+  if (frame < SPLIT) {
+    return <DemoteScene frame={frame} title="Running Subagents" withSelection={false} />;
+  }
+  // 变体 B：文本选中态高亮登场
+  const f = frame - SPLIT;
+  // 白闪转场 3f
+  const flash = interpolate(f, [0, 4], [1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  return (
+    <AbsoluteFill>
+      <DemoteScene frame={f} title="Select the Answer" withSelection={true} />
+      <AbsoluteFill style={{ background: '#fff', opacity: flash, pointerEvents: 'none' }} />
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/trailer-grammar-moves/CardFootageCadence.tsx

@@ -0,0 +1,118 @@
+// card-footage-cadence｜字卡穿插节奏
+// UI 镜头 ↔ 黑底字卡像对话接拍：0–14f UI A 缓推 → 硬切 8f 字卡 SHIP →
+// 硬切 12f UI B 1.6x 裁切缓移 → 8f 字卡 FASTER → 10f UI A 2x 裁切 →
+// 10f 字卡 TODAY(下划线) → 62f 硬切收尾全景定格。
+// UI 段全部带微动（推/移），字卡段除落定微缩(1.05→1, out-cubic)外全静，
+// 动↔静对比即手法本体。所有切换零过渡（条件挂载，无 crossfade）。
+// 收尾 62–105f 轻推收完，105–150f 真静止 45f ≥ 40f。帧确定，无随机。
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from 'remotion';
+import { FakeDashboard } from '../_fixtures/Fixtures';
+
+const CLAMP = { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } as const;
+
+// 黑底白字字卡：落定微缩 1.05→1（out-cubic，段内前 5f 完成），其余全静
+const TitleCard: React.FC<{ text: string; local: number; underline?: boolean }> = ({
+  text,
+  local,
+  underline = false,
+}) => {
+  const scale = interpolate(local, [0, 5], [1.05, 1], {
+    ...CLAMP,
+    easing: Easing.out(Easing.cubic),
+  });
+  return (
+    <AbsoluteFill
+      style={{ background: '#0d0d0d', alignItems: 'center', justifyContent: 'center' }}
+    >
+      <div
+        style={{
+          transform: `scale(${scale})`,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 26,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: 'Helvetica, Arial, sans-serif',
+            fontWeight: 800,
+            fontSize: 170,
+            color: '#ffffff',
+            letterSpacing: 2,
+            lineHeight: 1,
+          }}
+        >
+          {text}
+        </div>
+        {underline && (
+          <div style={{ width: 560, height: 14, background: '#ffffff', borderRadius: 7 }} />
+        )}
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// UI 镜头：包一层 transform 做缓推/缓移，硬切由外层条件挂载保证
+const UiShot: React.FC<{
+  variant: 'A' | 'B';
+  transform: string;
+  origin?: string;
+}> = ({ variant, transform, origin = '50% 50%' }) => (
+  <AbsoluteFill style={{ overflow: 'hidden', background: '#ececea' }}>
+    <div style={{ width: 1920, height: 1080, transform, transformOrigin: origin }}>
+      <FakeDashboard variant={variant} />
+    </div>
+  </AbsoluteFill>
+);
+
+export const CardFootageCadence: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // ---- 分段：切点 14 / 22 / 34 / 42 / 52 / 62，总长 150 ----
+
+  // 段1 0–14f：UI A 全景缓推 1.0→1.08
+  if (frame < 14) {
+    const s = interpolate(frame, [0, 14], [1, 1.08], CLAMP);
+    return <UiShot variant="A" transform={`scale(${s})`} />;
+  }
+
+  // 段2 14–22f：字卡 SHIP
+  if (frame < 22) {
+    return <TitleCard text="SHIP" local={frame - 14} />;
+  }
+
+  // 段3 22–34f：UI B 1.6x 裁切 + 横向缓移（120px 内容位移，屏上 ~192px）。
+  // origin 偏左让列表行图标入画，读得出是 UI（QA 后调：50%→35%）
+  if (frame < 34) {
+    const tx = interpolate(frame - 22, [0, 12], [60, -60], CLAMP);
+    return (
+      <UiShot variant="B" transform={`scale(1.6) translateX(${tx}px)`} origin="35% 50%" />
+    );
+  }
+
+  // 段4 34–42f：字卡 FASTER
+  if (frame < 42) {
+    return <TitleCard text="FASTER" local={frame - 34} />;
+  }
+
+  // 段5 42–52f：UI A 另一处 2x 裁切（左上卡片区）+ 继续缓推 2.0→2.14
+  if (frame < 52) {
+    const s = interpolate(frame - 42, [0, 10], [2, 2.14], CLAMP);
+    return <UiShot variant="A" transform={`scale(${s})`} origin="32% 30%" />;
+  }
+
+  // 段6 52–62f：字卡 TODAY + 下划线
+  if (frame < 62) {
+    return <TitleCard text="TODAY" local={frame - 52} underline />;
+  }
+
+  // 段7 62–150f：收尾全景 UI 定格。62–105f 极缓推收完（out-cubic），
+  // 105f 后 transform 值恒为 1.02，105–150f 真静止 45f。
+  const s = interpolate(frame, [62, 105], [1, 1.02], {
+    ...CLAMP,
+    easing: Easing.out(Easing.cubic),
+  });
+  return <UiShot variant="B" transform={`scale(${s})`} />;
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/trailer-grammar-moves/SmashCut.tsx

@@ -0,0 +1,105 @@
+// smash-cut｜猛切（喧闹→死寂）
+// 0–41f 轰鸣段：5 张 Card 多方向高速飞掠冲镜（穿屏 translate + scale 1.5→3
+// 冲脸 + 微 rotate，各卡错峰跑两轮，第二轮更快=整体仍在加速），背景
+// FakeDashboard A 以 ease-in 持续加速推近 1→1.55 并滚动 rotate 1.8°——
+// 切点前一刻动势最猛。42f 一帧硬切 variant B 整齐静止全景，无一物在动，
+// 停满 93f（>50f）。反差即手法本体。总 135f。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, Card, FakeDashboard } from '../_fixtures/Fixtures';
+
+const CUT = 42; // 硬切帧：>=42 全静止
+
+// 每张飞卡：两轮 pass，第二轮更短（更快），ease-in 让每一程都在加速。
+// from/to 为屏幕外起终点（中心系坐标），飞行中 scale 1.5→3 冲脸。
+type Fly = {
+  from: [number, number];
+  to: [number, number];
+  rot: [number, number]; // 微旋转 起→终
+  seed: number;
+  w: number;
+  h: number;
+};
+
+const FLIES: Fly[] = [
+  { from: [-1400, -120], to: [1400, 60], rot: [-6, 5], seed: 1, w: 440, h: 290 },
+  { from: [1400, 180], to: [-1400, -100], rot: [7, -4], seed: 2, w: 400, h: 260 },
+  { from: [-300, -900], to: [200, 900], rot: [-3, 8], seed: 3, w: 460, h: 300 },
+  { from: [-1300, 800], to: [1300, -750], rot: [5, -7], seed: 4, w: 420, h: 280 },
+  { from: [1350, -780], to: [-1350, 820], rot: [-8, 4], seed: 5, w: 480, h: 310 },
+];
+
+// 卡 i 的第 k 轮：start = i*4 + k*20，时长 16 / 12（第二轮更快）。
+// card4 第二轮 36–48f 在切点 42f 被硬切截断——正中"绝不减速迎接切点"。
+const passWindow = (i: number, k: number): [number, number] => {
+  const start = i * 4 + k * 20;
+  const dur = k === 0 ? 16 : 12;
+  return [start, start + dur];
+};
+
+const FlyCard: React.FC<{ fly: Fly; i: number; frame: number }> = ({ fly, i, frame }) => {
+  // 找当前活跃的 pass（两轮）
+  let active: [number, number] | null = null;
+  for (let k = 0; k < 2; k++) {
+    const [s, e] = passWindow(i, k);
+    if (frame >= s && frame < e) { active = [s, e]; break; }
+  }
+  if (!active) return null;
+  const [s, e] = active;
+  // ease-in：全程加速，越接近终点越快
+  const p = interpolate(frame, [s, e], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.in(Easing.quad),
+  });
+  const x = fly.from[0] + (fly.to[0] - fly.from[0]) * p;
+  const y = fly.from[1] + (fly.to[1] - fly.from[1]) * p;
+  const rot = fly.rot[0] + (fly.rot[1] - fly.rot[0]) * p;
+  const scale = 1.5 + 1.5 * p; // 1.5 → 3 冲脸
+  // 速度门控方向模糊感：ease-in 下瞬时速度 ∝ p，速度越快越糊
+  const blur = 1 + 4 * p;
+  return (
+    <div style={{
+      position: 'absolute', left: 960 - fly.w / 2, top: 540 - fly.h / 2,
+      transform: `translate(${x}px, ${y}px) rotate(${rot}deg) scale(${scale})`,
+      filter: `blur(${blur}px)`,
+    }}>
+      <Card w={fly.w} h={fly.h} seed={fly.seed}
+        style={{ boxShadow: '0 12px 40px rgba(0,0,0,0.25)' }} />
+    </div>
+  );
+};
+
+export const SmashCut: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // —— 死寂段：42f 起 variant B 整齐静止全景，无任何动画属性 ——
+  if (frame >= CUT) {
+    return <FakeDashboard variant="B" />;
+  }
+
+  // —— 轰鸣段：背景 ease-in 加速推近 + 滚动，切点前 3f 仍在加速 ——
+  const bgScale = interpolate(frame, [0, CUT], [1, 1.55], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.in(Easing.quad),
+  });
+  const bgRot = interpolate(frame, [0, CUT], [0, 1.8], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.in(Easing.quad),
+  });
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, overflow: 'hidden', position: 'relative' }}>
+      <div style={{
+        width: 1920, height: 1080,
+        transform: `scale(${bgScale}) rotate(${bgRot}deg)`,
+        transformOrigin: '50% 50%',
+        filter: 'blur(1.5px)', // 背景轻糊，衬前景飞卡
+      }}>
+        <FakeDashboard variant="A" />
+      </div>
+      {FLIES.map((fly, i) => (
+        <FlyCard key={i} fly={fly} i={i} frame={frame} />
+      ))}
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/trailer-grammar-moves/TrailerBumper.tsx

@@ -0,0 +1,103 @@
+// trailer-bumper｜前置速剪预告
+// 结构即全部：三连 9f 速剪（A 整页 / B 整页 / A 2.2x 怼脸特写）→ 6f 纯黑喘息
+// → 正式开场大标题淡入+微升 16f 定格。每个速剪镜头内部带 1→1.04 轻推近。
+// 收尾真静止：49f 后所有动画结束，静止 91f（>40f）。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, FakeDashboard } from '../_fixtures/Fixtures';
+
+// 时间轴（帧）
+const CUT_1 = 0;   // 镜头1：variant A 整页
+const CUT_2 = 9;   // 镜头2：variant B 整页
+const CUT_3 = 18;  // 镜头3：variant A 2.2x 怼脸特写
+const BLACK = 27;  // 纯黑静默
+const TITLE = 33;  // 正式开场
+const TITLE_IN = 16; // 标题淡入+微升时长
+
+// 速剪镜头内部轻推近：镜头内 local 0→9f，scale 1→1.04（线性，活镜头感）
+const push = (frame: number, start: number) =>
+  interpolate(frame, [start, start + 9], [1, 1.04], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+export const TrailerBumper: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // —— 段落 1–3：三连速剪 ——
+  if (frame < BLACK) {
+    let inner: React.ReactNode;
+    if (frame < CUT_2) {
+      // 镜头1：A 整页 + 轻推近
+      inner = (
+        <div style={{ width: 1920, height: 1080, transform: `scale(${push(frame, CUT_1)})`, transformOrigin: '50% 50%' }}>
+          <FakeDashboard variant="A" />
+        </div>
+      );
+    } else if (frame < CUT_3) {
+      // 镜头2：B 整页 + 轻推近
+      inner = (
+        <div style={{ width: 1920, height: 1080, transform: `scale(${push(frame, CUT_2)})`, transformOrigin: '50% 50%' }}>
+          <FakeDashboard variant="B" />
+        </div>
+      );
+    } else {
+      // 镜头3：A 的 2.2x 放大裁切怼脸特写（对准中列卡片），叠加同样的轻推近
+      const s = 2.2 * push(frame, CUT_3);
+      inner = (
+        <div style={{ width: 1920, height: 1080, transform: `scale(${s})`, transformOrigin: '58% 40%' }}>
+          <FakeDashboard variant="A" />
+        </div>
+      );
+    }
+    return (
+      <div style={{ width: 1920, height: 1080, overflow: 'hidden', background: G.bg }}>
+        {inner}
+      </div>
+    );
+  }
+
+  // —— 段落 4：纯黑静默 6f，必须纯黑无物 ——
+  if (frame < TITLE) {
+    return <div style={{ width: 1920, height: 1080, background: '#000000' }} />;
+  }
+
+  // —— 段落 5：正式开场——浅底大标题淡入+微升 16f 后定格 ——
+  const opacity = interpolate(frame, [TITLE, TITLE + TITLE_IN], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const rise = interpolate(frame, [TITLE, TITLE + TITLE_IN], [44, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+  return (
+    <div
+      style={{
+        width: 1920,
+        height: 1080,
+        background: G.bg,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+      }}
+    >
+      <div
+        style={{
+          opacity,
+          transform: `translateY(${rise}px)`,
+          fontFamily: 'Helvetica, Arial, sans-serif',
+          fontWeight: 800,
+          fontSize: 168,
+          color: G.ink,
+          letterSpacing: -2,
+          textAlign: 'center',
+        }}
+      >
+        THE LAUNCH
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/transition-hidden-cut/InvisibleCut.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
+import { CameraMotionBlur } from '@remotion/motion-blur';
+import { FakeDashboard, Card, G } from '../_fixtures/Fixtures';
+
+// invisible-cut：前景遮挡隐形切——一张放大到超出画幅的卡片带重运动模糊
+// 从左侧贴脸扫过，糊满屏幕的瞬间背景从 A 无痕换成 B，卡片飞出右侧时
+// 观众以为还是同一镜。（invisible-cut + foreground-occlusion-swipe）
+const SW_START = 40; // 卡片入场
+const SW_END = 54; // 卡片出场（14f 横扫）
+const CUT = 47; // 硬切点：扫掠中点，卡片完全糊满画面的那一帧
+
+// 卡片中扫掠曲线上的水平位置（容器 left，未缩放坐标）
+const xAt = (f: number) =>
+  // 卡片 scale(1.6) 后半宽 1280：起点右缘 -120 / 终点左缘 2120，均完全出画；
+  // 中点 f47 覆盖 -280..2280，糊满整个 1920 画幅
+  interpolate(f, [SW_START, SW_END], [-2200, 2600], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.3, 0, 0.7, 1),
+  });
+
+const Scene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const x = xAt(frame);
+  // 瞬时速度（px/帧），驱动斜切与残影强度
+  const v = xAt(frame + 0.5) - xAt(frame - 0.5);
+  const sweeping = frame > SW_START - 2 && frame < SW_END + 3;
+  // 背景被"带风"轻推：A 被拖向左，切成 B 后从右侧回稳——卖同一镜错觉
+  const shove =
+    frame < CUT
+      ? interpolate(frame, [SW_START, CUT], [0, -40], {
+          extrapolateLeft: 'clamp',
+          extrapolateRight: 'clamp',
+          easing: Easing.in(Easing.quad),
+        })
+      : interpolate(frame, [CUT, CUT + 13], [40, 0], {
+          extrapolateLeft: 'clamp',
+          extrapolateRight: 'clamp',
+          easing: Easing.out(Easing.cubic),
+        });
+  return (
+    <AbsoluteFill style={{ background: G.bg, overflow: 'hidden' }}>
+      {/* 背景层：硬切藏在遮挡帧内 */}
+      <div style={{ position: 'absolute', inset: 0, transform: `translateX(${shove}px)` }}>
+        {frame < CUT ? <FakeDashboard variant="A" /> : <FakeDashboard variant="B" />}
+      </div>
+      {/* 手动残影：4 层拖尾（在主卡身后），保证遮挡窗口糊满全屏 */}
+      {sweeping &&
+        [4, 3, 2, 1].map((i) => (
+          <div
+            key={i}
+            style={{
+              position: 'absolute',
+              left: xAt(frame - i * 0.55),
+              top: 40,
+              width: 1600,
+              height: 1000,
+              transform: 'scale(1.6)',
+              opacity: [0, 0.35, 0.22, 0.13, 0.07][i],
+              filter: 'blur(14px)',
+            }}
+          >
+            <Card w={1600} h={1000} seed={9} style={{ width: '100%', height: '100%' }} />
+          </div>
+        ))}
+      {/* 主卡：1600x1000 放大 1.6 倍（2560x1600 超出画幅），自带 blur 加强糊感 */}
+      {sweeping && (
+        <div
+          style={{
+            position: 'absolute',
+            left: x,
+            top: 40,
+            width: 1600,
+            height: 1000,
+            transform: `scale(1.6) skewX(${-v * 0.018}deg)`,
+            filter: 'blur(8px)',
+            boxShadow: '0 24px 80px rgba(0,0,0,0.3)',
+            borderRadius: 20,
+          }}
+        >
+          <Card w={1600} h={1000} seed={9} style={{ width: '100%', height: '100%' }} />
+        </div>
+      )}
+    </AbsoluteFill>
+  );
+};
+
+export const InvisibleCut: React.FC = () => (
+  <CameraMotionBlur shutterAngle={300} samples={12}>
+    <Scene />
+  </CameraMotionBlur>
+);