Case Study Repurposing

0HR Studio · Promotionpartial

An addition to the existing case-study system, not a replacement.

The existing system stays the source of truth for case-study copy and is unchanged:

Google Sheet (human editing layer)
  → app/studio/showcase/_data/0HR-CASE-STUDIES-MASTER.csv   (committed, 26 columns)
  → scripts/gen-showcase-case-studies.mjs
  → app/studio/showcase/_data/case-studies.ts               (generated, read at runtime)
  → /studio/showcase

Copy is verbatim. Never hand-edit the .ts — re-export the Sheet and regenerate.

This page documents the step after a case study exists: turning that project's real design files into a presentation deck and a social shot series.

The pipeline

Per project, in reference-library/briefs/client-project-presentation/<brand>/.

01 · Export the designs → `assets/pages/NN-name.png`

Export each page frame from Figma with get_screenshot, passing maxDimension greater than or equal to the frame's long edge — a 1440×6058 frame needs 6100. download_assets silently downscales the same frame to 974px wide.

Filenames become slide titles: 07-mobile-authentication.png → "Mobile Authentication".

02 · Crop uniform tiles → `assets/tiles/NN-name.png` (1440×1040)

Headless Chrome against a fixed 1440×1040 div using background: <ground> url(...) top center / cover.

Every tile must share one aspect ratio, or the marquee wall reads ragged. Fix it at the crop, never in CSS. Two traps: sips -c H W --cropOffset 0 0 centre-crops and ignores the offset; and a plain <img> leaves white bands under any export shorter than 1040px.

03 · Fill the brand config → `brand.json`

Tokens (bg, primary, fg), social headline, marquee copy, stats, quote, process steps, coverage-matrix rows, and picks — which export is hero / alt / four-up grid.

04 · Generate → `python3 build.py`

Emits the deck's Deliverables section — marquee wall, page inventory, social tiles, device showcase, screen grid, mobile trio, coverage matrix, and one scroll slide per page — plus social.html. Renumbers every slide label, footer rail and section count deck-wide.

05 · Export the shots → PNG

social.html renders each shot at native social size. Screenshot per frame to post. Still manual — see Gaps.

What one project yields

Shot	Ratio	What it is
`cover-1x1`	1:1	Brand cover — headline + hero tile
`hero-4x5`	4:5	Browser frame + deliverable headline
`stat-1x1`	1:1	One frame per metric, alternating brand/dark
`quote-4x5`	4:5	Pull quote + attribution
`steps-1x1`	1:1	One frame per process step
`device-9x16`	9:16	Phone on brand ground — story / reel
`wall-1x1`	1:1	3D marquee wall, cropped square
`page-9x16`	9:16	One long-scroll frame per page export

Entersekt: 12 page exports → 26 shots. Lateral: 8 → 20.

Gaps — read before relying on this

Typography is not yet a brand token. The engine hardcodes one client's typeface, so the Entersekt deck currently renders in Lateral's Bricolage / Fragment Mono. Fonts must move into brand.json alongside colour, defaulting to ours (Geist / Inter).

The engine is a parallel system. engine/ duplicates components/ui/3d-marquee.tsx (re-ported to CSS) and components/ui/safari.tsx (hand-rolled device frames). Fold it in, or keep it explicitly as a static-export tool.

No promotion tracking. The master schema records the case study but nothing records which shots were produced or where they ran.

Shot export is manual. A headless render-to-PNG script per .shot would close this.

Proposed columns · master case-study Sheet

Not added — the Sheet is the human editing layer and mk owns its schema.

Column	Purpose
`shots_status`	`none` / `generated` / `posted`
`shots_url`	Where `social.html` lives for this project
`promo_channels`	Where the shots ran (LI / IG / X / newsletter)

Component audit — reference-library/briefs/client-project-presentation/COMPONENT-MAP.md
/system § 24 · Client Presentation Components (backlog)