site-to-reel

Site to Reel

Créez un court film vertical sur un site Web en utilisant le site lui-même : des pages réelles, des clics réels, des états réels. Chaque image est dessinée par un moteur de rendu canvas comme une fonction pure du temps, puis capturée hors ligne et encodée. Ce skill est le workflow de l'équipe, issu de la reel de Dawas Shlef. Le dossier examples/dawas-shlef/ contient les timelines, lignes de voix, scripts de capture et notes de révision de ce projet comme référence travaillée. Traitez-le comme une référence uniquement. Ne copiez pas sa liste de scènes sur un produit différent.

À charger en parallèle :

• video-director pour les principes de réalisation et ses scripts scripts/check_timeline.py et scripts/qa_video.py.
• playwright-cli pour chaque étape du navigateur.

Si l'un de ces skills est manquant, dites-le. N'improvisez pas autour.

Non-négociables

Ceux-ci proviennent du brief qui a façonné le skill, et ils s'appliquent à chaque projet :

1. UI réelle uniquement. Capturez le site local en direct. Montrez un changement d'état en cliquant sur le vrai contrôle et en capturant le vrai résultat, jamais en le dessinant. N'inventez pas d'écrans, de comptes ou de toasts.
2. Laissez le monde de l'utilisateur comme vous l'avez trouvé.
   • Ne reconcevez, modifiez, déployez ou publiez pas le site.
   • Ne lancez pas de campagnes et ne soumettez pas de formulaires.
   • Créez uniquement des données de démonstration, comme un signet, et supprimez-les ensuite. Enregistrez le stockage avant et après.
   • N'effacez jamais les données utilisateur existantes.
   • Arrêtez les serveurs et les sessions de navigateur que vous avez démarrés. Laissez le serveur du site de l'utilisateur en cours d'exécution, sauf s'il approuve son arrêt.
3. URL publique à l'écran, jamais localhost. L'URL apparaît tôt (à 3 s) et sur la carte de fin.
4. Les revendications restent dans brand.json → claims. Les mots ne sont jamais plus forts que la source. Un critique doit signaler toute autre chose, par exemple « aucun compte nécessaire » alors que le brief ne le dit pas.
5. Voix.
   • Ne clonez jamais la voix d'une personne.
   • Ne laissez jamais entendre qu'une voix générée est l'enregistrement d'une personne réelle.
   • Un narrateur TTS parle du créateur à la troisième personne uniquement, donc « créé par X », jamais « je suis X ». Les lignes à la première personne à l'écran sont modifiées en conséquence.
   • Dites à l'utilisateur d'étiqueter l'audio IA lors de la publication.
6. N'appelez pas une version inachevée comme finale. Les versions silencieuses sont des « animatiques ». Les fichiers ne sont nommés *-final que lorsque le son existe et a passé la QA.
7. Ne revendiquez pas ce que vous n'avez pas mesuré. Vous ne pouvez ni voir ni entendre la sortie. Signalez les vérifications que vous avez effectuées et les images fixes que vous avez examinées, et dites clairement ce que personne n'a vu ni entendu, comme la prononciation TTS ou la sensation en temps réel.
8. Ne publiez jamais et ne postez jamais pour l'utilisateur. Vous pouvez télécharger sur son GitHub si demandé, mais la publication sur Instagram et autres réseaux sociaux lui appartient toujours.

Workflow (trois portes d'approbation)

Étape	Vous produisez	Porte
0. Accueil	Un tour de questions (ci-dessous). Lisez le brief, les ressources et le site. Remplissez brand.json.
1. Traitement et look	TREATMENT.md avec l'idée en une phrase, l'accroche, le déroulé des séquences avec lectures, le moment héroïque et les revendications. Une enquête du site en lecture seule. 2 à 4 styleframes du moteur de rendu réel. Une première timeline.json.	L'utilisateur approuve.
2. Animatiques silencieuses	Captures, la timeline complète, images rendues et encodées en *-animatic-silent.mp4. QA. Feuilles de contact, de transition et de détails plus un storyboard, tous à partir du MP4 encodé. Revue critique avec un tour de correction. Notes de révision.	L'utilisateur approuve le rythme et le cadrage.
3. Finales	Narration (enregistrée, ou TTS si l'utilisateur choisit) adaptée à l'image approuvée. Musique et effets sonores. Un mix à −16 LUFS et ≤ −1 dBTP. Sous-titres. *-final.mp4. QA. Critique avec un tour de correction. Couverture. Notes mises à jour.	L'utilisateur écoute et approuve.

Utilisez le mode ask-first lorsque l'utilisateur est présent. Demandez une fois, puis prenez chaque autre décision vous-même et enregistrez-la comme DECISION: … parce que … dans les notes de révision, afin que chacune puisse être annulée en une seule réponse.

Questions d'accueil (un tour, option recommandée en premier)

Ne demandez que ce que le brief et le site ne répondent pas déjà.

1. Quoi et pour qui : la seule chose que le film doit dire, le public, et la langue et le dialecte des légendes.
2. Plateforme et durée : Instagram Reels 9:16 en 1080×1920 (par défaut), une version principale de 45 s plus une version de 15 s coupée séparément, et si un format 16:9 est nécessaire (par défaut non).
3. Faits : les revendications autorisées et l'orthographe exacte de la marque, le nom du créateur et l'URL publique.
4. Ressources : couleurs et polices de la marque, logo ou symbole, et quels états et fonctionnalités du site montrer.
5. Son : l'utilisateur enregistre la voix off (préféré), ou TTS avec divulgation, ou musique et légendes uniquement. Demandez les droits musicaux.
6. Limites : ce qui ne doit pas être touché (le serveur du site, les données utilisateur existantes, les formulaires).

Pour « faites la vidéo maintenant » sans enregistrement disponible, demandez comment obtenir le son. Les options sont : musique + légendes sans voix, l'utilisateur enregistre, ou un narrateur généré. S'il choisit TTS, vérifiez ce qui est installé avant d'installer quoi que ce soit. Installer edge-tts envoie le texte du script au service en ligne de Microsoft, donc obtenez d'abord le oui de l'utilisateur et laissez-le choisir la voix.

Structure du projet

Copiez templates/project/ dans un nouveau dossier de projet, puis éditez-le :

brand.json            nom, mot-symbole, créateur, URL publique, jetons de palette, polices, revendications, neverSay, voix, zone de sécurité
reel.html, reel.js    le moteur de rendu (neutre par rapport à la marque ; lit tout depuis la timeline)
vo-lines.json         lignes VO : [début le plus tôt s, texte, fin la plus tardive s]
assets/fonts, assets/icons, assets/previews
capture3x/            captures + boxes.json (écrit à partir de la sortie de tools/capture.js)
tools/
  survey.js           enquête de page en lecture seule (titres, liens, positions y, clés de stockage)
  capture.js          captures + boîtes de callout, données de démonstration créées et restaurées
  cli3x.config.json / cli4x.config.json / render.config.json   configurations playwright-cli
  build_timelines.py  timeline.json + timeline-ad15.json à partir de brand.json (+ vo/*.json)
  styleframes.js, stills.js, render-frames.js, shot-storyboard.js   scripts run-code
  make_vo.py, make_audio.py, make_srt.py                            voix, son, sous-titres
  review_frames.py, storyboard.py                                   feuilles à partir du MP4 encodé

Commandes

CLI représente node "<argo>/node_modules/playwright/cli.js" cli, ou simplement playwright-cli s'il est installé. Chaque script run-code est un simple async page => {}. Les paramètres voyagent dans la chaîne de requête de l'URL de la page, et --raw imprime uniquement la valeur renvoyée.

# capture (site local déjà en cours d'exécution ; session mémoire propre)
CLI -s=cap open --config=tools/cli3x.config.json "about:blank"
CLI -s=cap --raw run-code --filename=tools/survey.js
CLI -s=cap --raw run-code --filename=tools/capture.js      # enregistre {"caps": ...} dans capture3x/boxes.json
CLI -s=cap close

# timeline + porte
python -X utf8 tools/build_timelines.py
python -X utf8 ~/.claude/skills/video-director/scripts/check_timeline.py timeline.json

# rendu (serveur statique temporaire, arrêté ensuite)
python -m http.server 4380 --bind 127.0.0.1
CLI -s=render open --config=tools/render.config.json "http://127.0.0.1:4380/reel.html?tl=timeline.json&out=<abs frames dir>&times=1.2,24.5"
CLI -s=render --raw run-code --filename=tools/styleframes.js
CLI -s=render goto "http://127.0.0.1:4380/reel.html?tl=timeline.json&out=<abs frames dir>&from=0&to=1349"
CLI -s=render --raw run-code --filename=tools/render-frames.js   # longs films : exécutez en arrière-plan ou par lots

# encodage (animatique silencieuse ; pour les finales, ajoutez -i out/audio/<film>-mix.wav -map 0:v -map 1:a -c:a aac -b:a 192k -ar 48000 -t <dur>)
ffmpeg -framerate 30 -start_number 0 -i <frames>/frame_%04d.png -frames:v 1350 -c:v libx264 -preset slow -crf 16 -pix_fmt yuv420p -r 30 -vf setsar=1 -movflags +faststart out/reel-animatic-silent.mp4

# mesure et révision (toujours à partir du MP4 encodé)
python -X utf8 ~/.claude/skills/video-director/scripts/qa_video.py out/reel-final.mp4 --beats timeline.json --lufs -16 --tp -1 --out out/qa-reel
python -X utf8 tools/review_frames.py out/reel-final.mp4 timeline.json reel
python -X utf8 tools/storyboard.py out/reel-final.mp4 timeline.json reel
CLI -s=render goto "http://127.0.0.1:4380/out/storyboard-reel.html?shot=<abs>/out/storyboard-explained.png"
CLI -s=render --raw run-code --filename=tools/shot-storyboard.js

# étape 3
python -X utf8 tools/make_vo.py && python -X utf8 tools/build_timelines.py && python -X utf8 tools/make_audio.py && python -X utf8 tools/make_srt.py

Sous Windows, exécutez Python avec python -X utf8 et PYTHONIOENCODING=utf-8, sinon la sortie arabe sera cassée.

Boucle de révision

• Critique. Après l'étape 2 et à nouveau après l'étape 3, donnez à un sous-agent frais les MP4, les timelines, les feuilles et les rapports de QA. Demandez une liste classée : doit-corriger, devrait-corriger, détails, chacun avec un timecode et une correction concrète. Lecture seule, moins de 500 mots, pas de problèmes inventés.
• Un tour de correction. Appliquez un tour de correction, puis revérifiez à partir du MP4 encodé.
• Corrections ciblées. Pour une correction limitée à certaines images, sauvegardez ces images, re-rendez uniquement cette plage, puis faites la différence avec la sauvegarde. Les images en dehors du changement doivent être identiques octet par octet avant de ré-encoder.
• Le rapport du critique est une sortie du modèle. Il ne compte jamais comme une approbation de l'utilisateur.

Livrables

• out/<film>-animatic-silent.mp4 (étape 2) et out/<film>-final.mp4 (étape 3).
• out/storyboard-explained.png, out/contact-sheet-<film>.jpg, out/review/, out/qa-*/.
• timeline*.json, vo-lines.json, vo/, out/audio/ (mix plus pistes isolées), out/subtitles-*.srt.
• out/cover/reel-cover.jpg et son aperçu en grille 3:4.
• voiceover-script-*.txt, marqué soit comme vocalisé (moteur, voix, divulgation) soit comme non enregistré.
• review-notes.md : métadonnées ffprobe, structure, chaque vérification avec son numéro, le tableau du critique et ses corrections, DECISIONs, limitations énoncées clairement, commandes exactes, et décisions laissées à l'utilisateur. Le modèle est references/report-template.md.

Références (lisez lorsque vous atteignez cette étape)

• references/motion.md : modèle de caméra, transitions, timing du texte, callouts, légendes, carte de fin, temps d'arrêt.
• references/capture.md : enquête, capture, échanges d'états réels, boîtes, restauration des données de démonstration.
• references/sound-and-voice.md : enregistré vs TTS, adaptation de la VO à l'image, silence héroïque, musique, mix, sous-titres.
• references/instagram-reels.md : format, zones de sécurité, accroche, formulation du CTA, couverture, étiquette IA.
• references/gotchas.md : tous les bugs que nous avons rencontrés et leurs correctifs.
• references/report-template.md : squelette des notes de révision et du message final.
• examples/dawas-shlef/ : l'exemple travaillé complet (pas de captures ni de polices, donc à recapturer).