Téléprompteur

Un prompteur est une aide de lecture utilisée pour les vidéos, les directs, les discours et les présentations face caméra. Il affiche le texte en gros caractères et le fait défiler à une vitesse réglable, ce qui permet de garder le regard proche de l’objectif au lieu de baisser les yeux vers des notes. Un prompteur dans le navigateur est pratique pour les créateurs, enseignants et réunions à distance, car le script, la vitesse, la taille du texte, l’interligne, le plein écran et le mode miroir se règlent rapidement. Le mode miroir sert avec une vitre de prompteur réfléchissante, tandis que le plein écran réduit les distractions. L’objectif est de stabiliser le rythme de parole et le contact visuel.

Le défilement fluide repose sur requestAnimationFrame : à chaque tic d'animation, le nombre de pixels à parcourir est calculé en fonction de la vitesse choisie par l'utilisateur et du delta temporel depuis la dernière image, puis transform: translateY(-Npx) est appliqué au conteneur du script. Le défilement basé sur transform reste sur le thread de composition GPU, ce qui maintient le mouvement à 60 fps même sur du matériel modeste, contrairement aux écritures scrollTop qui déclencheraient un reflow à chaque image. Le rythme de lecture suit approximativement la formule vitesse = mots par minute * largeur moyenne d'un mot / 60, ainsi une narration à 150 mpm avec une largeur moyenne de 50 px nécessite environ 125 px/s de défilement. La taille de police, l'interligne et la largeur du viewport modifient tous le débit effectif en mpm pour un même réglage de vitesse, d'où la nécessité d'une prise de calibration rapide avant l'enregistrement. Le mode miroir applique transform: scaleX(-1) au conteneur du script, produisant le texte inversé horizontalement nécessaire pour lire à travers une vitre de prompteur à lame séparatrice à 45 degrés tandis que la caméra filme à travers sans obstruction. L'affichage plein écran utilise element.requestFullscreen() pour que l'interface du navigateur et les notifications ne s'interposent pas pendant l'enregistrement, tandis que document.fullscreenchange détecte les sorties par la touche Échap. Le script et tous les réglages utilisateur (vitesse, taille de police, interligne, miroir) sont persistés dans localStorage à chaque modification afin qu'un rafraîchissement restaure la répétition exactement. La saisie manuelle de défilement via la molette ou touchstart met en pause la boucle d'animation et resynchronise le compteur de progression, ce qui permet l'ajustement à la main pendant un direct sans réinitialiser la tête de lecture.

• Boucle de défilement : requestAnimationFrame à 60 fps appliquant transform: translateY(-Npx) — composé sur le GPU, aucun reframe par image
• Formule de rythme : scrollPxParSeconde = mpm * largeurMoyenneMotPx / 60 ; 150 mpm à 50 px/mot donne environ 125 px/s
• Mode miroir : transform: scaleX(-1) pour vitre de prompteur à lame séparatrice à 45 degrés devant l'objectif
• Plein écran : element.requestFullscreen() et document.exitFullscreen() avec l'événement fullscreenchange pour détecter la touche Échap
• Persistance : localStorage sauvegarde le script, la vitesse, la taille de police, l'interligne et le drapeau miroir pour qu'un rafraîchissement restaure la répétition
• Remplacement manuel : les événements wheel et touchstart mettent en pause la boucle d'animation et resynchronisent le pourcentage de progression à la nouvelle position de défilement
• Règle empirique de taille de police : environ 24 à 32 px par mètre de distance de lecture pour que le script reste lisible sans fatigue oculaire