smasikurr/RemotionMaster

Sous-titres caméra 3D

L’effet After Effects (caméra 3D, profondeur de champ, texte sur trajectoire, Postériser le temps à 15, flou de mouvement) reconstruit comme un peintre déterministe image par image pour HyperFrames. Une seule horloge peint le fond, le cache et chaque glyphe. Rien n’est une animation CSS.

Quand l’utiliser / quand ne pas l’utiliser

• À utiliser sur un plan fixe de type « talking head » (avatar ou réel), paysage, plan moyen ou plus large, 5–20 secondes par morceau. Les mots doivent évoluer en profondeur autour de l’orateur.
• Ne pas utiliser pour des sous-titres simples, une caméra mobile ou à l’épaule (le cache et la transformation du fond supposent un plan verrouillé), des gros plans extrêmes (pas de place derrière ou autour de la tête), ou un sujet qu’un modèle de détourage ne peut pas séparer.

Prérequis et effets secondaires (liste complète)

• Outils :
  • Node 22+ et l’interface HyperFrames pinée à la version testée, npx [email protected] (téléchargement depuis registry.npmjs.org). Utilisez cette version exacte pour chaque commande ci-dessous.
  • ffmpeg dans le PATH.
  • Python 3 avec fonttools, brotli, numpy, pillow.
• Cache : npx [email protected] remove-background s’exécute en local. Au premier lancement, il télécharge son modèle de segmentation (~170 Mo) dans ~/.cache/hyperframes/.
• Temps de rendu : les compositions chargent GSAP 3.14.2 depuis cdn.jsdelivr.net au moment de l’aperçu/rendu.
• Horloge de mots : tout transcripteur au niveau du mot que l’utilisateur exécute déjà localement. La précision de l’attaque compte ; Whisper simple commence tard.
• Polices : fichiers fournis par l’utilisateur. Confirmez que la licence autorise l’incorporation.
• Style dessiné à la main (optionnel) : nécessite l’installation et la configuration de la compétence p5-paint-animation (son installation télécharge puppeteer, Chrome for Testing, p5 et p5.brush). build-sprites.py l’exécute sans tête ; les images sont écrites dans le répertoire out/ de cette compétence et supprimées ensuite.
• Rien d’autre : pas d’identifiants, pas d’appels payants, rien téléchargé. Les fichiers sont écrits uniquement dans le projet (assets/, renders/).

Préparation (une fois par prise)

1. Portion et fond. bash scripts/prep-take.sh <take.mp4> <start_s> <dur_s> <project>/assets produit :
   • portion.mp4 : la source audio.
   • plate-tall.mp4 : fond avec rembourrage miroir de 240 px de chaque côté, 480 px en haut, 240 px en bas, afin que les mouvements de déplacement et de recul ne montrent jamais un bord.
   • person.webm : le cache alpha, mêmes images.
   • Le script vérifie ensuite le fond et le cache par rapport à la portion (taille, taux d’images, nombre d’images) et échoue en cas de divergence.
2. Horloge de mots. Temporisations des mots pour la portion, en secondes depuis son début.
3. Polices. Choisissez 2–3 rôles (sous-titre / héroïque / anneau), puis python3 scripts/font-metrics.py assets/metrics.js key=font.woff2[@wght=…,opsz=…] ….
   • Une police variable doit recevoir ses axes ici ET être verrouillée dans le CSS (font-variation-settings, font-optical-sizing: none). Sinon, le opsz du navigateur suit la taille et les mots se chevauchent.
4. Silhouette. Lisez la boîte de la tête et la ligne d’épaule à partir du alpha de person.webm avant de placer quoi que ce soit.

Construction

• Copiez assets/kit/{cam3d.js,tables.js,finish.js} et metrics.js dans le répertoire assets/ du projet.
• references/worked-film.html est le film de référence complet. Il contient deux plans, un volet de corps, les deux types d’anneau, une traversée, un final et l’étalonnage ; son média n’est pas inclus.
• references/recipes.md contient les groupes priorisant la profondeur, l’anneau enveloppant, l’escalier et les mots dessinés à la main.
• C3.init(metrics, {W, H}) :
  • L’objectif conserve le champ de vision vertical du tutoriel (F = 1326,1·H/1080), donc tables.js s’applique sans mise à l’échelle à n’importe quelle largeur.
  • Sur une image plus large que 1440, ajoutez (W − 1440) / 2 à wipe.x.

Grammaire de plan

Choisissez 4–6 temps. Divisez chaque phrase en son propre groupe.

Temps	Construction	Règle
Coup de poing avec déplacement	Table camA (19 f depuis 502 px bas) puis une progression linéaire	fond S0 1,1–1,3 ; l’image n’atterrit jamais
Groupes de profondeur	2–3 groupes de sous-titres par phrase à D 1250 / 1500 / 2200	proche = plus grand avec une ombre plus grande ; la progression et le déplacement révèlent la parallaxe
Héroïque derrière	mot héroïque dans la couche arrière à la profondeur du fond, style bannière à travers la tête	la tête cache les lettres du milieu ; ≥ 60 % reste lisible ; le jambage supérieur est dans l’image
Déplacement latéral parallaxe	segment swing, tx 420	l’ancienne disposition s’estompe en 3 étapes ; la nouvelle disposition arrive par parallaxe
Volet de corps	le propre cache de l’orateur, brightness(0) blur(), bord avant depuis wipe.x	le plan A coupe à gauche de la bande, le plan B à droite ; recul des deux côtés
Anneau enveloppant	cercle horizontal DEVANT l’orateur (centre Z 2000), 11–16° vu du dessus, tournant	les mots entrent petits sur le côté au moment où ils sont prononcés, balancent devant, se stabilisent ; l’arc inférieur se retourne pour une lecture à l’endroit
Traversée	phrases à D 1500 / 2000 / 2500, la caméra balance entre elles	la mise au point suit la phrase
Escalier final	segment poussé ; chaque mot de sous-titre plus profond et plus petit en diagonale	la poussée écarte les mots proches

Règles

• Mouvement :
  • Le texte est postérisé à 15 ips (sa propre animation et la caméra qu’il voit). Le fond et le cache bougent à chaque image.
  • Le flou de mouvement est de 7 fantômes sur un demi-pas de 15 ips. Utilisez shutter: 0.5 sur les anneaux tournants.
  • Les sous-titres précèdent la voix de 0,2 s, ajustés à la grille de 15 ips : fr(t) = 2·round((t − 0,2)·15).
  • Les entrées montent de ENTRY : sous-titres 30 px, héros 110–260 px. Les mots de l’anneau adoucissent leurs 30–44 derniers px le long de la trajectoire. Utilisez le dépassement de RING_ENTRY uniquement lorsqu’aucun voisin n’est encore placé.
• Profondeur :
  • Chaque groupe a sa propre D. Fond 3000, sous-titres 1250–2400, anneau enveloppant ≈ 1100–2700.
  • Ombre de profondeur [6, 16, 0.5, 1500] se met à l’échelle comme 1500/(D − cz).
  • σ de profondeur de champ = 6,7·|D − foyer|/D px à 1080 de haut. Les sous-titres plats sont limités à 1,2 px ; les glyphes de l’anneau prennent le flou complet.
• Tailles : size / rise sont en px à l’écran à l’atterrissage de la caméra (tland). Les sprites sont rendus à leur taille à l’écran.
• Espacement :
  • Le texte de l’anneau passe toujours par ringLine (avance à l’écran ; type : piste 1,10, écart 26–30 ; dessiné à la main : piste 1,0, écart 28).
  • Un anneau tournant est repositionné à chaque pose.
• Occlusion :
  • Les anneaux sont dessinés devant l’orateur.
  • Divisez un mot en instances derrière/devant (side, zSplit) uniquement lorsqu’il est CENSÉ passer derrière la tête.
• Lisibilité :
  • Les sous-titres vont sur le côté sombre de l’image.
  • Le texte traversant la peau ou des vêtements clairs reçoit un halo sombre.
  • Pas de points finaux à l’écran.
• Étalonnage (optionnel) : finish.js fournit des courbes, saturation 1,12 pour la peau, et du grain re-généré par image. Placez la scène opaque (fond + texte arrière + cache) dans un conteneur filtré. Donnez au texte avant le même étalonnage avec du grain composé par-dessus, de sorte qu’un mot divisé derrière/devant reste d’une seule couleur (voir references/worked-film.html).

Styles

• Éditorial : un sérif condensé d’affichage, italique pour les héros ; un sérif de texte pour les sous-titres ; crème plus un accent.
• Gras : héros grotesques lourds, sous-titres légers, un accent saturé (le film de travail).
• Dessiné à la main : sprites p5.brush write-on depuis scripts/hand/build-sprites.py :
  • Chaque mot s’écrit à partir de son attaque.
  • Les anneaux placent les mots entiers, tournés selon la tangente et mis à l’échelle par profondeur, sur un anneau plus grand et plus plat.
  • Recette dans references/recipes.md.

Vérification

1. npx [email protected] check . --no-contrast. Les couches fantômes font échouer la vérification de contraste WCAG ; les coutures du déplacement et du volet se chevauchent intentionnellement.
2. Dans la page d’aperçu, collez scripts/frame-bounds.js et exécutez __frameBounds(0, dur).
   • Il doit retourner [] : aucun groupe en dehors de l’image pendant 5+ étapes alors qu’il est visible.
3. Collez scripts/glyph-gaps.js et exécutez __glyphGaps(t) au repos.
   • Aucun contact entre mots.
   • Les mots plats mesurent comme une seule boîte (les jambages inférieurs signalent des faux positifs). Le débord d’un f italique se lit négatif. Les mots des deux côtés de la bande de volet apparaissent tous les deux.
4. Écarts entre mots : l’écart rendu entre les mots ≈ une avance d’espace.
5. Prenez un instantané de chaque temps, effectuez le rendu avec npx [email protected] render . --crf 12, et vérifiez les images pleine résolution par temps.

Limites

• Les bords du cache scintillent sur les cheveux fins. Le rembourrage miroir apparaît brièvement lors d’un déplacement.
• Un orateur qui remplit l’image laisse peu de place derrière : placez-le en hauteur ou cachez-le derrière une épaule.
• snapshot --at partage une seule page, donc le grain ne se régénère pas entre les captures. Jugez le grain sur un rendu.
• Le rendu avec l’étalonnage et de nombreuses couches fantômes coûte environ 2× un rendu simple.