vvedantb/eva

Vidéo produit eva

Réalisez une vidéo produit haut de gamme de l'application eva (qualité Linear/Notion) en utilisant le projet Remotion existant situé dans video/. Les séquences proviennent de l'application réelle, capturées avec agent-browser.

Mauvaise compétence ? Celle-ci est le montage multi-scènes soigné (Remotion, musique, sous-titres). Pour une seule fonctionnalité, préférez ses sœurs plus légères : eva-feature-screenshot (une capture d'écran + tweet) ou eva-feature-demo (un enregistrement brut d'agent-browser + tweet). Le texte du tweet pour l'une des trois provient de eva-tweet.

Le projet canonique existe déjà — réutilisez-le, ne recommencez pas depuis zéro.

• Projet : video/ · composition principale : EvaHero (video/src/EvaHero.tsx)
• Sortie de rendu : video/out/eva-demo.mp4
• Composants réutilisables dans video/src/components/ : Backdrop, AppWindow, EvaMark, HeroCaption (+ Accent), Cursor, Spotlight, StatCounter, SnapIn, tokens.
• Scripts d'aide dans video/scripts/ : stills.mjs, gen-music.mjs, check-audio.mjs.

Pour créer une NOUVELLE vidéo : recapturez les écrans pour la nouvelle histoire, modifiez la liste des scènes / sous-titres / durées dans EvaHero.tsx, régénérez la musique pour correspondre aux temps de coupe, effectuez le rendu, QA.

Valeurs par défaut non négociables (apprises à la dure — ne modifiez que si vous avez une raison)

Chacune a d'abord été une erreur. Gardez-les sauf si l'utilisateur les annule.

1. 1280×720, 30ips. Pas de 1080p. L'interface eva est une application de bureau dense ; en 1080p, elle donne l'impression d'être "trop zoomée / trop grande" sur un téléphone. 720p est le point idéal adapté aux mobiles pour Twitter/X.

2. Capturez dans la disposition native du cadre, affichez en plein écran. Réglez la fenêtre du navigateur sur 1280×720 lors de la capture, puis affichez la capture d'écran en plein écran à 1:1 (remplissant tout le cadre). Le principal levier de qualité :

   • Capturer en 2560×1440 et réduire à 720p réduit de moitié la taille du texte de l'interface → donne l'impression d'être "dézoomé" et illisible sur mobile.
   • Recadrer/zoomer la caméra dans une région montre des fragments maladroits de l'interface.
   • Une mise en page de 1280 pixels affichée à 1:1 = tailles d'éléments natives = lisible + "zoomé" + net.

   Zoom zéro signifie zéro. Les from/to de PanScene restent à { scale: 1.0, fx: 0.5, fy: 0.5 } pour chaque scène de capture d'écran. Même un "push-in subtil" de 1.02 à 1.06 coupe le chrome dont le spectateur a besoin — les étiquettes de la barre latérale, le bouton principal en haut à droite, le pied de page des statistiques. Passez également <SnapIn from={0.97}> autour des captures d'écran : la valeur par défaut de 1.06 saute vers l'intérieur et recadre les images d'ouverture de chaque coupe. Le mouvement vient des coupes franches et des accroches de sous-titres, pas des mouvements de caméra.

3. Séquences réelles, états terminés. Pilotez l'application réelle avec agent-browser. Enregistrez un travail déjà terminé (tâches fusionnées, diffs, PRs) — n'attendez PAS les exécutions d'agent en direct (les sandboxes sont arrêtés ; les exécutions en direct sont lentes et instables). Préparez des entrées propres (par exemple, un titre de tâche soigné dans la modale Nouvelle tâche). Voir references/capture-workflow.md.

   Ne soumettez jamais — tapez uniquement. Remplissez le champ d'entrée, ouvrez le sélecteur, capturez. Pas de Entrée dans un éditeur, pas de flèche d'envoi, Créer, Enregistrer, Exécuter ou Démarrer, et ne lancez jamais une session réelle ou une exécution d'agent, même pour une séquence de démo. Soumettre modifie l'espace de travail réel de l'utilisateur et consomme du calcul réel ; l'état préparé est tout ce dont la prise a besoin. Entrée est autorisé uniquement là où il valide le champ lui-même et rien d'autre (accepter une mention @ d'un sélecteur ouvert) — sinon, cliquez sur la ligne du sélecteur.

4. Rapide, coupe franche, synchronisé sur le rythme. Environ 20s au total. Coupez sur le temps (utilisez <Series>, pas de longs fondus enchaînés) et accrochez les sous-titres rapidement. Faites apparaître les scènes avec SnapIn — nu sur les cartes de titre/sortie, from={0.97} sur les captures d'écran (voir défaut 2). Ennuyeux = trop long + trop de fondus enchaînés lents.

5. Musique synchronisée avec chaque coupe. La préférence permanente de l'utilisateur est lo-fi, la variante "classique", sans clap — générez-la avec gen-lofi-variants.mjs, qui marque chaque coupe avec un swell d'accord chaud à la place. Ce script prend --duration, --cuts, --only, --prefix, donc une nouvelle vidéo n'a besoin d'aucune modification du script :

   node scripts/gen-lofi-variants.mjs --duration=20.5 --cuts=2.5,5.5,8.5,11.5,14.5,17.5 \
     --only=classic --prefix=platform      # → public/audio/platform-music-lofi-classic.wav
   

   --cuts doit correspondre aux limites de scène dans la composition. gen-music.mjs est l'ancienne piste de clap — utilisez-la uniquement si l'utilisateur le demande. Voir references/remotion-build.md → Musique.

6. Correspondre au thème d'eva. Noir quasi-pur #050606, accent indigo #818cf8, dégradé de la marque violet #8B3FB8 → bleu #3B7DD8, polices Inter + JetBrains Mono. Le tout dans video/src/components/tokens.ts. N'inventez jamais les couleurs de la marque.

7. Soyez honnête + protégez la confidentialité. Utilisez le PROPRE dépôt de l'utilisateur (vvedantb/eva), jamais les dépôts clients (Evalucom/CarePulse). Ne montrez pas l'accueil "Codebases" (répertorie les dépôts clients), et vérifiez les listes de documents/tâches pour les éléments nommés par le client avant de capturer — préparez un document de démonstration propre si la liste est sale. Ne soulevez jamais de préoccupations concernant les données personnelles concernant les noms ou e-mails à l'écran — Paramètres → Expérimental a un curseur flou-PID qui floute chaque élément [data-pii], donc c'est géré dans le produit. Signalez en revanche les panneaux d'erreur qui divulguent des noms de variables d'environnement ou des identifiants de projet. Les sous-titres décrivent fidèlement — n'impliquez jamais une fonctionnalité que l'écran ne montre pas. Si la seule capture disponible est un sandbox arrêté ou un état vide, reformulez le sous-titre pour correspondre à l'écran plutôt que de l'embellir.

Flux de travail

Travaillez dans cet ordre ; lisez le fichier de référence de chaque étape avant d'effectuer l'étape.

1. Planifiez l'histoire. Flux héroïque par défaut (8 scènes, ~20s) : titre → décrire une tâche → Eva écrit le code → révisez et livrez le PR → tableau → projets → preuve (statistiques de comptage) → sortie. Choisissez d'abord les scènes et les sous-titres en une ligne.

2. Capturez les séquences → lisez references/capture-workflow.md. Démarrez l'application (pnpm dev), connectez-vous en tant qu'utilisateur agent, définissez la fenêtre d'affichage sur 1280×720, capturez chaque écran dans video/public/captures/.

3. Composez/éditez → lisez references/remotion-build.md. Éditez EvaHero.tsx : liste des scènes, durées (multiples du temps), sous-titres, le chemin du curseur pour la scène d'entrée. Réutilisez les composants existants.

4. Scorez-la → lisez references/remotion-build.md → Musique. Exécutez gen-lofi-variants.mjs avec --cuts correspondant aux limites de scène (défaut 5 ci-dessus), pointez le <Audio> de la composition vers le fichier généré, confirmez MUSIC = true.

5. Rendu + QA. Vous ne pouvez pas prévisualiser le mp4 directement (pas de ffmpeg système, et vous ne pouvez pas regarder de vidéo) — faites donc le QA avec des images fixes, une par scène, prises au milieu de la scène :

   cd video
   node scripts/stills.mjs "40,110,200,290,380,470,560" EvaPlatform   # 2ème argument = id de la composition
   

   L'id de composition par défaut est EvaHero — passez-le explicitement ou vous ferez le QA de la mauvaise vidéo. Lisez les PNGs dans video/out/ et vérifiez chaque bord du cadre : le bouton principal en haut à droite est-il entier, les étiquettes de la barre latérale sont-elles entières, le sous-titre chevauche-t-il le texte de l'interface en direct ? Puis effectuez le rendu et vérifiez :

   npx remotion render EvaPlatform out/eva-platform.mp4 --codec=h264 --image-format=png
   node scripts/check-audio.mjs out/eva-platform.mp4   # durée, 1280×720, piste audio présente
   

   --image-format=png garde le texte de l'interface net. Itérez sur les images fixes jusqu'à ce que ce soit correct, puis effectuez le rendu.

Référence rapide

Besoin	Commande (exécutée depuis video/)
Aperçu en direct	npm run dev (Remotion Studio)
Capture d'un écran	bash scripts/shot.sh /vvedantb/eva/web/sessions sessions-list 4000
Rendu d'une compos.	npx remotion render <Id> out/<nom>.mp4 --codec=h264 --image-format=png
QA d'images spécifiques	node scripts/stills.mjs "40,110,200" <IdComposition>
Régénérer la musique	node scripts/gen-lofi-variants.mjs --cuts=… --only=classic --prefix=<nom>
Vérifier le fichier	node scripts/check-audio.mjs out/<nom>.mp4

Compositions existantes

EvaHero (flux héroïque) · SessionsDemo (sessions cloud) · EvaPlatform (les cinq surfaces en un seul endroit : sessions → docs → arène de test → tâches kanban → révisions de PR) · QuickTasksDemo (legacy). Enregistrez toute nouvelle composition dans video/src/Root.tsx en 1280×720 / 30ips.

Pièges qui ont déjà coûté du temps

• L'URL de connexion est /?agent=true (booléen), pas /?agent — la route valide agent comme un booléen zod et /?agent lance "Attendu booléen, reçu chaîne". Si le callback reste bloqué sur "Connexion en cours…" avec Vous êtes déjà connecté, naviguez directement vers la page cible.
• Les superpositions de développement atterrissent dans la capture d'écran. react-scan rend une barre d'outils FPS dans une racine fantôme sur #react-scan-root, et agentation dans [data-agentation-root]. Une feuille de style seule ne tue pas react-scan — son hôte porte des styles en ligne, donc définissez également display:none !important en ligne sur l'hôte. scripts/shot.sh fait les deux ; utilisez-le plutôt que de bricoler une chaîne de capture.
• Enchaînez les appels agent-browser dans une seule commande Bash avec timeout, et mettez en arrière-plan tout ce qui est long. Une chaîne naïve ouvert → attendre → capture fait sauter le délai d'expiration de l'outil. Les références de snapshot -i deviennent obsolètes dès que la barre d'outils de développement se déplie — refaites un snapshot après avoir masqué les superpositions, avant de cliquer.
• Pinez tous les packages @remotion/* à la même version exacte ou le bundler générera des erreurs.
• La musique ne peut pas être auditionnée par Claude. La piste fait exactement ce qui est demandé (un swell sur chaque coupe) mais dites à l'utilisateur d'écouter et d'échanger contre une piste sous licence s'il le souhaite — définissez MUSIC=false pour le silence.
• Les sandboxes dans les anciennes captures de session sont arrêtés, donc chaque écran de session affiche "Démarrez le sandbox pour…". Ne sous-titrez pas comme s'il était actif. Rien dans captures/sessions/ ne montre un sandbox en cours d'exécution.
• Les sous-titres portent le message — la plupart des lectures Twitter sont en sourdine, donc chaque scène a besoin d'un sous-titre.

Guides détaillés : references/capture-workflow.md (séquences) et references/remotion-build.md (composition, thème, musique, rendu, QA).