mcpField
R
remotion-3d-ticker

remotion-3d-ticker

github.com/vibe-motionCreative & media1.4k869 installsUpdated 3w ago
Repository

About remotion-3d-ticker

A reusable Remotion component and pattern for infinite, multi-column 3D vertical scrolling animations. It is intended for galleries, showcase layouts, and credit rolls, using duplicated content and CSS 3D transforms to create looping motion.

Key features

  1. 01Infinite multi-column scrolling
  2. 02CSS 3D perspective transforms
  3. 03Top and bottom fade masks
  4. 04Per-column duration and direction
  5. 05Accepts image URLs or React nodes

Use cases

  1. 01Build a scrolling photo gallery
  2. 02Create a technology showcase
  3. 03Render a looping credit roll

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/vibe-motion/skills --skill remotion-3d-ticker

After installing, type/remotion-3d-tickerin Claude Code to confirm it loaded.

Bundled filesassets/VerticalTicker.tsx

Details

From the project README

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.

Comments

Markdown supported