Tous les tutoriels

Parcours fondateur

De l'idée à l'espace de travail

Le centre de cette leçon est un enregistrement d’écran Playwright (vrais clics et défilements) en WebM dans public/tutorials/recordings/. Remotion ajoute les cartons début/fin et des encarts + une flèche lime par-dessus. La narration compte cinq MP3 par langue dans public/tutorials/voiceover/, générés avec ElevenLabs (npm run voiceover:tutorial:founder-path ; ELEVENLABS_API_KEY dans le .env ; l’ID de voix est optionnel — le script peut prendre la première voix du compte). Une musique de fond discrète et libre de droits boucle depuis public/tutorials/music/ (voir le README du dossier pour l’attribution). Sans WebM, le lecteur repasse sur un storyboard d’images statiques.

Ce que vous verrez

  1. Playwright enregistre l’app live : accueil → prompt hero + envoi → guide utilisateur → cette page tutoriel.
  2. Remotion superpose intro/outro et découpe l’enregistrement en trois tiers (idée → espace de travail → PRD).
  3. Exportez le MP4 avec les commandes de rendu pour une seule vidéo (réseaux, onboarding).
Lecteur interactif

Le WebM d’écran est muet volontairement. La voix off vient des MP3 ElevenLabs dans public/tutorials/voiceover/ (npm run voiceover:tutorial:founder-path). La musique de fond boucle depuis public/tutorials/music/. Réactivez le son du lecteur et lancez la lecture. Secours hors ligne : npm run voiceover:tutorial:founder-path:system (say macOS).

La durée suit le WebM quand il est présent ; sinon le storyboard image plus court. Boucle activée.