remotion-3d-ticker

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Remotion 3D Vertical Ticker

Remotion 3D垂直滚动跑马灯

This skill provides a reusable architectural pattern and component for creating infinite, multi-column 3D scrolling animations (often used for photo galleries, 3D照片滚动墙, tech-stack showcases, or credit rolls) in Remotion.

该技能提供了可复用的架构模式与组件，用于在Remotion中创建无限多列3D滚动动画（常用于照片画廊、3D照片滚动墙、技术栈展示或片尾字幕滚动）。

How it works

工作原理

The infinite scrolling illusion is achieved using domain duplication and modular arithmetic, combined with CSS 3D transforms:

The Math of Infinity: We duplicate the content list (
```
[...items, ...items]
```
). We calculate a `progress` from 0 to 1 based on the frame rate and desired loop duration. We translate the column from `0%` to `-50%` (or `-50%` to `0%` for reverse). Because the content is duplicated, the frame at `-50%` looks identical to the frame at `0%`, creating a seamless loop when it resets.
3D Perspective: A parent wrapper applies `perspective: 1000px`, `rotateX(20deg)`, and `scale(1.2)`. The scale is crucial to ensure the tilted top and bottom edges stretch beyond the 2D screen bounds, preventing empty background bleeding.
Masking: CSS `linear-gradient` overlays are placed absolutely at the top and bottom with a high `zIndex` to smoothly fade the content into the background color.

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

无限滚动的数学原理： 我们复制内容列表（
```
[...items, ...items]
```
）。根据帧率和期望的循环时长计算出一个从0到1的
```
progress
```
值。将列从
```
0%
```
平移至
```
-50%
```
（反向滚动则从
```
-50%
```
到
```
0%
```
）。由于内容已复制，
```
-50%
```
位置的帧与
```
0%
```
位置的帧完全一致，重置时即可实现无缝循环。
3D透视效果： 父容器应用
```
perspective: 1000px
```
、
```
rotateX(20deg)
```
和
```
scale(1.2)
```
。缩放操作至关重要，可确保倾斜的上下边缘延伸至2D屏幕边界之外，避免背景空白区域露出。
遮罩处理： 在顶部和底部绝对定位CSS
```
linear-gradient
```
遮罩层，并设置较高的
```
zIndex
```
，使内容平滑融入背景色。

How to use this skill

如何使用该技能

When a user requests a vertical scrolling gallery or infinite ticker:

Copy the asset: Provide or copy the generic component located at
```
assets/VerticalTicker.tsx
```
into their project's components/animations folder.
Configure: Guide the user to import and render the
```
<VerticalTicker />
```
component within their Remotion
```
<Composition />
```
.
Adapt Data: The component is data-agnostic. It accepts any array of image URLs or React nodes as columns. You can specify different `durationInSeconds` and `direction` (1 or -1) per column to achieve parallax.

当用户需要垂直滚动画廊或无限跑马灯时：

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

Provided Assets

提供的资源

```
assets/VerticalTicker.tsx
```
: The highly reusable, strongly-typed Remotion component implementing the 3D infinite scroll pattern.

```
assets/VerticalTicker.tsx
```
：高度可复用、强类型的Remotion组件，实现了3D无限滚动模式。