Como renderizamos legendas palavra por palavra em HTML5 Canvas

O SubViral Studio desenha as legendas diretamente em um elemento <canvas>, sincronizado com o vídeo. Este artigo explica as decisões principais.

Timestamps por palavra

A transcrição devolve cada palavra com start e end em segundos. Guardamos esse array como fonte imutável e agrupamos as palavras em blocos (1, 2, 3, 4 palavras ou modo dinâmico) sem chamar a IA de novo.

O loop de renderização

A cada quadro (requestAnimationFrame) lemos video.currentTime, encontramos o bloco ativo e a palavra ativa:

const block = blocks.find((b) => b.start <= t && t <= b.end);
const word = block?.words.find((w) => w.start <= t && t <= w.end);

Com isso, cada efeito decide como desenhar: escala elástica, caixa atrás da palavra, preenchimento progressivo (karaokê) ou fade vertical com curva ease-out.

Qualquer formato de vídeo

O formato (vertical, horizontal ou quadrado) é detectado por videoWidth/videoHeight. As fontes escalam por min(W/1080, H/1280), então o mesmo código funciona na prévia e na exportação em 1080p.

Por que Canvas

Desenhar no Canvas garante que a prévia e o arquivo exportado sejam idênticos: a exportação reaproveita exatamente a mesma função de desenho.