clementsprs/product-motion-film

Film produit premium

Une recette pour des films produit d'environ 40 secondes qui ressemblent à une vidéo de lancement de marque et qui donnent l'impression d'être vivants : pilotés par l'interface, sans personnes, sans voix off, avec de la musique et quelques accents sonores. Elle a été affinée au cours d'une quinzaine de cycles de révision sur un vrai film de lancement, y compris la révision du contenu par la marque partenaire ; chaque règle ci-dessous a commencé comme une note qui est revenue en révision.

Modèles de code : references/remotion-patterns.md. Lecture de marque : references/brand-reading.md. Format du brief : references/brief-template.md.

Entrées à collecter en premier

1. Le brief : une ligne par capacité (ce que l'utilisateur demande, ce que le produit fait, ce que l'IA répond). S'il n'y en a pas, rédigez-le (references/brief-template.md) et faites-le approuver avant de construire.
2. Les surfaces en direct de la marque : la page marketing la plus proche du sujet et l'application produit, ouvertes dans un navigateur.
3. Les ressources apportées par l'utilisateur : logotype (SVG), icône, motif d'arrière-plan, logos partenaires et de chaîne (fichiers réels), polices woff2 sous licence, avatars pour des personnes fictives (générés ou sous licence), et musique : demandez s'ils ont un morceau qu'ils aiment avant d'en générer un.
4. Formats : 16:9 d'abord ; les recadrages 1:1 et 4:5 seulement après l'approbation du 16:9.

Si vous ne pouvez pas ouvrir un navigateur, dites-le et demandez des captures d'écran. Ne devinez jamais les couleurs ou la police d'une marque de mémoire.

1. Lire la marque à partir du site et de l'application en direct

Extrayez les vraies valeurs avec un petit script dans la page (getComputedStyle sur le H1, le body, le bouton principal, une carte ; voir references/brand-reading.md) : police de titre / graisse / crénage, gris d'encre et secondaires, accent, rayon de carte et filets, le traitement d'arrière-plan, le visuel signature (par exemple un fond de ciel nocturne), et le SVG du logotype. Écrivez chaque valeur dans un seul theme.ts avec où et quand il a été lu ; aucun littéral de couleur ailleurs.

Une version construite sur un kit de mouvement générique a été rejetée comme « pas premium, pas dans la marque » : construisez sur le propre système en direct de la marque.

2. Structure : une seule conversation continue

Partie	Durée	Contenu
Accroche	~5 s	Les IA avec lesquelles cela fonctionne comme logos complets avec noms, passant dans une seule puce et se terminant par toutes leurs icônes ensemble ; une courte revendication de deux lignes (encre + gris) ; le logotype du produit s'écrase (« fait que ça marche. »)
Conversation ×4	~7-10 s chacune	La requête monte et se tape en grand au centre → envoyée, glisse à droite → ligne de statut (« Recherche … » + le nom réel de l'outil, points → ✓) → la carte produit apparaît dans le fil et se déroule complètement → la réponse de l'IA s'affiche dans une bulle de message
Finale	~3.2 s	Le fond sombre de la marque monte en plein écran (le seul moment sombre) ; « La pleine puissance de [logo], maintenant dans votre IA. » ; URL simple

• Pas d'interstitiels, pas de cartes-titres, pas de légendes en haut. Une discussion montre les capacités. Chaque nouvelle requête est la transition : le fil défile, et le nouveau message qui monte pousse l'échange précédent vers le haut. À l'intérieur d'une étape, la caméra va requête → carte produit → réponse.

• Une chose à la fois en mise au point. Pas d'écran partagé avec le chat d'un côté et le produit de l'autre (« trop d'infos à l'écran »).

• Fond clair tout du long. Les résultats du produit vivent dans la conversation sous forme de cartes ; un panneau sombre montant au milieu du film ressemblait à une coupure brutale. Le sombre est pour la carte de fin.

• Neutre vis-à-vis de l'IA lorsque le produit fonctionne avec n'importe quelle IA (un serveur MCP, une API publique) : pas de logo, de police ou de couleur d'un seul assistant dans le chat. En-tête = une puce « MCP » + « fonctionne avec » + les icônes des IA ; réponses dans la police de corps du produit avec une queue de la couleur du produit sur les mots qui arrivent encore.

• L'IA parle dans des bulles de message (blanches, à gauche, opposées à la bulle grise de l'utilisateur). Un texte de réponse nu ressemble à une légende, « pas une partie de la conversation ». Pas besoin d'avatar.

• Terminez l'exécution avant la réponse : la réponse ne commence que lorsque la carte est terminée. La longueur de l'étape = frappe + statut + temps d'exécution propre de la carte + la réponse.

• Tailles mobiles : requête ~62 px, statut ~44 px, réponse ~58 px sur un canevas 1920 × 1080 ; cartes produit mises à l'échelle ~1.2-1.4× (par carte, de sorte que la plus haute dépasse encore l'en-tête).

• Variante menée par l'agent (le produit EST l'agent IA) : même grammaire avec les rôles inversés. L'agent écrit en premier (bulles blanches, sa marque + mot-symbole dans l'en-tête), l'utilisateur décide (bulles grises, une note vocale avec une forme d'onde et une transcription en direct). Montrez l'appareil, ne l'écrivez pas : un moment de téléphone s'ouvre sur un écran de verrouillage avec la notification push de l'agent qui tombe, puis une tape et la bannière s'agrandit au plein écran comme une ouverture d'application, et la conversation est à l'intérieur ; l'icône de l'application est le visage de l'agent sur un carreau blanc. L'appareil se montre dans la largeur : les moments téléphone se trouvent à l'intérieur d'un cadre de téléphone (colonne étroite, la notification s'ouvre dedans), les moments ordinateur portable utilisent toute la largeur ; le cadre s'ouvre entre eux et tout l'historique se réorganise à la nouvelle largeur (disposez le fil deux fois, téléphone et ordinateur portable, et mélangez les positions et tailles avec le cadre), de sorte que la conversation ne disparaisse jamais. Nommez l'appareil une fois (« Sur votre portable »), les séparateurs ultérieurs ne montrent que l'heure. Ne coupez jamais la scène de preuve (un témoignage client, une référence) juste pour atteindre une durée : elle est revenue sur demande. Dans un film mené par l'agent, la petite marque de l'agent se trouve à côté de chacun de ses messages (contrairement aux films MCP neutres). Un jour sur plusieurs appareils devient une puce d'en-tête de contexte qui bascule (« Sur votre téléphone · 8:42 AM » → « Sur votre portable ») plus des séparateurs de temps dans le fil, jamais de cadres d'appareils. Construisez-le comme une liste d'éléments (agent / utilisateur / voix / carte / séparateur, chacun avec une durée de lecture) et calculez les débuts, la disposition et la caméra de défilement à partir de celle-ci.

• Variante agent proactif (préférée pour l'externe) : lorsque le point est que l'agent travaille pour vous, ne montrez pas du tout de chat. L'agent POUSSE (une ligne d'en-tête dans sa voix + une carte) et l'utilisateur ne fait que taper Accepter ou Ignorer (appuyez + ondulation, puis une puce « Accepté » ; Ignorer / Accepter par ligne lorsque l'agent pousse une liste) ; lorsque la carte poussée a déjà son propre bouton d'action (« Ajouter aux appels d'aujourd'hui »), l'utilisateur tape sur ce bouton et il n'y a pas de ligne Accepter séparée. Un utilisateur tapant des instructions (« coupe l'intro et envoie-la ») se lit comme un simple chat LLM. Autorisez UN moment au-delà d'Accepter : l'utilisateur pose une question à laquelle l'agent répond avec un aperçu (« Des choses que je devrais savoir sur Tom ? ») ou demande un supplément qu'il fait sur le moment ; jamais une correction de copie. Ouvrez les coupes externes avec énergie : une tempête de notifications d'applications réelles qui s'empilent et tremblent, jetées, puis « Trop de fils. » et la marque de l'agent qui s'écrase.

3. Copie

• Les requêtes sonnent comme une seule personne continuant une conversation : la continuité vient de références à ce qui a précédé (« pour eux », « ces signaux », « exécute ça »), avec au plus une légère réaction. Jamais un mot d'éloge sur chaque requête.
• Spécifique et porteur de valeur, avec un vocabulaire partagé entre les étapes (par exemple « signaux d'intention d'achat » dans chaque requête).
• Peu de chiffres : aucun dans l'accroche (pas de prix) ; les chiffres vivent dans les cartes. Les chiffres de revendication ont une source dans le brief ; les chiffres d'interface sont marqués comme illustratifs ; les personnes et les entreprises sont fictives.
• Vrais noms d'outils ou d'API sur la ligne de statut, vérifiés par rapport à la liste réelle des outils du produit. N'en inventez jamais un.
• Les logos remplacent les noms : le logotype à l'intérieur de la ligne de clôture ; un logotype + verrouillage de mot garde son espace de mot. Pas de flèche ou de bouton sur une URL : rien n'est cliquable dans une vidéo.

4. Cartes produit : montrer ce que l'IA a réellement fait

• Une carte par étape, 3-4 lignes, le logotype complet du produit dans l'en-tête.
• Sortie qualitative, ère IA, pas de plomberie : pas de balises de fusion {{firstName}} (« pas assez qualitatif pour l'ère IA »). Montrez un vrai message écrit en direct pour un enregistrement, la phrase tirée de ses données mise en évidence avec un balayage de marqueur, et un angle d'une ligne.
• Les workflows sont des flux avec des branches conditionnelles (étape avec ses mots réels → « Attendre 3 jours » → « Pas ouvert » → email / « Ouvert, pas de réponse » → message vocal avec une forme d'onde en direct), pas une rangée d'icônes de jours. La carte s'agrandit vers le bas au fur et à mesure que le flux se dessine : jamais de bloc vide.
• Les vrais logos de chaîne (LinkedIn, Gmail…) rendent le tout authentique.
• Les listes de statut sont des journaux d'exécution modernes : un rail fin qui se remplit, points en attente → anneau tournant → coche remplie dans la couleur de la marque, une ligne de résultat par étape, une petite durée. Des carrés d'icônes encadrés avec des coches vertes lisent « vieille école ».
• Un changement d'état est son propre moment : un interrupteur attend que la carte atterrisse, puis la piste s'estompe, le bouton s'écrase, une impulsion s'étend, une étiquette « Actif » apparaît, et ce n'est qu'alors que l'exécution commence.
• Coupez l'interface qui n'appartient pas à l'action montrée (une carte de résumé de chat d'équipe sur une étape de planification « n'a pas de sens »).

5. Grammaire du mouvement : dynamique dans les éléments, lisible dans les arrêts

La barre : des films de lancement ludiques où chaque élément a une physique (un exemple public : « We decided to give Grok Bot a phone » d'Allo, octobre 2026 ; pas besoin de mascotte) et les propres films de lancement des assistants IA (conversation sans cadre, gros caractères).

• Ressorts, pas de fluidité pour tout ce qui arrive (spring() avec dépassement ; préréglages et kick() amorti dans le fichier de motifs).
• Les mots jaillissent avec une légère inclinaison et se poussent les uns les autres à mesure qu'une ligne se construit ; les anciennes lignes sont jetées, jamais simplement estompées. Le logotype s'écrase et la ligne tremble une fois.
• Caméra de fil : disposez le fil à partir d'estimations de longueur de texte et faites-le défiler avec des ressorts doux entre les points de mise au point (nouvelle requête centrée → carte centrée → réponse en vue), de petites secousses sur l'envoi et l'atterrissage de la carte. L'en-tête repose sur une atténuation blanche de sorte que le contenu défilé glisse en dessous.
• Les cartes atterrissent avec un ressort (légère inclinaison, une petite bosse lorsque l'appel d'outil atterrit) ; les lignes glissent, les étiquettes et les coches apparaissent, les barres dépassent, les aperçus se retournent.
• Les arrêts restent longs, le mouvement devient rapide : les étapes de 3,2 s étaient « trop rapides, on ne peut pas lire ». Le dynamisme vient d'entrées vives (0,3-0,6 s), jamais d'arrêts plus courts. Réponse à ~9 mots/s, ~1 s avant la requête suivante. Lorsque la durée et la lisibilité entrent en conflit, la lisibilité gagne : proposez de supprimer une étape.
• Pas de coupures dures, pas de fondus enchaînés plein cadre : un seul espace continu.

6. Musique et son

• Morceau feel-good, rebondissant, moderne : ~115-122 bpm, batterie nette et rapide sans grosse caisse de club, basse rebondissante, pincements / guitare / marimba, claps et snaps. Rejeté en révision : un lit de piano calme (« plus dynamique »), electro-pop à quatre temps (« trop boîte de nuit »), tout ce qui rétro (« pas vieille école »).
• Un morceau choisi trop court (les grooves libres de droits sont souvent ~25 s) : répétez des blocs entiers de 4 temps de sa section complète sur les limites des barres, commencez-le après son intro pour que le film s'ouvre à pleine énergie, gardez sa vraie fin sur la dernière image. Ne jamais étirer le temps d'un morceau choisi. Recette dans le fichier de motifs (« Sound »).
• En générer un : demandez la longueur exacte du film et vérifiez le volume sonore par seconde avant de construire dessus ; les modèles ignorent la structure amorcée (une prise est restée silencieuse 15 s avant sa chute). Une amorce qui a fonctionné se trouve dans le fichier de motifs.
• Effets sonores seulement avec une cause visible (pops sur les changements de logo et les atterrissages de carte, clics sur les envois, légers souffles lorsque les requêtes montent et sur la finale, une sonnerie lorsque la dernière étape coche). Mixez à environ -14 LUFS.

7. Qualité : netteté parfaite

• Maître surrechantillonné 2x (--scale=2, CRF 14, JPEG 100, x264 slow) ; les cycles de révision peuvent utiliser un rendu 1080p direct.
• Pas de flou CSS sur les grandes surfaces ; pas de grands flous box-shadow (Chrome les bande, utilisez des dégradés radiaux) ; polices woff2 locales avec une attente bornée ; les SVG avec fill="currentColor" rendent le noir à l'intérieur de <Img>, réécrivez le remplissage.
• Changement uniquement d'image : rendez une fois --muted, rendez chaque mix audio en WAV et mixez. Changement uniquement audio : re-mixez sur l'image existante.

8. Boucle de construction et de révision

1. Échafaudez un projet Remotion (structure dans le fichier de motifs), remplissez theme.ts, placez les ressources de l'utilisateur dans public/.
2. Écrivez le film dans cet ordre : liste de logos + copie d'accroche, PROMPTS, TOOLS, STATUSES, REPLIES, un composant de carte par étape avec sa hauteur et son échelle, puis les constantes de chronologie (les débuts et les durées sont calculés), puis le décalage de musique.
3. Images fixes à chaque étape avant tout rendu complet (npx remotion still … --frame=<sec × 60> --scale=0.5), comme une planche contact : chevauchements, enveloppement, cartes sous l'en-tête, blocs vides, marque d'assistant unique résiduelle.
4. Envoyez la révision 1080p d'abord ; les coupes 4K et sociales seulement après approbation. À chaque correction, reportez-la dans ce skill le même jour.

Les hauteurs de carte sont mesurées, pas devinées : la disposition du fil réserve la hauteur de chaque carte, et une sous-estimation fait glisser le message suivant sous la carte (une carte de résumé réservée à 452 px rendue à ~530 et chevauchée). Additionnez les parties réelles (en-tête + rembourrage du corps + lignes × hauteur de ligne), puis vérifiez une image fixe de l'état final de chaque carte par rapport à l'élément qui la suit avant le rendu complet.

Terminé lorsque

• Il se lit comme une seule conversation avec une IA, une chose à la fois en mise au point, chaque ligne lisible sur un téléphone au premier visionnage.
• Chaque étape se termine dans le produit avant que l'IA ne réponde ; chaque carte produit montre une sortie réelle et qualitative avec de vrais logos de chaîne.
• Rien n'arrive ou ne part sans mouvement ; rien ne dure sans une action visible. La marque est exacte sur toute la surface. La musique s'arrête sur la dernière image. La carte de fin montre l'URL du produit sans bouton. Tous les retours de révision sont intégrés et le skill est mis à jour.

Rendu

Voir les motifs de rendu dans references/remotion-patterns.md. Toujours afficher les images fixes avant un rendu complet ; valider le 1080p avant de lancer le 4K.