remotion-3d-ticker

Remotion 3D 垂直滚动条

此技能提供一种可复用的架构模式和组件，用于在 Remotion 中创建无限循环、多列的 3D 滚动动画（常用于照片画廊、3D 照片滚动墙、技术栈展示或演职员表滚动）。

工作原理

通过 内容域复制和模运算，并结合 CSS 3D 变换，实现无限滚动的视觉效果：

1. 无限滚动的数学原理： 复制内容列表（[...items, ...items]）。根据帧速率和所需的循环时长，计算从 0 到 1 的 progress。将列从 0% 平移到 -50%（反向滚动时则从 -50% 平移到 0%）。由于内容已复制，位于 -50% 的帧与位于 0% 的帧完全相同，因此重置时可以实现无缝循环。
2. 3D 透视： 父级包装元素应用 perspective: 1000px、rotateX(20deg) 和 scale(1.2)。缩放至关重要，可确保倾斜后的顶部和底部边缘延伸到 2D 屏幕边界之外，防止背景空白区域露出。
3. 遮罩： 在顶部和底部绝对定位 CSS linear-gradient 覆盖层，并设置较高的 zIndex，使内容平滑渐隐至背景色。

如何使用此技能

当用户请求垂直滚动画廊或无限滚动条时：

1. 复制资源： 将位于 assets/VerticalTicker.tsx 的通用组件提供给用户，或复制到其项目的 components/animations 文件夹中。
2. 配置： 引导用户在 Remotion <Composition /> 中导入并渲染 <VerticalTicker /> 组件。
3. 调整数据： 该组件与数据类型无关。它接受任意图片 URL 数组或 React 节点作为列。你可以为每列指定不同的 durationInSeconds 和 direction（1 或 -1）以实现视差效果。

提供的资源

• assets/VerticalTicker.tsx：高度可复用、类型定义严格的 Remotion 组件，实现 3D 无限滚动模式。