hyper-animator-codex 0.7.1 → 0.8.0

package/skills/hyper-animator-codex/references/shotcraft/source/demos/ai-stream-response/StreamResponse.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import {
+  AbsoluteFill,
+  Easing,
+  Img,
+  interpolate,
+  useCurrentFrame,
+} from 'remotion';
+import backplate from './agent-stream.jpg';
+
+const ROW_CUES = [42, 53, 63, 72, 80, 87, 93];
+const ROWS = [
+  ['Indexed the workspace', '128 files'],
+  ['Mapped the authentication flow', '12 modules'],
+  ['Checked recent error traces', 'No blockers'],
+  ['Matched API contracts to handlers', '24 routes'],
+  ['Verified permission boundaries', '6 roles'],
+  ['Cross-checked release notes', '3 changes'],
+  ['Prepared an implementation plan', 'Ready'],
+] as const;
+
+const clamp = {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'} as const;
+const ease = Easing.bezier(0.2, 0.75, 0.25, 1);
+
+const CheckIcon: React.FC<{progress: number}> = ({progress}) => {
+  const ringOpacity = interpolate(progress, [0, 0.45, 0.75], [0.36, 1, 0], clamp);
+  const checkOpacity = interpolate(progress, [0.62, 1], [0, 1], clamp);
+  const checkScale = interpolate(progress, [0.62, 1], [0.72, 1], {...clamp, easing: ease});
+
+  return (
+    <div style={{position: 'relative', width: 27, height: 27, flex: '0 0 auto'}}>
+      <div
+        style={{
+          position: 'absolute', inset: 2, borderRadius: 99,
+          border: '2px solid rgba(183, 190, 199, .6)',
+          borderTopColor: '#d4ff77', opacity: ringOpacity,
+          transform: `rotate(${progress * 100}deg)`,
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute', inset: 1, borderRadius: 99,
+          background: '#b8f36a', opacity: checkOpacity,
+          transform: `scale(${checkScale})`,
+          display: 'grid', placeItems: 'center',
+          boxShadow: '0 0 16px rgba(184,243,106,.18)',
+        }}
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path d="M3.4 8.3 6.6 11l6-6" stroke="#15200d" strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+      </div>
+    </div>
+  );
+};
+
+const EvidenceRow: React.FC<{cue: number; title: string; meta: string; index: number}> = ({cue, title, meta, index}) => {
+  const frame = useCurrentFrame();
+  const body = interpolate(frame, [cue, cue + 12], [0, 1], {...clamp, easing: ease});
+  const status = interpolate(frame, [cue + 3, cue + 11], [0, 1], {...clamp, easing: ease});
+  return (
+    <div
+      style={{
+        position: 'absolute', left: 0, right: 0, top: index * 68,
+        height: 58, borderRadius: 13,
+        border: '1px solid rgba(255,255,255,.065)',
+        background: 'rgba(255,255,255,.025)',
+        display: 'flex', alignItems: 'center', padding: '0 20px', gap: 15,
+        opacity: body,
+        transform: `translateY(${18 * (1 - body)}px)`,
+        filter: `blur(${6 * (1 - body)}px)`,
+      }}
+    >
+      <CheckIcon progress={status}/>
+      <div style={{fontSize: 21, color: '#e8eaed', letterSpacing: '-0.015em', flex: 1}}>{title}</div>
+      <div style={{fontSize: 16, color: status > 0.78 ? '#a9c77f' : '#777f89', fontVariantNumeric: 'tabular-nums'}}>{meta}</div>
+    </div>
+  );
+};
+
+export const StreamResponse: React.FC = () => {
+  const frame = useCurrentFrame();
+  const panelIn = interpolate(frame, [0, 16], [0, 1], {...clamp, easing: ease});
+  const summary = interpolate(frame, [18, 30], [0, 1], {...clamp, easing: ease});
+  const camera = interpolate(frame, [0, 100], [1.04, 1], {...clamp, easing: ease});
+  const pulse = interpolate(frame, [110, 115, 120], [0.25, 0.55, 0.25], clamp);
+  const complete = interpolate(frame, [110, 120], [0, 1], {...clamp, easing: ease});
+
+  return (
+    <AbsoluteFill style={{background: '#07090a', fontFamily: 'Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif', overflow: 'hidden'}}>
+      <AbsoluteFill style={{transform: `scale(${camera})`}}>
+        <Img src={backplate} style={{width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(.58) saturate(.76) blur(1px)', opacity: .7}}/>
+        <AbsoluteFill style={{background: 'radial-gradient(circle at 50% 44%, rgba(6,9,10,.08) 10%, rgba(4,6,7,.72) 92%)'}}/>
+      </AbsoluteFill>
+
+      <div
+        style={{
+          position: 'absolute', left: 344, top: 72, width: 1232, height: 936,
+          borderRadius: 29, overflow: 'hidden',
+          background: 'linear-gradient(145deg, rgba(25,29,32,.985), rgba(12,15,17,.99))',
+          border: `1px solid rgba(184,243,106,${pulse})`,
+          boxShadow: '0 46px 100px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.06)',
+          opacity: panelIn,
+          transform: `translateY(${12 * (1 - panelIn)}px) scale(${.985 + .015 * panelIn})`,
+        }}
+      >
+        <div style={{height: 76, display: 'flex', alignItems: 'center', padding: '0 34px', borderBottom: '1px solid rgba(255,255,255,.065)'}}>
+          <div style={{width: 29, height: 29, borderRadius: 9, background: '#e9edf0', color: '#15191b', display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 17}}>A</div>
+          <div style={{marginLeft: 13, fontSize: 22, fontWeight: 590, color: '#f1f3f4'}}>Ask Atlas</div>
+          <div style={{marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 9, color: '#7d858e', fontSize: 15}}>
+            <span style={{width: 7, height: 7, background: '#b8f36a', borderRadius: 99}}/> Workspace agent
+          </div>
+        </div>
+
+        <div style={{padding: '28px 38px 34px'}}>
+          <div style={{height: 48, borderRadius: 12, background: 'rgba(255,255,255,.048)', display: 'flex', alignItems: 'center', padding: '0 18px', color: '#b9bec4', fontSize: 18}}>
+            Review this codebase and identify the safest implementation path
+          </div>
+
+          <div style={{height: 119, marginTop: 21, borderBottom: '1px solid rgba(255,255,255,.07)', overflow: 'hidden', position: 'relative'}}>
+            <div style={{position: 'absolute', inset: 0, opacity: summary, transform: `translateY(${10 * (1 - summary)}px)`, clipPath: `inset(0 ${100 * (1 - summary)}% 0 0)`}}>
+              <div style={{color: '#838b94', fontSize: 15, textTransform: 'uppercase', letterSpacing: '.12em', marginBottom: 10}}>Result summary</div>
+              <div style={{color: '#f3f4f5', fontSize: 26, fontWeight: 510, lineHeight: 1.35, letterSpacing: '-.022em'}}>
+                The codebase is ready for a focused, low-risk implementation.
+              </div>
+            </div>
+          </div>
+
+          <div style={{position: 'relative', height: 466, marginTop: 17}}>
+            {ROWS.map(([title, meta], index) => <EvidenceRow key={title} cue={ROW_CUES[index]} title={title} meta={meta} index={index}/>)}
+          </div>
+
+          <div style={{height: 60, marginTop: 2, borderTop: '1px solid rgba(255,255,255,.07)', display: 'flex', alignItems: 'flex-end'}}>
+            <div style={{display: 'flex', alignItems: 'center', gap: 11, opacity: complete, transform: `translateY(${5 * (1 - complete)}px)`}}>
+              <div style={{width: 24, height: 24, borderRadius: 99, background: '#b8f36a', display: 'grid', placeItems: 'center'}}>
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3.4 8.3 6.6 11l6-6" stroke="#15200d" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
+              </div>
+              <span style={{color: '#dce7d0', fontSize: 17, fontWeight: 560}}>Analysis complete</span>
+              <span style={{color: '#69717a', fontSize: 15}}>7 checks finished · ready to build</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/autolayout-gap-dial/AutolayoutGapDial.tsx

@@ -0,0 +1,174 @@
+// autolayout-gap-dial —— framer-ai 4.5–5.5s
+// 一排导航链接块带框选描边 + 间距标注徽章，徽章数字逐格跳动，
+// 链接块被参数实时推开（flex gap 插值），标注线跟随。
+// demo 放大做：间距从紧(16)拉到松(64)，再弹簧回弹归位。
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, interpolate, spring, useVideoConfig, Easing } from 'remotion';
+import { G } from '../_fixtures/Fixtures';
+
+const BLOCK_WIDTHS = [230, 190, 265, 210, 245];
+const BLOCK_H = 100;
+const ROW_Y = 540; // 行中心
+const G_MIN = 12;
+const G_MAX = 110;
+
+const GROW_START = 14;
+const GROW_END = 52;
+const HOLD_END = 66;
+
+export const AutolayoutGapDial: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // 间距参数曲线：紧 → 松（easeInOut）→ hold → 弹簧回弹归位（带过冲）
+  let gap: number;
+  if (frame < HOLD_END) {
+    gap = interpolate(frame, [GROW_START, GROW_END], [G_MIN, G_MAX], {
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp',
+      easing: Easing.inOut(Easing.cubic),
+    });
+  } else {
+    const s = spring({ frame: frame - HOLD_END, fps, config: { damping: 9, stiffness: 80, mass: 1.1 } });
+    gap = G_MAX + (G_MIN - G_MAX) * s; // damping 9 → 过冲到 G_MIN 以下再回稳
+  }
+  const gapShown = Math.round(gap / 2) * 2; // 徽章逐格跳数（步进 2）
+
+  // 布局：居中排布
+  const total = BLOCK_WIDTHS.reduce((a, b) => a + b, 0) + gap * (BLOCK_WIDTHS.length - 1);
+  const startX = (1920 - total) / 2;
+  const xs: number[] = [];
+  let acc = startX;
+  for (const w of BLOCK_WIDTHS) {
+    xs.push(acc);
+    acc += w + gap;
+  }
+
+  // 框选描边入场
+  const selIn = spring({ frame: frame - 2, fps, config: { damping: 14, stiffness: 130 } });
+  const pad = 26;
+  const selX = startX - pad;
+  const selW = total + pad * 2;
+  const selY = ROW_Y - BLOCK_H / 2 - pad;
+  const selH = BLOCK_H + pad * 2;
+
+  // 徽章在数值变动时的每格"跳一下"
+  const ticking = Math.abs(gap - (frame < HOLD_END ? G_MIN : G_MIN)) > 0.5 && (frame >= GROW_START && frame < HOLD_END + 40);
+  const tickPulse = ticking ? 1 + 0.10 * Math.abs(Math.sin(frame * 0.9)) : 1;
+
+  return (
+    <AbsoluteFill style={{ background: G.bg, overflow: 'hidden' }}>
+      <AbsoluteFill
+        style={{
+          backgroundImage: `radial-gradient(${G.line} 3px, transparent 3px)`,
+          backgroundSize: '52px 52px',
+        }}
+      />
+
+      {/* 标题字块（讲清这是"参数驱动布局"） */}
+      <div style={{ position: 'absolute', top: 250, width: '100%', textAlign: 'center', fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 800, fontSize: 44, color: G.mid, letterSpacing: 2 }}>
+        GAP
+        <span style={{ display: 'inline-block', minWidth: 130, marginLeft: 24, padding: '4px 22px', borderRadius: 12, background: G.ink, color: '#f2f2f0', fontVariantNumeric: 'tabular-nums', transform: `scale(${tickPulse})` }}>
+          {gapShown}
+        </span>
+      </div>
+
+      {/* 框选描边 + 8 手柄 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: selX,
+          top: selY,
+          width: selW,
+          height: selH,
+          border: `3px solid ${G.ink}`,
+          borderRadius: 6,
+          opacity: selIn,
+          boxSizing: 'border-box',
+        }}
+      >
+        {[
+          [0, 0], [0.5, 0], [1, 0],
+          [0, 0.5], [1, 0.5],
+          [0, 1], [0.5, 1], [1, 1],
+        ].map(([hx, hy], i) => (
+          <div
+            key={i}
+            style={{
+              position: 'absolute',
+              left: `${hx * 100}%`,
+              top: `${hy * 100}%`,
+              width: 16,
+              height: 16,
+              marginLeft: -8,
+              marginTop: -8,
+              background: '#fff',
+              border: `3px solid ${G.ink}`,
+              borderRadius: 3,
+              boxSizing: 'border-box',
+            }}
+          />
+        ))}
+      </div>
+
+      {/* 链接块 */}
+      {BLOCK_WIDTHS.map((w, i) => (
+        <div
+          key={i}
+          style={{
+            position: 'absolute',
+            left: xs[i],
+            top: ROW_Y - BLOCK_H / 2,
+            width: w,
+            height: BLOCK_H,
+            background: G.card,
+            border: `2px solid ${G.border}`,
+            borderRadius: 14,
+            boxShadow: '0 3px 12px rgba(0,0,0,0.07)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            boxSizing: 'border-box',
+          }}
+        >
+          <div style={{ height: 16, width: w - 76, background: G.bar, borderRadius: 8 }} />
+        </div>
+      ))}
+
+      {/* 间距标注：测量线 + 端刺 + 跟随徽章 */}
+      {xs.slice(0, -1).map((x, i) => {
+        const gx = x + BLOCK_WIDTHS[i]; // 缝隙左缘
+        const cy = ROW_Y + BLOCK_H / 2 + 56;
+        const badgeOp = interpolate(frame, [8, 16], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+        return (
+          <div key={i} style={{ position: 'absolute', left: 0, top: 0, opacity: badgeOp }}>
+            {/* 竖直延长线 */}
+            <div style={{ position: 'absolute', left: gx - 1.5, top: ROW_Y + BLOCK_H / 2 + 6, width: 3, height: 62, background: G.mid, opacity: 0.55 }} />
+            <div style={{ position: 'absolute', left: gx + gap - 1.5, top: ROW_Y + BLOCK_H / 2 + 6, width: 3, height: 62, background: G.mid, opacity: 0.55 }} />
+            {/* 水平测量线 */}
+            <div style={{ position: 'absolute', left: gx, top: cy - 1.5, width: gap, height: 3, background: G.ink }} />
+            {/* 徽章（跟随缝隙中心） */}
+            <div
+              style={{
+                position: 'absolute',
+                left: gx + gap / 2,
+                top: cy + 18,
+                transform: `translateX(-50%) scale(${tickPulse})`,
+                padding: '5px 14px',
+                borderRadius: 10,
+                background: G.ink,
+                color: '#f2f2f0',
+                fontFamily: 'Helvetica, Arial, sans-serif',
+                fontWeight: 700,
+                fontSize: 24,
+                fontVariantNumeric: 'tabular-nums',
+              }}
+            >
+              {gapShown}
+            </div>
+          </div>
+        );
+      })}
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/beat-cut-moves/BeatCutAccelerando.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
+import { FakeDashboard, G } from '../_fixtures/Fixtures';
+
+// beat-cut-accelerando：六个不同构图按 16→12→8→6→4 帧递减间隔全屏硬切，
+// 加速逼近，最后一切戛然定格回主画面并 1→1.06 慢推收住。
+// 真硬切：frame 落在哪个区间就渲染哪个视图，无任何过渡。
+
+// 一个视图 = FakeDashboard 变体 + 缩放 + 对焦点（画面上要被推到屏幕中心的点）
+type View = { variant: 'A' | 'B'; scale: number; cx: number; cy: number };
+
+const VIEWS: View[] = [
+  { variant: 'A', scale: 1, cx: 960, cy: 540 },    // v0 全景（建立）
+  { variant: 'A', scale: 1.8, cx: 1070, cy: 576 }, // v1 卡片区
+  { variant: 'A', scale: 2.6, cx: 600, cy: 340 },  // v2 单卡特写
+  { variant: 'B', scale: 1, cx: 960, cy: 540 },    // v3 列表页全景
+  { variant: 'B', scale: 1.9, cx: 1070, cy: 500 }, // v4 列表行区
+  { variant: 'B', scale: 2.8, cx: 1070, cy: 290 }, // v5 单行特写
+];
+
+// 每段起始帧：建立 49f，然后间隔 16→12→8→6→4，末段（回主画面）hold 35f
+// 0–48 v0 | 49–64 v1 | 65–76 v2 | 77–84 v3 | 85–90 v4 | 91–94 v5 | 95–129 定格
+const CUTS = [0, 49, 65, 77, 85, 91, 95];
+const FINAL = 95; // 最后一切：戛然定格回主画面
+
+const ViewShot: React.FC<{ view: View; extraScale?: number }> = ({ view, extraScale = 1 }) => {
+  const s = view.scale * extraScale;
+  return (
+    <div
+      style={{
+        width: 1920,
+        height: 1080,
+        transformOrigin: `${view.cx}px ${view.cy}px`,
+        transform: `translate(${960 - view.cx}px, ${540 - view.cy}px) scale(${s})`,
+      }}
+    >
+      <FakeDashboard variant={view.variant} />
+    </div>
+  );
+};
+
+export const BeatCutAccelerando: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 当前落在哪个区间（末段 = 主画面 v0）
+  let seg = 0;
+  for (let i = 0; i < CUTS.length; i++) {
+    if (frame >= CUTS[i]) seg = i;
+  }
+  const isFinal = seg === CUTS.length - 1;
+  const view = isFinal ? VIEWS[0] : VIEWS[seg];
+
+  // 末段慢推：scale 1 → 1.06，ease-out，推 22f 后静止（结尾静止 ≥15f）
+  const push = isFinal
+    ? interpolate(frame, [FINAL, FINAL + 20], [1, 1.06], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+        easing: Easing.out(Easing.cubic),
+      })
+    : 1;
+
+  // 每次硬切的 1f 亮度跳变（约 +5%）模拟快门
+  const isCutFrame = CUTS.some((c, i) => i > 0 && frame === c);
+  const flash = isCutFrame ? 1.05 : 1;
+
+  return (
+    <AbsoluteFill style={{ background: G.bg, overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', inset: 0, filter: `brightness(${flash})` }}>
+        <ViewShot view={view} extraScale={push} />
+      </div>
+      {/* 切帧再叠一层极薄白闪，保证肉眼可感 */}
+      {isCutFrame && (
+        <AbsoluteFill style={{ background: '#ffffff', opacity: 0.06 }} />
+      )}
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/beat-cut-moves/PaparazziFlash.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
+import { FakeDashboard, TitleBlock, G } from '../_fixtures/Fixtures';
+
+// paparazzi flash 连闪定格：高光时刻三连白闪，每闪硬切同一素材的不同裁切
+// （全景→卡片特写→数字特写），每闪切入画面带 1.03→1 回落 + 半格沉降像快门
+// 余韵，白闪帧加微位移抖动模拟快门震，第三闪后停在数字特写收束。
+const F1 = 30; // 第一闪（间隔 22f）
+const F2 = 52; // 第二闪（间隔 18f）
+const F3 = 70; // 第三闪，之后 hold 60f
+const SETTLE = 6; // 切入回落时长
+const DECAY = 4; // 白层衰减时长
+const FLASHES = [F1, F2, F3];
+
+// seed 正弦哈希，返回 -1..1（禁 Math.random）
+const hash = (i: number) => {
+  const s = Math.sin(i * 127.3) * 43758.5453;
+  return (s - Math.floor(s)) * 2 - 1;
+};
+
+// 同一"素材"：全景 dashboard，顶行中间卡片上叠一个大数字，供数字特写裁切
+const Footage: React.FC = () => (
+  <div style={{ position: 'absolute', width: 1920, height: 1080 }}>
+    <FakeDashboard variant="A" />
+    <div style={{ position: 'absolute', left: 1070, top: 350, transform: 'translate(-50%, -50%)' }}>
+      <TitleBlock text="84,213" size={104} />
+    </div>
+  </div>
+);
+
+// 四个视图：闪前"活素材"慢推 + 三个定格裁切（全景 / 卡片 / 数字）
+type View = { scale: number; origin: string };
+const VIEW_WIDE: View = { scale: 1.0, origin: '960px 540px' };
+const VIEW_CARD: View = { scale: 2.3, origin: '1070px 335px' };
+const VIEW_DIGIT: View = { scale: 4.0, origin: '1070px 350px' };
+
+export const PaparazziFlash: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 当前处于哪一段：-1 = 闪前活素材段
+  let seg = -1;
+  for (let i = 0; i < FLASHES.length; i++) {
+    if (frame >= FLASHES[i]) seg = i;
+  }
+
+  let scale: number;
+  let origin: string;
+  let settleScale = 1;
+  let settleY = 0;
+
+  if (seg === -1) {
+    // 闪前：中景慢推（活的），衬托闪后定格的"死"
+    origin = '900px 480px';
+    scale = interpolate(frame, [0, F1], [1.16, 1.2], {
+      extrapolateRight: 'clamp',
+      easing: Easing.inOut(Easing.quad),
+    });
+  } else {
+    const view = [VIEW_WIDE, VIEW_CARD, VIEW_DIGIT][seg];
+    scale = view.scale;
+    origin = view.origin;
+    // 切入回落：1.03→1 的 6f 收敛 + 半格沉降（-16px 落回 0）像快门余韵
+    const t = interpolate(frame, [FLASHES[seg], FLASHES[seg] + SETTLE], [1, 0], {
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp',
+      easing: Easing.out(Easing.cubic),
+    });
+    settleScale = 1 + 0.03 * t;
+    settleY = -16 * t;
+  }
+
+  // 白闪层：每个切点 0.95→0，4f 衰减，取各闪最大值
+  let flash = 0;
+  for (const f of FLASHES) {
+    const o = interpolate(frame, [f, f + DECAY], [0.95, 0], {
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp',
+      easing: Easing.out(Easing.quad),
+    });
+    if (frame >= f && frame < f + DECAY + 1) flash = Math.max(flash, o);
+  }
+
+  // 白闪帧全屏微位移抖动模拟快门震（seed 哈希，非随机）
+  const inFlash = FLASHES.some((f) => frame >= f && frame < f + DECAY);
+  const jx = inFlash ? 2 * hash(frame * 7 + 1) : 0;
+  const jy = inFlash ? 2 * hash(frame * 13 + 5) : 0;
+
+  return (
+    <AbsoluteFill style={{ background: G.ink, overflow: 'hidden' }}>
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          transform: `translate(${jx}px, ${jy + settleY}px)`,
+        }}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            width: 1920,
+            height: 1080,
+            transform: `scale(${scale * settleScale})`,
+            transformOrigin: origin,
+          }}
+        >
+          <Footage />
+        </div>
+      </div>
+      {/* 白闪层 */}
+      {flash > 0 && (
+        <AbsoluteFill style={{ background: '#ffffff', opacity: flash }} />
+      )}
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/beat-step-list-theme-cycle/BeatStepListThemeCycle.tsx

@@ -0,0 +1,98 @@
+// beat-step-list-theme-cycle（bear 22.3–24.6s）
+// 深色场形容词列表逐拍步进：每拍列表上移一行 + 选中胶囊跳到下一行并换色
+// （绿→紫→红），整场底色同步换（深棕→深紫→深藏青）。
+// 一拍之内"行、色、场"三通道同步跳变，~0.6s 一拍。
+import React from 'react';
+import { AbsoluteFill, interpolate, useCurrentFrame } from 'remotion';
+
+const FONT = 'Helvetica, Arial, sans-serif';
+const ROW_H = 150;
+const WORDS = ['modern', 'playful', 'expressive', 'seamless', 'intuitive'];
+
+// 拍点：~0.6s 一拍 = 18 帧
+const BEAT_LEN = 18;
+const FIRST_BEAT = 30; // 前 1s 静置铺垫
+const N_BEATS = 3;
+
+// 每拍的（胶囊色 / 场底色）——起始态 + 三拍
+const THEMES = [
+  { pill: '#d8d8d4', bg: '#241a12', ink: '#2a2018' }, // modern：灰白胶囊 / 深棕场
+  { pill: '#4fae62', bg: '#1e2416', ink: '#173015' }, // playful：绿
+  { pill: '#8e6fd8', bg: '#221a33', ink: '#2a2144' }, // expressive：紫
+  { pill: '#d64d55', bg: '#141c2e', ink: '#1a2440' }, // seamless：红 / 深藏青
+];
+
+// 拍内跳变：5 帧内完成，ease-out + 微过冲
+const snap = (t: number) => interpolate(t, [0, 1], [0, 1], {
+  easing: (x) => 1 - Math.pow(1 - x, 3.2),
+  extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+});
+
+export const BeatStepListThemeCycle: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 当前拍序号与拍内进度（跳变只占拍头 6 帧）
+  const raw = (frame - FIRST_BEAT) / BEAT_LEN;
+  const beat = Math.min(N_BEATS, Math.max(0, Math.floor(raw) + 1)); // 已触发的拍数
+  const beatStartFrame = FIRST_BEAT + (beat - 1) * BEAT_LEN;
+  const tInBeat = beat === 0 ? 1 : snap((frame - beatStartFrame) / 6);
+
+  // 连续步进量：整数拍 + 拍头 6 帧内的插值
+  const step = beat === 0 ? 0 : (beat - 1) + tInBeat;
+
+  // 三通道 —— 1) 列表上移一行
+  const listY = -step * ROW_H;
+
+  // 2) 胶囊换色（拍头硬跳，带一点 cross-fade）
+  const themePrev = THEMES[Math.max(0, beat - 1)];
+  const themeNow = THEMES[beat];
+  const mixT = beat === 0 ? 1 : tInBeat;
+  const mix = (a: string, b: string, t: number) => {
+    const pa = [1, 3, 5].map((i) => parseInt(a.slice(i, i + 2), 16));
+    const pb = [1, 3, 5].map((i) => parseInt(b.slice(i, i + 2), 16));
+    return `rgb(${pa.map((v, i) => Math.round(v + (pb[i] - v) * t)).join(',')})`;
+  };
+  const pillColor = mix(themePrev.pill, themeNow.pill, mixT);
+  const bgColor = mix(themePrev.bg, themeNow.bg, mixT);
+
+  // 胶囊每拍落位时 squash 弹一下
+  const pop = beat === 0 ? 1 : interpolate(tInBeat, [0, 0.6, 1], [1.12, 0.97, 1]);
+
+  // 选中行文字反白判定：胶囊固定在视口中央行，选中词 = WORDS[beat]
+  const selectedIdx = beat;
+
+  return (
+    <AbsoluteFill style={{ background: bgColor, fontFamily: FONT, justifyContent: 'center' }}>
+      {/* 中央固定胶囊（列表在其下滚动，视觉上"胶囊跳到下一行"） */}
+      <div style={{
+        position: 'absolute', left: '50%', top: 540 - ROW_H / 2 + 10,
+        width: 900, height: ROW_H - 20, transform: `translateX(-50%) scale(${pop})`,
+        background: pillColor, borderRadius: 999,
+        boxShadow: '0 14px 40px rgba(0,0,0,0.35)',
+      }} />
+      {/* 词列表 */}
+      <div style={{
+        position: 'absolute', left: 0, right: 0, top: 540 - ROW_H / 2,
+        transform: `translateY(${listY}px)`,
+      }}>
+        {WORDS.map((w, i) => {
+          const isSel = i === selectedIdx;
+          return (
+            <div key={w} style={{
+              height: ROW_H, display: 'flex', alignItems: 'center', justifyContent: 'center',
+            }}>
+              <span style={{
+                fontSize: 92, fontWeight: 800, letterSpacing: -1.5,
+                color: isSel ? (beat === 0 ? '#2a2018' : '#ffffff') : 'rgba(255,255,255,0.34)',
+                position: 'relative', zIndex: 2,
+              }}>{w}</span>
+            </div>
+          );
+        })}
+      </div>
+      {/* 视口上下羽化 */}
+      <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: 300, background: `linear-gradient(${bgColor}, transparent)`, zIndex: 3 }} />
+      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 300, background: `linear-gradient(transparent, ${bgColor})`, zIndex: 3 }} />
+    </AbsoluteFill>
+  );
+};