remotion-render
Renderizar vídeos a partir de código React com Remotion
Também disponível em: skillssh,toolshell,inference-sh-9,inferen-sh,inference-sh-6,inference-sh-7,tul-sh,inference-sh-8
A criação programática de vídeos tradicionalmente requer software de edição de vídeo complexo ou ferramentas de animação manual. Esta skill transforma código de componentes React/Remotion diretamente em vídeos MP4 através da plataforma inference.sh.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "remotion-render". Simple fade-in text component with 3 second duration
Resultado esperado:
Arquivo de vídeo MP4 na resolução especificada com transição suave de opacidade de 0 para 1 durante o primeiro segundo
A utilizar "remotion-render". Animated counter with spring physics configuration
Resultado esperado:
Vídeo mostrando valores numéricos incrementando com efeito de salto elástico em cada mudança de número
A utilizar "remotion-render". Sequence-based multi-element animation with staggered timing
Resultado esperado:
Vídeo em camadas com elementos aparecendo em ordem, cada um com animações independentes de fade e posição
Auditoria de Segurança
SeguroStatic scanner flagged 40 patterns (32 external_commands, 5 network, 3 crypto). All are FALSE POSITIVES: backticks are markdown code fences in documentation, URLs are legitimate service links (inference.sh, remotion.dev), and no cryptographic code exists. The skill safely wraps the inference.sh CLI for video rendering via external service.
Fatores de risco
⚙️ Comandos externos (1)
🌐 Acesso à rede (1)
Pontuação de qualidade
O Que Você Pode Construir
Equipes de marketing gerando vídeos de demonstração de produtos
Criar conteúdo de vídeo de marca consistente a partir de componentes de modelo com texto dinâmico e sobreposições de dados para campanhas de mídia social.
Desenvolvedores criando tutoriais animados
Transformar exemplos de código e demonstrações de UI em tutoriais em vídeo envolventes sem necessidade de gravação de tela ou software de edição de vídeo.
Analistas de dados visualizando métricas como vídeo
Converter dashboards e visualizações de dados em relatórios de vídeo animados para apresentações de stakeholders e relatórios automatizados.
Tente Estes Prompts
Create a simple fade-in text animation with white text on black background that says Hello World over 3 seconds at 1080p.
Build an animated counter that counts from 0 to 100 percent over 5 seconds with a loading indicator, using spring animations for smooth motion.
Design a title card with three text elements that fade in sequentially, each with different timing. Include a colored background and custom typography styling.
Create a video component that accepts data props and renders animated charts with interpolated values, smooth transitions between states, and custom color schemes based on input parameters.
Melhores Práticas
- Use interpolate e spring para animações suaves e profissionais em vez de transições lineares
- Mantenha o código do componente modular separando a lógica de animação dos elementos visuais
- Teste animações na taxa de quadros alvo localmente antes de renderizar o vídeo final para verificar o tempo
Evitar
- Evite estilos inline com cálculos complexos que são recalculados a cada quadro
- Não use useState ou efeitos colaterais que entrem em conflito com o modelo de renderização do Remotion
- Nunca hardcode números de quadros diretamente; use useVideoConfig para tempo independente de resolução
Perguntas Frequentes
Quais APIs do Remotion são suportadas?
Preciso instalar o Remotion localmente?
Quais formatos de vídeo e codecs estão disponíveis?
Posso usar hooks do React nos meus componentes?
Como passo dados dinâmicos para o meu componente de vídeo?
Qual é a duração máxima do vídeo?
Detalhes do Desenvolvedor
Estrutura de arquivos
📄 SKILL.md