hyper-animator-codex 0.7.1 → 0.8.0

package/skills/hyper-animator-codex/references/shotcraft/source/demos/draw-svg-trace/DrawSvgTrace.tsx

@@ -0,0 +1,199 @@
+// 描边生长圈注（draw-svg-trace）——DrawSVG 惯用的入场退场。
+// 屏心 560×380 卡片位置先空着，一条 G.ink 4px 描边沿圆角矩形轮廓跑一整圈
+// 把轮廓"画"出来（rect pathLength=1，dasharray=1，dashoffset 1→0）；
+// 线头叠一段 0.045 长的 6px 粗短 dash 当"笔头"跑在最前。闭合瞬间轮廓闪一次
+// 加深加粗，卡片内容 8f 淡入，描边淡出换成卡片自身 border；随后标题下划线
+// 再来一次短版描边生长（第二用法）。
+// 关键帧：0–8 空场 hold → 8–48 轮廓描边生长 40f（inOut cubic）→
+// 48–56 闪黑加粗（48–50 上 50–56 回）+ 内容 8f 淡入 →
+// 54–64 描边淡出 / 自身 border 淡入 → 68–86 下划线短版生长 → 90–140 真静止 50f。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, TitleBlock } from '../_fixtures/Fixtures';
+
+const CW = 560;
+const CH = 380;
+const CX = (1920 - CW) / 2; // 680
+const CY = (1080 - CH) / 2; // 350
+const PEN = 0.045; // 笔头 dash 长度（占整圈比例）
+
+export const DrawSvgTrace: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 轮廓描边进度：8–48，40f，inOut cubic
+  const p = interpolate(frame, [8, 48], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.inOut(Easing.cubic),
+  });
+
+  // 闭合闪烁：48–50 冲到峰值，50–56 回落。峰值 = 纯黑 + 4→8px 加粗
+  const flashUp = interpolate(frame, [48, 50], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const flashDown = interpolate(frame, [50, 56], [1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.quad),
+  });
+  const flash = frame < 50 ? flashUp : flashDown;
+  const strokeW = 4 + flash * 4;
+  const strokeColor = flash > 0.5 ? '#000000' : G.ink;
+
+  // 内容淡入：48–56（8f）
+  const contentOp = interpolate(frame, [48, 56], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.quad),
+  });
+
+  // 描边淡出 / 卡片自身 border 淡入：54–64
+  const traceOp = interpolate(frame, [54, 64], [1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const borderOp = 1 - traceOp;
+
+  // 笔头：短 dash 覆盖 [p-PEN, p]，只在描边期可见
+  const penOp = p > 0.02 && p < 0.985 ? 1 : 0;
+
+  // 第二用法：标题下划线短版生长 68–86（18f，out cubic）
+  const up = interpolate(frame, [68, 86], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+  const upenOp = up > 0.03 && up < 0.97 ? 1 : 0;
+  const UW = 300; // 下划线长度
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', left: 120, top: 96 }}>
+        <TitleBlock text="DRAW SVG TRACE" size={54} />
+      </div>
+
+      {/* 卡片内容（手写灰阶块：标题条/下划线位/文字行/头像行），闭合后 8f 淡入 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: CX,
+          top: CY,
+          width: CW,
+          height: CH,
+          borderRadius: 14,
+          background: G.card,
+          boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
+          padding: 32,
+          boxSizing: 'border-box',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 18,
+          opacity: contentOp,
+        }}
+      >
+        <div style={{ height: 24, width: 340, background: G.bar, borderRadius: 10 }} />
+        {/* 下划线占位：由下方 SVG 画出，这里留 6px 空隙 */}
+        <div style={{ height: 6 }} />
+        <div style={{ height: 13, width: '86%', background: G.line, borderRadius: 6 }} />
+        <div style={{ height: 13, width: '72%', background: G.line, borderRadius: 6 }} />
+        <div style={{ height: 13, width: '60%', background: G.line, borderRadius: 6 }} />
+        <div style={{ marginTop: 'auto', display: 'flex', gap: 12, alignItems: 'center' }}>
+          <div style={{ width: 34, height: 34, borderRadius: 17, background: G.mid }} />
+          <div style={{ height: 12, width: 96, background: G.line, borderRadius: 6 }} />
+        </div>
+      </div>
+
+      {/* 卡片自身 border：描边淡出时接棒 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: CX,
+          top: CY,
+          width: CW,
+          height: CH,
+          borderRadius: 14,
+          border: `2px solid ${G.border}`,
+          boxSizing: 'border-box',
+          opacity: borderOp,
+        }}
+      />
+
+      {/* 描边生长层：主线 4px + 笔头 6px 短 dash */}
+      {traceOp > 0.001 && (
+        <svg
+          width={CW}
+          height={CH}
+          style={{ position: 'absolute', left: CX, top: CY, overflow: 'visible', opacity: traceOp }}
+        >
+          <rect
+            x={1}
+            y={1}
+            width={CW - 2}
+            height={CH - 2}
+            rx={14}
+            fill="none"
+            stroke={strokeColor}
+            strokeWidth={strokeW}
+            pathLength={1}
+            strokeDasharray="1"
+            strokeDashoffset={1 - p}
+            strokeLinecap="round"
+          />
+          {penOp > 0 && (
+            <rect
+              x={1}
+              y={1}
+              width={CW - 2}
+              height={CH - 2}
+              rx={14}
+              fill="none"
+              stroke={G.ink}
+              strokeWidth={7}
+              pathLength={1}
+              strokeDasharray={`${PEN} ${1 - PEN}`}
+              strokeDashoffset={PEN - p}
+              strokeLinecap="round"
+            />
+          )}
+        </svg>
+      )}
+
+      {/* 第二用法：标题下划线短版描边生长（画完常驻） */}
+      {up > 0.001 && (
+        <svg
+          width={UW}
+          height={8}
+          style={{ position: 'absolute', left: CX + 32, top: CY + 32 + 24 + 10, overflow: 'visible' }}
+        >
+          <line
+            x1={0}
+            y1={4}
+            x2={UW}
+            y2={4}
+            stroke={G.ink}
+            strokeWidth={4}
+            pathLength={1}
+            strokeDasharray="1"
+            strokeDashoffset={1 - up}
+            strokeLinecap="round"
+          />
+          {upenOp > 0 && (
+            <line
+              x1={0}
+              y1={4}
+              x2={UW}
+              y2={4}
+              stroke={G.ink}
+              strokeWidth={7}
+              pathLength={1}
+              strokeDasharray={`${PEN * 2} ${1 - PEN * 2}`}
+              strokeDashoffset={PEN * 2 - up}
+              strokeLinecap="round"
+            />
+          )}
+        </svg>
+      )}
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/edit-hook-moves/LogoStingButton.tsx

@@ -0,0 +1,106 @@
+// logo-sting-button —— 收尾按钮镜头（button ending）
+// 上一镜收黑 → 黑场 → LOGO 入场定住（观众以为结束）→ 12f UI 特写彩蛋硬切 →
+// 硬切回黑底 LOGO 定格。节奏是全部：彩蛋段短促像眨眼。收尾真静止 ≥40f。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { FakeDashboard } from '../_fixtures/Fixtures';
+
+// 时间轴（30fps，共 142f）
+const T = {
+  shotAEnd: 24,     // 0–24f 上一镜（B），f14–24 压暗到纯黑
+  darkenStart: 14,
+  blackEnd: 30,     // 24–30f 黑场 6f
+  logoInEnd: 40,    // 30–40f LOGO 入场 10f
+  holdEnd: 70,      // 40–70f 定住 30f（观众以为结束）
+  eggEnd: 82,       // 70–82f 彩蛋硬切 12f
+  total: 142,       // 82–142f 黑底 LOGO 真静止 60f
+};
+
+const LogoLockup: React.FC<{ opacity: number; scale: number }> = ({ opacity, scale }) => (
+  <div style={{
+    width: 1920, height: 1080, background: '#000',
+    display: 'flex', alignItems: 'center', justifyContent: 'center',
+  }}>
+    <div style={{
+      display: 'flex', alignItems: 'center', gap: 44,
+      opacity, transform: `scale(${scale})`,
+    }}>
+      <div style={{
+        width: 120, height: 120, borderRadius: 28, background: '#fff',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+      }}>
+        {/* 方块内一个黑色小标记，避免纯白块太空 */}
+        <div style={{ width: 44, height: 44, borderRadius: 12, background: '#000' }} />
+      </div>
+      <div style={{
+        fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 800,
+        fontSize: 90, color: '#fff', letterSpacing: 2,
+      }}>
+        ACME
+      </div>
+    </div>
+  </div>
+);
+
+export const LogoStingButton: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // —— 段 1：上一镜（FakeDashboard B）压暗收黑 ——
+  if (frame < T.shotAEnd) {
+    const dark = interpolate(frame, [T.darkenStart, T.shotAEnd - 1], [0, 1], {
+      extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+      easing: Easing.in(Easing.cubic),
+    });
+    return (
+      <div style={{ width: 1920, height: 1080, background: '#000', position: 'relative', overflow: 'hidden' }}>
+        <FakeDashboard variant="B" />
+        <div style={{ position: 'absolute', inset: 0, background: '#000', opacity: dark }} />
+      </div>
+    );
+  }
+
+  // —— 段 2：黑场 6f ——
+  if (frame < T.blackEnd) {
+    return <div style={{ width: 1920, height: 1080, background: '#000' }} />;
+  }
+
+  // —— 段 4：彩蛋硬切 12f（variant A 按钮区 2.4x 裁切 + 角落小圆点 tick 闪 2f）——
+  if (frame >= T.holdEnd && frame < T.eggEnd) {
+    const egg = frame - T.holdEnd; // 0..11
+    // tick 圆点：第 4–5f 亮 2f，像眨眼
+    const tickOn = egg >= 4 && egg < 6;
+    return (
+      <div style={{ width: 1920, height: 1080, background: '#ececea', position: 'relative', overflow: 'hidden' }}>
+        <div style={{
+          position: 'absolute', inset: 0,
+          // 2.4x 放大：把第 1 张卡片底部"按钮行"（头像圆+文字条）平移到画面中心
+          // 原坐标 (839, 531)（第 2 列卡片底部头像圆+文字条）→ 屏幕中心 (960, 540)
+          // 选中列卡片可把左侧深色 sidebar 完全推出画面，特写更纯粹
+          transform: 'translate(-1054px, -734px) scale(2.4)', transformOrigin: '0 0',
+        }}>
+          <FakeDashboard variant="A" />
+        </div>
+        {tickOn && (
+          <div style={{
+            position: 'absolute', right: 90, bottom: 80,
+            width: 56, height: 56, borderRadius: 28, background: '#2f2f2f',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+          }}>
+            <div style={{ width: 20, height: 20, borderRadius: 10, background: '#fff' }} />
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // —— 段 3 + 段 5：黑底 LOGO（入场 → 定住 → 彩蛋后定格收尾，真静止）——
+  const opacity = interpolate(frame, [T.blackEnd, T.logoInEnd], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+  const scale = interpolate(frame, [T.blackEnd, T.logoInEnd], [0.96, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+  return <LogoLockup opacity={opacity} scale={scale} />;
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/element-body-moves/AxialStretch.tsx

@@ -0,0 +1,112 @@
+// axial-stretch —— 轴向拉伸速度感
+// 三张 Card 从右外依次横向飞入落位，飞行途中沿运动轴速度驱动拉伸
+// （scaleX 峰值 ≈2.2 / scaleY ≈0.72，糖稀拉丝感），落点 Back.out 式回弹。
+// 速度用位置差分 p(f)-p(f-1) 驱动，低于阈值不拉伸。收尾真静止 ≥35f。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, Card, TitleBlock } from '../_fixtures/Fixtures';
+
+const W = 1920;
+const CARD_W = 380;
+const CARD_H = 230;
+const GAP = 60;
+const ROW_W = 3 * CARD_W + 2 * GAP; // 1260
+const ROW_X0 = (W - ROW_W) / 2; // 330
+const ROW_Y = (1080 - CARD_H) / 2; // 425
+
+const START_X = 1980; // 完全在画面右外
+const FLIGHT = 36; // 飞行帧数
+const STAGGER = 12; // 错峰
+const FIRST = 10; // 首卡起飞帧
+const SQUASH = 8; // 落点回弹帧数
+
+const VEL_MIN = 2; // px/frame，低于此不拉伸
+const VEL_REF = 140; // px/frame，达到此速度即满拉伸
+const STRETCH_X = 1.2; // scaleX 峰值 1 + 1.2 = 2.2
+const SQUISH_Y = 0.28; // scaleY 谷值 1 - 0.28 = 0.72
+
+// poly(4) in-out：中段速度峰值 ≈ 4× 平均速度，够冲
+const flightEase = Easing.inOut(Easing.poly(4));
+
+const posAt = (f: number, start: number, targetX: number): number =>
+  interpolate(f, [start, start + FLIGHT], [START_X, targetX], {
+    easing: flightEase,
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+const FlyCard: React.FC<{ i: number; frame: number }> = ({ i, frame }) => {
+  const start = FIRST + i * STAGGER;
+  const targetX = ROW_X0 + i * (CARD_W + GAP);
+  const land = start + FLIGHT;
+
+  const x = posAt(frame, start, targetX);
+  // 速度 = 位置差分（帧时间解耦，纯由位置函数决定）
+  const v = Math.abs(posAt(frame, start, targetX) - posAt(frame - 1, start, targetX));
+  const s = Math.min(Math.max((v - VEL_MIN) / (VEL_REF - VEL_MIN), 0), 1);
+
+  const stretchX = 1 + STRETCH_X * s;
+  const stretchY = 1 - SQUISH_Y * s;
+
+  // 落点回弹：scaleX 过冲到 0.85 再回 1（横向被"撞停"压扁），8f
+  const sqX = interpolate(frame, [land, land + SQUASH / 2, land + SQUASH], [1, 0.85, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const sqY = interpolate(frame, [land, land + SQUASH / 2, land + SQUASH], [1, 1.1, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: 0,
+        top: ROW_Y,
+        // 顺序：先 translate 再 scale；transformOrigin 设运动后缘（向左飞 → 右缘）
+        transform: `translateX(${x}px) scaleX(${stretchX * sqX}) scaleY(${stretchY * sqY})`,
+        transformOrigin: '100% 50%',
+      }}
+    >
+      <Card w={CARD_W} h={CARD_H} seed={i + 1} />
+    </div>
+  );
+};
+
+export const AxialStretch: React.FC = () => {
+  const frame = useCurrentFrame();
+  const titleOp = interpolate(frame, [0, 10], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', top: 120, width: '100%', textAlign: 'center', opacity: titleOp }}>
+        <TitleBlock text="AXIAL STRETCH" size={72} />
+      </div>
+      {/* 落位虚线槽，标出目标位置 */}
+      {[0, 1, 2].map((i) => (
+        <div
+          key={`slot-${i}`}
+          style={{
+            position: 'absolute',
+            left: ROW_X0 + i * (CARD_W + GAP),
+            top: ROW_Y,
+            width: CARD_W,
+            height: CARD_H,
+            border: `2px dashed ${G.bar}`,
+            borderRadius: 14,
+            boxSizing: 'border-box',
+          }}
+        />
+      ))}
+      {[0, 1, 2].map((i) => (
+        <FlyCard key={i} i={i} frame={frame} />
+      ))}
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/element-body-moves/ContactShadowLift.tsx

@@ -0,0 +1,117 @@
+// contact-shadow-lift｜接触阴影离面抬升
+// 浅底上一排 3 张卡，逐张被"点名"抬起：卡 translateY(-28px)+scale(1.08)，
+// 其正下方独立椭圆阴影同步放大变淡——纸片离桌感；落回时阴影收紧变实，
+// 落地 2f 卡壳 scale 0.99 微压。三张依次各来一遍。收尾真静止 ≥35f。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, Card } from '../_fixtures/Fixtures';
+
+const outCubic = Easing.out(Easing.cubic);
+const inCubic = Easing.in(Easing.cubic);
+
+// 每张卡的局部时间轴（局部帧 t）：
+// [0,10)   抬起  out-cubic
+// [10,28)  悬停 18f
+// [28,36)  落回  in-cubic
+// [36,38)  落地卡壳 scale 0.99
+// [38,43)  回弹 0.99→1.0 out-cubic
+// t<0 或 t>=43 完全静止（rest 态）
+const LIFT_Y = -28; // 原案 -8 → 加码 -20 → QA 保险再到 -28
+const LIFT_S = 1.08;
+
+const cardMotion = (t: number) => {
+  const y = interpolate(t, [0, 10], [0, LIFT_Y], {
+    easing: outCubic, extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  }) + interpolate(t, [28, 36], [0, -LIFT_Y], {
+    easing: inCubic, extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+
+  let s: number;
+  if (t < 28) {
+    s = interpolate(t, [0, 10], [1, LIFT_S], {
+      easing: outCubic, extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    });
+  } else if (t < 38) {
+    s = interpolate(t, [28, 36], [LIFT_S, 0.99], {
+      easing: inCubic, extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    });
+  } else {
+    s = interpolate(t, [38, 43], [0.99, 1], {
+      easing: outCubic, extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    });
+  }
+
+  // 抬升进度 0（贴桌）→1（悬空），驱动阴影
+  const lift = interpolate(t, [0, 10], [0, 1], {
+    easing: outCubic, extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  }) - interpolate(t, [28, 36], [0, 1], {
+    easing: inCubic, extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+
+  return { y, s, lift };
+};
+
+const CARD_W = 360;
+const CARD_H = 220;
+const GAP = 120;
+const STARTS = [2, 42, 82]; // 三张卡依次点名，间隔 40f；末次动画止于 f125，留 35f 真静止
+
+export const ContactShadowLift: React.FC = () => {
+  const frame = useCurrentFrame();
+  const rowW = CARD_W * 3 + GAP * 2;
+  const left0 = (1920 - rowW) / 2;
+  const top = (1080 - CARD_H) / 2 - 20;
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      {/* 假 dashboard 式顶栏，给浅底一点场景感 */}
+      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 84, background: G.panel, borderBottom: `2px solid ${G.line}`, display: 'flex', alignItems: 'center', padding: '0 48px', gap: 24, boxSizing: 'border-box' }}>
+        <div style={{ width: 40, height: 40, borderRadius: 10, background: G.side }} />
+        <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>
+
+      {[0, 1, 2].map((i) => {
+        const t = frame - STARTS[i];
+        const { y, s, lift } = cardMotion(t);
+        const x = left0 + i * (CARD_W + GAP);
+
+        // 独立接触阴影（不是 box-shadow）：卡正下方椭圆径向渐变
+        const shScale = 1 + 0.72 * lift;     // 1.0 → 1.72（对比再拉大）
+        const shOpacity = 0.55 - 0.37 * lift; // 0.55 → 0.18
+        const shW = CARD_W * 0.88;
+        const shH = 44;
+
+        return (
+          <React.Fragment key={i}>
+            <div
+              style={{
+                position: 'absolute',
+                left: x + (CARD_W - shW) / 2,
+                top: top + CARD_H - shH / 2 - 4,
+                width: shW,
+                height: shH,
+                borderRadius: '50%',
+                background: 'radial-gradient(ellipse at center, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.45) 42%, rgba(0,0,0,0) 72%)',
+                transform: `scale(${shScale})`,
+                opacity: shOpacity,
+              }}
+            />
+            <Card
+              w={CARD_W}
+              h={CARD_H}
+              seed={i + 2}
+              style={{
+                position: 'absolute',
+                left: x,
+                top,
+                boxShadow: 'none',
+                transform: `translateY(${y}px) scale(${s})`,
+              }}
+            />
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/fui-hud-moves/LineUnfoldPanel.tsx

@@ -0,0 +1,125 @@
+// line-unfold-panel —— 一线展面（Jarvis/FUI 母题）
+// 暗底。入场两拍：3px 细线从中点向两侧极快抽出（5f）→ 定宽后纵向
+// 撑开成 Card 面板（9f，out 缓动）→ 内容延迟淡入。
+// 静置展示后反向退场：压扁成线（7f）→ 线缩成点 → 熄灭，像老 CRT 关机。
+// f0–12 空场静置；入场 f12–34；持面板至 f78；退场 f78–98；末静止 ≥42f（140f）。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, Card } from '../_fixtures/Fixtures';
+
+const PANEL_W = 760;
+const PANEL_H = 460;
+const CX = 960;
+const CY = 540;
+
+// —— 入场时间表 ——
+const T0 = 12; // 点亮起点
+const LINE_END = T0 + 5; // 线抽出完成 f17
+const UNFOLD_END = LINE_END + 9; // 面板撑开完成 f26
+const CONTENT_END = UNFOLD_END + 8; // 内容淡入完成 f34
+
+// —— 退场时间表 ——
+const OUT0 = 78; // 开始压扁
+const COLLAPSE_END = OUT0 + 7; // 压成线 f85
+const SHRINK_END = COLLAPSE_END + 6; // 线缩成点 f91
+const OFF = SHRINK_END + 4; // 点熄灭 f95
+
+const clamp = { extrapolateLeft: 'clamp' as const, extrapolateRight: 'clamp' as const };
+
+export const LineUnfoldPanel: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 入场：scaleX（线抽出）快进快停，入场后保持 1
+  const inSX = interpolate(frame, [T0, LINE_END], [0.004, 1], {
+    easing: Easing.out(Easing.poly(4)),
+    ...clamp,
+  });
+  // 入场：scaleY（纵向撑开），线阶段压在 3px
+  const inSY = interpolate(frame, [LINE_END, UNFOLD_END], [3 / PANEL_H, 1], {
+    easing: Easing.out(Easing.cubic),
+    ...clamp,
+  });
+  // 内容淡入（面板撑开过半才开始）
+  const contentOp = interpolate(frame, [UNFOLD_END - 3, CONTENT_END], [0, 1], {
+    easing: Easing.out(Easing.quad),
+    ...clamp,
+  });
+
+  // 退场：先压 Y 回线，再缩 X 回点
+  const outSY = interpolate(frame, [OUT0, COLLAPSE_END], [1, 3 / PANEL_H], {
+    easing: Easing.in(Easing.cubic),
+    ...clamp,
+  });
+  const outSX = interpolate(frame, [COLLAPSE_END, SHRINK_END], [1, 0.004], {
+    easing: Easing.in(Easing.poly(4)),
+    ...clamp,
+  });
+  // 内容在压扁前先撤
+  const contentOutOp = interpolate(frame, [OUT0 - 4, OUT0 + 2], [1, 0], clamp);
+
+  const sx = frame < OUT0 ? inSX : outSX;
+  const sy = frame < OUT0 ? inSY : outSY;
+
+  // 末点熄灭：opacity 快落。f >= OFF 后整个元素条件卸载 → 真静止
+  const dotOp = interpolate(frame, [SHRINK_END, OFF], [1, 0], {
+    easing: Easing.in(Easing.quad),
+    ...clamp,
+  });
+
+  const alive = frame >= T0 && frame < OFF;
+  // 面板阶段（sy 足够大）显示卡片内容；线/点阶段显示发光条
+  const isPanel = sy > 0.15;
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: '#1c1c1b', overflow: 'hidden', position: 'relative' }}>
+      <div
+        style={{
+          position: 'absolute',
+          top: 120,
+          width: '100%',
+          textAlign: 'center',
+          fontFamily: 'Helvetica, Arial, sans-serif',
+          fontWeight: 800,
+          fontSize: 52,
+          color: G.mid,
+          letterSpacing: 2,
+        }}
+      >
+        LINE UNFOLD PANEL
+      </div>
+      {alive && (
+        <div
+          style={{
+            position: 'absolute',
+            left: CX - PANEL_W / 2,
+            top: CY - PANEL_H / 2,
+            width: PANEL_W,
+            height: PANEL_H,
+            transform: `scaleX(${sx}) scaleY(${sy})`,
+            transformOrigin: '50% 50%',
+            opacity: dotOp,
+          }}
+        >
+          {isPanel ? (
+            <>
+              <Card w={PANEL_W} h={PANEL_H} seed={3} style={{ border: `2px solid ${G.mid}`, boxShadow: '0 0 40px rgba(255,255,255,0.18)' }} />
+              {/* 内容层单独控 opacity：盖一层暗板模拟"内容未亮" */}
+              <div
+                style={{
+                  position: 'absolute',
+                  inset: 2,
+                  borderRadius: 12,
+                  background: G.card,
+                  opacity: 1 - Math.min(contentOp, contentOutOp),
+                }}
+              />
+            </>
+          ) : (
+            // 线/点阶段：白色发光条填满整个盒（被 scale 压成线）
+            <div style={{ width: '100%', height: '100%', background: '#ffffff', boxShadow: '0 0 60px rgba(255,255,255,0.9)', borderRadius: 2 }} />
+          )}
+        </div>
+      )}
+    </div>
+  );
+};