Vidéos de démonstration Stitch vers Remotion

Vous êtes un spécialiste en production vidéo, spécialisé dans 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'écran de Stitch avec la génération vidéo programmatique 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 les écrans d'une 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 à la CLI 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 [stitch_prefix]:list_projects avec filter: "view=owned"
- Identifiez le projet cible par son titre (par exemple, "Application Calculatrice")
- Extrayez l'ID du projet du champ name (par exemple, projects/13534454087919359824)
Récupération des écrans :
- Appelez [stitch_prefix]: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 [stitch_prefix]:get_screen avec projectId et screenId
- Récupérez :
  - screenshot.downloadUrl — Ressource visuelle pour la vidéo
  - htmlCode.downloadUrl — Optionnel : pour extraire le texte/contenu
  - width, height — Dimensions de l'écran pour un redimensionnement correct
  - Le titre et la 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/{screen-name}.png
- Organisez les ressources dans l'ordre du flux de démonstration souhaité

Étape 3 : Configurer le projet Remotion

Vérifier l'existence d'un projet Remotion :
- Recherchez remotion.config.ts ou package.json avec les dépendances Remotion
- S'il existe, utilisez la structure du projet existant
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 de plusieurs composants ScreenSlide
- Gère les transitions entre les écrans
- Ajoute des superpositions de texte et des annotations
config.ts — Configuration vidéo
- Images par seconde (par défaut : 30 ips)
- Dimensions vidéo (correspondre aux dimensions de l'écran Stitch ou redimensionner correctement)
- Calcul de la durée totale

Effets de transition

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

Fondu : Transition en 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 l'accentuation
- Utilisez spring() pour une animation de zoom fluide
- Appliquez aux éléments d'interface importants

Superpositions de texte

Ajoutez des informations contextuelles à l'aide du rendu de texte de Remotion :

Titres des écrans : 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 le 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 d'écran

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 de 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/home.png",
      "width": 1200,
      "height": 800,
      "duration": 4
    },
    {
      "id": "2",
      "title": "Vue Historique",
      "description": "Affichage des calculs précédents",
      "imagePath": "assets/screens/history.png",
      "width": 1200,
      "height": 800,
      "duration": 3
    }
  ]
}

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

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

Créez ScreenSlide.tsx :
- Utilisez useCurrentFrame() et spring() pour les animations
- Implémentez des 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équences d'é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 vidéo
- Définissez les images par seconde 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/

Étape 3 : Prévisualiser et affiner

Lancez Remotion Studio :
```
npm run dev
```
- Ouvre un aperçu dans le navigateur
- Permet l'édition et l'affinement 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 Spring pour les effets de zoom
- Modifiez les fonctions d'easing pour les transitions
- Assurez-vous que le texte est lisible en tout temps

Étape 4 : Rendre la vidéo

Rendu à l'aide de la CLI Remotion :

npx remotion render WalkthroughComposition output.mp4

Alternative : Utilisez le MCP Remotion (si disponible) :
- Appelez [remotion_prefix]: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 Hotspot = ({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 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 de texte dynamique

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 d'interface importants
Ajoutez à la composition en tant que superpositions de texte chronométrées

Structure des fichiers

projet/
├── video/                      # Répertoire du projet Remotion
│   ├── src/
│   │   ├── WalkthroughComposition.tsx
│   │   ├── ScreenSlide.tsx
│   │   ├── components/
│   │   │   ├── Hotspot.tsx
│   │   │   └── TextOverlay.tsx
│   │   └── Root.tsx
│   ├── public/
│   │   └── assets/
│   │       └── screens/        # Captures d'écran Stitch téléchargées
│   │           ├── home.png
│   │           └── history.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 des 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 easing des animations
Modèles d'architecture de composition
Optimisation des performances
Synchronisation audio

Modèles courants

Modèle 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

Modèle 2 : Mise en évidence de fonctionnalité

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

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

Modèle 3 : Parcours utilisateur

Montrez le parcours utilisateur étape par étape :

Flux d'écrans séquentiels 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 les images par seconde à 60 ips ; utilisez des configurations Spring 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 inapproprié	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 de l'écran Stitch ou redimensionnez proportionnellement
Timing cohérent : Gardez la durée d'affichage de l'écran constante, 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 Spring pour un mouvement naturel ; évitez les coupures brusques
Prévisualisez minutieusement : 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, JPG pour les photos)

Exemple d'utilisation

Invite utilisateur :

Cherchez les écrans de mon projet Stitch "Application Calculatrice" et construisez 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 → calculator-walkthrough.mp4
Signaler l'achèvement avec un lien de prévisualisation de la 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 et la documentation officielles de Remotion
Utilisez des fichiers de manifeste : Gardez les données d'écran organisées dans JSON pour des mises à jour faciles
Prévisualisez fréquemment : Utilisez Remotion Studio pour détecter les problèmes tôt
Tenez compte de l'accessibilité : Ajoutez des sous-titres ; assurez-vous que le texte est lisible ; utilisez des visuels clairs
Optimisez pour la plateforme : Faites correspondre les dimensions 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
MCP Remotion : https://www.remotion.dev/docs/ai/mcp
Transitions Remotion : https://www.remotion.dev/docs/transitions

Demander à votre IA préférée

Documentation