Docs / 10

Scripts: screening, footage, grading and rendering

The Node scripts bundled with Cinematic UI: screening, grade-from-stills, find-footage, copy-check, render-film, generate-image, app-screening, with commands.

The scripts need Node and playwright-core in the project (npm i -D playwright-core). Rendering video also needs ffmpeg. Run them from the project folder; <skill> below stands for the folder the skill is cloned into.

screening.mjs: dailies

Shoots every scene on desktop, a short laptop and a phone, and lays the frames out as contact sheets. Pages built on the kit are shot scene by scene at exact, repeatable playhead positions; any other page is shot at evenly spaced scroll positions. It works on any URL, so it can also shoot reference sites.

node <skill>/scripts/screening.mjs ./site                   # desktop + short laptop + mobile
node <skill>/scripts/screening.mjs ./site --cuts            # also the midpoint of every cut
node <skill>/scripts/screening.mjs ./site --reduced         # the accessible cut
node <skill>/scripts/screening.mjs ./site --act shots.mjs   # your own shots: control states, the audience's part
node <skill>/scripts/screening.mjs ./site --tabs 120        # tab further than the first 60 stops

It writes contact sheets, individual frames and report.json, and flags errors, blank frames, dead holds, overflow, chrome over text and hidden focus. With --grade grade.json it also flags colour drift. On the phone viewport it simulates a 90 px browser bar (--bar 0 turns it off).

grade-from-stills.mjs

Measures reference stills into a grade: palette with shares, black and white points, chroma range, shadow and highlight warmth, and a suggested look, written to grade.json with a swatch contact sheet grade.jpg.

node <skill>/scripts/grade-from-stills.mjs refs/ --out grade.json

find-footage.mjs

The archive researcher. Search with the shot, not the topic, then cast from the contact sheet.

node find-footage.mjs --query "dawn mist over a valley, wide, backlit" --type video --count 24 --out casting
node find-footage.mjs --pick 3,11 --from casting/candidates.json --to assets --trim 4,8 --width 1920

Keyless sources are Openverse, Wikimedia Commons, the Internet Archive’s curated public-domain films, and NASA. Pixabay and Unsplash need a free key. Only licences that allow commercial use are returned, and every pick is appended to CREDITS.md.

copy-check.mjs

Checks that every line of client-supplied copy is on the page, both with and without JavaScript, so readers, crawlers and a failed script all get it.

node <skill>/scripts/copy-check.mjs copy.md ./site

render-film.mjs

Seeks a deterministic page frame by frame and encodes it with ffmpeg. For a site built on the kit, it records a tour:

node scripts/render-film.mjs ./site --tour 30 --out tour.mp4      # record a site as a film

Other options include --preview (half size, fast encode), --motion-blur, --grain, --poster, --audio and --sound for a sound sheet. Promo films themselves are made with the companion skill cinematic-cut, which carries the same renderer.

generate-image.mjs

An optional route for generated plates, illustrations and cut-outs through the Runware API. It is used only when you chose AI generation in the asset call. The key comes from the RUNWARE_API_KEY environment variable or --env-file, and is never printed.

node generate-image.mjs --prompt "..." --out assets/ridge.webp --size 1536x1024 --remove-bg

app-screening.mjs

Dailies for an app: every route by state by viewport by theme.

node app-screening.mjs ./app --routes "#/,#/items,#/items/42" --states default,loading,empty,filtered,done,error,denied,huge --viewports 1440x900,390x844 --theme light,dark

Flags include proportional digits, left-aligned numbers, clipped text, layout shift between loading and loaded, low contrast, small targets, hidden focus and blank states. It always exits 0: it reports, it does not judge.