app-preview-video

App Preview Video

Créez une vidéo de présentation pour une application mobile destinée à l'App Store ou à Google Play. Deux choses sont produites :

1. Un projet Remotion (la vidéo elle-même est du code React, modifiable et exportable à volonté).
2. Une console web en chinois que l'utilisateur non technique peut utiliser pour modifier le texte, les médias, l'ordre des pages, les transitions, les animations, le volume et l'exportation.

Ce skill est destiné à des utilisateurs qui ne connaissent pas le code. L'objectif n'est pas que vous terminiez la vidéo, mais que vous construisiez le contenu et la structure, puis que vous remettiez la console à l'utilisateur. Parlez dans un langage simple, sans montrer de code ni de commandes.

Structure de la vidéo

Ouverture (icône de l'application) → Pages (nombre quelconque) → Fin (logo + slogan)

Il existe deux types de pages :

• Page fonctionnalité : deux lignes de gros caractères + un téléphone, qui affiche une capture d'écran ou un enregistrement de l'application. Vous pouvez encadrer certaines zones de la capture que l'on appelle "zones d'explication" ; dans la vidéo, un doigt appuie dessus, la zone s'agrandit et une explication apparaît.
• Page carte : deux lignes de gros caractères + un ensemble de cartes, idéales pour lister plusieurs arguments de vente.

Toutes les données modifiables se trouvent dans src/settings.json du projet, que la console lit et écrit. Consultez references/settings.md pour la description des champs. Lisez-le avant de modifier le JSON.

Procédure

1. Clarifiez d'abord, puis agissez

Demandez tout ce qui manque en une seule fois :

• De quelle application s'agit-il, lien vers le site officiel ou la boutique (lisez vous-même les fonctionnalités et les arguments de vente, ne les faites pas répéter par l'utilisateur).
• Quelles fonctionnalités voulez-vous montrer, quel marché ciblez-vous, dans quelle langue ?
• Médias : icône de l'application, logo avec texte, captures d'écran ou enregistrements de chaque fonctionnalité.
• Y a-t-il une vidéo de référence ? Si oui, regardez d'abord le rythme et les transitions.

Même si les médias ne sont pas encore disponibles, vous pouvez commencer à construire la structure, en laissant des espaces réservés pour les pages fonctionnalités.

2. Planifiez les pages

Fournissez d'abord à l'utilisateur un tableau de storyboard (pour chaque page : durée, ce qui s'affiche dans le téléphone, texte des deux lignes de gros caractères, transition utilisée). L'utilisateur approuve avant que vous ne créiez le projet. Quelques conseils :

• Les vidéos dans les boutiques sont lues automatiquement sans son, les informations reposent uniquement sur les gros caractères. Le produit doit apparaître dans les 3 premières secondes.
• Chaque page présente un argument de vente, deux lignes de gros caractères, chaque ligne ne doit pas dépasser 4 mots en anglais, sinon elle sera trop large.
• Utilisez des chiffres concrets au lieu de superlatifs comme "numéro 1" ou "le meilleur" ; Apple est sensible à ces derniers lors de la validation.
• Durée totale : 15 à 30 secondes. Une page fonctionnalité avec explication dure environ 4 à 5,5 secondes, une page fonctionnalité standard 3 à 4 secondes.

3. Créez le projet

Mac / Linux :

<dossier_skill>/scripts/create_project.sh <dossier_cible>

Windows :

powershell -ExecutionPolicy Bypass -File <dossier_skill>\scripts\create_project.ps1 -Target <dossier_cible>

Le script copie le modèle et installe les dépendances (nécessite une connexion internet la première fois, une ou deux minutes). Choisissez un dossier cible accessible par l'utilisateur ; si la session n'a pas de dossier de projet, créez-le dans le répertoire de travail actuel. Ne modifiez pas directement le modèle dans le dossier du skill.

Si Node.js n'est pas installé (nécessaire version 18 ou supérieure), le script ne fera rien de lui-même, il affichera NEED_NODE, se terminera avec le code de sortie 3, et expliquera ce qui doit être téléchargé. Dans ce cas :

1. Expliquez en langage simple à l'utilisateur qu'il a besoin d'un environnement d'exécution appelé Node.js, qu'il peut le télécharger automatiquement depuis le site officiel (version portable, environ 45 Mo sur Mac, 30 Mo sur Windows), le placer dans son propre dossier uniquement pour cet outil, sans modifier le système et sans nécessiter de mot de passe administrateur.
2. Si l'utilisateur est d'accord, relancez la commande avec --install-node (Windows : -InstallNode).
3. Si l'utilisateur n'est pas d'accord ou si le téléchargement est bloqué par le réseau de l'entreprise, demandez-lui (ou à son service informatique) d'installer Node.js depuis https://nodejs.org, puis de revenir.

Demander avant d'installer est intentionnel : télécharger et exécuter un programme depuis Internet ne doit pas se faire silencieusement. Le script a une somme de contrôle officielle codée en dur ; si le fichier téléchargé ne correspond pas, il est supprimé et une erreur est signalée. Ne contournez pas la vérification ; demandez à l'utilisateur de réessayer ou d'installer manuellement.

Toutes les commandes suivantes sont exécutées via le lanceur du projet : Mac / Linux utilisez ./run.sh <commande>, Windows run.cmd <commande>. Il inclut automatiquement la copie téléchargée de Node.js ; si le Node.js système est utilisé, il ne change rien, donc c'est la façon la plus simple d'écrire. Les commandes ci-dessous omettent ce préfixe.

4. Remplissez le contenu

• Copiez les médias dans le dossier public/ du projet, puis remplissez les noms de fichiers dans src/settings.json.
• Modifiez le tableau pages selon le storyboard : texte de chaque page, durée, transition, couleurs.
• Choisissez les couleurs de la marque à partir du logo, et remplissez brand.primary / brand.dark. Dites à l'utilisateur "C'est une estimation basée sur le logo, veuillez vérifier".
• Une fois rempli, copiez le même contenu dans src/settings.default.json ; ainsi, la fonction "Restaurer les valeurs par défaut" de la console ramènera à votre version, pas à un modèle vide.

5. Vérifiez les images

Avant d'exporter, extrayez quelques images pour vérifier. Ne vous fiez pas seulement à la vérification de type pour dire que c'est réussi :

npx remotion still src/index.ts AppPreview /tmp/f.jpg --frame=<numéro_image> --scale=0.3 --image-format=jpeg

Vérifiez au moins une image par page (30 images = 1 seconde). Concentrez-vous sur : les gros caractères ne dépassent-ils pas la largeur, l'explication de la zone d'explication touche-t-elle le bord, y a-t-il un flash blanc à la jonction de deux pages.

6. Lancez la console, remettez-la à l'utilisateur

Dans le dossier du projet, exécutez ./run.sh npm run panel (Windows : run.cmd npm run panel). C'est un service Vite, par défaut sur http://127.0.0.1:5173. Dans l'application de bureau Claude, configurez-la dans .claude/launch.json du dossier racine de la session, puis ouvrez-la avec le panneau de prévisualisation. L'utilisateur peut alors interagir directement à droite :

{"name": "control-panel", "runtimeExecutable": "<dossier_projet>/run.sh", "runtimeArgs": ["npm", "run", "panel"], "port": 5173}

Sous Windows, remplacez runtimeExecutable par <dossier_projet>\\run.cmd. Dans les environnements sans panneau de prévisualisation, communiquez l'URL à l'utilisateur pour qu'il l'ouvre dans son navigateur.

Ensuite, expliquer en quelques phrases comment utiliser la console :

• Cliquez sur un onglet en haut pour passer à cette page ; à gauche, la vidéo saute à cette page ; à droite, ce que vous pouvez modifier pour cette page.
• "+ Ajouter une page" permet d'ajouter une page fonctionnalité ou une page carte ; sur chaque page, vous pouvez renommer, déplacer vers l'avant ou l'arrière, dupliquer, supprimer.
• Faites glisser une capture d'écran ou un enregistrement directement dans la zone en pointillés. En maintenant le clic et en dessinant un rectangle sur la capture, vous créez une zone d'explication.
• Les modifications sont automatiquement sauvegardées. Cliquer sur une option d'animation rejoue automatiquement cette page.
• "Exporter la vidéo" prend environ une minute, le résultat final est placé sur le bureau.

La console n'est utilisable que lorsque ce service est en cours d'exécution. Si l'utilisateur revient plus tard et ne parvient pas à l'ouvrir, il doit le redémarrer.

7. Exportez

L'utilisateur peut cliquer sur "Exporter la vidéo" dans la console. Pour votre propre exportation, utilisez :

npx remotion render src/index.ts AppPreview out/preview.mp4 --props=src/settings.json

Après l'exportation, précisez bien : dimensions (886×1920, 30fps, durée), quelles pages sont des espaces réservés, lesquelles vous avez réellement vérifiées. Le son ne s'entend pas ; demandez à l'utilisateur de l'écouter.

Règles à respecter impérativement

Ce sont des erreurs que nous avons commises ; les raisons sont expliquées ci-dessous.

• Interface réelle. Apple exige que la vidéo de présentation montre principalement l'interface réelle de l'application. Les pages sans capture d'écran n'affichent que des espaces réservés ; ne dessinez pas une interface qui ressemble à une application pour la livrer comme produit final. Le modèle contient un point d'entrée pour les animations de démonstration (MOCKS), qui ne doit être utilisé que lorsque l'utilisateur demande explicitement une place temporaire, et à chaque fois vous devez dire "Ce n'est pas l'interface réelle de l'application, ne peut pas être soumis".
• Utilisez uniquement les effets sonores intégrés. Les 8 effets sonores dans public/sfx/ sont générés par tools/make_sfx.py avec des ondes sinusoïdales et du bruit ; il n'y a pas de contenu tiers, pas de problème de licence commerciale. Pour changer de son, modifiez ce script et régénérez. Pour utiliser des effets sonores ou de la musique externes, vérifiez d'abord la source et la licence avec l'utilisateur.
• Ne modifiez pas les réglages déjà effectués par l'utilisateur. L'utilisateur modifiera src/settings.json via la console. Lorsque vous modifiez du code ou ajoutez des champs, ne faites que "compléter les champs manquants" dans ce fichier ; ne le remplacez pas en totalité. Ne cliquez pas sur "Supprimer" ou "Restaurer les valeurs par défaut" sur les réglages réels de l'utilisateur lors des tests ; faites d'abord une sauvegarde, ou utilisez un fichier --props temporaire.
• Dimensions et durée. Le modèle est en 886×1920 (iPhone 6,9 pouces), 30fps. L'App Store exige 15 à 30 secondes ; le haut de la console devient rouge si la durée dépasse. Les dimensions requises pour d'autres modèles ou Google Play sont différentes ; avant la soumission, demandez à l'utilisateur de consulter les spécifications officielles.
• Expliquer honnêtement ce qui a été vérifié. Dites ce que vous avez vérifié image par image, et ce que vous n'avez pas vérifié pour chaque option.

Fonctionnalités absentes de la console

La console couvre les ajustements courants. Si l'utilisateur souhaite une fonctionnalité qui n'y est pas (nouvelle transition, nouvelle mise en page de page, autre animation), modifiez src/AppPreview.tsx. Ce fichier est organisé par sections, chaque section commence par un commentaire en chinois. La méthode pour ajouter un effet optionnel est en trois étapes :

1. Ajoutez un nom d'option dans le z.enum([...]) correspondant au début du fichier.
2. Implémentez-le dans le composant correspondant (transitions dans useEnterStyle, animation du titre dans Title, entrée et animation du téléphone dans Phone, effets d'explication dans SpotPop / SpotRing / Phone avec le zoom).
3. Les boutons d'options de la console sont générés automatiquement à partir de OPTIONS ; généralement, il n'est pas nécessaire de modifier control/main.tsx. Ajoutez des contrôles ici uniquement si vous ajoutez de nouveaux champs, et complétez les valeurs par défaut dans settings.json et settings.default.json.

Après les modifications, exécutez npx tsc --noEmit -p ., puis extrayez des images pour vérifier le résultat.

Problèmes fréquents

• La vidéo devient noire dans la console, icône d'avertissement : généralement dû à trop de pistes audio chargées en même temps. Chaque Sequence d'effet sonore doit avoir un durationInFrames, et le numberOfSharedAudioTags sur le Player doit être suffisamment grand (16 dans le modèle).
• Les images fraîchement téléchargées ne s'affichent pas : les fichiers téléchargés sont lus directement à partir du disque par le middleware /uploads dans control/vite.config.mts ; ne le supprimez pas (Vite ne reconnaît que les fichiers publics présents au démarrage).
• La zone d'explication n'est pas alignée : le rapport hauteur/largeur de l'écran à l'intérieur du téléphone est défini pour des captures d'écran iPhone (environ 1:2,17). Les captures d'écran avec d'autres proportions seront recadrées, ce qui décalera la zone d'explication. Demandez à l'utilisateur de remplacer par une capture d'écran iPhone en portrait.
• "Faire avancer la petite voiture" (extraire l'icône de véhicule de la capture et la déplacer le long d'un itinéraire) ne convient que pour des tronçons de route droits, l'encadrement doit être précis ; cela est destiné aux captures d'écran d'applications de navigation, ne vous en occupez pas pour d'autres applications.
• La vidéo n'est pas trouvée après exportation : la console affiche le chemin complet du fichier à la fin de l'exportation. S'il y a un bureau, placez-le sur le bureau (y compris sur Windows où le bureau est géré par OneDrive), sinon laissez-le dans le dossier out du projet.
• Windows : le script d'installation et le lanceur sont écrits selon les règles de Windows, mais ce skill a été développé et testé sur Mac, il n'a pas encore été exécuté sur Windows. Lors de la première utilisation sur Windows, surveillez chaque étape ; si un problème survient, corrigez d'abord le script, puis continuez, et informez l'utilisateur. Les polices par défaut diffèrent entre les deux systèmes (Mac : SF, Windows : Segoe UI), donc la même configuration peut produire des différences subtiles dans le rendu du texte dans la vidéo exportée.
• Le port 5173 est déjà occupé : Vite changera automatiquement de port, suivez l'adresse indiquée dans les journaux de démarrage.