add-before-after-case

name

add-before-after-case

description

Wire a new before/after use case into BOTH the marketplace screenshot carousel and the marketing site diptych — they share backdrops and must stay in sync. Use when the user asks to add a new comparison / demo / before-after example to the extension screenshots, the marketing site's "See it in action" section, or both. Also use when the user mentions adding a new "use case", "scenario", "pair", or "diptych" to the screenshots pipeline. Do NOT use for: tweaking existing screenshots, generating per-locale variants of an existing scene, or marketing copy changes that don't touch the screenshots.

Add a before/after use case (marketplace + marketing)

Both surfaces narrate the same "what Movar fixes" stories — they just deliver them in different shapes:

• Marketplace ships one composed 1280×800 diptych PNG per scene (the diptych frame is in the PNG). One numbered file per locale lands in apps/extension/store-assets/screenshots/{en,uk}/NN-<slug>.png.
• Marketing ships two single-half PNGs per pair — each captured light and -dark, at natural content height — and the Astro layer at apps/marketing/src/components/Examples.astro composes them at runtime, full-width and stacked, swapping light↔dark with <picture> + prefers-color-scheme.

Both share backdrop components and the same Playwright capture script at apps/extension/scripts/capture-storybook-assets.mts. Story title prefix routes the output:

Prefix	Output root	Story dir
Marketplace/Screenshots/*	store-assets/screenshots/{en,uk}/	storyboards/stories/
Marketing/Screenshots/*	apps/marketing/public/screenshots/	storyboards/marketing/

Procedure

Rule of thumb: every new use case ships in BOTH surfaces unless the demo's premise excludes one (e.g. scene #5 / Knowledge Panel is UK-only because Google falls back to English without an hl hint — there's no observable EN before/after). When you must skip a locale, document why in the story file header.

1. Shared backdrops

Build the React backdrop(s) under apps/extension/store-assets/storyboards/backdrops/. Make them accept hideChrome?: boolean (default false) and forward it to the inner frame component. The marketplace diptych supplies its own browser chrome at the half level; the marketing single-half does not.

Existing backdrop frames to reuse / mirror:

• before-after-frame.tsx — diptych composition (BeforeAfterFrameWithFrame).
• google-serp-frame.tsx — Google SERP illustration (used by scene #3).
• google-knowledge-frame.tsx — Google entity Knowledge Panel (used by scene #5).
• news-{en,uk}.tsx, site-{en,uk,ru}.tsx, voya-*.tsx — fictitious-site backdrops.

If you build a new fictitious brand, follow §5 of apps/extension/store-assets/REQUIREMENTS.md: invented name, .example TLD, no real third-party logos, no real personal context.

2. Marketing single-half stories

Add two stories under apps/extension/store-assets/storyboards/marketing/:

• <name>-without.stories.tsx — title Marketing/Screenshots/<Name>Without, output <name>-without-movar.png.
• <name>-with.stories.tsx — title Marketing/Screenshots/<Name>With, output <name>-with-movar.png.

Each story sets parameters: { layout: 'fullscreen', viewport: { width: <content-width>, height: 800 }, captureOutput: { path: '<file>.png' }, naturalHeight: true, darkVariant: true } and renders the backdrop with its built-in chrome (no hideChrome). Set viewport.width to the scene's natural content width (the width at which the page content fills the frame edge-to-edge without being stretched — e.g. a Google SERP's ~680px column + padding) so the marketing layout can scale it to fit; naturalHeight then captures the full height (not an 800px crop); darkVariant emits the -dark sibling under prefers-color-scheme: dark (give the backdrop a dark @media block over its scoped CSS vars).

3. Marketplace diptych story

Add one story under apps/extension/store-assets/storyboards/stories/<scene>.stories.tsx titled Marketplace/Screenshots/<Scene> with the next free screenshotIndex. Compose the two backdrops inside BeforeAfterFrameWithFrame, passing hideChrome on each. Export English and Ukrainian story functions — or, if a locale is intentionally skipped, document the reason in the file header and omit that export (the capture script throws on stories named anything other than English / Ukrainian, so omitting is cleaner than a renamed export).

Caption bodies live inline in the story render functions (search-rewrite is the canonical template) — keep them under three lines at the diptych's caption width (~540px @ 18px body).

4. Marketing site integration

The marketing pairs render in apps/marketing/src/components/Examples.astro, keyed by the index of the matching entry in strings.examples.entries (apps/marketing/src/i18n.ts):

• Add (or confirm) the examples.entries entry for the scene in both en and uk — each has site, scenario, without, withMovar.
• Add an imagePairs[<index>] record in Examples.astro with the without/with light src + alt. The -dark siblings and the existsSync gate are handled automatically: a pair renders only when both light PNGs are on disk, and the dark <picture> source is added when the -dark PNG exists. Missing pairs degrade to text-only.

If Examples.stories.tsx mocks the section, keep its layout in step — it renders the text-only fallback, since the Storybook canvas has no built public/ dir.

5. Docs

Update three docs in lockstep:

• apps/extension/store-assets/README.md — add a row to the "Required shots" table (file, locales, backdrop, layout).
• apps/extension/store-assets/REQUIREMENTS.md §5 — add a row to the screenshot-set table; mention any locale skips with the reason.
• apps/extension/store-assets/REQUIREMENTS.md §6 — add asset rows for each per-locale PNG ("Screenshot #N (UK)", etc.).
• apps/marketing/public/screenshots/README.md — add a row to the filename table.

6. Capture and commit

pnpm capture:storybook-assets

Or from a sub-package directory:

pnpm --filter @movar/extension capture:storybook-assets

Commit the resulting PNGs in the same change as the source so PR review surfaces the visual diff.

Concrete example

Scene #5 (Knowledge Panel) is the canonical example of this convention applied:

• Backdrops: apps/extension/store-assets/storyboards/backdrops/google-{god-of-war-with-movar,god-of-war-without-movar,knowledge-frame}.tsx
• Marketing stories: apps/extension/store-assets/storyboards/marketing/google-god-of-war-{with,without}.stories.tsx
• Marketplace diptych story: apps/extension/store-assets/storyboards/stories/knowledge-panel.stories.tsx (UK-only — see header)
• Marketing PNGs: apps/marketing/public/screenshots/google-god-of-war-{with,without}-movar.png
• Marketplace PNG: apps/extension/store-assets/screenshots/uk/05-knowledge-panel.png

When in doubt, mirror the structure of scene #3 (search-rewrite — fully bilingual) or scene #5 (knowledge-panel — UK-only with a documented skip).