vibe-motion/skills

Cria animações infinitas de ticker de rolagem vertical em 3D no Remotion. Use quando precisar construir uma galeria paralaxe, rolagem infinita de imagens, efeito de rolagem vertical contínua em várias colunas ou uma parede de fotos 3D (3D照片滚动墙 / 3D相册瀑布流).

O que é skills?

Este skill fornece um padrão arquitetural reutilizável e um componente para criar animações de rolagem 3D infinitas e com múltiplas colunas no Remotion, comumente usadas para galerias de fotos, paredes de fotos 3D, vitrines de pilha de tecnologia ou rolagens de créditos. A ilusão de rolagem infinita é alcançada através de duplicação de domínio e aritmética modular, combinadas com transformações CSS 3D, gerando um loop contínuo e sem costuras. O componente é agnóstico a dados, aceitando qualquer array de URLs de imagens ou nós React como colunas, e permite configurar duração e direção por coluna para efeitos de paralaxe. Ele suporta a plataforma Remotion e é altamente recomendado para desenvolvedores que desejam implementar efeitos de rolagem vertical 3D impressionantes e de alto desempenho em seus projetos de vídeo gerados por código.

Funciona com~Claude Code~Codex CLI~Cursor

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

Documentação

Ticker Vertical 3D no Remotion

Este skill fornece um padrão arquitetural reutilizável e um componente para criar animações de rolagem 3D infinitas e com múltiplas colunas (frequentemente usadas para galerias de fotos, 3D照片滚动墙, vitrines de pilha de tecnologia ou rolagens de créditos) no Remotion.

Como funciona

A ilusão de rolagem infinita é alcançada usando duplicação de domínio e aritmética modular, combinadas com transformações CSS 3D:

A Matemática do Infinito: Duplicamos a lista de conteúdo ([...items, ...items]). Calculamos um progress de 0 a 1 com base na taxa de quadros e na duração do loop desejada. Translacionamos a coluna de 0% para -50% (ou de -50% para 0% no sentido reverso). Como o conteúdo está duplicado, o quadro em -50% parece idêntico ao quadro em 0%, criando um loop contínuo quando é reiniciado.
Perspectiva 3D: Um wrapper pai aplica perspective: 1000px, rotateX(20deg) e scale(1.2). A escala é crucial para garantir que as bordas superior e inferior inclinadas se estendam além dos limites da tela 2D, evitando que o fundo vaze.
Mascaramento: Sobreposições CSS de linear-gradient são colocadas de forma absoluta no topo e na base com um zIndex alto para suavizar o desvanecimento do conteúdo na cor de fundo.

Como usar este skill

Quando um usuário solicitar uma galeria de rolagem vertical ou um ticker infinito:

Copie o ativo: Forneça ou copie o componente genérico localizado em assets/VerticalTicker.tsx para a pasta de componentes/animações do projeto.
Configure: Oriente o usuário a importar e renderizar o componente <VerticalTicker /> dentro de seu <Composition /> do Remotion.
Adapte os Dados: O componente é agnóstico a dados. Ele aceita qualquer array de URLs de imagens ou nós React como colunas. Você pode especificar diferentes durationInSeconds e direction (1 ou -1) por coluna para obter paralaxe.

Ativos Fornecidos

assets/VerticalTicker.tsx: O componente Remotion altamente reutilizável e fortemente tipado que implementa o padrão de rolagem infinita 3D.