product-demolisted

# Product Demo **REQUIRED BACKGROUND:** marketing-studio skill; also read `C:/Projects/animations/docs/playbook/capture.md` and `C:/Projects/animations/docs/playbook/remotion.md`. Work in `C:/Projects/animations`. Produces `<product>/marketing/assets/<brand>/demo.mp4`: real app footage with a timestamp-driven cursor, subject-safe camera framing, and concise captions. ## Recipe 1. Toolchain + brand check per marketing-studio. The product's app must be RUNNING (ask the user to start it; never start their stack yourself). 2. Capture script: `feeders/capture/record-<brand>-demo.mjs`. For a new product copy `record-noban-demo.mjs`: viewport wide enough for the app, `deviceScaleFactor: 2`, proven ready-locators per view, a step caption per view. Read `C:/Projects/animations/docs/playbook/capture.md` FIRST — especially: camera focus rects are MEASURED from raw footage frames, never derived from click points, and must end before any app-side clipped edge. 3. Run the capture with `--project <product>`; verify `capture OK` and the product-owned props/public files it writes. Do not stage product footage in the engine. 4. Measure/tune focus rects: extract raw frames (`npx remotion ffmpeg -ss <t> -i <product>/marketing/assets/<brand>/public/<brand>/demo.webm -frames:v 1 f.png`), Read them, set focus {x,y,w,h} centers/sizes in the capture script, re-capture (~20s). 5. Render one proof per view with `--public-dir=<product>/marketing/assets/<brand>/public`;