# remotion-3d-ticker

Builds looping 3D column scroll effects for Remotion videos. Useful for multi-lane photo feeds, credits, and parallax showcases.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 852 installs · ★ 1395
- Author: vibe-motion
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/vibe-motion/skills/tree/HEAD/remotion-3d-ticker/SKILL.md
- Updated: 2026-10-05
- HTML: https://affpapa.org/en/nevibecode/skills/remotion-3d-ticker

## What it does

This skill adds the typed `VerticalTicker.tsx` component to your Remotion project. The loop illusion relies on array duplication and frame-based math: columns translate vertically from `0%` to `-50%`. The frame at `-50%` matches the initial state exactly. The animation resets cleanly without visual jumps.

CSS 3D transforms handle depth with `perspective: 1000px` and `rotateX(20deg)`. The `scale(1.2)` factor is mandatory here. Without scaling, the tilted edges expose the empty canvas background. Gradient overlays positioned at the top and bottom hide outer boundaries by blending items into the background color.

The component accepts any array of React nodes or image URLs across multiple columns. Each column supports its own `durationInSeconds` and `direction` (set to 1 or -1). Varying these settings creates distinct vertical scrolling speeds across columns.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add vibe-motion/skills --skill remotion-3d-ticker -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/remotion-3d-ticker/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/remotion-3d-ticker/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add vibe-motion/skills --skill remotion-3d-ticker -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/remotion-3d-ticker/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add vibe-motion/skills --skill remotion-3d-ticker -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/remotion-3d-ticker/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install vibe-motion/skills remotion-3d-ticker
```

2. **Manually: put the files in place**
- File: `.github/skills/remotion-3d-ticker/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add vibe-motion/skills --skill remotion-3d-ticker -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/vibe-motion/skills --path remotion-3d-ticker
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/remotion-3d-ticker/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add vibe-motion/skills --skill remotion-3d-ticker -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/vibe-motion/skills/tree/HEAD/remotion-3d-ticker/SKILL.md

## When to use it
- build an infinite multi-column 3D photo wall in Remotion
- create vertical parallax motion with independent column speeds
- loop vertical ticker feeds without visible jump frames
- blend tilted 3D animation edges smoothly into the background

## Example prompts
- Add a 3D infinite vertical photo wall to my Remotion composition.
- Configure VerticalTicker with alternating column directions and parallax speeds.
- Create a tilted vertical scroll animation for tech stack logos.

## Similar
- [remotion-markup](https://affpapa.org/en/nevibecode/skills/remotion-dev-remotion-markup.md) — skill · 207700 installs
- [remotion-video-creation](https://affpapa.org/en/nevibecode/skills/remotion-video-creation.md) — skill · 4900 installs
- [remotion-video](https://affpapa.org/en/nevibecode/skills/remotion-video.md) — skill · 2600 installs
- [remotion-best-practices](https://affpapa.org/en/nevibecode/skills/vercel-labs-remotion-best-practices.md) — skill · 1500 installs
- [remotion-motion-graphics](https://affpapa.org/en/nevibecode/skills/remotion-motion-graphics.md) — skill · 1100 installs
- [create-remotion-geist](https://affpapa.org/en/nevibecode/skills/create-remotion-geist.md) — skill · 484 installs

From the same set: [vibe-motion/skills](https://affpapa.org/en/nevibecode/by/vibe-motion/skills.md) — 3 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md