All tutorials

Alignment

PRD & alignment

This lesson shows why the PRD step exists: capture the brief, refine scope in plain language, then agree on what “done” means before code accelerates. The middle section can be a Playwright WebM under public/tutorials/recordings/ (see record command). Remotion adds title/outro cards and callouts split into thirds. Five MP3 clips per locale live in public/tutorials/voiceover/ (npm run voiceover:tutorial:prd-alignment; same ElevenLabs env vars as the founder-path lesson). Background music reuses public/tutorials/music/founder-path-bg.mp3 (CC BY — see README). With no WebM, the player uses the same image storyboard pattern as the founder-path composition.

What you will see

  1. Optional recording: sign in, open the builder PRD view with a sample brief, scroll the PRD, then land on this tutorial page.
  2. Remotion overlays three beats: brief capture, PRD refinement, align-before-build — matching the founder journey.
  3. Export MP4 with the render commands when you need a single file.
Interactive player

Screen WebM is muted; narration is separate MP3s. Unmute and press Play. ElevenLabs: npm run voiceover:tutorial:prd-alignment. Offline macOS: npm run voiceover:tutorial:prd-alignment:system.

Duration follows the WebM when present; otherwise the shorter storyboard. Loop is on.

Screen recording (source)

With dev on port 3000 (or PLAYWRIGHT_BASE_URL), generate EN/FR WebMs and update frame counts:

npm run record:tutorial:prd-alignment

No WebM yet — preview uses the static image storyboard.

Render commands

npm run video:render:tutorial:prd-alignment:en
npm run video:render:tutorial:prd-alignment:fr

Voice-over (ElevenLabs)

Same env as founder-path: ELEVENLABS_API_KEY; ELEVENLABS_VOICE_ID optional. Produces five MP3s per locale aligned to intro, three body thirds, and outro.

npm run voiceover:tutorial:prd-alignment

Silence MP3s: MOTIVD_TUTORIAL_VOICEOVER_SILENCE_ONLY=1 npm run voiceover:tutorial:prd-alignment

Render with narration

npm run video:render:tutorial:prd-alignment:en:vo
npm run video:render:tutorial:prd-alignment:fr:vo

Rendered files

Outputs: public/tutorials/prd-alignment-en.mp4 and prd-alignment-fr.mp4.

No MP4 yet for this locale. Run the render command above.

Assets in this lesson

docs/screenshots/landing-hero.pngMotivd-laptop-screenshot-ui-demo-device.pngImage-app-launch.pngbrand/motivd-chip.svgcursor-primary-color-bullet.svg

User guide — covers the PRD step and alignment before build.

Motivd tutorials
PRD & alignment
Lock scope before build so repo and workspace handoffs stay obvious.
0:00 / 0:14