lower-thirds

Letreiros Inferiores (Lower Thirds)

Crie um letreiro inferior limpo e com a marca — a legenda de nome/função que vive na faixa inferior do quadro — que anima, segura o tempo suficiente para leitura e sai sem roubar o foco da cena. O segredo está na contenção: um revelar nítido, uma hierarquia tipográfica forte, posicionamento correto na área segura e um modelo que gera uma lista completa de participantes.

Quando usar

• Legendas de nomes para entrevistados/apresentadores, listas de painelistas, legendas de cabeças falantes.
• Títulos no estilo broadcast, barras de notícias, placas de podcast/webinar.
• Modelar um design para uma lista de nomes/títulos → muitos clipes (o retorno).

Anatomia

Um letreiro inferior tem duas linhas de texto mais uma faixa gráfica, posicionadas na faixa inferior:

Elemento	Função	Tratamento tipográfico
Nome (primário)	Quem	Maior, mais pesado, espaçamento mais fechado
Função/título (secundário)	O que/onde	~45–60% do tamanho do nome, peso mais leve, geralmente na cor de destaque da marca
Barra / painel / destaque	Lê contra qualquer fundo	Sólido ou 70–85% de opacidade; uma linha de destaque conecta à marca

Mantenha-se em duas linhas. Uma linha de nome + uma linha de função é todo o trabalho — linhas extras enfraquecem a hierarquia e apertam a área segura.

Três regras que evitam títulos com aspecto amador

1. Nunca corte o título abruptamente ao aparecer ou sumir. Um aparecer/desaparecer puro parece um erro. Mesmo um fade ou deslizamento de 12 quadros faz parecer produzido.
2. Escalone, não bata tudo de uma vez. Anime a barra primeiro, depois o nome, depois a função, cada um com 3–6 quadros de intervalo. Tudo chegando ao mesmo tempo parece sem graça; uma pequena cascata parece planejado.
3. Segure o tempo suficiente para ler duas vezes. Aproximadamente 3–5s na tela (leia em voz alta duas vezes). Muito curto e é perdido; muito longo e incomoda. Anime entrada e saída, nunca no meio do segmento.

Animações de entrada e saída

Escolha uma linguagem de movimento e reuse-a. Os revelares mais confiáveis e de aparência premium:

Revelação	Sensação	Como
Deslizar + desvanecer	Limpo, padrão	Transladar ~24–40px enquanto desvanece; easing de saída na entrada
Barra de varredura	Broadcast	Uma barra escala/varre (scaleX/clip), o texto aparece atrás dela
Revelação por máscara	Premium	Recortar o texto a um retângulo móvel para que as letras "apareçam progressivamente"

Use easing assimétrico: um ease-out rápido (cubic-bezier(.22,1,.36,1)) na entrada, um ease-in mais rápido na saída. Saia mais rápido do que entrou (~⅔ da duração) para que o título saia do caminho.

/* Revelação por máscara: texto aparece da esquerda para a direita, sem plugin */
.lt-name { clip-path: inset(0 100% 0 0); animation: wipe .5s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }

Temporização de entrada, pausa e saída

Pense em três fases. Orçamente em quadros, não em sensações (a 30fps):

Fase	Orçamento	Nota
Entrada	12–18f (0.4–0.6s)	Escalonado: barra → nome → função
Pausa	90–150f (3–5s)	A pausa legível; ajuste com o comprimento da linha
Saída	8–12f (0.27–0.4s)	Mais rápida que a entrada

No código, direcione cada estado a partir do quadro atual (ou de uma linha do tempo pausada), não do tempo real — um renderizador de vídeo exige quadros determinísticos. Expresse entrada/pausa/saída como uma única curva de progresso para que o mesmo componente funcione ao vivo no navegador e quadro a quadro em um renderizador.

Área segura e convenções de broadcast

O letreiro inferior precisa sobreviver a qualquer tela e interface de plataforma. Componha dentro da área segura para títulos (cerca de 90% interno / margem de 5%) e respeite os elementos da plataforma:

Quadro	Âncora	Evitar
16:9 (1920×1080)	Borda esquerda a ~5% de margem; linha de base a ~80–85%	5% externo (título seguro), 10% externo de ação segura
9:16 (1080×1920)	Mesma margem esquerda; levante a faixa	~18% inferior (legendas/UI), ~12% superior
1:1 (1080×1080)	Faixa inferior, centro-esquerda	5% externo

Âncore à esquerda e cresça para a direita para que nomes de comprimentos diferentes fiquem fixos e nunca se recentralizem de forma estranha. Mantenha a linha de função dentro da mesma margem esquerda do nome. Para 9:16, não estacione o título no fundo — legendas e botões da plataforma ficam lá.

Hierarquia tipográfica e estilo da marca

Hierarquia é todo o design. Torne o nome inconfundivelmente dominante:

• Contraste de tamanho ≥ 1,6× (nome vs função). Se estiver na dúvida, aumente o nome, não a função.
• Peso + cor: nome em negrito/branco quase total; função em peso mais leve e uma cor de destaque da marca (um destaque, usado consistentemente).
• Contraste para legibilidade: o texto fica sobre imagens desconhecidas. Use uma barra sólida/semiopaca, um véu sutil ou uma sombra de texto suave para que leia sobre placas claras e escuras.
• Bloqueio de marca: fixe fonte, cor de destaque, estilo da barra e raio dos cantos em um objeto de tema para que todos os títulos de uma série sejam iguais.

Modelar um design para uma lista

A razão de construir isso em código: mude o texto/dados, re-exporte — sem re-animar. Torne nome/função/tema propriedades, nunca codificados, depois mapeie uma lista para instâncias.

const LISTA = [
  { nome: "Ada Lovelace",  funcao: "Fundadora, Motores Analíticos" },
  { nome: "Grace Hopper",  funcao: "Contra-Almirante, Marinha dos EUA" },
  { nome: "Alan Turing",   funcao: "Matemático" },
];
// Um design de <LowerThird>; mapeie a lista → muitas instâncias (sequencie-as em um renderizador)
{LISTA.map((p, i) => <LowerThird key={p.nome} {...p} tema={MARCA} quadroInicial={i * 150} />)}

Em um renderizador, torne a lista uma propriedade de entrada e renderize uma vez por linha (--props) para emitir um clipe com a marca por pessoa — mesma animação, mesma marca, só o texto muda. Veja references/lower-third-component.md para o componente completo executável e o script de lote.

Checklist de saída

• Apenas duas linhas: nome dominante, função secundária (contraste de tamanho ≥ 1,6×).
• Animado na entrada e saída (sem corte abrupto); entrada escalonada barra→nome→função; saída mais rápida.
• Pausa de 3–5s (legível duas vezes); movimento apenas nas extremidades, nunca no meio do segmento.
• Ancorado à esquerda dentro da área segura; em 9:16 a faixa levantada acima da zona de UI dos 18% inferiores.
• Texto legível sobre qualquer placa (barra/véu/sombra); um destaque de marca em todo o letreiro.
• Nome/função/tema são propriedades — um modelo renderiza a lista inteira.

Entregue e verifique (stills renderizados → MP4)

Ajudante empacotado (scripts/): monte seus stills com scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png, depois verifique a codificação com scripts/probe-mp4.sh out.mp4 [LxA] [fps]. Veja scripts/README.md.

O letreiro inferior é entregue como uma composição do Remotion (<Composition> + esquema zod + defaultProps, nome/função/tema como propriedades) — entrada/pausa/saída todas dirigidas por useCurrentFrame(), nunca Date.now() / Math.random() / timers. Entregável = out/*.mp4 + o projeto (re-renderizar por linha da lista). 9:16 vertical (1080×1920) é o padrão.

Loop de verificação — renderize stills → inspecione → codifique. Amostre as três fases para detectar um erro de escalonamento ou área segura antes de codificar (ou processar toda a lista).

# Stills na entrada / pausa / saída — COM PROPRIEDADES REAIS (uma linha real da lista, não padrões)
npx remotion still LowerThird out/f-entrada.png --frame=10  --props='{"nome":"Ada Lovelace","funcao":"Fundadora, Motores Analíticos"}'
npx remotion still LowerThird out/f-pausa.png --frame=75  --props='{"nome":"Ada Lovelace","funcao":"Fundadora, Motores Analíticos"}'
npx remotion still LowerThird out/f-saida.png  --frame=N   --props='{"nome":"Ada Lovelace","funcao":"Fundadora, Motores Analíticos"}'

# Inspecione cada PNG — foque no quadro de PAUSA (totalmente na tela):
#  - hierarquia se mantém: nome dominante (>=1.6x função), função no destaque da marca; ambos totalmente revelados, não no meio da varredura
#  - bloqueio de marca: fonte, cor de destaque, barra/véu corretos; legíveis sobre a placa
#  - área segura 9:16: faixa LEVANTADA acima da zona de UI ~20-35% inferior, livre do ~12% superior e da barra lateral direita; ancorada à esquerda dentro da área segura
#  - quadros de entrada/saída mostram revelação parcial (a animação realmente executa), não um corte abrupto

npx remotion render LowerThird out/letreiro-inferior.mp4 --props='{"nome":"Ada Lovelace","funcao":"Fundadora, Motores Analíticos"}'
npx remotion render LowerThird out/demo.gif --codec=gif                # Clipe de prova para README

Processamento em lote da lista: verifique UMA linha com stills antes de renderizar todos os nomes — detecte um erro de layout/transbordamento uma vez, não N vezes. Use npx remotion compositions para durationInFrames/fps e escolha os quadros de pausa e saída.

Antes de terminar:

1. Os stills renderizam limpos na entrada, pausa e saída — sem fontes/ativos da marca faltando.
2. No quadro de pausa: nome dominante sobre função, destaque da marca + barra corretos, totalmente (não parcialmente) revelados.
3. A faixa está dentro da área segura 9:16 — levantada acima da zona de UI inferior, livre do topo e da barra lateral direita — em todos os quadros verificados.
4. Dirigido apenas por quadros — sem Date.now() / Math.random() / timers; entrada/saída mostram movimento, nunca um corte abrupto.
5. Uma linha real da lista (não defaultProps) renderiza corretamente; MP4 codificado, GIF opcional.

Arquivos de referência

• references/lower-third-component.md — um letreiro inferior completo e executável: um componente Remotion com entrada escalonada usando mola, pausa legível e saída mais rápida dirigida puramente por quadros; um objeto de tema tipado para bloqueio de marca; o padrão de sequenciamento lista→muitas instâncias; um script de renderização em lote por linha; além de uma versão CSS/HTML sem dependências do mesmo design com variantes de revelação por máscara e barra de varredura.