vibe-motion/skills

Erstellt unendliche 3D-Vertikalticker-Animationen in Remotion. Verwende dies, wenn du eine Parallax-Galerie, einen unendlichen Bildlauf, einen mehrspaltigen kontinuierlichen vertikalen Scrolleffekt oder eine 3D-Fotowand (3D照片滚动墙 / 3D相册瀑布流) erstellen möchtest.

Was ist skills?

Diese Fähigkeit bietet ein wiederverwendbares Architekturmuster und eine Komponente zum Erstellen unendlicher, mehrspaltiger 3D-Scrolling-Animationen in Remotion, typischerweise verwendet für Fotogalerien, 3D-Fotowände, Tech-Stack-Präsentationen oder Abspannläufe. Der unendliche Scroll-Effekt wird durch Domänenduplikation und modulare Arithmetik in Kombination mit CSS-3D-Transformationen erreicht: Die Inhaltsliste wird dupliziert, ein Fortschritt von 0 bis 1 basierend auf der Bildrate und der gewünschten Schleifendauer berechnet, und die Spalte von 0% auf -50% oder umgekehrt verschoben. Eine übergeordnete Hülle wendet Perspektive, Drehung und Skalierung an, um einen 3D-Effekt zu erzeugen, während CSS-Verlauf-Überlagerungen das Ein- und Ausblenden der Inhalte in die Hintergrundfarbe ermöglichen. Die Komponente ist datenagnostisch und akzeptiert beliebige Arrays von Bild-URLs oder React-Knoten als Spalten, mit konfigurierbarer Dauer und Richtung pro Spalte für Parallax-Effekte.

Funktioniert mit~Claude Code~Codex CLI~Cursor

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

Dokumentation

Remotion 3D-Vertikalticker

Diese Fähigkeit bietet ein wiederverwendbares Architekturmuster und eine Komponente zum Erstellen unendlicher, mehrspaltiger 3D-Scrolling-Animationen (oft verwendet für Fotogalerien, 3D-Fotowände, Tech-Stack-Präsentationen oder Abspannläufe) in Remotion.

Funktionsweise

Die Illusion des unendlichen Scrollens wird durch Domänenduplikation und modulare Arithmetik in Kombination mit CSS-3D-Transformationen erreicht:

Die Mathematik der Unendlichkeit: Wir duplizieren die Inhaltsliste ([...items, ...items]). Wir berechnen einen progress von 0 bis 1 basierend auf der Bildrate und der gewünschten Schleifendauer. Wir verschieben die Spalte von 0% auf -50% (oder von -50% auf 0% für die Rückwärtsrichtung). Da der Inhalt dupliziert ist, sieht der Frame bei -50% identisch aus wie der Frame bei 0%, was eine nahtlose Schleife beim Zurücksetzen erzeugt.
3D-Perspektive: Eine übergeordnete Hülle wendet perspective: 1000px, rotateX(20deg) und scale(1.2) an. Die Skalierung ist entscheidend, um sicherzustellen, dass die geneigten oberen und unteren Kanten über die 2D-Bildschirmgrenzen hinausragen und so ein Durchscheinen des leeren Hintergrunds verhindert wird.
Maskierung: CSS-linear-gradient-Überlagerungen werden absolut oben und unten mit einem hohen zIndex platziert, um den Inhalt sanft in die Hintergrundfarbe auszublenden.

Verwendung dieser Fähigkeit

Wenn ein Benutzer eine vertikale Scroll-Galerie oder einen unendlichen Ticker anfordert:

Ressource kopieren: Stelle die generische Komponente aus assets/VerticalTicker.tsx bereit oder kopiere sie in den Ordner components/animations des Projekts.
Konfigurieren: Führe den Benutzer an, die Komponente <VerticalTicker /> innerhalb seiner Remotion-<Composition /> zu importieren und zu rendern.
Daten anpassen: Die Komponente ist datenagnostisch. Sie akzeptiert jedes Array von Bild-URLs oder React-Knoten als Spalten. Du kannst unterschiedliche durationInSeconds und direction (1 oder -1) pro Spalte angeben, um Parallax-Effekte zu erzielen.

Bereitgestellte Ressourcen

assets/VerticalTicker.tsx: Die hochgradig wiederverwendbare, stark typisierte Remotion-Komponente, die das 3D-Unendlich-Scroll-Muster implementiert.