remotion-render
Videos aus React Remotion Code rendern
Auch verfügbar von: inference-sh-7,tul-sh,inference-sh-8,inference-sh-6
Die programmatische Erstellung von Videos ist komplex und erfordert spezialisierte Rendering-Infrastruktur. Diese Skill transformiert React Remotion Komponenten über cloudbasiertes Rendering in MP4-Videos und ermöglicht es Entwicklern, Videos aus Code zu generieren, ohne Rendering-Server zu verwalten.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "remotion-render". Remotion-Komponente mit Fade-In-Textanimation, 3 Sekunden Dauer, 1080p
Erwartetes Ergebnis:
- Render-Job erfolgreich eingereicht
- Fortschritt: 0% -> 25% -> 50% -> 75% -> 100%
- Video-URL: https://cdn.inference.sh/outputs/abc123/video.mp4
Verwendung von "remotion-render". Animierte Zählerkomponente mit dynamischen Props, die Fortschrittsprozente anzeigen
Erwartetes Ergebnis:
- Komponente mit bereitgestellten Props kompiliert
- Rendere Frames 1-180 bei 60 FPS
- Ausgabe: 1080x1080 MP4, H.264 Codec, 5 Sekunden Dauer
- Download-Link läuft in 7 Tagen ab
Sicherheitsaudit
Niedriges RisikoStatic analysis detected 31 external command patterns and 8 network URLs, but all are FALSE POSITIVES. The skill uses the infsh CLI with proper allowed-tools constraints (Bash(infsh *)). External commands are intentional platform integration, not arbitrary execution. Network URLs point to legitimate service endpoints. Weak crypto finding triggered by SHA-256 documentation reference (SHA-256 is secure). Pipe-to-shell on line 17 is optional user-run CLI installation, not skill-executed code.
Probleme mit niedrigem Risiko (1)
Risikofaktoren
⚙️ Externe Befehle (31)
🌐 Netzwerkzugriff (8)
Qualitätsbewertung
Was du bauen kannst
Automatisierte Videoinhaltsgenerierung
Marketing-Teams können personalisierte Videoinhalte in großem Maßstab generieren, indem sie Kundendaten als Props an Remotion-Vorlagen übergeben und individuell angepasste Videos für jeden Empfänger ohne manuelle Bearbeitung erstellen.
Datenvisualisierungsvideos
Entwickler können dynamische Diagramme, Graphen und Datenanimationen in teilbare Videoformate für Präsentationen, soziale Medien oder Dokumentationszwecke konvertieren.
Animierte UI-Prototypen
Design-Teams können interaktive React-Animationen als Videodateien für Stakeholder-Reviews, Designdokumentation oder Übergabematerialien exportieren, ohne Bildschirmaufnahme.
Probiere diese Prompts
Erstelle eine einfache Remotion-Komponente, die eine Willkommensnachricht über 3 Sekunden bei 1080p-Auflösung einblendet. Verwende die remotion-render Skill, um das Video zu generieren.
Generiere ein Video, das einen Prozentzähler zeigt, der sich über 5 Sekunden von 0 auf 100 animiert. Füge eine Ladeanzeige unter dem Zähler hinzu. Verwende Remotion's useCurrentFrame und useVideoConfig Hooks.
Erstelle eine Remotion-Komponente mit drei sequenziellen Titelkarten, die nacheinander eingeblendet werden. Jede Karte sollte 2 Sekunden angezeigt werden, bevor sie übergeht. Verwende Sequence-Komponenten und Spring-Animationen für flüssige Bewegung.
Erstelle eine Remotion-Vorlage, die Benutzerdaten-Props akzeptiert, einschließlich Name, Unternehmen und Leistung. Generiere eine personalisierte Urkunden-Animation. Rendere dann mehrere Videos durch Übergeben verschiedener Prop-Werte für jeden Empfänger.
Bewährte Verfahren
- Halte Remotion-Komponenten rein und nebenwirkungsfrei für zuverlässiges Rendering in verschiedenen Umgebungen
- Verwende Remotion's interpolate und spring Funktionen für flüssige, professionelle Animationen anstatt manueller Berechnungen
- Teste Komponenten lokal mit Remotion Preview, bevor du sie zum Cloud-Rendering einreichst, um Fehler frühzeitig zu erkennen
Vermeiden
- Vermeide API-Aufrufe oder Netzwerkanfragen innerhalb von Remotion-Komponenten, da das Rendering in einer isolierten Cloud-Umgebung stattfindet
- Verwende keine browser-only APIs wie localStorage oder window-Objekt, da Remotion in einem Node.js-Kontext rendert
- Vermeide übermäßig lange Videodauern oder extrem hohe Auflösungen, die zu Timeouts führen oder Platform-Limits überschreiten könnten