hyper-animator-codex 0.7.1 → 0.8.0

package/skills/hyper-animator-codex/references/shotcraft/source/demos/typewriter-moves/TerminalTypewriter.tsx

@@ -0,0 +1,122 @@
+// terminal-typewriter —— 终端打字机触发
+// 深色终端窗居中，"$ acme deploy --prod" 逐字符敲出（2f/字符，帧确定
+// substring），方块光标 12f 方波闪 → 敲完停 12f → 回车帧：整场景 6f
+// Easing.in(cubic) 急推 scale 1→3.2 向命令行推入（末 2f 加 blur）硬切到
+// FakeDashboard A 全屏，1.06→1 回稳 4f 落定。收尾真静止 ≥40f。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, FakeDashboard } from '../_fixtures/Fixtures';
+
+const CMD = 'acme deploy --prod';
+
+// 时间轴（30fps，共 145f）
+const T = {
+  typeStart: 10,                       // 开始敲字
+  typeEnd: 10 + CMD.length * 2,        // 46：18 字符 × 2f
+  enter: 58,                           // 敲完停 12f 后回车
+  pushEnd: 64,                         // 6f 急推结束，硬切帧
+  settleEnd: 68,                       // dashboard 1.06→1 回稳 4f
+  total: 145,                          // f68 起真静止 77f
+};
+
+// 终端窗几何
+const TW = 1100;
+const TH = 620;
+const TL = (1920 - TW) / 2; // 410
+const TT = (1080 - TH) / 2; // 230
+const TITLEBAR = 52;
+const PAD = 34;
+// 命令行基线（推入焦点）：标题栏下第二行文字中心
+const FOCUS_X = 960;
+const FOCUS_Y = TT + TITLEBAR + PAD + 92; // ≈ 408
+
+const TerminalWindow: React.FC<{ chars: number; cursorOn: boolean }> = ({ chars, cursorOn }) => (
+  <div style={{
+    width: TW, height: TH, background: '#1e1e1c', borderRadius: 14,
+    boxShadow: '0 24px 64px rgba(0,0,0,0.35)',
+    overflow: 'hidden', boxSizing: 'border-box',
+  }}>
+    {/* 标题栏：三圆点窗控（灰阶） */}
+    <div style={{
+      height: TITLEBAR, background: '#2a2a28', borderBottom: '1px solid #3a3a38',
+      display: 'flex', alignItems: 'center', gap: 12, padding: '0 22px',
+      boxSizing: 'border-box',
+    }}>
+      {['#6a6a68', '#8f8f8d', '#b5b5b3'].map((c, i) => (
+        <div key={i} style={{ width: 16, height: 16, borderRadius: 8, background: c }} />
+      ))}
+      <div style={{ margin: '0 auto', height: 10, width: 200, background: '#4a4a48', borderRadius: 5 }} />
+      <div style={{ width: 72 }} />
+    </div>
+    {/* 内容区 */}
+    <div style={{
+      padding: PAD, fontFamily: 'Menlo, Consolas, monospace', fontSize: 40,
+      color: '#d8d8d6', lineHeight: 1.5,
+    }}>
+      {/* 一行历史输出做上下文 */}
+      <div style={{ color: '#7a7a78', fontSize: 32, marginBottom: 18 }}>~/acme-app (main)</div>
+      <div style={{ display: 'flex', alignItems: 'center', whiteSpace: 'pre' }}>
+        <span style={{ color: '#9f9f9d' }}>{'$ '}</span>
+        <span>{CMD.substring(0, chars)}</span>
+        <span style={{
+          display: 'inline-block', width: 24, height: 48, marginLeft: 4,
+          background: '#d8d8d6', opacity: cursorOn ? 1 : 0,
+        }} />
+      </div>
+    </div>
+  </div>
+);
+
+export const TerminalTypewriter: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 帧确定打字：2f/字符
+  const chars = Math.min(CMD.length, Math.max(0, Math.floor((frame - T.typeStart) / 2)));
+
+  // 方块光标 12f 周期方波闪（全程）
+  const cursorOn = frame % 12 < 6;
+
+  // 回车急推：整场景 scale 1→3.2，6f Easing.in(cubic)，向命令行推入
+  const pushScale = interpolate(frame, [T.enter, T.pushEnd], [1, 3.2], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.in(Easing.cubic),
+  });
+  // 末 2f 运动模糊（f62–f64），硬切后摘罩=条件挂载
+  const pushBlur = interpolate(frame, [T.pushEnd - 2, T.pushEnd], [0, 10], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+
+  // 硬切：f64 起终端场景整体卸载，dashboard 挂载
+  const cut = frame >= T.pushEnd;
+
+  // dashboard 落定：1.06→1 回稳 4f
+  const dashScale = interpolate(frame, [T.pushEnd, T.settleEnd], [1.06, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      {!cut ? (
+        <div style={{
+          width: 1920, height: 1080,
+          transform: `scale(${pushScale})`,
+          transformOrigin: `${FOCUS_X}px ${FOCUS_Y}px`,
+          ...(pushBlur > 0 ? { filter: `blur(${pushBlur}px)` } : {}),
+        }}>
+          <div style={{ position: 'absolute', left: TL, top: TT }}>
+            <TerminalWindow chars={chars} cursorOn={cursorOn} />
+          </div>
+        </div>
+      ) : (
+        <div style={{
+          width: 1920, height: 1080,
+          transform: `scale(${dashScale})`,
+          transformOrigin: '960px 540px',
+        }}>
+          <FakeDashboard variant="A" />
+        </div>
+      )}
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/typewriter-moves/TypewriterErrorRetype.tsx

@@ -0,0 +1,109 @@
+// typewriter-error-retype｜打字机误删重打
+// 浅底居中大字：f2 起 2f/字符打出 "just a dashboard"(16 字符) → f32–48 停顿
+// 16f(光标闪两下=犹豫) → f48 起 1.5f/字符逐字退格删掉 "a dashboard"(11 字符，
+// 字符直接消失) → f68 起 1.5f/字符果断打出 "your command center"(19 字符，
+// f95 打完) → 光标闪两个周期(10f/周期)后 f110 永久熄灭。节奏三档：打 2f/删
+// 1.5f/重打 1.5f 且无停顿。f110 后全静止，160f 总长 → 收尾真静止 50f。
+// 等宽感：逐字符固定宽 span，无 letter-spacing 动画。全部帧确定。
+import React from 'react';
+import { useCurrentFrame } from 'remotion';
+import { G } from '../_fixtures/Fixtures';
+
+const TEXT1 = 'just a dashboard'; // 16 chars
+const KEEP = 5; // "just " 保留
+const DEL = TEXT1.length - KEEP; // 11 chars 待删
+const TEXT2 = 'your command center'; // 19 chars
+
+const T1 = 2; // 第一遍打字起点，2f/字符
+const PAUSE_START = T1 + (TEXT1.length - 1) * 2; // f32 打完
+const DS = PAUSE_START + 16; // f48 开删，1.5f/字符
+const RS = 68; // 重打起点，1.5f/字符（删完 f64.5 后小顿 3.5f）
+const TYPE2_END = RS + (TEXT2.length - 1) * 1.5; // f95 打完
+const CURSOR_OFF = 115; // 两个 10f 闪烁周期后熄灭（最后一次视觉变化 f110）
+
+const CHAR_W = 58; // fontSize 96 的等宽感字符宽
+
+// 光标可见性：打字/删除时常亮；停顿段 8f 周期闪两下；打完后 10f 周期闪两下；之后永灭
+const cursorOn = (f: number): boolean => {
+  if (f >= CURSOR_OFF) return false;
+  if (f >= TYPE2_END) {
+    // f95 起：on[95,100) off[100,105) on[105,110) off[110,115)
+    return Math.floor((f - TYPE2_END) / 5) % 2 === 0;
+  }
+  if (f >= DS) return true; // 删除 + 重打：常亮（果断）
+  if (f >= PAUSE_START) {
+    // 犹豫段 f32–48：on[32,36) off[36,40) on[40,44) off[44,48)
+    return Math.floor((f - PAUSE_START) / 4) % 2 === 0;
+  }
+  return true; // 第一遍打字：常亮
+};
+
+export const TypewriterErrorRetype: React.FC = () => {
+  const f = useCurrentFrame();
+
+  // 第一遍已打出字符数
+  const n1 = f < T1 ? 0 : Math.min(TEXT1.length, Math.floor((f - T1) / 2) + 1);
+  // 已删除字符数（从尾部删）
+  const removed = f < DS ? 0 : Math.min(DEL, Math.floor((f - DS) / 1.5) + 1);
+  // 第二遍已打出字符数
+  const n2 = f < RS ? 0 : Math.min(TEXT2.length, Math.floor((f - RS) / 1.5) + 1);
+
+  const shown =
+    TEXT1.slice(0, Math.max(KEEP, n1 - removed)).slice(0, n1) +
+    TEXT2.slice(0, n2);
+
+  const chars = shown.split('');
+
+  return (
+    <div
+      style={{
+        width: 1920,
+        height: 1080,
+        background: G.bg,
+        position: 'relative',
+      }}
+    >
+      {/* 左缘锚定：最终句 24 字符×58=1392px，左起 264 恰好整体居中；
+          打字过程不横移（真打字机感） */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 264,
+          top: 490,
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        {chars.map((c, i) => (
+          <span
+            key={i}
+            style={{
+              display: 'inline-block',
+              width: CHAR_W,
+              textAlign: 'center',
+              fontFamily: '"Courier New", Courier, monospace',
+              fontSize: 96,
+              fontWeight: 700,
+              color: G.ink,
+              lineHeight: 1.1,
+            }}
+          >
+            {c === ' ' ? ' ' : c}
+          </span>
+        ))}
+        {/* 光标：竖线，条件挂载而非 opacity 0 */}
+        {cursorOn(f) && (
+          <span
+            style={{
+              display: 'inline-block',
+              width: 7,
+              height: 100,
+              marginLeft: 4,
+              background: G.ink,
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/ui-strip-away-outro/UiStripAwayOutro.tsx

@@ -0,0 +1,218 @@
+// ui-strip-away-outro —— framer-ai 33–36.5s
+// 满屏灰阶"编辑器"里光标点击高亮 Publish 按钮 → UI 层层错峰蒸发退场
+// （每层 fade + 轻微位移，从外围到中心）→ 黑场只剩按钮 → 按钮淡出交棒字标。
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, interpolate, spring, useVideoConfig, Easing } from 'remotion';
+import { G, Card } from '../_fixtures/Fixtures';
+
+const CLICK = 34; // 点击时刻
+// 蒸发层级（点击后延迟，外围先走）
+const STRIP = {
+  sidebar: CLICK + 4,
+  leftPanel: CLICK + 8,
+  canvasCards: CLICK + 12,
+  topbarEnds: CLICK + 16,
+  canvasBg: CLICK + 20,
+  toolbarShell: CLICK + 24,
+};
+const STRIP_DUR = 14;
+const BTN_FADE = CLICK + 52;
+const LOGO_IN = CLICK + 62;
+
+// 某层的蒸发进度 → {opacity, offset}
+const useStrip = (frame: number, start: number, dx: number, dy: number) => {
+  const p = interpolate(frame, [start, start + STRIP_DUR], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.in(Easing.quad), // 离场加速
+  });
+  return {
+    opacity: 1 - p,
+    transform: `translate(${dx * p}px, ${dy * p}px)`,
+  };
+};
+
+export const UiStripAwayOutro: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // 背景：编辑器灰底 → 黑场（随 canvasBg 层蒸发压黑）
+  const bgDark = interpolate(frame, [STRIP.canvasBg, STRIP.canvasBg + STRIP_DUR + 6], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.inOut(Easing.quad),
+  });
+
+  const sidebar = useStrip(frame, STRIP.sidebar, -140, 0);
+  const leftPanel = useStrip(frame, STRIP.leftPanel, -90, 20);
+  const topLeft = useStrip(frame, STRIP.topbarEnds, -80, -60);
+  const topRight = useStrip(frame, STRIP.topbarEnds, 80, -60);
+  const toolbarShell = useStrip(frame, STRIP.toolbarShell, 0, -50);
+  const canvasFrame = useStrip(frame, STRIP.canvasBg, 0, 40);
+
+  // 画布卡片错峰蒸发
+  const cardStrip = (i: number) => useStripStatic(frame, STRIP.canvasCards + i * 3, (i % 2 ? 70 : -70), 50 + i * 10);
+
+  // 按钮：点击脉冲 + 最后淡出
+  const press = spring({ frame: frame - CLICK, fps, config: { damping: 12, stiffness: 220 } });
+  const pressScale = frame < CLICK ? 1 : 1 - 0.12 * Math.sin(Math.min(1, press) * Math.PI);
+  const btnOp = interpolate(frame, [BTN_FADE, BTN_FADE + 12], [1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  // 蒸发期间按钮从工具条位置滑向屏幕中心，独占黑场
+  const btnCenter = interpolate(frame, [STRIP.toolbarShell, STRIP.toolbarShell + 18], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.inOut(Easing.cubic),
+  });
+  const btnX = 1560 + (960 - 88 - 1560) * btnCenter;
+  const btnY = 30 + (540 - 30 - 30) * btnCenter;
+  const btnScale = 1 + 0.5 * btnCenter;
+
+  // 字标接棒
+  const logoP = spring({ frame: frame - LOGO_IN, fps, config: { damping: 14, stiffness: 90 } });
+
+  // 光标移向按钮
+  const curX = interpolate(frame, [4, CLICK - 2], [820, 1636], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.inOut(Easing.quad),
+  });
+  const curY = interpolate(frame, [4, CLICK - 2], [640, 64], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.inOut(Easing.quad),
+  });
+  const curOp = interpolate(frame, [CLICK + 6, CLICK + 16], [1, 0], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+
+  return (
+    <AbsoluteFill style={{ background: '#111110', overflow: 'hidden' }}>
+      {/* 编辑器灰底（作为一层可蒸发的背景） */}
+      <AbsoluteFill style={{ background: G.bg, opacity: 1 - bgDark }} />
+
+      {/* 左侧栏（图层面板） */}
+      <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 240, background: G.side, padding: '90px 24px', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 20, ...sidebar }}>
+        {Array.from({ length: 9 }).map((_, i) => (
+          <div key={i} style={{ height: 13, width: `${55 + ((i * 31) % 40)}%`, background: G.sideBar, borderRadius: 6 }} />
+        ))}
+      </div>
+
+      {/* 右侧属性面板 */}
+      <div style={{ position: 'absolute', right: 0, top: 60, bottom: 0, width: 300, background: G.panel, borderLeft: `2px solid ${G.line}`, padding: 28, boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 18, ...leftPanel }}>
+        {Array.from({ length: 4 }).map((_, i) => (
+          <React.Fragment key={i}>
+            <div style={{ height: 12, width: '45%', background: G.bar, borderRadius: 6 }} />
+            <div style={{ height: 34, background: '#fff', border: `2px solid ${G.line}`, borderRadius: 8, boxSizing: 'border-box' }} />
+          </React.Fragment>
+        ))}
+      </div>
+
+      {/* 顶部工具条左半（logo + 工具 chips） */}
+      <div style={{ position: 'absolute', left: 0, top: 0, width: 760, height: 60, background: G.panel, borderBottom: `2px solid ${G.line}`, display: 'flex', alignItems: 'center', gap: 16, padding: '0 24px', boxSizing: 'border-box', ...topLeft }}>
+        <div style={{ width: 32, height: 32, borderRadius: 8, background: G.mid }} />
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} style={{ width: 30, height: 30, borderRadius: 8, background: G.line }} />
+        ))}
+      </div>
+      {/* 顶部工具条中段（标题） */}
+      <div style={{ position: 'absolute', left: 760, top: 0, right: 400, height: 60, background: G.panel, borderBottom: `2px solid ${G.line}`, display: 'flex', alignItems: 'center', justifyContent: 'center', boxSizing: 'border-box', ...toolbarShell }}>
+        <div style={{ height: 14, width: 220, background: G.bar, borderRadius: 7 }} />
+      </div>
+      {/* 顶部工具条右段底板（Invite 假按钮；Publish 单独渲染在最上层） */}
+      <div style={{ position: 'absolute', right: 0, top: 0, width: 400, height: 60, background: G.panel, borderBottom: `2px solid ${G.line}`, display: 'flex', alignItems: 'center', justifyContent: 'flex-start', gap: 14, padding: '0 24px', boxSizing: 'border-box', ...topRight }}>
+        <div style={{ height: 36, width: 100, borderRadius: 18, border: `2px solid ${G.bar}`, boxSizing: 'border-box' }} />
+      </div>
+
+      {/* 画布区：一张浏览器式大卡 + 两张小卡 */}
+      <div style={{ position: 'absolute', left: 320, top: 130, width: 1180, height: 850, ...canvasFrame }}>
+        <div style={{ position: 'absolute', inset: 0, background: G.card, border: `2px solid ${G.border}`, borderRadius: 18, boxShadow: '0 10px 40px rgba(0,0,0,0.08)' }}>
+          <div style={{ height: 46, borderBottom: `2px solid ${G.line}`, display: 'flex', alignItems: 'center', gap: 8, padding: '0 18px' }}>
+            {[0, 1, 2].map((i) => (
+              <div key={i} style={{ width: 14, height: 14, borderRadius: 7, background: G.line }} />
+            ))}
+            <div style={{ marginLeft: 16, height: 20, width: 380, background: G.bg, borderRadius: 10 }} />
+          </div>
+        </div>
+        {[0, 1, 2, 3].map((i) => {
+          const s = cardStrip(i);
+          return (
+            <div key={i} style={{ position: 'absolute', left: 70 + (i % 2) * 560, top: 120 + Math.floor(i / 2) * 340, ...s }}>
+              <Card w={480} h={280} seed={i + 2} />
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Publish 按钮（高亮层，最后退场） */}
+      <div
+        style={{
+          position: 'absolute',
+          left: btnX,
+          top: btnY,
+          width: 176,
+          height: 44,
+          opacity: btnOp,
+          transform: `scale(${pressScale})`,
+          zIndex: 30,
+        }}
+      >
+        <div
+          style={{
+            width: 176 * btnScale,
+            height: 44 * btnScale,
+            marginLeft: -((176 * btnScale - 176) / 2),
+            marginTop: -((44 * btnScale - 44) / 2),
+            borderRadius: 22 * btnScale,
+            background: '#f2f2f0',
+            boxShadow: `0 0 ${30 + 40 * btnCenter}px rgba(255,255,255,${0.25 + 0.3 * btnCenter * bgDark})`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontFamily: 'Helvetica, Arial, sans-serif',
+            fontWeight: 700,
+            fontSize: 20 * btnScale,
+            color: '#161615',
+          }}
+        >
+          Publish
+        </div>
+      </div>
+
+      {/* 字标接棒 */}
+      {frame >= LOGO_IN && (
+        <AbsoluteFill style={{ alignItems: 'center', justifyContent: 'center' }}>
+          <div
+            style={{
+              opacity: logoP,
+              transform: `scale(${0.86 + 0.14 * logoP})`,
+              fontFamily: 'Helvetica, Arial, sans-serif',
+              fontWeight: 800,
+              fontSize: 110,
+              letterSpacing: 6,
+              color: '#f2f2f0',
+            }}
+          >
+            WORDMARK
+          </div>
+        </AbsoluteFill>
+      )}
+
+      {/* 光标 */}
+      <svg width={40} height={44} viewBox="0 0 20 22" style={{ position: 'absolute', left: curX, top: curY, opacity: curOp, zIndex: 40 }}>
+        <path d="M2 1 L2 17 L6.5 13.2 L9.4 20 L12.4 18.7 L9.5 12 L15 11.6 Z" fill={G.ink} stroke="#fff" strokeWidth="1.4" />
+      </svg>
+    </AbsoluteFill>
+  );
+};
+
+// hook 规则外的静态版本（供 map 内调用）
+const useStripStatic = (frame: number, start: number, dx: number, dy: number) => {
+  const p = interpolate(frame, [start, start + STRIP_DUR], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.in(Easing.quad),
+  });
+  return {
+    opacity: 1 - p,
+    transform: `translate(${dx * p}px, ${dy * p}px)`,
+  };
+};

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

@@ -0,0 +1,199 @@
+// icon-flip-bloom-logo —— 图标 Y 轴翻转压扁成竖线，绽放成花形 mark + wordmark 扫出
+// 源：perplexity-promo 88–91.5s。笑脸 laptop 图标 anticipation 晃两下 →
+// 沿 Y 轴翻转压扁成竖线（拖影/模糊）→ 翻过最薄处绽放花形 mark（花瓣张开）→
+// wordmark 从 mark 右侧带方向模糊逐段扫出（字符从糊到锐利）。
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, interpolate, Easing, spring, useVideoConfig } from 'remotion';
+import { G } from '../_fixtures/Fixtures';
+
+const FONT = 'Helvetica, Arial, sans-serif';
+const INK = '#20808d'; // 花形 mark 用一点 teal，其余灰阶
+
+const SmileLaptop: React.FC<{ size: number }> = ({ size }) => (
+  <svg width={size} height={size} viewBox="0 0 40 40">
+    <rect x={7} y={6} width={26} height={20} rx={3.5} fill="#fff" stroke={G.ink} strokeWidth={3} />
+    <circle cx={15.5} cy={13.5} r={2} fill={G.ink} />
+    <circle cx={24.5} cy={13.5} r={2} fill={G.ink} />
+    <path d="M14 18.5 Q20 23.5 26 18.5" stroke={G.ink} strokeWidth={2.8} fill="none" strokeLinecap="round" />
+    <path d="M3.5 31.5 L36.5 31.5" stroke={G.ink} strokeWidth={3.6} strokeLinecap="round" />
+  </svg>
+);
+
+// 5 瓣抽象花形 mark，bloom: 0(闭合竖线)→1(全开)
+const FlowerMark: React.FC<{ size: number; bloom: number }> = ({ size, bloom }) => {
+  const petals = 5;
+  return (
+    <svg width={size} height={size} viewBox="-50 -50 100 100">
+      {Array.from({ length: petals }).map((_, i) => {
+        // 从竖直方向(-90°)向两侧展开到均匀分布
+        const finalAngle = -90 + (i - (petals - 1) / 2) * (360 / petals);
+        const angle = interpolate(bloom, [0, 1], [-90, finalAngle]);
+        const len = interpolate(bloom, [0, 1], [20, 38]);
+        const wid = interpolate(bloom, [0, 1], [3, 15]);
+        return (
+          <ellipse
+            key={i}
+            cx={0}
+            cy={-len / 2}
+            rx={wid / 2}
+            ry={len / 2}
+            fill={INK}
+            opacity={0.92}
+            transform={`rotate(${angle + 90})`}
+          />
+        );
+      })}
+      <circle r={interpolate(bloom, [0, 1], [2, 9])} fill={G.ink} />
+    </svg>
+  );
+};
+
+const WORD = 'perplexity';
+
+export const IconFlipBloomLogo: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // ---- 时间轴 ----
+  // 0–10: 图标登场（淡入微弹）
+  // 12–34: anticipation 倾斜蓄力晃两下
+  // 34–46: Y 轴翻转压扁成竖线（scaleX -> 0.04，带拖影）
+  // 46–62: 翻过最薄处绽放花形（bloom 0->1 带过冲）
+  // 64–100: mark 左移让位 + wordmark 逐字符方向模糊扫出
+  const FLIP_START = 34;
+  const FLIP_MID = 46;
+  const BLOOM_END = 62;
+  const WORD_START = 66;
+
+  // 登场
+  const inT = spring({ frame, fps, config: { damping: 13, stiffness: 140, mass: 0.8 } });
+
+  // anticipation：两次倾斜摆动，幅度递增（-10° / +14°），最后向反方向压一下蓄力
+  const wobble =
+    interpolate(frame, [12, 18, 24, 30, FLIP_START], [0, -12, 14, -18, 0], {
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp',
+      easing: Easing.inOut(Easing.sin),
+    });
+
+  // 翻转前半：scaleX 1 -> 0.04（加速入），伴随拖影
+  const flipIn = interpolate(frame, [FLIP_START, FLIP_MID], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.in(Easing.cubic),
+  });
+  const iconScaleX = interpolate(flipIn, [0, 1], [1, 0.04]);
+
+  // 绽放：spring 过冲
+  const bloomSpring = spring({
+    frame: frame - FLIP_MID,
+    fps,
+    config: { damping: 11, stiffness: 130, mass: 0.9 },
+  });
+  const bloom = frame < FLIP_MID ? 0 : bloomSpring;
+  // mark 从竖线厚度撑开：scaleX 0.04 -> 1
+  const markScaleX = interpolate(bloom, [0, 1], [0.04, 1]);
+
+  // mark 左移让位（wordmark 登场时）
+  const shift = interpolate(frame, [WORD_START - 2, WORD_START + 16], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+  const markX = interpolate(shift, [0, 1], [0, -420]);
+
+  const showIcon = frame < FLIP_MID;
+
+  // 拖影帧（翻转期间画 2 个残影）
+  const ghosts = frame >= FLIP_START && frame < FLIP_MID ? [0.12, 0.24] : [];
+
+  return (
+    <AbsoluteFill style={{ background: G.bg, alignItems: 'center', justifyContent: 'center' }}>
+      <div style={{ position: 'relative', width: 1920, height: 400, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        {/* 图标 / mark 容器 */}
+        <div
+          style={{
+            position: 'absolute',
+            left: 960 + markX,
+            top: 200,
+            transform: 'translate(-50%, -50%)',
+          }}
+        >
+          {showIcon ? (
+            <>
+              {ghosts.map((g, i) => {
+                const gs = Math.min(1, iconScaleX + g);
+                return (
+                  <div
+                    key={i}
+                    style={{
+                      position: 'absolute',
+                      left: '50%',
+                      top: '50%',
+                      transform: `translate(-50%, -50%) scaleX(${gs})`,
+                      opacity: 0.22 - i * 0.08,
+                      filter: 'blur(6px)',
+                    }}
+                  >
+                    <SmileLaptop size={340} />
+                  </div>
+                );
+              })}
+              <div
+                style={{
+                  transform: `scale(${inT}) rotate(${wobble}deg) scaleX(${iconScaleX})`,
+                  transformOrigin: 'center 78%',
+                  filter: flipIn > 0.3 ? `blur(${flipIn * 5}px)` : 'none',
+                  opacity: inT,
+                }}
+              >
+                <SmileLaptop size={340} />
+              </div>
+            </>
+          ) : (
+            <div style={{ transform: `scaleX(${markScaleX})` }}>
+              <FlowerMark size={340} bloom={bloom} />
+            </div>
+          )}
+        </div>
+
+        {/* wordmark：逐字符方向模糊扫出 */}
+        <div
+          style={{
+            position: 'absolute',
+            left: 960 + markX + 230,
+            top: 200,
+            transform: 'translateY(-50%)',
+            display: 'flex',
+            fontFamily: FONT,
+            fontWeight: 700,
+            fontSize: 150,
+            color: G.ink,
+            letterSpacing: 2,
+          }}
+        >
+          {WORD.split('').map((ch, i) => {
+            const cT = interpolate(frame, [WORD_START + i * 2.2, WORD_START + i * 2.2 + 10], [0, 1], {
+              extrapolateLeft: 'clamp',
+              extrapolateRight: 'clamp',
+              easing: Easing.out(Easing.cubic),
+            });
+            return (
+              <span
+                key={i}
+                style={{
+                  display: 'inline-block',
+                  opacity: cT,
+                  transform: `translateX(${(1 - cT) * -70}px)`,
+                  filter: `blur(${(1 - cT) * 16}px)`,
+                }}
+              >
+                {ch}
+              </span>
+            );
+          })}
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};