# Reelr — Débrief du gabarit et du cadrage

## Ce qui est fixé

Deux sorties muettes : 4:5, 1080 × 1350 ; 9:16, 1080 × 1920. 30 images/s, 555 images, 18,5 s pour le MP4 image par image.

| Temps | Contenu |
|---|---|
| 0–2,5 s | Accroche |
| 2,5–5,5 s | Problème |
| 5,5–8 s | Chute |
| 8–8,5 s | Tableau seul |
| 8,5–11,5 s | Mets tout dans Reelr, sans point |
| 11,5–15,5 s | Logo et « Tes liens et vidéos réunis dans une seule appli. » |
| 15,5–18,5 s | Logo, « Retrouve tout en 2 secondes. », badges |

Tableau net avant 8,5 s ; flou calculé de 18 px ensuite. Aucun voile noir inférieur ; léger voile supérieur sur les écrans de fin. Aucun texte ombré.

## Typographie

Figtree Black, graisse 900, fichier TTF embarqué. Les trois répliques : 111 px, pas vertical entre lignes de 123 px, espacement des lettres −1,33 px, contour blanc extérieur 1,5 px, centrées. Trois lignes maximum. Le moteur refuse les textes trop longs plutôt que de réduire les lettres. La largeur de texte est 940 px, soit 70 px minimum à gauche et à droite, contour compris à surveiller sur les lignes limites.

Une phrase peut compter une ou deux lignes : elle est centrée verticalement dans la même réserve de trois lignes. Ne pas imposer trois lignes à une accroche courte. Sur la planche, le problème « Je t’envoie / ma playlist / d’hôtels. » occupe trois lignes.

Fin : slogan 180 / 180 / 260 px ; page 1, 108 px avec pas de 130 px ; page 2, 130 px avec pas de 160 px. Contour extérieur 1 px. Logo texte Reelr sans point. Cyan #00BFD3.

## Marges et place au-dessus du sujet

Les valeurs CSS sont des coordonnées du film à 1080 px de large, et non des pixels de la fenêtre de l’ordinateur. Le canvas réduit l’ensemble pour l’aperçu. Le moteur JS lit les variables CSS au chargement ; une modification de ces variables requiert un rechargement.

```css
:root {
  --opening-size: 111;
  --opening-line-height: 123;
  --opening-line-count: 3;
  --opening-top: 50px;
  --opening-reserved-height: calc(123px * 3); /* 369 px */
  --subject-clearance: 40px;
  --subject-safe-top: calc(50px + 369px + 40px); /* 459 px */
}
/* En 9:16, le moteur utilise un haut de 70 px : seuil de tête à 479 px. */
```

Ces nombres sont une règle de sécurité du gabarit actuel, pas une mesure retrouvée dans une ancienne vidéo. La marge basse de l’image est nulle : elle remplit le cadre. La réserve haute est 50–419 px en 4:5, 70–439 px en 9:16. La tête la plus haute, cheveux ou chapeau inclus, doit rester au moins 40 px plus bas. Les glyphes visibles sont centrés dans cette réserve : la distance visible varie légèrement avec les lettres.

Utiliser les versions déjà prolongées, sans texte, de la bibliothèque. Ne pas régénérer un tableau simplement parce qu’il a plusieurs versions. Ne pas étirer l’image verticalement. Ne pas diminuer toute la peinture pour inventer de la place. Une seule image remplit le cadre, sans doublage et sans bandes latérales.

Le cadrage utilise une mise à l’échelle proportionnelle de couverture : max(1080 / largeur source, hauteur film / hauteur source). Le repère de tête déplace uniquement le recadrage vertical dans le décor existant. Le déplacement reste borné pour éviter un vide en haut ou en bas. Il peut rogner les bords : vérifier que les éléments utiles et les personnages restent visibles. Le CSS ne reconstitue pas de décor manquant.

Si le décor est insuffisant, le panneau l’indique et donne la marge mesurée. Choisir une autre version déjà prolongée, ou préparer séparément le décor. Si le décor est trop haut et que le recadrage disponible ne suffit pas à rapprocher le sujet, préparer un cadrage adapté. Aucun agrandissement supplémentaire automatique ne force cette correction.

Régler séparément 4:5 et 9:16, puis comparer plusieurs tableaux côte à côte. Les repères affichés restent hors export. Un repère enregistré ne signifie pas que le cadrage est validé : contrôler la marge et l’harmonie sur la planche.

## Écrans de fin : positions

Positions ci-dessous en 4:5. En 9:16 les coordonnées y sont multipliées par 1920/1350 ; tailles des lettres, logos et badges inchangées.

| Élément | Position / dimensions |
|---|---|
| Logo icône | x305, y105 ; 150 × 150 px |
| Mot Reelr | x480, y145 ; 100 px |
| Page 1 | centre x540 ; hauts y430, 560, 690 |
| Page 2 | centre x540 ; hauts y460, 620 |
| App Store | y1030 ; hauteur 117 px, largeur proportionnelle ; groupe centré |
| Google Play | y1030 ; hauteur 117 px, largeur proportionnelle ; espacement 46 px |
| Référence | centre x540 ; y1287, ou y1259 si deux lignes ; DejaVu 20 px |
| Image modifiée | centre x540, y1315 ; DejaVu 20 px |

La ligne de référence basse se termine environ 15 px avant le bas selon les glyphes. Les badges ont été remplacés par les deux éléments du PNG transparent fourni (2048 × 300 px), séparés sans retouche. Hauteur commune de 117 px, largeurs calculées selon leurs proportions, espace de 46 px entre eux, groupe centré. Aucun masque ne rogne leurs contours. Leur provenance officielle n’a pas été vérifiée. Les badges ne sont présents qu’en page 2 dans le code actuel.

## Export et dossier

Le moteur de rendu est commun à l’aperçu, au PNG et à la vidéo. Voie principale : WebCodecs AVC/H.264, puis assemblage MP4 de 555 images. Elle nécessite un navigateur compatible et un contexte sécurisé. Voie compatible : capture du canvas avec MediaRecorder, en MP4 ou WebM selon le navigateur. Cette voie travaille en temps réel et sa cadence/durée peut varier ; garder l’onglet visible. Les contrôles bloquent les textes excessifs et les références absentes, mais n’attestent pas la validation artistique du cadrage.

Après chaque export réussi, cliquer « Télécharger la vidéo corrigée ». Les fichiers portent le format et une date. Le bouton « Télécharger le dossier des vidéos (.zip) » réunit les exports générés pendant la session, classés dans Reelr_exports/4x5 et Reelr_exports/9x16, avec leurs projets JSON. Ce dossier n’est pas conservé après fermeture ou rechargement de la page : télécharger le ZIP avant de quitter. Les anciennes vidéos ne sont jamais mises à jour automatiquement.


## Résultats du contrôle effectué le 24 octobre 2026

- Export navigateur compatible réel : MP4 H.264 1080 × 1350 téléchargé, durée mesurée 17,6977 s, cadence variable. Ce mode ne valide pas la durée de 18,5 s.
- Deux MP4 de contrôle ont été rendus avec le même renderer.js dans un moteur canvas local, puis encodés avec FFmpeg : 1080 × 1350 et 1080 × 1920 ; 30 i/s ; 555 images ; 18,500 s ; sans piste audio. Ils vérifient les assets et le séquencement du moteur, pas la compatibilité Safari/WebCodecs.
- La sortie principale WebCodecs n’a pas été testée dans Safari ni sur le site privé signé. Sa validation reste distincte.
- Pour la coiffure utilisée en contrôle : marge calculée de 40 px en 4:5 ; 301 px en 9:16. Le vertical reste donc trop aéré par rapport à la cible commune : ne pas considérer ces deux cadrages comme une validation artistique de série.
- Le générateur ZIP est testé pour son intégrité et son classement par format. La préparation du ZIP dans l’interface est confirmée ; son téléchargement dans le navigateur de test local n’a pas abouti. Le dossier ZIP remis avec ce débrief a été créé séparément et vérifié. Les vidéos du navigateur restent temporaires jusqu’au téléchargement.


## Précision prioritaire : « augmenter » le haut du tableau

Cela signifie reconstruire / prolonger le décor de la peinture, avec sa texture, sa lumière et ses motifs, en préservant les personnages. Cela ne signifie jamais ajouter une bande de couleur, un dégradé, une copie floutée du tableau ni étirer l’image. Les versions déjà reconstruites existent presque toutes dans la bibliothèque : les retrouver et les utiliser en priorité. Vérifier leur place disponible avec les trois lignes et la marge devant la tête. Ne reconstruire que si aucune version existante ne convient. Le CSS ne reconstruit pas un décor ; il positionne l’image préparée et les textes. Le moteur ne dessine plus aucun fond de remplissage derrière l’image.


## Mise à jour : exports regroupés et centrage

Le bouton principal prépare désormais successivement le 4:5 et le 9:16 de la publicité sélectionnée. Chaque vidéo réussie est conservée dans IndexedDB sur ce navigateur, y compris après rechargement. Un échec du second format ne supprime pas le premier. Le ZIP réunit tous les exports conservés, toutes publicités et tous formats confondus, dans un seul dossier `Reelr_campagne/`, sans sous-dossiers de formats. Le format figure dans les noms, avec l’identifiant du tableau et la date. Les projets JSON associés sont inclus. Les publicités non encore exportées ne sont pas ajoutées automatiquement. Le navigateur choisit le dossier physique de téléchargement : décompresser le ZIP pour obtenir le dossier commun. Effacer les données du navigateur peut effacer les exports locaux ; télécharger régulièrement le ZIP.

La réserve d’ouverture commence maintenant à 100 px du haut en 4:5 et 120 px en 9:16. Sa hauteur est 369 px et son centre est respectivement y=284,5 / 304,5. Les blocs de 1, 2 ou 3 lignes utilisent des cases de 123 px et sont centrés dans cette même réserve ; les glyphes sont centrés dans chaque case. Une seule définition CSS alimente le moteur pour l’aperçu, les PNG et les vidéos : `--opening-top-45`, `--opening-top-916`, `--opening-side`, `--opening-line-height`, `--opening-line-count`. La marge minimale avant les cheveux reste 40 px : seuil de tête y=509 / 529 px. Les indications antérieures à 50/70 px sont remplacées par ces valeurs.

L’aperçu suit les proportions exactes du film, sans tapis noir ni bordure autour du canvas. Le tableau remplit le film proportionnellement, sans bandes ajoutées. Les cadrages artistiques et les bandes éventuellement déjà incrustées dans un fichier source restent à vérifier visuellement.


## Contrôle sur la référence jointe Reelr_bouge_toi_meuf_4x5(8).mp4

Le 24 octobre : image à 3,5 s, 1080 × 1350. Largeurs mesurées des lettres claires sur les trois lignes « Elles sont où, / ces Nike / à 50 balles ? » : 661 / 440 / 620 px. Le rendu Figtree 900, 111 px, espacement −1,33 px, contour extérieur 1,5 px reproduit ces trois largeurs dans le moteur canvas de contrôle. Cela constitue une correspondance de rendu, pas l’extraction de paramètres éditables du MP4.

Couleur dominante dans l’intérieur érodé des glyphes : RGB(251,253,250), adoptée sous la valeur #FBFDFA pour le texte clair et son contour. Les pixels compressés varient autour de cette couleur. Les hauts des trois lignes sont à y98, y196, y294 dans l’image de référence, donc espacés de 98 px. La valeur 123 px indiquée auparavant ne correspondait pas à cette vidéo et est remplacée pour l’ouverture. Les positions des écrans de fin restent celles du montage de 18,5 s.

La réserve reste haute de 369 px ; le moteur centre les limites visibles du bloc dans cette réserve, et place les hauts des lignes à 98 px d’écart. Le centre horizontal est calculé sur les limites des glyphes, pour éviter qu’une chasse ou un espace final ne décale visuellement une phrase. Les nouvelles marges hautes de 100 / 120 px gardent de l’air : elles ne recopient pas la position haute de l’ancien spot de 12 s. Les seuils de tête restent y509 / 529 px.


## Référence remplacée : grandes lettres des captures « J’étais à fond… » et « Vas-y ma go… »

Dernière instruction prioritaire : ces deux exemples deviennent les références de taille, à la place du spot « Bouge-toi meuf » de 111 px. Le gabarit commun d’ouverture utilise désormais Figtree 900 à 170 px, espacement −1,33 px, écart entre les hauts de lignes 140 px, contour extérieur 1,5 px, aucune ombre. Il s’agit d’une harmonisation à partir de textes rasterisés dont les tailles ne sont pas toutes identiques ; ne pas présenter 170/140 comme des paramètres éditables extraits des images. Le bloc reste centré et sa réserve passe à 420 px. Marge haute 100 px en 4:5 et 120 px en 9:16 ; marge au sujet 40 px ; seuils de tête y560 / 580. Les anciens réglages 111/98 sont remplacés pour l’ouverture. Les écrans de fin sont conservés. Un texte trop long est signalé : il n’est jamais réduit pour tenir.


## État courant : référence de grandes lettres et textes retrouvés

La valeur finale de réserve est 450 px, pour contenir trois lignes avec accents et descendantes. Police d’ouverture 170 px, pas de lignes de base 140 px, espacement −1,33 px ; le contour est 1,5 px, sans ombre. Centre de la réserve y325 en 4:5, y345 en 9:16. Le moteur centre les limites visibles verticales du bloc et les glyphes horizontalement. Les seuils de tête sont y590 / 610. Ces valeurs remplacent les essais précédents, notamment la réserve de 420 px et l’écart entre hauts de lignes. Un fichier déjà porteur de texte est masqué dans la galerie de montage pour éviter de mélanger le texte incrusté avec le gabarit.

33 transcriptions de pubs ont été récupérées dans les vidéos de la bibliothèque et ajoutées à Mes textes retrouvés. Les crédits sont recopiés et restent à vérifier ; les transcriptions ne sont pas des validations artistiques ou bibliographiques. Chaque pub garde un lien vers son fichier source. Les anciennes versions du même tableau restent distinctes (notamment Ibiza / lâcher prise et plagiat / robe à paillettes). 32 pubs ont une image associée ; Onglets garde une association à choisir. Les mots sont conservés, même si la nouvelle taille exige de revoir certains textes trop longs. Ne pas réduire automatiquement la police ni tronquer le texte pour faire passer une validation.