# remotion-3d-ticker

Создаёт зацикленную трёхмерную вертикальную прокрутку для видео в Remotion. Помогает собирать многоколоночные фотостены и титры с параллаксом.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 852 установки · ★ 1395
- Автор: vibe-motion
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/vibe-motion/skills/tree/HEAD/remotion-3d-ticker/SKILL.md
- Обновлён: 2026-10-05
- HTML: https://affpapa.org/nevibecode/skills/remotion-3d-ticker

## Что делает

Скилл добавляет в проект готовый компонент `VerticalTicker.tsx` для сборки зацикленной вертикальной анимации. Непрерывное движение строится на дублировании переданного массива элементов и сдвиге колонок от `0%` до `-50%` по кадрам. На шаге `-50%` кадр полностью совпадает со стартовым. Цикл перезапускается незаметно для глаза.

Объём задаётся CSS-трансформациями родительского контейнера: углом наклона `rotateX(20deg)` и перспективой в `1000px`. Масштабирование `scale(1.2)` здесь обязательно. Без увеличения наклоненные границы колонок обнажают пустые поля фона видео. Сверху и снизу накладываются градиентные маски, плавно растворяющие карточки в цвет подложки.

Компонент принимает массив React-нод или ссылки на картинки. Каждой колонке можно задать свою длительность через `durationInSeconds` и направление `direction` со значением 1 или -1. Разные скорости колонок дают выразительный эффект глубины.

## Установка

### Claude Code (родная платформа)

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

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/remotion-3d-ticker/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/remotion-3d-ticker/

### Codex

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

2. **Вручную: положить файлы**
- Файл: `.agents/skills/remotion-3d-ticker/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

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

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/remotion-3d-ticker/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

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

2. **Вручную: положить файлы**
- Файл: `.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. **Командой платформы**
```bash
gemini skills install https://github.com/vibe-motion/skills --path remotion-3d-ticker
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/remotion-3d-ticker/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

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

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/vibe-motion/skills/tree/HEAD/remotion-3d-ticker/SKILL.md

## Когда брать
- собрать бесконечную 3D-фотостену из нескольких колонок в Remotion
- настроить вертикальный параллакс для карточек или титров
- замаскировать границы анимированной ленты градиентными оверлеями
- зациклить прокрутку React-элементов без визуальных скачков

## Примеры запросов агенту
- Добавь в композицию Remotion бесконечную 3D-ленту с тремя колонками изображений.
- Настрой компонент VerticalTicker с разной скоростью колонок для эффекта параллакса.
- Сделай зацикленный вертикальный скролл списка технологий с наклоном 20 градусов.

## Похожие
- [remotion-markup](https://affpapa.org/nevibecode/skills/remotion-dev-remotion-markup.md) — скилл · 207700 установок
- [remotion-video-creation](https://affpapa.org/nevibecode/skills/remotion-video-creation.md) — скилл · 4900 установок
- [remotion-video](https://affpapa.org/nevibecode/skills/remotion-video.md) — скилл · 2600 установок
- [remotion-best-practices](https://affpapa.org/nevibecode/skills/vercel-labs-remotion-best-practices.md) — скилл · 1500 установок
- [remotion-motion-graphics](https://affpapa.org/nevibecode/skills/remotion-motion-graphics.md) — скилл · 1100 установок
- [create-remotion-geist](https://affpapa.org/nevibecode/skills/create-remotion-geist.md) — скилл · 484 установки

Из того же набора: [vibe-motion/skills](https://affpapa.org/nevibecode/by/vibe-motion/skills.md) — 3 карточки

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md