Lower Thirds
Construa um lower third limpo e com a marca — a legenda de nome/cargo que fica na faixa inferior do quadro — que anima ao entrar, permanece tempo suficiente para ser lido e sai sem roubar a cena. O artesanato é a contenção: um revelar nítido, uma hierarquia tipográfica forte, posicionamento correto na área segura e um modelo que impulsiona uma lista inteira de palestrantes.
Quando usar
- Placas de nome para palestrantes/entrevistas, listas de painéis, legendas de cabeças falantes.
- Títulos estilo transmissão, barras de notícias, placas de nome para podcasts/webinars.
- Modelagem de um design para uma lista de nomes/títulos → muitos clipes (a recompensa).
Anatomia
Um lower third tem duas linhas de texto mais um fundo gráfico, colocado na faixa inferior:
| Elemento | Função | Tratamento de tipo |
|---|---|---|
| Nome (primário) | Quem | Maior, mais pesado, tracking mais apertado |
| Cargo/título (secundário) | O que/onde | ~45–60% do tamanho do nome, peso mais leve, geralmente uma cor de destaque da marca |
| Barra / painel / destaque | Lê contra qualquer fundo | Sólido ou opacidade 70–85%; uma régua de destaque conecta à marca |
Mantenha em duas linhas. Uma linha de nome + linha de cargo é todo o trabalho — linhas extras corroem a hierarquia e apertam a área segura.
Três regras para evitar títulos com aparência barata
- Nunca corte um título abruptamente ligado ou desligado. Um simples aparecer/desaparecer parece um erro. Mesmo um fade ou deslize de 12 frames faz parecer produzido.
- Escalone, não bata tudo de uma vez. Anime a barra primeiro, depois o nome, depois o cargo, cada um com deslocamento de 3–6 frames. Tudo chegando ao mesmo tempo parece plano; uma cascata curta parece projetado.
- Segure 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/saída, nunca no meio do segmento.
Animações de entrada e saída
Escolha uma linguagem de movimento e reutilize-a. Os reveladores mais confiáveis e com aparência premium:
| Revelação | Sensação | Como |
|---|---|---|
| Deslizar + fade | Limpo, padrão | Transladar ~24–40px enquanto desvanece; ease-out na entrada |
| Barra de wipe | Transmissão | Uma barra escala/varre (scaleX/clip), texto desvanece atrás dela |
| Revelação com máscara | Premium | Recortar texto a um retângulo em movimento para que as letras "apareçam varrendo" |
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 com máscara: texto aparece varrendo da esquerda para a direita, sem plugin necessário */
.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); } }
Sincronismo de entrada/saída e tempo de exibição
Pense em três fases. Orce em frames, não em sensações (a 30fps):
| Fase | Orçamento | Nota |
|---|---|---|
| Entrada | 12–18f (0.4–0.6s) | Escalonado: barra → nome → cargo |
| Exibição | 90–150f (3–5s) | O tempo legível; dimensione com o comprimento da linha |
| Saída | 8–12f (0.27–0.4s) | Mais rápido que a entrada |
No código, conduza cada estado a partir do frame atual (ou de uma linha do tempo pausada), não do tempo de relógio — um renderizador de vídeo exige frames determinísticos. Expresse entrada/exibição/saída como uma única curva de progresso para que o mesmo componente funcione ao vivo em um navegador e frame a frame em um renderizador.
Área segura e convenções de transmissão
O lower third deve sobreviver em todas as telas e UIs de plataforma. Componha dentro da área segura de título (~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 ~80–85% para baixo | 5% externo (seguro para título), 10% externo seguro para ação |
| 9:16 (1080×1920) | Mesma margem esquerda; levante a faixa para cima | ~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 permaneçam fixos e nunca se recentralizem de forma estranha. Mantenha a linha de cargo dentro da mesma margem esquerda do nome. Para 9:16, não coloque o título no fundo — legendas e botões da plataforma ficam lá.
Hierarquia tipográfica e estilização de marca
Hierarquia é todo o design. Torne o nome inconfundivelmente dominante:
- Contraste de tamanho ≥ 1,6× (nome vs cargo). Se não tiver certeza, aumente o nome, não o cargo.
- Peso + cor: nome em negrito/quase branco; cargo em peso mais leve e uma cor de destaque da marca (um destaque, usado consistentemente).
- Contraste para legibilidade: o texto fica sobre filmagens desconhecidas. Use uma barra sólida/semitransparente, um scrim sutil ou uma sombra de texto suave para que seja legível tanto em planos claros quanto escuros.
- Consistência da marca: fixe fonte, cor de destaque, estilo de barra e raio de canto em um único objeto de tema para que cada título em uma série corresponda.
Modelagem de um design para uma lista
A razão para construir isso em código: mude o texto/dados, re-exporte — sem reanimar. Torne nome/cargo/tema propriedades, nunca codificados, e mapeie uma lista para instâncias.
const ROSTER = [
{ name: "Ada Lovelace", role: "Founder, Analytical Engines" },
{ name: "Grace Hopper", role: "Rear Admiral, US Navy" },
{ name: "Alan Turing", role: "Mathematician" },
];
// Um design <LowerThird>; mapeie a lista → muitas instâncias (sequencie-as em um renderizador)
{ROSTER.map((p, i) => <LowerThird key={p.name} {...p} theme={BRAND} startFrame={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, apenas o texto muda. Consulte references/lower-third-component.md para o componente executável completo e o script de lote.
Lista de verificação de saída
- Apenas duas linhas: nome dominante, cargo secundário (contraste de tamanho ≥1,6×).
- Animado na entrada e saída (sem corte abrupto); entrada escalonada barra→nome→cargo; saída mais rápida.
- Segure 3–5s (legível duas vezes); movimento apenas nas extremidades, nunca no meio do segmento.
- Âncora à esquerda dentro da área segura de título; faixa 9:16 levantada acima da zona de UI inferior de 18%.
- Texto legível sobre qualquer plano (barra/scrim/sombra); um destaque de marca consistente.
- Nome/cargo/tema são propriedades — um modelo renderiza a lista inteira.
Entregar e verificar (stills renderizados → MP4)
Ajudante empacotado (
scripts/): organize seus stills comscripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png, depois verifique a codificação comscripts/probe-mp4.sh out.mp4 [WxH] [fps]. Consultescripts/README.md.
O lower third é enviado como uma composição Remotion (<Composition> + schema zod + defaultProps, nome/cargo/tema como propriedades) — entrada/exibição/saída tudo orientado 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 — renderizar stills → inspecionar → codificar. Amostre as três fases para detectar um erro de escalonamento ou área segura antes de codificar (ou processar em lote a lista inteira).
# Stills na entrada / exibição / saída — COM PROPRIEDADES REAIS (uma linha real da lista, não padrões)
npx remotion still LowerThird out/f-enter.png --frame=10 --props='{"name":"Ada Lovelace","role":"Founder, Analytical Engines"}'
npx remotion still LowerThird out/f-dwell.png --frame=75 --props='{"name":"Ada Lovelace","role":"Founder, Analytical Engines"}'
npx remotion still LowerThird out/f-exit.png --frame=N --props='{"name":"Ada Lovelace","role":"Founder, Analytical Engines"}'
# Inspecione cada PNG — foque no frame de EXIBIÇÃO (totalmente na tela):
# - hierarquia se mantém: nome dominante (>=1.6x cargo), cargo em destaque da marca; ambos totalmente revelados, não no meio do wipe
# - consistência da marca: fonte, cor de destaque, barra/scrim corretos; legível sobre o plano
# - área segura 9:16: faixa LEVANTADA acima da zona de UI inferior ~20-35%, livre do topo ~12% e da barra de ação direita; ancorada à esquerda dentro da área segura de título
# - frames de entrada/saída mostram revelação parcial (animação realmente executa), não um corte abrupto
npx remotion render LowerThird out/lower-third.mp4 --props='{"name":"Ada Lovelace","role":"Founder, Analytical Engines"}'
npx remotion render LowerThird out/demo.gif --codec=gif # clipe de prova README
Processar lista em lote: verifique UMA linha via stills antes de renderizar todos os nomes — pegue um erro de layout/estouro uma vez, não N vezes. Use npx remotion compositions para durationInFrames/fps para escolher os frames de exibição + saída.
Antes de terminar:
- Stills renderizam limpos na entrada, exibição e saída — sem fontes/ativos de marca faltando.
- No frame de exibição: nome dominante sobre cargo, destaque da marca + barra corretos, totalmente (não parcialmente) revelado.
- A faixa está dentro da área segura 9:16 — levantada acima da zona de UI inferior, livre do topo e da barra direita — em cada frame verificado.
- Apenas orientado por frames — sem
Date.now()/Math.random()/ timers; entrada/saída mostram movimento, nunca um corte abrupto. - Uma linha real da lista (não
defaultProps) renderiza corretamente; MP4 codificado, GIF opcional.
Arquivos de referência
references/lower-third-component.md— um lower third executável completo: um componente Remotion com entrada escalonada com spring, exibição legível e saída mais rápida orientada puramente por frame; um objeto de tema tipado para consistência da 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 com máscara e barra de wipe.