hyper-animator-codex 0.7.1 → 0.8.0

package/skills/hyper-animator-codex/references/shotcraft/source/demos/tension-camera-moves/BulletTimeFreezeOrbit.tsx

@@ -0,0 +1,219 @@
+// 子弹时间冻结环绕(bullet-time-freeze-orbit)——The Matrix bullet time。
+// 中央 900×560 面板内 5 根柱状图错峰生长(动画时钟 effFrame 驱动)。
+// 关键帧:0–20 hold 读布景;20–45 柱子正常生长;45–105 时钟咬死(柱子完全静止),
+// 相机 perspective(1600px) 下 rotateY 0→55°(45–72)→顶点悬停(72–82)→回 0(82–105),
+// 同步 scale 1→1.12→1 + translateX 摆动增强绕行感;105–120 时钟恢复柱子长完;
+// 118–128 数字标签浮现;128–150 全静止收尾。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, TitleBlock } from '../_fixtures/Fixtures';
+
+const h = (n: number) => {
+  const s = Math.sin(n * 127.3) * 43758.5453;
+  return s - Math.floor(s);
+};
+
+const PANEL_W = 900;
+const PANEL_H = 560;
+const BAR_COUNT = 5;
+
+export const BulletTimeFreezeOrbit: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // ── 子弹时间时钟:0–45 正常走,45–105 冻结,105 起恢复 ──
+  const effFrame =
+    frame < 45 ? frame : frame < 105 ? 45 : 45 + (frame - 105);
+
+  // ── 冻结区间的相机环绕(用真实 frame 驱动) ──
+  const rotY =
+    frame < 72
+      ? interpolate(frame, [45, 72], [0, 55], {
+          extrapolateLeft: 'clamp',
+          extrapolateRight: 'clamp',
+          easing: Easing.inOut(Easing.cubic),
+        })
+      : frame < 82
+        ? 55 // 顶点悬停 10f
+        : interpolate(frame, [82, 105], [55, 0], {
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+            easing: Easing.inOut(Easing.cubic),
+          });
+  const orbitT = rotY / 55; // 0→1→0,复用做 scale / translateX
+  const scale = 1 + 0.12 * orbitT;
+  const tx = -170 * Math.sin(orbitT * Math.PI * 0.5) - 60 * orbitT; // 绕行横摆
+  const ty = -24 * orbitT;
+
+  // ── 柱子:错峰生长,全部由 effFrame 驱动(冻结即静止) ──
+  const chartW = PANEL_W - 140;
+  const chartH = PANEL_H - 190;
+  const barW = 92;
+  const gap = (chartW - BAR_COUNT * barW) / (BAR_COUNT - 1);
+  const bars = Array.from({ length: BAR_COUNT }).map((_, i) => {
+    const full = chartH * (0.42 + h(i + 1) * 0.55); // 目标高度
+    const start = 20 + i * 4;
+    const end = 48 + i * 3; // 20–60f 区间内错峰
+    const p = interpolate(effFrame, [start, end], [0, 1], {
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp',
+      easing: Easing.out(Easing.cubic),
+    });
+    const value = Math.round((full / chartH) * 100); // 标签与柱高一致
+
+    return { hNow: full * p, full, value, done: p >= 1 };
+  });
+
+  // ── 恢复段:数字标签浮现(118–128),之后全静止 ──
+  const labelOp = interpolate(frame, [118, 128], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // 冻结提示条:冻结期间显示 FREEZE 徽标,帮助读出手法
+  const freezeOp = interpolate(frame, [45, 52, 98, 105], [0, 1, 1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  return (
+    <div
+      style={{
+        width: 1920,
+        height: 1080,
+        background: G.bg,
+        position: 'relative',
+        overflow: 'hidden',
+        fontFamily: 'Helvetica, Arial, sans-serif',
+      }}
+    >
+      <div style={{ position: 'absolute', top: 56, left: 72 }}>
+        <TitleBlock text="BULLET TIME" size={44} />
+      </div>
+
+      {/* 冻结徽标 */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 62,
+          right: 84,
+          opacity: freezeOp,
+          background: G.ink,
+          color: G.card,
+          fontWeight: 800,
+          fontSize: 30,
+          letterSpacing: 4,
+          padding: '12px 26px',
+          borderRadius: 10,
+        }}
+      >
+        FREEZE
+      </div>
+
+      {/* 3D 舞台 */}
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          perspective: 1600,
+        }}
+      >
+        <div
+          style={{
+            width: PANEL_W,
+            height: PANEL_H,
+            background: G.card,
+            border: `2px solid ${G.border}`,
+            borderRadius: 18,
+            boxShadow: '0 16px 48px rgba(0,0,0,0.14)',
+            boxSizing: 'border-box',
+            padding: '44px 70px',
+            transform: `translateX(${tx}px) translateY(${ty}px) rotateY(${rotY}deg) scale(${scale})`,
+            transformStyle: 'preserve-3d',
+          }}
+        >
+          {/* 面板标题条 */}
+          <div
+            style={{
+              height: 20,
+              width: 260,
+              background: G.bar,
+              borderRadius: 10,
+              marginBottom: 14,
+            }}
+          />
+          <div
+            style={{
+              height: 12,
+              width: 170,
+              background: G.line,
+              borderRadius: 6,
+              marginBottom: 30,
+            }}
+          />
+
+          {/* 图表区:横向刻度线 + 柱子 */}
+          <div style={{ position: 'relative', width: chartW, height: chartH }}>
+            {[0, 1, 2, 3].map((i) => (
+              <div
+                key={i}
+                style={{
+                  position: 'absolute',
+                  left: 0,
+                  right: 0,
+                  top: (chartH / 4) * i,
+                  height: 2,
+                  background: G.line,
+                }}
+              />
+            ))}
+            {/* 基线 */}
+            <div
+              style={{
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                bottom: 0,
+                height: 3,
+                background: G.mid,
+              }}
+            />
+            {bars.map((b, i) => (
+              <div key={i}>
+                <div
+                  style={{
+                    position: 'absolute',
+                    left: i * (barW + gap),
+                    bottom: 3,
+                    width: barW,
+                    height: b.hNow,
+                    background: i % 2 === 0 ? G.bar : G.mid,
+                    borderRadius: '8px 8px 0 0',
+                  }}
+                />
+                {/* 数字标签:恢复段浮现 */}
+                <div
+                  style={{
+                    position: 'absolute',
+                    left: i * (barW + gap),
+                    bottom: 3 + b.full + 14 - 10 * (1 - labelOp),
+                    width: barW,
+                    textAlign: 'center',
+                    fontWeight: 800,
+                    fontSize: 28,
+                    color: G.ink,
+                    opacity: labelOp,
+                  }}
+                >
+                  {b.value}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/tension-camera-moves/DutchRollToLevel.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
+import { FakeDashboard, Card, G } from '../_fixtures/Fixtures';
+
+// 斜角滚正（dutch-roll-to-level）：呈现痛点时整帧带 -10° 斜角悬着（叠极缓慢
+// 正弦漂移防止读作静态歪图），帧 70 解决方案的一拍整帧带单次过冲滚回水平
+// （-10° → +1.2° → 0），同时警示条淡出、干净卡浮现——"世界被扶正"打在节拍上。
+// 帧 0–70 斜置漂移 / 70–84 滚正冲过头 / 84–94 收回 0 / 94–140 真静止。
+
+const ROLL = 70; // 滚正起拍
+const LEVEL = 94; // 完全归位帧
+
+export const DutchRollToLevel: React.FC = () => {
+  const f = useCurrentFrame();
+
+  // —— 斜置期的缓慢漂移（帧 70 前）：±0.8° 长周期正弦 + 2px 纵漂 ——
+  const driftT = Math.min(f, ROLL);
+  const driftRot = Math.sin(driftT * 0.035) * 0.8;
+  const driftY = Math.sin(driftT * 0.05) * 2;
+  // 滚正期间漂移随进度淡出
+  const driftFade = interpolate(f, [ROLL, ROLL + 6], [1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // —— 滚正：-10° 用 14f 冲过 0 到 +1.2°，再 10f 收回 0（单次过冲不振荡） ——
+  const baseRot =
+    f < ROLL
+      ? -10
+      : f < ROLL + 14
+        ? interpolate(f, [ROLL, ROLL + 14], [-10, 1.2], {
+            easing: Easing.out(Easing.cubic),
+          })
+        : interpolate(f, [ROLL + 14, LEVEL], [1.2, 0], {
+            extrapolateRight: 'clamp',
+            easing: Easing.inOut(Easing.quad),
+          });
+
+  const rot = baseRot + driftRot * driftFade;
+  const y = driftY * driftFade;
+
+  // scale 1.15（防旋转露边）→ 滚正同步收到 1.08
+  const scale = interpolate(f, [ROLL, LEVEL], [1.15, 1.08], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.inOut(Easing.cubic),
+  });
+
+  // —— 警示条（痛点）：斜置期悬在上方，滚正一拍淡出；干净卡反向淡入 ——
+  const alertOpacity = interpolate(f, [ROLL, ROLL + 12], [1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const cleanOpacity = interpolate(f, [ROLL + 8, ROLL + 22], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  return (
+    <AbsoluteFill style={{ background: G.bg, overflow: 'hidden' }}>
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          transform: `translateY(${y}px) rotate(${rot}deg) scale(${scale})`,
+          transformOrigin: '50% 50%',
+        }}
+      >
+        <FakeDashboard variant="B" />
+
+        {/* 痛点警示条：深色横幅压在页面上方（斜着更显歪） */}
+        <div
+          style={{
+            position: 'absolute',
+            left: 560,
+            top: 120,
+            width: 800,
+            height: 88,
+            background: G.ink,
+            borderRadius: 14,
+            opacity: alertOpacity * 0.92,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 18,
+            padding: '0 28px',
+            boxSizing: 'border-box',
+            boxShadow: '0 10px 30px rgba(0,0,0,0.25)',
+          }}
+        >
+          {/* 警示三角 */}
+          <div
+            style={{
+              width: 0,
+              height: 0,
+              borderLeft: '18px solid transparent',
+              borderRight: '18px solid transparent',
+              borderBottom: '32px solid #f7f7f6',
+            }}
+          />
+          <div style={{ height: 16, width: 420, background: G.mid, borderRadius: 8 }} />
+        </div>
+
+        {/* 解决方案：干净卡随滚正浮现在同一位置 */}
+        <div style={{ position: 'absolute', left: 560, top: 96, opacity: cleanOpacity }}>
+          <Card w={800} h={140} seed={2} style={{ boxShadow: '0 10px 30px rgba(0,0,0,0.12)' }} />
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/tension-camera-moves/PullBackIsolation.tsx

@@ -0,0 +1,120 @@
+// 拉远孤立收束（pull-back-isolation）——pull-back shot。
+// 相机容器 scale 2.2→0.62（0–110f，Easing.out(cubic)）：开场怼在主卡
+// "99.9%" 特写上，缓缓后拉露出周围 8 张兄弟卡。帧 30 起兄弟卡按离主卡
+// 距离由近到远错峰熄灭（每 8f 一张，opacity→0 + brightness 压暗）；
+// 背景 60–110f 从 #ececea 沉入 #141414；主卡白光晕 60–100f 淡入。
+// 帧 110–150 完全静止：暗场中央孤悬一张发光小卡——全片只为这一个数字。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, Card } from '../_fixtures/Fixtures';
+
+// 8 张兄弟卡：相对主卡中心 (960,540) 的偏移 + 尺寸 + seed
+const SIBS = [
+  { dx: -620, dy: -330, w: 360, h: 240, seed: 3 },
+  { dx: 10, dy: -390, w: 420, h: 220, seed: 4 },
+  { dx: 620, dy: -320, w: 380, h: 260, seed: 5 },
+  { dx: -680, dy: 20, w: 340, h: 230, seed: 6 },
+  { dx: 700, dy: 40, w: 360, h: 250, seed: 7 },
+  { dx: -600, dy: 360, w: 400, h: 240, seed: 8 },
+  { dx: 40, dy: 400, w: 440, h: 220, seed: 9 },
+  { dx: 640, dy: 350, w: 370, h: 250, seed: 10 },
+].map((s) => ({ ...s, dist: Math.hypot(s.dx, s.dy) }));
+
+// 按离主卡距离排名 → 错峰熄灭顺序（近的先灭）
+const RANKED = SIBS.map((s, i) => i).sort((a, b) => SIBS[a].dist - SIBS[b].dist);
+const FADE_START = RANKED.reduce<number[]>((acc, idx, rank) => {
+  acc[idx] = 30 + rank * 8;
+  return acc;
+}, []);
+const FADE_DUR = 16;
+
+const clamp = { extrapolateLeft: 'clamp' as const, extrapolateRight: 'clamp' as const };
+
+export const PullBackIsolation: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 相机后拉：2.2（怼脸特写）→ 0.62（大远景孤悬）
+  const scale = interpolate(frame, [0, 110], [2.2, 0.62], {
+    easing: Easing.out(Easing.cubic),
+    ...clamp,
+  });
+
+  // 背景沉入黑暗：#ececea → #141414（60–110f）
+  const bgT = interpolate(frame, [60, 110], [0, 1], { easing: Easing.inOut(Easing.quad), ...clamp });
+  const bgC = Math.round(236 + (20 - 236) * bgT);
+  const bg = `rgb(${bgC},${bgC},${bgC})`;
+
+  // 主卡白光晕淡入（60–100f）
+  const glow = interpolate(frame, [60, 100], [0, 0.35], { ...clamp });
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: bg, overflow: 'hidden', position: 'relative' }}>
+      {/* 相机容器：以主卡中心（画面中心）为原点整体缩放 */}
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          transform: `scale(${scale})`,
+          transformOrigin: '960px 540px',
+        }}
+      >
+        {/* 兄弟卡：错峰熄灭 */}
+        {SIBS.map((s, i) => {
+          const t0 = FADE_START[i];
+          const op = interpolate(frame, [t0, t0 + FADE_DUR], [1, 0], {
+            easing: Easing.out(Easing.quad),
+            ...clamp,
+          });
+          const bright = interpolate(frame, [t0, t0 + FADE_DUR], [1, 0.3], { ...clamp });
+          return (
+            <div
+              key={i}
+              style={{
+                position: 'absolute',
+                left: 960 + s.dx - s.w / 2,
+                top: 540 + s.dy - s.h / 2,
+                opacity: op,
+                filter: `brightness(${bright})`,
+              }}
+            >
+              <Card w={s.w} h={s.h} seed={s.seed} />
+            </div>
+          );
+        })}
+
+        {/* 主卡：520×340 居中，叠大数字 + 白光晕 */}
+        <div
+          style={{
+            position: 'absolute',
+            left: 960 - 260,
+            top: 540 - 170,
+            width: 520,
+            height: 340,
+            borderRadius: 14,
+            boxShadow: `0 0 80px rgba(255,255,255,${glow}), 0 0 160px rgba(255,255,255,${glow * 0.6})`,
+          }}
+        >
+          <Card w={520} h={340} seed={2} />
+          <div
+            style={{
+              position: 'absolute',
+              inset: 0,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontFamily: 'Helvetica, Arial, sans-serif',
+              fontWeight: 800,
+              fontSize: 128,
+              letterSpacing: -3,
+              color: G.ink,
+              background: 'rgba(255,255,255,0.72)',
+              borderRadius: 14,
+            }}
+          >
+            99.9%
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/tension-camera-moves/SlowPushIn.tsx

@@ -0,0 +1,96 @@
+// 慢推压迫（slow-push-in）——studiobinder camera movements。
+// 景 A（帧 0–120）：深色底 + 白色大数字 "10x"，scale 用 Easing.in(Easing.quad)
+// 从 1.00 匀加速推到 1.14——前 2 秒几乎不可察，后段明显可感；同时四角径向
+// 暗角 opacity 0→0.5 同步加深，构成压迫感的第二来源。
+// 帧 120 无任何过渡硬切景 B：满屏亮色 FakeDashboard(A) 真静止 30f——
+// 暗→亮的大反差让"切"这一拍才响。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, FakeDashboard } from '../_fixtures/Fixtures';
+
+const CUT = 120; // 硬切帧
+
+export const SlowPushIn: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // ---- 景 B：帧 120 起，满屏亮面板，完全静止 ----
+  if (frame >= CUT) {
+    return <FakeDashboard variant="A" />;
+  }
+
+  // ---- 景 A：0–120f 慢推 ----
+  // 匀加速推近：Easing.in(quad)——前段几乎不可察，后段可感
+  const scale = interpolate(frame, [0, CUT], [1.0, 1.14], {
+    easing: Easing.in(Easing.quad),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  // 暗角同步加深：压迫感的第二来源
+  const vignette = interpolate(frame, [0, CUT], [0, 0.5], {
+    easing: Easing.in(Easing.quad),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  return (
+    <div
+      style={{
+        width: 1920,
+        height: 1080,
+        background: G.side,
+        position: 'relative',
+        overflow: 'hidden',
+        fontFamily: 'Helvetica, Arial, sans-serif',
+      }}
+    >
+      {/* 被推近的内容层：整体 scale */}
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          transform: `scale(${scale})`,
+          transformOrigin: '50% 50%',
+        }}
+      >
+        <div
+          style={{
+            fontSize: 300,
+            fontWeight: 800,
+            color: '#ffffff',
+            letterSpacing: -6,
+            lineHeight: 1,
+          }}
+        >
+          10x
+        </div>
+        <div
+          style={{
+            marginTop: 36,
+            fontSize: 40,
+            fontWeight: 500,
+            color: '#b8b8b6',
+            letterSpacing: 6,
+          }}
+        >
+          FASTER THAN BASELINE
+        </div>
+      </div>
+
+      {/* 暗角层：四角径向渐变，随推近同步加深 */}
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          opacity: vignette,
+          background:
+            'radial-gradient(ellipse 62% 55% at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.95) 100%)',
+          pointerEvents: 'none',
+        }}
+      />
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/text-as-mask/TextAsMask.tsx

@@ -0,0 +1,94 @@
+// 文字视频遮罩（text-as-mask）——kinetische typografie
+// 深底上超粗大字 "SCALE"，字形内部用 CSS alpha mask 套住 FakeDashboard：
+// 0–20f hold 读布景；20–100f dashboard 在字内匀速 translateX +110→-110（scale 1.15）；
+// 100–130f 单段 bezier：mask 层 scale 1→26 放大溢出（内容层用 1/S 反向抵消不畸变），
+// 同时无遮罩全屏层淡入接管，dashboard 1.15→1.0 归位；130–150f 全屏静止收尾。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { FakeDashboard, G } from '../_fixtures/Fixtures';
+
+const MASK_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"><text x="960" y="666" font-family="Helvetica, Arial, sans-serif" font-size="360" font-weight="900" letter-spacing="-8" text-anchor="middle" fill="white">SCALE</text></svg>`;
+const MASK_URL = `url("data:image/svg+xml,${encodeURIComponent(MASK_SVG)}")`;
+// mask 放大原点：取字母 L 的竖笔位置（约 61.5% 处），保证放大时原点落在实心笔画内
+const ORIGIN = '61.5% 50%';
+
+export const TextAsMask: React.FC = () => {
+  const f = useCurrentFrame();
+  const clamp = { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } as const;
+
+  // 结尾撤场进度：100–130f 单段 bezier
+  const endT = interpolate(f, [100, 130], [0, 1], {
+    ...clamp,
+    easing: Easing.bezier(0.4, 0, 0.2, 1),
+  });
+
+  // dashboard 内容运动：20–100f 匀速漂移，100–130f 归位到全屏
+  const driftX = interpolate(f, [20, 100], [110, -110], clamp);
+  const dx = f < 100 ? driftX : interpolate(endT, [0, 1], [-110, 0]);
+  const dashS = interpolate(endT, [0, 1], [1.15, 1]);
+
+  // mask 层放大（内容层反向抵消，dashboard 不跟着几何畸变）
+  const maskS = interpolate(endT, [0, 1], [1, 26]);
+  // 无遮罩全屏层淡入，保证接管彻底
+  const cover = interpolate(endT, [0.25, 0.9], [0, 1], clamp);
+  // 底部小注释：撤场时淡出
+  const caption = interpolate(f, [100, 114], [1, 0], clamp);
+
+  const dashMotion: React.CSSProperties = {
+    position: 'absolute',
+    inset: 0,
+    transform: `translateX(${dx}px) scale(${dashS})`,
+    transformOrigin: '50% 50%',
+  };
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.ink, position: 'relative', overflow: 'hidden' }}>
+      {/* 遮罩层：wrapper 负责 mask + 放大；inner 用 1/S 反向缩放抵消内容形变 */}
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          transform: `scale(${maskS})`,
+          transformOrigin: ORIGIN,
+          WebkitMaskImage: MASK_URL,
+          maskImage: MASK_URL,
+          WebkitMaskRepeat: 'no-repeat',
+          maskRepeat: 'no-repeat',
+          WebkitMaskSize: '1920px 1080px',
+          maskSize: '1920px 1080px',
+        }}
+      >
+        <div style={{ position: 'absolute', inset: 0, transform: `scale(${1 / maskS})`, transformOrigin: ORIGIN }}>
+          <div style={dashMotion}>
+            <FakeDashboard variant="A" />
+          </div>
+        </div>
+      </div>
+
+      {/* 接管层：同一运动变换的全屏 dashboard，撤场时淡入到 1 */}
+      <div style={{ position: 'absolute', inset: 0, opacity: cover }}>
+        <div style={dashMotion}>
+          <FakeDashboard variant="A" />
+        </div>
+      </div>
+
+      {/* 底部小注释 */}
+      <div
+        style={{
+          position: 'absolute',
+          bottom: 90,
+          width: '100%',
+          textAlign: 'center',
+          fontFamily: 'Helvetica, Arial, sans-serif',
+          fontWeight: 700,
+          fontSize: 30,
+          letterSpacing: 10,
+          color: G.mid,
+          opacity: caption,
+        }}
+      >
+        TEXT AS MASK
+      </div>
+    </div>
+  );
+};