Infográfico Animado
Construa um infográfico projetado — ícones, alguns números-chave, texto curto e formas simples organizados com hierarquia visual real — e então anime-o em sequência para que cada elemento tenha seu momento. O ofício é composição primeiro, coreografia depois: um layout estático que se lê por si só, revelado em uma cascata escalonada que guia o olhar exatamente para onde você quer.
Quando usar
- Explicadores de layout misto: "X em 3 etapas", "como funciona", "pelos números", um grid de cartões de estatísticas.
- Revelação sequenciada de ícone + estatística + rótulo + conector como uma única cena projetada.
- Animação de pictograma/ícone, números-chave com contagem, conectores de fluxo entre etapas.
Esta skill é dona do infográfico composto. Para um gráfico que é o conteúdo (corrida de gráfico de barras, linha/área animada, um gráfico orientado por CSV), use chart-animation — e componha seu gráfico como um bloco dentro de um infográfico aqui, em vez de reconstruí-lo.
A única regra: projete o quadro estático primeiro
Um grande infográfico animado é um grande infográfico estático que por acaso se move. Organize e equilibre a composição completa — cada ícone, número e rótulo em sua posição final — antes de adicionar um único quadro-chave. A animação então apenas controla quando cada elemento já posicionado aparece; ela nunca decide o layout. Isso evita a falha mais comum: elementos que voam para posições que nunca foram projetadas, fazendo o quadro final parecer acidental.
Escopo bem definido: um insight central, 3–5 pontos de dados de suporte, em 30–90s. Mais de cinco elementos concorrentes e a cascata se torna caótica.
Hierarquia visual → ordem de revelação
A ordem de revelação é a hierarquia. O olho segue a aparição, portanto, anime os elementos na ordem de importância, não na ordem do layout. Mapeie cada elemento para uma camada e, em seguida, revele camada por camada.
| Camada | Elemento | Revelação | Movimento |
|---|---|---|---|
| 1 | Título da seção / insight central | primeiro, sozinho | fade + leve subida |
| 2 | Ícone (ancora cada item) | por item, lidera seu grupo | pop / overshoot de escala |
| 3 | Número-chave (contador) | logo após seu ícone | contagem regressiva, ease-out |
| 4 | Rótulo / legenda | se estabiliza sob o número | fade, sem drama de movimento |
| 5 | Conector / linha de fluxo | liga os itens conforme são concluídos | draw-on (comprimento do trajeto) |
Use tamanho, peso e cor para hierarquia estática; use tempo e movimento para a camada animada. Uma coisa chamativa de cada vez — nunca conte dois números ao mesmo tempo.
Escalonamento: a cascata
Revele itens irmãos com um atraso fixo entre eles (um escalonamento) para que o grupo seja lido como uma sequência, não como um flash. Conduza cada elemento a partir do quadro atual como uma função pura — nunca usando o tempo real do relógio ou um loop de animação de biblioteca — para que as renderizações sejam determinísticas.
import { useCurrentFrame, spring, useVideoConfig } from "remotion";
const STAGGER = 8; // quadros entre irmãos (~0.27s @30fps)
function Item({ index, children }) {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const local = frame - index * STAGGER; // clock próprio deste item
const enter = spring({ frame: local, fps, config: { damping: 14, mass: 0.6 } });
return (
<div style={{ opacity: enter, transform: `translateY(${(1 - enter) * 24}px)` }}>
{children}
</div>
);
}
Um escalonamento de 6–10 quadros parece nítido; acima de ~15, arrasta. Mantenha uma única curva de entrada em todos os irmãos para que a cascata seja lida como confiança, não como ruído.
Animando ícones: o pop
Os ícones ancoram cada item, portanto, dê a eles a entrada mais forte — um overshoot de escala ("pop") que se estabiliza. Use uma mola com amortecimento baixo para o salto; nunca escala linear (soa mecânico).
const pop = spring({ frame: local, fps, config: { damping: 10, stiffness: 180, mass: 0.5 } });
// pop ultrapassa 1 e depois se estabiliza → vivaz
<g transform={`scale(${pop})`} style={{ transformOrigin: "center" }}>{icon}</g>
Para preenchimentos de pictograma (ex.: "7 de 10 pessoas"), revele as unidades no mesmo escalonamento e recorte a unidade parcial com uma máscara em vez de dimensioná-la.
Números-chave: contadores que se estabilizam
Interpole o número subjacente, suavize-o e depois formate-o na renderização. Duas obrigações: arredondar antes de formatar e usar tabular-nums para que o layout não trema conforme os dígitos mudam. (Ofício compartilhado com chart-animation — veja sua seção de contadores para variantes de moeda/porcentagem.)
import { interpolate, Easing } from "remotion";
const raw = interpolate(frame - delay, [0, 30], [0, 1287], {
extrapolateLeft: "clamp", extrapolateRight: "clamp",
easing: Easing.out(Easing.cubic), // "se estabilizando em um número"
});
const label = new Intl.NumberFormat("en-US").format(Math.round(raw)); // "1,287"
// CSS: font-variant-numeric: tabular-nums; line-height: 1;
Ease-out em um número de manchete soa como chegada; linear soa como um hodômetro robótico. Segure cada número por ~0.5s antes do próximo item começar.
Conectores e fluxo
Conectores transformam um grid de cartões em um processo. Anime uma linha/seta desenhando seu trajeto, sincronizado para chegar exatamente quando o item para o qual aponta terminar — movimento que diz "agora olhe aqui em seguida".
const pathRef = useRef();
const len = pathRef.current?.getTotalLength?.() ?? 0;
const draw = interpolate(frame - delay, [0, 18], [0, 1], { extrapolateRight: "clamp" });
<path ref={pathRef} d="M40,0 C40,30 40,30 40,60" fill="none" stroke="#444" strokeWidth={3}
strokeDasharray={len} strokeDashoffset={len * (1 - draw)} />
Desenhe o conector entre os dois itens que ele une, no intervalo após a origem aparecer e antes do destino — a linha guia o olhar para a próxima revelação.
Ritmo da seção
Orçamente tempo por elemento, não por segundo de polimento. Um espectador só pode acompanhar uma coisa em movimento de cada vez.
| Batida | Orçamento |
|---|---|
| Título (deixe-o se estabelecer) | 0.8–1.2s |
| Por item (pop do ícone → contador → rótulo) | 1.2–2.0s |
| Desenho do conector | 0.4–0.6s, sobrepõe-se ao próximo item |
| Quadro final composto parado (capturável) | 2–3s |
Termine com o infográfico estático completo parado por 2–3s — a conclusão é o quadro montado, então deixe-o se estabilizar sem movimento concorrente.
Lista de verificação de saída
- Layout estático projetado e equilibrado antes de qualquer quadro-chave; quadro final parado parece intencional.
- Um insight central, 3–5 pontos de dados, 30–90s.
- Ordem de revelação segue a hierarquia (título → ícone → número → rótulo → conector), não a ordem do layout.
- Irmãos em cascata com um escalonamento consistente de 6–10 quadros com uma única curva de entrada.
- Ícones aparecem com overshoot de mola; números contados com easing +
tabular-nums; apenas um número anima de cada vez. - Conectores são desenhados para guiar o olhar para a próxima revelação.
- Cada valor é uma função pura de
useCurrentFrame(); sem timers de biblioteca. - Quadro final composto parado por ≥2s.
Entregar e verificar (quadros renderizados → MP4)
Auxiliar empacotado (
scripts/): monte seus quadros comscripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png, e então verifique a codificação comscripts/probe-mp4.sh out.mp4 [WxH] [fps]. Vejascripts/README.md.
Remotion é determinístico em quadros — cada pop de ícone, valor de contador e desenho de conector é uma função pura de useCurrentFrame(), para que você possa renderizar qualquer quadro exato sem cabeçalho de busca. O infográfico carrega números-chave, portanto, a inspeção do quadro estático detecta uma estatística errada ou um escalonamento que sai da tela antes de você desperdiçar uma codificação.
Contrato de saída:
- Um projeto Remotion com a cena registrada (
<Composition>+ zodschema+defaultProps), todo movimento impulsionado por quadros (sem timers /Date.now()/Math.random()). - Entregável = o
out/*.mp4renderizado (mais o projeto, para que o usuário possa renderizar novamente com novas estatísticas/ícones). - Duração dependente de dados (N itens × orçamento por item)? calcule-a em
calculateMetadata, não manualmente.
Ciclo de verificação — renderizar quadros estáticos → inspecionar → codificar. Renderize quadros únicos primeiro (barato, sem codificação de vídeo), depois codifique apenas quando o layout e os números estiverem corretos.
# 1. Quadros estáticos exatos — com as props SHIPPED. Escolha quadros que capturam cada camada:
npx remotion still Infographic out/f-title.png --frame=20 --props='{"items":[...]}' # título + primeiro pop
npx remotion still Infographic out/f-mid.png --frame=90 --props='{"items":[...]}' # cascata do meio
npx remotion still Infographic out/f-end.png --frame=149 --props='{"items":[...]}' # quadro final composto (= durationInFrames - 1)
# 2. Inspecione cada PNG — FIDELIDADE (cada número-chave exato, rótulos/legendas corretos, ícones com o glifo certo)
# E artefatos (texto estourado, ícone fora da tela, área de segurança recortada, fonte faltando, conector apontando
# para o item errado, elemento meio revelado onde uma camada deveria estar completa).
# 3. Somente depois que os quadros estáticos forem verificados, codifique:
npx remotion render Infographic out/infographic.mp4 --props='{"items":[...]}'
- Use
npx remotion compositionspara lerdurationInFrames/fps; o quadro final composto é o quadro de dinheiro — verifique se parece intencional, não no meio da cascata. - Orientado a dados / lote: verifique UM conjunto de props representativo (estatísticas + rótulos) por meio de quadros estáticos antes de renderizar em lote todas as variantes — capture um bug de contador ou layout uma vez, não N vezes.
- GIF de demonstração README de graça:
npx remotion render Infographic out/demo.gif --codec=gif.
Antes de terminar:
npx remotion stillrenderiza limpo no título, cascata do meio e quadro final — sem erros, sem fontes/ícones faltando.- Cada número-chave está exato (arredondado,
tabular-nums) e cada elemento está dentro da área de segurança em cada quadro. - Apenas impulsionado por quadros — sem
Date.now()/Math.random()/ timers de biblioteca (determinismo se mantém no CI). - As props shipped renderizam corretamente (não apenas
defaultProps) — estatísticas certas, ícones certos, rótulos certos. - MP4 completo codificado e tocando; (opcional) GIF renderizado para o README.
Arquivos de referência
references/sequenced-infographic.md— uma cena Remotion executável completa: um infográfico "como funciona" de 3 etapas com pops de ícone escalonados, estatísticas com contagem suave, conectores desenhados, um mapa de tempo mestre e o padrão de prop orientado a dados (template × dados). Inclui uma variante inline-SVG sem dependências para uso não-Remotion.