Aryanban/saas-product-demo-video

Vidéo de démonstration produit SaaS

Créez un court film produit dans Remotion, calé sur le rythme de sa bande-son, dans la marque du produit, à partir des écrans réels du produit. Le même flux couvre les démos horizontales, les reels verticaux, les films avec couches de b-roll, les produits sans interface à enregistrer, et un film qui existe déjà et nécessite une vague de modifications.

Un reel générique en motion graphics est facile à réaliser et facile à ignorer, tout comme celui généré par IA que les propriétaires reconnaissent désormais au premier coup d'œil. Ce qui distingue un film de ceux-ci est rassemblé avant qu'aucune scène n'existe : les actifs et écrans réels du produit, un look emprunté aux films de référence que l'utilisateur aime, une grille de tempo tirée de la bande-son, et un argument visuel que le film porte. Le reste de ce skill est un savoir-faire construit sur ces bases.

Commencez sur la bonne branche

• Un nouveau film. Réception, look, échafaudage, battements, brief, le point de contrôle, la construction : le flux ci-dessous, avec le raisonnement dans references/workflow.md.
• Un film existant. Lisez docs/video/notes.md (d'abord chaque entrée "décision"), le brief et la dernière version, inspectez le rendu accepté et la source séparément, et classez la demande avant de toucher à quoi que ce soit : une modification mineure derrière un interrupteur, un reskin en conservant chaque timing et mouvement, une reconstruction avec un storyboard ou des bancs d'essai. references/iteration-playbook.md, "Classifiez la demande en premier". Ne refaites pas la réception ou ne rouvrez pas le look pour une petite correction.
• Critique ou planification uniquement. Examinez le rendu (references/self-check.md, references/taste-review.md) et retournez une liste classée ; ne construisez rien. Dites sur quelle preuve chaque constat repose : un arrêt sur image, une mesure, ou la lecture, que vous ne pouvez pas faire.
• La narration donne le rythme. L'échafaudage est guidé par la musique. Un film calé sur une voix-off place ses événements manuellement (BEAT_SYNCED = false dans le fichier de tempo) et le brief indique que les coupes ne s'aligneront pas sur la musique ; dites-le avant de commencer.

Définition de terminé

• Un projet Remotion avec une composition maître et une composition de débogage par scène ; chaque changement candidat derrière un interrupteur dont la valeur par défaut est le look livré.
• docs/video/brief.md : les entrées, le look, l'argument visuel en une phrase, le script scène par scène, les hypothèses.
• beats.json et un fichier de tempo que chaque scène lit pour ses trames, de sorte que modifier un index de battement refasse défiler le film.
• Un MP4 HD (1920x1080 ou 1080x1920), avec marquage couleur, un arrêt sur image pour la vignette, et un rendu 4K sur acceptation du propriétaire qui reprend l'audio HD.
• Chaque scène vérifiée par vous sur des arrêts sur image rendus avant que l'utilisateur ne la voie ; les mots comptés ; le propriétaire informé de ce qui a été mesuré et que personne ne l'a regardée.
• docs/video/notes.md avec chaque vague et chaque décision, et un fichier de passation lorsque la session se termine avec du travail en cours.
• Optionnellement quatre à huit effets sonores derrière la prop sfx du maître, mesurés sur leurs événements, avec un rendu Master-NoSfx à côté du maître pour que l'utilisateur choisisse à l'oreille.

Le flux

1. Configuration. Vérifiez les outils et notez ce qui manque. references/setup.md
2. Réception. Envoyez le questionnaire en un seul message et enregistrez les réponses ; capturez le site d'aujourd'hui, pas la mémoire. references/asset-intake.md, references/product-ui-from-site.md
3. Look et argument. Décomposez deux ou trois vidéos de référence en verbes de transition, rythme et mouvements signatures ; écrivez la phrase que le film argumente et le mouvement signature unique. references/reference-video-vibe.md, references/creative-direction.md
4. Échafaudage. Copiez assets/scaffold/ dans le projet et installez. references/project-scaffold.md
5. Battements. Exécutez scripts/detect-beats.py sur la bande-son, en écrivant beats.json sur le placeholder de l'échafaudage, et agissez selon son verdict de fiabilité. references/beat-sync.md
6. Brief et premières scènes. Écrivez docs/video/brief.md, construisez la scène 1 et la première scène qui montre le produit, vérifiez-les sur des arrêts sur image, puis arrêtez-vous au point de contrôle ci-dessous.
7. Construction complète. Construisez les scènes restantes et le maître, en vérifiant chacune sur des arrêts sur image, en comptant les mots, en exécutant le passage d'attention. Ensuite, la couche sonore, si le film en a une : references/sound-effects.md, avant la première vague de corrections, pour que chaque signal sonore repose sur une trame qui a cessé de bouger.
8. Vagues de corrections et livraison. Collectez les notes de l'utilisateur par lots, corrigez derrière des interrupteurs, effectuez le rendu avec les drapeaux du maître, exportez. Une scène que l'utilisateur souhaite repenser obtient deux à quatre directions sous forme de bancs d'essai avec la musique, présentées côte à côte et en taille réelle, et l'utilisateur choisit. Une vague qui reconstruit l'histoire obtient d'abord un storyboard (chaque chaîne à l'écran et une ligne par trame), approuvé avant tout code. Terminez une session longue par un fichier de passation. references/iteration-playbook.md, references/render-export.md, assets/prompt-templates/handoff.md

Un point de contrôle

Arrêtez-vous pour l'approbation de l'utilisateur exactement une fois avant la construction complète : lorsque la scène d'ouverture et la première scène produit sont rendues, avec la coupe entre elles et la musique, et que le brief est écrit. Montrez ce clip et le script du brief ensemble, et posez trois questions : le look est-il correct, les mots sont-ils corrects, et cela se déplace-t-il bien avec la musique.

Le clip a besoin des deux types de scène car ils échouent différemment. Une ouverture typographique montre le look. Une scène produit montre combien il y a à l'écran et comment les événements s'alignent sur le battement, et ce sont ces éléments qu'un utilisateur rejette après une construction complète s'il les voit là pour la première fois. Lorsque l'utilisateur examinera plus tard, une petite page HTML locale avec la vidéo à côté du script met les deux au même endroit ; assets/prompt-templates/checkpoint.html est un point de départ.

La raison d'un seul arrêt, placé ici : les gens jugent bien mieux un rendu qu'un document, et un look ou un rythme incorrect capturé maintenant coûte deux scènes de retravail au lieu de tout le film. Tout ce qui précède le point de contrôle est réversible, alors faites-le sans demander de validation sur des documents. Posez les questions de réception en un seul message, faites un choix sensé là où l'utilisateur n'a pas de préférence, et écrivez chaque choix dans la liste des hypothèses du brief pour qu'il soit facile à opposer. Après le point de contrôle, construisez tout le film avant de demander à nouveau des notes. Une modification mineure dans un ressenti approuvé ne nécessite pas de second point de contrôle ; un changement de ressenti en nécessite un.

Si personne n'est là pour répondre (une exécution non supervisée), répondez à la réception à partir des documents qui vous ont été donnés, listez chaque hypothèse dans le brief, et arrêtez-vous quand même au point de contrôle. Un film entier construit sur un look non approuvé est l'erreur coûteuse que cet arrêt existe pour empêcher. La seule exception est un brief de passation qui dit explicitement de rendre le point de contrôle et de continuer : alors rendez-le, ouvrez-le pour l'utilisateur, et construisez, car une session qui s'arrête sans personne à qui répondre ne livre rien.

Le look de template est l'ennemi

Les propriétaires le nomment en un mot ("claudesque", "Canva", "cheap") et c'est un ensemble de valeurs par défaut : un canevas crème avec une police serif, des lueurs et des blobs, un mot en italique ou en couleur dans un titre, des étiquettes de sourcil, des diagrammes en hub-and-spoke, des glyphes clip-art, un tableau de bord inventé quand le vrai est sur le site, un truc par scène, quelque chose qui pop sur chaque battement, un balancement inactif, un texte qui apparaît et reste. Chaque hexadécimal peut provenir du fichier de marque et le film se lit encore comme un de plus. La liste complète, ce qui a remplacé chaque élément sur un film livré, et la règle du mouvement signature unique se trouvent dans references/creative-direction.md, "Ce qui se lit comme un template". Lisez-le avant la première scène et à nouveau avant tout passage "plus premium".

Un film peut effacer cette liste et se lire encore comme un deck de diapositives propre : le même titre sur un bloc, pas de monde partagé, pas d'arc tonal, l'accent partout. Lorsque deux passes de polissage consécutives tirent "mieux, pas encore ça", arrêtez de toucher au mouvement et effectuez une critique de direction artistique en aveugle sur des arrêts sur image (references/iteration-playbook.md, "Quand les passes de polissage plafonnent"). Sur le film dont il provient, la réponse était un monde 3D partagé, le ton portant l'intrigue, la typographie comme composition et un accent par trame (references/creative-direction.md, references/3d-world.md).

La trame de coupe porte une image

Chaque coupe atterrit sur un contre-temps, et la trame sur laquelle elle atterrit doit être composée : la carte avec sa première ligne, la barre, ou le titre, pas un rectangle vide qui se remplit sur les battements suivants. Un élément composé suffit : avec la carte là sur la coupe, le titre à côté peut monter sur un battement. Les premières ébauches et les agents de scène placent la première ligne sur le premier battement après la coupe, et un film s'ouvre alors sur six scènes consécutives sur du blanc. La règle, l'astuce de pré-rouleau pour les compteurs et les champs de puces, et les mouvements de caméra qui relient les scènes se trouvent dans references/animation-patterns.md.

Le mouvement continue à travers la coupe, et le texte se déplace dans une seule direction

Deux notes de propriétaires qui ont aimé un film dans l'ensemble : "moins de saccades" et "le mouvement du texte est ennuyeux". La première venait de transitions qui s'arrêtaient net des deux côtés de chaque coupe et de plans fixes qui faisaient tout leur mouvement dans la première demi-seconde ; la correction est une sortie qui accélère dans la coupe, une entrée qui la quitte à pleine vitesse, et des plans fixes qui dérivent uniformément. La seconde venait de titres qui apparaissaient et restaient ; la correction est un seul mouvement pour tout le texte d'affichage, choisi parmi les références et utilisé dans chaque scène, entrant sur un battement et partant comme la caméra part, pas un nouveau truc par scène. assets/components/Stage.tsx implémente le premier ; Title.tsx implémente un mouvement de texte ; references/animation-patterns.md contient les chiffres, y compris les clés d'une grande poussée dans l'espace log et comment un objet est passé à travers une coupe.

Une région de changement à la fois : dans une demi-seconde, rien ne bouge dans un coin éloigné pendant que l'événement principal de la scène atterrit. Placez l'élément secondaire là où l'œil est déjà, ou sur la coupe (references/motion-language.md).

Montrez l'idée, pas l'écran

Un film produit n'est pas une visite guidée. Chaque scène produit porte une seule idée, et sa carte ne montre que ce qui fait atterrir cette idée : un nom, un statut, une phrase. Le budget, d'après des films dont les propriétaires étaient satisfaits : environ 4 mots par seconde de durée, 15 à 30 mots sur une carte produit, des titres de moins de 12 mots et sur une seule ligne. Une coupe avec deux fois plus a attiré "trop de texte". La formulation réelle du produit est la source des quelques mots que vous conservez ; ce n'est pas une raison pour tous les garder. Laissez de côté les prix, les crédits et les noms de forfaits sauf si l'utilisateur le demande. scripts/check-copy.mjs compte ; references/writing-style.md contient les règles et les indices.

Vérifiez vos propres rendus

Avant que l'utilisateur ne voie une scène, effectuez le rendu d'arrêts sur image aux trames qui comptent et regardez-les : chaque trame de clic, la trame où la ligne de texte la plus longue est entièrement à l'écran, la dernière trame avant chaque coupe, la trame de coupe entière. Confirmez que le pointeur du curseur est sur sa cible, qu'aucun texte ne se wrapped ou n'est coupé, que rien ne quitte la zone de sécurité, et que les mots correspondent exactement au brief. Après un rendu maître : la planche contact, les bandes de coupe, le rapport de saccades avec les mouvements jugés du film passés comme prévu, et le passage d'attention. references/self-check.md contient la liste des trames et les commandes.

Cela importe car les échecs habituels d'un film comme celui-ci (un curseur qui manque son bouton, un titre qui se wrapped, une carte qui est hors de la grille, un vidage de tempo qui a mal tourné) passent tous la vérification de type et le rendu sans erreur. Ils ne sont visibles que dans l'image, ou dans un nombre.

Les arrêts sur image ne montrent pas le mouvement. Si le film est fluide et s'accorde bien avec sa musique, seul une personne qui regarde peut le dire, donc ne le signalez jamais comme vérifié ; dites ce qui a été mesuré et que personne ne l'a regardé.

Les trois entrées

Actifs. Ratio d'aspect, durée, logo, couleurs de marque, polices, le script, et une bande-son, collectés en amont avec le questionnaire dans assets/prompt-templates/asset-intake-questionnaire.md. Un film avec un mouvement fort et une marque de placeholder se lit comme un template, et chaque actif qui arrive tard force un nouveau rendu. L'interface utilisateur réelle du produit est capturée depuis le site d'aujourd'hui et mesurée à partir du DOM, jamais dessinée de mémoire (references/product-ui-from-site.md) ; un tableau de bord inventé a coulé toute une version. Si l'utilisateur n'a pas de script, references/script-development.md en développe un avec lui.

Look. Deux ou trois vidéos de référence que l'utilisateur aime, chacune transformée en décomposition de réalisateur : liste de plans, verbes de transition (poussée, panoramique fou, fondu au zoom par cut-match, cache de masque), rythme, typographie, mouvements signatures. Les verbes de transition sont la partie la plus importante, car ils transforment une liste de scènes en un plan de caméra plutôt qu'en un deck de diapositives avec des fondus. Un film précédent que l'utilisateur a aimé surpasse chaque référence : chargez d'abord ses points de coupe et ses timings d'entrée. Utilisez Gemini lorsqu'il est disponible, ou échantillonnez des trames et lisez-les vous-même ; les deux chemins sont dans references/reference-video-vibe.md.

Battements. scripts/detect-beats.py lit la bande-son et écrit beats.json : le tempo, la trame de chaque battement, quels battements sont des contre-temps, et où la piste s'élève. Les coupes de scène vont sur les battements, par défaut sur les contre-temps, ce qui fait ressentir une coupe comme un coup de batterie ; les trois films de référence qui avaient l'air chers tournaient à 10 à 13 coupes par minute sans plan en dessous de 3,5 s, et un mouvement de caméra dans chaque scène. Les clics et les entrées commencent aussi sur les battements, mais pas sur chaque battement : la plupart des battements dans une scène ne portent rien. Le fichier de tempo dérive chaque trame de beats.json, donc les scènes sont placées par numéro de battement et jamais par une trame saisie à la main. Le script se termine par un verdict de fiabilité : sur good, construisez ; sur check, faites confirmer à l'utilisateur à l'oreille ; sur poor, la piste ne convient pas à un film coupé sur les battements, donc changez la piste ou dites à l'utilisateur que le film ne sera pas synchronisé sur les battements.

La plupart des films suivent les trois. Certains en brisent un délibérément, et c'est correct quand c'est un choix : un film coupé sur une voix-off, par exemple, ne peut pas non plus être coupé sur le rythme.

Travailler avec le propriétaire

• Ils approuvent en regardant. Ouvrez le rendu HD pour eux (open out/...mp4) avec une comparaison côte à côte avec la dernière coupe acceptée et quelques lignes simples avec des temps sur ce qui a changé. Un 4K vient après le oui. Des arrêts sur image en taille réelle de tout ce qu'ils doivent choisir ; deux propriétaires ont changé leur choix en taille réelle.
• **Recommandez, ne demandez pas...

Note : Le contenu original a été tronqué. La traduction complète suivrait le même principe.