Teleprompter

Um teleprompter é uma ajuda de leitura para gravações de vídeo, transmissões ao vivo, discursos e apresentações diante da câmera. Ele mostra o roteiro em letras grandes e faz o texto subir em uma velocidade controlada, permitindo que a pessoa mantenha o olhar próximo da lente sem consultar anotações o tempo todo. Um teleprompter no navegador é útil para criadores, professores e reuniões remotas porque permite ajustar rapidamente texto, velocidade, tamanho da fonte, espaçamento, tela cheia e modo espelho. O modo espelho é usado com vidro refletivo de teleprompter; a tela cheia reduz distrações. A principal função é manter ritmo, contato visual e segurança durante a fala.

A rolagem suave é conduzida por requestAnimationFrame: a cada tick de animação é calculado quantos pixels avançar com base no valor de velocidade escolhido pelo usuário e no delta de tempo desde o último quadro, e então aplica transform: translateY(-Npx) no contêiner do roteiro. A rolagem baseada em transform permanece na thread de composição da GPU, mantendo o movimento a 60 fps mesmo em hardware modesto, diferente de escritas em scrollTop que acionariam layout a cada quadro. O ritmo de leitura é aproximadamente velocidade = palavras por minuto × largura média da palavra / 60, então uma narração de 150 wpm com largura média de palavra de 50 px precisa de aproximadamente 125 px/s de rolagem. O tamanho da fonte, a altura da linha e a largura da viewport alteram o wpm efetivo na mesma configuração de velocidade, razão pela qual o controle deslizante precisa de uma calibração rápida antes de gravar. O modo espelho aplica transform: scaleX(-1) no contêiner do roteiro, produzindo o texto invertido horizontalmente necessário para ler através de um vidro de teleprompter com divisor de feixe a 45 graus enquanto a câmera filma através dele sem obstrução. A exibição em tela cheia usa element.requestFullscreen() para que a interface do navegador e notificações não interfiram na gravação, enquanto document.fullscreenchange rastreia saídas pela tecla Esc. O roteiro e todas as configurações do usuário (velocidade, tamanho da fonte, altura da linha, espelho) são persistidos em localStorage a cada alteração, de modo que uma atualização restaura o ensaio exatamente. A entrada de rolagem manual via wheel ou touchstart pausa o loop de animação e ressincroniza o contador de progresso, o que permite ajustes manuais durante uma transmissão ao vivo sem redefinir a posição de leitura.

• Loop de rolagem: requestAnimationFrame a 60 fps aplicando transform: translateY(-Npx) — composto na GPU, sem layout por quadro
• Fórmula de ritmo: scrollPxPerSecond = wpm × averageWordWidthPx / 60; 150 wpm com 50 px/palavra é aproximadamente 125 px/s
• Modo espelho: transform: scaleX(-1) para vidro de teleprompter com divisor de feixe a 45 graus em frente à lente
• Tela cheia: element.requestFullscreen() e document.exitFullscreen() com o evento fullscreenchange para rastrear Esc
• Persistência: localStorage salva roteiro, velocidade, tamanho da fonte, altura da linha e flag de espelho para que uma atualização restaure o ensaio
• Substituição manual: eventos wheel e touchstart pausam o loop de animação e ressincronizam a porcentagem de progresso para a nova posição de rolagem
• Regra prática para tamanho de fonte: aproximadamente 24-32 px por metro de distância de visualização mantém o roteiro legível sem cansar os olhos