hyper-animator-codex 0.7.0 → 0.8.0

package/skills/hyper-animator-codex/references/shotcraft/source/demos/overhead-camera-moves/OverheadTabletopDrop.tsx

@@ -0,0 +1,129 @@
+// overhead-tabletop-drop｜上帝视角桌面滑降
+// perspective(1600px) 内三张"页面卡"rotateX(62°) 平躺成桌面卡阵。
+// 0–55f 相机横向滑过（只动 translateX，缓入缓出）；55–85f 骤降扎入：
+// rotateX 62→0 + 世界 scale 1→2.0（2% 过冲）+ translateX -650→0 三者同跑，
+// 中间卡对位落成正视满屏 dashboard。全部动画 f=93 结束，收尾真静止 52f。
+// 卡片 996×560（spec 900→996，使 FakeDashboard 0.5185 缩放严丝合缝、
+// 落版 16:9 精确对位），间距 140px。
+import React from 'react';
+import { AbsoluteFill, interpolate, useCurrentFrame, Easing } from 'remotion';
+import { FakeDashboard, Card, G } from '../_fixtures/Fixtures';
+
+const CARD_W = 996;
+const CARD_H = 560;
+const GAP = 140;
+const PITCH = CARD_W + GAP; // 1136
+const INNER = CARD_H / 1080; // 0.5185：FakeDashboard 缩到卡内正好铺满
+
+const PAN_END = 55;
+const DROP_END = 85;
+
+// 单张"页面卡"：白底圆角卡，内容按 INNER 缩放塞满
+const PageCard: React.FC<{ x: number; children: React.ReactNode }> = ({ x, children }) => (
+  <div
+    style={{
+      position: 'absolute',
+      left: x - CARD_W / 2,
+      top: -CARD_H / 2,
+      width: CARD_W,
+      height: CARD_H,
+      background: G.card,
+      border: `2px solid ${G.border}`,
+      borderRadius: 14,
+      overflow: 'hidden',
+      boxSizing: 'border-box',
+      boxShadow: '0 24px 48px rgba(0,0,0,0.22)',
+      backfaceVisibility: 'hidden',
+      transform: 'translateZ(4px)',
+    }}
+  >
+    <div style={{ width: 1920, height: 1080, transform: `scale(${INNER})`, transformOrigin: '0 0' }}>
+      {children}
+    </div>
+  </div>
+);
+
+export const OverheadTabletopDrop: React.FC = () => {
+  const f = useCurrentFrame();
+
+  // 0–55f 横滑：只动 translateX，缓入缓出
+  const panX = interpolate(f, [0, PAN_END], [700, -650], {
+    easing: Easing.inOut(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // 55–85f 骤降：角度 / 缩放 / 位移三者同跑，out-cubic + 2% 过冲
+  const drop = interpolate(f, [PAN_END, DROP_END], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const rotX = interpolate(f, [PAN_END, DROP_END, DROP_END + 4, DROP_END + 8], [62, -1.8, 0.6, 0], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const scale = interpolate(f, [PAN_END, DROP_END, DROP_END + 7], [1, 2.04, 2.0], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const dropX = interpolate(drop, [0, 1], [panX, 0]); // drop 段把 -650 收回 0
+
+  const tx = f <= PAN_END ? panX : dropX;
+
+  return (
+    <AbsoluteFill style={{ background: G.bg, overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', inset: 0, perspective: 1600, perspectiveOrigin: '50% 42%' }}>
+        {/* 世界原点 = 屏心；先 in-plane scale，再 rotateX，最后 translateX */}
+        <div
+          style={{
+            position: 'absolute',
+            left: '50%',
+            top: '50%',
+            width: 0,
+            height: 0,
+            transformStyle: 'preserve-3d',
+            transform: `translateX(${tx}px) rotateX(${rotX}deg) scale(${scale})`,
+          }}
+        >
+          {/* 桌面：浅灰底 + 网格线，给横滑段提供运动参照 */}
+          <div
+            style={{
+              position: 'absolute',
+              left: -2800,
+              top: -760,
+              width: 5600,
+              height: 1520,
+              background: '#e6e6e4',
+              backgroundImage: `repeating-linear-gradient(90deg, ${G.line} 0px, ${G.line} 2px, transparent 2px, transparent 160px), repeating-linear-gradient(0deg, ${G.line} 0px, ${G.line} 2px, transparent 2px, transparent 160px)`,
+              backfaceVisibility: 'hidden',
+            }}
+          />
+          <PageCard x={-PITCH}>
+            <FakeDashboard variant="B" />
+          </PageCard>
+          {/* 目标页：落版满屏 */}
+          <PageCard x={0}>
+            <FakeDashboard variant="A" />
+          </PageCard>
+          <PageCard x={PITCH}>
+            <div
+              style={{
+                width: 1920,
+                height: 1080,
+                background: G.panel,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <Card w={760} h={520} seed={4} />
+            </div>
+          </PageCard>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/overhead-camera-moves/TiltReveal.tsx

@@ -0,0 +1,55 @@
+// tilt-reveal｜俯仰揭示
+// 开场俯视 dashboard 顶部（rotateX 平躺、只露顶栏），~43f 机位抬头回正，
+// 内容一排排涌入视野。out-cubic + 末端轻微过冲回正，落定真静止 ≥35f。
+import React from 'react';
+import { AbsoluteFill, interpolate, useCurrentFrame, Easing } from 'remotion';
+import { FakeDashboard, G } from '../_fixtures/Fixtures';
+
+const HOLD = 25; // 俯角定格
+const MOVE = 43; // 主抬升
+// 过冲：-55° → +2.6° → -0.9° → 0°，全部动画在 f=76 结束（145-76=69f 真静止）
+
+export const TiltReveal: React.FC = () => {
+  const f = useCurrentFrame();
+
+  const rotX = interpolate(
+    f,
+    [HOLD, HOLD + MOVE, HOLD + MOVE + 4, HOLD + MOVE + 8],
+    [-80, 2.6, -0.9, 0],
+    { easing: Easing.out(Easing.cubic), extrapolateLeft: 'clamp', extrapolateRight: 'clamp' },
+  );
+
+  const p = interpolate(f, [HOLD, HOLD + MOVE], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const scale = interpolate(p, [0, 1], [3.2, 1]);
+  const ty = interpolate(p, [0, 1], [200, 0]);
+  const persp = interpolate(p, [0, 1], [600, 1200]);
+  const perspY = interpolate(p, [0, 1], [5, 40]);
+
+  return (
+    <AbsoluteFill style={{ background: G.bg, overflow: 'hidden' }}>
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          perspective: persp,
+          perspectiveOrigin: `50% ${perspY}%`,
+        }}
+      >
+        <div
+          style={{
+            width: 1920,
+            height: 1080,
+            transformOrigin: '50% 0%', // 画面上缘
+            transform: `translateY(${ty}px) scale(${scale}) rotateX(${rotX}deg)`,
+          }}
+        >
+          <FakeDashboard variant="A" />
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/page-turn-transitions/BarnDoorSplit.tsx

@@ -0,0 +1,138 @@
+// 对开门裂幕（barn-door-split-reveal）——剪映"开门式"转场。
+// FakeDashboard A 从画面正中垂直裂成左右两半：两个 960×1080 overflow:hidden
+// 容器各装一份完整 A（右半内层 translateX(-960) 对位拼合），同时向外加速滑
+// 出画外，露出底层 FakeDashboard B 从 scale 1.06 轻推到 1.0 迎上来。
+// 裂缝各自内边缘 2px G.ink 亮线 + 8px 投影强调"撕开"。
+// 关键帧：0–30 静止展示 A（18–22 / 25–29 中缝细线两次闪现预告裂点）→
+// 30–50 两半各 translateX ∓980（Easing.in cubic 加速滑出）→
+// 30–55 底层 B scale 1.06→1.0（out cubic）→ 55–130 全静止（75f）。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, FakeDashboard, TitleBlock } from '../_fixtures/Fixtures';
+
+export const BarnDoorSplit: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 两半外滑位移：30–50f，0 → 980px，加速离场
+  const slide = interpolate(frame, [30, 50], [0, 980], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.in(Easing.cubic),
+  });
+
+  // 底层 B：30–55f 从 1.06 轻推到 1.0 迎上来
+  const bScale = interpolate(frame, [30, 55], [1.06, 1.0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+
+  // 裂前预告：中缝细线两次闪现（帧确定的开关，无随机）
+  const crackFlash =
+    (frame >= 18 && frame < 22) || (frame >= 25 && frame < 29);
+  // 裂开后内边缘亮线 + 阴影常驻（随门一起滑出画外）
+  const tornEdge = frame >= 30;
+
+  const edgeLine = (side: 'left' | 'right'): React.CSSProperties => ({
+    position: 'absolute',
+    top: 0,
+    [side]: 0,
+    width: 3,
+    height: 1080,
+    background: G.ink,
+    boxShadow:
+      side === 'right'
+        ? '-8px 0 14px rgba(0,0,0,0.4)'
+        : '8px 0 14px rgba(0,0,0,0.4)',
+  });
+
+  return (
+    <div
+      style={{
+        width: 1920,
+        height: 1080,
+        background: G.bg,
+        position: 'relative',
+        overflow: 'hidden',
+      }}
+    >
+      {/* 底层 FakeDashboard B：scale 1.06 → 1.0 迎上来 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          width: 1920,
+          height: 1080,
+          transform: `scale(${bScale})`,
+          transformOrigin: '50% 50%',
+        }}
+      >
+        <FakeDashboard variant="B" />
+      </div>
+
+      {/* 左门：960×1080 视口，装完整 A 的左半 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          width: 960,
+          height: 1080,
+          overflow: 'hidden',
+          transform: `translateX(${-slide}px)`,
+        }}
+      >
+        <div style={{ position: 'absolute', left: 0, top: 0, width: 1920, height: 1080 }}>
+          <FakeDashboard variant="A" />
+        </div>
+        {tornEdge && <div style={edgeLine('right')} />}
+      </div>
+
+      {/* 右门：960×1080 视口，内层 translateX(-960) 对位拼合 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 960,
+          top: 0,
+          width: 960,
+          height: 1080,
+          overflow: 'hidden',
+          transform: `translateX(${slide}px)`,
+        }}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: 1920,
+            height: 1080,
+            transform: 'translateX(-960px)',
+          }}
+        >
+          <FakeDashboard variant="A" />
+        </div>
+        {tornEdge && <div style={edgeLine('left')} />}
+      </div>
+
+      {/* 裂点预告：中缝 2px 细线闪现两次 */}
+      {crackFlash && (
+        <div
+          style={{
+            position: 'absolute',
+            left: 959,
+            top: 0,
+            width: 2,
+            height: 1080,
+            background: G.ink,
+          }}
+        />
+      )}
+
+      <div style={{ position: 'absolute', left: 120, top: 96 }}>
+        <TitleBlock text="BARN DOOR SPLIT" size={54} />
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/page-turn-transitions/CubeRotate.tsx

@@ -0,0 +1,114 @@
+// 立方体空间翻转（cube-rotate）——cube transition 转场自实现。
+// FakeDashboard A / B 各缩放 0.82 居中，当立方体相邻两面：perspective 1400px，
+// 面宽 W=1920*0.82，两面各 rotateY(面角) translateZ(W/2)，场景整体先
+// translateZ(-W/2) 再 rotateY(θ)（把正面拉回 z=0，保证 hold 时精确 0.82 尺度）。
+// 旧面 A 转出画面 brightness 1→0.55 压暗，新面 B 从 +90° 侧转入 0.55→1 亮起；
+// 接缝两侧各一条竖向渐变阴影，随角度 sin(pπ) 加深再消失；转动中段叠 blur(1.5px)，
+// 落定摘掉（filter 条件挂载，保证收尾逐帧完全相同）。
+// 关键帧：0–30 静止展示 A → 30–68 θ 0→-90°（inOut cubic）翻转 → 68–140 B 真静止 72f。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, FakeDashboard, TitleBlock } from '../_fixtures/Fixtures';
+
+const S = 0.82;
+const W = 1920 * S; // 面宽 = 立方体棱长
+const H = 1080 * S;
+
+// 单个立方体面：W×H 视口内放缩放 0.82 的整幅 dashboard
+const Face: React.FC<{
+  variant: 'A' | 'B';
+  rot: number; // 面自身的 rotateY（A=0，B=90）
+  brightness: number;
+  seam: number; // 接缝阴影不透明度 0–1
+  seamSide: 'right' | 'left'; // 阴影贴在哪条竖边（即共享棱一侧）
+}> = ({ variant, rot, brightness, seam, seamSide }) => (
+  <div
+    style={{
+      position: 'absolute',
+      width: W,
+      height: H,
+      overflow: 'hidden',
+      backfaceVisibility: 'hidden',
+      transform: `rotateY(${rot}deg) translateZ(${W / 2}px)`,
+      filter: `brightness(${brightness})`,
+      background: G.bg,
+    }}
+  >
+    <div style={{ transform: `scale(${S})`, transformOrigin: '0 0' }}>
+      <FakeDashboard variant={variant} />
+    </div>
+    {seam > 0.01 && (
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          [seamSide]: 0,
+          width: 150,
+          height: H,
+          opacity: seam,
+          background:
+            seamSide === 'right'
+              ? 'linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.55))'
+              : 'linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.55))',
+        }}
+      />
+    )}
+  </div>
+);
+
+export const CubeRotate: React.FC = () => {
+  const frame = useCurrentFrame();
+  // 翻转进度：30–68f，inOut cubic；两端 clamp 保证 hold 段逐帧恒定
+  const p = interpolate(frame, [30, 68], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.inOut(Easing.cubic),
+  });
+  const theta = -90 * p;
+  const brightA = 1 - 0.45 * p; // 旧面转出压暗 1→0.55
+  const brightB = 0.55 + 0.45 * p; // 新面转入亮起 0.55→1
+  const mid = Math.sin(p * Math.PI); // 0→1→0，45° 时最深
+  const seam = mid * 0.9;
+  const blur = mid * 1.5;
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      {/* blur 外包一层：>0.02 才挂 filter，落定后收尾帧完全相同 */}
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          filter: blur > 0.02 ? `blur(${blur}px)` : undefined,
+        }}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            left: (1920 - W) / 2,
+            top: (1080 - H) / 2,
+            width: W,
+            height: H,
+            perspective: 1400,
+          }}
+        >
+          <div
+            style={{
+              position: 'absolute',
+              inset: 0,
+              transformStyle: 'preserve-3d',
+              transform: `translateZ(${-W / 2}px) rotateY(${theta}deg)`,
+            }}
+          >
+            {/* 面 A：正面出发，绕左而去；接缝棱在其右边 */}
+            <Face variant="A" rot={0} brightness={brightA} seam={seam} seamSide="right" />
+            {/* 面 B：从 +90° 侧面转进来；接缝棱在其左边 */}
+            <Face variant="B" rot={90} brightness={brightB} seam={seam} seamSide="left" />
+          </div>
+        </div>
+      </div>
+      <div style={{ position: 'absolute', left: 120, top: 60 }}>
+        <TitleBlock text="CUBE ROTATE" size={54} />
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/page-waterfall-wall/PageWaterfallWall.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import {
+  AbsoluteFill,
+  Img,
+  interpolate,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+} from 'remotion';
+import { VerticalTicker, TickerColumn } from './VerticalTicker';
+
+const BG = '#101014';
+
+const shot = (file: string) => (
+  <div
+    style={{
+      borderRadius: 16,
+      overflow: 'hidden',
+      boxShadow: '0 12px 40px rgba(0,0,0,0.45)',
+      background: '#fff',
+    }}
+  >
+    <Img src={staticFile(`textures/${file}`)} style={{ width: '100%', display: 'block' }} />
+  </div>
+);
+
+// 3 列差速反向（配方卡参数：loop 12/9/14s，中列反向）
+export const buildColumns = (loops: [number, number, number]): TickerColumn[] => [
+  {
+    items: ['card1.png', 'card2.png', 'card3.png', 'card10.png'].map(shot),
+    durationInSeconds: loops[0],
+    direction: -1,
+  },
+  {
+    items: ['card4.png', 'card5.png', 'card6.png', 'projects-empty.png'].map(shot),
+    durationInSeconds: loops[1],
+    direction: 1,
+  },
+  {
+    items: ['card7.png', 'card8.png', 'card9.png', 'float-search.png'].map(shot),
+    durationInSeconds: loops[2],
+    direction: -1,
+  },
+];
+
+export const PageWaterfallWall: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { durationInFrames } = useVideoConfig();
+  // 镜头缓推寄生在外层，墙自身循环、镜头单向
+  const push = interpolate(frame, [0, durationInFrames], [1, 1.06]);
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: BG }}>
+      <AbsoluteFill style={{ transform: `scale(${push})` }}>
+        <VerticalTicker
+          columns={buildColumns([12, 9, 14])}
+          backgroundColor={BG}
+          columnWidth={560}
+          gap={30}
+        />
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};
+
+// 接缝自检用：短 loop（3s=90f）、无镜头推，f0 与 f90 应逐像素一致
+export const SeamTest: React.FC = () => (
+  <AbsoluteFill style={{ backgroundColor: BG }}>
+    <VerticalTicker
+      columns={buildColumns([3, 3, 3])}
+      backgroundColor={BG}
+      columnWidth={560}
+      gap={30}
+    />
+  </AbsoluteFill>
+);

package/skills/hyper-animator-codex/references/shotcraft/source/demos/page-waterfall-wall/VerticalTicker.tsx

@@ -0,0 +1,129 @@
+// origin: vibe-motion/skills remotion-3d-ticker assets/VerticalTicker.tsx
+//         (2026-07-13 扫描，2026-07-15 吸收；改动：items 泛化为 ReactNode、
+//          遮罩高度/透视角/scale/列宽/间距提为 props)
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, useVideoConfig } from 'remotion';
+
+export interface TickerColumn {
+  /** Column content — any ReactNode (screenshot-slice divs, <Img>, text cards…) */
+  items: React.ReactNode[];
+  /** Seconds for one full loop (one copy of items scrolling its own height) */
+  durationInSeconds: number;
+  /** -1 scrolls up, 1 scrolls down */
+  direction: -1 | 1;
+}
+
+export interface VerticalTickerProps {
+  columns: TickerColumn[];
+  /** Background color, also used by the top/bottom fade masks */
+  backgroundColor?: string;
+  /** Height of each fade mask in px */
+  maskHeight?: number;
+  /** rotateX tilt of the whole wall, degrees */
+  tiltDeg?: number;
+  /** CSS perspective distance in px */
+  perspective?: number;
+  /** Overall scale of the tilted wall (compensates perspective shrink) */
+  scale?: number;
+  /** Column width in px */
+  columnWidth?: number;
+  /** Gap between columns and between items within a column, px */
+  gap?: number;
+}
+
+/**
+ * 3D 透视多列无限纵向滚动墙。每列 [...items, ...items] 翻倍 +
+ * progress 取模 translateY 0→-50%：前半段恰好滚出视口时归零，
+ * 后半段与前半段像素级一致，循环点不可见。
+ * 接缝无痕的前提：-50% 必须恰等于单副本周期（内容高 + n 个 gap）。
+ * 源实现用 flex gap（翻倍后只有 2n-1 个 gap）会差 gap/2 px 跳一下，
+ * 这里改为每项 marginBottom = gap，容器高恰为周期两倍。
+ */
+export const VerticalTicker: React.FC<VerticalTickerProps> = ({
+  columns,
+  backgroundColor = '#000',
+  maskHeight = 200,
+  tiltDeg = 20,
+  perspective = 1000,
+  scale = 1.2,
+  columnWidth = 400,
+  gap = 30,
+}) => {
+  return (
+    <AbsoluteFill style={{ backgroundColor, overflow: 'hidden' }}>
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          gap,
+          transform: `perspective(${perspective}px) rotateX(${tiltDeg}deg) scale(${scale})`,
+          transformOrigin: 'center center',
+        }}
+      >
+        {columns.map((col, idx) => (
+          <Column key={idx} {...col} width={columnWidth} gap={gap} />
+        ))}
+      </div>
+      {/* Fade masks sit above the wall so rows enter/exit softly */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          height: maskHeight,
+          background: `linear-gradient(to bottom, ${backgroundColor} 0%, transparent 100%)`,
+          zIndex: 10,
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: maskHeight,
+          background: `linear-gradient(to top, ${backgroundColor} 0%, transparent 100%)`,
+          zIndex: 10,
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+const Column: React.FC<TickerColumn & { width: number; gap: number }> = ({
+  items,
+  durationInSeconds,
+  direction,
+  width,
+  gap,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const loopFrames = durationInSeconds * fps;
+  const progress = (frame % loopFrames) / loopFrames;
+  // up: 0 → -50%; down: -50% → 0（起点即偏移半程，首帧无空白）
+  const translateY = direction === -1 ? progress * -50 : -50 + progress * 50;
+
+  return (
+    <div style={{ width, height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          transform: `translateY(${translateY}%)`,
+          willChange: 'transform',
+        }}
+      >
+        {[...items, ...items].map((node, i) => (
+          <div key={i} style={{ marginBottom: gap }}>
+            {node}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};