# Beatloom — real product footage (captured from the live site) Everything in this folder is the **live product rendering itself**: a real Chromium loaded `https://beatloom.acoco.ai`, and these are the frames and screenshots it produced at capture time. Nothing here is re-drawn, synthesized, or AI-generated — no AI-generated imagery and no AI-generated people appear in any of it. **Captured: 2026-09-25** · **Manifest (sizes + SHA-256): [`manifest.json`](./manifest.json)** · **Read-back proof: [`/api/ad-creative-verify`](https://beatloom.acoco.ai/api/ad-creative-verify)** --- ## 1. The screen recording (the ad-creative video) > **https://beatloom.acoco.ai/ad-creative/beatloom-real-studio-1080x1920.mp4** | | | |---|---| | Format | MP4, **H.264** (High profile, yuv420p) + **AAC** audio | | Frame | **1080 × 1920** (9:16) — native 2× raster of the product's own phone layout, no upscaling | | Pixel format | yuv420p, High profile — decodes end-to-end with zero errors | | Length | 20.5 s · 1.9 MB (limit was 60 MB) · 24 fps | | First frame | **already moving** — verified by decoding frames 1 and 2 of the encoded file and comparing their hashes | | Source | the live `https://beatloom.acoco.ai/free-drum-machine` page, recorded with CDP `Page.startScreencast` | | Audio | the product's **own** output — tapped from the page's Web Audio graph during the take, not a music bed | | Spinners / menu hunting | none — the recording starts only after the machine is loaded, warmed and playing | What happens in the take (real interactions, all visible on screen): 1. the sequencer grid is already running — three hits are programmed live into the pattern (clap, snare, open hat); 2. the camera pans up to the kit rail and the kit is swapped to **Velvet Lo-Fi** (a free kit) — the voices change; 3. back down to the grid, the **Kick volume fader** is ridden down and back up; 4. one slow horizontal reveal of the second half of the 16-step pattern. A poster/first-frame JPEG for ad managers: **https://beatloom.acoco.ai/ad-creative/beatloom-real-studio-poster.jpg** ## 2. Full-resolution screenshots All captured from the live site at a 1440 × 1200 viewport, device pixel ratio 2 (so a "full resolution" PNG is the real 2× raster of the real UI). | # | What it shows | URL | Pixels | |---|---|---|---| | 01 | **`/studio` exactly as it is served** to a visitor without a purchase | `https://beatloom.acoco.ai/ad-creative/screenshots/01-studio-page-live.png` | 2880 × 2400 | | 02 | **The whole instrument, loaded and playing** — transport, kit rail, 16-step grid, mix controls | `https://beatloom.acoco.ai/ad-creative/screenshots/02-studio-loaded-playing.png` | 2768 × 3630 | | 03 | **The step sequencer** — 16-step grid + channel LED strip, playhead running | `https://beatloom.acoco.ai/ad-creative/screenshots/03-step-sequencer.png` | 2620 × 1004 | | 04 | **The kit picker** — all twelve kits with their FREE / PRO badges | `https://beatloom.acoco.ai/ad-creative/screenshots/04-kit-picker.png` | 884 × 668 | | 05 | **The mixing controls** — mute key, volume fader, voice-variant picker per row | `https://beatloom.acoco.ai/ad-creative/screenshots/05-mixing-controls.png` | 2620 × 520 | | 06 | **The export key in the transport** (post-play) | `https://beatloom.acoco.ai/ad-creative/screenshots/06-export-transport-key.png` | 822 × 646 | | 07 | **The Output group** at the end of the rail | `https://beatloom.acoco.ai/ad-creative/screenshots/07-export-output-group.png` | 528 × 152 | | 08 | **The export offer** — the Output tier card on `/studio` | `https://beatloom.acoco.ai/ad-creative/screenshots/08-studio-output-tier.png` | 904 × 1026 | ## 3. One thing the founder needs to know about `/studio` `/studio` renders the sequencer **only for an unlocked tier**. A visitor with no purchase (any anonymous browser, and any capture run) gets that page's offer state — which is exactly what screenshot 01 shows. The instrument screenshots (02–07) and the video therefore come from `https://beatloom.acoco.ai/free-drum-machine`, which mounts the **same `` component the studio mounts** (`app/components/DrumMachineEmbed.tsx` → `app/components/Sequencer.tsx`) — the real studio UI, at the URL where a visitor who has not purchased can actually reach it. Nothing was faked to make the paid view appear; no purchase, coupon or unlock was created for this capture. If the founder wants the paid studio view captured too, the capture scripts below take an unlocked browser profile — they simply need a session that has purchased Output (`?restore=` on `/studio` previously redeemed on that profile). ## 4. How to re-run the capture The scripts live in `scripts/capture/` and are documented in `STRUCTURE.md`. They need a Chromium and an ffmpeg with libx264, which are deliberately **not** site dependencies (same policy as `scripts/render-*-video.ts` with system ffmpeg): ```bash mkdir -p /tmp/capture-tools && cd /tmp/capture-tools && bun add playwright-core ffmpeg-static cd - # back to the repo ln -s /tmp/capture-tools/node_modules/playwright-core node_modules/playwright-core ln -s /tmp/capture-tools/node_modules/ffmpeg-static node_modules/ffmpeg-static bun scripts/capture/capture-real-studio-shots.mjs # → screenshots/*.png bun scripts/capture/capture-real-studio-video.mjs # → beatloom-real-studio-1080x1920.mp4 bun scripts/capture/write-ad-creative-manifest.mjs # → manifest.json FFMPEG_BIN=$(which ffmpeg) bun scripts/capture/capture-real-studio-video.mjs CHROME_PATH=/path/to/chrome bun scripts/capture/capture-real-studio-shots.mjs ``` Both runners are self-verifying and exit non-zero with a `PROBLEMS:` list rather than shipping something broken: clips are measured from live element boxes and spot-checked by sampling a known pixel back out of the PNG, and the video is checked for codec, frame size, file size, a moving first frame, non-silent audio and a capture rate that matches the encode. Neither script writes to the live funnel/analytics: `blockAnalytics()` answers `/api/funnel` (and the beacon endpoints) in-browser and drops the third-party pixel/PostHog requests, so a capture run leaves no production funnel row and no fake ad conversion behind. ## 5. After a deploy `GET https://beatloom.acoco.ai/api/ad-creative-verify` fetches every file in `manifest.json` back from this site's own public origin and compares size + SHA-256 to the captured fingerprint. `ok: true` is the proof that these URLs serve the exact captured bytes.