hyper-animator-codex 0.7.1 → 0.8.0

package/skills/hyper-animator-codex/references/shotcraft/source/demos/before-after-slider-scrub/BeforeAfterSliderScrub.tsx

@@ -0,0 +1,99 @@
+// before-after-slider-scrub —— 前后对比拉杆
+// FakeDashboard 两版叠放：before = 低对比灰蒙版（"处理前"），after = 正常清晰版。
+// 竖分割杆带圆手柄：从左端 8% 快甩到 70%（overshoot 至 76% 回弹），
+// 再慢速回扫到 40% 停住。杆经过处 after 揭出（clip-path inset 跟随杆 x）。
+// 先快甩后慢扫速度对比是节奏关键。f=110 后全静止（40f）。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, FakeDashboard } from '../_fixtures/Fixtures';
+
+const CL = { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } as const;
+
+// 时间轴（杆位置以画面宽度百分比表示）
+const T0 = 14; // 前 14f 初始静置，杆停在 8%
+const FLING = 26; // 快甩：14→26（12f 冲到 76%）
+const BOUNCE = 38; // 回弹：26→38 落到 70%
+const HOLD = 56; // 停顿看清
+const SCRUB = 104; // 慢扫：56→104（48f 回到 40%）——速度约为快甩的 1/5
+
+const posAt = (f: number): number => {
+  if (f < FLING)
+    return interpolate(f, [T0, FLING], [8, 76], { easing: Easing.out(Easing.cubic), ...CL });
+  if (f < BOUNCE)
+    return interpolate(f, [FLING, BOUNCE], [76, 70], { easing: Easing.inOut(Easing.cubic), ...CL });
+  if (f < HOLD) return 70;
+  return interpolate(f, [HOLD, SCRUB], [70, 40], { easing: Easing.inOut(Easing.quad), ...CL });
+};
+
+export const BeforeAfterSliderScrub: React.FC = () => {
+  const frame = useCurrentFrame();
+  const p = posAt(frame); // 杆位置 %
+  const x = (p / 100) * 1920;
+
+  // 手柄挤压：速度差分驱动（快甩期手柄微拉伸，静止归 1）
+  const v = Math.abs(posAt(frame) - posAt(frame - 1)); // %/frame
+  const squish = 1 + Math.min(v / 8, 1) * 0.18;
+
+  return (
+    <div style={{ width: 1920, height: 1080, position: 'relative', overflow: 'hidden', background: G.bg }}>
+      {/* before：低对比灰蒙版模拟"处理前" */}
+      <div style={{ position: 'absolute', inset: 0, filter: 'contrast(0.55) brightness(1.06) grayscale(1)' }}>
+        <FakeDashboard variant="A" />
+      </div>
+      <div style={{ position: 'absolute', inset: 0, background: 'rgba(160,160,158,0.35)' }} />
+
+      {/* after：正常清晰版，杆左侧揭出 */}
+      <div style={{ position: 'absolute', inset: 0, clipPath: `inset(0 ${1920 - x}px 0 0)` }}>
+        <FakeDashboard variant="A" />
+      </div>
+
+      {/* 分割杆 + 圆手柄 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: x - 3,
+          top: 0,
+          width: 6,
+          height: 1080,
+          background: '#ffffff',
+          boxShadow: '0 0 14px rgba(0,0,0,0.35)',
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          left: x - 44,
+          top: 540 - 44,
+          width: 88,
+          height: 88,
+          borderRadius: 44,
+          background: '#ffffff',
+          border: `3px solid ${G.border}`,
+          boxShadow: '0 6px 24px rgba(0,0,0,0.3)',
+          transform: `scaleX(${squish})`,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 10,
+          boxSizing: 'border-box',
+        }}
+      >
+        {/* 左右箭头示意（灰阶三角） */}
+        <div style={{ width: 0, height: 0, borderTop: '10px solid transparent', borderBottom: '10px solid transparent', borderRight: `14px solid ${G.mid}` }} />
+        <div style={{ width: 0, height: 0, borderTop: '10px solid transparent', borderBottom: '10px solid transparent', borderLeft: `14px solid ${G.mid}` }} />
+      </div>
+
+      {/* 角标：BEFORE / AFTER 灰块标签 */}
+      <div style={{ position: 'absolute', left: 260, top: 100, padding: '10px 22px', borderRadius: 10, background: 'rgba(47,47,47,0.85)', display: 'flex', gap: 8 }}>
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} style={{ width: 16, height: 20, borderRadius: 4, background: '#e6e6e4' }} />
+        ))}
+      </div>
+      <div style={{ position: 'absolute', right: 60, top: 100, padding: '10px 22px', borderRadius: 10, background: 'rgba(240,240,238,0.9)', border: `2px solid ${G.border}`, display: 'flex', gap: 8 }}>
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} style={{ width: 16, height: 20, borderRadius: 4, background: G.ink }} />
+        ))}
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/bottom-push-stack-wipe/BottomPushStackWipe.tsx

@@ -0,0 +1,79 @@
+// bottom-push-stack-wipe —— slack-promo 22–27s
+// 换章手法：新场景连底色整屏从底边向上推入，把旧场景顶出画外，
+// 连推三章（三种饱和底色，每章中央钉一张灰阶窗口卡随底色走）。
+// 推入用重 ease-out（快进慢停）。
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from 'remotion';
+import { Card, G } from '../_fixtures/Fixtures';
+
+const H = 1080;
+
+// 章节定义：底色 + 卡片种子。第 0 章是起始灰阶场景。
+const CHAPTERS = [
+  { color: G.bg, label: 0 },
+  { color: '#2bac76', label: 1 }, // 绿
+  { color: '#36c5f0', label: 2 }, // 蓝
+  { color: '#e01e5a', label: 3 }, // 粉红
+];
+
+// 每章推入的起始帧；约 32 帧完成一次推入，随后 hold
+const PUSH_STARTS = [18, 55, 92];
+const PUSH_DUR = 30;
+
+const heavyEaseOut = Easing.bezier(0.12, 0.9, 0.2, 1); // 快进慢停
+
+const ChapterScene: React.FC<{ chapter: number }> = ({ chapter }) => {
+  const c = CHAPTERS[chapter];
+  return (
+    <AbsoluteFill style={{ background: c.color, justifyContent: 'center', alignItems: 'center' }}>
+      {/* 底色上的淡装饰条，让"底色也在动"更可读 */}
+      {chapter > 0 && (
+        <>
+          <div style={{ position: 'absolute', top: 90, left: 120, width: 500, height: 26, borderRadius: 13, background: 'rgba(255,255,255,0.28)' }} />
+          <div style={{ position: 'absolute', bottom: 110, right: 140, width: 340, height: 26, borderRadius: 13, background: 'rgba(255,255,255,0.22)' }} />
+          <div style={{ position: 'absolute', top: 160, right: 220, width: 90, height: 90, borderRadius: '50%', background: 'rgba(255,255,255,0.18)' }} />
+        </>
+      )}
+      {/* 中央钉住的灰阶窗口卡 */}
+      <div style={{ boxShadow: '0 30px 80px rgba(0,0,0,0.28)', borderRadius: 18 }}>
+        <div style={{ width: 860, background: '#f2f2f0', borderRadius: '18px 18px 0 0', height: 52, display: 'flex', alignItems: 'center', gap: 10, padding: '0 22px', boxSizing: 'border-box', border: `2px solid ${G.border}`, borderBottom: 'none' }}>
+          {['#e0605a', '#e8b93e', '#67bb5a'].map((dot, i) => (
+            <div key={i} style={{ width: 16, height: 16, borderRadius: 8, background: dot }} />
+          ))}
+          <div style={{ marginLeft: 18, height: 14, width: 220, background: G.bar, borderRadius: 7 }} />
+        </div>
+        <Card w={860} h={430} seed={chapter + 2} style={{ borderRadius: '0 0 18px 18px', padding: 34 }} />
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+export const BottomPushStackWipe: React.FC = () => {
+  const frame = useCurrentFrame();
+  // 每章的推入进度
+  const progress = PUSH_STARTS.map((s) =>
+    interpolate(frame, [s, s + PUSH_DUR], [0, 1], {
+      extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: heavyEaseOut,
+    })
+  );
+  return (
+    <AbsoluteFill style={{ overflow: 'hidden', background: G.bg }}>
+      {CHAPTERS.map((_, i) => {
+        // 第 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;
+        return (
+          <AbsoluteFill key={i} style={{ transform: `translateY(${y}px)` }}>
+            <ChapterScene chapter={i} />
+            {/* 推入时上缘接缝阴影，强化"顶出"的物理感 */}
+            {i > 0 && (
+              <div style={{ position: 'absolute', top: -40, left: 0, right: 0, height: 40, background: 'linear-gradient(to top, rgba(0,0,0,0.30), rgba(0,0,0,0))', opacity: pushedIn < 1 ? 1 : 0 }} />
+            )}
+          </AbsoluteFill>
+        );
+      })}
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/brand-frame-snap/BrandFrameSnap.tsx

@@ -0,0 +1,110 @@
+// brand-frame-snap —— figma-devmode 0:28–0:32 (brand-frame-snap) + 0:43–0:47 (frame-color-flip)
+// 一圈粗品牌色画框先于内容出现包住全屏 → 灰阶"录屏窗口"在框内落位 →
+// 停一拍 → 画框整圈蓝→绿同帧硬翻色，窗口内容同帧换布局。
+// 一个 borderColor 完成章节导航/状态提示/品牌露出。
+import React from 'react';
+import { useCurrentFrame, spring, interpolate } from 'remotion';
+import { G, FakeDashboard } from '../_fixtures/Fixtures';
+
+const FPS = 30;
+const FIGMA_BLUE = '#3E7BFA';
+const DEV_GREEN = '#1BC47D';
+const FLIP_FRAME = 78; // 同帧硬翻色时刻
+
+const clamp01 = (t: number) => Math.min(1, Math.max(0, t));
+const easeOut = (t: number) => 1 - Math.pow(1 - t, 3);
+
+export const BrandFrameSnap: React.FC = () => {
+  const f = useCurrentFrame();
+  const mode: 'design' | 'dev' = f < FLIP_FRAME ? 'design' : 'dev';
+  const frameColor = mode === 'design' ? FIGMA_BLUE : DEV_GREEN;
+
+  // 1) 画框先登场：厚度从 0 长到 44px（ease-out，前 18 帧）
+  const frameGrow = easeOut(clamp01(f / 18));
+  const frameW = 44 * frameGrow;
+
+  // 2) 窗口在框内落位：从下方 + 略缩，弹簧弹入（帧 14 起）
+  const drop = spring({ frame: f - 14, fps: FPS, config: { damping: 16, stiffness: 110, mass: 1 } });
+  const winY = interpolate(drop, [0, 1], [560, 0]);
+  const winS = interpolate(drop, [0, 1], [0.82, 1]);
+  const winO = interpolate(drop, [0, 0.25], [0, 1], { extrapolateRight: 'clamp' });
+
+  // 3) 翻色瞬间给 2 帧白闪脉冲 + 画框轻微厚度弹跳，强化"换挡"
+  const sinceFlip = f - FLIP_FRAME;
+  const flash = sinceFlip >= 0 && sinceFlip < 3 ? 0.55 - sinceFlip * 0.18 : 0;
+  const snapPulse = sinceFlip >= 0 ? Math.exp(-sinceFlip * 0.22) * Math.cos(sinceFlip * 0.9) * 10 : 0;
+
+  // 模式标签
+  const label = mode === 'design' ? 'DESIGN' : 'DEV MODE';
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: '#161618', position: 'relative', overflow: 'hidden' }}>
+      {/* 框内内容区 */}
+      <div style={{
+        position: 'absolute', inset: frameW + snapPulse, background: G.bg,
+        overflow: 'hidden', borderRadius: 8,
+      }}>
+        {/* 录屏窗口（带标题栏的窗口卡）落位 */}
+        <div style={{
+          position: 'absolute', left: '50%', top: '50%',
+          width: 1560, height: 830,
+          transform: `translate(-50%, -50%) translateY(${winY}px) scale(${winS})`,
+          opacity: winO,
+          borderRadius: 16, overflow: 'hidden',
+          boxShadow: '0 24px 70px rgba(0,0,0,0.28)',
+          border: `2px solid ${G.border}`, background: G.panel,
+        }}>
+          {/* 窗口标题栏 */}
+          <div style={{
+            height: 52, background: '#e9e9e7', borderBottom: `2px solid ${G.line}`,
+            display: 'flex', alignItems: 'center', gap: 10, padding: '0 22px', boxSizing: 'border-box',
+          }}>
+            {[0, 1, 2].map((i) => (
+              <div key={i} style={{ width: 16, height: 16, borderRadius: 8, background: G.bar }} />
+            ))}
+            <div style={{ marginLeft: 18, height: 12, width: 260, background: G.line, borderRadius: 6 }} />
+            {/* 模式徽标：随画框同帧换色换字 */}
+            <div style={{
+              marginLeft: 'auto', background: frameColor, color: '#fff',
+              fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 800, fontSize: 15,
+              letterSpacing: 1.5, padding: '6px 16px', borderRadius: 8,
+              opacity: winO,
+            }}>
+              {label}
+            </div>
+          </div>
+          {/* 窗口内容：翻色同帧换布局 A→B */}
+          <div style={{ transform: 'scale(0.81)', transformOrigin: '0 0', width: 1920, height: 1080 }}>
+            <FakeDashboard variant={mode === 'design' ? 'A' : 'B'} />
+          </div>
+        </div>
+      </div>
+
+      {/* 品牌色画框：用 4 条实体边而非 border，翻色是纯 background 同帧硬切 */}
+      {([
+        { left: 0, top: 0, right: 0, height: frameW + snapPulse },
+        { left: 0, bottom: 0, right: 0, height: frameW + snapPulse },
+        { left: 0, top: 0, bottom: 0, width: frameW + snapPulse },
+        { right: 0, top: 0, bottom: 0, width: frameW + snapPulse },
+      ] as React.CSSProperties[]).map((pos, i) => (
+        <div key={i} style={{ position: 'absolute', background: frameColor, ...pos }} />
+      ))}
+
+      {/* 画框上的模式角标（左上，嵌在框带里） */}
+      <div style={{
+        position: 'absolute', left: 70, top: 0, height: frameW + snapPulse,
+        display: 'flex', alignItems: 'center',
+        fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 800,
+        fontSize: 22, letterSpacing: 3, color: '#ffffff',
+        opacity: frameGrow,
+      }}>
+        {label}
+      </div>
+
+      {/* 翻色白闪脉冲 */}
+      {flash > 0 && (
+        <div style={{ position: 'absolute', inset: 0, background: '#ffffff', opacity: flash }} />
+      )}
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/bubble-swarm-takeover/BubbleSwarmTakeover.tsx

@@ -0,0 +1,189 @@
+// bubble-swarm-takeover —— loom-ai 9–12s
+// 无剪切转场：珠光气泡群从画外飘入、越来越大遮满整屏，页面同时被"洗白"，
+// 遮蔽峰值处藏场景切换，气泡散开后已是新场景。混入 i18n 文字胶囊变体元素。
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from 'remotion';
+import { FakeDashboard } from '../_fixtures/Fixtures';
+
+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 PEAK = 75; // 遮蔽峰值帧（藏切点）
+const W = 1920;
+const H = 1080;
+const CX = W / 2;
+const CY = H / 2;
+
+// 珠光色相微差（粉/紫/蓝/青）
+const TINTS = [
+  ['rgba(226,208,255,0.55)', 'rgba(255,200,235,0.45)'],
+  ['rgba(190,225,255,0.55)', 'rgba(215,200,255,0.45)'],
+  ['rgba(255,215,235,0.5)', 'rgba(200,235,255,0.45)'],
+  ['rgba(205,240,250,0.5)', 'rgba(235,210,255,0.45)'],
+];
+
+type BubbleSpec = {
+  startX: number; startY: number; targetX: number; targetY: number;
+  r: number; t0: number; blur: number; tint: number;
+  wobblePhase: number; wobbleAmp: number; z: number;
+};
+
+const makeBubbles = (): BubbleSpec[] => {
+  const specs: BubbleSpec[] = [];
+  // 34 颗常规气泡（三层景深）
+  for (let i = 0; i < 34; i++) {
+    const rng = mulberry32(1000 + i * 97);
+    const edge = Math.floor(rng() * 4);
+    const along = rng();
+    let startX = 0, startY = 0;
+    if (edge === 0) { startX = along * W; startY = -320; }
+    if (edge === 1) { startX = W + 320; startY = along * H; }
+    if (edge === 2) { startX = along * W; startY = H + 320; }
+    if (edge === 3) { startX = -320; startY = along * H; }
+    const layer = i % 3; // 0 远 1 中 2 近
+    const r = layer === 0 ? 45 + rng() * 55 : layer === 1 ? 100 + rng() * 90 : 210 + rng() * 150;
+    specs.push({
+      startX, startY,
+      targetX: 140 + rng() * (W - 280),
+      targetY: 100 + rng() * (H - 200),
+      r,
+      t0: 8 + rng() * 42,
+      blur: layer === 0 ? 7 : layer === 1 ? 0.5 : 9,
+      tint: Math.floor(rng() * TINTS.length),
+      wobblePhase: rng() * Math.PI * 2,
+      wobbleAmp: 10 + rng() * 22,
+      z: layer,
+    });
+  }
+  // 6 颗巨型气泡，峰值时铺满屏（网格落点保证覆盖）
+  const grid = [
+    [340, 300], [960, 240], [1580, 330],
+    [320, 800], [980, 860], [1600, 780],
+  ];
+  grid.forEach(([gx, gy], i) => {
+    const rng = mulberry32(7000 + i * 131);
+    const edge = i % 4;
+    let startX = 0, startY = 0;
+    if (edge === 0) { startX = gx; startY = -600; }
+    if (edge === 1) { startX = W + 600; startY = gy; }
+    if (edge === 2) { startX = gx; startY = H + 600; }
+    if (edge === 3) { startX = -600; startY = gy; }
+    specs.push({
+      startX, startY, targetX: gx, targetY: gy,
+      r: 430 + rng() * 140,
+      t0: 22 + rng() * 14,
+      blur: 3, tint: i % TINTS.length,
+      wobblePhase: rng() * Math.PI * 2, wobbleAmp: 8,
+      z: 2,
+    });
+  });
+  return specs;
+};
+
+const BUBBLES = makeBubbles();
+
+const CAPSULES = [
+  { text: 'Hallo!', idx: 5 },
+  { text: '¡Hola!', idx: 14 },
+  { text: 'Ciao!', idx: 23 },
+];
+
+const Bubble: React.FC<{ spec: BubbleSpec; frame: number }> = ({ spec, frame }) => {
+  const pIn = interpolate(frame, [spec.t0, PEAK], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+  // 峰值后向外散开（加速离场）
+  const disperse = interpolate(frame, [PEAK + 2, 118], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.in(Easing.quad),
+  });
+  const wob = Math.sin(frame * 0.09 + spec.wobblePhase) * spec.wobbleAmp * pIn;
+  let x = spec.startX + (spec.targetX - spec.startX) * pIn + wob;
+  let y = spec.startY + (spec.targetY - spec.startY) * pIn + wob * 0.6;
+  const dx = spec.targetX - CX, dy = spec.targetY - CY;
+  const dl = Math.max(Math.hypot(dx, dy), 60);
+  x += (dx / dl) * disperse * 1700;
+  y += (dy / dl) * disperse * 1700;
+  const scale = interpolate(frame, [spec.t0, PEAK], [0.22, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.quad),
+  }) * (1 - disperse * 0.35);
+  const opacity =
+    interpolate(frame, [spec.t0, spec.t0 + 7], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }) *
+    interpolate(disperse, [0.55, 1], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+  if (opacity <= 0.01) return null;
+  const [c1, c2] = TINTS[spec.tint];
+  const d = spec.r * 2 * scale;
+  return (
+    <div style={{
+      position: 'absolute', left: x - spec.r * scale, top: y - spec.r * scale,
+      width: d, height: d, borderRadius: '50%', opacity,
+      filter: `blur(${spec.blur}px)`,
+      background: `radial-gradient(circle at 34% 28%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.45) 22%, ${c1} 52%, ${c2} 76%, rgba(255,255,255,0.65) 96%)`,
+      boxShadow: 'inset 0 0 40px rgba(255,255,255,0.55), 0 0 30px rgba(255,255,255,0.25)',
+    }} />
+  );
+};
+
+export const BubbleSwarmTakeover: React.FC = () => {
+  const frame = useCurrentFrame();
+  // 页面"洗白"：靠近峰值时整体亮度提升
+  const whiteout = interpolate(frame, [42, 68, 82, 104], [0, 0.92, 0.92, 0], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.inOut(Easing.quad),
+  });
+  const breathe = 1 + 0.02 * Math.sin(frame * 0.045);
+  return (
+    <AbsoluteFill style={{ background: '#ececea', overflow: 'hidden' }}>
+      <AbsoluteFill style={{ transform: `scale(${breathe})` }}>
+        {frame < PEAK ? <FakeDashboard variant="A" /> : <FakeDashboard variant="B" />}
+      </AbsoluteFill>
+      {/* 洗白层压在页面之上、气泡之下 */}
+      <AbsoluteFill style={{ background: '#ffffff', opacity: whiteout }} />
+      {/* 远/中层气泡 */}
+      {BUBBLES.filter((b) => b.z < 2).map((b, i) => (
+        <Bubble key={i} spec={b} frame={frame} />
+      ))}
+      {/* i18n 文字胶囊混在中层气泡里漂 */}
+      {CAPSULES.map((c, i) => {
+        const host = BUBBLES[c.idx];
+        const pIn = interpolate(frame, [host.t0 + 4, PEAK], [0, 1], {
+          extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.cubic),
+        });
+        const disperse = interpolate(frame, [PEAK + 2, 116], [0, 1], {
+          extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.in(Easing.quad),
+        });
+        const wob = Math.sin(frame * 0.08 + host.wobblePhase + 1.3) * 18;
+        let x = host.startX + (host.targetX - host.startX) * pIn + 60 + wob;
+        let y = host.startY + (host.targetY - host.startY) * pIn - host.r * 0.9;
+        const dx = host.targetX - CX, dy = host.targetY - CY;
+        const dl = Math.max(Math.hypot(dx, dy), 60);
+        x += (dx / dl) * disperse * 1700;
+        y += (dy / dl) * disperse * 1700;
+        const op = pIn * interpolate(disperse, [0.5, 1], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+        const sc = 0.5 + 0.5 * pIn;
+        return (
+          <div key={i} style={{
+            position: 'absolute', left: x, top: y, opacity: op,
+            transform: `scale(${sc}) rotate(${wob * 0.25}deg)`,
+            padding: '18px 40px', borderRadius: 60,
+            background: 'linear-gradient(135deg, rgba(255,255,255,0.95), rgba(235,220,255,0.9))',
+            border: '2px solid rgba(255,255,255,0.9)',
+            boxShadow: '0 8px 32px rgba(150,120,220,0.25)',
+            fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 800,
+            fontSize: 46, color: '#5b4a86', whiteSpace: 'nowrap',
+          }}>{c.text}</div>
+        );
+      })}
+      {/* 前景大气泡（焦外） */}
+      {BUBBLES.filter((b) => b.z === 2).map((b, i) => (
+        <Bubble key={i} spec={b} frame={frame} />
+      ))}
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/canvas-materialize-moves/DiagramCascadeBuild.tsx

@@ -0,0 +1,172 @@
+// diagram-cascade-build —— miro-promo 104–116s
+// prompt 行打字 → 图表节点自上而下逐层级联弹出（根→2 子→4 孙），
+// 连线跟随节点生长（SVG path 描线），成树后整体呼吸一拍。
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, interpolate, spring, useVideoConfig, Easing } from 'remotion';
+import { G } from '../_fixtures/Fixtures';
+
+const PROMPT = 'Generate an entity-relationship diagram';
+const TYPE_START = 6;
+const TYPE_CPS = 1.1; // 字符/帧
+
+// 树布局（画布坐标，节点中心）
+const NODE_W = 300;
+const NODE_H = 110;
+const NODES = [
+  // level 0
+  { id: 0, x: 960, y: 330, level: 0, parent: -1 },
+  // level 1
+  { id: 1, x: 620, y: 570, level: 1, parent: 0 },
+  { id: 2, x: 1300, y: 570, level: 1, parent: 0 },
+  // level 2
+  { id: 3, x: 400, y: 820, level: 2, parent: 1 },
+  { id: 4, x: 810, y: 820, level: 2, parent: 1 },
+  { id: 5, x: 1110, y: 820, level: 2, parent: 2 },
+  { id: 6, x: 1520, y: 820, level: 2, parent: 2 },
+];
+
+const CASCADE_START = 52; // 根节点弹出时刻
+const LEVEL_GAP = 20; // 层间隔
+const SIBLING_STAGGER = 6;
+
+const nodeStart = (n: (typeof NODES)[number]) => {
+  if (n.level === 0) return CASCADE_START;
+  const siblingIdx = NODES.filter((m) => m.level === n.level && m.id < n.id).length;
+  return CASCADE_START + n.level * LEVEL_GAP + siblingIdx * SIBLING_STAGGER;
+};
+
+// 折角连线 path：父底边中点 → 垂直下探 → 水平 → 垂直进子顶边
+const edgePath = (p: (typeof NODES)[number], c: (typeof NODES)[number]) => {
+  const x1 = p.x;
+  const y1 = p.y + NODE_H / 2;
+  const x2 = c.x;
+  const y2 = c.y - NODE_H / 2;
+  const my = (y1 + y2) / 2;
+  return `M ${x1} ${y1} L ${x1} ${my} L ${x2} ${my} L ${x2} ${y2}`;
+};
+
+const edgeLen = (p: (typeof NODES)[number], c: (typeof NODES)[number]) => {
+  const y1 = p.y + NODE_H / 2;
+  const y2 = c.y - NODE_H / 2;
+  return Math.abs(y2 - y1) + Math.abs(c.x - p.x);
+};
+
+export const DiagramCascadeBuild: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const typed = Math.min(PROMPT.length, Math.max(0, Math.floor((frame - TYPE_START) * TYPE_CPS)));
+  const caretOn = Math.floor(frame / 8) % 2 === 0;
+  const promptDone = typed >= PROMPT.length;
+
+  // 成树后整体呼吸一拍
+  const lastStart = nodeStart(NODES[NODES.length - 1]);
+  const breathe = interpolate(frame, [lastStart + 22, lastStart + 34, lastStart + 50], [1, 1.035, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.inOut(Easing.sin),
+  });
+
+  return (
+    <AbsoluteFill style={{ background: G.bg, overflow: 'hidden' }}>
+      <AbsoluteFill
+        style={{
+          backgroundImage: `radial-gradient(${G.line} 3px, transparent 3px)`,
+          backgroundSize: '52px 52px',
+        }}
+      />
+
+      {/* prompt 条 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 460,
+          top: 88,
+          width: 1000,
+          height: 84,
+          background: G.card,
+          border: `3px solid ${promptDone ? G.ink : G.border}`,
+          borderRadius: 42,
+          display: 'flex',
+          alignItems: 'center',
+          padding: '0 36px',
+          boxSizing: 'border-box',
+          boxShadow: '0 6px 24px rgba(0,0,0,0.08)',
+          fontFamily: 'Helvetica, Arial, sans-serif',
+          fontSize: 30,
+          fontWeight: 600,
+          color: G.ink,
+        }}
+      >
+        <div style={{ width: 30, height: 30, borderRadius: 15, background: G.mid, marginRight: 20, flexShrink: 0 }} />
+        <span>
+          {PROMPT.slice(0, typed)}
+          <span style={{ opacity: caretOn ? 1 : 0, fontWeight: 400 }}>|</span>
+        </span>
+      </div>
+
+      {/* 树（呼吸缩放以树心为原点） */}
+      <div style={{ position: 'absolute', inset: 0, transform: `scale(${breathe})`, transformOrigin: '960px 620px' }}>
+        {/* 连线层 */}
+        <svg width={1920} height={1080} style={{ position: 'absolute', inset: 0 }}>
+          {NODES.filter((n) => n.parent >= 0).map((n) => {
+            const p = NODES[n.parent];
+            const start = nodeStart(n) - 8; // 线比子节点先长
+            const len = edgeLen(p, n);
+            const grow = interpolate(frame, [start, start + 16], [0, 1], {
+              extrapolateLeft: 'clamp',
+              extrapolateRight: 'clamp',
+              easing: Easing.out(Easing.cubic),
+            });
+            if (grow <= 0) return null;
+            return (
+              <path
+                key={n.id}
+                d={edgePath(p, n)}
+                stroke={G.mid}
+                strokeWidth={5}
+                fill="none"
+                strokeLinejoin="round"
+                strokeDasharray={len}
+                strokeDashoffset={len * (1 - grow)}
+              />
+            );
+          })}
+        </svg>
+
+        {/* 节点层 */}
+        {NODES.map((n) => {
+          const start = nodeStart(n);
+          const pop = spring({ frame: frame - start, fps, config: { damping: 11, stiffness: 170 } });
+          if (frame < start) return null;
+          return (
+            <div
+              key={n.id}
+              style={{
+                position: 'absolute',
+                left: n.x - NODE_W / 2,
+                top: n.y - NODE_H / 2,
+                width: NODE_W,
+                height: NODE_H,
+                background: n.level === 0 ? G.side : G.card,
+                border: `3px solid ${n.level === 0 ? G.side : G.border}`,
+                borderRadius: 16,
+                boxSizing: 'border-box',
+                boxShadow: '0 6px 20px rgba(0,0,0,0.10)',
+                transform: `scale(${pop})`,
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                gap: 10,
+                padding: '0 24px',
+              }}
+            >
+              <div style={{ height: 16, width: `${44 + (n.id * 17) % 34}%`, background: n.level === 0 ? '#9a9a98' : G.bar, borderRadius: 8 }} />
+              <div style={{ height: 10, width: `${70 - (n.id * 13) % 26}%`, background: n.level === 0 ? G.sideBar : G.line, borderRadius: 5 }} />
+            </div>
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};