affaan-m/remotion-video-creation

O que remotion-video-creation faz?

Melhores práticas do Remotion - Crie vídeos com React. 29 regras específicas de domínio cobrindo 3D, animação, áudio, legendas, gráficos, transições e muito mais.

Regras

Regra 1: Configuração Inicial do Projeto

Sempre comece um novo projeto Remotion com npx create-video@latest. Instale as dependências necessárias como @remotion/cli, react, react-dom. Configure o arquivo remotion.config.ts com a taxa de quadros (fps), resolução e duração padrão.

Regra 2: Estrutura de Componentes

Organize seu projeto em componentes React reutilizáveis. Cada cena deve ser um componente separado. Use React.FC com props tipadas. Exemplo:

const MinhaCena: React.FC<{ texto: string }> = ({ texto }) => {
  return <div>{texto}</div>;
};

Regra 3: Uso de useCurrentFrame() e useVideoConfig()

Use useCurrentFrame() para obter o quadro atual e useVideoConfig() para acessar fps, duração, largura e altura. Combine-os para animações baseadas em tempo.

Regra 4: Animações com spring() e interpolate()

Prefira spring() para animações suaves e naturais. Use interpolate() para mapear valores de quadro para propriedades CSS como opacidade, escala e posição. Exemplo:

const escala = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: 'clamp' });

Regra 5: Componentes de Áudio

Use <Audio> para sons de fundo e efemérides. Sempre sincronize o áudio com startFrom e endAt. Use getAudioDurationInSeconds() para obter a duração.

Regra 6: Legendas SRT

Use o pacote @remotion/subtitles para exibir legendas de arquivos SRT. Faça o parsing e mapeie o tempo para os quadros correspondentes.

Regra 7: Gráficos e Gráficos de Barras

Crie gráficos com SVG ou use @remotion/charts. Para gráficos de barras, use retângulos animados com altura interpolada. Garanta que os eixos e rótulos sejam claros.

Regra 8: Transições

Use <TransitionSeries> do @remotion/transitions para transições entre cenas. Configure parâmetros como direção, duração e tipo (slide, fade, etc.).

Regra 9: Animação de Texto

Anime texto com @remotion/animation-utils ou CSS-in-JS. Evite animações complexas que possam impactar o desempenho. Prefira transform em vez de propriedades de layout.

Regra 10: Renderização 3D com Three.js

Use @remotion/three para cenas 3D. Crie um componente <ThreeCanvas> e dentro dele use marcadores e malhas. Exemplo:

const Cena3D: React.FC = () => {
  return (
    <ThreeCanvas>
      <mesh>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="orange" />
      </mesh>
    </ThreeCanvas>
  );
};

Regra 11: Lazy Loading

Para vídeos longos, use lazy do React para carregar componentes de cena sob demanda. Isso reduz o tempo de inicialização e a memória.

Regra 12: Otimização de Ativos

Comprima imagens e vídeos antes de importar. Use formatos modernos como WebP e AV1. Configure webpack para usar loaders apropriados.

Regra 13: Testes

Teste cada cena isoladamente com npx remotion preview. Escreva testes de snapshot com Jest para garantir que as saídas não mudem inesperadamente.

Regra 14: Integração com Tailwind CSS

Instale tailwindcss e configure-o com a API do Remotion. Use classes utilitárias para estilização rápida e consistente.

Regra 15: Integração com Framer Motion

Use framer-motion para animações declarativas. Crie variantes e use motion.div para transições complexas dentro das cenas.

Regra 16: Tratamento de Erros

Implemente fallbacks para assets que falham ao carregar. Use blocos try-catch em operações assíncronas. Exiba mensagens de erro amigáveis.

Regra 17: Acessibilidade

Adicione aria-label e role a elementos interativos. Garanta que as legendas sejam legíveis e contrastantes. Use fontes sans-serif para melhor legibilidade.

Regra 18: SEO para Vídeos

Ao exportar, gere metadados como title, description e thumbnail. Use tags Open Graph para compartilhamento em redes sociais.

Regra 19: Internacionalização

Suporte múltiplos idiomas para legendas e texto. Use bibliotecas como react-intl ou funções simples de mapeamento de strings. Exemplo:

const traducoes = { en: { boasVindas: 'Welcome' }, pt: { boasVindas: 'Bem-vindo' } };

Regra 20: Deploy e CI/CD

Configure pipelines para construir e renderizar vídeos automaticamente. Use remotion render em CI para gerar vídeos sob demanda. Armazene saídas em buckets S3 ou similares.

Regra 21: Versionamento

Mantenha um CHANGELOG.md e use tags semânticas. Documente mudanças que afetam a renderização para evitar regressões.

Regra 22: Documentação de API

Documente cada componente e função com JSDoc. Gere documentação automática com TypeDoc ou Storybook para facilitar o reuso.

Regra 23: Desempenho de Renderização

Evite re-renderizações desnecessárias usando React.memo. Prefira estados locais em vez de estados globais para componentes de cena.

Regra 24: Memória e Garbage Collection

Libere eventos e timers em useEffect. Use useCallback para funções de animação para evitar vazamentos de memória.

Regra 25: Segurança

Sanitize inputs de usuário que podem ser exibidos no vídeo. Evite eval() e require() dinâmicos. Use Content Security Policy (CSP) em ambientes web.

Regra 26: Logs e Debugging

Use console.log com moderação; prefira @remotion/renderer para logs de progresso. Em desenvolvimento, use o painel de timeline do Remotion.

Regra 27: Templates e Reutilização

Crie templates de projeto com create-video --template. Publique templates no npm para que outros possam iniciar rapidamente.

Regra 28: Comunidade e Contribuição

Participe do Discord do Remotion para dúvidas. Contribua com regras e exemplos neste repositório para expandir o conhecimento coletivo.

Regra 29: Atualização de Dependências

Mantenha o Remotion e dependências atualizados. Verifique changelogs para breaking changes e adapte suas regras conforme novas versões são lançadas.