Habilidades remotion-render
📦

remotion-render

Seguro

Renderizar videos desde código React de Remotion

También disponible en: skillssh,toolshell,inference-sh-9,inference-sh-6,inference-sh-7,tul-sh,inference-shell,inference-sh-8

Crear videos programáticamente requiere una infraestructura de renderizado compleja. Esta habilidad transforma tus componentes React/Remotion TSX en videos MP4 instantáneamente a través de la plataforma inference.sh.

Soporta: Claude Codex Code(CC)
📊 71 Adecuado
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "remotion-render". Componente TSX con animación de texto en desvanecimiento, 3 segundos, 1080p

Resultado esperado:

URL del archivo de video MP4: https://cdn.inference.sh/output/rendered-video-abc123.mp4 (1920x1080, 30fps, H.264)

Usando "remotion-render". Contador animado desde 0-100% con props para valores de inicio/fin personalizados

Resultado esperado:

Video cuadrado renderizado mostrando animación suave de porcentaje con indicador de progreso

Auditoría de seguridad

Seguro
v1 • 3/14/2026

All static analysis findings are false positives. The 32 'external_commands' detections are markdown code block examples in documentation, not actual shell execution. The 5 'network' findings are documentation URLs. The 3 'blocker' findings are false positives from frontmatter text. The skill uses restricted Bash access (infsh CLI only) for legitimate video rendering via inference.sh platform.

1
Archivos escaneados
211
Líneas analizadas
0
hallazgos
1
Auditorías totales
No se encontraron problemas de seguridad
Auditado por: claude

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
87
Contenido
33
Comunidad
100
Seguridad
91
Cumplimiento de la especificación

Lo que puedes crear

Generación Automatizada de Videos

Generar contenido de video de marca programáticamente desde plantillas con texto dinámico, colores y visualizaciones de datos.

Visualizaciones de Datos Animadas

Transformar datos en videos explicadores animados que muestran tendencias, comparaciones e insights con transiciones suaves.

Prototipado de Animaciones de UI

Prototipar y compartir animaciones de UI como archivos de video compartibles para revisiones de diseño y presentaciones a stakeholders.

Prueba estos prompts

Animación Simple de Desvanecimiento 
Crear un video de 5 segundos en 1080p con texto blanco que aparece/desaparece en un fondo oscuro diciendo 'Hello World' usando la función interpolate de Remotion para la animación de opacidad.
Contador Animado 
Generar un video cuadrado de 3 segundos mostrando un contador de porcentaje animándose desde 0% hasta 100% con transiciones de números suaves usando los hooks useCurrentFrame y useVideoConfig.
Animación de Física de Resorte 
Crear una animación de 2 segundos de una bola saltarina usando la API de spring de Remotion con valores personalizados de damping y stiffness. Usar un fondo colorido y exportar a 60fps.
Tarjeta de Título Multi-Secuencia 
Crear una secuencia de título de 6 segundos con tres elementos de texto apareciendo en secuencia. Primero mostrar el título en el cuadro 0, el subtítulo en el cuadro 30, y el logo en el cuadro 60. Cada elemento debe aparecer gradualmente durante 15 cuadros. Usar resolución 1920x1080.

Mejores prácticas

  • Mantener el código del componente enfocado y minimalista - la lógica compleja aumenta el tiempo de renderizado
  • Usar interpolate para animaciones suaves en lugar de cálculos manuales de cuadros
  • Probar animaciones en menor resolución antes de renderizar la salida final de alta calidad
  • Proporcionar width, height, fps y duración explícitos para resultados consistentes

Evitar

  • No incluir llamadas a APIs externas u operaciones async en componentes Remotion
  • Evitar importar paquetes más allá de remotion y react - pueden no estar disponibles
  • No depender de rutas de archivos locales para recursos - usar URLs HTTP en su lugar
  • Evitar duraciones extremadamente largas o altas tasas de cuadros que causen timeouts en el renderizado

Preguntas frecuentes

¿Qué formatos de video y códecs son compatibles?
La habilidad produce archivos MP4. Los códecs comunes incluyen H.264 para compatibilidad amplia y ProRes para archivos masters de alta calidad. Especificar mediante el parámetro codec.
¿Puedo usar imágenes o videos dentro de mi composición de Remotion?
Sí, usar los componentes Img y Video de Remotion con URLs HTTP para recursos externos. Las rutas de archivos locales no son accesibles.
¿Cómo paso datos dinámicos a mi componente de video?
Usa el parámetro 'props' en tu entrada. Tu componente debe aceptar props como segundo parámetro: export default function Main({ title, color })
¿Cuál es la duración máxima de video que puedo renderizar?
La duración depende de los límites de la plataforma inference.sh. Para videos más largos, considera dividirlos en segmentos o usar el modo de streaming para retroalimentación del progreso.
¿Puedo previsualizar el video antes del renderizado final?
Sí, renderiza primero en menor resolución (ej. 640x360) y duración más corta para verificar la animación, luego renderiza la versión final en calidad completa.
¿Necesito una licencia de Remotion Pro para usar esta habilidad?
La habilidad usa la plataforma inference.sh que maneja la licencia de Remotion. Puedes usar las APIs de Remotion sin gestionar licencias directamente.

Detalles del desarrollador

Licencia

MIT

Repositorio

https://github.com/inferen-sh/skills/tree/main/tools/video/remotion-render/

Ref.

main

Estructura de archivos

📄 SKILL.md