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.

Enregistrement écran (source)

Avec le dev sur le port 3000 (ou PLAYWRIGHT_BASE_URL), générez les WebM EN et FR :

npm run record:tutorial:founder-path

Fichier détecté : enregistrement WebM utilisé pour le rendu et l’aperçu.

Commandes de rendu

npm run video:render:tutorial:founder-path:en
npm run video:render:tutorial:founder-path:fr

Voix off (ElevenLabs)

Ajoutez ELEVENLABS_API_KEY au .env. ELEVENLABS_VOICE_ID est optionnel — sans lui, le générateur utilise la première voix de votre compte ElevenLabs (fixez un ID pour en imposer une). Cinq MP3 par langue : intro, trois tiers du milieu alignés sur l’enregistrement, outro.

npm run voiceover:tutorial:founder-path

MP3 silencieux (ffmpeg requis, sans clé API) : MOTIVD_TUTORIAL_VOICEOVER_SILENCE_ONLY=1 npm run voiceover:tutorial:founder-path. TTS local GPU optionnel : npm run voiceover:tutorial:founder-path:chatterbox

Rendu avec narration

npm run video:render:tutorial:founder-path:en:vo
npm run video:render:tutorial:founder-path:fr:vo

Fichiers rendus

Les sorties vont dans public/tutorials/ sous founder-path-en.mp4 et founder-path-fr.mp4.

Télécharger le MP4

Assets de la leçon

tutorials/recordings/founder-path-screen-fr.webmdocs/screenshots/landing-hero.pngMotivd-laptop-screenshot-ui-demo-device.pngImage-app-launch.pngbrand/motivd-chip.svgcursor-primary-color-bullet.svgtutorials/voiceover/founder-path-intro-fr.mp3tutorials/voiceover/founder-path-body1-fr.mp3tutorials/voiceover/founder-path-body2-fr.mp3tutorials/voiceover/founder-path-body3-fr.mp3tutorials/voiceover/founder-path-outro-fr.mp3

Guide utilisateur — détaille le parcours idée → PRD → dépôt → espace de travail.

Tutoriels Motivd
De l'idée à l'espace de travail
Le parcours fondateur en trois temps : prompt, construire, aligner.
0:00 / 0:16