Vidéo promotionnelle d'application (Remotion + iPhone réel + interface réelle)
Cette méthode a été développée sur quatre petites applications iOS (Unblock, Talljakt, Georama et Quiz) et est conçue pour être reproductible pour toute application. Tout ce qui est spécifique à l'application se trouve dans examples/. Les parties réutilisables se trouvent dans templates/. Les techniques détaillées, les pièges et les variables réglables sont dans references/techniques.md. Lisez-le avant de construire.
Langue : parlez à l'utilisateur dans la langue qu'il utilise. S'il commence en norvégien, répondez en norvégien. La langue du texte dans la vidéo est un choix séparé (question 3 ci-dessous).
0. Entretien préalable (court)
Posez ces questions ensemble (AskUserQuestion ou un seul message). Suggérez des valeurs par défaut pour que l'utilisateur puisse simplement répondre "par défaut" :
- Durée : 20–60 s. Par défaut ~30 s.
- Format : 9:16 vertical 1080×1920. Par défaut 60 ips. Également 1:1 ou 16:9 ?
- Langue du texte à l'écran.
- Utilisation : partage privé, social (Reels/TikTok, zones de sécurité) ou aperçu App Store. Les aperçus App Store doivent être de véritables enregistrements, max 30 s, sans effets 3D inventés, donc cette méthode leur convient mal.
- Quantité d'interface qui sort de l'écran : aucune (sobre : véritables enregistrements, zooms de mise au point et transitions propres de l'application uniquement, voir
examples/kjop), subtile (un ou deux moments héroïques), moyenne ou totale (tout sort de l'écran). Par défaut, c'est subtile à moyenne ; aucune convient aux applications simples du quotidien (listes, formulaires, paramètres). Totale convient aux applications dont les éléments sont naturellement des objets physiques (tuiles de jeu) ; pour les applications ordinaires (listes, formulaires, cartes), sortez seulement 1 à 3 éléments clés et gardez le reste à l'écran. - Liberté créative : l'agent doit-il proposer le concept ?
- Musique : générée dans le code (par défaut, pas de licence nécessaire) ou leur propre piste ? Donnez à chaque application sa propre palette sonore afin que deux vidéos ne se ressemblent jamais (voir
references/techniques.md#sound). - Quelles fonctionnalités montrer (3–5), et quel est l'élément ou moment "héroïque" de l'application ?
- Fin : deux options éprouvées ; choisissez selon l'application et demandez si ce n'est pas clair. (a) Un logo construit à partir des éléments propres de l'application (Unblock : le logo s'assemble à partir de tuiles 3D, la tuile en laiton arrive en dernier). (b) L'écran d'accueil sur le téléphone avec un slogan au-dessus, où l'icône + le nom est la dernière ligne (Talljakt : "Six numbers. / One target. / [icon] Talljakt.").
- Couleur du téléphone : orange cosmique, bleu profond ou argent. Choisissez celle qui correspond à la couleur d'accentuation de l'application.
Les réponses orientent principalement le concept, la quantité d'éléments qui sortent de l'écran, le tempo (bpm) et les couleurs.
0a. Pré-vol : vérifier la chaîne d'outils
Avant de construire quoi que ce soit, vérifiez ce qui est installé et signalez-le dans une courte liste. Proposez d'installer ce qui manque et n'installez qu'après que l'utilisateur a dit oui (ce sont des modifications système). Ignorez tout ce qui est déjà présent.
| Outil | Vérification | Installation |
|---|---|---|
| Xcode + outils en ligne de commande | xcodebuild -version, xcode-select -p | App Store (Xcode), puis xcode-select --install |
| Runtime du simulateur iOS avec un type de périphérique iPhone 17 Pro | xcrun simctl list runtimes, `xcrun simctl list devicetypes | grep "iPhone 17 Pro"` |
| baguette | baguette --version | brew install baguette |
| Blender | ls /Applications/Blender.app | brew install --cask blender |
| Node 22 | node --version | nvm install 22 (ou brew install node@22) |
| ffmpeg | ffmpeg -version | brew install ffmpeg |
| Python 3 + Pillow | python3 -c "import PIL" | python3 -m pip install --user pillow |
| Homebrew (pour ce qui précède) | brew --version | le script d'installation officiel de brew.sh, exécuté par l'utilisateur |
Ensuite, configurez le projet Remotion (references/techniques.md#setup) et convertissez le modèle iPhone une fois (étape 6 ci-dessous). Les deux sont locaux au projet et ne nécessitent pas d'autorisation supplémentaire au-delà du travail dans le dépôt.
0b. Dossier de livraison (une fois par Mac)
Les vidéos terminées sont livrées dans un dossier fixe sur la machine, pas seulement dans le out/ du projet. Le choix est stocké par Mac dans ~/.config/app-promo/destination (une ligne, chemin complet).
- Lisez le fichier au début. S'il existe, utilisez le dossier sans demander.
- S'il manque, demandez une fois (AskUserQuestion) :
~/Movies/App Promos(recommandé), le dossierout/du projet, le Bureau, ou un chemin personnalisé. Créez le dossier et écrivez le chemin dans~/.config/app-promo/destination. - L'utilisateur peut le changer à tout moment en le demandant ; mettez à jour le fichier.
1. Flux de travail
- Lisez l'application. README, jetons de couleur (recherchez
Color(,hex, structs de thème), polices, copie. Utilisez la copie de l'application dans la vidéo là où elle est bonne. - Trouvez les points d'entrée de débogage pour montrer les états sans jouer : arguments de lancement (
--design-*), schémas d'URL (myapp://design-home?state=…) ou fixtures. S'il n'y en a pas, demandez avant d'ajouter des hooks DEBUG uniquement à l'application. - Construisez et installez sur un simulateur iPhone 17 Pro dédié. Les captures d'écran doivent être en 1206×2622 ou elles ne correspondront pas à l'écran du modèle de téléphone. Voir
references/techniques.md#simulator. 3b. Pour les enregistrements d'écran réels : lisez references/recording.md. Préparez d'abord la scène et les points de tap, enregistrez de courtes prises sans inspection de l'interface, de constructions ou d'analyse vidéo pendant l'enregistrement, et vérifiez le timing brut avant Remotion. Une seule prise continue d'un flux entier (comme dansexamples/quiz) maintient la cohérence de chaque nombre, barre de progression et entrée d'historique. - Prenez des captures d'écran de chaque état. Pour les séquences fixes/découpées, jouez-les avec de vrais taps et prenez une capture après chaque tap (voir
references/consistency.md). Pour la vidéo, faites cette inspection lors d'une répétition séparée, jamais pendant la prise finale. Verrouillez la barre d'état (9:41, 100 %, décharge, ou un indicateur de charge vert s'affiche). Obtenez les cadres des éléments avecbaguette describe-ui. - Découpez les éléments d'interface avec un script
tools/prep_<app>.pyspécifique à l'application qui utilisetemplates/tools/prep_helpers.py: sprites, arrière-plans vides et un JSON de rectangles. Vérifiez chaque ensemble visuellement (composite sur magenta). - Convertissez le modèle iPhone de baguette (USDZ) en GLB avec Blender (
templates/tools/convert_model.py). - Configurez le projet Remotion, ou réutilisez-en un : copiez
templates/src/three/*,Title.tsx,brand.ts,remotion.config.ts,tools/sheet.shettools/prep_helpers.py. - Écrivez une feuille de rythme (
timeline.json) en images sur une grille bpm (120 bpm à 60 ips = 30 images par temps). L'image et le son lisent tous deux ce fichier. - Construisez les scènes comme une seule "prise unique" continue : la caméra reste immobile et le support de téléphone bouge. Les changements d'écran sont cachés par une transition : une rotation, la navigation propre de l'application, un zoom ou un fondu à partir d'un élément, une poussée, un flip, un whip pan, un match cut ou une avance rapide. Variez-les, maximum deux rotations par vidéo. Voir
references/techniques.md#transitions. - Itérez avec des planches-contact (
tools/sheet.sh f1 f2 …) d'images clés. Regardez-les. Rendez la vidéo complète (rapide : ~1–2 min pour 30 s). - Point de contrôle : montrez à l'utilisateur les premières ~12 s avant de construire le reste.
- Générez la bande sonore (
tools/<app>_audio.mjs, copiée d'un exemple) à partir de la même timeline. Rendez, mesurez la sonie (ffmpeg -af ebur128, visez entre −14 et −16 LUFS) et ouvrez le fichier pour l'utilisateur.
12b. Vérification de cohérence (obligatoire avant livraison). Un décalage entre ce qui est sur l'écran du téléphone et ce qui est mis en évidence à l'extérieur ressemble à un artefact IA. Parcourcez references/consistency.md et rendez des planches-contact à ±2 images autour de chaque transition, changement d'écran et sortie d'élément.
13. Texte de partage : écrivez un texte court à coller là où la vidéo est partagée (format ci-dessous). Copiez-le dans le presse-papiers (pbcopy) et affichez-le dans la réponse dans un bloc de code. Ne l'enregistrez pas en tant que fichier.
14. Livrez : copiez le dernier rendu approuvé dans le dossier de livraison (0b) sous le nom <App> promo.mp4. Écrasez la livraison précédente pour la même application ; l'historique des versions (-v2, -v3 …) reste dans out/. Donnez le chemin du fichier livré dans la réponse.
Format du texte de partage
Le texte est généralement posté dans Slack, donc utilisez le format Slack (mrkdwn) : un titre en gras avec astérisques simples et des puces avec "• " (un "- " collé ne devient pas une liste). Écrivez-le dans la langue de la vidéo.
*<App> – <Slogan en 2–4 phrases/mots courts, idéalement celui de la vidéo>.*
<Une phrase : ce qu'est l'application, pour qui ou quoi.>
• <Point : l'action centrale, concrète et active>
• <Point : les choix que l'application donne (sujets, modes, zone, rythme …)>
• <Point : …>
• <Point : récompense/partage/ce qui la rend spéciale>
Règles : 4–5 points, pas de point final à la fin des points, adressez-vous directement au lecteur, verbes concrets, pas de clichés marketing. Commencez par comment l'application est réellement utilisée : les 2–3 premiers points expliquent le mécanisme concrètement avant les options et les extras. Décrivez ensuite ce que l'application permet de faire, pas seulement ce que la vidéo montre : regroupez les options par point ("Entraînez les pays, les capitales ou les drapeaux") afin que le lecteur voie l'étendue. Utilisez les propres noms de l'application pour les choses, et vérifiez dans le code ce que chaque mode fait réellement (les README deviennent obsolètes). Voir examples/*/share.txt.
2. Un modèle de concept qui a fonctionné
Un héros, un mouvement qui lie le tout, la copie de l'application :
| Partie | Unblock | Général |
|---|---|---|
| Accroche 0–2.5 s | Des tuiles tombent sur un plateau flottant dans l'obscurité, sans téléphone. "Bloqué." | Le problème que l'application résout, montré avec les éléments de l'application, sans le téléphone |
| Révélation | Le téléphone se construit autour du plateau pendant que la caméra recule | Le même élément se révèle être à l'intérieur de l'application |
| Boucle centrale | 4 mouvements sur le rythme, un compteur en dehors de l'écran | L'action principale en 3–4 temps |
| Moment héroïque | Le héros sort de l'écran et vole vers la caméra, éclat de laiton | UN grand moment (un effet hors écran, ou la meilleure animation propre de l'application au ralenti) |
| Récompense | Écran de résultat, des étoiles 3D rebondissent | La récompense ou le résultat |
| Fonctionnalités (transitions variées entre) | Sélecteur de niveau, carte quotidienne, score | 2–3 fonctionnalités, chacune avec un élément mis en évidence |
| Outro | Logo construit à partir de tuiles 3D, slogan | Logo assemblé à partir des éléments de l'application, ou écran d'accueil avec slogan + nom |
Si l'application a une animation vraiment bonne qui lui est propre (Quiz : le bouton "Afficher la réponse" se déchire en Faux/Juste), faites-en le héros : zoomez de près, ralentissez-la avec une rampe de vitesse, donnez-lui son propre son, et ne la sous-titrez pas.
2b. Dispositifs visuels issus de bonnes promotions d'applications
Les bonnes références utilisent l'écran et le contenu, pas seulement la mise en page. Prévoyez au moins 3–4 de ces éléments par vidéo :
- Recadrez l'écran : rapprochez-vous suffisamment pour qu'une seule partie apparaisse (un minuteur, une rangée de boutons, une équation). Le téléphone est coupé par le bord du cadre. Utilisez des poses
focus. - Cartes de contenu à côté ou devant le téléphone : de vraies cartes ou affiches de l'application (carte de partage, carte de résultat, suggestion) sous forme de plans plats, légèrement pivotés, derrière ou devant le téléphone.
- Plusieurs cartes de contenu à la fois : déployez 3–5 variantes (pages, solutions, affiches).
- Plusieurs appareils : deux téléphones côte à côte lorsque l'histoire parle de partage ou "le même pour tout le monde", avec des badges de nom au-dessus. Téléphone + Watch/iPad si l'application le prend en charge (baguette a des modèles iPad et Watch).
- Les éléments de l'application comme décoration : de vraies tuiles, boutons, puces ou icônes dérivant en arrière-plan (flous = loin), ou agrandis en typographie au-dessus du téléphone. Un motif thématique (ligne d'impulsion, trait de pastel, papier millimétré).
- Ce que l'application produit, en tant qu'objet : l'impression, l'affiche, la carte, idéalement sans le téléphone.
- Bulles de parole ou de pensée pour les choses qui se passent en dehors du téléphone (Quiz : la réponse prononcée surgit à côté de la carte, puis tombe sur le bouton Juste/Faux pour "l'enfoncer").
2c. Texte et cadrage
- Les grands titres centrés en haut portent le message : 2–4 mots par ligne, maximum deux lignes, la deuxième ligne ou le mot clé dans la couleur d'accentuation.
- Petites légendes en bas, avec parcimonie, seulement lorsque le titre a besoin d'être clarifié (2–3 fois dans une vidéo de 30 s). Elles doivent être lisibles : au moins ~50 px, dans une pastille avec un fond clair et une ombre (pas de texte libre), placées bas pour ne jamais croiser le cadre du téléphone, visibles pendant au moins 2 s.
- Ne revendiquez que ce que l'application fait réellement. Vérifiez ce qu'est vraiment une fonctionnalité avant d'écrire à son sujet.
- Les cartes de texte plein écran sont prises en charge : une surface colorée (la couleur primaire de l'application) avec un grand titre centré sur deux lignes, fondu depuis l'élément en dernier plan et disparaissant en glissant vers la scène suivante. Utilisez-en une comme pause ou pont avant la fin, idéalement une question qui interpelle le spectateur ("Pouvez-vous la trouver à temps ?"). Ne sautez pas directement de l'action intense à l'écran de fin. Voir
QuestionCarddansexamples/talljaktetexamples/quiz. - Pas d'icône et de nom d'application fixes dans un coin. Montrez le nom uniquement à la fin, dans le logo ou comme dernière ligne du slogan.
- Gardez le cadre propre : une idée par scène. Si une fonctionnalité a peu à montrer (un paramétrage), intégrez-la comme légende ou un court focus dans une autre scène plutôt que de lui donner sa propre scène. Évitez titre + téléphone zoomé + rangée d'éléments + légende en même temps.
- Tempo : pas de temps mort. Chaque scène a un événement dans ~1 s après le début, et aucun titre ne reste sur un écran statique plus de ~1,5 s. Les étapes qui se répètent (questions 2–13 d'un quiz) peuvent être accélérées.
- Montrez les choix comme une action, pas du texte. Si l'application a des modes ou des paramètres, montrez la sélection du défaut (la carte se soulève un peu), un tap sur l'alternative (elle se soulève, l'écran change d'état), puis un tap sur démarrer qui mène à ce mode.
- Les interactions qui seraient autrement peu claires (ouvrir un menu, choisir une option) reçoivent un indicateur de tap (un cercle qui appuie et se propage en ondulations) sur ce à quoi l'application répond réellement.
3. Principes
- L'interface réelle est meilleure que l'interface recréée. Utilisez des captures d'écran, des enregistrements et des découpes, pas des copies HTML de l'application. Le texte qui doit changer (compteurs, scores) est dessiné dans la police de l'application avec PIL et vérifié par rapport à l'original.
- Dosez la "sortie de l'écran". C'est un assaisonnement. La valeur par défaut est un moment héroïque et 1–2 fonctionnalités sorties de l'écran.
- Le zoom et la mise au point sont l'outil principal pour l'accentuation. Déplacez la caméra sur la partie de l'écran qui est importante.
(Le contenu est tronqué pour la traduction, mais la structure et les principes sont préservés.)