whoisjaso/continuum-walkthrough

Continuum Walkthrough

Le point de référence est examples/po-desk/walkthrough.html (PO Desk Walkthrough v4.1, 10/10). Jason : « J'adore les animations, les effets sonores, etc., et le mécanisme de continuité. » Chaque nouvelle création doit le surpasser. Ouvrez le point de référence et copiez son mouvement avant d'écrire quoi que ce soit de nouveau.

Le pipeline (≈ 3–4 h de temps agent ; rendu ≈ 1 h en détaché)

#	Étape	Outil	Porte (Gate)
1	Questions d'intake : poser chaque question dans references/intake-qa.md avec l'outil question (4 par appel, option recommandée en premier)	AskUserQuestion	Pas de construction avant d'avoir les réponses
2	Beat sheet + script : remplir references/beat-sheet.md pour cette offre ; une ligne de voix off par beat, conversationnel	écrire script.json	L'utilisateur approuve le beat sheet
3	Voix : 2 prises de chaque ligne	scripts/vo_gen.mjs	Le crédit du plan gratuit est suffisant (voir Voix)
4	Vérification + temps des mots	scripts/vo_verify.sh (whisper.cpp)	Chaque prise choisie correspond mot pour mot à sa ligne
5	Image : copier engine/starter.html, puis construire scène par scène ; placer chaque clé T.* sur l'attaque du mot qui la nomme	engine/engine.js	Les images fixes de chaque beat sont correctes dans les deux formats
6	Son : écrire une feuille de repères avec un son par événement visible (voir references/sound-map.md)	scripts/mix.py cues.json	−14 LUFS, −1 dBFS, les lignes de voix ne se chevauchent pas
7	Portes (Gates)	scripts/ghost_audit.mjs pour v et h	PASS. Un ÉCHEC bloque le rendu
8	Rendu, détaché	nohup zsh scripts/render.sh … & disown	Nombre d'images = LEN × 60 pour les deux formats
9	Livraison	4 MP4 : 9×16 et 16×9, chacun avec Voix+Musique et Voix+Effets sonores	Planche contact (une image toutes les 2 s) vérifiée visuellement
10	Score : demander une note /10, l'enregistrer et transformer chaque remarque en ligne de registre et en porte	references/lessons.md	—

Configuration : node 20+, ffmpeg, python3 avec numpy, npm i playwright-core (ou PW_DIR), Chrome (CHROME=… optionnel), whisper-cli + ggml-small.en-q5_1.bin.

La structure narrative (ne pas réordonner)

1. Accroche (0–5 s) : une ouverture personnelle et décontractée sur un iMessage réaliste de l'expéditeur, avec sa vraie photo et son nom : « Hé, c'est un peu par hasard… mais j'ai remarqué quelque chose dans ton activité qui pourrait t'intéresser. » Pas encore de logo ni de discours commercial.
2. L'objet arrive (5–10 s) : un tas de notifications réalistes. L'une d'elles (le vrai document) se transforme en une page complète et crédible : en-tête, numéro de bon de commande, tableau, totaux, signature.
3. La douleur, montrée (10–18 s) : une personne nommée (« Maria ») le ressaisit dans chaque destination : ERP (logo réel), CRM (logo réel), dossier, e-mail. Son chronomètre tourne et ses touches cliquent. Chaque destination est DITE dans la voix off.
4. La douleur, chiffrée (18–26 s) : taux × heures × jours ouvrés, avec un compteur qui défile jusqu'au coût annuel en rouge. Le calcul reste affiché en petits caractères. Dites le montant.
5. Le tournant (26 s) : « Voici à quoi ça ressemble quand c'est géré pour vous. » Le même objet revient au centre. La continuité est l'astuce.
6. La solution (28–42 s) : un scan le lit, les champs volent vers une fiche, les cases se cochent, une exception est signalée et expliquée (« 10× leur montant habituel »), puis un tap pour corriger et un tap pour approuver.
7. La preuve (42–51 s) : il est archivé dans les 4 endroits avec des logos et des coches réels, puis un reçu avec horodatage (« 1 min 44 s, de l'e-mail au dossier »).
8. Appel à l'action (51–53 s) : doux et sans pression : « Ça vaut le coup d'œil ? Il suffit de répondre. »
9. Logo seul (53.8–58 s) : le mot-symbole seul sur une scène vide, qui s'estompe. Rien d'autre à l'écran.

Règles de continuité (c'est le rendu)

• Un objet persistant (le document) se déplace entre les dispositions avec des ressorts track(). Il n'est jamais coupé et recréé.
• Chaque scène naît de la précédente : une notification devient la page, la page rétrécit sur le côté, les fenêtres s'empilent et la page revient.
• Les sorties deviennent opacité 0 et visibility:hidden. Ne laissez jamais un élément terminé à 20–50 % comme « fond ». Ce fantôme a coûté à v4 sa silhouette (« une silhouette est affichée tout le temps après 0:18 »). ghost_audit.mjs échoue désormais sur tout élément maintenu à moitié visible pendant plus de 3 s.
• Uniquement des ressorts : step() avec z 0.88–1.0 et sans rebond. Utilisez un flou d'entrée/sortie sur l'apparition/disparition, 60 fps avec 8 sous-images et un obturateur à 180°.
• À l'écran : une idée à la fois, grands caractères, cartes iOS sans bordure, blanc cassé chaud #F4F2EE, encre #0E0E0E, un accent par signification (rouge = coût/problème, vert = fait).
• Les dispositions sont séparées pour v (1080×1920) et h (1920×1080). Concevez d'abord en 9:16 ; le téléphone est l'écran principal.

Liste de vérification du réalisme

• iMessage : grammaire réaliste de l'écran de verrouillage (heure, date, notifications empilées, « maintenant »/« il y a 2 min »), photo + nom de l'expéditeur, son tritone.
• Document : proportions lettre, noms de champs réels, nombres plausibles qui s'additionnent, signature, pied de page.
• Logos : SVG réels (simple-icons, couleur exacte de la marque). Ne montrez que les outils que le prospect utilise réellement ou avec lesquels vous intégrez vraiment. Un logo implique une intégration.
• Les données sont inventées et étiquetées « Données d'exemple · entreprise fictive ». Les calculs financiers montrent leur formule.

Voix : demander d'abord, puis construire

Demandez toujours quelle voix ils veulent (question d'intake 7), avec les options ci-dessous. Recommandez ElevenLabs et dites-leur que c'est gratuit : 10 000 crédits gratuits chaque mois.

Option	Coût	Son	Comment
ElevenLabs (recommandé)	Gratuit : 10 000 crédits par mois ≈ 5 vidéos	Le plus humain	scripts/vo_gen.mjs avec leur clé API (elevenlabs.io → Profil → Clés API)
Leur propre voix, enregistrée	Gratuit	Le plus personnel	Ils enregistrent chaque ligne sur un téléphone ; sauvegardez-la sous vo/raw/<id>-t1.wav et exécutez vo_verify.sh comme d'habitude
Leur propre voix, clonée	Plan payant ElevenLabs	Comme eux, sans enregistrement	Clonage vocal instantané dans ElevenLabs, puis mettez cet ID de voix dans script.json
Voix intégrée de l'ordinateur	Gratuit, sans compte	Robotique	say -v Samantha -o a01.aiff "…" ; à utiliser uniquement pour les brouillons de timing

Détails ElevenLabs :

• Clé : ELEVENLABS_API_KEY ou ELEVENLABS_KEY_FILE. Ne l'imprimez jamais, ne la collez pas dans le chat, ne la commitez pas. Dans T3, utilisez request_secret avec livraison de fichier et supprimez le fichier une fois terminé.
• Par défaut : voix Brian nPczCjzI2devNBz1zQrb, modèle eleven_v4, stabilité 0,45. Les balises audio comme [casual], [measured], [serious] et [confident] orientent la lecture.
• Plan gratuit : 10 000 crédits par mois (≈ 10 000 caractères). Un script de 60 s fait ≈ 900 caractères, donc 2 prises de tout font ≈ 1 800, soit environ 5 vidéos par mois.
• Le plan gratuit n'a pas de licence commerciale (conditions d'ElevenLabs). Utilisez-le pour les brouillons et les révisions internes. Avant de publier ou d'envoyer quoi que ce soit en marketing, générez les prises finales sur un plan payant (Starter est le moins cher).
• Placez les lignes avec un souffle ≥0,3 s entre elles. Les événements d'image se calent sur les attaques de mots de Whisper, jamais sur des temps estimés.

Son

Chaque événement visible reçoit un son audible sur un haut-parleur de téléphone : tritone sur l'iMessage, tintements sur les notifications, clics de touches sur la frappe, un pop sur chaque fenêtre, un coup de caisse sur le montant annuel, une basse profonde sur « juste de la resaisie », un bruit de scanner, des ticks sur les coches, un son de bouton sur chaque tap, un son de succès sur le dernier classement, et un éclat sur le logo. La carte complète avec les gains est dans references/sound-map.md. La musique est un fond optionnel à −23 LUFS, atténué sous la voix. Livrez toujours une version Voix+Effets sonores aussi, car les tendances audio sont ajoutées dans l'application.

Pièges du rendu

• Les rendus meurent lorsque l'application hôte redémarre. Exécutez-les toujours avec nohup … < /dev/null & disown, et vérifiez le nombre d'images après. Le 2026-11-09, même cela a échoué lors d'un redémarrage de l'hôte ; préférez screen -dmS <nom> zsh -c "…".
• Disque : les images sont streamées dans ffmpeg et jamais écrites sur le disque. render.sh supprime l'intermédiaire silencieux après le muxage.
• Pour un SVG ou une image dont offsetWidth est incorrect (par exemple un mot-symbole), définissez vous-même el._w / el._h, sinon le rendu sera décentré.
• Tout ce qui doit rester net sous le flou de mouvement (les « puces » rapides) utilise tf (le temps d'image) au lieu de t.