# Modèle « pub sur les vraies images de la marque » (mode libre HyperFrames)

Modèle du Motion Deck ajouté le 13/10/2026 à la demande de Fred (demande 7537 : « Fais moi la version complète de cette
pub avec l'intégralité du son de la pub originelle [...] Ajoute le model au deck motion design »).

Ce n'est pas un template à variables : c'est une méthode, celle de la vidéo de Maxence Tison
(https://youtu.be/DBQqB8eqpFI), montée chez nous le 13/10/2026, avec son film exemple. Le déroulé complet et les pièges
mesurés sont dans `../../references/mode-libre-hyperframes.md` ; ce fichier dit ce qui fait le modèle et comment le
rejouer pour un autre client.

## Ce qui fait le modèle

- Une voix réelle d'un bout à l'autre (l'enregistrement du client, ou la Voix de radio sur un texte passé par le skill copy),
  jamais coupée ni réécrite ; une seule piste son au montage.
- Un plan par phrase de la voix, coupé dans un silence ; chaque élément apparaît sur le mot qui le nomme (mots horodatés).
- Les vraies images du client : blocs de ses pages recapturés en double résolution (titres, cartes, avis, messages d'élèves,
  chiffres), ses photos, son logo. Rien d'inventé, aucun visage réel dessiné ou généré.
- Sa charte officielle (skill de design du client s'il existe), deux fonds qui alternent d'un plan à l'autre, une seule
  couleur d'accent ; le rouge seulement pour rayer une fausse croyance.
- Typographie courte à l'écran (le mot clé, le chiffre), jamais la phrase dite : les sous-titres mot à mot la portent,
  dans la zone que les stories Meta ne recouvrent pas (1030 à 1248 px en 9:16), l'action entre 285 et 1000 px.

## Le refaire pour un autre client

1. Copier `BRIEF.md` et `STORYBOARD.md` d'ici dans un projet neuf (`npx hyperframes@<version> init videos/<projet>
   --non-interactive --example=blank --skill=product-launch-video`), dans le chantier ou le dossier du client.
2. La voix : couper l'enregistrement en plans aux silences, écrire `audio_meta.json` à la main (mots relatifs au plan) ;
   au montage, remplacer les pistes par plan par UNE piste entière (`data-start="0"`, durée totale) pour ne rien couper.
3. Les images : `hyperframes capture <URL>`, puis recapturer en double résolution les blocs utiles (Playwright,
   `deviceScaleFactor: 2`, capture d'élément) et les inscrire dans `capture/extracted/asset-descriptions.md`.
4. `frame.md` : partir de celui d'ici (charte TFP) et le refaire sur la charte du client ; polices bannies à vie exclues.
5. Storyboard : un bloc par phrase, temps des mots relevés, une idée visuelle par plan (pas une diapositive), puis
   `frame-packets.mjs`, un constructeur par plan en parallèle, `captions.mjs build`, `assemble-index.mjs`,
   `transitions.mjs inject` et `verify`, `hyperframes lint` et `check`, planche relue, `hyperframes render`.
6. Preuves avant de livrer : durée du film = durée du son (ffprobe), planche de six images au moins, polices relues au
   grep, lecture prouvée en navigateur coupé (jamais de son sur le Mac).

## L'exemple

The French Pâtissier, la pub gagnante « Ad 1_Hook 2 - Scale WINNER » (voix de Mehdi, 76,65 s) refaite en 16 plans sur
les vraies images de la page Passeport CAP et du site. Projet : `inocom-os-2/chantiers/creation-motion-design/
essai-hyperframes/videos/tfp-masterclass-complete/` (BRIEF.md, STORYBOARD.md et frame.md copiés ici).