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.