hyper-animator-codex 0.7.1 → 0.8.1

package/skills/hyper-animator-codex/references/shotcraft/source/demos/ui-to-brand-morph/InputMorphsIntoLogo.tsx

@@ -0,0 +1,215 @@
+// input-morphs-into-logo —— slack-promo 40–41s
+// 消息输入框（一行文字 + 发送键）点击发送：文字飞走，输入框收缩变形成
+// 圆角胶囊；上方依次落下 圆、胶囊、小圆，四粒元素集结排成抽象 logo
+// 单瓣（泪滴 + 胶囊的抽象组合，非真 Slack logo），落定呼吸。
+import React from 'react';
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Easing,
+} from 'remotion';
+
+const BG = '#3d1f47'; // 深梅紫
+const CX = 960;
+const CY = 560;
+
+// 落定后的抽象单瓣布局（横向胶囊在中，上方泪滴圆、右侧胶囊、下方小圆）
+// 单瓣 = 主胶囊(输入框变) + 大圆 + 竖胶囊 + 小圆 集结成花瓣角
+const FINAL = {
+  mainPill: { x: CX - 150, y: CY + 10, w: 300, h: 108, r: 54 }, // 横胶囊
+  bigDot: { x: CX - 204, y: CY + 10, d: 108 },                  // 左端圆（与胶囊左帽相切，构成泪滴感）
+  vPill: { x: CX + 96, y: CY - 152, w: 108, h: 260, r: 54 },    // 右上竖胶囊
+  smallDot: { x: CX + 150, y: CY - 226, d: 76 },                // 竖胶囊顶上的小圆
+};
+
+export const InputMorphsIntoLogo: React.FC = () => {
+  const f = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // —— 时间轴 ——
+  const CLICK = 22;      // 光标按下发送
+  const FLY = 26;        // 文字飞走
+  const MORPH = 34;      // 输入框开始收缩变形
+  const DROPS = [56, 70, 84]; // 大圆 / 竖胶囊 / 小圆 依次落下
+  const SETTLE = 108;    // 全部落定，开始呼吸
+
+  // 输入框初始几何
+  const box0 = { x: CX - 430, y: CY - 60, w: 860, h: 120, r: 26 };
+
+  // 光标移入 + 点击
+  const cursorX = interpolate(f, [0, CLICK], [1500, box0.x + box0.w - 60], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.cubic),
+  });
+  const cursorY = interpolate(f, [0, CLICK], [900, box0.y + 60], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.cubic),
+  });
+  const press = f >= CLICK && f <= CLICK + 4 ? 0.82 : 1;
+  const cursorGone = interpolate(f, [FLY + 4, FLY + 12], [1, 0], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+
+  // 发送键按下反馈
+  const btnFlash = f >= CLICK && f <= CLICK + 6 ? 1 : 0;
+
+  // 文字飞走：整行向右上飞出 + 加速
+  const flyT = interpolate(f, [FLY, FLY + 12], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.in(Easing.cubic),
+  });
+
+  // 输入框 → 主胶囊 morph（几何插值，带一点弹性落定）
+  const m = spring({ frame: f - MORPH, fps, config: { damping: 13, stiffness: 90, mass: 0.9 } });
+  const bx = interpolate(m, [0, 1], [box0.x, FINAL.mainPill.x]);
+  const by = interpolate(m, [0, 1], [box0.y, FINAL.mainPill.y - FINAL.mainPill.h / 2 + 60 - 60]);
+  const bw = interpolate(m, [0, 1], [box0.w, FINAL.mainPill.w]);
+  const bh = interpolate(m, [0, 1], [box0.h, FINAL.mainPill.h]);
+  const br = interpolate(m, [0, 1], [box0.r, FINAL.mainPill.r]);
+  const bColor = m; // 边框白框 → 实心暖白
+
+  // 三粒元素依次从画外上方落下（spring 落定，带轻微过冲）
+  const dropSpring = (i: number) =>
+    spring({ frame: f - DROPS[i], fps, config: { damping: 12, stiffness: 110, mass: 0.85 } });
+
+  // 落定呼吸：整瓣轻微 scale 脉动
+  const breathe = f >= SETTLE ? 1 + 0.03 * Math.sin((f - SETTLE) * 0.18) : 1;
+
+  const dropY = (finalY: number, s: number) => interpolate(s, [0, 1], [-260, finalY]);
+
+  const s0 = dropSpring(0);
+  const s1 = dropSpring(1);
+  const s2 = dropSpring(2);
+
+  const WHITE = '#fdf6ee';
+
+  return (
+    <AbsoluteFill style={{ background: BG, fontFamily: 'Helvetica, Arial, sans-serif', overflow: 'hidden' }}>
+      <AbsoluteFill style={{ transform: `scale(${breathe})`, transformOrigin: `${CX}px ${CY - 40}px` }}>
+        {/* 主体：输入框 → 主胶囊 */}
+        <div
+          style={{
+            position: 'absolute',
+            left: bx,
+            top: by,
+            width: bw,
+            height: bh,
+            borderRadius: br,
+            border: `4px solid ${WHITE}`,
+            background: `rgba(253,246,238,${bColor})`,
+            boxSizing: 'border-box',
+            display: 'flex',
+            alignItems: 'center',
+            padding: '0 34px',
+            boxShadow: m > 0.6 ? '0 0 60px rgba(253,246,238,0.25)' : 'none',
+          }}
+        >
+          {/* 一行文字（发送后飞走） */}
+          <div
+            style={{
+              fontSize: 44,
+              color: WHITE,
+              whiteSpace: 'nowrap',
+              opacity: (1 - flyT) * (1 - m),
+              transform: `translate(${flyT * 700}px, ${-flyT * 380}px) rotate(${-flyT * 10}deg)`,
+            }}
+          >
+            Ready, set, go!
+            {/* 光标闪烁 */}
+            <span style={{ opacity: Math.floor(f / 8) % 2 === 0 && f < FLY ? 1 : 0 }}>|</span>
+          </div>
+          {/* 发送键 */}
+          <div
+            style={{
+              marginLeft: 'auto',
+              width: 72,
+              height: 72,
+              borderRadius: 18,
+              background: btnFlash ? '#ffffff' : 'rgba(253,246,238,0.9)',
+              opacity: 1 - m,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              transform: `scale(${press})`,
+              flexShrink: 0,
+            }}
+          >
+            {/* 纸飞机三角 */}
+            <svg width={34} height={34} viewBox="0 0 34 34">
+              <path d="M3 17 L31 4 L20 30 L15 19 Z" fill={BG} />
+            </svg>
+          </div>
+        </div>
+
+        {/* 大圆（第一粒，落在主胶囊左端形成泪滴组合） */}
+        {f >= DROPS[0] && (
+          <div
+            style={{
+              position: 'absolute',
+              left: FINAL.bigDot.x - FINAL.bigDot.d / 2,
+              top: dropY(FINAL.bigDot.y - FINAL.bigDot.d / 2, s0),
+              width: FINAL.bigDot.d,
+              height: FINAL.bigDot.d,
+              borderRadius: '50%',
+              background: WHITE,
+              boxShadow: '0 0 40px rgba(253,246,238,0.2)',
+            }}
+          />
+        )}
+
+        {/* 竖胶囊（第二粒） */}
+        {f >= DROPS[1] && (
+          <div
+            style={{
+              position: 'absolute',
+              left: FINAL.vPill.x - FINAL.vPill.w / 2,
+              top: dropY(FINAL.vPill.y - FINAL.vPill.h / 2, s1),
+              width: FINAL.vPill.w,
+              height: FINAL.vPill.h,
+              borderRadius: FINAL.vPill.r,
+              background: WHITE,
+              boxShadow: '0 0 40px rgba(253,246,238,0.2)',
+            }}
+          />
+        )}
+
+        {/* 小圆（第三粒，压在竖胶囊顶端旁） */}
+        {f >= DROPS[2] && (
+          <div
+            style={{
+              position: 'absolute',
+              left: FINAL.smallDot.x - FINAL.smallDot.d / 2,
+              top: dropY(FINAL.smallDot.y - FINAL.smallDot.d / 2, s2),
+              width: FINAL.smallDot.d,
+              height: FINAL.smallDot.d,
+              borderRadius: '50%',
+              background: '#e8b84b',
+              boxShadow: '0 0 40px rgba(232,184,75,0.35)',
+            }}
+          />
+        )}
+      </AbsoluteFill>
+
+      {/* 光标 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: cursorX,
+          top: cursorY,
+          opacity: cursorGone,
+          transform: `scale(${press})`,
+          zIndex: 50,
+        }}
+      >
+        <svg width={40} height={44} viewBox="0 0 40 44">
+          <path
+            d="M4 2 L4 34 L13 26 L19 40 L26 37 L20 23 L32 22 Z"
+            fill="#ffffff"
+            stroke={BG}
+            strokeWidth={2}
+          />
+        </svg>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/voice-waveform-live/VoiceWaveformLive.tsx

@@ -0,0 +1,171 @@
+// voice-waveform-live —— raycast-teams 19.5–26s：
+// 录音胶囊内实时声纹：细竖条随"说话"起伏（种子随机+相邻插值），
+// 说话时中部高耸、停顿缩成点线，波形从右往左滚动；右端提交钮。
+// 演：说(0.5–1.9s) → 停(1.9–2.7s) → 说(2.7–4.1s) → 提交(4.1–5s)。
+import React from 'react';
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
+
+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 noiseAt = (x: number) => {
+  const i = Math.floor(x);
+  const fr = x - i;
+  const a = mulberry32(i * 7919 + 13)();
+  const b = mulberry32((i + 1) * 7919 + 13)();
+  const s = fr * fr * (3 - 2 * fr); // smoothstep
+  return a + (b - a) * s;
+};
+
+// 说话包络（按"声音发生时刻"计）：说→停→说
+const envelope = (t: number) => {
+  const seg = (a: number, b: number, rise = 5, fall = 7) =>
+    interpolate(t, [a, a + rise, b - fall, b], [0, 1, 1, 0], {
+      extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    });
+  // 两段说话内部再叠音节起伏
+  const talk = Math.max(seg(15, 57), seg(80, 124));
+  const syllable = 0.55 + 0.45 * noiseAt(t / 4.5 + 200);
+  return talk * syllable;
+};
+
+const N_BARS = 64;
+
+export const VoiceWaveformLive: React.FC = () => {
+  const f = useCurrentFrame();
+
+  // 提交动作
+  const submitAt = 126;
+  const submitted = f >= submitAt;
+  const btnPress = interpolate(f, [submitAt, submitAt + 3, submitAt + 9], [1, 0.82, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.ease),
+  });
+  // 提交后波形整体塌缩 + 胶囊微缩离场感
+  const collapse = interpolate(f, [submitAt, submitAt + 12], [1, 0.06], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.in(Easing.ease),
+  });
+  const capsuleScale = interpolate(f, [submitAt, submitAt + 20], [1, 0.96], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.ease),
+  });
+
+  // 胶囊入场
+  const inOp = interpolate(f, [0, 12], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.ease),
+  });
+  const inScale = interpolate(f, [0, 14], [1.04, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+
+  const SCROLL = 1.6; // 帧→采样时间比：滚动速度
+
+  const bars = Array.from({ length: N_BARS }).map((_, i) => {
+    // 从右往左滚动：最右条是"现在"，越靠左越旧
+    const sampleT = f - (N_BARS - 1 - i) * SCROLL;
+    const env = sampleT < 0 ? 0 : envelope(sampleT);
+    // 空间权重：中部高耸
+    const center = Math.pow(Math.sin((i / (N_BARS - 1)) * Math.PI), 0.8);
+    const jitter = 0.35 + 0.65 * noiseAt(sampleT * 1.7 + i * 0.13);
+    const hRaw = env * center * jitter;
+    const h = Math.max(5, hRaw * 235 * collapse); // 静默=5px 点线
+    return h;
+  });
+
+  const nowEnv = envelope(f);
+  const micGlow = submitted ? 0 : nowEnv;
+
+  return (
+    <AbsoluteFill style={{ background: '#08080a', overflow: 'hidden' }}>
+      {/* 暗场绸缎底光 */}
+      <div style={{
+        position: 'absolute', left: -300, top: -200, width: 2600, height: 1700,
+        background: 'radial-gradient(closest-side, rgba(130,131,140,0.16), rgba(0,0,0,0) 70%)',
+        transform: `translate(${f * 0.6}px, ${f * 0.25}px)`,
+      }} />
+
+      <AbsoluteFill style={{ alignItems: 'center', justifyContent: 'center' }}>
+        <div
+          style={{
+            width: 1320, height: 300, borderRadius: 150,
+            opacity: inOp,
+            transform: `scale(${inScale * capsuleScale})`,
+            background:
+              'linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.08) 40%, rgba(0,0,0,0.3))',
+            padding: 2.5, boxSizing: 'border-box',
+          }}
+        >
+          <div
+            style={{
+              width: '100%', height: '100%', borderRadius: 148,
+              background: 'rgba(24,25,29,0.72)',
+              backdropFilter: 'blur(24px)',
+              boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.10), 0 40px 100px rgba(0,0,0,0.55)',
+              display: 'flex', alignItems: 'center', gap: 36,
+              padding: '0 44px', boxSizing: 'border-box',
+            }}
+          >
+            {/* 麦克风圆钮：说话时发亮 */}
+            <div
+              style={{
+                width: 96, height: 96, borderRadius: 48, flexShrink: 0,
+                background: `rgba(255,255,255,${0.08 + micGlow * 0.14})`,
+                border: '2.5px solid rgba(255,255,255,0.28)',
+                boxShadow: `0 0 ${28 * micGlow}px rgba(235,235,245,${micGlow * 0.5})`,
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                fontSize: 46, filter: 'grayscale(1)', boxSizing: 'border-box',
+              }}
+            >
+              🎙️
+            </div>
+
+            {/* 声纹条区 */}
+            <div style={{
+              flex: 1, height: 244, display: 'flex', alignItems: 'center',
+              gap: 6, overflow: 'hidden',
+            }}>
+              {bars.map((h, i) => (
+                <div
+                  key={i}
+                  style={{
+                    flex: 1, height: h, borderRadius: 4,
+                    background: `rgba(240,240,248,${0.4 + (h / 235) * 0.6})`,
+                  }}
+                />
+              ))}
+            </div>
+
+            {/* 提交钮：白圆 + 上箭头 */}
+            <div
+              style={{
+                width: 96, height: 96, borderRadius: 48, flexShrink: 0,
+                background: submitted ? '#ffffff' : 'rgba(255,255,255,0.92)',
+                transform: `scale(${btnPress})`,
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                boxShadow: submitted
+                  ? '0 0 60px rgba(255,255,255,0.55)'
+                  : '0 8px 24px rgba(0,0,0,0.4)',
+              }}
+            >
+              <svg width="44" height="44" viewBox="0 0 24 24">
+                <path
+                  d="M12 20V5M12 5l-6.5 6.5M12 5l6.5 6.5"
+                  stroke="#111114" strokeWidth="3" strokeLinecap="round"
+                  strokeLinejoin="round" fill="none"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/wall-reveal-moves/BentoLightUp.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
+import { Card, TitleBlock } from '../_fixtures/Fixtures';
+
+// bento-light-up：暗场里 3×2 bento 墙压暗待命，随节拍逐格点亮——
+// 边框流光先描一圈（琥珀），格内内容随后提亮上浮弹出；六格全亮后整体微推收住。
+// 节拍：0–20 建立(hold) → 每格间隔 12f 依次激活(描边 8f + 内容弹出 8f)
+//       → ~96f 全亮 → 96–121 scale 1→1.04 缓推 → 121–150 静止收尾。
+
+const BG = '#2a2a28';
+const AMBER = '#e8b45e';
+const FIRST = 20; // 首格激活帧
+const GAP = 12; // 格间节拍
+const CELL_W = 480;
+const CELL_H = 330;
+const GUT = 44;
+const LEFT = (1920 - (CELL_W * 3 + GUT * 2)) / 2;
+const TOP = (1080 - (CELL_H * 2 + GUT)) / 2 + 30;
+
+const Cell: React.FC<{ i: number; frame: number }> = ({ i, frame }) => {
+  const start = FIRST + i * GAP;
+  const col = i % 3;
+  const row = Math.floor(i / 3);
+  const x = LEFT + col * (CELL_W + GUT);
+  const y = TOP + row * (CELL_H + GUT);
+
+  // ① 边框流光：pathLength=100 的 dashoffset 描边，8f 走完一圈
+  const draw = interpolate(frame, [start, start + 8], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+  // 描完后流光退火：琥珀亮边 → 弱化成常亮细边
+  const strokeFade = interpolate(frame, [start + 12, start + 26], [1, 0.4], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.quad),
+  });
+
+  // ② 内容提亮 + 上浮弹出：描边过半后接力，8f 弹出（back-out 带一点过冲）
+  const lit = interpolate(frame, [start + 6, start + 14], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+  const rise = interpolate(frame, [start + 6, start + 14], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.3, 1.4, 0.5, 1),
+  });
+  const opacity = 0.18 + 0.82 * lit;
+  const ty = 20 * (1 - rise);
+  // seed 正弦哈希做每格微差（点亮瞬间的辉光强度略有随机感）
+  const jitter = Math.abs(Math.sin(i * 127.3) * 43758.5453 % 1);
+  const glow = lit * (1 - lit) * 4 * (14 + jitter * 6); // 点亮中段最亮的辉光脉冲
+
+  return (
+    <div style={{ position: 'absolute', left: x, top: y, width: CELL_W, height: CELL_H }}>
+      {/* 暗态卡 + 点亮后的内容（同一张卡，靠 opacity/translateY 提亮浮出） */}
+      <div
+        style={{
+          opacity,
+          transform: `translateY(${ty}px)`,
+          boxShadow: lit > 0.5 ? `0 0 ${glow}px rgba(232,180,94,${0.35 * lit * (1 - lit) * 4})` : 'none',
+          borderRadius: 14,
+        }}
+      >
+        <Card w={CELL_W} h={CELL_H} seed={i + 1} />
+      </div>
+      {/* 边框流光：SVG rect 描边一圈 */}
+      {draw > 0 && (
+        <svg
+          width={CELL_W}
+          height={CELL_H}
+          viewBox={`0 0 ${CELL_W} ${CELL_H}`}
+          style={{ position: 'absolute', left: 0, top: ty, overflow: 'visible' }}
+        >
+          <rect
+            x={2}
+            y={2}
+            width={CELL_W - 4}
+            height={CELL_H - 4}
+            rx={14}
+            fill="none"
+            stroke={AMBER}
+            strokeWidth={4}
+            pathLength={100}
+            strokeDasharray={100}
+            strokeDashoffset={100 * (1 - draw)}
+            opacity={strokeFade}
+            style={{ filter: `drop-shadow(0 0 ${6 + jitter * 4}px ${AMBER})` }}
+          />
+        </svg>
+      )}
+    </div>
+  );
+};
+
+export const BentoLightUp: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // ③ 六格全亮(~96f)后整体缓推 scale 1→1.04，25f 收住，之后真静止
+  const push = interpolate(frame, [96, 121], [1, 1.04], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.33, 0, 0.2, 1),
+  });
+
+  // 标题随首格点亮微微提亮，交代场景
+  const titleLit = interpolate(frame, [FIRST, FIRST + 20], [0.25, 0.75], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.quad),
+  });
+
+  return (
+    <AbsoluteFill style={{ background: BG, overflow: 'hidden' }}>
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          transform: `scale(${push})`,
+          transformOrigin: '960px 540px',
+        }}
+      >
+        <div style={{ position: 'absolute', left: LEFT, top: TOP - 110, opacity: titleLit, filter: 'invert(1)' }}>
+          <TitleBlock text="Features" size={64} />
+        </div>
+        {Array.from({ length: 6 }).map((_, i) => (
+          <Cell key={i} i={i} frame={frame} />
+        ))}
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/wipe-transitions/BlindsSlice.tsx

@@ -0,0 +1,107 @@
+// blinds-slice｜百叶窗切条错峰擦除
+// FakeDashboard A → B。12 根 160px 竖条，从左到右 delay=列号×2f，
+// 每条 10f 内完成翻换：条内 A scaleX 1→0（origin 左缘）与 B scaleX 0→1
+// （origin 右缘）共用同一进度 p（Easing.in(cubic)），交接缝恒等于
+// x+160(1-p)，数学上无露底。缝上亮线（柔光+暗描边+白核）随波扫过。
+// 波 20–52f；52f 起摘罩（整页 B 直出、条结构与亮线全部卸载），
+// 52–150f 真静止 98f ≥ 40f。帧确定，无随机源。
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from 'remotion';
+import { FakeDashboard } from '../_fixtures/Fixtures';
+
+const STRIPS = 12;
+const W = 160; // 每条宽 12×160 = 1920
+const WAVE_START = 20;
+const STAGGER = 2; // 列号 × 2f
+const FLIP = 10; // 每条 10f 完成翻换
+const WAVE_END = WAVE_START + (STRIPS - 1) * STAGGER + FLIP; // 52
+
+// 条内某页的切片：外层 160 宽裁剪，内层整页 1920 负 margin 对位
+const Slice: React.FC<{ x: number; variant: 'A' | 'B' }> = ({ x, variant }) => (
+  <div style={{ width: 1920, height: 1080, marginLeft: -x }}>
+    <FakeDashboard variant={variant} />
+  </div>
+);
+
+export const BlindsSlice: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 摘罩：波完成后条结构全部卸载，B 整页直出
+  if (frame >= WAVE_END) {
+    return (
+      <AbsoluteFill style={{ background: '#ececea' }}>
+        <FakeDashboard variant="B" />
+      </AbsoluteFill>
+    );
+  }
+
+  const seams: { x: number; opacity: number }[] = [];
+
+  const strips = Array.from({ length: STRIPS }).map((_, i) => {
+    const x = i * W;
+    const start = WAVE_START + i * STAGGER;
+    const end = start + FLIP;
+
+    // 未开始：纯 A 切片；已完成：纯 B 切片
+    if (frame < start) {
+      return (
+        <div key={i} style={{ position: 'absolute', left: x, top: 0, width: W, height: 1080, overflow: 'hidden' }}>
+          <Slice x={x} variant="A" />
+        </div>
+      );
+    }
+    if (frame >= end) {
+      return (
+        <div key={i} style={{ position: 'absolute', left: x, top: 0, width: W, height: 1080, overflow: 'hidden' }}>
+          <Slice x={x} variant="B" />
+        </div>
+      );
+    }
+
+    // 翻换中：A、B 共用同一进度 p——A 宽 160(1-p) 靠左，B 宽 160p 靠右，
+    // 交接点恒为 x+160(1-p)，无露底
+    const p = interpolate(frame, [start, end], [0, 1], {
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp',
+      easing: Easing.in(Easing.cubic),
+    });
+
+    // 缝亮线：进出各 2f 线性淡入淡出
+    const seamOpacity = Math.min(
+      interpolate(frame, [start, start + 2], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }),
+      interpolate(frame, [end - 2, end], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }),
+    );
+    seams.push({ x: x + W * (1 - p), opacity: seamOpacity });
+
+    return (
+      <div key={i} style={{ position: 'absolute', left: x, top: 0, width: W, height: 1080, overflow: 'hidden' }}>
+        {/* A：向左缘收缩 */}
+        <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', transform: `scaleX(${1 - p})`, transformOrigin: '0% 50%' }}>
+          <Slice x={x} variant="A" />
+        </div>
+        {/* B：从右缘展开 */}
+        <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', transform: `scaleX(${p})`, transformOrigin: '100% 50%' }}>
+          <Slice x={x} variant="B" />
+        </div>
+      </div>
+    );
+  });
+
+  return (
+    <AbsoluteFill style={{ background: '#ececea' }}>
+      {strips}
+      {/* 缝亮线：白底判例——纯提亮不可见，柔光 + 暗描边 + 白核三层 */}
+      {seams.length > 0 && (
+        <svg width={1920} height={1080} style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
+          {seams.map((s, i) => (
+            <g key={i} opacity={s.opacity}>
+              <line x1={s.x} y1={0} x2={s.x} y2={1080} stroke="rgba(255,255,255,0.45)" strokeWidth={16} />
+              <line x1={s.x} y1={0} x2={s.x} y2={1080} stroke="rgba(0,0,0,0.55)" strokeWidth={6} />
+              <line x1={s.x} y1={0} x2={s.x} y2={1080} stroke="rgba(255,255,255,0.95)" strokeWidth={3} />
+            </g>
+          ))}
+        </svg>
+      )}
+    </AbsoluteFill>
+  );
+};