Vidéo cinématographique d'application mobile
Transformez un workflow d'application réel en un film 3D dirigé à l'aide du modèle de production incluant Three.js, Playwright, FFmpeg et Python. Il s'agit d'un workflow vidéo éditable basé sur du code, et non d'un projet After Effects.
Commencez par l'application et la direction existante
- Inspectez les exports existants, le code source du projet, les retours utilisateurs actuels, le thème d'exécution réel et les données d'application disponibles avant de créer. Préservez les choix approuvés. Pour un nouveau projet, établissez la fonctionnalité démontrée, le public, le format et les captures disponibles.
- Capturez les composants réels de l'application en utilisant des maquettes fictives ou des enregistrements autorisés. Mesurez les cibles de tap réelles, les décalages de défilement et les limites surlignées. Ne remplacez jamais le comportement réel d'une fonctionnalité par des écrans inventés en les présentant comme authentiques. Étiquetez les visualisations natives uniquement scénarisées dans la provenance de la livraison.
- Faites correspondre les couleurs d'exécution. La palette d'exemple incluse n'est qu'une valeur par défaut ; ce n'est pas la marque d'une autre application. Le mode sombre partout, le texte éditorial clairsemé et une sortie de téléphone / révélation de marque sont les préférences du projet d'origine, configurables lorsque l'utilisateur demande autrement.
Séquence de production
Lisez references/workflow.md pour la méthode de production et les détails fragiles de chronométrage/géométrie. Lisez references/capture.md lors de la création ou de la mise à jour de captures d'écran. Lisez references/timeline.md lors de la création d'actions, de poses de caméra, de défilements ou de texte.
- Pour un nouveau projet, exécutez
python3 scripts/scaffold.py /absolute/nouveau/projetdepuis ce dossier de compétence. Il copieassets/templateet crée des écrans de démonstration synthétiques clairement étiquetés. Remplacez ces écrans avant une livraison réelle. Pour un film existant, modifiez directement son projet plutôt que de recréer l'échafaudage. - Dans le projet généré, installez les dépendances Node/Python et Chromium comme documenté dans le README du dépôt. Définissez
project.jsonà partir du thème réel de l'application, des polices possédées facultatives et de l'image/recadrage de la marque. Le moteur de rendu actuel cible du 1080×1920 à 30 ips, avec des captures d'écran CSS de 430×860 à DPR 3 ; changer les ratios d'aspect nécessite des modifications coordonnées de la géométrie et des coordonnées. - Capturez le workflow et écrivez
source/films.json. Utilisez une seule action de caméra principale à la fois, un retour tactile rapide et des séquences claires de configuration → action → résultat. Gardez la fonctionnalité narrée visible lorsqu'elle est prononcée. Utilisez du texte court ajouté pour l'emphase ; les sous-titres latéraux sont une livraison séparée. - Écrivez
source/narration.jsonet générez la narration manquante avecpython3 source/narrate.pyuniquement lorsque la génération vocale est autorisée. FournissezELEVENLABS_API_KEYetELEVENLABS_VOICE_IDvia l'environnement du processus. Mettez en cache la paire MP3/alignement ; ne mettez jamais de secrets dans le code source, les captures d'écran, les journaux ou les ZIP. Les requêtes payées échouées s'arrêtent sans nouvelle tentative automatique. Utilisez l'audio mis en cache pour l'itération. - Utilisez les horodatages des caractères retournés ainsi que le décalage de mixage de 0,65 seconde pour diriger les surlignages, les taps, la mise au point de la caméra, le texte et la fin. Rendez les images de prévisualisation, inspectez-les, puis rendez le film. Le modèle supporte
--preview,--only INDEXet--manifest PATH; mix/verify/package utilisentsource/films.json. - Exécutez
python3 source/mix.py. Préférez les échantillons de bibliothèque sonore autorisés dansassets/audio/sfx; les échantillons absents utilisent des solutions de repli procédurales originales. Gardez les effets intelligibles sous la voix. Le modèle aligne les pics transitoires sur les actions et atténue les effets sous la narration. - Exécutez
python3 source/verify.py, inspectez visuellement les transitions critiques et les moments narrés, et écoutez le mixage final. Les vérifications automatisées d'image noire/de volume ne garantissent pas que la fonctionnalité correcte est affichée. Révisez les sous-titres et tout le texte promis. - Exécutez
python3 source/package.pyaprès que les exports aient passé l'inspection. Inspectez le contenu explicite de l'archive et les droits médiatiques avant de partager. Livrez le MP4, les SRT/VTT optionnels, les prévisualisations, le code source modifiable et la provenance. La publication, le déploiement et le partage restent dans le cadre demandé par l'utilisateur.
Préservez ces invariants
- La texture de l'application utilise sRGB et
toneMapped:false; l'éclairage de la scène ne doit pas recolorer l'application. - Les pixels de surlignage et de défilement utilisent la même interpolation de défilement mesurée. Un atlas reste actif après la fin du défilement ; sinon, des durées de défilement courtes peuvent exposer une région vide.
- La mise au point de la caméra est calculée avant la transformation de sortie afin que la caméra ne suive pas le téléphone qui s'éloigne. Commencez la révélation de la marque rapidement pendant la narration de clôture ; ne laissez pas une pause vide.
- Les particules dans l'espace monde ont un test de profondeur et un dimensionnement en perspective. Gardez-les subordonnées au contenu de l'application.
- Utilisez explicitement le GPU sur macOS (
--enable-gpu --use-angle=metal), rendez des temps déterministesframe / 30, et acheminez les images avec contre-pression dans FFmpeg. - Ne copiez pas de fichiers d'identification, de code source d'application propriétaire, de polices/SFX non licenciés ou de données client dans une compétence réutilisable ou un dépôt public.
Le scripts/demo_audio.py facultatif crée un son synthétique pour un test de fumée hors ligne du pipeline. Il n'est explicitement pas une narration et ne doit jamais être présenté comme une voix off terminée.