Teste técnico · 15/10/2026 · acervo de produção

Texto e efeitos do After Effects no Lottie

Uma composição de 3 segundos feita por script no After Effects do PC, com texto animado letra a letra, o mesmo texto convertido em forma, quatro efeitos e curvas de velocidade próprias. O mesmo projeto virou Lottie de dois jeitos (texto como glifo e texto como fonte) e um MP4 de referência. Abaixo, tudo tocando junto: o vídeo do After Effects e cinco combinações de player.

Quadro 0 / 89

After Effects (referência)MP4 do aerender, o que o AE desenha

lottie-web · SVG · glifotexto exportado como forma de cada letra (47 KB)

lottie-web · Canvas · glifomesmo arquivo, desenhado em canvas

lottie-web · SVG · fontetexto exportado como fonte (26 KB); depende da Arial existir no aparelho

dotLottie (ThorVG) · glifosegundo motor, WebAssembly, o mesmo das apps nativas da LottieFiles

dotLottie (ThorVG) · fontesegundo motor com o arquivo de fonte

O que passou e o que quebrou

Texto vivo com animator por letra (posição, opacidade e cor; seletor Ramp Up com Ease High e Low), exportado como glifo: igual ao AE nos dois motores, lottie-web (SVG e canvas) e dotLottie.
Texto convertido em forma e animado letra a letra: igual nos dois motores. O relatório do Bodymovin acusa Merge Paths sem suporte em 5 letras, sem diferença visível aqui (os furos do A, q e a saíram certos).
Curvas de velocidade próprias (influência 85/15 e overshoot em três chaves no fio): o tempo bate com o MP4 em todos os quadros conferidos.
Gaussian Blur e Fill: fiéis no lottie-web SVG e no dotLottie.
Drop Shadow: fiel no dotLottie; no lottie-web SVG só aparece com filterSize nas opções do player (sem ele, a sombra fica cortada pela área do filtro). Esta página já usa a opção.
Glow: some nos cinco. O Bodymovin grava o efeito, mas nenhum player o desenha.
lottie-web em canvas: nenhum dos quatro efeitos aparece (o Fill fica preto, o blur e a sombra somem).
Texto como fonte: no lottie-web anima certo, mas usa a fonte que o aparelho tiver (no servidor de teste, sem Arial, saiu outra letra, mais larga). No dotLottie a animação por letra não aparece (a palavra surge inteira) e a letra cai numa fonte fina de reserva.
Armadilha do lado do AE: o Gaussian Blur nasce com Repeat Edge Pixels ligado no AE 2026, e aí o desfoque fica preso dentro da forma no render; o lottie-web ignora essa opção. Desliguei no script para comparar igual com igual.

Quadro a quadro

Grade de quadros: em cada linha um instante da animação; colunas, da esquerda: After Effects, lottie-web SVG glifo, lottie-web canvas glifo, lottie-web SVG fonte, dotLottie glifo, dotLottie fonte. — Linhas: quadros 8, 15, 22, 30, 45, 60 e 89. Colunas: After Effects, lottie-web SVG glifo, canvas glifo, SVG fonte, dotLottie glifo, dotLottie fonte. Capturado no Chrome sem tela da VPS.

Medidas

Item	Valor
Lottie com texto como glifo	47,2 KB (9,7 KB com gzip)
Lottie com texto como fonte	26,3 KB (4,4 KB com gzip)
MP4 de referência (1080², 30 qps)	100 KB nesta página; 1,0 MB o original
Bibliotecas	lottie-web 5.13.0: 299 KB · dotLottie 0.80.0: 161 KB + 1,2 MB de wasm
Montar a composição no AE, sem tela	6 s
Converter texto em forma e tirar os glifos (AE com tela, sessão do PC)	23 s
Exportar o Lottie de fonte e gravar o de glifos, sem tela	7 s
Render do MP4 (aerender)	9 s

No Chrome sem tela e sem GPU da VPS, cada player sozinho tocou a 60 quadros por segundo. Custo de desenhar um quadro: lottie-web SVG 0,13 ms (glifo) e 0,08 ms (fonte), canvas 0,19 ms, dotLottie 0,69 ms (glifo) e 0,87 ms (fonte). Os seis juntos, em tela de computador: 60 qps.