gabelul/stitch-kit

Vidéos de démonstration Stitch → Remotion

Contrainte : N'utilisez ce skill que lorsque l'utilisateur mentionne explicitement "Stitch" et une vidéo de démonstration, une démo ou Remotion.

Vous êtes un spécialiste de la production vidéo qui crée des vidéos de démonstration à partir de maquettes d'application Stitch. Vous récupérez les captures d'écran Stitch et construisez une composition Remotion — transitions de diapositives, animations de zoom et superpositions de texte.

Prérequis

• Serveur MCP Stitch (ou identifiants d'écran déjà connus)
• Node.js 18+ et npm
• CLI Remotion (npm install -g remotion ou utilisation via npx)

Étape 1 : Rassembler les ressources Stitch

Découvrir les écrans

1. Exécutez list_tools → trouvez le préfixe MCP de Stitch
2. Appelez [prefix]:list_projects → sélectionnez le projet
3. Appelez [prefix]:list_screens avec projects/[projectId] → listez tous les écrans
4. Pour chaque écran que vous souhaitez dans la vidéo, appelez [prefix]:get_screen avec les identifiants numériques

Télécharger les captures d'écran

Pour chaque écran :

# Télécharger la capture d'écran dans le répertoire des ressources
curl -L "[screenshot.downloadUrl]" -o "video/public/assets/[nom-ecran].png"

Ou utilisez le script de récupération :

bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/[nom-ecran].html"
# Les captures d'écran sont séparées — téléchargez via curl avec l'URL de la capture

Créer le manifeste des écrans

Créez screens.json décrivant la vidéo :

{
  "projectName": "Mon App",
  "fps": 30,
  "screens": [
    {
      "id": "accueil",
      "title": "Écran d'accueil",
      "description": "Tableau de bord principal avec indicateurs clés",
      "imagePath": "./public/assets/accueil.png",
      "width": 390,
      "height": 844,
      "durationSeconds": 4
    },
    {
      "id": "profil",
      "title": "Profil utilisateur",
      "description": "Paramètres et gestion du compte",
      "imagePath": "./public/assets/profil.png",
      "width": 390,
      "height": 844,
      "durationSeconds": 3
    }
  ]
}

Étape 2 : Configurer le projet Remotion

# Créer un nouveau projet Remotion dans le répertoire de travail
cd video
npm create video@latest -- --blank
cd walkthrough-video
npm install @remotion/transitions

Étape 3 : Construire la composition

Composant ScreenSlide

// video/src/ScreenSlide.tsx
import { AbsoluteFill, Img, interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion'

interface ScreenSlideProps {
  /** Chemin vers l'image de la capture d'écran */
  imagePath: string
  /** Titre de l'écran affiché en superposition */
  title: string
  /** Texte de description d'accompagnement */
  description: string
  /** Zoomer légèrement pendant l'affichage */
  withZoom?: boolean
}

/**
 * Diapositive d'écran unique avec effet de zoom optionnel et superposition de texte.
 * Fondu à l'entrée, maintien, puis fondu à la sortie.
 */
export function ScreenSlide({ imagePath, title, description, withZoom = true }: ScreenSlideProps) {
  const frame = useCurrentFrame()
  const { fps, durationInFrames } = useVideoConfig()

  // Fondu d'entrée sur les 15 premières images
  const fadeIn = spring({ fps, frame, config: { damping: 200 } })

  // Zoom subtil : 100% → 105% sur la durée
  const scale = withZoom
    ? interpolate(frame, [0, durationInFrames], [1, 1.05], { extrapolateRight: 'clamp' })
    : 1

  return (
    <AbsoluteFill style={{ backgroundColor: '#000' }}>
      {/* Capture d'écran */}
      <AbsoluteFill style={{ opacity: fadeIn, transform: `scale(${scale})`, transformOrigin: 'center' }}>
        <Img src={imagePath} style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
      </AbsoluteFill>

      {/* Superposition de texte en bas */}
      <AbsoluteFill
        style={{
          justifyContent: 'flex-end',
          padding: '40px 60px',
          background: 'linear-gradient(transparent, rgba(0,0,0,0.7))',
          opacity: fadeIn,
        }}
      >
        <h2 style={{ color: '#fff', fontSize: 36, fontWeight: 700, margin: 0 }}>{title}</h2>
        {description ? (
          <p style={{ color: 'rgba(255,255,255,0.8)', fontSize: 20, margin: '8px 0 0' }}>
            {description}
          </p>
        ) : null}
      </AbsoluteFill>
    </AbsoluteFill>
  )
}

Composition de la démonstration

// video/src/WalkthroughComposition.tsx
import { Series, TransitionSeries } from '@remotion/transitions'
import { fade } from '@remotion/transitions/fade'
import { slide } from '@remotion/transitions/slide'
import screensData from '../../screens.json'
import { ScreenSlide } from './ScreenSlide'

const TRANSITION_FRAMES = 15  // 0.5s à 30 ips

/**
 * Composition principale de la démonstration — un écran par diapositive, transitions fondu/glissement.
 */
export function WalkthroughComposition() {
  return (
    <TransitionSeries>
      {screensData.screens.map((screen, i) => (
        <>
          <TransitionSeries.Sequence
            key={screen.id}
            durationInFrames={screen.durationSeconds * screensData.fps}
          >
            <ScreenSlide
              imagePath={screen.imagePath}
              title={screen.title}
              description={screen.description}
            />
          </TransitionSeries.Sequence>
          {/* Ajouter une transition entre les écrans (sauf après le dernier) */}
          {i < screensData.screens.length - 1 && (
            <TransitionSeries.Transition
              key={`t-${screen.id}`}
              timing={fade({ durationInFrames: TRANSITION_FRAMES })}
            />
          )}
        </>
      ))}
    </TransitionSeries>
  )
}

Enregistrer dans Root.tsx

// video/src/Root.tsx
import { Composition } from 'remotion'
import { WalkthroughComposition } from './WalkthroughComposition'
import screensData from '../../screens.json'

const TOTAL_FRAMES = screensData.screens.reduce(
  (acc, s) => acc + s.durationSeconds * screensData.fps,
  0
)

export const RemotionRoot = () => (
  <>
    <Composition
      id="Walkthrough"
      component={WalkthroughComposition}
      durationInFrames={TOTAL_FRAMES}
      fps={screensData.fps}
      width={screensData.screens[0]?.width ?? 390}
      height={screensData.screens[0]?.height ?? 844}
    />
  </>
)

Étape 4 : Prévisualiser et rendre

# Prévisualisation dans le navigateur
cd video/walkthrough-video
npm run dev

# Rendu en MP4
npx remotion render Walkthrough output.mp4

# Rendu de meilleure qualité
npx remotion render Walkthrough output.mp4 --jpeg-quality 95 --concurrency 4

Styles vidéo courants

Style	Configuration
Démo rapide (1–2 min)	2–3s par écran, transitions fondu, titre uniquement
Détail des fonctionnalités	4–5s par écran, zoom + glissement, titre + description
Présentation	5–8s par écran, fondu uniquement, superposition de description complète
Clip pour réseaux sociaux	1–2s par écran, coupes rapides, piste musicale

Structure des fichiers

project/
├── screens.json             ← Manifeste des écrans
├── scripts/fetch-stitch.sh  ← Téléchargeur GCS
└── video/
    ├── public/
    │   └── assets/          ← Captures d'écran téléchargées
    └── walkthrough-video/
        ├── src/
        │   ├── WalkthroughComposition.tsx
        │   ├── ScreenSlide.tsx
        │   └── Root.tsx
        ├── remotion.config.ts
        └── package.json

Dépannage

Problème	Solution
Captures floues	Téléchargez en haute résolution : utilisez l'URL de la capture directement, pas une vignette
Décalage de mise en page	Définissez les dimensions de la composition Remotion pour correspondre à la width + height de l'écran depuis get_screen
Transitions saccadées	Augmentez TRANSITION_FRAMES ou passez de slide à fade
Échec de construction ESM	Ajoutez "type": "module" dans package.json et vérifiez la compatibilité de la version Remotion
Le MP4 ne se lit pas	Vérifiez que FFmpeg est installé : ffmpeg -version

Références

• Documentation Remotion : https://www.remotion.dev/docs/
• Transitions Remotion : https://www.remotion.dev/docs/transitions
• scripts/fetch-stitch.sh — Téléchargeur GCS fiable
• stitch-mcp-list-screens — Découvrez les écrans d'un projet Stitch
• stitch-mcp-get-screen — Obtenez les URL de téléchargement des captures d'écran