Ameliawampler/launch-video

Vidéo de lancement

Vous êtes le réalisateur et le conteur du produit. Le monteur vient en second. Chaque plan doit mériter sa place en faisant avancer le spectateur d'un pas de plus vers « J'ai compris, je le veux. »

La vidéo est une page web avec une seule horloge. window.seek(T) dessine la seconde globale T. Playwright la capture d'écran à 30 images par seconde, et ffmpeg encode les images ensemble avec une voix off et une musique de fond. Rien ne dépend de l'heure réelle, donc n'importe quelle image peut être rendue à nouveau seule. Cela permet de corriger une scène sans toucher au reste.

Les fichiers de démarrage se trouvent dans template/ et scripts/, et le README explique comment les exécuter.

1. L'histoire d'abord (avant tout pixel)

Écrivez le script sous forme de phrases clés A, B, C et ainsi de suite. Chaque phrase devient une légende et un temps. Utilisez cette structure en quatre temps :

1. Accroche (0–8s). Nommez le problème avec les mots du spectateur. Pas de mur de logo, pas de « présentation ». Les 8 premières secondes décident si quelqu'un regarde le reste.
2. Le produit en action (8–45s). Un problème, puis la fonction qui le résout, puis le résultat. Montrez le vrai produit en train de faire la vraie chose : taper une invite, obtenir une réponse, publier. Évitez un défilé de fonctionnalités et montrez au maximum 4–5 capacités.
3. Pourquoi c'est différent (45–75s). Montrez l'histoire de l'architecture ou des intégrations, idéalement avec un diagramme animé. Expliquez qui fait quoi. Par exemple : « Nous faisons X ; Stripe gère les paiements et les taxes. »
4. Offre + conclusion (10–15 dernières s). Donnez le prix ou le plan, et terminez sur une ligne de marque. Rendez cette dernière ligne courte et mémorable.

Visez 80–95s au total. Un spot publicitaire de 30s et un format 9:16 peuvent être réalisés plus tard à partir de la même timeline.

2. Règles visuelles (contraintes strictes)

• Pas de chrome du navigateur. Ne montrez jamais d'onglets, de barres d'URL ou de signets. Reconstruisez les écrans du produit sous forme de cartes HTML propres, en utilisant l'enregistrement réel uniquement comme référence, et anonymisez toutes les données.
• Les images du produit flottent. Donnez-leur des coins arrondis (16–18px) et des ombres portées longues et douces. Laissez un rembourrage généreux pour que la carte ne remplisse jamais le cadre ; au maximum environ 75% de la largeur.
• Pas de mots sur les images du produit. Les explications vont dans des callouts à côté de l'interface utilisateur ou dans des légendes en dessous, jamais par-dessus la capture d'écran.
• La couleur d'accent apparaît uniquement sur fond sombre. Ne l'utilisez jamais sur une image du produit. Si la ligne de marque a besoin de l'accent, mettez la carte de fin sur une couleur de marque sombre.
• Ne faites pas tout d'une seule teinte. Utilisez une ou deux touches complémentaires, par exemple un rouge comme #C8323C sur un point d'alerte ou un violet pour une marque partenaire, avec parcimonie.
• Concentrez une zone à la fois. Pour mettre en évidence une fonction, le curseur s'y déplace, double-clique, la caméra se rapproche, et le reste de l'interface grise ou s'estompe.
• Les callouts sont de petites pilules blanches avec un point coloré, ancrées à de vrais éléments DOM. Ils apparaissent avec un léger dépassement, au maximum trois à l'écran, et ils disparaissent avant la fin du plan.
• Arrière-plan : des taches de couleur de marque floues qui dérivent lentement, plus un grain de 6%. Il doit être calme et ne jamais concurrencer le produit. Ne copiez pas un design de bannière textuellement.

3. Vocabulaire du mouvement

• Transition de plan = flou-morphose. Le plan entre à l'échelle 0.92 avec un flou de 18px qui s'estompe à 0, en douceur sur environ 0.7s. Il sort avec échelle +5%, flou 18px et opacité à 0 sur 0.55s. Chevauchez les plans d'environ 0.1s. Évitez les transitions gadget comme les pixels qui s'effacent ou les bandes de tissu ; elles paraissent bon marché.
• Lent zoom avant de 3–5% sur chaque plan, pour que rien ne soit jamais statique.
• Entrées d'éléments en douceur sur 300–650ms, décalées de 80–150ms (stg()).
• Curseur : mouvements fluides et doux, une animation de pression au clic (échelle 0.82 pendant 120ms), et des pauses d'environ 0.3s avant de cliquer.
• Introduction du dock (0–2.5s) : un dock macOS givré avec de vraies icônes d'applications Apple (prenez-les dans un kit UI iOS/macOS, pas dessinées à la main) et l'icône de votre application au milieu. L'emplacement de l'application grandit, la caméra zoome vers lui, le curseur clique, l'icône rebondit avec un point en cours d'exécution, et la scène se transforme en flou-morphose dans l'application.
• Cadence : laissez chaque temps respirer. Laissez 0.8–2s de maintien visuel après une phrase VO avant l'idée suivante. Si cela semble précipité, ça l'est. Ré-espacez la VO avant de couper les visuels.

4. Audio

• VO : générez la voix off avec le clone vocal ElevenLabs du fondateur, une seule prise du script entier. Transcrivez-la (Scribe) pour obtenir les timings au mot près, puis ré-espacez-la : coupez aux silences entre les phrases et insérez du silence supplémentaire là où un temps a besoin de place. Écrivez les heures de début et de fin des phrases dans timeline.js sous forme de TL={A:[début,fin,texte],...}, et ancrez chaque animation sur TL plutôt que sur des secondes codées en dur.
• Pour modifier une ligne, générez uniquement cette ligne, insérez-la dans un silence, et mettez à jour son entrée TL.
• Musique : un fond instrumental. Vérifiez que la transcription est vide pour vous assurer qu'elle n'a pas de voix. Mélangez-la au volume 0.3 avec un ducking sidechain sous la VO, et fondez-la sur les 3–4 dernières secondes (voir scripts/mix.sh).

5. Extraire une animation de votre site Web

Les animations de site pilotées par le défilement peuvent être capturées image par image (scripts/capture-scroll.js) :

• Cachez la navigation, les bannières de cookies et le texte de la section pour qu'il ne reste que le visuel.
• Capturez densément, en utilisant des pas de défilement de 4px. Un pas de 16px rejoué sur 10s équivaut à environ 6 images par seconde et semble saccadé.
• Dans le canvas, mélangez les images adjacentes par index fractionnaire pour une fluidité sous-image.
• Si vous divisez une capture entre plusieurs navigateurs parallèles, préchauffez chacun d'eux en défilant depuis la même position de départ d'abord. Les animations de défilement sont avec état, donc un chargement frais au milieu de la page saute aux coutures.
• Vérifiez les coutures en scannant la différence absolue moyenne entre les images consécutives. Des pics bien au-dessus de la médiane signifient un saut.

6. Pipeline

1. Écrivez le script, puis générez la VO, puis transcrivez-la, ré-espacez-la et écrivez timeline.js.
2. Construisez les scènes dans scenes.js. Chacune est S({tIn,tOut,s0,push,ox,oy,build(){...},update(T){...}}).
3. Vérifiez les images fixes avec node scripts/preview.js page.html out.png T ... aux temps clés.
4. Rendez avec scripts/render-parallel.sh. Ne rendez à nouveau que les plages de temps que vous avez modifiées.
5. Mixez avec scripts/mix.sh, puis encodez avec scripts/encode.sh (libx264 crf 17, yuv420p, AAC 192k, faststart).
6. QA : extrayez les images du mp4 encodé à chaque scène, et vérifiez la ligne de marque, les callouts et les coutures. Écoutez une fois à pleine vitesse avant d'envoyer.

7. Pièges appris à la dure

• Lancez les rendus comme une seule tâche de fond suivie qui attend ses workers. Les tâches nohup détachées sont tuées et laissent des images partielles.
• Précharger des centaines de grandes images par page peut faire planter Chromium avec « Target crashed ». Si une page précharge une grande séquence d'images, utilisez au maximum 2 workers en parallèle. Vérifiez toujours le nombre d'images et les logs du worker avant l'encodage, car un worker planté laisse silencieusement des images obsolètes.
• Les noms de classes peuvent entrer en collision avec le CSS de l'application. Par exemple, .dark dans la feuille de style de l'application a rendu une carte de 1080px de haut, alors préfixez les classes de scène ou utilisez des noms inhabituels.
• Les callouts doivent se terminer au moment de la sortie du plan, sinon ils persistent sur la scène suivante.
• N'exagérez pas les affirmations techniques dans les callouts. Écrivez « Pas de round-trip API · décidé en cours de processus », pas « 0 ms ».
• Lorsque vous modifiez la ligne de conclusion, supprimez également sa légende si la carte de fin affiche déjà les mêmes mots.