All tutorials

Founder path

From idea to workspace

The middle of this lesson is a Playwright screen recording (real clicks and scrolls) saved as WebM under public/tutorials/recordings/. Remotion adds the title/outro cards plus timed callouts and a lime arrow over the recording. Narration is five MP3 clips per locale from public/tutorials/voiceover/, generated with ElevenLabs (npm run voiceover:tutorial:founder-path; ELEVENLABS_API_KEY in .env; voice ID optional — the script can pick your first voice). A quiet royalty-free bed loops from public/tutorials/music/ (see that folder’s README for attribution). If no WebM is present, the player falls back to a static image storyboard.

What you will see

  1. Playwright records the live app: landing → hero prompt + submit → user guide → this tutorial page.
  2. Remotion layers intro/outro and splits the recording into thirds with callouts (idea → workspace → PRD).
  3. Export MP4 with the render commands when you want a single file for social or onboarding.
Interactive player

The WebM screen capture is muted by design. Voice-over is ElevenLabs MP3s in public/tutorials/voiceover/ (npm run voiceover:tutorial:founder-path). Background music is a separate loop in public/tutorials/music/. Unmute the player and press Play. Offline fallback only: npm run voiceover:tutorial:founder-path:system (macOS say).

Duration matches the WebM when a recording exists; otherwise the shorter image storyboard. Loop is on.

Screen recording (source)

With dev running on port 3000 (or set PLAYWRIGHT_BASE_URL), generate fresh WebM captures for EN and FR:

npm run record:tutorial:founder-path

WebM detected — this preview and CLI renders use the screen recording.

Render commands

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

Voice-over (ElevenLabs)

Add ELEVENLABS_API_KEY to .env. ELEVENLABS_VOICE_ID is optional — if omitted, the generator uses the first voice in your ElevenLabs account (set a voice ID to pin one). Produces five MP3 clips per locale: intro, three body thirds aligned to the recording, and outro.

npm run voiceover:tutorial:founder-path

Silence-only MP3s (needs ffmpeg, no API key): MOTIVD_TUTORIAL_VOICEOVER_SILENCE_ONLY=1 npm run voiceover:tutorial:founder-path. Optional local GPU TTS: npm run voiceover:tutorial:founder-path:chatterbox

Render with narration

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

Rendered files

Outputs land in public/tutorials/ as founder-path-en.mp4 and founder-path-fr.mp4.

Download MP4

Assets in this lesson

tutorials/recordings/founder-path-screen-en.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-en.mp3tutorials/voiceover/founder-path-body1-en.mp3tutorials/voiceover/founder-path-body2-en.mp3tutorials/voiceover/founder-path-body3-en.mp3tutorials/voiceover/founder-path-outro-en.mp3

User guide — covers the idea → PRD → repo → workspace path in depth.

Motivd tutorials
From idea to workspace
The founder path in three beats: prompt, build, align.
0:00 / 0:17