Communitygithub.com

Justice219/vidéo-cinématique-d-application-mobile

Créez des vidéos de démonstration d'applications mobiles cinématographiques avec des téléphones 3D réels, des captures d'écran authentiques, des actions narrées, des surlignages synchronisés, un texte minimal, des particules et une conception sonore. Utilisez-le pour des éditoriaux d'application ou des vidéos de démonstration de fonctionnalités et leurs révisions.

Qu'est-ce que vidéo-cinématique-d-application-mobile ?

Cette compétence transforme un workflow d'application réel en un film 3D dirigé à l'aide d'un modèle de production incluant Three.js, Playwright, FFmpeg et Python. Contrairement à un projet After Effects, il s'agit d'un workflow vidéo éditable basé sur du code. La compétence est utile pour les développeurs et les créateurs de contenu qui souhaitent produire des vidéos de démonstration d'applications mobiles de haute qualité, avec un rendu 3D réaliste du téléphone, des captures d'écran authentiques et une narration synchronisée. Le processus commence par l'inspection des exports existants et des commentaires des utilisateurs, puis la capture des composants réels de l'application, la configuration du projet selon le thème et la marque de l'application, et se poursuit par la production de la séquence vidéo complète : capture du workflow, génération de la narration (via ElevenLabs si autorisée), mixage audio avec des effets sonores, vérification et packaging final. La compétence prend en charge sur macOS le rendu GPU explicite et une sortie en MP4 avec sous-titres optionnels. Elle garantit que les textures de l'application respectent l'espace colorimétrique sRGB avec toneMapped:false et que les surlignages et défilements utilisent une interpolation mesurée cohérente. Le rendu est configuré par défaut en 1080×1920 à 30 images par seconde, avec des captures d'écran CSS de 430×860 à DPR 3.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Justice219/mobile-app-cinematic-video/tree/main

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

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.

  1. Pour un nouveau projet, exécutez python3 scripts/scaffold.py /absolute/nouveau/projet depuis ce dossier de compétence. Il copie assets/template et 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.
  2. 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.
  3. 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.
  4. Écrivez source/narration.json et générez la narration manquante avec python3 source/narrate.py uniquement lorsque la génération vocale est autorisée. Fournissez ELEVENLABS_API_KEY et ELEVENLABS_VOICE_ID via 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.
  5. 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 INDEX et --manifest PATH ; mix/verify/package utilisent source/films.json.
  6. Exécutez python3 source/mix.py. Préférez les échantillons de bibliothèque sonore autorisés dans assets/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.
  7. 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.
  8. Exécutez python3 source/package.py aprè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éterministes frame / 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.

Skills associés