AIKraft/AI/Войти
AIKraft/Skills/Remotion: 3D-тикер

Remotion: 3D-тикер

Creates infinite 3D vertical scrolling ticker animations in Remotion. Use when you need to build a parallax gallery, infinite image scroll, multi-column continuous vertical scrolling effect, or a 3D photo wall (3D照片滚动墙 / 3D相册瀑布流).

vibe-motion official Дизайн

Что делает навык

Навык предоставляет переиспользуемый архитектурный паттерн и компонент для создания бесконечных многоколоночных 3D-скроллящихся анимаций в Remotion. Он решает задачу визуализации параллакс-галерей, бесконечной прокрутки изображений или 3D-стен фото за счет дублирования контента и CSS 3D-трансформаций.

Когда применять

  • Создание параллакс-галереи с бесконечной вертикальной прокруткой
  • Формирование 3D-стены фото (3D相册瀑布流) с эффектом перспективы
  • Отображение многоколоночной непрерывной вертикальной прокрутки
  • Анимация технологического стека (tech-stack showcases) или титров
  • Создание бесконечной прокрутки изображений в 3D-пространстве

Как работает

  1. Скопировать компонент assets/VerticalTicker.tsx в папку components/animations проекта пользователя.
  2. Импортировать и отрендерить компонент <VerticalTicker /> внутри Remotion <Composition />.
  3. Подготовить данные: передать компоненту массив URL изображений или React-нод в качестве колонок.
  4. Настроить параметры: указать durationInSeconds и direction (1 или -1) для каждой колонки, чтобы реализовать параллакс.
  5. Использовать встроенную логику дублирования контента и модульной арифметики для создания бесшовного цикла.
  6. Применить CSS 3D-трансформации (perspective, rotateX, scale) и градиентные маски для корректного отображения и плавного затухания краев.

Примеры запросов агенту

Создай бесконечную 3D-галерею с параллакс-эффектом в Remotion, используя VerticalTicker.
Нужна анимация 3D-стены фото (3D相册瀑布流) с вертикальной прокруткой.
Реализуй многоколоночную непрерывную вертикальную прокрутку изображений с разной скоростью колонок.

Что понадобится

  • Remotion
  • Node.js (для работы с файловой системой и компонентами)

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «remotion-3d-ticker» из репозитория: # https://github.com/vibe-motion/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r remotion-3d-ticker/ ~/.claude/skills/remotion-3d-ticker/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.