Communitygithub.com

Sincronização de Som e Música

Pontue um vídeo como um editor: corte no ritmo da música, posicione efeitos sonoros nas transições, dê espaço para a narração, encontre faixas livres de royalties com segurança e duck a música para que a narração fique clara. Use ao adicionar música, efeitos sonoros ou narração a um vídeo.

O que é Sincronização de Som e Música?

Esta skill capacita o agente a tomar decisões criativas de áudio para vídeos, funcionando como a 'camada de gosto' sonora, enquanto delega a implementação técnica de código para outras skills (remotion-compose, remotion-render). Ela foca em cinco pilares: sincronizar cortes com o ritmo da música, colocar efeitos sonoros nos picos das transições, controlar o ritmo da narração para que seja natural, encontrar fontes de música livres de royalties adequadas para uso comercial e mixar o áudio aplicando ducking na música para destacar a narração. As decisões são convertidas em números precisos (quadros de batida, timestamps de SFX, níveis de duck) que alimentam a linha do tempo do Remotion, sem que o agente precise escrever JSX de `<Audio>` ou executar o renderizador. A skill inclui ferramentas práticas como um script para gerar grades de batidas e um planejador de mixagem/ducking, além de um template de folha de pauta de áudio para organizar as decisões e repassá-las. Ela se integra com skills de storyboard e princípios de design de movimento, não devendo ser usada para decisões visuais, de roteiro ou de implementação mecânica de áudio no código do Remotion.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/SkillMedev/tutorial-video-studio/tree/main/skills/sound-and-music-sync

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que Sincronização de Som e Música faz?

O som é metade do vídeo e a metade que as pessoas esquecem. Uma animação medíocre cortada no ritmo com uma narração limpa parece profissional; uma animação bonita com cortes que flutuam e uma narração enterrada sob a música parece amadora. Esta é a camada de gosto de áudio. Você decide onde os cortes caem, onde os efeitos sonoros pontuam, como a narração respira e como a mixagem se assenta - então você entrega os números concretos (quadros de batida, timestamps de SFX, níveis de duck) para o remotion-compose conectar na linha do tempo e o remotion-render exportar. Você não escreve o JSX <Audio> ou executa o renderizador; você toma as decisões criativas que os alimentam.

Isso se combina com o resto do pacote motion-video-direction: uma lista de cenas do video-storyboard e decisões de temporização do motion-design-principles são sua entrada - você pontua contra batidas que já existem. Se o texto está animando junto com o áudio, sincronize com o kinetic-typography; se o ritmo de corte está guiando um passo a passo de produto, coordene com o product-demo-director; se você está cortando uma versão vertical/para redes sociais, derive as batidas por plataforma com o social-video-formatter. A mixagem de áudio é sua própria camada - deixe a aparência visual (correção de cor, iluminação, contraste) para o motion-color-and-light e pontue contra o que ele graduar.

Fluxo de Trabalho

Execute nesta ordem. Não comece a colocar SFX antes que os cortes estejam travados no ritmo, e não finalize a mixagem antes que a temporização da narração esteja correta - cada etapa depende da anterior.

  1. Escolha a faixa e trave o andamento. Escolha uma música que corresponda à energia e duração do vídeo, confirme sua licença (veja referências/fontes-livres-de-royalties) e obtenha seu BPM. A maioria das bibliotecas livres de royalties lista o BPM; se não, conte batidas manualmente ou use um detector. O BPM é a espinha dorsal de tudo a jusante - uma batida dura 60 / BPM segundos e, no fps do projeto, fps * 60 / BPM quadros.

  2. Construa a grade de batidas e encaixe os cortes nela. Converta batidas em números de quadro e coloque cada corte seco e grande mudança de cena em uma batida (execute grade_batidas.js abaixo). Corte no downbeat (batidas 1, 5, 9 em 4/4) para ênfase; corte em qualquer batida para transições de rotina. Um corte que cai dois ou três quadros fora da batida parece "errado" mesmo para espectadores que não conseguem nomear o motivo. Entregue a lista de quadros ajustados ao remotion-compose como limites de <Sequence from={...}>.

  3. Coloque efeitos sonoros nas transições, não sobre elas. SFX existem para fazer o movimento parecer físico. A regra: o som atinge o pico no instante em que o movimento atinge o pico. Um whoosh leva para dentro de um swipe (comece ~3-5 quadros antes do corte para que sua cauda caia no corte); um impacto/baque cai no quadro em que um cartão entra com força; um clique/estalo cai no quadro em que um elemento de UI aparece; um riser se constrói através dos 10-20 quadros antes de uma revelação e resolve nela. Um SFX por transição - empilhá-los transforma pontuação em ruído. Veja referências/posicionamento-sfx.

  4. Controle o ritmo da narração para que ela respire. A narração define o ritmo real do vídeo; os visuais a servem, não o contrário. Mire em um ritmo conversacional de ~150 palavras por minuto (≈2.5 palavras/segundo) - mais rápido soa apressado, mais lento soa como vídeo de refém. Deixe uma batida de silêncio (8-15 quadros) antes de uma linha chave e depois do CTA. Escreva para o ouvido: frases curtas, uma ideia cada, contrações. Nunca deixe um corte de cena no meio de uma palavra - alinhe os limites da cena com as lacunas entre as frases. Temporize a narração primeiro, depois estique ou comprima as durações das cenas para encaixá-la (isso se torna o durationInFrames que o remotion-compose usa).

  5. Mix: duck a música para que a narração fique por cima. Esta é a falha de áudio mais comum. Música e narração em volume máximo competem na mesma faixa de frequência e as palavras se perdem. Duck a música para cerca de 25-35% do seu nível sempre que a narração estiver falando, depois traga de volta nos intervalos. Execute niveis_mixagem.js para números concretos de nível e temporização. Mire a narração em torno de -3 a -6 dB (clara, nunca clipando), música com duck em torno de -18 a -22 dB. Entregue o envelope de duck (quais quadros duck, o nível mínimo) ao remotion-compose, que o aplica via callbacks de volume por <Audio>.

  6. Verifique a exportação. Após o remotion-render produzir o MP4, ouça em alto-falantes de laptop e em alto-falantes de celular, não apenas em bons fones de ouvido - a maioria dos espectadores está em alto-falantes ruins. Confirme: cada palavra da narração é inteligível sobre a música, nenhum SFX clipe ou assusta, os cortes parecem travados no ritmo e o momento mais alto não distorce. Se uma palavra for perdida, duck mais fundo nesse trecho; se SFX assustarem, abaixe-os 6 dB.

Barra de Qualidade

O áudio é A+ apenas quando todas essas condições são verdadeiras:

  • Cada corte seco cai em um quadro de batida da grade, nenhum flutua entre batidas.
  • Cada SFX de transição atinge o pico no quadro exato em que seu movimento atinge o pico; risers resolvem na revelação, não antes ou depois.
  • A narração corre ~140-160 wpm com silêncio deliberado antes de linhas chave e depois do CTA; nenhum corte de cena no meio de uma palavra.
  • A narração é totalmente inteligível sobre a música em alto-falantes de celular - verificado, não presumido - porque a música duck para ~30% durante a fala.
  • Exatamente um SFX por transição; a faixa loopa ou termina limpa, sem corte abrupto no quadro final.
  • A licença de cada ativo de áudio permite o uso pretendido (comercial / anúncios pagos / trabalho para clientes) e os requisitos de atribuição são registrados.

NÃO FAÇA

  • Não deixe cortes flutuando fora do ritmo para preservar a duração "natural" de uma cena - estique ou apare a cena para a batida mais próxima.
  • Não coloque música no nível máximo sob a narração; música sem duck é por que a narração soa enlameada. Duck toda vez que alguém fala.
  • Não empilhe múltiplos SFX em uma transição, nem reuse o mesmo whoosh em todo corte - varie-os ou o ouvido para de ouvi-los.
  • Não escreva o JSX <Audio>, defina callbacks startFrom/volume, ou invoque o renderizador aqui - produza os números e entregue-os ao remotion-compose / remotion-render.
  • Não use faixas de rips do YouTube, sites "grátis" sem licença declarada ou um Spotify do cliente - uso comercial precisa de uma fonte real livre de royalties ou licenciada.
  • Não normalize toda a mixagem para ser o mais alto possível; deixe headroom para que o impacto mais alto não clipe.
  • Não deixe a narração correr para caber em uma duração fixa - recorte os visuais para a narração, não a narração para os visuais.

Calculadora: grade de batidas

Script Node auto-contido. Salve como grade_batidas.js e execute com node grade_batidas.js. Ele converte um BPM e um fps nos números de quadro exatos em que seus cortes devem cair, e marca os downbeats. Sem dependências. Entregue os quadros impressos ao remotion-compose como limites de <Sequence from={...}>.

// Grade de batidas. Edite as entradas, depois: node grade_batidas.js
const input = {
  bpm: 120,            // andamento da faixa escolhida
  fps: 30,             // taxa de quadros do projeto
  durationSeconds: 12, // duração do vídeo
  beatsPerBar: 4,      // compasso 4/4; downbeat é a cada 4 batidas
}

const framesPerBeat = (input.fps * 60) / input.bpm
const totalFrames = Math.round(input.durationSeconds * input.fps)
const beats = []
for (let b = 0; ; b++) {
  const frame = Math.round(b * framesPerBeat)
  if (frame > totalFrames) break
  beats.push({ beat: b + 1, frame, downbeat: b % input.beatsPerBar === 0 })
}

console.log('Quadros por batida:', framesPerBeat.toFixed(2), '(' + (60 / input.bpm).toFixed(3) + 's cada)')
console.log('Corte nestes quadros (* = downbeat, melhor para cortes secos):')
for (const b of beats) {
  console.log('  batida ' + String(b.beat).padStart(2), '-> quadro', String(b.frame).padStart(4), b.downbeat ? '*' : '')
}
console.log('Apenas downbeats:', beats.filter((b) => b.downbeat).map((b) => b.frame).join(', '))

Exemplo de saída

Com as entradas acima, o script imprime:

Quadros por batida: 15.00 (0.500s cada)
Corte nestes quadros (* = downbeat, melhor para cortes secos):
  batida  1 -> quadro    0 *
  batida  2 -> quadro   15 
  batida  3 -> quadro   30 
  batida  4 -> quadro   45 
  batida  5 -> quadro   60 *
  batida  6 -> quadro   75 
  batida  7 -> quadro   90 
  batida  8 -> quadro  105 
  batida  9 -> quadro  120 *
  ...
Apenas downbeats: 0, 60, 120, 180, 240, 300, 360

Leitura: a 120 BPM e 30 fps, uma batida tem exatamente 15 quadros. Coloque transições de rotina em qualquer quadro listado e seus cortes mais secos - o corte de introdução ao conteúdo, a revelação do CTA - em um downbeat (0, 60, 120…). Se uma cena quiser durar 70 quadros, encaixe-a em 75 (batida 6) em vez de deixar o corte flutuar em 70. Esses números ajustados são exatamente o que o remotion-compose coloca em <Sequence from={...}>.

Calculadora: níveis de mixagem e temporização de duck

Script Node auto-contido. Salve como niveis_mixagem.js e execute com node niveis_mixagem.js. Ele calcula o nível de música com duck e os intervalos de quadro por linha de narração para duck, para que você entregue ao remotion-compose um envelope concreto em vez de uma sensação. Sem dependências.

// Planejador de mixagem e duck. Edite as entradas, depois: node niveis_mixagem.js
const input = {
  fps: 30,
  musicVolume: 0.8,       // nível da música quando ninguém está falando (0-1)
  duckToPercent: 0.30,    // duck a música para esta fração do seu nível sob a narração
  voVolume: 1.0,          // nível da narração (mantenha a narração como o elemento mais alto)
  duckFadeFrames: 8,      // fade in/out para que o duck não seja um salto brusco
  // Linhas de narração como [inicioSegundos, fimSegundos]; duck música em cada uma, com margem de fade
  voLines: [
    [0.5, 3.2],
    [4.0, 7.5],
    [8.2, 11.0],
  ],
}

const duckedLevel = +(input.musicVolume * input.duckToPercent).toFixed(3)
const toFrame = (s) => Math.round(s * input.fps)
// dB aproximado para referência: 20*log10(nível)
const dB = (v) => (v <= 0 ? '-inf' : (20 * Math.log10(v)).toFixed(1) + ' dB')

console.log('Nível da narração:          ', input.voVolume, '(' + dB(input.voVolume) + ')  <- elemento mais alto')
console.log('Música (sem fala): ', input.musicVolume, '(' + dB(input.musicVolume) + ')')
console.log('Música com duck sob narração:', duckedLevel, '(' + dB(duckedLevel) + ')')
console.log('Fade do duck:    ', input.duckFadeFrames, 'quadros in/out')
console.log('Duck música nestes intervalos de quadro (margem ' + input.duckFadeFrames + 'f cada lado para o fade):')
for (const [start, end] of input.voLines) {
  const a = toFrame(start) - input.duckFadeFrames
  const b = toFrame(end) + input.duckFadeFrames
  console.log('  Narração ' + start + 's-' + end + 's  -> duck quadros', Math.max(0, a), 'a', b)
}

Exemplo de saída

Nível da narração:            1 (0.0 dB)  <- elemento mais alto
Música (sem fala):   0.8 (-1.9 dB)
Música com duck sob narração: 0.24 (-12.4 dB)
Fade do duck:        8 quadros in/out
Duck música nestes intervalos de quadro (margem 8f cada lado para o fade):
  Narração 0.5s-3.2s  -> duck quadros 7 a 104
  Narração 4s-7.5s    -> duck quadros 112 a 233
  Narração 8.2s-11s   -> duck quadros 238 a 338

Leitura: a narração permanece no nível máximo (a coisa mais alta na mixagem), a música fica em 0.8 nos intervalos e duck para 0.24 - cerca de um terço - sempre que alguém fala, com fade em 8 quadros para que a queda não seja um salto brusco. Os intervalos de quadro são exatamente os intervalos que o remotion-compose alimenta no callback volume do <Audio> da música: nível máximo fora dos intervalos, duckedLevel dentro, com rampa linear através da margem de fade. É por isso que as palavras permanecem claras sem que a música desapareça.

Template: folha de pauta de áudio

Copie isto, preencha os campos PREENCHER com suas saídas de grade de batidas e níveis de mixagem, e entregue a folha completa ao remotion-compose. É a única fonte da verdade para cada decisão de áudio no vídeo.

FOLHA DE PAUTA DE ÁUDIO. [PREENCHER: nome do vídeo]. fps [PREENCHER] / [PREENCHER] BPM / [PREENCHER]s total

MÚSICA
  Faixa:                 [PREENCHER: título + fonte]
  Licença:               [PREENCHER: ex. Epidemic Sound comercial / CC0] - atribuição: [PREENCHER: sim/não, texto]
  Nível (sem fala):     [PREENCHER: 0-1]    Duck sob narração: [PREENCHER: 0-1] (~30%)

GRADE DE BATIDAS (de grade_batidas.js) - cortes caem aqui
  Downbeats:       [PREENCHER: 0, 60, 120, ...]
  Cortes secos em:          [PREENCHER: quais downbeats carregam os grandes cortes]

SFX (um por transição; pico NO pico do movimento)
  QUADRO    SFX            PAPEL
  [PREENCHER]   [PREENCHER whoosh]  leva para dentro do swipe (comece ~4f antes, cauda no corte)
  [PREENCHER]   [PREENCHER impacto]  entrada de cartão, cai NO quadro do corte
  [PREENCHER]   [PREENCHER riser]   se constrói em 10-20f, resolve na revelação
  [PREENCHER]   [PREENCHER pop]     elemento de UI aparece

NARRAÇÃO (~150 wpm; cenas encaixam na narração, não o contrário)
  LINHA                                   INÍCIO   FIM    CENA
  [PREENCHER linha]                            [PREENCHER]  [PREENCHER] [PREENCHER]
  (silêncio 8-15f antes de linha chave / após CTA)

ENVELOPE DE DUCK (de niveis_mixagem.js) - intervalos de quadro para abaixar a música
  [PREENCHER: 7-104, 112-233, ...]  fade [PREENCHER]f in/out

REPASSE: remotion-compose conecta <Audio> + callbacks de volume; remotion-render exporta.

referências/fontes-livres-de-royalties

Vídeo comercial precisa de música que você está realmente licenciado para usar - "encontrei no YouTube" não é uma licença e um Spotify do cliente também não. Fontes licenciadas/livres de royalties, por caso de uso:

  • Bibliotecas de assinatura (mais seguras para cliente/comercial/anúncios): Epidemic Sound, Artlist, Musicbed, Soundstripe. Taxa fixa, licença comercial ampla, grandes bibliotecas de SFX, sem atribuição por vídeo. O padrão para trabalho pago.
  • Grátis com termos (verifique cada trilha individualmente): Free Music Archive, Incompetech, Pixabay Music, Uppbeat. Geralmente CC BY (exige atribuição: "Música por [artista] via [fonte]") ou CC0 (domínio público, sem atribuição). Leia o texto da licença - "grátis" nem sempre significa comercial.
  • Bibliotecas de áudio de plataformas: YouTube Audio Library, Facebook Sound Collection. Grátis para uso nessas plataformas, mas os termos podem restringir redistribuição ou uso em anúncios. Seguro apenas se o vídeo ficar na mesma plataforma.
  • Trilhas originais: Compositores em plataformas como Fiverr, SoundBetter, ou Music Vine. Custo único ou taxa de trabalho contratado; você possui o master - o mais seguro possível, mas o mais caro.
  • Evitar: YouTube rips, sites de "música grátis" sem texto de licença, Spotify ou outras faixas de streaming (os EULAs não cobrem sincronização de vídeo), sites de remixes de DJ com status de direitos autorais incerto.

Regra: antes de baixar, confirme por escrito (captura de tela da página de licença ou e-mail) que a trilha cobre o uso pretendido. Se um cliente pedir uma música específica de uma lista de reprodução comercial, sugira encontrar uma substituição com licença equivalente em uma biblioteca de assinatura. Sempre registre o nome do artista, título, fonte e link da licença - seu cliente ou empregador pode precisar mais tarde.

Individual skills in this repo

This repo contains 11 individual skills — each has its own dedicated page.

Captions From Transcript

Produce an accurate, properly timed caption track (SRT or WebVTT) from a video

Kinetic Typography

Put text in motion the right way - title cards, animated captions, lower-thirds, callouts, and word-by-word reveals - with a reading-time-per-word budget so copy holds long enough to read, plus enter/exit timing, weight and size transitions, and type hierarchy in motion. Use when someone asks to

Motion Design Principles

The craft layer for motion: pick the right easing (ease-in / ease-out / ease-in-out / spring), get timing and spacing right, build the anticipation→action→follow-through arc, and apply Disney

Narration Script

Write the spoken voiceover for a tutorial or demo - the actual words, phrased for the ear and synced one-instruction-per-action to what is on screen, with a pacing budget and a confident, jargon-checked tone. Use when someone says

Product Demo Director

Direct the craft of putting a real software UI on screen - cursor choreography, zoom/pan/callout language, screen-recording vs recreated-UI, and making state changes legible with highlights, focus pulls, and slow-downs. Use when filming or recreating an app for a product demo, feature walkthrough, onboarding clip, or release reel and asking

Remotion Compose

Turns a natural-language video brief into a complete, ready-to-preview Remotion composition - extracts duration, scenes, brand colors, aspect ratio, and real copy; plans the frame budget; and writes data-driven React/TypeScript using useCurrentFrame, interpolate, spring, AbsoluteFill, and Sequence, registered in Root.tsx. Use when someone says

Remotion Render

Renders a Remotion composition to MP4 and runs the edit-and-re-render loop - CLI render commands, 1080p/4K/9:16 presets, concurrency tuning, codec selection, batch variants from a JSON data file, and Lambda for cloud rendering. Use when someone says

Remotion Setup

Scaffolds a new Remotion video project wired for Claude Code Agent Skills - Node check, create-video scaffold, skills install, folder conventions, Google Fonts, and a smoke-test render. Use whenever someone wants to start making videos with Remotion and Claude, even just

Screencast Capture

Capture clean raw screen and camera footage for a tutorial or product demo - choosing the recorder (macOS Screenshot toolbar, QuickTime, OBS, Windows Game Bar), setting resolution / frame-rate / cursor / microphone, prepping a distraction-free stage, and recording in retakeable segments. Use when someone says

SkillMedev/tutorial-video-studio

Plan a product demo, feature announcement, or launch video as a beat sheet and shot list BEFORE animating - hook in the first 3s, problem, reveal, proof, CTA - with target duration and pacing per scene type, output as a JSON scene plan that remotion-compose consumes directly. Use when someone says

Social Video Formatter

Reframe and export a finished video for social platforms - 9:16 ↔ 16:9 cropping, burned-in captions, a platform-native first frame, loop design, and per-platform specs (aspect, length, safe areas) for TikTok, Reels, Shorts, X, and LinkedIn. Use when someone says

Habilidades Relacionadas