Cinética Tipográfica

O que Cinética Tipográfica faz?

O texto em movimento tem um trabalho antes de qualquer outro: ele deve ser legível. A falha mais comum em tipos animados não é a feiura, é o texto que passa rápido demais antes que o espectador termine a primeira palavra, ou texto que anima tanto que o olho persegue o movimento em vez de ler as palavras. Esta é a camada de ofício. Ela decide quanto tempo cada linha fica, como ela entra e sai, e o que pode se mover — e entrega um orçamento concreto de quadros para remotion-compose, que escreve o React/TypeScript que realmente renderiza.

A regra fundamental: animar para servir a leitura, nunca para decorá-la. O movimento merece seu lugar apenas quando direciona o olho, estabelece hierarquia ou marca uma batida. Tudo abaixo reforça isso.

Trabalhe com um exemplo contínuo: um cartão de título de produto 16:9 lendo "Envie vídeo em um prompt" (5 palavras), a 30fps, mais uma faixa de legenda animada de terço inferior abaixo.

Fluxo de Trabalho

Execute nesta ordem. Não escolha uma animação de entrada antes de ter o orçamento de permanência — o orçamento é o que diz se você tem espaço para animar.

Passo 1 - Calcule o orçamento de tempo de leitura por palavra primeiro

O texto deve permanecer na tela tempo suficiente para ser lido em um ritmo relaxado, mais o tempo que sua entrada e saída consomem. Orce o tempo de permanência antes de tocar em qualquer animação.

• A velocidade de leitura base para vídeo na tela é mais lenta que a de impressão: assuma ~3,5 palavras/segundo lidas confortavelmente (≈ 200 ppm). A convenção de legendas é similar — nunca caia abaixo de ~0,3s de permanência legível por palavra.
• Tempo mínimo de tela = palavras ÷ 3,5 segundos, com um piso de 0,8s para qualquer linha (mesmo uma única palavra precisa de uma batida para ser registrada) e um imposto de +0,3s para termos desconhecidos, números ou nomes que o olho não pode prever.
• O tempo de entrada e saída é adicional — não conta como tempo de leitura, porque o texto não está totalmente legível durante a transição. Slot total = entrada + permanência + saída.

Execute type_budget.js (abaixo) para transformar uma linha de texto em um orçamento de quadros. Para o cartão de título, ele retorna uma permanência de ~43 quadros; esse é o número que você entrega para remotion-compose como a janela legível da Sequência, com entrada e saída adicionadas por cima.

Passo 2 - Escolha a temporização de entrada/saída para corresponder ao corte, não a um padrão

Entradas e saídas são pontuação, não a frase. Mantenha-as curtas e deixe a permanência fazer o trabalho.

• Entrada: 8-15 quadros (0,25-0,5s) @ 30fps. Rápido o suficiente para parecer ágil, lento o suficiente para ser lido como deliberado. Um cartão de título pode usar o lado mais longo; uma faixa de legenda rápida usa o lado mais curto.
• Saída: igual ou mais curta que a entrada. Saídas nunca devem se alongar — uma vez lido, o texto deve desaparecer. 6-12 quadros.
• Corresponda a saída ao que segue. Corte duro para a próxima cena → saia do texto no corte (sem fade, deixe o corte fazer isso). Cross-dissolve → desapareça o texto durante o dissolve. Nunca anime uma saída elaborada em um corte duro; isso conflita com a edição. Esta é a junção onde motion-design-principles (o corte e a suavização) e esta skill se encontram — pegue a curva de suavização de lá, aplique-a ao texto aqui.
• Escale revelações de múltiplos elementos, não as anime em uníssono. Um título + subtítulo é melhor lido com o subtítulo entrando 4-8 quadros após o título se estabilizar, para que o olho seja guiado de cima para baixo.

Passo 3 - Escolha UMA técnica de entrada por linha e anime uma propriedade

Quanto mais propriedades se movem ao mesmo tempo, mais difícil é ler o texto durante a transição. Padrão: animar uma única propriedade; combine duas apenas com intenção (por exemplo, opacidade + um pequeno deslocamento).

• Fade (opacidade 0→1) - mais seguro, sempre legível, o padrão correto para faixas de legenda e linhas de corpo.
• Subida / deslize (pequeno deslocamento, 20-60px, combinado com fade) - adiciona direção e vida; o workhorse para cartões de título. Mantenha a distância pequena — deslocamentos grandes fazem o olho rastrear o movimento em vez de ler.
• Revelação palavra por palavra - cada palavra aparece/desaparece em sequência com seu próprio pequeno atraso. Use para linhas de ênfase e peças estilo letra de música, não para legendas densas (a leitura fica entrecortada). Orce a revelação de toda a linha para terminar bem dentro da permanência.
• Escala / pop (mola de 0,85→1) - energético, bom para uma única palavra herói ou uma chamada de número. Nunca escale uma frase inteira; a reestruturação é ilegível.
• Máscara / revelação de varredura - premium, direcional, ótimo para um único título principal. Mais caro de construir; reserve para o único título que importa.

Seja qual for a escolha, a propriedade anima; o texto em si nunca se reestrutura durante a animação. Anime opacity e transform (translate/scale/clip) — nunca font-size, width ou letter-spacing de uma forma que reorganize os glifos, porque animação guiada por layout treme e é ilegível.

Passo 4 - Anime peso e tamanho como transições, não ruído

Peso e tamanho são como o tipo expressa ênfase em movimento — mas são transições entre estados mantidos, não oscilação contínua.

• Transição de peso: uma palavra pode se estabilizar de um peso mais leve para um mais pesado para marcar ênfase (por exemplo, 400→700 em 8 quadros enquanto se estabiliza). Use um eixo de peso de fonte variável real ou dois cortes da família; nunca finja negrito escalando.
• Transição de tamanho: um número ou palavra-chave pode escalar uma vez para reivindicar hierarquia, depois manter. Escala-e-mantém, não escala-e-pulsa. Um pulso em loop em texto parece um render quebrado, não ênfase.
• Estas são acentos. No máximo um acento de peso/tamanho por linha, na palavra mais importante. Se tudo enfatiza, nada enfatiza.

Passo 5 - Defina hierarquia tipográfica em movimento (ordem, tamanho, peso, temporização)

Hierarquia em movimento é construída a partir de quatro sinais; use-os juntos para que o olho saiba onde olhar e em que ordem.

1. Ordem de entrada - a primeira coisa a animar é lida primeiro. Liderar com o título, seguir com o subtítulo, terminar com o CTA.
2. Contraste de tamanho - mantenha uma proporção clara (título ≥ 1,6× subtítulo). O movimento não resgata hierarquia estática fraca.
3. Contraste de peso - mais pesado = mais importante. No máximo dois pesos na tela ao mesmo tempo.
4. Temporização - a linha mais importante recebe a permanência mais longa e, se algo, a entrada com mais presença. A menos importante (um terço inferior persistente, uma marca d'água) não anima após sua única entrada.

Preencha o template motion-type-spec (abaixo) com o orçamento por linha, técnica e papel de hierarquia. Essa especificação preenchida é a entrega para remotion-compose.

Passo 6 - Decida onde NÃO animar

A jogada sênior é a moderação. Antes de finalizar, corte animação de qualquer coisa na lista "NÃO" abaixo. Um cartão de título com uma subida bem orçada lê melhor do que um onde cada palavra faz algo.

Padrão de qualidade

Uma especificação de tipo de movimento finalizada é A+ apenas quando tudo permanece:

• Cada linha passa no orçamento de tempo de leitura - permanência ≥ max(0.8s, palavras ÷ 3.5 + imposto de termo), calculado por type_budget.js, com entrada/saída adicionadas por cima, nunca subtraídas dele.
• Cada linha anima uma propriedade (duas apenas com intenção explícita), e nenhuma linha reorganiza seus glifos durante a animação — opacity/transform apenas.
• Entradas são 8-15 quadros, saídas ≤ entrada, e a saída corresponde à edição seguinte (corte vs. dissolve), não padronizada.
• Hierarquia lê em ordem: ordem de entrada, proporção de tamanho (≥1,6×) e peso apontam para a mesma linha mais importante.
• No máximo um acento de peso/tamanho por linha, e nada faz loop ou pulsa.
• A especificação nomeia os números de quadro (entrada em, início da permanência, fim da permanência, saída) para que remotion-compose possa escrever Sequências sem adivinhar.

NÃO

• NÃO envie texto que permaneça por menos que o orçamento de leitura — a falha mais comum em tipo cinético. Se não houver espaço para segurar, corte palavras, não tempo de permanência.
• NÃO anime font-size, width, letter-spacing ou qualquer coisa que reorganize glifos; a oscilação de layout é ilegível. Escale via transform.
• NÃO anime mais de uma ou duas propriedades por linha, e nunca palavra por palavra uma legenda densa — a leitura fica entrecortada.
• NÃO faça loop, pulse, quique repetidamente ou mantenha texto em movimento contínuo; movimento que não para não pode ser lido.
• NÃO anime todos os elementos. Terços inferiores, marcas d'água, rótulos persistentes e texto legal recebem uma entrada e depois ficam parados. Não anime texto de corpo/legenda com entradas elaboradas — fade é o correto.
• NÃO decida a curva de suavização subjacente ou o corte de cena aqui — isso é motion-design-principles. NÃO escreva o componente Remotion aqui — entregue a especificação preenchida para remotion-compose.
• NÃO invente o texto. Anime as palavras que o usuário lhe deu; se uma linha for longa demais para segurar, peça para encurtá-la.

Skills irmãs - entregue, não absorva

Esta skill possui temporização do texto e a leitura. Decisões adjacentes pertencem a irmãs; busque delas, não refaça o trabalho delas aqui.

• motion-design-principles - o corte, o ritmo do movimento não textual e a curva de suavização (a forma da aceleração). Pegue a curva de lá e aplique-a ao texto aqui.
• video-storyboard - quais cenas e tomadas existem, e em que ordem. Obtenha a lista de cenas primeiro; esta skill só temporiza o texto dentro de uma cena.
• motion-color-and-light - a cor, o contraste e a legibilidade do tipo contra seu fundo. Se o texto for difícil de ler por causa da cor, isso é trabalho para essa skill, não uma mudança de temporização aqui.
• product-demo-director - a narrativa geral e a lista de batidas de uma demonstração de produto. Ela decide o que os cartões de título dizem e quando eles aparecem; esta skill temporiza como cada um anima.
• sound-and-music-sync - alinhar revelações de texto em uma batida ou downbeat. Entregue a ela os números de quadro holdStart@ / entrada para que uma revelação possa ser ajustada à trilha.
• social-video-formatter - redimensionar e cortar a faixa de legenda para uma plataforma (9:16 TikTok, feed 1:1, áreas seguras). Crie a temporização uma vez aqui; deixe essa skill refluí-la por plataforma.

Calculadora

Script Node.js autocontido. Salve como type_budget.js e execute com node type_budget.js. Sem dependências. Edite o array lines com seu texto real; ele retorna o orçamento de quadros para cada linha no seu fps.

// Kinetic-type reading budget. Edit lines + fps, then: node type_budget.js
const fps = 30
const WORDS_PER_SEC = 3.5   // comfortable on-screen read (~200 wpm)
const FLOOR_SEC = 0.8       // minimum hold for any line, even one word
const TERM_TAX_SEC = 0.3    // per line containing a number/name/jargon term
const ENTRANCE_FRAMES = 12  // 0.4s entrance
const EXIT_FRAMES = 9       // exit <= entrance

const lines = [
  { text: 'Envie vídeo em um prompt', hasUnfamiliarTerm: false }, // cartão de título
  { text: 'Renderizado headless em 4K',  hasUnfamiliarTerm: true  }, // legenda: '4K'
  { text: 'Vá',                       hasUnfamiliarTerm: false }, // palavra herói
]

const sec2frames = (s) => Math.ceil(s * fps)

function budget(line) {
  const words = line.text.trim().split(/\s+/).length
  const raw = words / WORDS_PER_SEC + (line.hasUnfamiliarTerm ? TERM_TAX_SEC : 0)
  const holdSec = Math.max(FLOOR_SEC, raw)
  const holdFrames = sec2frames(holdSec)
  const totalFrames = ENTRANCE_FRAMES + holdFrames + EXIT_FRAMES
  return { words, holdSec, holdFrames, totalFrames }
}

let cursor = 0
for (const line of lines) {
  const b = budget(line)
  const enterIn = cursor
  const holdStart = enterIn + ENTRANCE_FRAMES
  const holdEnd = holdStart + b.holdFrames
  const exitOut = holdEnd + EXIT_FRAMES
  console.log(`"${line.text}" (${b.words}p)`)
  console.log(`  permanência: ${b.holdSec.toFixed(2)}s = ${b.holdFrames} quadros`)
  console.log(`  slot total:  ${b.totalFrames} quadros (entrada ${ENTRANCE_FRAMES} + permanência ${b.holdFrames} + saída ${EXIT_FRAMES})`)
  console.log(`  Sequência:   entrada@${enterIn}  permanênciaInício@${holdStart}  permanênciaFim@${holdEnd}  saída@${exitOut}`)
  cursor = exitOut
}
console.log(`Comprimento total da faixa: ${cursor} quadros (${(cursor / fps).toFixed(2)}s)`)

Saída do exemplo trabalhado

"Envie vídeo em um prompt" (5p)
  permanência: 1,43s = 43 quadros
  slot total:  64 quadros (entrada 12 + permanência 43 + saída 9)
  Sequência:   entrada@0  permanênciaInício@12  permanênciaFim@55  saída@64
"Renderizado headless em 4K" (4p)
  permanência: 1,44s = 44 quadros
  slot total:  65 quadros (entrada 12 + permanência 44 + saída 9)
  Sequência:   entrada@64  permanênciaInício@76  permanênciaFim@120  saída@129
"Vá" (1p)
  permanência: 0,80s = 24 quadros
  slot total:  45 quadros (entrada 12 + permanência 24 + saída 9)
  Sequência:   entrada@129  permanênciaInício@141  permanênciaFim@165  saída@174
Comprimento total da faixa: 174 quadros (5,80s)

Leia: o título de 5 palavras precisa de 43 quadros de tempo mantido, totalmente legível — e isso é por cima da entrada de 12 quadros e saída de 9 quadros, então seu slot real é 64 quadros. A legenda de 4 palavras parece mais curta, mas carrega um número (4K), então o imposto de termo empurra sua permanência para 44 quadros — ligeiramente mais longa que o título apesar de menos palavras. A palavra única Vá atinge o piso de 0,8s: mesmo uma palavra ganha uma batida. Esses números de quadro entrada@ / permanênciaInício@ / permanênciaFim@ / saída@ caem direto em remotion-compose como limites <Sequence from={…} durationInFrames={…}> — sem adivinhar quanto tempo o texto deve ficar.

Template: motion-type-spec

Preencha isto e entregue para remotion-compose. Um bloco por linha de texto.

MOTION TYPE SPEC. [PREENCHE: nome da composição].  fps: [PREENCHE]  canvas: [PREENCHE: 1920x1080 / 1080x1920]

LINHA 1
  Texto (literal):       [PREENCHE]
  Papel de hierarquia:   [PREENCHE: título / subtítulo / legenda / terço inferior / CTA / palavra-herói]
  Tamanho:               [PREENCHE]px        Peso: [PREENCHE: 400 / 700 / eixo variável]
  Orçamento de leitura:  [PREENCHE]p -> permanência [PREENCHE]s = [PREENCHE] quadros   (de type_budget.js)
  Entrada:               [PREENCHE: fade / subida+fade / palavra-por-palavra / pop / varredura]  em [PREENCHE: 8-15] quadros
  Saída:                 [PREENCHE: fade / corte-na-edição]  em [PREENCHE: <=entrada] quadros
  Propriedade animada:   [PREENCHE: opacidade / opacidade+deslocamentoY / escala]   (NENHUM font-size/largura)
  Acento (máx um):       [PREENCHE: nenhum / peso 400->700 na palavra "X" / escala em "X"]
  Números de quadro:     entrada@[PREENCHE]

...

[truncado para tradução]