xsourabhsharma/remotion-marketing-video-skill

O que remotion-marketing-video-skill faz?

Vídeos de marketing premium com Remotion: demonstrações de produtos, promoções SaaS, gráficos em movimento, walkthroughs de UI, anúncios sociais, vídeos explicativos — skill de agente code-first.

Visão Geral

Esta skill capacita agentes de IA a gerarem vídeos de marketing profissionais programaticamente usando Remotion, uma biblioteca que permite criar vídeos com React.

Funcionalidades

• Criação Code-First: Escreva componentes React para cada cena, com controle total sobre animações, temporização e layout.
• Templates Reutilizáveis: Inclui templates prontos para anúncios sociais, demos de produtos e walkthroughs.
• Renderização de Alta Qualidade: Saída em MP4 ou GIF, com codecs modernos (H.264, WebM).
• Dados Dinâmicos: Alimente vídeos com JSON ou APIs externas para personalização em massa.
• Suporte a Legendas e Áudio: Adicione faixas de áudio e legendas sincronizadas.

Pré-requisitos

• Node.js 18+ instalado no ambiente.
• Acesso ao pacote @remotion/cli ou remotion.
• Conhecimento básico de React e JSX.

Como Usar

1. Inicialize um Projeto Remotion:

   npx create-video@latest my-marketing-video
   cd my-marketing-video
   

2. Importe a Skill: No seu arquivo src/Root.tsx, importe os componentes da skill:

   import { ProductDemo, SocialAd, Explainers } from 'xsourabhsharma/remotion-marketing-video-skill';
   

3. Configure as Props: Passe dados como texto, imagens e cores:

   <ProductDemo
     productName="SuperApp"
     tagline="A revolução em gestão de tarefas"
     screenshots={['/img1.png', '/img2.png']}
     bgColor="#0a0a0a"
     textColor="#ffffff"
   />
   

4. Renderize o Vídeo:

   npx remotion render src/index.ts my-composition output.mp4
   

Exemplos de Uso

• Demo de Produto: Apresente funcionalidades em sequência com zoom e destaques.
• Anúncio para Redes Sociais: Vídeo curto (15 segundos) com animações rápidas e CTA.
• Walkthrough de UI: Grave a tela e sobreponha anotações animadas.

Estrutura de Arquivos

skill/
├── src/
│   ├── components/
│   │   ├── ProductDemo.tsx
│   │   ├── SocialAd.tsx
│   │   └── Explainers.tsx
│   ├── assets/
│   │   └── fonts/
│   └── Root.tsx
├── package.json
└── README.md

Suporte

Reporte issues ou contribuições no repositório GitHub.

Licença

MIT – uso livre, modificação e distribuição permitidos.