Quando usar
Use este skill sempre que estiver lidando com código Remotion para obter conhecimento específico do domínio.
Configuração de novo projeto
Quando estiver em uma pasta ou workspace vazio sem um projeto Remotion existente, crie um usando:
npx create-video@latest --yes --blank --no-tailwind my-video
Substitua my-video por um nome de projeto adequado.
Iniciar preview
Inicie o Remotion Studio para visualizar um vídeo:
npx remotion studio
Opcional: verificação de renderização de um quadro
Você pode renderizar um único quadro com a CLI para verificar layout, cores ou temporização. Pule para edições triviais, refatorações puras ou quando já tiver confiança suficiente do Studio ou de renderizações anteriores.
npx remotion still [composition-id] --scale=0.25 --frame=30
A 30 fps, --frame=30 é a marca de um segundo (--frame é baseado em zero).
Legendas
Ao lidar com legendas ou subtítulos, carregue o arquivo ./rules/subtitles.md para mais informações.
Usando FFmpeg
Para algumas operações de vídeo, como cortar vídeos ou detectar silêncio, o FFmpeg deve ser usado. Carregue o arquivo ./rules/ffmpeg.md para mais informações.
Detecção de silêncio
Quando precisar detectar e cortar segmentos silenciosos de arquivos de vídeo ou áudio, carregue o arquivo ./rules/silence-detection.md.
Visualização de áudio
Quando precisar visualizar áudio (barras de espectro, formas de onda, efeitos reativos a graves), carregue o arquivo ./rules/audio-visualization.md para mais informações.
Efeitos sonoros
Quando precisar usar efeitos sonoros, carregue o arquivo ./rules/sfx.md para mais informações.
Como usar
Leia arquivos de regras individuais para explicações detalhadas e exemplos de código:
- rules/3d.md - Conteúdo 3D no Remotion usando Three.js e React Three Fiber
- rules/animations.md - Habilidades fundamentais de animação para Remotion
- rules/assets.md - Importando imagens, vídeos, áudio e fontes no Remotion
- rules/audio.md - Usando áudio e som no Remotion - importação, corte, volume, velocidade, tom
- rules/calculate-metadata.md - Definir dinamicamente duração, dimensões e props da composição
- rules/can-decode.md - Verificar se um vídeo pode ser decodificado pelo navegador usando Mediabunny
- rules/charts.md - Padrões de gráficos e visualização de dados para Remotion (gráficos de barras, pizza, linha, ações)
- rules/compositions.md - Definindo composições, stills, pastas, props padrão e metadados dinâmicos
- rules/extract-frames.md - Extrair quadros de vídeos em timestamps específicos usando Mediabunny
- rules/fonts.md - Carregando Google Fonts e fontes locais no Remotion
- rules/get-audio-duration.md - Obtendo a duração de um arquivo de áudio em segundos com Mediabunny
- rules/get-video-dimensions.md - Obtendo a largura e altura de um arquivo de vídeo com Mediabunny
- rules/get-video-duration.md - Obtendo a duração de um arquivo de vídeo em segundos com Mediabunny
- rules/gifs.md - Exibindo GIFs sincronizados com a linha do tempo do Remotion
- rules/images.md - Incorporando imagens no Remotion usando o componente Img
- rules/light-leaks.md - Efeitos de sobreposição de vazamento de luz usando @remotion/light-leaks
- rules/lottie.md - Incorporando animações Lottie no Remotion
- rules/measuring-dom-nodes.md - Medindo dimensões de elementos DOM no Remotion
- rules/measuring-text.md - Medindo dimensões de texto, ajustando texto a contêineres e verificando overflow
- rules/sequencing.md - Padrões de sequenciamento para Remotion - atraso, corte, limitação de duração de itens
- rules/tailwind.md - Usando TailwindCSS no Remotion
- rules/text-animations.md - Padrões de tipografia e animação de texto para Remotion
- rules/timing.md - Temporização com interpolate e easing Bézier, molas
- rules/transitions.md - Padrões de transição de cena para Remotion
- rules/transparent-videos.md - Renderizando um vídeo com transparência
- rules/trimming.md - Padrões de corte para Remotion - cortar o início ou o fim das animações
- rules/videos.md - Incorporando vídeos no Remotion - corte, volume, velocidade, looping, tom
- rules/parameters.md - Tornar um vídeo parametrizável adicionando um esquema Zod
- rules/maps.md - Adicionar um mapa usando Mapbox e animá-lo
- rules/silence-detection.md - Detecção adaptativa de silêncio usando FFmpeg loudnorm e silencedetect
- rules/voiceover.md - Adicionando narração gerada por IA a composições Remotion usando ElevenLabs TTS
Fonte: remotion-dev/skills