hyper-animator-codex 0.7.0 → 0.8.0

package/skills/hyper-animator-codex/references/shotcraft/source/demos/montage-rhythm-moves/WrightTripleCut.tsx

@@ -0,0 +1,175 @@
+// 三连咔哒特写（wright-triple-cut）——Edgar Wright《僵尸肖恩》流程三连快切:
+// 帧 0–24 全景 hold(FakeDashboard A);随后三个 10f 特写硬切连打,每个特写
+// 前 4f 静止、中 3f 动作、后 3f 静止:①25–34 光标按下按钮(圆点缩一圈+按钮变深)
+// ②35–44 开关左拨右(圆钮 3f 滑动+轨道 G.mid→G.ink) ③45–54 大数字 rotateX 翻牌 0→1;
+// 帧 55 甩回全景:6f whip translateX 滑入,高速段 3 层错帧副本模拟运动模糊,
+// 中上卡片提亮泛光+大 "1" 标记结果;帧 ~68 起全静止到 130(真静止 ≥60f)。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { FakeDashboard, G } from '../_fixtures/Fixtures';
+
+const HOLD_END = 25; // 全景 hold 结束
+const C1 = 25; // 特写一:光标按下
+const C2 = 35; // 特写二:开关
+const C3 = 45; // 特写三:翻牌
+const WHIP = 55; // 甩回全景
+
+// 特写统一舞台:G.panel 底 + 居中大白卡,主体屏心、同倍率感
+const CloseupStage: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div style={{ width: 1920, height: 1080, background: G.panel, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+    <div style={{
+      width: 1400, height: 800, background: G.card, border: `4px solid ${G.border}`,
+      borderRadius: 28, boxShadow: '0 6px 24px rgba(0,0,0,0.08)',
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+    }}>
+      {children}
+    </div>
+  </div>
+);
+
+// 结果卡片(3×2 网格中上格)的几何:sidebar 220 + padding 36,列宽 524,行高 454
+const RESULT = { left: 808, top: 108, w: 524, h: 454 };
+
+export const WrightTripleCut: React.FC = () => {
+  const f = useCurrentFrame();
+
+  // ===== 帧 0–24:全景 hold =====
+  if (f < HOLD_END) {
+    return <FakeDashboard variant="A" />;
+  }
+
+  // ===== 特写一(25–34):光标从悬停到按下,按钮变深 =====
+  if (f < C2) {
+    const t = f - C1; // 局部 0–9;动作窗 4–6
+    const p = interpolate(t, [4, 7], [0, 1], {
+      easing: Easing.out(Easing.cubic), extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    });
+    const cursorScale = 1 - 0.3 * p; // 1 → 0.7 缩一圈
+    const btnBg = p < 0.5 ? G.bar : '#5c5c5a'; // 按下瞬间变深
+    const btnY = 8 * p; // 按钮被压下 8px
+    return (
+      <CloseupStage>
+        <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <div style={{
+            width: 620, height: 190, borderRadius: 40, background: btnBg,
+            border: `5px solid ${G.mid}`, boxSizing: 'border-box',
+            transform: `translateY(${btnY}px)`,
+            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14,
+          }}>
+            <div style={{ width: 260, height: 30, borderRadius: 15, background: p < 0.5 ? G.card : G.line }} />
+          </div>
+          {/* 圆形光标点:悬停在按钮中心,按下缩一圈 */}
+          <div style={{
+            position: 'absolute', left: '50%', top: '50%',
+            width: 96, height: 96, marginLeft: -48, marginTop: -48 + btnY,
+            borderRadius: 48, background: G.ink, border: '8px solid #ffffff',
+            boxSizing: 'border-box', transform: `scale(${cursorScale})`,
+            boxShadow: '0 4px 14px rgba(0,0,0,0.3)',
+          }} />
+        </div>
+      </CloseupStage>
+    );
+  }
+
+  // ===== 特写二(35–44):开关从左拨到右 =====
+  if (f < C3) {
+    const t = f - C2;
+    const p = interpolate(t, [4, 7], [0, 1], {
+      easing: Easing.out(Easing.cubic), extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    });
+    const trackW = 560; const trackH = 240; const knob = 192; const pad = 24;
+    const knobX = pad + p * (trackW - knob - pad * 2); // 左 → 右
+    const trackBg = p < 0.5 ? G.mid : G.ink;
+    return (
+      <CloseupStage>
+        <div style={{
+          position: 'relative', width: trackW, height: trackH, borderRadius: trackH / 2,
+          background: trackBg, boxSizing: 'border-box',
+        }}>
+          <div style={{
+            position: 'absolute', top: pad, left: knobX,
+            width: knob, height: knob, borderRadius: knob / 2, background: G.card,
+            boxShadow: '0 6px 18px rgba(0,0,0,0.35)',
+          }} />
+        </div>
+      </CloseupStage>
+    );
+  }
+
+  // ===== 特写三(45–54):大数字翻牌 0 → 1(rotateX) =====
+  if (f < WHIP) {
+    const t = f - C3;
+    const p = interpolate(t, [4, 7], [0, 1], {
+      easing: Easing.inOut(Easing.cubic), extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    });
+    const showOne = p >= 0.5;
+    const angle = showOne ? (1 - p) * 2 * 90 : -p * 2 * 90; // 0→-90 折走,90→0 翻入
+    const digit = showOne ? '1' : '0';
+    return (
+      <CloseupStage>
+        <div style={{ perspective: 1200 }}>
+          <div style={{
+            width: 440, height: 560, borderRadius: 32, background: G.ink,
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            transform: `rotateX(${angle}deg)`, backfaceVisibility: 'hidden',
+            boxShadow: '0 8px 28px rgba(0,0,0,0.25)',
+          }}>
+            <div style={{
+              fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 800,
+              fontSize: 420, color: '#ffffff', lineHeight: 1,
+            }}>
+              {digit}
+            </div>
+          </div>
+        </div>
+      </CloseupStage>
+    );
+  }
+
+  // ===== 帧 55 起:甩回全景 + 结果卡片亮起 =====
+  const t = f - WHIP;
+  // whip:6f 从右侧 900px 高速滑入,poly(5) out 急减速;t≥6 恒为 0(真静止)
+  const whipX = t >= 6 ? 0 : interpolate(t, [0, 6], [900, 0], {
+    easing: Easing.out(Easing.poly(5)), extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+  const speeding = t < 4; // 高速段:3 层错帧副本模拟模糊感
+
+  // 结果卡片:泛光 57–84 缓升后恒定(帧 84 起真静止);弹一下 57–64 后恒为 1
+  const glow = interpolate(f, [57, 84], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+  const pop = f >= 64 ? 1 : interpolate(f, [57, 60, 64], [1, 1.07, 1], {
+    easing: Easing.out(Easing.cubic), extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+
+  const dash = (x: number, opacity: number, key: string) => (
+    <div key={key} style={{ position: 'absolute', left: 0, top: 0, transform: `translateX(${x}px)`, opacity }}>
+      <FakeDashboard variant="A" />
+    </div>
+  );
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, overflow: 'hidden', position: 'relative' }}>
+      {speeding && dash(whipX + 220, 0.18, 'echo2')}
+      {speeding && dash(whipX + 110, 0.35, 'echo1')}
+      {dash(whipX, 1, 'main')}
+      {/* 结果卡片提亮泛光 */}
+      <div style={{
+        position: 'absolute',
+        left: RESULT.left, top: RESULT.top, width: RESULT.w, height: RESULT.h,
+        transform: `translateX(${whipX}px) scale(${pop})`,
+        borderRadius: 14, boxSizing: 'border-box',
+        background: `rgba(255,255,255,${0.72 * glow})`,
+        border: `5px solid rgba(47,47,47,${glow})`,
+        boxShadow: `0 0 ${70 * glow}px rgba(255,255,255,${0.95 * glow}), 0 0 ${26 * glow}px rgba(47,47,47,${0.28 * glow})`,
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        opacity: glow,
+      }}>
+        <div style={{
+          fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 800,
+          fontSize: 260, color: G.ink, lineHeight: 1,
+        }}>
+          1
+        </div>
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/morph-from-primitive/MorphFromPrimitive.tsx

@@ -0,0 +1,190 @@
+// morph-from-primitive｜原型变形
+// 正圆呼吸一拍(anticipation) → path d 逐数值插值变形成 520×300 圆角矩形卡片轮廓
+// → 卡片内部灰阶内容条淡入。全部帧驱动、确定性。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G } from '../_fixtures/Fixtures';
+
+const CX = 960;
+const CY = 540;
+const R = 130;
+const RECT_W = 520;
+const RECT_H = 300;
+const RECT_R = 20;
+
+// ---- 同构 path：M + 8 段 cubic（4 直边段 + 4 圆角段），圆与圆角矩形共用锚点拓扑 ----
+// 圆角矩形锚点（中心坐标系，顺时针，从右边上端点起）：
+// A0(hw,-ihh) 右边上 → A1(hw,ihh) 右边下 → A2(iw,hh) 底边右 → A3(-iw,hh) 底边左
+// → A4(-hw,ihh) 左边下 → A5(-hw,-ihh) 左边上 → A6(-iw,-hh) 顶边左 → A7(iw,-hh) 顶边右 → A0
+const hw = RECT_W / 2; // 260
+const hh = RECT_H / 2; // 150
+const iw = hw - RECT_R; // 240
+const ihh = hh - RECT_R; // 130
+const KAPPA = 0.5522847498;
+
+type Seg = [number, number, number, number, number, number]; // c1x c1y c2x c2y x y
+type Shape = { start: [number, number]; segs: Seg[] };
+
+const line = (from: [number, number], to: [number, number]): Seg => [
+  from[0] + (to[0] - from[0]) / 3,
+  from[1] + (to[1] - from[1]) / 3,
+  from[0] + ((to[0] - from[0]) * 2) / 3,
+  from[1] + ((to[1] - from[1]) * 2) / 3,
+  to[0],
+  to[1],
+];
+// 90° 圆角弧 from → to（弧心 c）：c1 = from + k·(to−c)，c2 = to + k·(from−c)
+const corner = (
+  from: [number, number],
+  to: [number, number],
+  c: [number, number]
+): Seg => [
+  from[0] + KAPPA * (to[0] - c[0]),
+  from[1] + KAPPA * (to[1] - c[1]),
+  to[0] + KAPPA * (from[0] - c[0]),
+  to[1] + KAPPA * (from[1] - c[1]),
+  to[0],
+  to[1],
+];
+
+const rectAnchors: [number, number][] = [
+  [hw, -ihh],
+  [hw, ihh],
+  [iw, hh],
+  [-iw, hh],
+  [-hw, ihh],
+  [-hw, -ihh],
+  [-iw, -hh],
+  [iw, -hh],
+];
+const cornerCenters: [number, number][] = [
+  [iw, ihh], // A1→A2 右下
+  [-iw, ihh], // A3→A4 左下
+  [-iw, -ihh], // A5→A6 左上
+  [iw, -ihh], // A7→A0 右上
+];
+
+const rectShape: Shape = {
+  start: rectAnchors[0],
+  segs: [
+    line(rectAnchors[0], rectAnchors[1]),
+    corner(rectAnchors[1], rectAnchors[2], cornerCenters[0]),
+    line(rectAnchors[2], rectAnchors[3]),
+    corner(rectAnchors[3], rectAnchors[4], cornerCenters[1]),
+    line(rectAnchors[4], rectAnchors[5]),
+    corner(rectAnchors[5], rectAnchors[6], cornerCenters[2]),
+    line(rectAnchors[6], rectAnchors[7]),
+    corner(rectAnchors[7], rectAnchors[0], cornerCenters[3]),
+  ],
+};
+
+// 圆：锚点取矩形锚点的同方位角，段间用精确弧公式 k = 4/3·tan(Δθ/4)
+const angles = rectAnchors.map(([x, y]) => Math.atan2(y, x));
+const circAnchors: [number, number][] = angles.map((a) => [
+  R * Math.cos(a),
+  R * Math.sin(a),
+]);
+const arcSeg = (i: number): Seg => {
+  const a1 = angles[i];
+  let a2 = angles[(i + 1) % 8];
+  if (a2 <= a1) a2 += Math.PI * 2;
+  const k = (4 / 3) * Math.tan((a2 - a1) / 4);
+  const p1 = circAnchors[i];
+  const p2 = circAnchors[(i + 1) % 8];
+  return [
+    p1[0] - k * R * Math.sin(a1),
+    p1[1] + k * R * Math.cos(a1),
+    p2[0] + k * R * Math.sin(a2 % (Math.PI * 2)),
+    p2[1] - k * R * Math.cos(a2 % (Math.PI * 2)),
+    p2[0],
+    p2[1],
+  ];
+};
+const circShape: Shape = {
+  start: circAnchors[0],
+  segs: [0, 1, 2, 3, 4, 5, 6, 7].map(arcSeg),
+};
+
+const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+const f2 = (n: number) => n.toFixed(2);
+
+const morphPath = (t: number): string => {
+  const sx = lerp(circShape.start[0], rectShape.start[0], t);
+  const sy = lerp(circShape.start[1], rectShape.start[1], t);
+  let d = `M ${f2(CX + sx)} ${f2(CY + sy)}`;
+  for (let i = 0; i < 8; i++) {
+    const a = circShape.segs[i];
+    const b = rectShape.segs[i];
+    const v = a.map((n, j) => lerp(n, b[j], t));
+    d += ` C ${f2(CX + v[0])} ${f2(CY + v[1])} ${f2(CX + v[2])} ${f2(
+      CY + v[3]
+    )} ${f2(CX + v[4])} ${f2(CY + v[5])}`;
+  }
+  return d + ' Z';
+};
+
+// ---- 时间轴（30fps，总 140f）----
+// 0–10 静置圆 | 10–30 呼吸一拍 scale 1→1.06→1 | 30–54 变形 24f
+// | 56–68 内容条淡入 12f | 68–140 真静止 72f
+export const MorphFromPrimitive: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  const breath = interpolate(frame, [10, 20, 30], [1, 1.12, 1], {
+    easing: Easing.inOut(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  const t = interpolate(frame, [30, 54], [0, 1], {
+    easing: Easing.inOut(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  const contentOpacity = interpolate(frame, [56, 68], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  const d = morphPath(t);
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative' }}>
+      <svg
+        width={1920}
+        height={1080}
+        viewBox="0 0 1920 1080"
+        style={{ position: 'absolute', inset: 0 }}
+      >
+        <g transform={`translate(${CX} ${CY}) scale(${breath}) translate(${-CX} ${-CY})`}>
+          <path d={d} fill="none" stroke={G.ink} strokeWidth={3} />
+        </g>
+      </svg>
+      {/* 卡片内容条（参考 line-boil 描边卡内容），变形完成后淡入 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: CX - RECT_W / 2,
+          top: CY - RECT_H / 2,
+          width: RECT_W,
+          height: RECT_H,
+          boxSizing: 'border-box',
+          padding: 36,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 18,
+          opacity: contentOpacity,
+        }}
+      >
+        <div style={{ height: 26, width: '58%', background: G.bar, borderRadius: 13 }} />
+        <div style={{ height: 16, width: '86%', background: G.line, borderRadius: 8 }} />
+        <div style={{ height: 16, width: '72%', background: G.line, borderRadius: 8 }} />
+        <div style={{ marginTop: 'auto', display: 'flex', gap: 14, alignItems: 'center' }}>
+          <div style={{ width: 40, height: 40, borderRadius: 20, background: G.mid }} />
+          <div style={{ height: 16, width: 120, background: G.line, borderRadius: 8 }} />
+        </div>
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/neon-frame-forerun/NeonFrameForerun.tsx

@@ -0,0 +1,279 @@
+// neon-frame-forerun v3 —— v2 基础上按用户意见新增（clickup04 五张）：
+// 框内各组件/文字初始悬空在页面上空（3D 抬起），悬空时在面板上映射
+// 同形软影，随页面点亮进程同步先后贴合（FloatWrap 模式，对标截图③：
+// tab/组件悬空带错位影 → ④全部贴合）。v2 已有：强透视直角框左缘中点
+// 两头奔画、面板原地由暗转亮、背景霓虹管框群中亮尾熄。
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from 'remotion';
+
+const easeFall = Easing.bezier(0.5, 0.05, 0.6, 1); // 加速下落、末端软着陆
+
+/* 悬浮 + 同形软影：h=悬浮高度(px)。本体向左上抬起，原位留模糊压暗同形影，
+ * h→0 时重合、影子消失（对标批次11 GrazeFaceTour FloatWrap） */
+const FloatWrap: React.FC<{ h: number; children: React.ReactNode }> = ({ h, children }) => (
+  <div style={{ position: 'relative' }}>
+    {h > 1 && (
+      <div style={{
+        position: 'absolute', inset: 0,
+        transform: `translate(${h * 0.26}px, ${h * 0.48}px) scale(${1 + h * 0.0012})`,
+        filter: `blur(${2.5 + h * 0.09}px) brightness(0.32) saturate(0.4)`,
+        opacity: Math.min(0.4, 0.16 + h * 0.005),
+        pointerEvents: 'none',
+      }}>{children}</div>
+    )}
+    <div style={{ transform: `translate(${-h * 0.36}px, ${-h * 0.82}px)` }}>{children}</div>
+  </div>
+);
+
+/* land=贴合完成时刻(0..1)，之前从 H 高度加速贴落 */
+const liftOf = (t: number, land: number, H: number) => {
+  const FALL = 0.3;
+  const p = Math.min(1, Math.max(0, (t - (land - FALL)) / FALL));
+  return (1 - easeFall(p)) * H;
+};
+
+const mulberry32 = (a: number) => () => {
+  let t = (a += 0x6d2b79f5);
+  t = Math.imul(t ^ (t >>> 15), t | 1);
+  t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+};
+
+const ink = '#3c3c3a';
+const mid = '#9a9a98';
+const line = '#e3e3e1';
+
+const PW = 1330;
+const PH = 900;
+const PL = 1000; // 归一路径长
+
+// 直角矩形路径：从左缘中点出发（对应截图①左缘先亮）
+const FRAME_D = `M 0 ${PH / 2} L 0 0 L ${PW} 0 L ${PW} ${PH} L 0 ${PH} Z`;
+
+const Chip: React.FC<{ w: number }> = ({ w }) => (
+  <div style={{
+    width: w, height: 74, background: '#fdfdfc', border: `2px solid ${line}`,
+    borderRadius: 10, padding: '12px 14px', boxSizing: 'border-box',
+    display: 'flex', flexDirection: 'column', gap: 9,
+  }}>
+    <div style={{ height: 11, width: '70%', background: '#b5b5b3', borderRadius: 5 }} />
+    <div style={{ height: 9, width: '48%', background: line, borderRadius: 5 }} />
+  </div>
+);
+
+/* t = 贴落进程(0..1)。各组件按页面展示顺序（侧栏自上而下、主区自上而下）
+ * 错峰从空中贴落，悬空时投同形软影（对标截图③虚影→④⑤贴合） */
+const GrayHome: React.FC<{ t?: number }> = ({ t = 1 }) => {
+  const L = (land: number, H = 72) => liftOf(t, land, H * 1.7);
+  return (
+  <div style={{ width: PW, height: PH, background: '#f5f5f4', borderRadius: 6, display: 'flex', overflow: 'hidden', boxSizing: 'border-box' }}>
+    <div style={{ width: 290, borderRight: `2px solid ${line}`, padding: '26px 24px', boxSizing: 'border-box' }}>
+      <FloatWrap h={L(0.24, 84)}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 28 }}>
+          <div style={{ width: 28, height: 28, borderRadius: 8, background: ink }} />
+          <div style={{ height: 15, width: 88, background: ink, borderRadius: 7 }} />
+        </div>
+      </FloatWrap>
+      {[76, 56, 96, 110, 66, 60].map((w, i) => (
+        <FloatWrap key={i} h={L(0.3 + i * 0.045, 66)}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 11, height: 34 }}>
+            <div style={{ width: 17, height: 17, borderRadius: 5, background: mid }} />
+            <div style={{ height: 10, width: w, background: '#c7c7c5', borderRadius: 5 }} />
+          </div>
+        </FloatWrap>
+      ))}
+      <FloatWrap h={L(0.56, 62)}>
+        <div style={{ height: 11, width: 70, background: '#b0b0ae', borderRadius: 5, margin: '24px 0 12px' }} />
+      </FloatWrap>
+      {[104, 126, 96, 118, 88].map((w, i) => (
+        <FloatWrap key={i} h={L(0.62 + i * 0.05, 66)}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 11, height: 32 }}>
+            <div style={{ width: 16, height: 16, borderRadius: 4, background: '#b8b8b6' }} />
+            <div style={{ height: 10, width: w, background: '#cfcfcd', borderRadius: 5 }} />
+          </div>
+        </FloatWrap>
+      ))}
+    </div>
+    <div style={{ flex: 1, padding: '30px 40px', boxSizing: 'border-box' }}>
+      <FloatWrap h={L(0.26, 90)}>
+        <div style={{ height: 24, width: 130, background: '#565654', borderRadius: 10, marginBottom: 22 }} />
+      </FloatWrap>
+      <FloatWrap h={L(0.34, 80)}>
+        <div style={{ height: 46, border: `2px solid ${line}`, borderRadius: 12, marginBottom: 26, display: 'flex', alignItems: 'center', padding: '0 16px', background: '#f5f5f4' }}>
+          <div style={{ width: 17, height: 17, borderRadius: 9, border: `2px solid ${mid}` }} />
+          <div style={{ height: 10, width: 250, background: line, borderRadius: 5, marginLeft: 12 }} />
+        </div>
+      </FloatWrap>
+      <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginBottom: 30 }}>
+        {[0, 1, 2, 3, 4, 5, 6].map((i) => (
+          <FloatWrap key={i} h={L(0.42 + i * 0.04, 76)}>
+            <Chip w={222} />
+          </FloatWrap>
+        ))}
+      </div>
+      <FloatWrap h={L(0.72, 60)}>
+        <div style={{ display: 'flex', gap: 18, marginBottom: 18 }}>
+          {[54, 84, 50, 82].map((w, i) => (
+            <div key={i} style={{ height: 11, width: w, background: i === 0 ? '#8a8a88' : line, borderRadius: 5 }} />
+          ))}
+        </div>
+      </FloatWrap>
+      {[0, 1, 2, 3].map((i) => (
+        <FloatWrap key={i} h={L(0.78 + i * 0.055, 64)}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 14, height: 46, borderBottom: `2px solid ${line}` }}>
+            <div style={{ width: 13, height: 13, borderRadius: 7, background: '#c26a6a' }} />
+            <div style={{ height: 11, width: 160 + ((i * 37) % 70), background: '#b6b6b4', borderRadius: 5 }} />
+            <div style={{ marginLeft: 'auto', display: 'flex', gap: 7 }}>
+              {[0, 1, 2].map((k) => <div key={k} style={{ width: 20, height: 20, borderRadius: 10, background: '#d2d2d0' }} />)}
+            </div>
+          </div>
+        </FloatWrap>
+      ))}
+    </div>
+  </div>
+  );
+};
+
+// 背景霓虹管框：大、亮、带透视错落（截图③④）
+type BgFrame = { x: number; y: number; w: number; h: number; hue: string; phase: number; period: number; skew: number };
+const rng = mulberry32(20260718);
+const HUES = ['#b06af0', '#e879c9', '#f0a35c', '#6a7df0', '#e0679a', '#8a5cf0', '#c06af0'];
+const BG_FRAMES: BgFrame[] = Array.from({ length: 18 }).map(() => ({
+  x: rng() * 2000 - 120, y: rng() * 1100 - 60,
+  w: 160 + rng() * 480, h: 70 + rng() * 220,
+  hue: HUES[Math.floor(rng() * HUES.length)],
+  phase: rng() * 90, period: 55 + rng() * 70,
+  skew: -14 + rng() * 10,
+}));
+
+export const NeonFrameForerun: React.FC = () => {
+  const frame = useCurrentFrame();
+  // 主框描画：左缘中点向两头奔跑，26 帧成型（截图①→②）
+  const trace = interpolate(frame, [2, 28], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.3, 0.1, 0.3, 1),
+  });
+  // 面板原地显影：框成型后内容从近黑到暗灰（截图②），再全亮（截图③）
+  const lit = interpolate(frame, [24, 46, 78], [0.0, 0.3, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.35, 0, 0.3, 1),
+  });
+  // 主框独立描边可见度：面板亮起后并入面板 rim 辉光（截图③以后细线淡出，糊辉光留下）
+  const frameLine = interpolate(frame, [50, 90], [1, 0], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+  const rimGlow = interpolate(frame, [28, 60, 108, 132], [0.9, 1, 0.75, 0.5], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+  // 背景：中段全亮（截图③④）→ 尾段熄灭（截图⑤）
+  const bgLit = interpolate(frame, [8, 44, 96, 128], [0.15, 1, 0.85, 0.06], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+  // 强透视 → 缓和：框飞入时角度大，面板亮起后落定（截图①梯形→③④缓斜）
+  const settle = interpolate(frame, [0, 70], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+  const rotY = -26 + 15 * settle;
+  const rotX = 7 - 3 * settle;
+  const rotZ = -9 + 4.5 * settle;
+  const scale = 0.94 + 0.1 * settle;
+  const headP = trace * (PL / 2);
+  // 组件贴落进程：与页面点亮(lit 24→78)同步推进，稍滞后收尾——
+  // "和页面的展示同步完成贴合"
+  const drop = interpolate(frame, [34, 98], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+
+  return (
+    <AbsoluteFill style={{ background: '#060509', overflow: 'hidden' }}>
+      {/* 背景霓虹管框群 */}
+      <svg width={1920} height={1080} style={{ position: 'absolute' }}>
+        <defs>
+          <filter id="bgblur" x="-60%" y="-60%" width="220%" height="220%">
+            <feGaussianBlur stdDeviation={7} />
+          </filter>
+        </defs>
+        {BG_FRAMES.map((b, i) => {
+          const breath = 0.5 + 0.5 * Math.sin(((frame + b.phase) / b.period) * Math.PI * 2);
+          const op = bgLit * (0.18 + 0.4 * breath);
+          return (
+            <g key={i} transform={`translate(${b.x} ${b.y}) skewY(${b.skew * 0.4}) skewX(${b.skew})`}>
+              <rect width={b.w} height={b.h} rx={4} fill="none"
+                stroke={b.hue} strokeWidth={7} filter="url(#bgblur)" opacity={op * 0.8} />
+              <rect width={b.w} height={b.h} rx={4} fill="none"
+                stroke={b.hue} strokeWidth={2} opacity={op} />
+            </g>
+          );
+        })}
+      </svg>
+      {/* 主体：强透视斜置的框 + 面板 */}
+      <div style={{ position: 'absolute', inset: 0, perspective: 1600, perspectiveOrigin: '42% 40%' }}>
+        <div style={{
+          position: 'absolute', left: (1920 - PW) / 2, top: (1080 - PH) / 2 - 10,
+          transform: `scale(${scale}) rotateY(${rotY}deg) rotateX(${rotX}deg) rotateZ(${rotZ}deg)`,
+          transformStyle: 'preserve-3d',
+        }}>
+          {/* 面板：原地由暗转亮（无位移缩放） */}
+          <div style={{ opacity: trace > 0.55 ? 1 : 0, filter: `brightness(${Math.max(0.05, lit)})` }}>
+            <GrayHome t={drop} />
+            {/* 未点亮时的冷色压暗罩 */}
+            <div style={{
+              position: 'absolute', inset: 0, borderRadius: 6,
+              background: 'linear-gradient(150deg, rgba(30,20,60,0.5), rgba(0,0,0,0.78))',
+              opacity: 1 - lit,
+            }} />
+          </div>
+          {/* 面板 rim 辉光（框光并入后由它承担，底缘最强——对应截图③④底/右缘粉光） */}
+          <div style={{
+            position: 'absolute', left: -10, top: -10, width: PW + 20, height: PH + 20,
+            borderRadius: 12, opacity: rimGlow * Math.min(1, trace * 1.6),
+            boxShadow: '-18px -8px 42px 6px rgba(185,95,240,0.42), 22px 24px 56px 12px rgba(240,150,90,0.30), 0 14px 80px 22px rgba(200,100,220,0.20)',
+          }} />
+          {/* 霓虹描边框：左缘中点出发两头奔画，直角转角 */}
+          <svg width={PW + 80} height={PH + 80} viewBox={`-40 -40 ${PW + 80} ${PH + 80}`}
+            style={{ position: 'absolute', left: -40, top: -40 }}>
+            <defs>
+              <linearGradient id="mainfg" gradientUnits="userSpaceOnUse" x1={0} y1={0} x2={PW} y2={PH}>
+                <stop offset="0%" stopColor="#c07af5" />
+                <stop offset="38%" stopColor="#e58bd8" />
+                <stop offset="72%" stopColor="#f0b06a" />
+                <stop offset="100%" stopColor="#e8925c" />
+              </linearGradient>
+              <filter id="fblur" x="-40%" y="-40%" width="180%" height="180%">
+                <feGaussianBlur stdDeviation={10} />
+              </filter>
+              <filter id="fblur2" x="-40%" y="-40%" width="180%" height="180%">
+                <feGaussianBlur stdDeviation={3} />
+              </filter>
+            </defs>
+            {[1, -1].map((dir) => (
+              <g key={dir}>
+                {/* 糊辉光层：一直保留 */}
+                <path d={FRAME_D} pathLength={PL} fill="none" stroke="url(#mainfg)"
+                  strokeWidth={14} strokeLinecap="butt" filter="url(#fblur)"
+                  strokeDasharray={`${headP} ${PL}`}
+                  strokeDashoffset={dir === 1 ? 0 : -(PL - headP)}
+                  opacity={0.6 * rimGlow} />
+                {/* 亮芯细线：面板亮起后淡出并入 rim */}
+                <path d={FRAME_D} pathLength={PL} fill="none" stroke="url(#mainfg)"
+                  strokeWidth={3.5} strokeLinecap="butt"
+                  strokeDasharray={`${headP} ${PL}`}
+                  strokeDashoffset={dir === 1 ? 0 : -(PL - headP)}
+                  opacity={0.95 * Math.max(frameLine, 0.25)} />
+                {/* 奔跑亮头 */}
+                {trace < 1 && (
+                  <path d={FRAME_D} pathLength={PL} fill="none" stroke="#ffffff"
+                    strokeWidth={6} strokeLinecap="round" filter="url(#fblur2)"
+                    strokeDasharray={`8 ${PL}`}
+                    strokeDashoffset={dir === 1 ? -(Math.max(0, headP - 8)) : -(PL - headP)}
+                    opacity={0.95} />
+                )}
+              </g>
+            ))}
+          </svg>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};