Vídeo Curto
Engenhe um vídeo 9:16 que sobreviva ao swipe. Vídeo curto não é um pequeno filme de lançamento — é uma máquina de retenção: um gancho que conquista o primeiro segundo, quebras de padrão que resetam a atenção a cada poucos segundos e, frequentemente, um loop que compra tempo de exibição acima de 100%. O ofício é o timing, não o polimento.
Quando usar
- Reels / TikTok / YouTube Shorts (7–60s, vertical 9:16).
- Edição de retenção: corrigindo quedas, adicionando quebras de padrão, apertando o ritmo.
- Ganchos, loops perfeitos, modelos repetíveis de vídeo curto (um design, muitos tópicos).
Estrutura da história (o contrato de retenção)
A narração em vídeo curto é um contrato com o polegar do espectador: cada segundo deve reconquistar o próximo. A narrativa é moldada de trás para frente a partir da curva de retenção, não para frente a partir de uma introdução. Trave estes antes de tocar na linha do tempo.
- Uma ideia por vídeo. Um vídeo curto carrega exatamente um payoff. Uma segunda ideia divide a atenção e a curva cai no meio — faça dela um segundo vídeo. Se você não consegue nomear o único aprendizado em uma frase, você ainda não tem um vídeo curto.
- Abra um loop nos primeiros ~3s, feche-o por último. O gancho coloca uma pergunta ou lacuna (o loop aberto); o payoff a responde. O espectador fica porque o loop está aberto — então nunca o responda cedo, e nunca enterre o payoff sob uma preparação.
- Sem ar morto. Cada batida ou avança a ideia ou reseta a atenção. Corte tudo o que não fizer nenhum dos dois. Silêncio, rampas lentas, introduções desnecessárias ("ei pessoal, neste vídeo…") são onde os espectadores dão swipe.
- Por que a curva, não o corte, é a unidade de trabalho. O algoritmo distribui o que mantém a curva de retenção por segundo plana; uma edição "boa" que achata a curva perde para uma feia que a mantém alta. Você está editando a curva, e o gancho controla tudo depois dele — corrija-o primeiro.
O esqueleto narrativo (o arco Gancho → Preparação → Corpo → Payoff/loop é orçado na tabela abaixo):
| Movimento | Trabalho na história | Falha se perdido |
|---|---|---|
| Gancho | Abrir o loop; prometer o payoff | Swipe nos primeiros 3s |
| Manutenção da tensão | Manter a lacuna aberta através do corpo | Meio chato, queda no meio |
| Payoff | Fechar o loop — a única ideia, entregue | "Perdi meu tempo", sem compartilhamento |
| Loop / CTA | Retornar ao quadro 0, ou um único pedido claro | Sem re-exibição, sem ação |
(A tabela O arco de retenção abaixo atribui segundos a cada movimento; esta seção é a lógica narrativa e a ordenação por trás disso. Gramática do gancho lista os arquétipos de gancho.)
A única métrica que impulsiona tudo
Retenção, não valor de produção. O algoritmo distribui o que mantém os espectadores; ~87% decidem ficar ou dar swipe em 3 segundos, e o limite para distribuição está perto de 70%+ de visualização média (Shorts ~73%, TikTok ~78%, Reels ~65%). Cada decisão abaixo é negociada contra essa curva. Um plano impecável que entedia aos 0:04 perde para um feio que mantém.
O arco de retenção
| Batida | Trabalho | Orçamento (de um short de 20s) |
|---|---|---|
| Gancho (0–1s) | Um quadro + uma linha que cria um loop aberto | 0–1s |
| Preparação | Pagar por que assistir — promessa, apostas ou a lacuna | 1–4s |
| Corpo | Entregar valor em batidas; uma ideia por batida | 4–17s |
| Payoff / loop | Fechar o loop — ou alimentá-lo de volta ao quadro 0 | 17–20s |
Escalone o corpo, nunca o gancho. Um short de 60s tem um corpo mais longo e mais batidas — o mesmo gancho de 1 segundo.
Gramática do gancho (primeiro ~1s)
O gancho é uma frase + um visual que abre uma lacuna de curiosidade que o cérebro precisa fechar. Escolha um padrão e comprometa-se:
| Tipo de gancho | Forma | Melhor para |
|---|---|---|
| Loop aberto | "A razão pela qual seu X continua Y…" (resposta adiada) | a maioria do conteúdo |
| Promessa direta | "3 maneiras de ___ em 30 segundos" | educacional / lista |
| Quebra de padrão | snap-zoom / whip-pan / incompatibilidade visual no quadro 1 | entretenimento |
| Negação | "Pare de fazer ___" / "Você está ___ errado"" | opiniões fortes |
Duas regras: a linha do gancho está na tela como texto no quadro 1 (85% assistem sem som), e o visual mais marcante também é o primeiro quadro — nunca uma entrada lenta. Segure um quadro de abertura forte; não faça fade-up a partir do preto.
Quebras de padrão e ritmo de corte
Uma quebra de padrão é qualquer mudança que reseta a atenção: um corte duro, zoom, inserção de b-roll, efeito sonoro, pop de legenda ou mudança de ângulo. Em vídeo curto, a densidade é alta — uma mudança visual a cada ~2–4 segundos; vídeos com uma interrupção aproximadamente a cada 4s mantêm ~58% contra ~41% para uma cabeça falante estática. O assassino é um meio chato: o TikTok reduz a distribuição quando a curva de retenção achata, então nunca costure o corpo com takes de baixa energia.
// Conduza cada interrupção pelo QUADRO, não pelo relógio — renderiza deterministicamente.
import { useCurrentFrame } from "remotion";
const fps = 30;
const cuts = [0, 1.2, 3.0, 5.4, 8.0, 11.2, 14.0]; // segundos — desiguais de propósito
const frame = useCurrentFrame();
const shot = cuts.findIndex((t, i) => frame < (cuts[i + 1] ?? Infinity) * fps);
Varie o intervalo — um metrônomo soa como tédio; cortes desiguais soam como momentum. Um zoom punch-in é a interrupção mais barata que não precisa de novo material:
import { useCurrentFrame, interpolate, spring, useVideoConfig } from "remotion";
const PunchIn = ({ at, children }) => {
const frame = useCurrentFrame(); const { fps } = useVideoConfig();
const s = spring({ frame: frame - at * fps, fps, config: { damping: 12, stiffness: 200 } });
const scale = interpolate(s, [0, 1], [1, 1.12]); // snap para 112% no ritmo
return <div style={{ transform: `scale(${scale})`, transformOrigin: "50% 45%" }}>{children}</div>;
};
Legendas
A maioria dos espectadores assiste sem som, então as legendas na tela não são opcionais — elas carregam o conteúdo e funcionam como uma quebra de padrão quando cada frase aparece. Mantenha 4–7 palavras por linha, alto contraste, dentro da área segura. Não reimplemente animação de legenda aqui — use a skill caption-animation para timing palavra por palavra, destaque karaokê e estilo; esta skill apenas coloca legendas na linha do tempo de retenção e dentro da zona segura 9:16.
Loops e re-exibição
Um loop perfeito conta cada re-exibição como tempo de exibição novo — um loop limpo de 8s assistido 3× é 300% de visualização, o sinal mais forte possível. Duas técnicas: combine o último quadro com o primeiro (mesma composição, posição, cor) para que o corte seja invisível, e escreva um loop de frase — formate o gancho para que o payoff alimente de volta o quadro 0 ("…e é por isso que eu nunca —" → loop para o início). O melhor comprimento para re-exibição é ~7–15s.
Áreas seguras 9:16
Componha dentro da zona segura universal para que a UI da plataforma nunca cubra texto ou rostos.
| Zona | Pixels (1080×1920) | Evitar |
|---|---|---|
| Segura universal (todas as plataformas) | centro 900×1400 | qualquer coisa crítica fora dela |
| Superior | manter limpo ~120px | perfil / UI de som |
| Inferior | manter limpo ~320px | legendas, CTA, hashtags, barra de áudio |
| Direita | manter limpo ~120px | botões like / comentário / compartilhar |
Coloque o texto do gancho e o assunto principal na caixa central de 900×1400. Reserve os ~320px inferiores mesmo que pareça vazio no editor — é onde a plataforma pinta suas próprias legendas e botões.
Lista de verificação de saída
- A linha do gancho está como texto na tela no quadro 1; o visual mais forte é o primeiro quadro (sem fade-up).
- Um loop aberto / promessa definido nos primeiros ~4s.
- Uma quebra de padrão visual a cada ~2–4s; intervalos desiguais; sem meio chato.
- Legendas presentes (via
caption-animation), 4–7 palavras, dentro da área segura. - Loop fechado — primeiro/último quadro combinado ou uma frase que alimenta o quadro 0.
- Composto dentro da caixa central 900×1400; 320px inferiores / 120px superiores / 120px direitos mantidos limpos.
- Cada valor animado derivado de
useCurrentFrame()— sem timers de CSS/biblioteca.
Entregar e verificar (stills renderizados → MP4)
Helper empacotado (
scripts/): monte seus stills comscripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png, depois afirme a codificação comscripts/probe-mp4.sh out.mp4 [WxH] [fps]. Vejascripts/README.md.
O short é entregue como uma composição Remotion (<Composition> + esquema zod + defaultProps) — cada corte, punch-in e interrupção conduzido por useCurrentFrame(), nunca Date.now() / Math.random() / timers. Entregável = out/*.mp4 + o projeto (re-renderizar por tópico). Vertical 9:16 (1080×1920) é o padrão.
Verificar loop — renderizar stills → inspecionar → codificar. Três quadros testam as três coisas que fazem ou quebram a retenção: o gancho, o ritmo e a costura do loop.
# Stills no gancho / meio do corpo / último quadro — COM PROPS ENVIADOS (o tópico real, não padrões)
npx remotion still Short out/f-hook.png --frame=10 --props='{"topic":"...","hook":"..."}' # ~primeiros 3s lê instantaneamente
npx remotion still Short out/f-mid.png --frame=N --props='{"topic":"...","hook":"..."}'
npx remotion still Short out/f-end.png --frame=L --props='{"topic":"...","hook":"..."}' # L = duracaoEmQuadros-1
# Inspecionar cada PNG:
# - Quadro GANCHO (~quadro 0-ish / primeiros 3s): linha do gancho está como texto na tela e lê instantaneamente; visual mais forte já presente (sem fade-up)
# - Costura LOOP: comparar f-hook(quadro 0) vs f-end(último quadro) — mesma composição/posição/cor para um corte de loop invisível
# - Área segura 9:16: gancho + assunto principal dentro da caixa central 900x1400; limpo do topo ~12%, fundo ~20-35% (legendas/CTA/áudio), barra de ação direita
npx remotion render Short out/short.mp4 --props='{"topic":"...","hook":"..."}' # codificar uma vez que os stills verificam
npx remotion render Short out/demo.gif --codec=gif # clipe de prova README
Por tópico / lote: verifique UM tópico via stills antes de renderizar todos. Use npx remotion compositions para durationInFrames/fps para escolher os quadros do meio e final.
Antes de terminar:
- Os stills renderizam limpos no gancho, meio e último quadro — sem erros.
- O quadro do gancho lê instantaneamente (texto na tela + visual mais forte na frente, sem fade-up); primeiro vs últimos quadros combinam para uma costura de loop limpa.
- Gancho + assunto + legendas estão dentro da caixa segura central 9:16 900×1400 em cada quadro verificado.
- Apenas conduzido por quadro — sem
Date.now()/Math.random()/ timers; cortes desiguais, sem meio chato. - Os props enviados de um tópico real (não
defaultProps) renderizam corretamente; MP4 codificado, GIF opcional.
Arquivos de referência
references/retention-pacing.md— uma composição Remotion<Short>completa e executável: um agendador de tomadas conduzido por quadro com cortes desiguais, a quebra de padrão PunchIn, um gancho na tela, uma sobreposição de área segura 9:16 e um loop perfeito primeiro/último quadro. Além de uma biblioteca de padrões de gancho, um método de depuração de curva de retenção, mapas de zona segura por plataforma e o padrão de renderização em lote template×tópico.