hyper-animator-codex 0.7.0 → 0.8.0

package/skills/hyper-animator-codex/references/shotcraft/source/demos/light-play-moves/HalationBloom.tsx

@@ -0,0 +1,139 @@
+// halation-bloom —— 高光晕染
+// 深灰底大白字 "10x" crash-zoom 急停入场（2.4→1，7f in-quad + 2f 回弹）。
+// 撞停帧起：底层复制文字（blur+提亮的白色晕层）猛涨一圈（scale 1→1.3，6f out-cubic 扩散），
+// 再 20f 线性回落到 0.35 驻留柔晕（扩散/消散解耦判例），随后 15f 缓收到 0.22 稳态。
+// 深底白字：白底上提亮不可见判例。收尾真静止 ≥40f。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+
+const BG = '#2a2a28';
+const WHITE = '#f7f7f5';
+const MID = '#8f8f8d';
+
+// —— 时间轴（30fps）——
+const ZOOM_START = 8; // 入场起始
+const IMPACT = 15; // 撞停帧（7f 急速缩入）
+const REBOUND_END = 17; // 2f 回弹
+const POP_END = IMPACT + 6; // 晕层猛涨 6f → f21
+const FALL_END = POP_END + 20; // 20f 线性回落 → f41
+const SETTLE_END = FALL_END + 15; // 15f 缓收 → f56，此后全静止
+// 总时长 145f → 静止 89f ≥ 40f
+
+const TextBlock: React.FC<{ color: string }> = ({ color }) => (
+  <div
+    style={{
+      fontFamily: 'Helvetica, Arial, sans-serif',
+      fontSize: 260,
+      fontWeight: 800,
+      color,
+      letterSpacing: '-0.02em',
+      lineHeight: 1,
+      whiteSpace: 'nowrap',
+    }}
+  >
+    10x
+  </div>
+);
+
+export const HalationBloom: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // —— crash-zoom 入场：scale 2.4 → 0.94（7f in-quad 加速撞停）→ 1（2f 回弹）——
+  const zoomIn = interpolate(frame, [ZOOM_START, IMPACT], [2.4, 0.94], {
+    easing: Easing.in(Easing.quad),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const rebound = interpolate(frame, [IMPACT, REBOUND_END], [0.94, 1], {
+    easing: Easing.out(Easing.quad),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const textScale = frame < IMPACT ? zoomIn : rebound;
+  const textOpacity = interpolate(frame, [ZOOM_START, ZOOM_START + 3], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // —— 晕层：撞停帧起条件挂载 ——
+  // 扩散（scale）：out-cubic，6f 猛涨 1 → 1.3
+  const bloomScale = interpolate(frame, [IMPACT, POP_END], [1, 1.3], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  // 消散（opacity）：与扩散解耦——猛涨段保持全亮，随后 20f 线性回落到 0.35
+  const bloomFall = interpolate(frame, [POP_END, FALL_END], [1, 0.35], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  // 驻留晕 15f 缓收到 0.22 稳态
+  const bloomSettle = interpolate(frame, [FALL_END, SETTLE_END], [0.35, 0.22], {
+    easing: Easing.out(Easing.quad),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const bloomOpacity = frame < FALL_END ? bloomFall : bloomSettle;
+
+  return (
+    <div
+      style={{
+        width: 1920,
+        height: 1080,
+        background: BG,
+        position: 'relative',
+        overflow: 'hidden',
+      }}
+    >
+      {/* 小标签，全程静态 */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 110,
+          width: '100%',
+          textAlign: 'center',
+          fontFamily: 'Helvetica, Arial, sans-serif',
+          fontSize: 30,
+          fontWeight: 700,
+          letterSpacing: '0.35em',
+          color: MID,
+        }}
+      >
+        HALATION BLOOM
+      </div>
+
+      {/* 晕层：文字复制底层，blur + 提亮，撞停帧起条件挂载 */}
+      {frame >= IMPACT && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            transform: `scale(${bloomScale})`,
+            opacity: bloomOpacity,
+            filter: 'blur(22px) brightness(1.8)',
+          }}
+        >
+          <TextBlock color={WHITE} />
+        </div>
+      )}
+
+      {/* 本体文字：crash-zoom 急停 */}
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          transform: `scale(${textScale})`,
+          opacity: textOpacity,
+        }}
+      >
+        <TextBlock color={WHITE} />
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/light-play-moves/SheenSweepRetry.tsx

@@ -0,0 +1,85 @@
+// sheen-sweep-retry —— 单点扫光（高标准重试）
+// 深墨大卡居中，一道 45° 高光带在 40–68f 从左外扫到右外，仅此一次。
+// 约束：单点(只扫主角卡)、圆角裁剪(overflow hidden)、扫前扫后完全静止。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G } from '../_fixtures/Fixtures';
+
+const CARD_W = 760;
+const CARD_H = 420;
+const SHEEN_W = CARD_W * 1.6; // 1216
+
+export const SheenSweepRetry: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 扫光：40–68f，从卡左外(-SHEEN_W)扫到卡右外(CARD_W)，inOut(cubic)，只一次
+  const sweepActive = frame >= 40 && frame <= 68;
+  const x = interpolate(frame, [40, 68], [-SHEEN_W, CARD_W], {
+    easing: Easing.inOut(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  return (
+    <div
+      style={{
+        width: 1920,
+        height: 1080,
+        background: G.bg,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontFamily: 'Helvetica, Arial, sans-serif',
+      }}
+    >
+      <div
+        style={{
+          width: CARD_W,
+          height: CARD_H,
+          background: G.side,
+          borderRadius: 24,
+          overflow: 'hidden', // 圆角裁剪：高光带被卡的圆角裁住
+          position: 'relative',
+          boxShadow: '0 12px 40px rgba(0,0,0,0.22)',
+          boxSizing: 'border-box',
+          padding: '64px 72px',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          gap: 28,
+        }}
+      >
+        <div
+          style={{
+            fontSize: 130,
+            fontWeight: 800,
+            color: '#f5f5f3',
+            letterSpacing: 2,
+            lineHeight: 1,
+          }}
+        >
+          PRO
+        </div>
+        <div style={{ height: 16, width: 380, background: G.sideBar, borderRadius: 8 }} />
+        <div style={{ height: 16, width: 260, background: G.sideBar, borderRadius: 8 }} />
+
+        {/* 高光带：条件挂载，扫完即摘罩，收尾真静止 */}
+        {sweepActive && (
+          <div
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: SHEEN_W,
+              height: CARD_H,
+              transform: `translateX(${x}px)`,
+              background:
+                'linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.32) 50%, transparent 58%)',
+              pointerEvents: 'none',
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/light-play-moves/SpotlightSweepReveal.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from 'remotion';
+
+// spotlight-sweep-reveal: 聚光灯摆动扫字
+// 暗场 #2a2a28，标题两行常驻 opacity 0.07；亮版同文本用 radial-gradient mask，
+// 光斑 x 按 sin 摆动扫两个来回（周期 ~55f），f110 后全字提亮定格，
+// 光斑/光锥线性消散并在 f>=125 条件卸载，125–160 真静止 35f。
+
+const BG = '#2a2a28';
+const INKW = '#f5f5f3';
+
+const CX = 960;
+const CY = 540;
+const AMP = 560; // 摆动幅度
+const PERIOD = 55; // 单个来回帧数
+const SWEEP_END = 110; // 两个来回结束
+const REVEAL_END = 125; // 提亮完成，之后真静止
+
+const textStyle: React.CSSProperties = {
+  fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
+  fontSize: 150,
+  fontWeight: 800,
+  lineHeight: 1.15,
+  letterSpacing: '0.04em',
+  color: INKW,
+  textAlign: 'center',
+  whiteSpace: 'pre',
+};
+
+const TitleText: React.FC = () => (
+  <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center' }}>
+    <div style={textStyle}>{'SPOTLIGHT\nON'}</div>
+  </AbsoluteFill>
+);
+
+export const SpotlightSweepReveal: React.FC = () => {
+  const f = useCurrentFrame();
+
+  // 光斑 x：sin 摆动，两个来回后停在中心
+  const sweepF = Math.min(f, SWEEP_END);
+  const x = CX + AMP * Math.sin((2 * Math.PI * sweepF) / PERIOD);
+
+  // 全字提亮（扩散感 out-cubic）
+  const brighten = interpolate(f, [SWEEP_END, REVEAL_END], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+  // 光斑/光锥消散（线性）
+  const fadeOut = interpolate(f, [SWEEP_END, REVEAL_END], [1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const sweepAlive = f < REVEAL_END; // 条件卸载，保证末段真静止
+
+  const maskGrad = `radial-gradient(circle 380px at ${x}px ${CY}px, rgba(0,0,0,1) 0%, rgba(0,0,0,0.95) 45%, rgba(0,0,0,0) 100%)`;
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: BG }}>
+      {/* 暗版文字常驻 */}
+      <AbsoluteFill style={{ opacity: 0.07 }}>
+        <TitleText />
+      </AbsoluteFill>
+
+      {sweepAlive && (
+        <>
+          {/* 光锥：从顶部收拢到光斑 */}
+          <AbsoluteFill
+            style={{
+              opacity: fadeOut,
+              clipPath: `polygon(${CX - 70}px -40px, ${CX + 70}px -40px, ${x + 420}px ${CY + 230}px, ${x - 420}px ${CY + 230}px)`,
+              background:
+                'linear-gradient(to bottom, rgba(245,245,243,0.16), rgba(245,245,243,0.03) 85%, rgba(245,245,243,0) 100%)',
+            }}
+          />
+          {/* 落在暗墙上的柔光斑 */}
+          <AbsoluteFill
+            style={{
+              opacity: fadeOut,
+              background: `radial-gradient(circle 460px at ${x}px ${CY}px, rgba(245,245,243,0.22) 0%, rgba(245,245,243,0.08) 55%, rgba(245,245,243,0) 100%)`,
+            }}
+          />
+          {/* 亮版文字，按帧移动的 radial mask */}
+          <AbsoluteFill
+            style={{
+              opacity: fadeOut === 1 ? 1 : Math.max(fadeOut, 0),
+              WebkitMaskImage: maskGrad,
+              maskImage: maskGrad,
+            }}
+          >
+            <TitleText />
+          </AbsoluteFill>
+        </>
+      )}
+
+      {/* 全亮定格层 */}
+      <AbsoluteFill style={{ opacity: brighten }}>
+        <TitleText />
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/line-boil/LineBoil.tsx

@@ -0,0 +1,140 @@
+// 线条沸腾（line-boil）——手绘动画 line boil 质感：静止线稿在"沸腾段"
+// 边缘逐帧微颤，像手绘逐帧描线的抖动。SVG filter feTurbulence(baseFrequency
+// 0.015, numOctaves 2, seed = Math.floor(f/3) 每 3 帧阶梯换) + feDisplacementMap
+// scale=8（原案 3–6 已按可感性加码）作用于大标题 "ALIVE" 与描边卡整层。
+// 结构靠"对比"可感：先静止（干净版）→ 沸腾 → 摘罩回静止；判例：feTurbulence
+// 收尾必须整个 filter 移除（沸腾段外根本不渲染 filter 与 SVG def），
+// 105f 起逐帧完全相同，真静止 ≥35f。
+// 关键帧：0–35 完全静止(boil off) → 35–105 沸腾(boil on, seed 每 3 帧一换)
+// → 105 摘罩 → 105–140 真静止(boil off)。
+import React from 'react';
+import { useCurrentFrame, interpolate } from 'remotion';
+import { G, TitleBlock } from '../_fixtures/Fixtures';
+
+const BOIL_START = 35;
+const BOIL_END = 105;
+const BOIL_SCALE = 8; // 原案 3–6 已按可感性加码；QA 看不出再加到 12
+
+const CornerTag: React.FC<{ text: string; opacity: number }> = ({ text, opacity }) => (
+  <div
+    style={{
+      position: 'absolute',
+      right: 72,
+      bottom: 56,
+      padding: '10px 22px',
+      border: `3px solid ${G.ink}`,
+      borderRadius: 999,
+      color: G.ink,
+      background: G.bg,
+      fontFamily: 'Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: 30,
+      letterSpacing: 2,
+      opacity,
+    }}
+  >
+    {text}
+  </div>
+);
+
+export const LineBoil: React.FC = () => {
+  const f = useCurrentFrame();
+  const boiling = f >= BOIL_START && f < BOIL_END;
+  // seed 每 3 帧阶梯换 → 8~10Hz 的手绘颤动感；帧确定，无随机源
+  const seed = Math.floor(f / 3);
+
+  // 角标：boil on 只在沸腾段淡入淡出；boil off 与之互补。
+  // 全部过渡在 105f 前完成 → 105–140 逐帧完全相同
+  const onOp = interpolate(f, [35, 40, 100, 105], [0, 1, 1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const offOp = 1 - onOp;
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      {/* 沸腾段才渲染 filter 定义——摘罩即整个 SVG def 消失，收尾天然真静止 */}
+      {boiling && (
+        <svg width={0} height={0} style={{ position: 'absolute' }}>
+          <defs>
+            <filter id="boil" x="-15%" y="-15%" width="130%" height="130%">
+              <feTurbulence
+                type="fractalNoise"
+                baseFrequency={0.015}
+                numOctaves={2}
+                seed={seed}
+                result="noise"
+              />
+              <feDisplacementMap
+                in="SourceGraphic"
+                in2="noise"
+                scale={BOIL_SCALE}
+                xChannelSelector="R"
+                yChannelSelector="G"
+              />
+            </filter>
+          </defs>
+        </svg>
+      )}
+
+      {/* 手法名标签：不入滤镜层，作为静止参照物 */}
+      <div style={{ position: 'absolute', left: 120, top: 96 }}>
+        <TitleBlock text="LINE BOIL" size={54} />
+      </div>
+
+      {/* 被沸腾的整层：大标题 + 描边卡 */}
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 56,
+          filter: boiling ? 'url(#boil)' : undefined,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: 'Helvetica, Arial, sans-serif',
+            fontWeight: 800,
+            fontSize: 170,
+            color: G.ink,
+            letterSpacing: 4,
+            lineHeight: 1,
+          }}
+        >
+          ALIVE
+        </div>
+        {/* 描边卡：透明底 3px ink 描边 520×300 圆角框 + 几条灰线 */}
+        <div
+          style={{
+            width: 520,
+            height: 300,
+            border: `3px solid ${G.ink}`,
+            borderRadius: 20,
+            boxSizing: 'border-box',
+            padding: '36px 40px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 26,
+          }}
+        >
+          <div style={{ height: 16, width: '62%', background: G.mid, borderRadius: 8 }} />
+          <div style={{ height: 12, width: '88%', background: G.bar, borderRadius: 6 }} />
+          <div style={{ height: 12, width: '74%', background: G.bar, borderRadius: 6 }} />
+          <div style={{ height: 12, width: '81%', background: G.bar, borderRadius: 6 }} />
+          <div style={{ marginTop: 'auto', display: 'flex', gap: 12, alignItems: 'center' }}>
+            <div style={{ width: 30, height: 30, borderRadius: 15, border: `3px solid ${G.ink}`, boxSizing: 'border-box' }} />
+            <div style={{ height: 12, width: 120, background: G.mid, borderRadius: 6 }} />
+          </div>
+        </div>
+      </div>
+
+      {/* 状态角标：沸腾段 boil on，静止段 boil off */}
+      <CornerTag text="boil on" opacity={onOp} />
+      <CornerTag text="boil off" opacity={offOp} />
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/line-carry-transition/LineCarryTransition.tsx

@@ -0,0 +1,151 @@
+// line-carry-transition｜线条接力横移转场（Catch Me If You Can 图形接力）
+// 世界宽 3840（A 左半 / B 右半）。0–24f 卡 A 底部 6px ink 进度条走满；
+// 24–34f 进度条末端延伸成横线冲出卡右缘；34–94f 镜头整体左移 1920px
+// （Easing.inOut(cubic)，60f），线与镜头同速延伸，笔头始终在画面偏右；
+// 94–112f 线拐直角围出 560×330 卡框（一条 path 全程 evolve，dashoffset 生长）；
+// 112–124f 框闭合后 B 卡内容淡入 12f。124–160f 真静止 36f ≥ 35f。
+// 帧确定，无随机；笔头墨点 118f 起条件卸载（摘罩判例）。
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, Card, TitleBlock } from '../_fixtures/Fixtures';
+
+// ---- 世界几何（一条折线：进度条 + 横线 + 直角 + 矩形框）----
+// M 400,705 → 2600,705（进度 560 + 冲出 1640）→ 上 2600,375 → 右 3160,375
+// → 下 3160,705 → 左回 2600,705 闭合。总长 2200+330+560+330+560 = 3980。
+const PATH = 'M 400 705 L 2600 705 L 2600 375 L 3160 375 L 3160 705 L 2600 705';
+const SEGS: Array<[number, number, number, number, number]> = [
+  [400, 705, 2600, 705, 2200],
+  [2600, 705, 2600, 375, 330],
+  [2600, 375, 3160, 375, 560],
+  [3160, 375, 3160, 705, 330],
+  [3160, 705, 2600, 705, 560],
+];
+const TOTAL = 3980;
+
+// 笔头坐标：按已画长度沿折线取点
+const tipAt = (drawn: number): [number, number] => {
+  let d = Math.max(0, Math.min(drawn, TOTAL));
+  for (const [x1, y1, x2, y2, len] of SEGS) {
+    if (d <= len) {
+      const t = d / len;
+      return [x1 + (x2 - x1) * t, y1 + (y2 - y1) * t];
+    }
+    d -= len;
+  }
+  return [2600, 705];
+};
+
+export const LineCarryTransition: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 镜头：34–94f 左移 1920px，inOut cubic
+  const cam = interpolate(frame, [34, 94], [0, 1920], {
+    easing: Easing.inOut(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // 已画长度：三段接力（进度条 → 冲出 → 与镜头同速 → 收框）
+  let drawn: number;
+  if (frame < 24) {
+    drawn = interpolate(frame, [0, 24], [0, 560], {
+      easing: Easing.out(Easing.cubic),
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp',
+    });
+  } else if (frame < 34) {
+    drawn = interpolate(frame, [24, 34], [560, 1100], {
+      extrapolateRight: 'clamp',
+    });
+  } else if (frame < 94) {
+    drawn = 1100 + cam; // 与镜头同速延伸，笔头稳在画面偏右
+  } else {
+    drawn = interpolate(frame, [94, 112], [3020, TOTAL], {
+      easing: Easing.out(Easing.cubic),
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp',
+    });
+  }
+
+  // B 卡内容：框闭合(112f)后淡入 12f
+  const contentOpacity = interpolate(frame, [112, 124], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // 笔头墨点：全程随笔走，112–118f 线性消散，118f 起条件卸载
+  const tipMounted = frame < 118;
+  const tipOpacity = interpolate(frame, [112, 118], [1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const [tx, ty] = tipAt(drawn);
+
+  return (
+    <AbsoluteFill style={{ background: G.bg, overflow: 'hidden' }}>
+      {/* 世界容器：3840 宽，整体横移 = 镜头跟线走 */}
+      <div
+        style={{
+          position: 'absolute',
+          width: 3840,
+          height: 1080,
+          transform: `translateX(${-cam}px)`,
+        }}
+      >
+        {/* B 半世界底色略浅，卖出"新世界" */}
+        <div style={{ position: 'absolute', left: 1920, top: 0, width: 1920, height: 1080, background: G.panel }} />
+
+        {/* 场景 A：标题 + 卡 + 进度条轨道（ink 填充即 path 本体） */}
+        <div style={{ position: 'absolute', left: 400, top: 250 }}>
+          <TitleBlock text="Scene A" size={56} />
+        </div>
+        <Card w={560} h={330} seed={2} style={{ position: 'absolute', left: 400, top: 350 }} />
+        <div style={{ position: 'absolute', left: 400, top: 702, width: 560, height: 6, borderRadius: 3, background: G.line }} />
+
+        {/* 一条线全程 evolve：dasharray/dashoffset 生长 */}
+        <svg width={3840} height={1080} style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
+          <path
+            d={PATH}
+            fill="none"
+            stroke={G.ink}
+            strokeWidth={6}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeDasharray={TOTAL}
+            strokeDashoffset={TOTAL - drawn}
+          />
+          {tipMounted && <circle cx={tx} cy={ty} r={11} fill={G.ink} opacity={tipOpacity} />}
+        </svg>
+
+        {/* 场景 B：框(2600,375–3160,705)由线画成，内容淡入 */}
+        <div
+          style={{
+            position: 'absolute',
+            left: 2600,
+            top: 375,
+            width: 560,
+            height: 330,
+            boxSizing: 'border-box',
+            padding: 26,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 14,
+            opacity: contentOpacity,
+          }}
+        >
+          <div style={{ height: 18, width: '58%', background: G.bar, borderRadius: 9 }} />
+          <div style={{ height: 11, width: '86%', background: G.line, borderRadius: 5 }} />
+          <div style={{ height: 11, width: '72%', background: G.line, borderRadius: 5 }} />
+          <div style={{ height: 11, width: '64%', background: G.line, borderRadius: 5 }} />
+          <div style={{ marginTop: 'auto', display: 'flex', gap: 10, alignItems: 'center' }}>
+            <div style={{ width: 30, height: 30, borderRadius: 15, background: G.mid }} />
+            <div style={{ height: 11, width: 90, background: G.line, borderRadius: 5 }} />
+          </div>
+        </div>
+        <div style={{ position: 'absolute', left: 2600, top: 275, opacity: contentOpacity }}>
+          <TitleBlock text="Scene B" size={56} />
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};