remotion-3d-ticker — скилл для Claude Code: что делает
Создаёт зацикленную трёхмерную вертикальную прокрутку для видео в Remotion. Помогает собирать многоколоночные фотостены и титры с параллаксом.
npx skills add vibe-motion/skills --skill remotion-3d-ticker -a claude-codeЧто делает remotion-3d-ticker
Скилл добавляет в проект готовый компонент VerticalTicker.tsx для сборки зацикленной вертикальной анимации. Непрерывное движение строится на дублировании переданного массива элементов и сдвиге колонок от 0% до -50% по кадрам. На шаге -50% кадр полностью совпадает со стартовым. Цикл перезапускается незаметно для глаза.
Объём задаётся CSS-трансформациями родительского контейнера: углом наклона rotateX(20deg) и перспективой в 1000px. Масштабирование scale(1.2) здесь обязательно. Без увеличения наклоненные границы колонок обнажают пустые поля фона видео. Сверху и снизу накладываются градиентные маски, плавно растворяющие карточки в цвет подложки.
Компонент принимает массив React-нод или ссылки на картинки. Каждой колонке можно задать свою длительность через durationInSeconds и направление direction со значением 1 или -1. Разные скорости колонок дают выразительный эффект глубины.
Какие задачи решает
- собрать бесконечную 3D-фотостену из нескольких колонок в Remotion
- настроить вертикальный параллакс для карточек или титров
- замаскировать границы анимированной ленты градиентными оверлеями
- зациклить прокрутку React-элементов без визуальных скачков
Примеры запросов агенту
- Добавь в композицию Remotion бесконечную 3D-ленту с тремя колонками изображений.
- Настрой компонент VerticalTicker с разной скоростью колонок для эффекта параллакса.
- Сделай зацикленный вертикальный скролл списка технологий с наклоном 20 градусов.
Как установить remotion-3d-ticker
1Через Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill remotion-3d-ticker -a claude-code2Вручную: положить файлы
~/.claude/skills/remotion-3d-ticker/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/remotion-3d-ticker/
1Через Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill remotion-3d-ticker -a codex2Вручную: положить файлы
.agents/skills/remotion-3d-ticker/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill remotion-3d-ticker -a cursor2Вручную: положить файлы
.cursor/skills/remotion-3d-ticker/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install vibe-motion/skills remotion-3d-ticker2Вручную: положить файлы
.github/skills/remotion-3d-ticker/SKILL.md1Через Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill remotion-3d-ticker -a gemini-cli2Командой платформы
gemini skills install https://github.com/vibe-motion/skills --path remotion-3d-tickerВручную: положить файлы
.devin/skills/remotion-3d-ticker/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill remotion-3d-ticker -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о remotion-3d-ticker
Как установить remotion-3d-ticker в Claude Code?
Выполните команду npx skills add vibe-motion/skills --skill remotion-3d-ticker -a claude-code в терминале проекта.
Что делает remotion-3d-ticker?
Скилл добавляет компонент VerticalTicker.tsx, который анимирует непрерывную вертикальную прокрутку карточек или фото в 3D-перспективе внутри Remotion.
Зачем в компоненте используется масштаб 1.2?
Параметр scale(1.2) растягивает наклонённые 3D-колонки за границы экрана, иначе по краям кадра проступает пустой фон.
