remotion-render
Générer des vidéos à partir de code React/Remotion TSX
Également disponible depuis: inference-sh-6,inference-sh-8,inferen-sh,inference-shell,skillssh,tul-sh,toolshell,inference-sh-7,inference-sh-9
La création de vidéos programmables à partir de code React nécessite des outils spécialisés et une infrastructure de rendu. Cette skill enveloppe le service inference.sh pour accepter du code TSX et retourner des vidéos MP4, permettant à Claude Code de générer des graphiques animés sans montage vidéo manuel.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "remotion-render". Créer une vidéo avec du texte animé显示 'Hello World' qui apparaît en fondu sur 2 secondes
Résultat attendu:
Vidéo générée avec succès. La sortie contient une URL vidéo qui peut être téléchargée ou intégrée. La vidéo affiche du texte blanc sur un fond sombre avec une transition d'opacité de 0 à 1 sur la durée de 2 secondes.
Utilisation de "remotion-render". Générer un carré avec animation de ressort qui rebondit sur l'écran
Résultat attendu:
Rendu terminé. La vidéo de 2 secondes affiche un carré blanc aux coins arrondis sur un fond violet, avec le carré qui s'agrandit de petit à taille normale en utilisant la physique des ressorts (amortissement : 10, raideur : 100).
Utilisation de "remotion-render". Créer une vidéo avec trois blocs de texte séquencés apparaissant l'un après l'autre
Résultat attendu:
Génération vidéo terminée. La sortie de 4 secondes présente trois éléments textuels ('First', 'Second', 'Third') apparaissant séquentiellement aux marques 0s, 1s et 2s, chacun avec animation de fondu et centré à l'écran.
Audit de sécurité
Risque moyenThe skill is a legitimate video rendering tool that passes React/Remotion TSX code to the inference.sh service for MP4 generation. Static findings include false positives for backtick detection (bash code blocks), false positive for cryptographic detection (description text), and legitimate hardcoded URLs for service endpoints. No confirmed malicious patterns. The skill requires network access to connect to inference.sh, which is expected behavior.
Problèmes à risque élevé (2)
Problèmes à risque faible (1)
Facteurs de risque
🌐 Accès réseau (5)
⚙️ Commandes externes (8)
Score de qualité
Ce que vous pouvez construire
Génération automatisée de rapports vidéo
Générez des visualisations de données animées ou des rapports en passant des composants React guidés par les données. Idéal pour créer du contenu vidéo récurrent depuis des pipelines CI/CD ou des workflows automatisés.
Génération dynamique de vignettes et aperçus
Créez des vignettes vidéo personnalisées ou des clips d'aperçu à partir de composants React. Utile pour les systèmes de gestion de contenu qui nécessitent une génération programmatique de ressources vidéo.
Prototypage de graphiques animés
Prototypéz rapidement des graphiques animés et des designs de mouvement en écrivant du code TSX. Itérez sur les animations sans quitter l'environnement de développement.
Essayez ces prompts
Créez une vidéo de 3 secondes avec du texte blanc sur fond sombre qui apparaît en fondu. Utilisez Remotion avec useCurrentFrame et interpolate pour l'animation d'opacité. Résolution 1920x1080 à 30 fps.
Générez une vidéo de 5 secondes affichant un compteur de pourcentage de 0 à 100%. Le compteur doit utiliser une animation de ressort pour un mouvement fluide. Utilisez useVideoConfig pour obtenir les informations de frame. Sortie à 60 fps.
Créez une vidéo de 4 secondes avec trois éléments textuels séquentiels. Chaque élément doit apparaître en fondu et s'afficher pendant 1 seconde avant de passer au suivant. Utilisez les composants Sequence pour la synchronisation.
Générez une vidéo avec un titre et un sous-titre passés en props. Le composant doit afficher le titre en grand texte blanc et le sous-titre en texte gris plus petit en dessous, centré sur un fond noir. Durée : 3 secondes.
Bonnes pratiques
- Commencez par des animations simples et itérez - testez les animations d'opacité ou d'échelle de base avant d'utiliser des physiques de ressort complexes
- Utilisez AbsoluteFill comme conteneur racine pour vous assurer que le contenu couvre toute la frame vidéo
- Gardez le code TSX autonome - évitez les dépendances externes autres que 'remotion' ou 'react'
Éviter
- Ne passez pas de code fourni par l'utilisateur directement sans validation - la skill accepte TSX mais assurez-vous que le code ne contient pas de motifs malveillants
- Évitez les durées de vidéo extrêmement longues (plus de 60 secondes) car le temps de rendu augmente significativement
- N'utilisez pas d'URLs d'images ou médias externes - l'environnement sandbox peut ne pas avoir accès réseau pour récupérer des ressources externes