hyper-animator-codex 0.7.1 → 0.8.0

package/skills/hyper-animator-codex/references/shotcraft/source/demos/scroll-brake-moves/BrakeReticleLock.tsx

@@ -0,0 +1,171 @@
+// 组合：长卷急刹 × 准星咬合（brake-reticle-lock）
+// changelog 长列表从下往上高速掠过（加速冲刺→9f 猛减速带 30px 超调回弹），
+// 急刹帧（BRAKE=59）同帧四个 L 形角标从画外四个方向飞入，back-out 超调咬合
+// 锁定停点条目四角；条目同步高亮 + 右侧弹出小标签。
+// 组合命门：角标咬合帧与列表急刹帧必须同帧共振（都在 f=59 起跳），错开即退化。
+// 关键帧：0–12 初始静置 → 12–50 加速冲刺（速度段 blur）→ 50–59 猛减速超调 →
+// 59 急刹+角标飞入 → 59–72 咬合回弹/高亮/标签 → 75–150 真静止 75f。
+// 帧确定，无随机源。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G } from '../_fixtures/Fixtures';
+
+const SCROLL_START = 12;
+const BRAKE = 59;
+const DUR = 150;
+
+const PITCH = 156; // 行高 120 + 间距 36
+const ROW_H = 120;
+const TARGET_ROW = 30;
+const FINAL_SCROLL = TARGET_ROW * PITCH - 480; // 停点条目 top 落在屏幕 y=480
+const LIST_X = 360;
+const LIST_W = 1200;
+
+// 滚动位置：12–50 加速冲刺（sin-in，越滚越快）→ 50–59 猛减速冲过头 30px →
+// 59–63 回弹落定。59 帧为急刹帧（首次停住/反向）。
+const scrollAt = (f: number): number => {
+  if (f <= SCROLL_START) return 0;
+  if (f <= 50) {
+    return interpolate(f, [SCROLL_START, 50], [0, FINAL_SCROLL - 430], {
+      easing: Easing.in(Easing.sin),
+    });
+  }
+  if (f <= BRAKE) {
+    return interpolate(f, [50, BRAKE], [FINAL_SCROLL - 430, FINAL_SCROLL + 30], {
+      easing: Easing.out(Easing.cubic),
+    });
+  }
+  return interpolate(f, [BRAKE, BRAKE + 4], [FINAL_SCROLL + 30, FINAL_SCROLL], {
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.quad),
+  });
+};
+
+// 一行 changelog：图标块 + 标题条 + 尾部日期条，宽度由行号确定（帧确定）
+const Row: React.FC<{ i: number; highlight: number }> = ({ i, highlight }) => (
+  <div
+    style={{
+      position: 'absolute',
+      top: i * PITCH,
+      left: 0,
+      width: LIST_W,
+      height: ROW_H,
+      background: highlight > 0 ? '#ffffff' : G.card,
+      border: `${highlight > 0 ? 3 : 2}px solid ${highlight > 0 ? G.ink : G.border}`,
+      borderRadius: 14,
+      display: 'flex',
+      alignItems: 'center',
+      gap: 24,
+      padding: '0 28px',
+      boxSizing: 'border-box',
+      boxShadow: highlight > 0 ? `0 10px 34px rgba(0,0,0,${0.2 * highlight})` : 'none',
+    }}
+  >
+    <div style={{ width: 44, height: 44, borderRadius: 10, background: G.mid }} />
+    <div style={{ height: 14, width: `${28 + ((i * 31) % 34)}%`, background: G.bar, borderRadius: 7 }} />
+    <div style={{ height: 10, width: `${12 + ((i * 17) % 18)}%`, background: G.line, borderRadius: 5 }} />
+    <div style={{ marginLeft: 'auto', height: 12, width: 120, background: G.line, borderRadius: 6 }} />
+  </div>
+);
+
+// L 形角标：两条粗边组成的直角
+const Corner: React.FC<{ flip: [number, number]; style: React.CSSProperties }> = ({ flip, style }) => (
+  <div style={{ position: 'absolute', width: 46, height: 46, transform: `scale(${flip[0]}, ${flip[1]})`, ...style }}>
+    <div style={{ position: 'absolute', left: 0, top: 0, width: 46, height: 8, background: G.ink, borderRadius: 3 }} />
+    <div style={{ position: 'absolute', left: 0, top: 0, width: 8, height: 46, background: G.ink, borderRadius: 3 }} />
+  </div>
+);
+
+export const BrakeReticleLock: React.FC = () => {
+  const f = useCurrentFrame();
+  const scroll = scrollAt(f);
+
+  // 速度段 blur：由相邻帧位移决定，冲刺段全糊，刹停即清晰
+  const v = Math.abs(scroll - scrollAt(Math.max(0, f - 1)));
+  const blur = Math.min(v * 0.12, 24);
+
+  // 急刹帧起：高亮 0→1（6f），标签 63f 弹出
+  const highlight = interpolate(f, [BRAKE, BRAKE + 6], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // 角标：急刹帧同帧从画外四方向飞入，back-out 超调咬合（59–68f）
+  const lockT = interpolate(f, [BRAKE, BRAKE + 9], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.back(2.4)),
+  });
+  const fly = 1 - lockT; // 1=画外 0=咬合到位
+
+  // 停点条目屏幕坐标（落定后 top=480）
+  const rowTop = TARGET_ROW * PITCH - scroll;
+  const GAP = 10; // 咬合位：角外扩 10px
+  const rect = { x: LIST_X - GAP, y: rowTop - GAP, w: LIST_W + GAP * 2, h: ROW_H + GAP * 2 };
+
+  const corners: Array<{ x: number; y: number; fromX: number; fromY: number; flip: [number, number] }> = [
+    { x: rect.x - 23, y: rect.y - 23, fromX: -620, fromY: -320, flip: [1, 1] },
+    { x: rect.x + rect.w - 23, y: rect.y - 23, fromX: 620, fromY: -320, flip: [-1, 1] },
+    { x: rect.x - 23, y: rect.y + rect.h - 23, fromX: -620, fromY: 320, flip: [1, -1] },
+    { x: rect.x + rect.w - 23, y: rect.y + rect.h - 23, fromX: 620, fromY: 320, flip: [-1, -1] },
+  ];
+
+  // 小标签：63f 从条目右侧弹出（超调）
+  const tagT = interpolate(f, [BRAKE + 4, BRAKE + 12], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.back(2.6)),
+  });
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      {/* 顶栏（不随滚动） */}
+      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 72, background: G.panel, borderBottom: `2px solid ${G.line}`, display: 'flex', alignItems: 'center', padding: '0 32px', gap: 20, boxSizing: 'border-box', zIndex: 3 }}>
+        <div style={{ height: 18, width: 220, background: G.bar, borderRadius: 9 }} />
+        <div style={{ marginLeft: 'auto', width: 36, height: 36, borderRadius: 18, background: G.mid }} />
+      </div>
+
+      {/* changelog 长列表：整体上掠，速度段 blur */}
+      <div style={{ position: 'absolute', left: LIST_X, top: 0, width: LIST_W, height: 1080, filter: blur > 0.5 ? `blur(${blur}px)` : 'none' }}>
+        <div style={{ position: 'absolute', top: -scroll, left: 0, width: LIST_W, height: 40 * PITCH }}>
+          {Array.from({ length: 38 }).map((_, i) => (
+            <Row key={i} i={i} highlight={i === TARGET_ROW ? highlight : 0} />
+          ))}
+        </div>
+      </div>
+
+      {/* 准星角标：急刹帧同帧挂载（组合命门：与刹停同帧共振） */}
+      {f >= BRAKE &&
+        corners.map((c, i) => (
+          <Corner
+            key={i}
+            flip={c.flip}
+            style={{ left: c.x + c.fromX * fly, top: c.y + c.fromY * fly, opacity: Math.min(1, lockT * 3 + 0.35) }}
+          />
+        ))}
+
+      {/* 旁弹小标签 */}
+      {f >= BRAKE + 4 && (
+        <div
+          style={{
+            position: 'absolute',
+            left: rect.x + rect.w + 28,
+            top: rect.y + rect.h / 2 - 27,
+            transform: `scale(${tagT})`,
+            transformOrigin: 'left center',
+            padding: '12px 26px',
+            borderRadius: 27,
+            background: G.ink,
+            color: '#ffffff',
+            fontFamily: 'Helvetica, Arial, sans-serif',
+            fontWeight: 800,
+            fontSize: 26,
+            letterSpacing: 0.5,
+          }}
+        >
+          v2.41
+        </div>
+      )}
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/scroll-brake-moves/ChangelogScrollBrake.tsx

@@ -0,0 +1,117 @@
+// changelog-scroll-brake —— Changelog 长卷急刹
+// ~34 行灰阶条目（行高错落）从下往上高速掠过（easeOutExpo 指数减速），
+// 高速段叠 blur（速度差分驱动，糊成色带），急刹精准停位后目标行抬升
+// （scale 1.03 + 阴影加深）+ 高亮描边，其余行退暗。f=84 后全静止（56f）。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G } from '../_fixtures/Fixtures';
+
+const CL = { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } as const;
+
+// 时间轴
+const SCROLL0 = 14; // 前 14f 初始静置（停在长卷顶部）
+const SCROLL1 = 64; // 急刹停位帧
+const LIFT0 = 68; // 目标行抬升开始
+const LIFT1 = 82;
+
+const COL_W = 1000;
+const COL_X = (1920 - COL_W) / 2;
+const GAP = 20;
+const N = 34;
+const TARGET = 28;
+
+// 行高错落（帧确定性：全由 i 决定）
+const rowH = (i: number) => 72 + ((i * 29) % 3) * 22; // 72 / 94 / 116
+
+// 预计算每行 y
+const rowY: number[] = [];
+{
+  let y = 0;
+  for (let i = 0; i < N; i++) {
+    rowY.push(y);
+    y += rowH(i) + GAP;
+  }
+}
+const TARGET_CY = rowY[TARGET] + rowH(TARGET) / 2;
+const END_T = 540 - TARGET_CY; // 目标行停在画面正中
+const START_T = 80; // 起始：长卷顶部略下
+
+const scrollAt = (f: number): number =>
+  interpolate(f, [SCROLL0, SCROLL1], [START_T, END_T], {
+    easing: Easing.out(Easing.exp),
+    ...CL,
+  });
+
+const Row: React.FC<{ i: number; frame: number }> = ({ i, frame }) => {
+  const isTarget = i === TARGET;
+  const h = rowH(i);
+  const titleW = 30 + ((i * 37) % 45);
+
+  // 目标行抬升 + 高亮；其余行退暗
+  const t = interpolate(frame, [LIFT0, LIFT1], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    ...CL,
+  });
+  const lift = isTarget ? t : 0;
+  const dim = isTarget ? 0 : t;
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: 0,
+        top: rowY[i],
+        width: COL_W,
+        height: h,
+        background: G.card,
+        border: isTarget && lift > 0 ? `3px solid rgba(47,47,47,${lift})` : `2px solid ${G.border}`,
+        borderRadius: 14,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 24,
+        padding: '0 30px',
+        boxSizing: 'border-box',
+        transform: `scale(${1 + 0.03 * lift})`,
+        boxShadow:
+          lift > 0
+            ? `0 ${6 + 22 * lift}px ${16 + 44 * lift}px rgba(0,0,0,${0.08 + 0.28 * lift})`
+            : '0 2px 8px rgba(0,0,0,0.06)',
+        opacity: 1 - 0.62 * dim,
+        zIndex: isTarget ? 2 : 1,
+      }}
+    >
+      <div style={{ width: 88, height: 26, borderRadius: 13, background: isTarget ? '#4a4a48' : G.mid, flexShrink: 0 }} />
+      <div style={{ height: 16, width: `${titleW}%`, background: G.bar, borderRadius: 8 }} />
+      <div style={{ marginLeft: 'auto', height: 12, width: 110, background: G.line, borderRadius: 6, flexShrink: 0 }} />
+    </div>
+  );
+};
+
+export const ChangelogScrollBrake: React.FC = () => {
+  const frame = useCurrentFrame();
+  const T = scrollAt(frame);
+
+  // 速度差分驱动模糊：v 达 60px/f 即满 6px blur
+  const v = Math.abs(scrollAt(frame) - scrollAt(frame - 1));
+  const blur = Math.min(v / 60, 1) * 6;
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      <div
+        style={{
+          position: 'absolute',
+          left: COL_X,
+          top: 0,
+          width: COL_W,
+          height: 1080,
+          transform: `translateY(${T}px)`,
+          filter: blur > 0.15 ? `blur(${blur}px)` : undefined,
+        }}
+      >
+        {Array.from({ length: N }).map((_, i) => (
+          <Row key={i} i={i} frame={frame} />
+        ))}
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/segmented-thumb-hero/SegmentedThumbHero.tsx

@@ -0,0 +1,213 @@
+// segmented-thumb-hero —— 分段控件 thumb 位移当叙事主角拍特写
+// 源：perplexity-promo 2.3–5s。胶囊分段控件（Ask/Computer）带阴影浮入，
+// 超大描边箭头光标滑入点击，白 thumb 左→右 ~8f ease-out 滑动，
+// 到位瞬间新选项前弹出小图标、旧图标收起。
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, interpolate, Easing, spring, useVideoConfig } from 'remotion';
+import { G } from '../_fixtures/Fixtures';
+
+const FONT = 'Helvetica, Arial, sans-serif';
+
+// 超大描边箭头光标
+const ArrowCursor: React.FC<{ x: number; y: number; press: number }> = ({ x, y, press }) => (
+  <svg
+    width={130}
+    height={150}
+    viewBox="0 0 26 30"
+    style={{
+      position: 'absolute',
+      left: x,
+      top: y,
+      transform: `scale(${1 - press * 0.14})`,
+      transformOrigin: '15% 10%',
+      filter: 'drop-shadow(0 8px 16px rgba(0,0,0,0.25))',
+    }}
+  >
+    <path
+      d="M4 2 L4 24 L9.5 18.5 L13 27 L16.8 25.4 L13.3 17 L21 17 Z"
+      fill="#fff"
+      stroke={G.ink}
+      strokeWidth={1.8}
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const SmileLaptop: React.FC<{ size: number }> = ({ size }) => (
+  <svg width={size} height={size} viewBox="0 0 40 40">
+    <rect x={7} y={7} width={26} height={19} rx={3} fill="none" stroke={G.ink} strokeWidth={3} />
+    <circle cx={15.5} cy={14.5} r={1.9} fill={G.ink} />
+    <circle cx={24.5} cy={14.5} r={1.9} fill={G.ink} />
+    <path d="M14.5 19 Q20 23.5 25.5 19" stroke={G.ink} strokeWidth={2.6} fill="none" strokeLinecap="round" />
+    <path d="M4 31 L36 31" stroke={G.ink} strokeWidth={3.4} strokeLinecap="round" />
+  </svg>
+);
+
+const AskIcon: React.FC<{ size: number }> = ({ size }) => (
+  <svg width={size} height={size} viewBox="0 0 40 40">
+    <circle cx={20} cy={20} r={13} fill="none" stroke={G.ink} strokeWidth={3} />
+    <path d="M16 17 q0-5 4.5-5 q4.5 0 4.5 4.2 q0 3-3.4 4.4 q-1.6 0.7-1.6 2.6" stroke={G.ink} strokeWidth={2.8} fill="none" strokeLinecap="round" />
+    <circle cx={20} cy={28} r={1.8} fill={G.ink} />
+  </svg>
+);
+
+export const SegmentedThumbHero: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // ---- 时间轴 ----
+  const FLOAT_IN = 0; // 控件浮入 0–18
+  const CURSOR_IN = 20; // 光标滑入 20–44
+  const CLICK = 48; // 按下
+  const SLIDE = 52; // thumb 开始滑 52–60 (~8f)
+  const SLIDE_END = 60;
+
+  // 控件浮入：从下 160px 带阴影弹簧浮入
+  const floatT = spring({ frame: frame - FLOAT_IN, fps, config: { damping: 14, stiffness: 120, mass: 0.9 } });
+  const ctrlY = interpolate(floatT, [0, 1], [200, 0]);
+
+  // 控件几何（特写尺寸）
+  const CW = 1080; // 控件宽
+  const CH = 220;
+  const PAD = 16;
+  const SEGW = (CW - PAD * 2) / 2;
+
+  // 光标滑入：ease-out 从右下画外飘到 Computer 段上
+  const curT = interpolate(frame, [CURSOR_IN, CURSOR_IN + 24], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+  const curX = interpolate(curT, [0, 1], [1780, 1210]);
+  const curY = interpolate(curT, [0, 1], [1020, 620]);
+  // 按下动作
+  const press = interpolate(frame, [CLICK, CLICK + 3, CLICK + 7], [0, 1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // thumb 位移：~8f ease-out
+  const thumbT = interpolate(frame, [SLIDE, SLIDE_END], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+  const thumbX = PAD + thumbT * SEGW;
+
+  // 到位瞬间：Computer 图标弹出（过冲），Ask 图标收起
+  const iconIn = spring({ frame: frame - SLIDE_END, fps, config: { damping: 10, stiffness: 220, mass: 0.6 } });
+  const laptopScale = frame >= SLIDE_END ? iconIn : 0;
+  const askScale = interpolate(frame, [SLIDE, SLIDE + 6], [1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.in(Easing.cubic),
+  });
+
+  // 点击涟漪
+  const rippleT = interpolate(frame, [CLICK, CLICK + 12], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.quad),
+  });
+
+  const labelStyle = (active: boolean): React.CSSProperties => ({
+    fontFamily: FONT,
+    fontWeight: 700,
+    fontSize: 72,
+    color: active ? G.ink : G.mid,
+    transition: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 22,
+    width: SEGW,
+    height: CH - PAD * 2,
+    position: 'relative',
+    zIndex: 2,
+  });
+
+  const askActive = thumbT < 0.5;
+
+  return (
+    <AbsoluteFill style={{ background: G.bg, alignItems: 'center', justifyContent: 'center' }}>
+      {/* 分段控件 */}
+      <div
+        style={{
+          width: CW,
+          height: CH,
+          borderRadius: CH / 2,
+          background: '#e4e4e2',
+          border: `3px solid ${G.border}`,
+          boxShadow: `0 ${24 - floatT * 12}px ${70 - floatT * 20}px rgba(0,0,0,0.22)`,
+          transform: `translateY(${ctrlY}px)`,
+          opacity: Math.min(1, floatT * 1.5),
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center',
+          padding: PAD,
+          boxSizing: 'border-box',
+        }}
+      >
+        {/* 白色 thumb */}
+        <div
+          style={{
+            position: 'absolute',
+            left: thumbX,
+            top: PAD,
+            width: SEGW,
+            height: CH - PAD * 2,
+            borderRadius: (CH - PAD * 2) / 2,
+            background: '#fff',
+            boxShadow: '0 6px 20px rgba(0,0,0,0.18)',
+            zIndex: 1,
+          }}
+        />
+        {/* 点击涟漪 */}
+        {rippleT > 0 && rippleT < 1 && (
+          <div
+            style={{
+              position: 'absolute',
+              left: PAD + SEGW + SEGW / 2 - 130 * rippleT,
+              top: CH / 2 - PAD - 130 * rippleT + (CH - PAD * 2) / 2 - (CH / 2 - PAD),
+              width: 260 * rippleT,
+              height: 260 * rippleT,
+              borderRadius: '50%',
+              border: `4px solid ${G.mid}`,
+              opacity: 1 - rippleT,
+              zIndex: 3,
+            }}
+          />
+        )}
+        {/* Ask 段 */}
+        <div style={labelStyle(askActive)}>
+          <span
+            style={{
+              display: 'inline-flex',
+              transform: `scale(${askScale})`,
+              width: askScale < 0.05 ? 0 : 78,
+              overflow: 'visible',
+            }}
+          >
+            <AskIcon size={78} />
+          </span>
+          Ask
+        </div>
+        {/* Computer 段 */}
+        <div style={labelStyle(!askActive)}>
+          <span
+            style={{
+              display: 'inline-flex',
+              transform: `scale(${laptopScale})`,
+              width: laptopScale < 0.05 ? 0 : 78,
+              overflow: 'visible',
+            }}
+          >
+            <SmileLaptop size={78} />
+          </span>
+          Computer
+        </div>
+      </div>
+      <ArrowCursor x={curX} y={curY} press={press} />
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/shot-transitions/MaskWipeReal.tsx

@@ -0,0 +1,67 @@
+// mask-wipe 元素遮罩擦除（轮 D）——真实项目卡（card4-hires）放大成
+// 全屏窗口，projects 全景从窗内长出接管："点开一张卡进入它的世界"。
+// 节拍：0–40 全景 hold → 40–85 卡放大成窗（窗内新景反向补偿）→ 85–120 hold。
+import { AbsoluteFill, Img, interpolate, staticFile, useCurrentFrame, Easing } from 'remotion';
+import layout from '../_textures/live-layout.json';
+
+export const MASKWIPE_DUR = 120;
+
+const C4 = layout.projects.cards[3]; // 页面空间 x=781,y=616,w=357,h=312
+const VIEW_Y = 180; // 全景观察窗：页面 y=180 起
+
+export const MaskWipeReal: React.FC = () => {
+  const frame = useCurrentFrame();
+  const t = interpolate(frame, [40, 85], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.5, 0, 0.2, 1),
+  });
+  // 卡在屏幕空间的初始 geometry（全景视口下）
+  const g0 = { x: C4.x, y: C4.y - VIEW_Y, w: C4.w, h: C4.h, r: 12 };
+  const x = interpolate(t, [0, 1], [g0.x, 0]);
+  const y = interpolate(t, [0, 1], [g0.y, 0]);
+  const w = interpolate(t, [0, 1], [g0.w, 1920]);
+  const h = interpolate(t, [0, 1], [g0.h, 1080]);
+  const r = interpolate(t, [0, 1], [g0.r, 0]);
+  // 窗内新景（detail 视角用 papers 页顶部模拟）：从 0.42 缩放反向长到 1
+  const innerScale = interpolate(t, [0, 1], [0.42, 1]);
+  return (
+    <AbsoluteFill style={{ backgroundColor: '#f9f6f1', overflow: 'hidden' }}>
+      {/* 背景：projects 全景 */}
+      <Img
+        src={staticFile('textures/live/projects-full.png')}
+        style={{ position: 'absolute', left: 0, top: -VIEW_Y, width: 1920 }}
+      />
+      {/* 卡片即窗口 */}
+      <div
+        style={{
+          position: 'absolute', left: x, top: y, width: w, height: h,
+          borderRadius: r, overflow: 'hidden',
+          boxShadow: t > 0 && t < 1 ? '0 16px 56px rgba(31,28,23,0.25)' : 'none',
+        }}
+      >
+        {/* 窗内新景：projects 页深部（detail 语义），反向补偿铺满 */}
+        <div
+          style={{
+            position: 'absolute', width: 1920, height: 1080,
+            left: '50%', top: '50%',
+            transform: `translate(-50%, -50%) scale(${innerScale})`,
+            overflow: 'hidden', background: '#f9f6f1',
+          }}
+        >
+          <Img
+            src={staticFile('textures/live/projects-full.png')}
+            style={{ position: 'absolute', left: 0, top: -846, width: 1920 }}
+          />
+        </div>
+        {/* 卡片脸：随放大渐隐露出窗内景 */}
+        <Img
+          src={staticFile('textures/live/card4-hires.png')}
+          style={{
+            position: 'absolute', inset: 0, width: '100%', height: '100%',
+            opacity: Math.max(0, 1 - t * 2.2),
+          }}
+        />
+      </div>
+    </AbsoluteFill>
+  );
+};