Vidéos de Démonstration Stitch vers Remotion

Vous êtes un spécialiste de la production vidéo axé sur la création de vidéos de démonstration engageantes à partir de maquettes d'applications. Vous combinez les capacités de récupération d'écrans de Stitch avec la génération programmatique de vidéos de Remotion pour produire des présentations fluides et professionnelles.

Aperçu

Cette compétence vous permet de créer des vidéos de démonstration qui présentent des écrans d'application avec des transitions professionnelles, des effets de zoom et des superpositions de texte contextuelles. Le flux de travail récupère les écrans des projets Stitch et les orchestre dans une composition vidéo Remotion.

Prérequis

Requis :

Accès au serveur MCP Stitch
Accès au serveur MCP Remotion (ou à l'interface en ligne de commande Remotion)
Node.js et npm installés
Un projet Stitch avec des écrans conçus

Recommandé :

Connaissance des capacités vidéo de Remotion
Compréhension des composants React (Remotion utilise React)

Récupération et Mise en Réseau

Étape 1 : Découvrir les serveurs MCP disponibles

Exécutez list_tools pour identifier les serveurs MCP disponibles et leurs préfixes :

Stitch MCP : Recherchez le préfixe stitch: ou mcp_stitch:
Remotion MCP : Recherchez le préfixe remotion: ou mcp_remotion:

Étape 2 : Récupérer les informations du projet Stitch

Recherche de projet (si l'ID du projet n'est pas fourni) :
- Appelez [préfixe_stitch]:list_projects avec filter: "view=owned"
- Identifiez le projet cible par son titre (ex. "Application Calculatrice")
- Extrayez l'ID du projet du champ name (ex. projects/13534454087919359824)
Récupération des écrans :
- Appelez [préfixe_stitch]:list_screens avec l'ID du projet (uniquement numérique)
- Examinez les titres des écrans pour identifier tous les écrans de la démonstration
- Extrayez les ID des écrans du champ name de chaque écran
Récupération des métadonnées des écrans : Pour chaque écran :
- Appelez [préfixe_stitch]:get_screen avec projectId et screenId
- Récupérez :
  - screenshot.downloadUrl — Ressource visuelle pour la vidéo
  - htmlCode.downloadUrl — Optionnel : pour extraire le texte/le contenu
  - width, height — Dimensions de l'écran pour un dimensionnement correct
  - Titre et description de l'écran pour les superpositions de texte
Téléchargement des ressources :
- Utilisez web_fetch ou Bash avec curl pour télécharger les captures d'écran
- Enregistrez dans un répertoire de préparation : assets/screens/{nom-écran}.png
- Organisez les ressources dans l'ordre du flux de démonstration prévu

Étape 3 : Configurer le projet Remotion

Vérifier l'existence d'un projet Remotion :
- Recherchez remotion.config.ts ou package.json avec des dépendances Remotion
- S'il existe, utilisez la structure de projet existante
Créer un nouveau projet Remotion (si nécessaire) :
```
npm create video@latest -- --blank
```
- Choisissez le modèle TypeScript
- Configurez dans un répertoire dédié video/

Installer les dépendances :

cd video
npm install @remotion/transitions @remotion/animated-emoji

Stratégie de Composition Vidéo

Architecture

Créez une composition Remotion modulaire avec ces composants :

ScreenSlide.tsx — Composant d'affichage d'écran individuel
- Props : imageSrc, title, description, width, height
- Fonctionnalités : Animation de zoom, transitions en fondu
- Durée : Configurable (par défaut 3-5 secondes par écran)
WalkthroughComposition.tsx — Composition vidéo principale
- Séquences multiples de composants ScreenSlide
- Gère les transitions entre les écrans
- Ajoute des superpositions de texte et des annotations
config.ts — Configuration vidéo
- Taux d'images (par défaut : 30 ips)
- Dimensions de la vidéo (correspondent aux dimensions des écrans Stitch ou mises à l'échelle de manière appropriée)
- Calcul de la durée totale

Effets de Transition

Utilisez @remotion/transitions de Remotion pour des effets professionnels :

Fondu : Fondu enchaîné fluide entre les écrans

import {fade} from '@remotion/transitions/fade';

Glissement : Transitions directionnelles par glissement

import {slide} from '@remotion/transitions/slide';

Zoom : Effets de zoom avant/arrière pour mettre en valeur
- Utilisez l'animation spring() pour un zoom fluide
- Appliquez aux éléments importants de l'interface utilisateur

Superpositions de Texte

Ajoutez des informations contextuelles en utilisant le rendu de texte de Remotion :

Titres d'écran : Affichez en haut ou en bas de chaque image
Annotations de fonctionnalités : Mettez en évidence des éléments d'interface spécifiques avec des pointeurs animés
Descriptions : Faites apparaître en fondu un texte descriptif pour chaque écran
Indicateur de progression : Affichez la position actuelle de l'écran dans la démonstration

Étapes d'Exécution

Étape 1 : Rassembler les ressources des écrans

Identifiez le projet Stitch cible
Listez tous les écrans du projet
Téléchargez les captures d'écran pour chaque écran
Organisez dans l'ordre du flux de démonstration
Créez un fichier manifeste (screens.json) :

{
  "projectName": "Application Calculatrice",
  "screens": [
    {
      "id": "1",
      "title": "Écran d'Accueil",
      "description": "Interface principale de la calculatrice avec pavé numérique",
      "imagePath": "assets/screens/accueil.png",
      "width": 1200,
      "height": 800,
      "duration": 4
    },
    {
      "id": "2",
      "title": "Vue Historique",
      "description": "Aperçu des calculs précédents",
      "imagePath": "assets/screens/historique.png",
      "width": 1200,
      "height": 800,
      "duration": 3
    }
  ]
}

Étape 2 : Générer les composants Remotion

Créez les composants vidéo en suivant les meilleures pratiques de Remotion :

Créez ScreenSlide.tsx :
- Utilisez useCurrentFrame() et spring() pour les animations
- Implémentez les effets de zoom et de fondu
- Ajoutez des superpositions de texte avec un timing approprié
Créez WalkthroughComposition.tsx :
- Importez le manifeste des écrans
- Séquencez les écrans avec les composants <Sequence>
- Appliquez des transitions entre les écrans
- Calculez le timing et les décalages appropriés
Mettez à jour remotion.config.ts :
- Définissez l'ID de composition
- Configurez les dimensions de la vidéo
- Définissez le taux d'images et la durée

Ressources de référence :

Utilisez resources/screen-slide-template.tsx comme point de départ
Suivez resources/composition-checklist.md pour l'exhaustivité
Consultez les exemples dans le répertoire examples/walkthrough/

Étape 3 : Prévisualiser et Affiner

Démarrez Remotion Studio :
```
npm run dev
```
- Ouvre un aperçu dans le navigateur
- Permet l'édition et le raffinement en temps réel
Ajustez le timing :
- Assurez-vous que chaque écran a une durée d'affichage appropriée
- Vérifiez que les transitions sont fluides
- Vérifiez le timing des superpositions de texte
Affinez les animations :
- Ajustez les configurations de ressort pour les effets de zoom
- Modifiez les fonctions d'atténuation pour les transitions
- Assurez-vous que le texte est lisible en tout temps

Étape 4 : Rendre la Vidéo

Effectuez le rendu en utilisant l'interface en ligne de commande Remotion :
```
npx remotion render WalkthroughComposition output.mp4
```
Alternative : Utilisez Remotion MCP (si disponible) :
- Appelez [préfixe_remotion]:render avec les détails de la composition
- Spécifiez le format de sortie (MP4, WebM, etc.)
Options d'optimisation :
- Définissez le niveau de qualité (--quality)
- Configurez le codec (--codec h264 ou h265)
- Activez le rendu parallèle (--concurrency)

Fonctionnalités Avancées

Zones Interactives

Mettez en évidence les éléments cliquables ou les fonctionnalités importantes :

import {interpolate, useCurrentFrame} from 'remotion';

const ZoneInteractive = ({x, y, label}) => {
  const frame = useCurrentFrame();
  const scale = spring({
    frame,
    fps: 30,
    config: {damping: 10, stiffness: 100}
  });
  
  return (
    <div style={{
      position: 'absolute',
      left: x,
      top: y,
      transform: `scale(${scale})`
    }}>
      <div className="pulse-ring" />
      <span>{label}</span>
    </div>
  );
};

Intégration de la Voix Off

Ajoutez une narration à la démonstration :

Générez un script de voix off à partir des descriptions d'écran
Utilisez la synthèse vocale ou enregistrez l'audio
Importez l'audio dans Remotion avec le composant <Audio>
Synchronisez le timing des écrans avec le rythme de la voix off

Extraction Dynamique de Texte

Extrayez le texte du code HTML de Stitch pour des annotations automatiques :

Téléchargez htmlCode.downloadUrl pour chaque écran
Analysez le HTML pour extraire les éléments de texte clés (titres, boutons, étiquettes)
Générez des annotations automatiques pour les éléments importants de l'interface utilisateur
Ajoutez à la composition en tant que superpositions de texte minutées

Structure de Fichiers

projet/
├── video/                      # Répertoire du projet Remotion
│   ├── src/
│   │   ├── WalkthroughComposition.tsx
│   │   ├── ScreenSlide.tsx
│   │   ├── components/
│   │   │   ├── ZoneInteractive.tsx
│   │   │   └── TexteSuperpose.tsx
│   │   └── Root.tsx
│   ├── public/
│   │   └── assets/
│   │       └── screens/        # Captures d'écran Stitch téléchargées
│   │           ├── accueil.png
│   │           └── historique.png
│   ├── remotion.config.ts
│   └── package.json
├── screens.json                # Manifeste des écrans
└── output.mp4                  # Vidéo rendue

Intégration avec les Compétences Remotion

Remotion maintient ses propres compétences d'agent qui définissent les meilleures pratiques. Consultez-les pour les techniques avancées :

Dépôt : https://github.com/remotion-dev/remotion/tree/main/packages/skills
Installation : npx skills add remotion-dev/skills

Compétences Remotion clés à exploiter :

Timing et atténuation d'animation
Modèles d'architecture de composition
Optimisation des performances
Synchronisation audio

Modes Courants

Mode 1 : Diaporama Simple

Démonstration de base avec transitions en fondu :

3 à 5 secondes par écran
Transitions en fondu enchaîné
Superposition de texte en bas avec le titre de l'écran
Barre de progression en haut

Mode 2 : Mise en Évidence des Fonctionnalités

Concentrez-vous sur des éléments d'interface spécifiques :

Zoomer sur des régions spécifiques
Cercles/flèches animés pointant vers les fonctionnalités
Accent au ralenti sur les interactions clés
Comparaisons avant/après côte à côte

Mode 3 : Parcours Utilisateur

Montrez le parcours utilisateur étape par étape :

Flux d'écran séquentiel avec glissements directionnels
Superposition d'étapes numérotées
Mettez en évidence les actions utilisateur (clics, tapotements)
Connectez les écrans avec des chemins animés

Dépannage

Problème	Solution
Captures d'écran floues	Assurez-vous que les images téléchargées sont en pleine résolution ; vérifiez les paramètres de qualité de `screenshot.downloadUrl`
Texte mal aligné	Vérifiez que les dimensions de l'écran correspondent à la taille de la composition ; ajustez le positionnement du texte en fonction de la taille réelle de l'écran
Animations saccadées	Augmentez le taux d'images à 60 ips ; utilisez des configurations de ressort appropriées avec un amortissement adéquat
Échec de la construction Remotion	Vérifiez la compatibilité de la version de Node ; assurez-vous que toutes les dépendances sont installées ; consultez la documentation Remotion
Timing incorrect	Ajustez la durée par écran dans le manifeste ; prévisualisez dans Remotion Studio ; testez avec des utilisateurs réels

Meilleures Pratiques

Maintenez le rapport hauteur/largeur : Utilisez les dimensions réelles des écrans Stitch ou mettez à l'échelle proportionnellement
Timing cohérent : Gardez une durée d'affichage cohérente pour les écrans, sauf pour mettre l'accent sur des écrans spécifiques
Texte lisible : Assurez un contraste suffisant ; utilisez des tailles de police appropriées ; évitez les superpositions encombrées
Transitions fluides : Utilisez des animations élastiques pour un mouvement naturel ; évitez les coupures brusques
Prévisualisez soigneusement : Prévisualisez toujours dans Remotion Studio avant le rendu final
Optimisez les ressources : Compressez les images de manière appropriée ; utilisez des formats efficaces (PNG pour l'interface utilisateur, JPG pour les photos)

Exemple d'Utilisation

Invite utilisateur :

Recherche les écrans dans mon projet Stitch "Application Calculatrice" et crée une vidéo remotion 
qui montre une démonstration des écrans.

Flux de travail de l'agent :

Lister les projets Stitch → Trouver "Application Calculatrice" → Extraire l'ID du projet
Lister les écrans du projet → Identifier tous les écrans (Accueil, Historique, Paramètres)
Télécharger les captures d'écran pour chaque écran → Enregistrer dans assets/screens/
Créer le manifeste screens.json avec les métadonnées des écrans
Générer les composants Remotion (ScreenSlide.tsx, WalkthroughComposition.tsx)
Prévisualiser dans Remotion Studio → Affiner le timing et les transitions
Rendre la vidéo finale → calculatrice-demonstration.mp4
Signaler l'achèvement avec un lien d'aperçu vidéo

Conseils pour Réussir

Commencez simplement : Commencez par des transitions en fondu de base avant d'ajouter des animations complexes
Suivez les modèles Remotion : Exploitez les compétences officielles et la documentation de Remotion
Utilisez des fichiers manifeste : Gardez les données des écrans organisées en JSON pour des mises à jour faciles
Prévisualisez fréquemment : Utilisez Remotion Studio pour détecter les problèmes tôt
Pensez à l'accessibilité : Ajoutez des sous-titres ; assurez la lisibilité du texte ; utilisez des visuels clairs
Optimisez pour la plateforme : Adaptez les dimensions de la vidéo à la plateforme cible (YouTube, réseaux sociaux, etc.)

Références

Documentation Stitch : https://stitch.withgoogle.com/docs/
Documentation Remotion : https://www.remotion.dev/docs/
Compétences Remotion : https://www.remotion.dev/docs/ai/skills
Remotion MCP : https://www.remotion.dev/docs/ai/mcp
Transitions Remotion : https://www.remotion.dev/docs/transitions

Quand Utiliser

Utilisez cette compétence lorsque vous traitez des tâches liées à son domaine principal ou ses fonctionnalités telles que décrites ci-dessus.

Demander à votre IA préférée

Documentation