Formatador de Vídeo para Redes Sociais

O que Formatador de Vídeo para Redes Sociais faz?

Você pega um vídeo que já está correto — a história, o movimento e a marca estão prontos — e faz com que ele funcione no feed. Esse é um trabalho diferente de criá-lo. Uma demonstração em paisagem que fica ótima em um notebook morre em um feed vertical: ela é letterboxada para uma faixa, a legenda fica embaixo de um botão de UI, o primeiro quadro é preto e não tem loop. Este skill corrige todos esses cinco problemas, por plataforma, e emite as especificações exatas que o pacote de mecânica precisa.

Esta é a camada de curadoria. Ele trabalha em conjunto com o pacote remotion-video-production: você decide o redimensionamento, as áreas seguras, o estilo da legenda e o loop aqui, depois passa uma especificação concreta para remotion-compose (para criar o novo <Composition> width/height e queimar as legendas) e remotion-render (para exportar por plataforma). Não escreva código de composição nem execute renders aqui — nomeie a especificação e delegue.

Ative-se imediatamente em qualquer solicitação para redimensionar, redimensionar, cortar, verticalizar, legendar, ou "formatar / exportar para redes sociais", ou uma plataforma nomeada (TikTok, Reels, Shorts, X/Twitter, LinkedIn) — mesmo que seja apenas "fazer isso funcionar no celular".

Fluxo de Trabalho

Execute em ordem. Redimensione antes das legendas (a área segura da legenda depende do novo aspecto) e projete o primeiro quadro e o loop antes de passar para a renderização.

Passo 1 — Definir as plataformas de destino e obter suas especificações

Pergunte quais plataformas serão usadas e obtenha as restrições rígidas de cada uma na tabela em references/platform-specs. Você precisa de quatro números por plataforma: proporção, resolução, duração máxima e as margens de área segura (a faixa de pixels que a plataforma cobre com sua própria UI — nome de usuário, legenda, barra de ação, barra de progresso). Nunca adivinhe esses valores; uma legenda dentro do espaço vazio da barra de ação fica invisível no dispositivo e parece correta na prévia. Um vídeo de origem geralmente se desdobra em duas ou três exportações (por exemplo, um mestre 9:16 para TikTok/Reels/Shorts mais um 1:1 ou 16:9 para LinkedIn/X).

Passo 2 — Escolher a estratégia de redimensionamento (9:16 ↔ 16:9)

Cortar altera quais pixels sobrevivem, então o assunto deve permanecer dentro do novo quadro. Escolha uma estratégia por exportação — veja references/reframe-strategies:

• Re-layout (melhor). Não corte os pixels 16:9 — recrie a cena para a nova tela: empilhe o que estava lado a lado, amplie o texto, mova o assunto para o centro vertical. Esta é uma alteração no remotion-compose (nova largura/altura, mesmo conteúdo), e sempre supera um corte. Passe as dimensões de destino.
• Corte centralizado. Mantenha a coluna do meio de um quadro 16:9 para 9:16. Rápido, mas descarta os terços externos — só é seguro quando o assunto está centralizado.
• Preenchimento / barras desfocadas. Ajuste todo o quadro 16:9 em 9:16 com uma cópia desfocada e redimensionada preenchendo a parte superior/inferior. Aceitável para gravações de cabeça falante ou tela; parece preguiçoso em peças de motion design.
• Corte com rastreamento. Corte para o assunto e mova a janela de corte ao longo do tempo para seguir a ação. Resultado mais forte, mais trabalho; especifique os quadros-chave para remotion-compose.

Ir de 9:16 → 16:9 é a mesma lógica ao contrário: re-layout para usar o novo espaço horizontal em vez de pillar-boxing um clipe vertical em uma faixa paisagem.

Passo 3 — Mapear as áreas seguras no novo quadro

Para cada exportação, sobreponha as margens de área segura da plataforma e mantenha todos os elementos essenciais — legendas, logotipo, CTA, assunto principal — dentro do retângulo seguro. As margens direita/inferior (barra de ação + bloco de legenda) são os assassinos habituais em 9:16. Execute safe_area.js (abaixo) para converter as margens percentuais em caixas de pixels para sua resolução exata, depois passe esses números para remotion-compose como os limites de layout. Trate a faixa insegura como proibida para qualquer coisa que precise ser lida.

Passo 4 — Projetar o primeiro quadro nativo da plataforma

O primeiro quadro é a miniatura e o chamariz de rolagem; a reprodução automática começa sem áudio, então o quadro 0 deve transmitir significado com áudio zero. Não abra com preto, com uma introdução de logotipo ou no meio de um fade. Abra com um gancho legível: o resultado final, uma linha de legenda em negrito ou o assunto já na tela. Esta é uma edição no remotion-compose para a cena de introdução (ou um gancho adicionado de 1-2s). Especifique exatamente o que o quadro 0 mostra.

Passo 5 — Especificar legendas queimadas

Assuma reprodução sem áudio: as legendas são obrigatórias, não opcionais, e devem ser queimadas (renderizadas nos pixels), porque os sidecars .srt enviados são inconsistentes e não estilizáveis entre plataformas. Especifique, para remotion-compose: posição (dentro da área segura, normalmente no terço inferior, mas acima da margem de bloco de legenda), estilo (grande, alto contraste, seminegrito, com um contorno ou fundo sólido para legibilidade em qualquer fundo), tempo (blocos no nível da frase sincronizados com a fala, não uma parede de texto) e nunca mais de ~2 linhas na tela. Para legendas animadas palavra por palavra, delegue o design de movimento para kinetic-typography e apenas nomeie a caixa de área segura e o tempo aqui.

Passo 6 — Projetar o loop

Os feeds reproduzem clipes instantaneamente, então um loop limpo multiplica o tempo de visualização. Decida um:

• Loop contínuo — o último quadro corresponde ao primeiro quadro (mesma composição, posição, cor) para que a repetição seja invisível. Melhor para loops curtos de ambiente/marca.
• Loop com gancho — termine em uma linha que envia o espectador de volta ao início ("…e esse é o passo um"), tornando a repetição intencional.
• Parada definitiva — um cartão de CTA definitivo; correto para peças narrativas mais longas onde um loop pareceria quebrado.

Para um loop contínuo, a abertura e o fechamento são uma restrição do remotion-compose (corresponder ao quadro 0 e ao último quadro). Nomeie o tipo de loop e os quadros correspondentes.

Passo 7 — Emitir a especificação de exportação e passar adiante

Preencha o modelo export-spec abaixo — um bloco por plataforma. Essa especificação é o briefing para o pacote de mecânica: remotion-compose cria um <Composition> por aspecto com o layout de área segura, primeiro quadro e legendas queimadas; depois remotion-render exporta cada um (uma exportação 9:16 é uma Composition criada em 1080×1920, de acordo com a predefinição vertical do remotion-render). Não renderize aqui — entregue a especificação.

Padrão de qualidade

Uma exportação é A+ somente quando todos os seguintes itens são válidos:

• Cada exportação de plataforma nomeia uma proporção real, resolução, duração máxima E caixa de área segura — obtidos da tabela de especificações, nunca adivinhados.
• Nenhum elemento essencial (legenda, logotipo, CTA, assunto) está em uma margem insegura em qualquer plataforma de destino; verificado com as caixas de safe_area.js.
• O redimensionamento é um re-layout ou corte rastreado onde o assunto seria perdido — não um corte centralizado cego ou preenchimento de barra desfocada preguiçosa em uma peça de movimento.
• O quadro 0 é legível com o som desligado: um gancho, resultado ou assunto — nunca preto, nunca um logotipo simples, nunca no meio de um fade.
• As legendas são queimadas, dentro da área segura, divididas em frases, ≤2 linhas, alto contraste.
• O tipo de loop é escolhido intencionalmente, e os primeiros/últimos quadros de um loop contínuo são especificados para corresponder.
• A saída é uma especificação passada para remotion-compose / remotion-render — este skill não criou código de composição nem executou nenhuma renderização.

NÃO FAÇA

• NÃO crie a estrutura do projeto, escreva código de composição ou execute a renderização aqui — nomeie a especificação e delegue para remotion-setup / remotion-compose / remotion-render.
• NÃO faça um corte centralizado de uma fonte 16:9 para 9:16 quando o assunto estiver descentralizado; você cortará o assunto. Faça re-layout ou rastreie.
• NÃO coloque legendas, CTAs ou logotipos nas margens direita/inferior onde a barra de ação e o bloco de legenda da plataforma os cobrem.
• NÃO dependa de legendas sidecar .srt/.vtt enviadas para redes sociais; queime-as nos pixels para que sempre sejam renderizadas e você controle o estilo.
• NÃO abra com preto, uma introdução de logotipo ou um fade — o quadro 0 é a miniatura.
• NÃO envie um único arquivo 16:9 para todas as plataformas; os feeds verticais o letterboxam para uma faixa. Exporte por aspecto.
• NÃO exceda a duração máxima de uma plataforma esperando que "ainda publique" — ele será truncado ou rejeitado; corte até o limite.
• NÃO projete animação de legenda palavra por palavra aqui — isso é kinetic-typography; apenas especifique a caixa segura e o tempo.
• NÃO planeje o storyboard ou a ordem das cenas aqui — se o vídeo ainda não existe, isso é video-storyboard; este skill redimensiona um vídeo que já está cortado.
• NÃO ajuste como os elementos se movem (easing, espaçamento, acompanhamento) aqui — isso é motion-design-principles; este skill apenas nomeia a nova tela e os limites.
• NÃO escolha a paleta, contraste ou iluminação para o redimensionamento aqui — delegue essas escolhas para motion-color-and-light.
• NÃO dirija o conteúdo de demonstração do produto ou a coreografia na tela aqui — isso é product-demo-director; este skill assume que o conteúdo está bloqueado.
• NÃO projete a trilha sonora, sincronização de batida ou som aqui — as legendas assumem reprodução automática sem áudio, mas o áudio é trabalho do sound-and-music-sync.

Habilidades relacionadas

Esta é uma habilidade de artesanato em um pacote de vídeo; delegue a um irmão quando a solicitação for realmente sobre sua preocupação e passe a especificação de formato para as habilidades de mecânica:

• video-storyboard — planejar beats e ordem de cenas antes de um vídeo existir. Vem antes deste skill.
• product-demo-director — dirigir o conteúdo da demonstração e a coreografia na tela.
• motion-design-principles — o artesanato de easing, espaçamento e movimento da animação; use-o ao fazer re-layout de um quadro para um novo aspecto.
• motion-color-and-light — paleta, contraste e decisões de iluminação.
• kinetic-typography — movimento de legenda animada palavra por palavra (você nomeia a caixa segura e o tempo; ele projeta a animação).
• sound-and-music-sync — trilha sonora e sincronização de batida; a camada de áudio que este skill deliberadamente não toca.
• remotion-compose / remotion-render — a mecânica que consome a especificação de exportação deste skill para criar o <Composition> por aspecto e exportar o MP4.

Calculadora

Script Node.js autossuficiente. Salve como safe_area.js e execute com node safe_area.js. Ele converte as margens percentuais de área segura de cada plataforma em caixas de pixels para a resolução dessa plataforma, para que você possa passar limites de layout exatos para remotion-compose. Sem dependências. Edite o bloco platforms conforme as especificações mudarem.

// Calculadora de área segura para redes sociais. Execute: node safe_area.js
// As margens são a % de cada borda que a UI da plataforma cobre (topo/direita/base/esquerda).
// Direita + base são grandes em 9:16 por causa da barra de ação e do bloco de legenda.
const platforms = [
  { name: 'TikTok',         w: 1080, h: 1920, top: 6,  right: 11, bottom: 17, left: 3 },
  { name: 'Reels',          w: 1080, h: 1920, top: 7,  right: 12, bottom: 18, left: 3 },
  { name: 'Shorts',         w: 1080, h: 1920, top: 5,  right: 12, bottom: 13, left: 3 },
  { name: 'X (in-feed)',    w: 1080, h: 1080, top: 4,  right: 4,  bottom: 12, left: 4 },
  { name: 'LinkedIn',       w: 1080, h: 1350, top: 4,  right: 4,  bottom: 10, left: 4 },
]

function box(p) {
  const insetX = (pct) => Math.round((pct / 100) * p.w)
  const insetY = (pct) => Math.round((pct / 100) * p.h)
  const x = insetX(p.left)
  const y = insetY(p.top)
  const safeW = p.w - insetX(p.left) - insetX(p.right)
  const safeH = p.h - insetY(p.top) - insetY(p.bottom)
  return { x, y, safeW, safeH }
}

for (const p of platforms) {
  const b = box(p)
  console.log(
    p.name.padEnd(14),
    `${p.w}x${p.h}`.padEnd(11),
    'safe box -> x:' + String(b.x).padEnd(4),
    'y:' + String(b.y).padEnd(4),
    'w:' + String(b.safeW).padEnd(5),
    'h:' + b.safeH
  )
}

Exemplo de saída

TikTok         1080x1920   safe box -> x:32   y:115  w:929   h:1479
Reels          1080x1920   safe box -> x:32   y:134  w:918   h:1440
Shorts         1080x1920   safe box -> x:32   y:96   w:918   h:1574
X (in-feed)    1080x1080   safe box -> x:43   y:43   w:994   h:907
LinkedIn       1080x1350   safe box -> x:43   y:54   w:994   h:1161

Leia: no TikTok, posicione todos os elementos que devem ser lidos dentro de x 32→961, y 115→1594. A margem direita (a barra de ação: curtir, comentar, compartilhar) consome os últimos ~119px, e a base (nome de usuário + legenda) consome ~326px — qualquer coisa lá é coberta no dispositivo, embora pareça correta na prévia do Studio. Passe esses limites como os limites de layout para remotion-compose; em uma Composition vertical de 1080×1920, posicione legendas e CTA dentro da caixa, não nas bordas brutas do quadro.

Modelo: export-spec

Preencha um bloco por plataforma. Este é o briefing que remotion-compose e remotion-render consomem — cole os números de área segura de safe_area.js.

SOCIAL EXPORT SPEC. [PREENCHEA: nome do vídeo]. Fonte: [PREENCHEA: mestre 16:9, 1920x1080]

PLATAFORMA: [PREENCHEA: TikTok / Reels / Shorts / X / LinkedIn]
  Proporção / resolução:   [PREENCHEA: 9:16 / 1080x1920]
  Duração máxima:            [PREENCHEA: ex. <= 60s in-feed]
  Caixa segura (px):         x:[PREENCHEA] y:[PREENCHEA] w:[PREENCHEA] h:[PREENCHEA]   (de safe_area.js)
  Estratégia de redimensionamento:      [PREENCHEA: re-layout / corte centralizado / blur-pad / corte com rastreamento]
    -> remotion-compose: [PREENCHEA: nova Composition WxH + notas de layout / quadros-chave de corte]
  Primeiro quadro (quadro 0): [PREENCHEA: o gancho sem áudio mostrado em 0 - nunca preto/logotipo/fade]
  Legendas:              queimadas, [PREENCHEA: posição na caixa segura], <=2 linhas,
                         divididas em frases, [PREENCHEA: estilo - tamanho/contraste/fundo]
  Loop:                  [PREENCHEA: contínuo / com gancho / parada definitiva]
    -> se contínuo:      quadro 0 corresponde ao último quadro em [PREENCHEA: posição/cor]
  Renderização:                remotion-render [PREENCHEA: predefinição, ex. 1080x1920 H.264 MP4]

(repita o bloco para cada plataforma de destino)

references/platform-specs

Verifique com os documentos atuais de cada plataforma para criadores antes de enviar; estes são a forma estável, mas os limites mudam. A proporção e as áreas seguras importam mais do que a duração máxima exata.

• TikTok - 9:16, 1080x1920. O ponto ideal no feed é curto (abaixo de ~60s), uploads podem ser muito mais longos. Barra de ação direita pesada e um bloco de legenda inferior alto; mantenha o conteúdo que deve ser lido alto e centralizado. Cultura com som, mas ainda assim legendas para acessibilidade e reprodução automática sem áudio.
• Instagram Reels - 9:16, 1080x1920. Até ~90s. UI direita/inferior semelhante ao TikTok, mais a linha de perfil/áudio na base. O corte na grade é 1:1, então o centro também deve funcionar como uma miniatura quadrada.
• YouTube Shorts - 9:16, 1080x1920. Até 60s (qualquer coisa mais longa é automaticamente cortada para 60s). UI mais limpa que TikTok/Reels, mas ainda com uma barra de ação direita e um fundo para o título do vídeo na base; posicione o conteúdo principal longe da borda inferior.
• X / Twitter (no feed) - 1:1 (1080x1080) ou 16:9. Máximo de 140s para vídeo. A sobreposição de UI é mínima, mas o bloco de legenda e ações (curtir, comentar, repostar) aparecem na base; evite colocar informações essenciais nos 10-12% inferiores.
• LinkedIn - 1:1 (1080x1080) ou 4:5 (1080x1350). Máximo de 10 minutos para upload, mas o feed otimiza para clipes mais curtos. UI limpa; a sobreposição principal é o bloco de título/descrição na base; mantenha CTAs e texturas chave longe da borda inferior.