hyper-animator-codex 0.7.1 → 0.8.0

package/skills/hyper-animator-codex/references/shotcraft/source/demos/chart-live-moves/AxisRescaleShockV2.tsx

@@ -0,0 +1,282 @@
+// axis-rescale-shock-v2 —— 轴爆表重标 v2（批次 6 "改改再看" 重做）
+// 相对 v1 的加码：爆表点冲出卡片顶 80→220px（真的冲进标题字区域）、冲出段折线
+// 加粗 10px 且变琥珀；重标瞬间"哗"——旧刻度数字向下飞出淡出、新刻度从上滑入，
+// 网格 4→8 根同帧加密；真图表语境：真标题 "Monthly revenue"、真轴刻度
+// $25k/$50k/$75k/$100k → $100k/$200k/$300k/$400k、真月份 x 轴、端点弹真值
+// 标签 "$340k"；卡片震动 3→8px。收尾 f120 后真静止 40f。
+// 帧确定性：数据硬编码，全部 frame 派生，无 Math.random / Date.now。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, TitleBlock } from '../_fixtures/Fixtures';
+
+const AMBER = '#b45309';
+
+const CARD_W = 1060;
+const CARD_H = 600;
+const CX = (1920 - CARD_W) / 2;
+const CY = (1080 - CARD_H) / 2 + 40;
+const PAD = 52;
+const AXIS_W = 96; // 左侧 $ 刻度位
+const PLOT_W = CARD_W - PAD * 2 - AXIS_W;
+const PLOT_H = 360;
+const PLOT_X = PAD + AXIS_W;
+const PLOT_Y = 130;
+
+// 历史数据（$k，0–100 量程内温和爬升），最后一点爆表 340
+const DATA = [22, 30, 26, 38, 35, 47, 44, 58, 55, 66, 72, 340];
+const N = DATA.length;
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+const HOLD = 12;
+const DRAW_END = HOLD + 34; // f46：历史段画完
+const SHOCK_END = DRAW_END + 16; // f62：爆表点冲顶
+const BEAT = SHOCK_END + 16; // f78：停半拍（悬在标题区）
+const RESCALE_END = BEAT + 12; // f90：重标完成
+const MARK_END = RESCALE_END + 8; // f98：端点标记弹出
+const VAL_END = MARK_END + 10; // f108：真值标签弹出
+
+const easeDraw = Easing.inOut(Easing.cubic);
+
+export const AxisRescaleShockV2: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 量程：0–100 → 0–400，重标 12f out-cubic
+  const range = interpolate(frame, [BEAT, RESCALE_END], [100, 400], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const yOf = (v: number): number => PLOT_H - (v / range) * PLOT_H;
+
+  const drawT = interpolate(frame, [HOLD, DRAW_END], [0, N - 2], {
+    easing: easeDraw,
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const shockT = interpolate(frame, [DRAW_END + 2, SHOCK_END], [0, 1], {
+    easing: Easing.in(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // 冲顶停位：卡片上沿之上 220px（PLOT_Y=130 → 相对绘图区顶 -350），真冲进标题字区
+  const SHOCK_Y = -(PLOT_Y + 220);
+  const rescaleP = interpolate(frame, [BEAT, RESCALE_END], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  const xOf = (i: number): number => (i / (N - 1)) * PLOT_W;
+
+  // 历史段点集
+  const basePts: string[] = [];
+  const upto = Math.min(drawT, N - 2);
+  for (let i = 0; i <= Math.floor(upto); i++) basePts.push(`${xOf(i).toFixed(2)},${yOf(DATA[i]).toFixed(2)}`);
+  if (upto < N - 2 && upto > Math.floor(upto)) {
+    const i = Math.floor(upto);
+    const f = upto - i;
+    const x = xOf(i) + (xOf(i + 1) - xOf(i)) * f;
+    const y = yOf(DATA[i]) + (yOf(DATA[i + 1]) - yOf(DATA[i])) * f;
+    basePts.push(`${x.toFixed(2)},${y.toFixed(2)}`);
+  }
+
+  // 爆表段单独一根（琥珀 + 10px 加粗），起点 = 历史最后一点
+  let headX = basePts.length ? Number(basePts[basePts.length - 1].split(',')[0]) : 0;
+  let headY = basePts.length ? Number(basePts[basePts.length - 1].split(',')[1]) : 0;
+  let shockSeg: string[] = [];
+  if (shockT > 0) {
+    const x0 = xOf(N - 2);
+    const y0 = yOf(DATA[N - 2]);
+    const x = x0 + (xOf(N - 1) - x0) * shockT;
+    const yEnd = SHOCK_Y + (yOf(DATA[N - 1]) - SHOCK_Y) * rescaleP;
+    const y = y0 + (yEnd - y0) * shockT;
+    shockSeg = [`${x0.toFixed(2)},${y0.toFixed(2)}`, `${x.toFixed(2)},${y.toFixed(2)}`];
+    headX = x;
+    headY = y;
+  }
+
+  // 重标"哗"：旧刻度向下飞出淡出、新刻度从上滑入
+  const swap = interpolate(frame, [BEAT, BEAT + 10], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const OLD_TICKS = ['$25k', '$50k', '$75k', '$100k'];
+  const NEW_TICKS = ['$100k', '$200k', '$300k', '$400k'];
+
+  // 网格密度 4→8：新增的 4 根细网格随 swap 浮现
+  const denseOp = swap;
+
+  const markS = interpolate(frame, [RESCALE_END, MARK_END], [0, 1], {
+    easing: Easing.out(Easing.back(2.2)),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const valS = interpolate(frame, [MARK_END, VAL_END], [0, 1], {
+    easing: Easing.out(Easing.back(1.8)),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // 爆表瞬间卡片震（±8px，8f 内衰减归零）
+  const kick =
+    frame >= SHOCK_END && frame < SHOCK_END + 8
+      ? 8 * (1 - (frame - SHOCK_END) / 8) * Math.sin((frame - SHOCK_END) * 2.6)
+      : 0;
+
+  const shockOn = frame >= DRAW_END; // 爆表段样式生效期
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', top: 100, width: '100%', textAlign: 'center' }}>
+        <TitleBlock text="AXIS RESCALE SHOCK V2" size={72} />
+      </div>
+
+      <div
+        style={{
+          position: 'absolute',
+          left: CX,
+          top: CY,
+          width: CARD_W,
+          height: CARD_H,
+          background: G.card,
+          border: `2px solid ${G.border}`,
+          borderRadius: 14,
+          boxSizing: 'border-box',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
+          transform: `translateY(${kick.toFixed(2)}px)`,
+          overflow: 'visible', // 让爆表段真的越出卡片
+        }}
+      >
+        {/* 真卡头 */}
+        <div style={{ position: 'absolute', left: PAD, top: 34, fontFamily: 'Helvetica, Arial, sans-serif' }}>
+          <div style={{ fontSize: 30, fontWeight: 700, color: G.ink }}>Monthly revenue</div>
+          <div style={{ fontSize: 19, fontWeight: 500, color: G.mid, marginTop: 6 }}>FY2026 · all products · USD</div>
+        </div>
+
+        <div style={{ position: 'absolute', left: PLOT_X, top: PLOT_Y, width: PLOT_W, height: PLOT_H }}>
+          {/* 基础网格 4 根 + 重标同帧加密出的 4 根 */}
+          {[0, 1, 2, 3, 4].map((i) => (
+            <div key={`g${i}`} style={{ position: 'absolute', left: 0, right: 0, top: (PLOT_H / 4) * i, height: 2, background: G.line }} />
+          ))}
+          {[1, 3, 5, 7].map((i) => (
+            <div key={`gd${i}`} style={{ position: 'absolute', left: 0, right: 0, top: (PLOT_H / 8) * i, height: 1.5, background: G.line, opacity: 0.8 * denseOp }} />
+          ))}
+
+          {/* 刻度：同一格位，旧值下飞淡出 / 新值上方滑入 */}
+          {OLD_TICKS.map((v, i) => {
+            const y = (PLOT_H / 4) * (3 - i);
+            return (
+              <div key={`t${i}`} style={{ position: 'absolute', left: -AXIS_W, top: y - 13, width: AXIS_W - 14, height: 26, textAlign: 'right' }}>
+                <div
+                  style={{
+                    position: 'absolute',
+                    inset: 0,
+                    fontFamily: 'Helvetica',
+                    fontWeight: 700,
+                    fontSize: 21,
+                    color: G.mid,
+                    textAlign: 'right',
+                    opacity: 1 - swap,
+                    transform: `translateY(${(swap * 30).toFixed(2)}px)`,
+                  }}
+                >
+                  {v}
+                </div>
+                <div
+                  style={{
+                    position: 'absolute',
+                    inset: 0,
+                    fontFamily: 'Helvetica',
+                    fontWeight: 700,
+                    fontSize: 21,
+                    color: G.ink,
+                    textAlign: 'right',
+                    opacity: swap,
+                    transform: `translateY(${((swap - 1) * 30).toFixed(2)}px)`,
+                  }}
+                >
+                  {NEW_TICKS[i]}
+                </div>
+              </div>
+            );
+          })}
+          <div style={{ position: 'absolute', left: -AXIS_W, top: PLOT_H - 13, width: AXIS_W - 14, fontFamily: 'Helvetica', fontWeight: 700, fontSize: 21, color: G.mid, textAlign: 'right' }}>$0</div>
+
+          {/* 图表上沿强调线 */}
+          <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: 3, background: G.bar }} />
+
+          <svg width={PLOT_W} height={PLOT_H} style={{ position: 'absolute', inset: 0, overflow: 'visible' }}>
+            {/* 历史段 */}
+            <polyline points={basePts.join(' ')} fill="none" stroke={G.ink} strokeWidth={5} strokeLinejoin="round" strokeLinecap="round" />
+            {/* 爆表段：琥珀 + 10px，重标落回后收敛回常规 */}
+            {shockSeg.length > 0 && (
+              <polyline
+                points={shockSeg.join(' ')}
+                fill="none"
+                stroke={AMBER}
+                strokeWidth={shockOn && frame < RESCALE_END ? 10 : 6}
+                strokeLinejoin="round"
+                strokeLinecap="round"
+              />
+            )}
+            {/* 端点标记 */}
+            {markS > 0 && (
+              <>
+                <circle cx={headX} cy={headY} r={13 * markS} fill={AMBER} />
+                <circle cx={headX} cy={headY} r={22 * markS} fill="none" stroke={AMBER} strokeWidth={3} opacity={0.55} />
+              </>
+            )}
+          </svg>
+
+          {/* 真值标签 "$340k"（端点旁弹出） */}
+          {valS > 0 && (
+            <div
+              style={{
+                position: 'absolute',
+                left: headX - 178,
+                top: headY - 27,
+                width: 150,
+                height: 54,
+                background: AMBER,
+                borderRadius: 10,
+                color: '#fff',
+                fontFamily: 'Helvetica, Arial, sans-serif',
+                fontWeight: 800,
+                fontSize: 30,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                transform: `scale(${valS.toFixed(4)})`,
+                transformOrigin: 'right center',
+              }}
+            >
+              $340k
+            </div>
+          )}
+
+          {/* x 轴真月份 */}
+          {MONTHS.map((m, i) => (
+            <div
+              key={`m${i}`}
+              style={{
+                position: 'absolute',
+                left: xOf(i) - 30,
+                top: PLOT_H + 16,
+                width: 60,
+                textAlign: 'center',
+                fontFamily: 'Helvetica, Arial, sans-serif',
+                fontSize: 18,
+                fontWeight: 600,
+                color: i === N - 1 ? AMBER : G.mid,
+              }}
+            >
+              {m}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/chart-live-moves/OscilloscopeStreamV2.tsx

@@ -0,0 +1,227 @@
+// oscilloscope-stream-v2 —— 示波流线 v2（批次 6 "改改再看" 重做）
+// 相对 v1 的加码：流速 5.5→8px/f；写入点亮点 1.5×（7→10.5）、余辉 90→160px；
+// 流动中途插入一次突发尖峰（振幅 2.2×、持续 ~20 帧写入后随流带走），尖峰经过写入点时
+// 卡头实时读数跳大并变琥珀；真图表语境：真标题/真 y 轴刻度/真时间轴/实时读数。
+// 刹停逻辑保留：f100–112 out-cubic 刹停，f112 后真静止 48f。
+// 帧确定性：波形与尖峰包络都是纯 worldX 函数，无 Math.random / Date.now。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, TitleBlock } from '../_fixtures/Fixtures';
+
+const AMBER = '#b45309';
+
+const CARD_W = 1080;
+const CARD_H = 560;
+const CX = (1920 - CARD_W) / 2;
+const CY = (1080 - CARD_H) / 2 + 40;
+const PAD = 46;
+const AXIS_W = 64; // 左侧 y 轴刻度位
+const PLOT_X = PAD + AXIS_W;
+const PLOT_W = CARD_W - PAD * 2 - AXIS_W; // 924
+const PLOT_H = 300;
+const PLOT_Y = 158;
+
+const HOLD = 12;
+const FREEZE_START = 100;
+const FREEZE_END = 112;
+const SPEED = 8; // px/frame（v1 5.5 → 8，~240px/s）
+const AMP = 0.72; // 基础振幅占半高比例（给尖峰留出头部空间）
+
+// 突发尖峰：worldX ∈ [288, 448]（写入发生在 f48–68，之后随流向左带走）
+const SPIKE_X0 = 288;
+const SPIKE_W = 160;
+const SPIKE_GAIN = 1.2; // 峰值 = 1 + 1.2 = 2.2×
+
+const env = (x: number): number => {
+  if (x <= SPIKE_X0 || x >= SPIKE_X0 + SPIKE_W) return 1;
+  const p = (x - SPIKE_X0) / SPIKE_W;
+  return 1 + SPIKE_GAIN * (0.5 - 0.5 * Math.cos(p * Math.PI * 2));
+};
+
+// 有效时间：HOLD 前为 0，之后线性流动，FREEZE 区间 easeOut 刹停为常数
+const effTime = (frame: number): number => {
+  const t = (f: number) => Math.max(f - HOLD, 0) * SPEED;
+  if (frame <= FREEZE_START) return t(frame);
+  const brakeDist = (t(FREEZE_END) - t(FREEZE_START)) * 0.45;
+  return (
+    t(FREEZE_START) +
+    interpolate(frame, [FREEZE_START, FREEZE_END], [0, brakeDist], {
+      easing: Easing.out(Easing.cubic),
+      extrapolateRight: 'clamp',
+    })
+  );
+};
+
+// 波形：四个正弦叠加，x 单位 = 世界像素
+const wave = (x: number): number =>
+  0.34 * Math.sin(x * 0.021) +
+  0.27 * Math.sin(x * 0.052 + 1.7) +
+  0.18 * Math.sin(x * 0.013 + 4.2) +
+  0.12 * Math.sin(x * 0.087 + 2.3);
+
+const signal = (x: number): number => wave(x) * env(x) * AMP; // ∈ ~[-1.6, 1.6]，常态 [-0.65, 0.65]
+const yOf = (x: number): number => PLOT_H / 2 - signal(x) * (PLOT_H / 2);
+// 读数映射：绘图区中线 = 1,000 req/s，上下沿 = 2,000 / 0
+const valueOf = (x: number): number => Math.round(1000 + signal(x) * 1000);
+
+const fmt = (n: number): string => n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+
+const Y_TICKS = ['2.0k', '1.5k', '1.0k', '0.5k', '0'];
+const X_TICKS = ['-60s', '-50s', '-40s', '-30s', '-20s', '-10s', 'now'];
+
+export const OscilloscopeStreamV2: React.FC = () => {
+  const frame = useCurrentFrame();
+  const T = effTime(frame);
+
+  const N = 270;
+  const pts: string[] = [];
+  for (let i = 0; i <= N; i++) {
+    const px = (i / N) * PLOT_W;
+    const worldX = T - (PLOT_W - px);
+    pts.push(`${px.toFixed(2)},${yOf(worldX).toFixed(2)}`);
+  }
+  const headY = yOf(T);
+
+  const frozen = frame >= FREEZE_END;
+  const glowOp = interpolate(frame, [FREEZE_START, FREEZE_END], [1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // 余辉段：头部往回 160px（v1 90 → 160）
+  const TAIL = 160;
+  const tailPts: string[] = [];
+  if (!frozen) {
+    for (let i = 0; i <= 40; i++) {
+      const px = PLOT_W - TAIL + (i / 40) * TAIL;
+      const worldX = T - (PLOT_W - px);
+      tailPts.push(`${px.toFixed(2)},${yOf(worldX).toFixed(2)}`);
+    }
+  }
+
+  // 实时读数：尖峰经过写入点时跳大 + 变琥珀
+  const spikeK = Math.min(Math.max((env(T) - 1) / SPIKE_GAIN, 0), 1);
+  const hot = spikeK > 0.22;
+  const readout = fmt(valueOf(T));
+  const readScale = 1 + 0.32 * spikeK;
+  const dotColor = spikeK > 0.15 ? AMBER : G.ink;
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', top: 110, width: '100%', textAlign: 'center' }}>
+        <TitleBlock text="OSCILLOSCOPE STREAM V2" size={72} />
+      </div>
+
+      <div
+        style={{
+          position: 'absolute',
+          left: CX,
+          top: CY,
+          width: CARD_W,
+          height: CARD_H,
+          background: G.card,
+          border: `2px solid ${G.border}`,
+          borderRadius: 14,
+          boxSizing: 'border-box',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
+        }}
+      >
+        {/* 真卡头：标题 + 副题 + 实时读数 */}
+        <div style={{ position: 'absolute', left: PAD, top: 38, fontFamily: 'Helvetica, Arial, sans-serif' }}>
+          <div style={{ fontSize: 30, fontWeight: 700, color: G.ink }}>Requests per second</div>
+          <div style={{ fontSize: 20, fontWeight: 500, color: G.mid, marginTop: 8 }}>api-gateway · production · last 60 s</div>
+        </div>
+        <div
+          style={{
+            position: 'absolute',
+            right: PAD,
+            top: 36,
+            textAlign: 'right',
+            fontFamily: 'Helvetica, Arial, sans-serif',
+            transform: `scale(${readScale.toFixed(4)})`,
+            transformOrigin: 'right top',
+          }}
+        >
+          <div style={{ fontSize: 46, fontWeight: 800, color: hot ? AMBER : G.ink, fontVariantNumeric: 'tabular-nums', letterSpacing: -1 }}>
+            {readout}
+          </div>
+          <div style={{ fontSize: 18, fontWeight: 600, color: hot ? AMBER : G.mid, marginTop: 2 }}>req/s · live</div>
+        </div>
+
+        {/* y 轴真刻度 */}
+        {Y_TICKS.map((t, i) => (
+          <div
+            key={`yt${i}`}
+            style={{
+              position: 'absolute',
+              left: PAD - 6,
+              top: PLOT_Y + (PLOT_H / 4) * i - 11,
+              width: AXIS_W - 8,
+              textAlign: 'right',
+              fontFamily: 'Helvetica, Arial, sans-serif',
+              fontSize: 20,
+              fontWeight: 600,
+              color: G.mid,
+            }}
+          >
+            {t}
+          </div>
+        ))}
+
+        <div style={{ position: 'absolute', left: PLOT_X, top: PLOT_Y, width: PLOT_W, height: PLOT_H }}>
+          {/* 网格 */}
+          {[0, 1, 2, 3, 4].map((i) => (
+            <div key={`h${i}`} style={{ position: 'absolute', left: 0, right: 0, top: (PLOT_H / 4) * i, height: 2, background: G.line, opacity: 0.7 }} />
+          ))}
+          {[0, 1, 2, 3, 4, 5, 6].map((i) => (
+            <div key={`v${i}`} style={{ position: 'absolute', top: 0, bottom: 0, left: (PLOT_W / 6) * i, width: 2, background: G.line, opacity: 0.45 }} />
+          ))}
+
+          <svg width={PLOT_W} height={PLOT_H} style={{ position: 'absolute', inset: 0, overflow: 'visible' }}>
+            <polyline points={pts.join(' ')} fill="none" stroke={G.ink} strokeWidth={5} strokeLinejoin="round" strokeLinecap="round" />
+            {!frozen && glowOp > 0 && (
+              <polyline
+                points={tailPts.join(' ')}
+                fill="none"
+                stroke="#6a6a68"
+                strokeWidth={9}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                opacity={0.55 * glowOp}
+                style={{ filter: 'blur(2px)' }}
+              />
+            )}
+            {/* 写入点亮点（1.5×） */}
+            {!frozen && glowOp > 0 && (
+              <>
+                <circle cx={PLOT_W} cy={headY} r={24} fill={spikeK > 0.15 ? AMBER : '#8f8f8d'} opacity={0.35 * glowOp} style={{ filter: 'blur(5px)' }} />
+                <circle cx={PLOT_W} cy={headY} r={10.5} fill={dotColor} opacity={glowOp} />
+              </>
+            )}
+          </svg>
+        </div>
+
+        {/* x 轴真时间刻度 */}
+        <div style={{ position: 'absolute', left: PLOT_X, top: PLOT_Y + PLOT_H + 14, width: PLOT_W }}>
+          {X_TICKS.map((t, i) => (
+            <div
+              key={`xt${i}`}
+              style={{
+                position: 'absolute',
+                left: (PLOT_W / 6) * i - 40,
+                width: 80,
+                textAlign: 'center',
+                fontFamily: 'Helvetica, Arial, sans-serif',
+                fontSize: 19,
+                fontWeight: 600,
+                color: G.mid,
+              }}
+            >
+              {t}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};