# Compokit Svelte/Vue scanning release film — working brief

Status: clean second-pass real light/dark app captures, API readback, and paired
Remotion diagnostic poster renders are published with 17/17 exact public hashes
after independent review. No Cartesia request or full video render exists yet.

## Claim and proof

Entry `e7f8a9b0` (`38bdb45`) says the scanner extracts metadata from Svelte and Vue single-file components. `component-scanner.ts` and its scanner tests cover Svelte 5 `$props()`, Svelte 4 `export let`, slots, and Vue 3 `defineProps`. The public app exposes this through `/design-systems`: choose a framework, scan a local component directory, then see the indexed library card and its component/token counts. The film must show a live API connection and a completed scan against a clearly labelled synthetic local fixture. No placeholder/demo-fallback state may appear as an indexed result.

## Capture gate

Second-pass capture on 2026-09-25 passed against the running web app and API
with a fresh isolated scan store.
`capture-evidence.json` records one scanned Svelte component with two props and
two tokens, and one scanned Vue component with two props and two tokens. The
light session ran both scans; the dark session showed the same API-backed index
in the actual dark UI. Both theme result frames are genuine and visually
inspected. The new form frames show the complete neutral
`/var/tmp/cpk-release/svelte` fixture path and no personal workspace path.
All four frames have been visually inspected. `capture-checksums.sha256` records
their exact bytes and the paired poster renders. They remain unpublished until
the paired film, Cartesia narration, and final captions pass review.

- Start API with isolated `COMPOKIT_DATA_DIR` under this ignored work folder, then start web. Verify `/api/health` and real scan response first.
- Build one small public, synthetic Svelte library and one Vue library under `assets/fixture/`. Record the exact fixture files and scanner response in `capture-evidence.json` (no credentials or personal paths in the picture).
- Capture the same `/design-systems` states in light and dark at a readable viewport: scan form with Svelte selected; completed Svelte and Vue cards. Use the actual theme setting and UI in both sessions, not a CSS recolor of one capture. The capture script must set `compokit-theme` before navigation and check the resulting document theme.
- Keep browser UI and library names real. If the card shows a count of zero or a failure, correct the fixture or abort; never patch the image or narration to imply a successful scan.

## Film concept (18–22 s, 30 fps, 1280×720)

The actual product screen fills roughly two-thirds of the frame. Annotation rails sit outside it so they cannot be mistaken for native controls. Warm stone, a restrained copper accent, and the existing Compokit wordmark carry the established system. The opening is a short editorial poster reveal, followed by a guided scan-form moment and the indexed-results moment. A mask reveals the framework selector; a fine line follows the viewer's eye to the real Svelte/Vue badges and component counts. No simulated cursor, fake loading state, gradient spectacle, or unverified generation result.

- 0–3 s: title “Your library, understood.” Actual scan form visible; subtitle “Svelte and Vue component scanning”.
- 3–9 s: slow camera move onto the real framework selector. Annotation “Choose the source framework”.
- 9–16 s: cut on the completed scan to the real result cards. Annotations “Indexed components” and “Design tokens” attach to the visible counters only after they appear.
- 16–21 s: both framework cards in one frame; close on “Bring your components into the workflow.” This describes the scanner's role, not guaranteed code generation.

Draft narration, pending factual review and licensed Cartesia voice: “Point Compokit at a Svelte or Vue component directory. It indexes the components and design tokens it finds, so your own library is ready for the next step. Start with the source you already have.” Record one approved script, use the same audio in both theme edits, and time captions to the delivered waveform.

The Remotion source now carries four **provisional** on-screen caption cues
(0–4.8 s, 4.8–10 s, 10–15.8 s, 15.8–21 s). These are for frame-layout QA only;
they are not synchronized captions. After Cartesia audio is licensed and
received, transcribe/align to that waveform, revise the animation beats as
needed, and export matching checked VTT tracks for both themes.

## Posters and publication gate

Two distinct 1920×1080 posters must be composed from the corresponding actual result captures. The hero crop shows the Svelte/Vue cards with visible framework badges and counts; a short title remains readable at 320 px card width. The light poster keeps dark ink on pale stone; the dark poster keeps warm white on deep brown. Every decorative annotation is labelled as editorial, outside the app crop. Review both on the actual `/changelog` card and video player, desktop and mobile.

The first paired Remotion posters were rendered to `/var/tmp/compokit-release-media/`
and copied into this ignored task's `film/public/`. Both were visually inspected
at 1920×1080: the real Svelte/Vue cards, badges, component/token counts, and
editorial callouts are legible. Representative form/result frames in both
themes were rendered and inspected; the form and result UI crops were enlarged
after first-frame review. Film TypeScript check passed. Poster card-width,
gallery, and playback QA are still outstanding; do not publish yet.

Review-branch follow-up: the first poster failed a 320×180 card check because
its synthetic-fixture footer and component/token counts became unreadable. The
new paired poster candidates add a large proof band stating **SYNTHETIC LOCAL
SCAN** and the observed **1 component · 2 tokens each** for Svelte and Vue.
Both full-size and 320×180 reductions were inspected locally. Independent full-size and 320×180 thumbnail review passed at `d273755`;
media publish run `36104745737` succeeded and 17/17 public hashes matched.
Changelog-player and final-cover review remain open.

The media gallery metadata (`production: remotion`, `narration.provider: cartesia`) is added only after light/dark screenshots, MP4s, distinct posters, Cartesia audio, and checked VTT tracks all exist and have been played back. Require source-file hashes, real API response, frame/provenance log, resource-safe render output under `/var/tmp`, and final 200 readback. Existing public JSON entry remains unchanged until then.

Inspo's changelog study suggested a media-first marquee/feature-stack composition, but its dark/cool palette conflicts with Aylith's established warm-stone system; use the composition cue only.