hyper-animator-codex 0.7.0 → 0.8.0

package/skills/hyper-animator-codex/references/shotcraft/source/demos/transition-hidden-cut/LightLeakBurn.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
+import { FakeDashboard, TitleBlock, G } from '../_fixtures/Fixtures';
+
+// light-leak-burn〔转场〕：一团琥珀橙柔光从右上角斜扫入画，亮度顶峰时
+// 吞掉旧画面约七成（高光溢出、对比度被冲淡），光峰帧后切新页藏切点，
+// 光退散时新页已在光下就位——比白闪柔、有方向、有温度。
+// 节拍：0–25 建立旧页 hold；25–52 光斜扫入、爬向峰值；52 峰值帧切页；
+// 52–95 光沿对角线退出、强度衰减；95–130 新页静止 hold。
+
+const PEAK = 52; // 光峰帧 = 藏切点
+
+export const LightLeakBurn: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 光团沿对角线的位移进度：右上外 → 左下外，贯穿 25–95
+  const sweep = interpolate(frame, [25, 95], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.4, 0, 0.3, 1),
+  });
+
+  // 光强包络：25–PEAK 爬升（ease-in 有蓄力感），PEAK–95 收敛（ease-out 余温）
+  const rise = interpolate(frame, [25, PEAK], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.in(Easing.quad),
+  });
+  const fall = interpolate(frame, [PEAK, 95], [1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+  const intensity = frame <= PEAK ? rise : fall;
+
+  // 光团中心：从画面右上外侧斜扫到左下外侧（有方向的漏光）
+  const cx = interpolate(sweep, [0, 1], [2350, -650]);
+  const cy = interpolate(sweep, [0, 1], [-500, 1500]);
+
+  // 三团琥珀光的偏移与直径（seed 正弦哈希做微差，避免完美同心）
+  const blobs = [0, 1, 2].map((i) => {
+    const j1 = (Math.sin(i * 127.3) * 43758) % 1; // -1..1 小数
+    const j2 = (Math.sin(i * 311.7) * 27183) % 1;
+    return {
+      dx: i * 260 - 260 + j1 * 90, // 沿扫掠方向拖尾排布
+      dy: i * 200 - 200 + j2 * 70,
+      d: 1500 + i * 450, // 直径 1500 / 1950 / 2400
+      color: ['#f6c878', '#e8a44a', '#d98a2b'][i],
+      alpha: [0.95, 0.8, 0.55][i],
+    };
+  });
+
+  // 峰值时页面被光冲淡：对比度降、亮度抬（旧页被"烧穿"的感觉）
+  const pageFilter = `contrast(${1 - intensity * 0.45}) brightness(${1 + intensity * 0.35})`;
+
+  // 全屏暖色罩：峰值时约 8%
+  const warmWash = intensity * 0.08;
+
+  return (
+    <AbsoluteFill style={{ background: G.bg, overflow: 'hidden' }}>
+      {/* 页面层：光峰帧前是旧页（网格），之后是新页（列表+标题）——切点藏在最亮处 */}
+      <AbsoluteFill style={{ filter: pageFilter }}>
+        {frame <= PEAK ? (
+          <FakeDashboard variant="A" />
+        ) : (
+          <>
+            <FakeDashboard variant="B" />
+            <div style={{ position: 'absolute', left: 288, top: 132 }}>
+              <TitleBlock text="Next Page" size={64} />
+            </div>
+          </>
+        )}
+      </AbsoluteFill>
+
+      {/* 全屏暖色罩：峰值 8%，让高光溢出带温度 */}
+      <AbsoluteFill
+        style={{
+          background: '#e8a44a',
+          opacity: warmWash,
+          mixBlendMode: 'screen',
+          pointerEvents: 'none',
+        }}
+      />
+
+      {/* 琥珀漏光层：3 团大直径径向渐变，blur 90px，screen 叠加，沿对角线扫过 */}
+      <AbsoluteFill style={{ pointerEvents: 'none' }}>
+        {blobs.map((b, i) => (
+          <div
+            key={i}
+            style={{
+              position: 'absolute',
+              left: cx + b.dx - b.d / 2,
+              top: cy + b.dy - b.d / 2,
+              width: b.d,
+              height: b.d,
+              borderRadius: '50%',
+              background: `radial-gradient(circle, ${b.color} 0%, ${b.color}cc 30%, transparent 68%)`,
+              filter: 'blur(90px)',
+              mixBlendMode: 'screen',
+              opacity: b.alpha * intensity,
+            }}
+          />
+        ))}
+        {/* 峰值核心过曝：光心一小团接近白的热核，峰值帧吞掉约七成画面 */}
+        <div
+          style={{
+            position: 'absolute',
+            left: cx - 550,
+            top: cy - 550,
+            width: 1100,
+            height: 1100,
+            borderRadius: '50%',
+            background: 'radial-gradient(circle, #fff3dd 0%, #f6c878aa 45%, transparent 70%)',
+            filter: 'blur(80px)',
+            mixBlendMode: 'screen',
+            opacity: intensity * intensity, // 只在临近峰值时才烧起来
+          }}
+        />
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/transition-hidden-cut/VersusSlam.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
+import { FakeDashboard, TitleBlock, G } from '../_fixtures/Fixtures';
+
+// versus-slam 对撞开屏：左右两个半屏画面（带 78° 斜切边）从画外加速对冲，
+// 沿斜缝砰地撞合；撞击帧白闪 + 整机震屏指数衰减 + "VS" 字块盖章压出，结尾静止 hold。
+const IMPACT = 30; // 撞击帧（前 20f 建立 hold + 10f ease-in 对冲）
+
+// 斜缝几何：78° 斜边 → 1080 高度上水平偏移 1080/tan(78°) ≈ 230px，中线 x=960 ±115
+const SEAM_TOP_X = 1075; // 缝顶端 x
+const SEAM_BOT_X = 845; // 缝底端 x
+// CSS 旋转顺时针为正：缝顶端偏右（1075 > 845）→ 正角度 ≈ +12°
+const SEAM_DEG = (Math.atan2(SEAM_TOP_X - SEAM_BOT_X, 1080) * 180) / Math.PI;
+
+export const VersusSlam: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 两半屏对冲：ease-in 加速，10f 从 ±1200px 冲到位
+  const leftX = interpolate(frame, [20, IMPACT], [-1200, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.in(Easing.cubic),
+  });
+  const rightX = -leftX;
+
+  // 撞击帧起：整机震屏 12px 指数衰减（约 5f 收干）
+  const since = frame - IMPACT;
+  const env = since >= 0 ? 12 * Math.exp(-since / 1.6) : 0;
+  const shakeX = env * Math.sin(since * 3.4);
+  const shakeY = env * 0.6 * Math.sin(since * 4.1 + 0.7);
+
+  // 白闪：撞击帧 0.9 → 0，3f 收掉
+  const flash = interpolate(frame, [IMPACT, IMPACT + 3], [0.9, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // "VS" 盖章：scale 1.6 → 1 带 back overshoot，6f 压出
+  const vsScale = interpolate(frame, [IMPACT, IMPACT + 6], [1.6, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.back(2.6)),
+  });
+  const vsOpacity = interpolate(frame, [IMPACT, IMPACT + 2], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  const impacted = frame >= IMPACT;
+
+  return (
+    <AbsoluteFill style={{ background: G.bg, overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', inset: 0, transform: `translate(${shakeX}px, ${shakeY}px)` }}>
+        {/* 建立段的斜缝虚线预示（撞合后被实缝替代） */}
+        {!impacted && (
+          <svg width={1920} height={1080} style={{ position: 'absolute', inset: 0 }}>
+            <line
+              x1={SEAM_TOP_X} y1={0} x2={SEAM_BOT_X} y2={1080}
+              stroke={G.bar} strokeWidth={4} strokeDasharray="18 16"
+            />
+          </svg>
+        )}
+        {/* 左半屏：FakeDashboard A 裁左半，斜边 78° */}
+        <div style={{
+          position: 'absolute', inset: 0,
+          transform: `translateX(${leftX}px)`,
+          clipPath: `polygon(0px 0px, ${SEAM_TOP_X}px 0px, ${SEAM_BOT_X}px 1080px, 0px 1080px)`,
+        }}>
+          <FakeDashboard variant="A" />
+        </div>
+        {/* 右半屏：FakeDashboard B 裁右半 */}
+        <div style={{
+          position: 'absolute', inset: 0,
+          transform: `translateX(${rightX}px)`,
+          clipPath: `polygon(${SEAM_TOP_X}px 0px, 1920px 0px, 1920px 1080px, ${SEAM_BOT_X}px 1080px)`,
+        }}>
+          <FakeDashboard variant="B" />
+        </div>
+        {/* 撞合后的实体斜缝条 */}
+        {impacted && (
+          <div style={{
+            position: 'absolute', left: 960 - 6, top: 540 - 700,
+            width: 12, height: 1400, background: G.ink,
+            transform: `rotate(${SEAM_DEG}deg)`,
+          }} />
+        )}
+        {/* "VS" 字块盖章：贴缝、随缝倾斜 */}
+        {impacted && (
+          <div style={{
+            position: 'absolute', left: 960, top: 540,
+            transform: `translate(-50%, -50%) rotate(${SEAM_DEG}deg) scale(${vsScale})`,
+            opacity: vsOpacity,
+            background: G.card, border: `6px solid ${G.ink}`, borderRadius: 20,
+            padding: '18px 46px', boxShadow: '0 18px 60px rgba(0,0,0,0.35)',
+          }}>
+            <TitleBlock text="VS" size={140} />
+          </div>
+        )}
+      </div>
+      {/* 撞击白闪（不随震屏位移） */}
+      <AbsoluteFill style={{ background: '#ffffff', opacity: flash, pointerEvents: 'none' }} />
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/transition-travel/LetterformZoom.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
+import { FakeDashboard, G } from '../_fixtures/Fixtures';
+
+// letterform-zoom〔转场〕：巨型标题 "DASH" 字腔透出新页面，镜头急速推进
+// 字母 A 的三角字腔，洞被撑满全屏的瞬间新页面接管，残余笔画滑出画外。
+// 结构：底层 FakeDashboard B 静置全屏（微 dolly）；上层"米灰盖板"用
+// SVG <mask>（白底 + 黑字）在字形处挖洞——洞里即透出 B；对盖板整组做
+// transform-origin 对准 A 字腔中心的指数 scale 1→28（60f，前 20f 慢
+// 后 40f 陡）。scale 过临界值后盖板快速退场 = 撤掉 mask，B 全屏接管。
+
+const FS = 560; // 标题字号
+// A 字腔（三角洞）中心：Helvetica Bold 度量估算——
+// "DASH" 总宽 ≈ 2.833em，居中起点 x≈167，A 占 571–975 → 腔心 x≈773；
+// 基线 y=741（大写居中），腔心约在基线上方 0.42em → y≈508。
+const ORIGIN = { x: 773, y: 508 };
+const BASELINE = 741;
+const ZOOM_MAX = 28;
+
+const titleFont: React.CSSProperties = {
+  fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
+  fontWeight: 900,
+  fontSize: FS,
+};
+
+export const LetterformZoom: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 0–25f 建立 hold；25–85f 推进。慢起 bezier 叠指数尺度 = 前段慢、后段陡
+  const t = interpolate(frame, [25, 85], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.6, 0, 0.85, 0.5),
+  });
+  const scale = Math.pow(ZOOM_MAX, t); // 指数推进：等比的"穿越"速度感
+
+  // scale 过临界值（洞已撑满画面中部）→ 盖板残余笔画边外飞边撤场（撤 mask）
+  const plateOpacity = interpolate(scale, [15, 24], [1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // 速度模糊：期望视觉模糊量随推进升高；CSS filter 会被 transform 放大，
+  // 故除以 scale 补偿
+  const visBlur = interpolate(t, [0, 0.45, 1], [0, 1.5, 16], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const blurCss = visBlur / scale;
+
+  // 新页面微 dolly：推进期跟着轻推 1→1.1，接管后 25f 内落定回 1（收势）
+  const bScale =
+    frame < 85
+      ? interpolate(t, [0, 1], [1, 1.1])
+      : interpolate(frame, [85, 110], [1.1, 1], {
+          extrapolateLeft: 'clamp',
+          extrapolateRight: 'clamp',
+          easing: Easing.out(Easing.cubic),
+        });
+
+  return (
+    <AbsoluteFill style={{ background: G.bg, overflow: 'hidden' }}>
+      {/* 新页面：先只在字腔里透出，接管后全屏（110–140f 静止收尾） */}
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          transform: `scale(${bScale})`,
+          transformOrigin: `${ORIGIN.x}px ${ORIGIN.y}px`,
+        }}
+      >
+        <FakeDashboard variant="B" />
+      </div>
+
+      {/* 米灰盖板（字形挖洞）+ 字缘描边 + 副标灰条：整组指数推进后飞出画外 */}
+      {plateOpacity > 0 && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            transform: `scale(${scale})`,
+            transformOrigin: `${ORIGIN.x}px ${ORIGIN.y}px`,
+            opacity: plateOpacity,
+            filter: blurCss > 0.02 ? `blur(${blurCss}px)` : undefined,
+          }}
+        >
+          <svg
+            width={1920}
+            height={1080}
+            viewBox="0 0 1920 1080"
+            style={{ position: 'absolute', inset: 0, display: 'block' }}
+          >
+            <defs>
+              <mask id="lfz-cut">
+                <rect width={1920} height={1080} fill="#fff" />
+                <text
+                  x={960}
+                  y={BASELINE}
+                  textAnchor="middle"
+                  fill="#000"
+                  style={titleFont}
+                >
+                  DASH
+                </text>
+              </mask>
+            </defs>
+            <rect width={1920} height={1080} fill={G.bg} mask="url(#lfz-cut)" />
+            {/* 字缘细描边：让"洞"的轮廓在米灰上读得清 */}
+            <text
+              x={960}
+              y={BASELINE}
+              textAnchor="middle"
+              fill="none"
+              stroke={G.ink}
+              strokeWidth={3}
+              opacity={0.3}
+              style={titleFont}
+            >
+              DASH
+            </text>
+          </svg>
+          {/* 副标灰条：随盖板一起被甩出画外，强化"页面元素残余"感 */}
+          <div
+            style={{
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              top: 812,
+              display: 'flex',
+              justifyContent: 'center',
+              gap: 16,
+            }}
+          >
+            <div style={{ width: 240, height: 16, background: G.bar, borderRadius: 8 }} />
+            <div style={{ width: 130, height: 16, background: G.line, borderRadius: 8 }} />
+          </div>
+        </div>
+      )}
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/transition-travel/SharedElementMorph.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
+import { FakeDashboard, Card, G } from '../_fixtures/Fixtures';
+
+// shared-element-morph〔转场〕：全屏特写面板收缩、位移、长出圆角，
+// 严丝合缝飞落进 dashboard 网格里它所属的卡片槽位，落座带 3% 过冲。
+// 观众感觉是同一个物体被镜头送回原位（FLIP 共享元素转场）。
+//
+// 目标槽位 = FakeDashboard A 中列第二行那格（seed 5），按 fixtures 布局精确推算：
+//   侧栏 220 + 网格 padding 36 → 列宽 (1920-220-72-56)/3 = 524
+//   头部 72 + padding 36     → 行高 (1008-72-28)/2   = 454
+//   中列 x = 220+36+524+28 = 808；第二行 y = 72+36+454+28 = 590
+const SLOT = { x: 808, y: 590, w: 524, h: 454, r: 14, seed: 5 };
+const FULL = { x: 0, y: 0, w: 1920, h: 1080, r: 0 };
+
+// 节拍：0–35 全屏特写 hold ｜ 35–60 morph 25f（bezier 0.4,0,0.2,1 → 1.03）
+//       60–70 过冲回弹落座 ｜ 70–130 静止收尾
+const MORPH_START = 35;
+const MORPH_END = 60;
+const SETTLE_END = 70;
+
+const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+
+export const SharedElementMorph: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 位置/尺寸/圆角共用同一条进度曲线：25f 冲到 1.03，再 10f 弹回 1
+  const drive = interpolate(frame, [MORPH_START, MORPH_END], [0, 1.03], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.4, 0, 0.2, 1),
+  });
+  const settle = interpolate(frame, [MORPH_END, SETTLE_END], [1.03, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+  const p = frame <= MORPH_END ? drive : settle;
+
+  const x = lerp(FULL.x, SLOT.x, p);
+  const y = lerp(FULL.y, SLOT.y, p);
+  const w = lerp(FULL.w, SLOT.w, p);
+  const h = lerp(FULL.h, SLOT.h, p);
+  const r = lerp(FULL.r, SLOT.r, p);
+
+  // 内容是同一张卡：按目标尺寸渲染，等比放大铺满全屏（全屏 = 这张卡的特写），
+  // 收缩过程中内容随容器一起缩小，强化"同一个物体"的感知
+  const contentScale = w / SLOT.w;
+
+  // 投影随尺寸缩小：悬空时大而深，落座后收敛到 fixtures 卡片原生投影量级
+  const ps = Math.min(Math.max(p, 0), 1);
+  const shadowY = lerp(36, 2, ps);
+  const shadowBlur = lerp(110, 8, ps);
+  const shadowAlpha = lerp(0.32, 0.06, ps);
+
+  // 背景 dashboard 先 0.9 透明度待命，落座瞬间提到 1
+  const bgOpacity = interpolate(frame, [MORPH_END - 2, MORPH_END + 3], [0.9, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.quad),
+  });
+
+  return (
+    <AbsoluteFill style={{ background: G.bg, overflow: 'hidden' }}>
+      <div style={{ opacity: bgOpacity }}>
+        <FakeDashboard variant="A" />
+      </div>
+      {/* 共享元素：全屏特写 → 精确飞落进槽位 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: x,
+          top: y,
+          width: w,
+          height: h,
+          borderRadius: r,
+          overflow: 'hidden',
+          background: G.card,
+          boxShadow: `0 ${shadowY}px ${shadowBlur}px rgba(0,0,0,${shadowAlpha})`,
+        }}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            transform: `scale(${contentScale})`,
+            transformOrigin: 'top left',
+          }}
+        >
+          <Card
+            w={SLOT.w}
+            h={SLOT.h}
+            seed={SLOT.seed}
+            style={{ boxShadow: 'none', borderRadius: r / Math.max(contentScale, 0.0001) }}
+          />
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/type-assembly-moves/LetterformDriftAssembly.tsx

@@ -0,0 +1,107 @@
+// 字形漂移合拢（letterform-drift-assembly）——Stranger Things 片头式入场。
+// 标题 "ASSEMBLE" 拆 9 字符：各自从不同方向（h(i) seeded 随机向量，
+// 幅度 ±260–360px）带 blur 8px + opacity 0.35 缓慢漂入，错峰归位
+// （delay i×3f，45f 行程，Easing.out(cubic)）。每字锁定瞬间给一次
+// "加深脉冲"：字色 G.ink→#000→G.ink + 描边 0→3px→0（8f）——白底上
+// 不用发光用加深（库判例）。全部合体后整词 scale 1→1.04→1 收束呼吸
+// （判例：1.02 太弱，加码到 1.04）。
+// 关键帧：0–24 各字错峰启程 → i 字 [i*3, i*3+45] 漂入归位 →
+// 锁定帧 i*3+45 起 8f 加深脉冲（最后一字 69–77）→ 80–104 整词呼吸 →
+// 104–150 全静止（46f，无逐帧滤镜）。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, TitleBlock } from '../_fixtures/Fixtures';
+
+const h = (n: number) => {
+  const s = Math.sin(n * 127.3) * 43758.5453;
+  return s - Math.floor(s);
+};
+
+const WORD = 'ASSEMBLE';
+const TRAVEL = 45; // 每字漂入行程帧数
+const STAG = 3; // 错峰间隔
+
+export const LetterformDriftAssembly: React.FC = () => {
+  const frame = useCurrentFrame();
+  const chars = WORD.split('');
+  const lastLock = (chars.length - 1) * STAG + TRAVEL; // 69
+
+  // 整词收束呼吸：80–92 放大到 1.04，92–104 回落，之后恒 1 → 帧确定
+  const breath =
+    frame < 92
+      ? interpolate(frame, [80, 92], [1, 1.04], {
+          extrapolateLeft: 'clamp',
+          extrapolateRight: 'clamp',
+          easing: Easing.inOut(Easing.cubic),
+        })
+      : interpolate(frame, [92, 104], [1.04, 1], {
+          extrapolateLeft: 'clamp',
+          extrapolateRight: 'clamp',
+          easing: Easing.inOut(Easing.cubic),
+        });
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', left: 120, top: 96 }}>
+        <TitleBlock text="LETTERFORM DRIFT ASSEMBLY" size={54} />
+      </div>
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          transform: `scale(${breath})`,
+        }}
+      >
+        {chars.map((c, i) => {
+          const start = i * STAG;
+          const lock = start + TRAVEL;
+          // 漂入进度
+          const p = interpolate(frame, [start, lock], [0, 1], {
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+            easing: Easing.out(Easing.cubic),
+          });
+          // seeded 起始向量：方向 h(i)，幅度 260–360px
+          const ang = h(i + 1) * Math.PI * 2;
+          const mag = 260 + h(i + 101) * 100;
+          const dx = Math.cos(ang) * mag * (1 - p);
+          const dy = Math.sin(ang) * mag * (1 - p);
+          const blur = 8 * (1 - p);
+          const op = interpolate(p, [0, 1], [0.35, 1]);
+          // 锁定加深脉冲：lock→lock+8，三角波 0→1→0
+          const pulse =
+            frame <= lock || frame >= lock + 8
+              ? 0
+              : frame < lock + 4
+                ? (frame - lock) / 4
+                : (lock + 8 - frame) / 4;
+          const shade = Math.round(47 * (1 - pulse)); // #2f(47)→#00
+          const color = `rgb(${shade},${shade},${shade})`;
+          const strokeW = 3 * pulse;
+          return (
+            <span
+              key={i}
+              style={{
+                fontFamily: 'Helvetica, Arial, sans-serif',
+                fontWeight: 800,
+                fontSize: 140,
+                letterSpacing: 8,
+                color,
+                display: 'inline-block',
+                transform: `translate(${dx}px, ${dy}px)`,
+                opacity: op,
+                filter: blur > 0.01 ? `blur(${blur}px)` : undefined,
+                WebkitTextStroke: strokeW > 0.01 ? `${strokeW}px #000` : undefined,
+              }}
+            >
+              {c}
+            </span>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/type-assembly-moves/SplitTextStagger.tsx

@@ -0,0 +1,101 @@
+// 逐字遮罩裂升（split-text-stagger）——GSAP SplitText 惯用入场。
+// 标题 "MOTION SYSTEM" 按字符拆 span，每字外包 overflow:hidden 的行高盒，
+// 内层从 translateY(115%) 升到 0，各 14f Easing.out(cubic)，带 10% 过冲
+// 再 6f 回落（原案 6% 过冲，按可感性红线加码到 10%）。delay = 字符索引×2f。
+// 底部基线细线（G.bar 2px）在首字起跳同帧从左向右生长，暗示裁切线存在。
+// 关键帧：0–12 空场 hold → 12 首字起跳 + 基线开始生长 → 每字 12+i*2 起跳，
+// 14f 升至 -10% 过冲 → 再 6f 回落归 0 → 末字(索引12)于 56f 落定 →
+// 56–130 全静止（74f ≥ 40f，无逐帧噪声层）。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, TitleBlock } from '../_fixtures/Fixtures';
+
+const TEXT = 'MOTION SYSTEM';
+const START = 12; // 首字起跳帧
+const RISE = 14; // 升起时长
+const SETTLE = 6; // 过冲回落时长
+const OVERSHOOT = -10; // 过冲到 -10%（原案 6%，加码）
+const FONT = 120;
+
+// 单字符纵向位移（%）：115 → -10（out cubic）→ 0（out quad），帧确定
+const charY = (f: number, idx: number): number => {
+  const t0 = START + idx * 2;
+  if (f < t0 + RISE) {
+    return interpolate(f, [t0, t0 + RISE], [115, OVERSHOOT], {
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp',
+      easing: Easing.out(Easing.cubic),
+    });
+  }
+  return interpolate(f, [t0 + RISE, t0 + RISE + SETTLE], [OVERSHOOT, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.quad),
+  });
+};
+
+export const SplitTextStagger: React.FC = () => {
+  const frame = useCurrentFrame();
+  const chars = TEXT.split('');
+  // 基线：首字起跳同帧开始，从左向右生长到 100%
+  const lineW = interpolate(frame, [START, START + 26], [0, 100], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', left: 120, top: 96 }}>
+        <TitleBlock text="SPLIT TEXT STAGGER" size={54} />
+      </div>
+      <div
+        style={{
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'column',
+        }}
+      >
+        <div style={{ display: 'flex' }}>
+          {chars.map((c, i) => (
+            <div
+              key={i}
+              style={{
+                // 遮罩盒：上方留 0.3em 头部空间容纳过冲，底边即裁切线
+                overflow: 'hidden',
+                height: FONT * 1.35,
+                display: 'flex',
+                alignItems: 'flex-end',
+              }}
+            >
+              <span
+                style={{
+                  display: 'inline-block',
+                  fontFamily: 'Helvetica, Arial, sans-serif',
+                  fontWeight: 800,
+                  fontSize: FONT,
+                  lineHeight: 1.05,
+                  color: G.ink,
+                  letterSpacing: 2,
+                  transform: `translateY(${charY(frame, i)}%)`,
+                }}
+              >
+                {c === ' ' ? ' ' : c}
+              </span>
+            </div>
+          ))}
+        </div>
+        {/* 基线细线：宽度从 0 生长到全文宽 */}
+        <div style={{ width: 920, marginTop: 10, display: 'flex', justifyContent: 'flex-start' }}>
+          <div style={{ height: 2, width: `${lineW}%`, background: G.bar }} />
+        </div>
+      </div>
+    </div>
+  );
+};