docs: record YouTube walkthrough + add image-occlusion mp4 + templates grid screenshot

[aalemayhu]

Why this matters

Two of the new docs pages — Image occlusion (/documentation/cards/image-occlusion) and Note types and templates (/documentation/cards/templates) — currently ship as prose-only. The image-occlusion canvas tool is inherently spatial and the templates library is inherently visual; without a GIF and a grid screenshot, both pages undersell features that are top-of-funnel for the 300k user goal. A short YouTube walkthrough rounds out the experience for users who want a single end-to-end demo.

Scope

Three assets to record/capture, plus the corresponding edits to two markdown files.

Asset 1 — Image occlusion demo (mp4, not GIF)

Record exactly this flow in the /image-occlusion tool:

1. Open the page at 100% browser zoom (do NOT use 110% / 125% — the canvas controls look different and confuse first-time viewers).
2. Upload one labelled diagram with 4–6 distinct regions (anatomy, a map, anything similar).
3. Draw three rectangles over different labels.
4. Type a short label on one box.
5. Click Download deck.

Cut: 8–12 seconds total. Start on first mouse move, cut immediately after the download is triggered. Crop browser chrome out — record at the canvas edge.

Encode with ffmpeg -i input.mov -vf scale=1280:-2 -c:v libx264 -crf 28 -preset slow -an output.mp4 — target under 2MB.

Why mp4, not GIF: a 10-second 1280×800 GIF is routinely 8–20MB. The same clip as mp4 with autoplay loop muted is 300–600KB.

File: web/public/docs-assets/image_occlusion_demo.mp4

Asset 2 — Templates grid screenshot

Capture the live /templates page showing all three sections (Your note types, Official 2anki templates, Starter note types). "Your note types" can be empty — that's honest for a first-time visitor.

• Aspect ratio: 16:9
• Capture width: 1280px (1x export, no retina doubling)
• Format: WebP at quality 80, fallback to PNG
• Target: under 150KB

File: web/public/docs-assets/templates_grid.webp (or .png)

Asset 3 — YouTube walkthrough

Cover in this order, 3–4 minutes total:

1. Image occlusion (~90s) — upload image, draw boxes, download deck.
2. Templates (~60s) — browse /templates, download one, import into Anki.
3. Hide-all vs hide-one (~60s) — same 3-box image, show the mode difference.

Silent with burned-in captions (not auto-generated). Captions follow VOICE.md — specific, sentence case, no fake warmth, no exclamation marks.

Upload as unlisted or public on YouTube. Paste the link into the PR body so it's discoverable post-merge.

Implementation (when assets are ready)

Files to edit

• web/src/pages/DocsPage/content/cards/image-occlusion.md — embed the mp4 just before step 4 of the "Build a deck" section, then embed the YouTube iframe directly below it.
• web/src/pages/DocsPage/content/cards/templates.md — embed the grid screenshot at the top of "Browse the library" (before the bullet list). Add a single plain-text link to the YouTube walkthrough — the templates page is reference material; the iframe belongs on the workflow page only.

Markdown for the mp4

The doc loader at web/src/pages/DocsPage/loader.ts rewrites ](../assets/foo.png) to ](/docs-assets/foo.png) automatically. For the mp4, use raw HTML (already accepted in the docs, see start-here/upload-a-file.md):

<video
  src="/docs-assets/image_occlusion_demo.mp4"
  autoplay
  loop
  muted
  playsinline
  width="100%"
  style="border-radius: var(--radius-md); border: 0;"
></video>

Caption beneath the video:

Draw a rectangle over each label to create one card per box.

Markdown for the grid screenshot

![The template library — official designs and the default starter types](../assets/templates_grid.webp)

Markdown for the YouTube embed (image-occlusion page only)

Matches the existing pattern in start-here/upload-a-file.md:

<figure>
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="2anki — image occlusion and templates walkthrough"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen
    width="100%"
    style="aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-md);"
  ></iframe>
</figure>

Acceptance criteria

• web/public/docs-assets/image_occlusion_demo.mp4 committed (under 2MB)
• web/public/docs-assets/templates_grid.webp committed (under 150KB)
• YouTube video uploaded (unlisted or public) and linked in the PR body
• cards/image-occlusion.md embeds the mp4 + the YouTube iframe
• cards/templates.md embeds the grid screenshot + plain-text link to the video
• /check passes locally and CI is green on the resulting PR

Not in scope

• No changelog entry — adds visuals to existing docs pages, no new capability.
• No trio review for the implementation PR — per CLAUDE.md, docs-only additive content changes are trio-optional.

Context

Background work shipped in #2463, #2464, #2467 (the docs rewrite + corrections + the onboarding-tour Playwright fix).