Remotion 3D Vertical Ticker

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.

How it works

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

1. 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.
2. 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.
3. 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.

How to use this skill

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

1. Copy the asset: Provide or copy the generic component located at assets/VerticalTicker.tsx into their project's components/animations folder.
2. Configure: Guide the user to import and render the <VerticalTicker /> component within their Remotion <Composition />.
3. 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.

Provided Assets

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