vibe-motion/skills

Crée des animations de défilement 3D verticales infinies dans Remotion. À utiliser pour construire une galerie parallaxe, un défilement d'images infini, un effet de défilement vertical continu multi-colonnes, ou un mur de photos 3D (3D照片滚动墙 / 3D相册瀑布流).

Qu'est-ce que skills ?

Cette compétence fournit un modèle architectural réutilisable et un composant pour créer des animations de défilement 3D infinies et multi-colonnes dans Remotion, souvent utilisées pour des galeries de photos, des murs de photos 3D, des présentations de piles technologiques ou des génériques. L'illusion de défilement infini est réalisée via la duplication de domaine et l'arithmétique modulaire, combinées à des transformations 3D CSS. Elle fonctionne en dupliquant la liste de contenu, en calculant une progression de 0 à 1 basée sur la fréquence d'images et la durée de boucle souhaitée, puis en appliquant une translation et un perspective 3D. Elle prend en charge Remotion et est indépendante des données, acceptant n'importe quel tableau d'URLs d'images ou de nœuds React comme colonnes, avec des directions et durées configurables par colonne pour des effets de parallaxe.

Compatible avec~Claude Code~Codex CLI~Cursor

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

Documentation

Défileur 3D Vertical Remotion

Cette compétence fournit un modèle architectural réutilisable et un composant pour créer des animations de défilement 3D infinies et multi-colonnes (souvent utilisées pour des galeries de photos, des murs de photos 3D, des présentations de piles technologiques ou des génériques) dans Remotion.

Comment ça marche

L'illusion de défilement infini est obtenue via la duplication de domaine et l'arithmétique modulaire, combinées à des transformations 3D CSS :

Les mathématiques de l'infini : Nous dupliquons la liste de contenu ([...items, ...items]). Nous calculons un progress de 0 à 1 basé sur la fréquence d'images et la durée de boucle souhaitée. Nous translatons la colonne de 0% à -50% (ou de -50% à 0% pour l'inverse). Parce que le contenu est dupliqué, l'image à -50% est identique à l'image à 0%, créant une boucle sans couture lors de la réinitialisation.
Perspective 3D : Un conteneur parent applique perspective: 1000px, rotateX(20deg), et scale(1.2). L'échelle est cruciale pour garantir que les bords supérieurs et inférieurs inclinés s'étendent au-delà des limites de l'écran 2D, empêchant ainsi les fuites de fond vides.
Masquage : Des superpositions CSS linear-gradient sont placées en position absolue en haut et en bas avec un zIndex élevé pour fondre en douceur le contenu dans la couleur d'arrière-plan.

Comment utiliser cette compétence

Lorsqu'un utilisateur demande une galerie à défilement vertical ou un défilement infini :

Copier l'actif : Fournir ou copier le composant générique situé dans assets/VerticalTicker.tsx dans le dossier components/animations de leur projet.
Configurer : Guider l'utilisateur pour importer et rendre le composant <VerticalTicker /> dans son <Composition /> Remotion.
Adapter les données : Le composant est indépendant des données. Il accepte n'importe quel tableau d'URLs d'images ou de nœuds React comme colonnes. Vous pouvez spécifier différents durationInSeconds et direction (1 ou -1) par colonne pour obtenir un effet de parallaxe.

Actifs fournis

assets/VerticalTicker.tsx : Le composant Remotion hautement réutilisable et fortement typé implémentant le motif de défilement infini 3D.