vibe-motion/skills

Crea animaciones infinitas de ticker vertical en 3D con desplazamiento en Remotion. Úsalo para construir una galería de paralaje, desplazamiento infinito de imágenes, efecto de desplazamiento vertical continuo en varias columnas o un muro de fotos 3D (3D照片滚动墙 / 3D相册瀑布流).

¿Qué es skills?

Este skill proporciona un patrón arquitectónico y un componente reutilizable para crear animaciones de desplazamiento 3D infinitas y de múltiples columnas en Remotion, ideales para galerías de fotos, muros de fotos 3D, vitrinas tecnológicas o créditos. La ilusión de infinito se logra mediante la duplicación del dominio y la aritmética modular, combinadas con transformaciones CSS 3D: se duplica la lista de contenido y se calcula un progreso de 0 a 1 para desplazar la columna del 0% al -50% (o viceversa), creando un bucle sin costuras. Un contenedor padre aplica perspectiva, rotación X y escala para dar el efecto 3D, y se usan degradados CSS para enmascarar los bordes. Es compatible con Remotion, acepta cualquier array de URLs de imágenes o nodos React como columnas, y permite configurar la duración y dirección por columna para lograr efectos de paralaje.

Compatible con~Claude Code~Codex CLI~Cursor

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

Documentación

Ticker Vertical 3D para Remotion

Este skill proporciona un patrón arquitectónico y un componente reutilizables para crear animaciones de desplazamiento 3D infinitas y de múltiples columnas (a menudo usadas para galerías de fotos, muros de fotos 3D, vitrinas tecnológicas o créditos) en Remotion.

Cómo funciona

La ilusión de desplazamiento infinito se logra mediante la duplicación del dominio y la aritmética modular, combinadas con transformaciones CSS 3D:

La matemática del infinito: Duplicamos la lista de contenido ([...items, ...items]). Calculamos un progress de 0 a 1 basado en la velocidad de fotogramas y la duración deseada del bucle. Desplazamos la columna de 0% a -50% (o de -50% a 0% para la dirección inversa). Como el contenido está duplicado, el fotograma en -50% se ve idéntico al fotograma en 0%, creando un bucle sin costuras cuando se reinicia.
Perspectiva 3D: Un contenedor padre aplica perspective: 1000px, rotateX(20deg) y scale(1.2). La escala es crucial para que los bordes superior e inferior inclinados se extiendan más allá de los límites de la pantalla 2D, evitando que el fondo vacío se vea.
Enmascaramiento: Se colocan superposiciones CSS linear-gradient de forma absoluta en la parte superior e inferior con un alto zIndex para desvanecer suavemente el contenido en el color de fondo.

Cómo usar este skill

Cuando un usuario solicite una galería de desplazamiento vertical o un ticker infinito:

Copiar el asset: Proporciona o copia el componente genérico ubicado en assets/VerticalTicker.tsx en la carpeta components/animations de su proyecto.
Configurar: Guía al usuario para importar y renderizar el componente <VerticalTicker /> dentro de su <Composition /> de Remotion.
Adaptar los datos: El componente no depende de datos específicos. Acepta cualquier array de URLs de imágenes o nodos React como columnas. Puedes especificar diferentes durationInSeconds y direction (1 o -1) por columna para lograr el paralaje.

Assets proporcionados

assets/VerticalTicker.tsx: El componente de Remotion altamente reutilizable y fuertemente tipado que implementa el patrón de desplazamiento infinito 3D.