Ships the second dashboard surface — a Pattern Library + Preview Theatre — that presents the 4-section PDP pilot batch back to Umar, compliance, and the board in an editorial format. Adds the full data layer that drives it: 5 source-backed per-SKU drafts at QA 100/100, 15 competitor PDP semantic extracts, PubMed evidence packs, EFSA claims library extension, JV brand voice guide, hand-curated product FAQs, and the Matrixify-ready CSV exports for Lewis. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Loom Capture Tool
Bun/Node script that captures Loom video walkthroughs as frame sequences when no transcript is available. Built for the JV project where Umar shares fast cursor-pointing demos via Loom.
Captures stored here
| Folder | Loom | Date | Duration | Frames | Notes |
|---|---|---|---|---|---|
1-june-pdp-walkthrough/ |
https://www.loom.com/share/ce4501e9de834cfdae628c60fe9e41d3 | 1 Jun 2026 | 2:12 | 45 | Umar walks through the JV "High Strength Calcium Citrate" PDP showing empty Results + FAQ sections; ends on a competitor reference. The direct brief on what content needs populating. |
21-may-uiux-walkthrough/ |
https://www.loom.com/share/55449ee0013148e7936344b83caf9ba8 | 21 May 2026 | 2:42 | 54 | Broader UI/UX walkthrough showing reference patterns from Wild Nutrition (Scientific Studies), Spacegoods (Timeline), Grüns + Club EarlyBird (Comparison Tables), JV's own Figma (Results, FAQs). |
Each folder contains:
frame-000.png…frame-NNN.png— full-resolution frames at 3-second intervalscontact-sheet.jpg— 6-col grid of all frames for fast scanningmanifest.json— frame index → seconds + mm:sstranscript.txt— Loom transcript JSON (both videos are empty — Umar didn't enable auto-transcription, returns{"phrases":[],"schemaVersion":"1.1.3"})
Re-capture a Loom
cd tools/loom-capture
node capture.mjs <loom-share-or-embed-url> ./out-folder [intervalSeconds]
Examples:
node capture.mjs https://www.loom.com/share/<id> ./my-capture 3
node capture.mjs https://www.loom.com/share/<id> ./my-capture 5 # less granular, faster
Notes:
- Script auto-converts
/share/<id>→/embed/<id>?autoplay=trueso the real video loads instead of Loom's 4-second preview clip. - Cleans the target folder before re-running.
- Writes
manifest.jsonmapping frame index → timestamp. - Builds a
contact-sheet.jpg(6 columns) via local ffmpeg using%03dsequence pattern (Windows-compatible — noglobsupport needed).
Try to fetch the transcript
node transcript.mjs <loom-share-url> ./out/transcript.txt
Strategies it tries (in order):
- Parse
__NEXT_DATA__on the share page for embedded transcript URL - Intercept network responses during embed playback (
cdn.loom.com/mediametadata/transcription/<id>-2.json+captions/<id>-2.vtt) - Toggle captions UI if present
- Direct GET against well-known endpoints
For both JV Looms the endpoint returns an empty phrases array, confirming Umar didn't enable transcription. If a Loom returns a VTT, the script also writes a .plain.txt stripped version.
Dependencies
- Node 18+ (tested on Node 24)
playwright(installed locally in this folder vianpm i playwright+npx playwright install chromium)ffmpegon PATH (any modern build — globbing not required)
Why frames-not-video?
Loom doesn't expose its mp4 publicly without auth, so direct yt-dlp-style download fails. Frame capture via Playwright <video> element seek + screenshot is the cleanest fallback — no auth, decent visual fidelity, fast to scan via the contact sheet.
Where this fits in the project
These captures are the visual ground truth for the 4 PDP sections Umar wants populated (Scientific Studies, Timeline/Results, Comparison Tables, FAQs). The plan referencing them is ../../PLAN_v2_2026-06-02.md.