Remotion 3D Vertical Ticker

How it works

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

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.