suxrobGM/jobpilot

Vidéo teaser

Produisez un teaser de qualité lancement (~30-45s) d'une application en cours d'exécution : scénarisez-le, filmez-le en pilotant l'interface utilisateur réelle, montez-le avec ffmpeg et restituez un MP4 ainsi qu'un GIF pour le README.

Le résultat doit ressembler à une vidéo produit, pas à un enregistrement d'écran. La différence réside dans la direction – mise en scène, cadrage et rythme – pas dans la résolution.

Les implémentations de référence se trouvent dans reference/ ; ce sont des modules ESM fonctionnels, pas du pseudo-code. Installez dans un répertoire temporaire – jamais dans le projet :

cp -r <skill>/reference/* "$SCRATCH/" && cd "$SCRATCH" && npm install
export TEASER_BASE_URL="https://the-app.example.com"

reference/package.json déclare "type": "module" ainsi que les trois dépendances. Chaque script lit TEASER_BASE_URL, donc rien n'est codé en dur pour une application particulière.

Avant tout : les deux règles strictes

1. Ne déclenchez jamais d'effets de bord réels sans consentement explicite et détaillé.

Filmer une application réelle signifie cliquer sur de vrais boutons. Certains peuvent envoyer un email, publier publiquement, débiter de l'argent ou soumettre des formulaires à des tiers. Avant de toucher à l'application :

• Énumérez chaque action de votre storyboard qui quitte la machine.
• Dites précisément à l'utilisateur ce que fait chaque action et combien de fois, puis obtenez son accord sur le nombre.
• Privilégiez un mode qui s'arrête avant l'étape irréversible (un aperçu, un test à blanc, une porte de confirmation que vous filmez puis déclinez).

Il n'existe pas de sonde en lecture seule sur un système en production. Un clic « de diagnostic » qui atterrit dans une session déjà active s'exécute pour de vrai. Si vous dépannez pourquoi une action n'a pas fonctionné, supposez que votre prochain clic fonctionnera et soyez prêt.

Si quelque chose se déclenche sans que vous l'ayez voulu : arrêtez immédiatement le processus à sa source (tuez la session/le worker, pas seulement le bouton de l'interface, qui peut ne pas avoir d'effet), vérifiez l'état arrêté en le relisant, et indiquez-le clairement à l'utilisateur dans votre message final – nombre compris.

2. Considérez que chaque image est publique et pleine de PII.

Les vrais comptes contiennent des noms, emails, adresses et documents. Décidez de la politique avec l'utilisateur dès le départ :

• Cadrez autour (par défaut) – composez des plans qui excluent l'identité. Recadrez les éléments persistants (barres latérales, avatars, menus de compte) à l'étape ffmpeg.
• Masquez avant de filmer – utilisez page.evaluate pour mettre visibility: hidden sur les cartes problématiques avant que la caméra ne tourne. Ne filmez jamais en espérant couper autour.
• Utilisez un compte démo préparé – le plus propre quand il existe.

Passez en revue chaque image du montage final en pleine résolution avant de livrer. Pas le planche contact – les images.

Flux de travail

1. Repérage et storyboard

Prenez d'abord des captures d'écran authentifiées de chaque écran candidat (reference/scout.js). Regardez-les. Ensuite, écrivez un tableau de storyboard : séquence, plan, ce que le spectateur doit ressentir et durée. Un plan sans fonction attribuée est coupé avant d'être filmé.

Un arc qui fonctionne : tension (le problème) → révélation (le produit) → preuve (il fait vraiment la chose) → ampleur (les résultats) → confiance (là où il tourne) → conclusion.

Notez dans le storyboard quels écrans contiennent des PII et lesquels sont sûrs.

2. Mise en scène

Organisez avant de filmer, jamais après :

• Choisissez des vues où les données sont les meilleures – graphiques pleins, listes actives, noms reconnaissables, compteurs non nuls. Ne filmez jamais un spinner, un état vide ou un graphique à moitié rendu.
• Régiez délibérément l'état de l'interface (largeurs de panneaux, réduit/développé, filtres, position de défilement) via localStorage dans un script d'initialisation ou un page.evaluate avant le tournage.
• Masquez les toasts, bannières et barres de cookies hors caméra.
• Laissez les données se stabiliser : networkidle plus quelques secondes.

3. Tournage

Utilisez le screencast CDP (Page.startScreencast), pas un enregistrement d'écran. Il capture la page hors écran à ~100 fps, donc rien de ce que fait l'utilisateur n'apparaît dans l'image et la machine reste utilisable. Playwright pilote ; CDP filme. reference/rig.js l'implémente.

• Un sujet par plan. Cadrez la chose, pas « toute l'application ».
• Les mouvements de caméra proviennent du défilement scripté avec easing à l'intérieur de la page (cameraScroll), jamais d'un filtre. Voir l'avertissement sur zoompan ci-dessous.
• Le curseur est un acteur : utilisez le curseur SVG injecté (cursorClick) qui glisse avec easing et s'abaisse en appuyant, ou masquez-le. Pas de dérive inactive.
• Répétez chaque prise, extrayez des images, regardez-les, ajustez, puis filmez pour de bon.

Filmer une fenêtre externe (un navigateur que l'application ouvre elle-même, une application de bureau) nécessite une capture du système d'exploitation – gdigrab/x11grab/avfoundation (recordDesktop dans le rig). Cela capture tout ce qui est à l'écran, y compris le travail personnel de l'utilisateur. Avertissez l'utilisateur, demandez-lui de s'éloigner, et passez en revue le résultat image par image ; supprimez-le s'il a capturé quelque chose de privé.

4. Cartes titres

HTML/CSS animé filmé dans le navigateur, pas des images statiques. Injectez le balisage de la carte dans une page vierge sur la même origine que l'application pour que ses polices web et sa palette se résolvent, puis filmez en screencast. Extrayez la police d'affichage réelle de la page en direct (getComputedStyle) et figez une pile mono connue plutôt que de la détecter.

Respectez le language de mouvement de l'application (ses propres courbes d'easing et durées). Chargez la compétence frontend-design avant de les concevoir si le projet n'a pas de style de carte établi.

5. Montage

reference/build.js normalise chaque segment à une taille/fréquence d'images commune, puis enchaîne les fondus enchaînés. Gardez des coupes toutes les ~2,5-4s. Donnez de l'espace au moment de révélation à vitesse normale tout en compressant le reste.

6. Révision, puis livraison

• Générez une planche contact et des images en pleine résolution par seconde.
• Vérifiez les images pour les PII, panneaux coupés et texte illisible.
• Vérifiez la durée et les dimensions avec une sonde.
• Livrez un MP4 ainsi que, pour les README, un GIF optimisé par palette (GitHub ne lit pas en ligne un MP4 commité). Gardez le GIF sous ~10 Mo.
• Laissez sans son sauf si demandé ; vous ne pouvez pas licencier de la musique. Dites-le.

Spécificités durement acquises

N'utilisez jamais zoompan pour les zooms avant. Il recalcule le zoom par image et arrondit la fenêtre de recadrage à des pixels entiers, ce qui fait que l'image saute d'avant en arrière – cela donne l'impression d'un tremblement de terre. Utilisez des plans fixes plus un défilement réel dans la page. Si vous devez absolument faire un zoom avant, pré-échantillonnez la source 4x d'abord, et vérifiez avec une mesure de différence d'image (reference/jitter.js) : un plan fixe verrouillé doit mesurer bien en dessous de 1.0 de différence moyenne ; un tremblement visible donne 3+.

Le screencast cesse d'émettre des images lorsque l'animation se stabilise. Une carte dont l'animation se termine après 1,2 s donne un clip de 1,2 s. Remplissez avec tpad=stop_mode=clone:stop_duration=N et coupez à la durée souhaitée avec -t.

Assemblez des images horodatées, pas à un taux fixe. Les images du screencast arrivent avec metadata.timestamp ; écrivez une liste de concaténation ffmpeg avec des durées réelles par image, puis rééchantillonnez à 60 fps constants. Supposer un intervalle fixe produit des saccades.

ffmpeg-static en dépendance de développement, résolue par chemin de module. Ne dépendez jamais de ffmpeg dans le PATH. (ffprobe n'est pas dans ce paquet – analysez ffmpeg -i stderr à la place.)

Capture authentifiée : connectez-vous une fois en mode visible, sauvegardez storageState, réutilisez-le pour chaque prise (reference/login.js). Les sessions expirent – terminez le tournage le même jour ou relancez-le. Initialisez aussi les préférences d'interface localStorage à ce moment.

Localhost depuis une origine déployée est bloqué par la politique d'accès au réseau local de Chrome. Si la page doit accéder à un service local, lancez avec --disable-features=LocalNetworkAccessChecks,PrivateNetworkAccessChecks,BlockInsecurePrivateNetworkRequests.

Recadrez les éléments persistants à un décalage fixe. Filmez à la largeur de la fenêtre 1920 + largeurRail, puis crop=1920:1080:largeurRail:0 pour supprimer la barre latérale et atterrir exactement sur du 1080p.

Livrables

Rapportez le chemin, la durée et les dimensions ; indiquez clairement ce qui est encore nécessaire de la part de l'utilisateur (musique, téléchargement vidéo natif GitHub) ; et divulguez tout ce qui s'est passé pendant le tournage qu'il voudrait savoir.