Remotion

Remotion - Criação de Vídeo em React

Conjunto abrangente de skills para criar vídeos programaticamente usando Remotion, um framework para criar vídeos de forma programática usando React.

Quando usar

Use este skill sempre que estiver lidando com código Remotion para obter conhecimento específico do domínio sobre:

• Criar composições de vídeo com componentes React
• Animar elementos usando animações baseadas em frames
• Trabalhar com assets de áudio, vídeo e imagem
• Construir gráficos e visualizações de dados
• Implementar animações de texto e legendas
• Usar conteúdo 3D com Three.js
• Aplicar transições e sequenciamento
• Integrar TailwindCSS e animações Lottie

Conceitos Centrais

Remotion permite que você crie vídeos usando:

• Componentes React: Construa conteúdo de vídeo com sintaxe React familiar
• Animações Baseadas em Frames: Todas as animações controladas pelo hook useCurrentFrame()
• Composições: Defina composições de vídeo com duração, dimensões e props
• Assets: Importe e manipule imagens, vídeos, áudio e fontes
• Renderização: Exporte vídeos programaticamente com configurações personalizáveis

Recursos Principais

• Controle quadro a quadro sobre animações
• Cálculo dinâmico de metadados
• Processamento de mídia (corte, volume, velocidade, pitch)
• Geração e exibição de legendas
• Visualização de dados com gráficos
• Integração de conteúdo 3D
• Animações de texto profissionais
• Transições e sequenciamento de cenas

Como usar

Leia os arquivos de regras individuais para explicações detalhadas e exemplos de código:

Animação e Timing Principais

• references/animations.md - Técnicas fundamentais de animação para Remotion
• references/timing.md - Curvas de interpolação: linear, easing, animações spring
• references/sequencing.md - Atraso, corte e limitação de duração de itens
• references/trimming.md - Corte do início ou fim de animações

Composições e Metadados

• references/compositions.md - Definindo composições, stills, pastas, props padrão
• references/calculate-metadata.md - Definir dinamicamente duração, dimensões e props da composição

Assets e Mídia

• references/assets.md - Importando imagens, vídeos, áudio e fontes
• references/images.md - Incorporando imagens usando o componente Img
• references/videos.md - Incorporando vídeos com corte, volume, velocidade, loop, pitch
• references/audio.md - Usando áudio e som com corte, volume, velocidade, pitch
• references/gifs.md - Exibindo GIFs sincronizados com a timeline

Texto e Tipografia

• references/text-animations.md - Tipografia e padrões de animação de texto
• references/measuring-text.md - Medindo dimensões de texto, ajustando texto, verificando estouro
• references/fonts.md - Carregando Google Fonts e fontes locais

Legendas e Transcrição

• references/display-captions.md - Exibindo legendas com páginas ao estilo TikTok e realce de palavras
• references/import-srt-captions.md - Importando arquivos de legendas .srt usando @remotion/captions
• references/transcribe-captions.md - Transcrevendo áudio para gerar legendas

Visualização de Dados

• references/charts.md - Padrões de gráficos e visualização de dados

Recursos Avançados

• references/3d.md - Conteúdo 3D usando Three.js e React Three Fiber
• references/lottie.md - Incorporando animações Lottie
• references/transitions.md - Padrões de transição de cenas

Estilo e Layout

• references/tailwind.md - Usando TailwindCSS em Remotion
• references/measuring-dom-nodes.md - Medindo dimensões de elementos DOM

Processamento de Mídia (Mediabunny)

• references/can-decode.md - Verificar se um vídeo pode ser decodificado pelo navegador
• references/extract-frames.md - Extrair frames de vídeos em timestamps específicos
• references/get-audio-duration.md - Obter a duração de um arquivo de áudio
• references/get-video-dimensions.md - Obter a largura e altura de um arquivo de vídeo
• references/get-video-duration.md - Obter a duração de um arquivo de vídeo

Exemplo de Início Rápido

import { useCurrentFrame, useVideoConfig, interpolate } from "remotion";

export const MyComposition = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <div style={{ opacity }}>
      <h1>Hello Remotion!</h1>
    </div>
  );
};

Melhores Práticas

1. Sempre use useCurrentFrame() - Controle todas as animações a partir do frame atual
2. Evite animações CSS - Elas não serão renderizadas corretamente em vídeos
3. Pense em segundos - Multiplique o tempo em segundos por fps para cálculos de frames
4. Use interpolate para animações suaves - Interpolação integrada com funções de easing
5. Limite a extrapolação - Evite que valores ultrapassem os intervalos pretendidos
6. Teste frequentemente - Visualize no Remotion Studio antes de renderizar

Recursos

• Documentação: https://www.remotion.dev/docs
• Repositório: https://github.com/remotion-dev/remotion
• Repositório de Skills: https://github.com/remotion-dev/skills
• Comunidade: Discord e GitHub Discussions
• Licença: MIT