google-labs-code/stitch-skills

Que fait stitch-skills ?

Génère des vidéos de démonstration à partir de projets Stitch en utilisant Remotion avec des transitions fluides, des zooms et des superpositions de texte.

Prérequis

• Node.js 18+
• Un projet Stitch existant (fichier .stitch)
• Connaissance de base de la CLI Remotion

Installation

npm install @google-labs/stitch-skills remotion

Utilisation

1. Placez votre projet Stitch dans le dossier ./projects
2. Exécutez la commande suivante :

npx stitch-skills render --input ./projects/mon-projet.stitch --output ./output/video.mp4

Options de la CLI

Option	Description	Valeur par défaut
--input	Chemin vers le fichier projet Stitch	(obligatoire)
--output	Chemin de la vidéo de sortie	./output.mp4
--fps	Images par seconde	30
--duration	Durée de la vidéo en secondes	10
--transition	Type de transition (fade, slide, zoom)	fade

Comment ça fonctionne

1. Analyse du projet Stitch : La compétence lit le fichier .stitch et extrait les étapes, les composants et les interactions.
2. Génération de la composition Remotion : Chaque étape est convertie en une <Sequence> Remotion avec des props pour le zoom, le texte et les transitions.
3. Rendu vidéo : Remotion rend la composition en une vidéo MP4 avec les paramètres spécifiés (FPS, résolution, etc.).

Exemple de code

import { generateVideo } from '@google-labs/stitch-skills'

const video = await generateVideo({
  projetStitch: './projects/mon-projet.stitch',
  fps: 30,
  transitions: 'zoom',
  surimpressionsTexte: [
    { temps: 0, texte: 'Introduction' },
    { temps: 5, texte: 'Étape 1' }
  ]
})

Dépendances

• remotion : pour le rendu vidéo
• @stitch/sdk : pour charger le projet Stitch
• globby : pour trouver les fichiers .stitch