dsh-drawai 0.3.4 → 0.4.1

package/lib/motion/shotcraft/upstream/demos/transition/bottom-push-stack-wipe/BottomPushStackWipe.tsx

@@ -0,0 +1,310 @@
+// bottom-push-stack-wipe —— slack-promo 22–27s
+// 换章手法不变：新章连底色整屏从底边向上推入，把旧章刚性顶出画外（两层同速同缓动），连推三章，
+// 每章一种饱和底色，内容钉死在各自色底坐标系里随底色走；上缘接缝阴影是"顶出"的物理接触证据。
+//
+// 第二轮重设计（设计决定）
+// - look = custom「瑞士海报」：第 0 章近黑开场，三章是三块拉满的饱和色板——钴蓝 / 朱橙 / 酸柠，
+//   色相彼此拉开 120° 级，换章一眼读作"换了个世界"。产品是 video-shotcraft，一章一个卖点（一句话出片 / 踩点剪辑 / 自动交付）。
+// - 版式：左栏 120px 安全边距起排，眉题（章号 + 名称）→ 116px 超粗两行标题 → 40px 说明；
+//   右栏一张为镜头设计的大字 UI 卡（和 agent 对话 / 踩点时间线 / 交付流水线），字号 ≥ 30px；色板本身左上受光、右下压暗，
+//   卡片投带色相的两层软阴影（同一光向），平面海报里也有前后景。
+// - 推入：26f 重 ease-out（快进慢停的"哐"），整摞按速度做纵向方向性模糊；新章上缘 2px 受光边 +
+//   压在旧章上的 56px 接触影。推入窗口内章内元素全部静止（钉死），标题在落定前 ~8f 才从线下升起，
+//   UI 卡的小动作（打字中 → 消息出现 / 说话声波 / 自动化逐步打勾）都放在 hold 里，避开推入。
+//
+// 时间表（30fps，170f）
+//   0–22    第 0 章：近黑底「Meet video-shotcraft.」已在画面，标题 0f 起逐行升起，2–20f 落定
+//   22–48   推入 01 钴蓝（26f 重 ease-out，~34f 已到 95%）→ 34f 标题升起 → 36–48f 第三条消息"打字中"→ 48f 弹入
+//   48–66   hold（读）
+//   66–92   推入 02 朱橙 → 78f 标题 → 声波与计时全程在跳，82f 起第二个镜头亮环
+//   92–110  hold
+//   110–136 推入 03 酸柠（深色字）→ 122f 标题 → 126/134/142f 三个步骤依次打勾（弹簧）
+//   142–170 hold 28f：极缓推近 1.5%，尾帧是完整的章节海报
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, Grain, SpeedBlur, bezier, mix, ramp, softShadow, velocity } from '../../_fixtures/Polish';
+import { TextReveal, alpha, springAt, type } from '../../_fixtures/Look';
+import { BRAND, PITCH, ShotcraftMark, ShotcraftWordmark } from '../../_fixtures/Brand';
+
+const H = 1080;
+
+export const BOTTOM_PUSH_STACK_WIPE_DURATION = 170;
+
+const PUSH_STARTS = [22, 66, 110];
+const PUSH_DUR = 26;
+const heavyEaseOut = bezier(0.12, 0.9, 0.2, 1); // 快进慢停（md 钉死的推入曲线）
+
+type Chapter = {
+  num: string; name: string; title: string; sub: string;
+  hi: string; base: string; lo: string; shade: string; ink: string; ink2: string;
+};
+const CHAPTERS: Chapter[] = [
+  {
+    num: '00', name: 'Agent skill', title: `Meet\n${BRAND.name}.`, sub: PITCH.en.taglines[1],
+    hi: '#1c1c1e', base: '#141415', lo: '#0c0c0d', shade: '#000000', ink: '#f4f2ee', ink2: 'rgba(244,242,238,0.62)',
+  },
+  {
+    num: '01', name: 'Prompt', title: 'One prompt.\nOne film.', sub: 'Describe the promo. Your agent storyboards every shot.',
+    hi: '#4565ff', base: '#2d4cff', lo: '#1c37e0', shade: '#0a1670', ink: '#ffffff', ink2: 'rgba(255,255,255,0.78)',
+  },
+  {
+    num: '02', name: 'Rhythm', title: 'Cut on\nthe beat.', sub: 'Every shot lands on the music, frame for frame.',
+    hi: '#ff6a3d', base: '#ff4d1f', lo: '#e83c10', shade: '#6e1600', ink: '#ffffff', ink2: 'rgba(255,255,255,0.8)',
+  },
+  {
+    num: '03', name: 'Delivery', title: 'Delivery,\nautomated.', sub: 'Render, export and publish the moment the cut locks.',
+    hi: '#dcfb5e', base: '#cdf23a', lo: '#b8dc22', shade: '#3c4a00', ink: '#121407', ink2: 'rgba(18,20,7,0.68)',
+  },
+];
+
+const pushP = (f: number, i: number) => ramp(f, PUSH_STARTS[i], PUSH_DUR, heavyEaseOut);
+const stackY = (f: number) => PUSH_STARTS.reduce((s, _, i) => s + pushP(f, i), 0) * H;
+// 每章"落定"帧（标题起升的参照）；第 0 章 = 0
+const landAt = (i: number) => (i === 0 ? -10 : PUSH_STARTS[i - 1] + 12);
+
+const SANS = FONT.sans;
+
+// ───────────── UI 卡（为镜头设计：少元素、大字、强对比） ─────────────
+const Avatar: React.FC<{ c: string; t: string; size?: number; ring?: number; ringColor?: string; mark?: boolean }> = ({ c, t, size = 64, ring = 0, ringColor = '#fff', mark = false }) => (
+  <div style={{
+    width: size, height: size, borderRadius: size / 2, flex: 'none', background: c, color: '#fff',
+    display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: SANS, fontWeight: 700,
+    fontSize: size * 0.38, letterSpacing: '-0.01em',
+    boxShadow: ring > 0 ? `0 0 0 ${4 + 6 * ring}px ${alpha(ringColor, 0.25 + 0.5 * ring)}` : undefined,
+  }}>{mark ? <ShotcraftMark size={size * 0.62} tone="dark" /> : t}</div>
+);
+
+const ChannelCard: React.FC<{ frame: number }> = ({ frame }) => {
+  const t0 = PUSH_STARTS[0] + 14; // 打字中提示（推入已到 95%）
+  const typing = frame >= t0 && frame < t0 + 12;
+  const msg = springAt(frame, t0 + 12, { damping: 18, stiffness: 200 });
+  const msgs = [
+    { c: '#7c5cff', t: 'MK', name: 'Maya', time: '9:41', text: 'Cut a 30s launch film for our app.', mark: false },
+    { c: BRAND.ink, t: '', name: 'Shotcraft', time: '9:42', text: 'Storyboard ready: 12 shots, on beat.', mark: true },
+  ];
+  return (
+    <div style={{ width: 760, padding: '40px 44px 44px', fontFamily: SANS, color: '#0e1020' }}>
+      <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, paddingBottom: 28, borderBottom: '2px solid rgba(14,16,32,0.08)' }}>
+        <div style={{ ...type(44, 800), color: '#0e1020' }}># launch-film</div>
+        <div style={{ marginLeft: 'auto', fontSize: 28, fontWeight: 500, color: '#7a7f99' }}>3 members</div>
+      </div>
+      {msgs.map((m, k) => (
+        <div key={k} style={{ display: 'flex', gap: 22, marginTop: 32 }}>
+          <Avatar c={m.c} t={m.t} mark={m.mark} />
+          <div>
+            <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
+              <span style={{ fontSize: 32, fontWeight: 750, letterSpacing: '-0.015em' }}>{m.name}</span>
+              <span style={{ fontSize: 24, color: '#9a9fb5', fontVariantNumeric: 'tabular-nums' }}>{m.time}</span>
+            </div>
+            <div style={{ fontSize: 32, fontWeight: 450, color: '#3a3f58', marginTop: 6, lineHeight: 1.25 }}>{m.text}</div>
+          </div>
+        </div>
+      ))}
+      {/* 第三条：打字中 → 消息弹入 */}
+      <div style={{ position: 'relative', height: 132, marginTop: 32 }}>
+        {typing && (
+          <div style={{ position: 'absolute', left: 86, top: 20, display: 'flex', gap: 10, alignItems: 'center', padding: '18px 24px', borderRadius: 24, background: '#eef0fb' }}>
+            {[0, 1, 2].map((d) => (
+              <div key={d} style={{ width: 13, height: 13, borderRadius: 7, background: '#2d4cff', opacity: 0.35 + 0.65 * (0.5 + 0.5 * Math.sin((frame - t0) * 0.7 - d * 1.1)) }} />
+            ))}
+          </div>
+        )}
+        {frame >= t0 + 12 && (
+          <div style={{ display: 'flex', gap: 22, opacity: Math.min(1, msg * 1.5), transform: `translateY(${((1 - msg) * 26).toFixed(2)}px)` }}>
+            <Avatar c="#ff7a1a" t="IR" />
+            <div>
+              <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
+                <span style={{ fontSize: 32, fontWeight: 750, letterSpacing: '-0.015em' }}>Ines</span>
+                <span style={{ fontSize: 24, color: '#9a9fb5' }}>9:44</span>
+              </div>
+              <div style={{ display: 'flex', gap: 12, marginTop: 10 }}>
+                <div style={{ fontSize: 32, fontWeight: 700, color: '#2d4cff', padding: '8px 22px', borderRadius: 999, background: '#e8ecff' }}>Render it  ↗</div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const HuddleCard: React.FC<{ frame: number }> = ({ frame }) => {
+  const t = frame - PUSH_STARTS[1];
+  const people = [
+    { c: '#7c5cff', t: '01', name: 'Hook' },
+    { c: '#00a37a', t: '02', name: 'Zoom' },
+    { c: '#ff9f1c', t: '03', name: 'Whip' },
+    { c: '#3a86ff', t: '04', name: 'Sting' },
+  ];
+  // 当前镜头：前段 01 Hook，82f 起交给 02 Zoom（环 6f 交叉，踩在拍点上换镜）
+  const handoff = ramp(frame, PUSH_STARTS[1] + 16, 8, EASE.smooth);
+  const speak = [1 - handoff, handoff, 0, 0];
+  const secs = 12 + Math.floor(Math.max(0, t) / 30);
+  return (
+    <div style={{ width: 760, padding: '40px 44px 44px', fontFamily: SANS, color: '#f6f3ef' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+        <div style={{ width: 16, height: 16, borderRadius: 8, background: '#3ddc84', boxShadow: '0 0 0 6px rgba(61,220,132,0.18)' }} />
+        <div style={{ ...type(40, 800) }}>Beat sync · 128 BPM</div>
+        <div style={{ marginLeft: 'auto', fontSize: 32, fontWeight: 600, color: 'rgba(246,243,239,0.6)', fontFamily: FONT.mono }}>
+          {String(Math.floor(secs / 60)).padStart(2, '0')}:{String(secs % 60).padStart(2, '0')}
+        </div>
+      </div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 52 }}>
+        {people.map((p, k) => (
+          <div key={k} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18 }}>
+            <Avatar c={p.c} t={p.t} size={124} ring={speak[k] * (0.75 + 0.25 * Math.sin(frame * 0.5))} ringColor="#3ddc84" />
+            <div style={{ fontSize: 30, fontWeight: 600, color: speak[k] > 0.5 ? '#ffffff' : 'rgba(246,243,239,0.6)' }}>{p.name}</div>
+          </div>
+        ))}
+      </div>
+      {/* 声波：确定性正弦叠加 */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 7, height: 96, marginTop: 44 }}>
+        {Array.from({ length: 44 }, (_, j) => {
+          const a = 0.5 + 0.5 * Math.sin(frame * 0.42 + j * 0.62) * Math.sin(frame * 0.17 + j * 0.23);
+          const env = Math.sin((j / 43) * Math.PI);
+          return <div key={j} style={{ flex: 1, height: `${(12 + 84 * a * env).toFixed(1)}%`, borderRadius: 4, background: j % 9 === 4 ? '#ff6a3d' : 'rgba(246,243,239,0.82)' }} />;
+        })}
+      </div>
+      <div style={{ display: 'flex', gap: 18, marginTop: 40 }}>
+        <div style={{ flex: 1, height: 76, borderRadius: 38, background: 'rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 30, fontWeight: 650 }}>Preview</div>
+        <div style={{ width: 210, height: 76, borderRadius: 38, background: '#ff4d1f', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 30, fontWeight: 700 }}>Render</div>
+      </div>
+    </div>
+  );
+};
+
+const WorkflowCard: React.FC<{ frame: number }> = ({ frame }) => {
+  const steps = ['Render 1080p master', 'Export JianYing draft', 'Post to the gallery'];
+  const at = [PUSH_STARTS[2] + 16, PUSH_STARTS[2] + 24, PUSH_STARTS[2] + 32];
+  return (
+    <div style={{ width: 760, padding: '40px 44px 48px', fontFamily: SANS, color: '#121407' }}>
+      <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: '0.12em', color: '#7b8064', textTransform: 'uppercase' }}>Trigger</div>
+      <div style={{ ...type(44, 800), marginTop: 12 }}>When the cut locks</div>
+      <div style={{ position: 'relative', marginTop: 36 }}>
+        {/* 竖向连接线：随打勾向下"灌注" */}
+        <div style={{ position: 'absolute', left: 31, top: 56, height: 224, width: 3, background: 'rgba(18,20,7,0.1)' }} />
+        <div style={{
+          position: 'absolute', left: 31, top: 56, width: 3, background: '#121407',
+          height: (ramp(frame, at[0], at[2] - at[0], EASE.swift) * (112 * 2)).toFixed(2) + 'px',
+        }} />
+        {steps.map((s, k) => {
+          const c = springAt(frame, at[k], { damping: 14, stiffness: 240 });
+          const on = frame >= at[k];
+          return (
+            <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 28, height: 112, position: 'relative' }}>
+              <div style={{
+                width: 64, height: 64, borderRadius: 32, flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                background: on ? '#121407' : '#f3f5e6', boxShadow: on ? 'none' : 'inset 0 0 0 3px rgba(18,20,7,0.14)',
+                transform: `scale(${on ? mix(0.6, 1, c).toFixed(4) : 1})`,
+              }}>
+                {on && (
+                  <svg width={30} height={30} viewBox="0 0 30 30">
+                    <path d="M7 15.5 L13 21 L23.5 9.5" fill="none" stroke="#cdf23a" strokeWidth={4.2} strokeLinecap="round" strokeLinejoin="round"
+                      strokeDasharray={28} strokeDashoffset={(28 * (1 - Math.min(1, c))).toFixed(2)} />
+                  </svg>
+                )}
+              </div>
+              <div style={{ fontSize: 36, fontWeight: 650, letterSpacing: '-0.015em', color: on ? '#121407' : '#8d927a' }}>{s}</div>
+              <div style={{ marginLeft: 'auto', fontSize: 26, fontWeight: 600, color: '#8d927a', opacity: on ? Math.min(1, c) : 0, fontFamily: FONT.mono }}>
+                {['38s', '2.4s', '0.6s'][k]}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+// ───────────── 章节 ─────────────
+const ChapterScene: React.FC<{ i: number; frame: number }> = ({ i, frame }) => {
+  const c = CHAPTERS[i];
+  const land = landAt(i);
+  const dark = i === 0;
+  const cardBg = i === 2 ? 'linear-gradient(180deg, #1d1411 0%, #140d0b 100%)' : 'linear-gradient(180deg, #ffffff 0%, #fafaf7 100%)';
+  return (
+    <AbsoluteFill style={{ background: `linear-gradient(176deg, ${c.hi} 0%, ${c.base} 44%, ${c.lo} 100%)`, overflow: 'hidden', fontFamily: SANS }}>
+      {/* 受光：左上柔光斑 + 右下压暗（同一光向，和卡片阴影一致） */}
+      <AbsoluteFill style={{
+        background: `radial-gradient(ellipse 62% 70% at 18% 6%, rgba(255,255,255,${dark ? 0.06 : 0.2}) 0%, rgba(255,255,255,0) 70%), ` +
+          `radial-gradient(ellipse 70% 70% at 100% 100%, ${alpha(c.shade, dark ? 0.5 : 0.3)} 0%, ${alpha(c.shade, 0)} 70%)`,
+      }} />
+      {/* 左栏：眉题 / 标题 / 说明 */}
+      <div style={{ position: 'absolute', left: 120, top: 150, display: 'flex', alignItems: 'center', gap: 20 }}>
+        <div style={{
+          height: 48, padding: '0 18px', borderRadius: 24, display: 'flex', alignItems: 'center',
+          boxShadow: `inset 0 0 0 2px ${alpha(c.ink, 0.5)}`, color: c.ink, fontFamily: FONT.mono, fontSize: 26, fontWeight: 700,
+        }}>{c.num}</div>
+        <div style={{ ...type(30, 700, { caps: true }), color: c.ink, letterSpacing: '0.14em' }}>{c.name}</div>
+      </div>
+      <div style={{ position: 'absolute', left: 116, top: 268, ...type(i === 0 ? 168 : 116, 850), color: c.ink, letterSpacing: '-0.038em', lineHeight: 0.98 }}>
+        <TextReveal text={c.title} by="line" variant="rise" start={land} each={18} gap={5} />
+      </div>
+      <div style={{
+        position: 'absolute', left: 120, top: i === 0 ? 640 : 560, width: 620, ...type(40, 500), lineHeight: 1.28, color: c.ink2,
+        opacity: ramp(frame, land + 8, 14, EASE.out), transform: `translateY(${((1 - ramp(frame, land + 8, 16, EASE.snappy)) * 18).toFixed(2)}px)`,
+      }}>{c.sub}</div>
+      {/* 页脚：品牌 + 章节刻度（章内绝对坐标） */}
+      <div style={{ position: 'absolute', left: 120, bottom: 96, display: 'flex', alignItems: 'center', gap: 14 }}>
+        <ShotcraftWordmark size={28} markScale={1.4} gap={14} tone={i === 3 ? 'light' : 'dark'} color={c.ink} />
+        <div style={{ display: 'flex', gap: 10, marginLeft: 30 }}>
+          {[1, 2, 3].map((k) => (
+            <div key={k} style={{ width: k === i ? 64 : 28, height: 8, borderRadius: 4, background: c.ink, opacity: k === i ? 0.95 : 0.28 }} />
+          ))}
+        </div>
+      </div>
+
+      {/* 右栏 UI 卡（钉在章内坐标） */}
+      {i > 0 && (
+        <div style={{
+          position: 'absolute', right: 120, top: '50%', transform: 'translateY(-50%)', borderRadius: 36, overflow: 'hidden',
+          background: cardBg,
+          boxShadow: `inset 0 1px 0 rgba(255,255,255,${i === 2 ? 0.1 : 0.9}), ${softShadow(48, { color: c.shade, strength: 1.6 })}`,
+        }}>
+          {i === 1 && <ChannelCard frame={frame} />}
+          {i === 2 && <HuddleCard frame={frame} />}
+          {i === 3 && <WorkflowCard frame={frame} />}
+        </div>
+      )}
+    </AbsoluteFill>
+  );
+};
+
+export const BottomPushStackWipe: React.FC = () => {
+  const frame = useCurrentFrame();
+  const progress = PUSH_STARTS.map((_, i) => pushP(frame, i));
+  const vy = -velocity(stackY, frame);
+  const settle = 1 + 0.015 * ramp(frame, 142, 28, EASE.smooth); // 尾段极缓推近
+  return (
+    <AbsoluteFill style={{ overflow: 'hidden', background: CHAPTERS[0].base }}>
+      <AbsoluteFill style={{ transform: `scale(${settle.toFixed(4)})` }}>
+        <SpeedBlur vx={0} vy={vy} amount={0.1} max={22}>
+          {CHAPTERS.map((_, i) => {
+            const pushedIn = i === 0 ? 1 : progress[i - 1];
+            const pushedOut = i < CHAPTERS.length - 1 ? progress[i] : 0;
+            const y = (1 - pushedIn) * H - pushedOut * H;
+            if (y <= -H || y >= H) return null;
+            const moving = pushedIn < 1;
+            return (
+              <AbsoluteFill key={i} style={{ transform: `translateY(${y.toFixed(2)}px)` }}>
+                <ChapterScene i={i} frame={frame} />
+                {i > 0 && moving && (
+                  <>
+                    {/* 接缝：压在旧章上的接触影（近实远虚） */}
+                    <div style={{
+                      position: 'absolute', top: -56, left: 0, right: 0, height: 56,
+                      background: `linear-gradient(to top, ${alpha(CHAPTERS[i].shade, 0.42)}, ${alpha(CHAPTERS[i].shade, 0.12)} 40%, ${alpha(CHAPTERS[i].shade, 0)})`,
+                    }} />
+                    {/* 新章上缘 2px 受光边：色板是一块有厚度的整料 */}
+                    <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, background: 'rgba(255,255,255,0.45)' }} />
+                  </>
+                )}
+              </AbsoluteFill>
+            );
+          })}
+        </SpeedBlur>
+      </AbsoluteFill>
+      <Grain opacity={0.06} blend="overlay" />
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/transition/card-flip-reveal/CardFlipReveal.tsx

@@ -0,0 +1,261 @@
+// 功能卡 3D 翻面揭示（card-flip-reveal）——Apple bento 翻转段。
+// 手法不变：一排功能卡逐张错峰沿 Y 轴翻 180°（perspective + 双面 backface hidden），正面是功能界面，
+// 背面是它带来的大号结论数字（语义成对）；翻转末端过冲再回落，侧棱最薄处有一道随角度走的受光。
+//
+// 第二轮重设计（设计决定）
+// - look = graphite（近单色暗场，白为强调、香槟金点缀）。正面是暗色功能卡，背面是亮瓷白结论卡：
+//   翻面 = 从暗到亮的反相，"所以呢？"的答案被打亮，三张翻完画面从一排暗卡变成一排白色数字海报。
+// - 内容：video-shotcraft 的三项能力——Prompt（一句话写片）/ Recipes（镜头配方）/ Library（配方库搜索），
+//   正面画成为镜头设计的大字 UI（≥ 28px），背面 158px 数字 3.2× / −41% / 0.2s + 34px 结论，上方一组「之前 / 用上之后」对照条在落定后收短。
+// - 卡片竖版 480×620（bento 比例），三卡 1536px 宽占画宽 80%；左上 84px 标题 + 金色眉题；
+//   卡片立在一面暗色镜面地板上——每张卡在地板里有一份同步翻转的倒影（遮罩渐隐），空间一下就成立了。
+// - 翻转动作：4f 预备（反向后仰 −10°）→ 16f 加速翻到 194°（bezier 0.55,0,0.3,1）→ 物理弹簧落回 180°；
+//   翻转中卡片离地抬起（scale +6%）、面随偏离主光的角度变暗（|cos θ| 着色），侧棱 60–120° 有一道
+//   随角度从左扫到右的窄受光（物理光照，不是额外的扫光特效）。背面数字在落定时由 1.08 收到 1，标签晚 4f。
+//
+// 时间表（30fps，150f）
+//   0–16    暗卡一排已在画面，眉题 + 标题逐行升起，相机全程 1 → 1.03 极缓推近
+//   22–48   卡 0：22 预备 → 26–42 翻转 → 42–52 弹簧落定，数字收拢、标签升起
+//   34–60   卡 1（错峰 12f）
+//   46–72   卡 2
+//   72–150  全部落定后 hold ~78f（R1），尾帧是三张白色结论卡的海报
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, bezier, mix, ramp } from '../../_fixtures/Polish';
+import { LOOKS, Stage, TextReveal, alpha, springAt, type } from '../../_fixtures/Look';
+import { BRAND } from '../../_fixtures/Brand';
+
+export const CARD_FLIP_REVEAL_DURATION = 150;
+
+const L = LOOKS.graphite;
+const GOLD = L.accent2;
+const CW = 480;
+const CH = 620;
+const GAP = 48;
+const X0 = (1920 - (CW * 3 + GAP * 2)) / 2; // 192
+const Y = 330;
+const FLIP0 = 22;
+const STAGGER = 12;
+const PRE = 4; // 预备帧
+const FLIP = 16; // 翻转帧
+const PEAK_DEG = 194;
+
+const flipEase = bezier(0.55, 0, 0.3, 1);
+
+// 卡 i 在帧 f 的翻转角：0 → −10（预备）→ 194（加速翻转）→ 180（弹簧落定）
+const angleAt = (f: number, i: number) => {
+  const s = FLIP0 + i * STAGGER;
+  if (f < s + PRE) return -10 * ramp(f, s, PRE, EASE.out);
+  if (f < s + PRE + FLIP) return mix(-10, PEAK_DEG, ramp(f, s + PRE, FLIP, flipEase));
+  return PEAK_DEG - (PEAK_DEG - 180) * springAt(f, s + PRE + FLIP, { damping: 15, stiffness: 190 });
+};
+
+const FEATURES = [
+  { name: 'Prompt', desc: 'One line in, a whole film out.', value: '3.2×', label: 'faster first cut', bars: [1, 0.31], unit: ['48 min', '15 min'] },
+  { name: 'Recipes', desc: 'Camera moves, pre-tuned.', value: '−41%', label: 'time spent keyframing', bars: [1, 0.59], unit: ['6.1 h', '3.6 h'] },
+  { name: 'Library', desc: 'Every shot, one search away.', value: '0.2s', label: 'to find the right move', bars: [1, 0.06], unit: ['3.4 s', '0.2 s'] },
+];
+
+// ───────────── 正面 UI（暗色、大字） ─────────────
+const FrontUI: React.FC<{ i: number; frame: number }> = ({ i, frame }) => {
+  const ink = L.ink, ink2 = L.ink2, ink3 = L.ink3;
+  if (i === 0) {
+    const caret = Math.floor(frame / 9) % 2 === 0;
+    return (
+      <div style={{ fontSize: 30, lineHeight: 1.42, color: ink2, fontWeight: 450 }}>
+        <div style={{ color: ink }}>Make a 30s launch film,</div>
+        <div style={{ color: ink }}>
+          open on a crash zoom<span style={{ display: 'inline-block', width: 3, height: 34, verticalAlign: -6, background: caret ? GOLD : 'transparent', marginLeft: 2 }} />
+          <span style={{ color: alpha(ink, 0.32) }}> and</span>
+        </div>
+        <div style={{ color: alpha(ink, 0.32) }}>end on the logo sting.</div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 26 }}>
+          <div style={{ height: 40, padding: '0 14px', borderRadius: 10, boxShadow: `inset 0 0 0 2px ${alpha(ink, 0.22)}`, display: 'flex', alignItems: 'center', fontFamily: FONT.mono, fontSize: 22, fontWeight: 600, color: ink }}>Tab</div>
+          <div style={{ fontSize: 24, color: ink3 }}>to accept</div>
+        </div>
+      </div>
+    );
+  }
+  if (i === 1) {
+    return (
+      <div>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          {['#8a8f99', '#c9b48a', '#6f7480', '#a8acb4'].map((c, k) => (
+            <div key={k} style={{ width: 48, height: 48, borderRadius: 24, background: c, marginLeft: k ? -12 : 0, boxShadow: `0 0 0 3px ${L.surface}` }} />
+          ))}
+          <div style={{ marginLeft: 16, fontSize: 24, color: ink3 }}>Recipe · crash zoom</div>
+        </div>
+        {['Push 1 → 1.6 in 6f', 'Blur rides the snap', 'Land on the downbeat'].map((t, k) => (
+          <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: k ? 18 : 30 }}>
+            <div style={{ width: 8, height: 8, borderRadius: 4, background: k === 0 ? GOLD : alpha(ink, 0.4) }} />
+            <div style={{ fontSize: 30, color: ink, fontWeight: 500 }}>{t}</div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+  return (
+    <div>
+      <div style={{ height: 70, borderRadius: 18, background: L.surface2, boxShadow: `inset 0 0 0 1.5px ${alpha(ink, 0.12)}`, display: 'flex', alignItems: 'center', gap: 14, padding: '0 22px' }}>
+        <svg width={26} height={26} viewBox="0 0 26 26"><circle cx={11} cy={11} r={8} fill="none" stroke={ink2} strokeWidth={2.6} /><path d="M17 17l6 6" stroke={ink2} strokeWidth={2.6} strokeLinecap="round" /></svg>
+        <div style={{ fontSize: 30, color: ink, fontWeight: 500 }}>crash zoom</div>
+      </div>
+      {[['Crash zoom punch', 'Card'], ['Zoom-through', 'Card'], ['Dolly zoom', 'Style']].map(([t, k2], k) => (
+        <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: k ? 14 : 26, padding: '0 6px' }}>
+          <div style={{ width: 36, height: 44, borderRadius: 7, background: alpha(ink, k === 0 ? 0.9 : 0.16) }} />
+          <div style={{ fontSize: 28, color: k === 0 ? ink : ink2, fontWeight: k === 0 ? 650 : 450 }}>{t}</div>
+          <div style={{ marginLeft: 'auto', fontSize: 22, color: ink3 }}>{k2}</div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+// 受光着色：面偏离正面越多越暗；60–120° 区间一道随角度从左扫到右的窄受光（只在侧棱最薄附近）
+const FaceLight: React.FC<{ angle: number; dark: boolean }> = ({ angle, dark }) => {
+  const c = Math.abs(Math.cos((angle * Math.PI) / 180));
+  const shade = (1 - c) * (dark ? 0.55 : 0.4);
+  const band = Math.max(0, 1 - Math.abs(angle - 90) / 34);
+  const pos = mix(-20, 120, Math.min(1, Math.max(0, (angle - 56) / 68)));
+  return (
+    <>
+      <div style={{ position: 'absolute', inset: 0, background: '#000', opacity: shade }} />
+      {band > 0.01 && (
+        <div style={{
+          position: 'absolute', inset: 0, opacity: band * (dark ? 0.5 : 0.35),
+          background: `linear-gradient(100deg, rgba(255,255,255,0) ${pos - 12}%, rgba(255,255,255,0.9) ${pos}%, rgba(255,255,255,0) ${pos + 12}%)`,
+        }} />
+      )}
+    </>
+  );
+};
+
+const FlipCard: React.FC<{ i: number; frame: number }> = ({ i, frame }) => {
+  const angle = angleAt(frame, i);
+  const f = FEATURES[i];
+  const s = FLIP0 + i * STAGGER;
+  const lift = Math.max(0, Math.sin((Math.min(180, Math.max(0, angle)) * Math.PI) / 180));
+  const land = s + PRE + FLIP;
+  const num = springAt(frame, land - 2, { damping: 18, stiffness: 160 });
+  const lab = ramp(frame, land + 2, 14, EASE.snappy);
+  return (
+    <div style={{ position: 'absolute', inset: 0, perspective: 1600 }}>
+      <div style={{
+        position: 'absolute', inset: 0, transformStyle: 'preserve-3d',
+        transform: `translateZ(${(lift * 60).toFixed(2)}px) rotateY(${angle.toFixed(3)}deg)`,
+      }}>
+        {/* 正面：暗色功能卡 */}
+        <div style={{
+          position: 'absolute', inset: 0, backfaceVisibility: 'hidden', borderRadius: 34, overflow: 'hidden',
+          background: `linear-gradient(180deg, #1d1e22 0%, ${L.surface} 48%, #111214 100%)`,
+          boxShadow: `inset 0 0 0 1.5px ${alpha('#ffffff', 0.09)}, inset 0 2px 0 ${alpha('#ffffff', 0.08)}`,
+          fontFamily: FONT.sans,
+        }}>
+          <div style={{ position: 'absolute', left: 40, top: 40, display: 'flex', alignItems: 'center', gap: 12 }}>
+            <div style={{ fontFamily: FONT.mono, fontSize: 22, fontWeight: 600, color: L.ink3 }}>0{i + 1}</div>
+            <div style={{ ...type(22, 700, { caps: true }), color: L.ink2, letterSpacing: '0.16em' }}>Feature</div>
+          </div>
+          <div style={{ position: 'absolute', left: 40, right: 40, top: 112 }}>
+            <FrontUI i={i} frame={frame} />
+          </div>
+          <div style={{ position: 'absolute', left: 40, right: 40, bottom: 40 }}>
+            <div style={{ ...type(52, 750), color: L.ink }}>{f.name}</div>
+            <div style={{ ...type(28, 450), color: L.ink2, marginTop: 10 }}>{f.desc}</div>
+          </div>
+          <FaceLight angle={angle} dark />
+        </div>
+        {/* 背面：瓷白结论卡 */}
+        <div style={{
+          position: 'absolute', inset: 0, backfaceVisibility: 'hidden', transform: 'rotateY(180deg)', borderRadius: 34, overflow: 'hidden',
+          background: 'linear-gradient(180deg, #fbfaf7 0%, #f1f0ec 100%)',
+          boxShadow: `inset 0 0 0 1.5px rgba(0,0,0,0.06), inset 0 2px 0 rgba(255,255,255,0.9)`,
+          fontFamily: FONT.sans, color: '#0d0d0f',
+        }}>
+          <div style={{ position: 'absolute', left: 40, top: 40, display: 'flex', alignItems: 'center', gap: 12 }}>
+            <div style={{ width: 12, height: 12, borderRadius: 6, background: '#b8925a' }} />
+            <div style={{ ...type(22, 700, { caps: true }), color: '#6b6a66', letterSpacing: '0.16em' }}>{f.name}</div>
+          </div>
+          {/* 对照条：之前 / 用上之后（落定后才长出来） */}
+          <div style={{ position: 'absolute', left: 40, right: 40, top: 112 }}>
+            {(['Before', `With ${BRAND.short}`] as const).map((t, k) => {
+              const g = k === 0 ? 1 : ramp(frame, land + 4, 18, EASE.snappy);
+              const w = k === 0 ? f.bars[0] : mix(f.bars[0], f.bars[1], g);
+              return (
+                <div key={t} style={{ marginTop: k ? 26 : 0 }}>
+                  <div style={{ display: 'flex', alignItems: 'baseline' }}>
+                    <div style={{ ...type(22, 700, { caps: true }), color: k ? '#0d0d0f' : '#8a8984', letterSpacing: '0.14em' }}>{t}</div>
+                    <div style={{ marginLeft: 'auto', fontFamily: FONT.mono, fontSize: 24, fontWeight: 600, color: k ? '#0d0d0f' : '#8a8984', opacity: k ? lab : 1 }}>{f.unit[k]}</div>
+                  </div>
+                  <div style={{ height: 16, borderRadius: 8, marginTop: 10, background: 'rgba(0,0,0,0.06)', overflow: 'hidden' }}>
+                    <div style={{ width: `${(w * 100).toFixed(2)}%`, height: '100%', borderRadius: 8, background: k ? '#0d0d0f' : 'rgba(0,0,0,0.18)' }} />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <div style={{ position: 'absolute', left: 36, right: 30, bottom: 128 }}>
+            <div style={{
+              ...type(158, 800), letterSpacing: '-0.06em', lineHeight: 0.9, color: '#0d0d0f', whiteSpace: 'nowrap',
+              transform: `scale(${mix(1.08, 1, num).toFixed(4)})`, transformOrigin: 'left bottom',
+            }}>{f.value}</div>
+          </div>
+          <div style={{
+            position: 'absolute', left: 40, right: 40, bottom: 48, ...type(34, 550), color: '#3d3c39',
+            opacity: lab, transform: `translateY(${((1 - lab) * 14).toFixed(2)}px)`,
+          }}>{f.label}</div>
+          <FaceLight angle={180 - angle} dark={false} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const CardFlipReveal: React.FC = () => {
+  const frame = useCurrentFrame();
+  const push = 1 + 0.03 * ramp(frame, 0, 150, EASE.smooth);
+  return (
+    <AbsoluteFill style={{ overflow: 'hidden' }}>
+      <Stage look={L} keyLight={{ x: 0.5, y: -0.05 }} fill={{ x: 0.5, y: 1.1 }} horizon={0.88} intensity={0.9}>
+        {/* 镜面地板：地平线以下略亮的反射面 */}
+        <div style={{
+          position: 'absolute', left: 0, right: 0, top: Y + CH, bottom: 0,
+          background: `linear-gradient(180deg, ${alpha('#ffffff', 0.035)} 0%, ${alpha('#ffffff', 0)} 60%)`,
+          borderTop: `1px solid ${alpha('#ffffff', 0.06)}`,
+        }} />
+      </Stage>
+      <AbsoluteFill style={{ transform: `scale(${push.toFixed(4)})`, transformOrigin: '50% 60%' }}>
+        {/* 标题 */}
+        <div style={{ position: 'absolute', left: X0, top: 118, fontFamily: FONT.sans }}>
+          <div style={{ ...type(26, 700, { caps: true }), color: GOLD, letterSpacing: '0.18em' }}>
+            <TextReveal text={`${BRAND.name} · Launch results`} by="word" variant="blur" start={0} each={14} gap={2} />
+          </div>
+          <div style={{ ...type(84, 760), color: L.ink, marginTop: 18 }}>
+            <TextReveal text="Three features. Three outcomes." by="word" variant="rise" start={2} each={18} gap={2.5} />
+          </div>
+        </div>
+        {[0, 1, 2].map((i) => (
+          <React.Fragment key={i}>
+            {/* 倒影：同一张卡竖直镜像，遮罩渐隐 */}
+            <div style={{
+              position: 'absolute', left: X0 + i * (CW + GAP), top: Y + CH + 6, width: CW, height: CH,
+              transform: 'scaleY(-1)', transformOrigin: 'center', opacity: 0.22,
+              WebkitMaskImage: 'linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 26%)',
+              maskImage: 'linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 26%)',
+            }}>
+              <FlipCard i={i} frame={frame} />
+            </div>
+            {/* 接地影 */}
+            <div style={{
+              position: 'absolute', left: X0 + i * (CW + GAP) + 30, width: CW - 60, top: Y + CH - 18, height: 36, borderRadius: '50%',
+              background: 'radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,0.7), rgba(0,0,0,0) 70%)',
+              transform: `scaleX(${Math.max(0.12, Math.abs(Math.cos((angleAt(frame, i) * Math.PI) / 180))).toFixed(3)})`,
+            }} />
+            <div style={{ position: 'absolute', left: X0 + i * (CW + GAP), top: Y, width: CW, height: CH }}>
+              <FlipCard i={i} frame={frame} />
+            </div>
+          </React.Fragment>
+        ))}
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};