freudianflips/breakout-launch-videos

Launch brand

Every launch film reads its look from brand/brand.json. This skill makes that file from the reader's own website, checks it, and hands it to launch-film. Run it once per brand, again when the site's look changes.

1. Extract

npm install                                   # once: puppeteer and its Chrome
node tools/brand-from-url.mjs https://your-site.com --out brand

It opens the page at 1920x1080, dismisses cookie banners, scrolls once so lazy content loads, and writes:

File	What
brand.json	The roles the film uses. The only file the film reads.
evidence.json	What each role was decided from: computed styles, CSS colour variables, pixel histograms, button and link colours, font faces, every logo candidate with its score and reason.
logo.svg or logo.png	The logo for light grounds. logo-on-dark.* for dark grounds, mark.svg when an icon-only mark is separable.
fonts/	The display and body font files the page actually loaded (Google Fonts are fetched from the css2 API when the page does not serve them).
screens/hero.png, screens/full.png	The first viewport and the full page (capped at 6000 px).
images/	The largest content images, usually product shots.
preview.png	One sheet: logo on ground and on dark, every colour role, the display font with the highlight, a dark hero card, the accent button.

Flags: --no-fonts skips font files, --max-images 0 skips images. A local page works too (node tools/brand-from-url.mjs ./site/index.html). After editing brand.json by hand, re-render the sheet with node tools/brand-from-url.mjs --preview --out brand.

2. Review (never skip)

Read preview.png and screens/hero.png side by side. The roles are heuristics; the sheet shows in 10 seconds whether they picked right. Check, in this order:

1. Logo on ground and on dark. Both must read. A logo that disappears on dark needs a light version: ask the reader for their file, or edit the colours inside logo-on-dark.svg.
2. Accent. It should be the colour people associate with the brand, usually the main button. evidence.json lists accent_candidates with their votes. Swap in the right hex when it chose a hero illustration colour or a status colour.
3. Ground and ink. Statement scenes sit on ground with ink type. They must match the site's feel (warm off-white, pure white, a tinted paper).
4. Dark. Hero cards use dark. It should look like the brand's own dark section, not a random near-black. If the site has none, the tool darkens the accent; check that it looks intended.
5. Fonts. The display font must render in the sheet's hero words. evidence.json under fonts shows which files were found.
6. Name and tagline. The tagline sits under the name in the lockup: 2 to 8 words, the site's own words.

Fix wrong values directly in brand.json, re-render the preview, show it to the reader, and only then set "reviewed": true. Record anything you changed by hand in one line in your reply.

What each role does in the film

Role	Used for
ground	Every statement scene, the product walkthrough's floor, the end lockup.
surface	Cards, chips and windows on the ground.
ink, ink_secondary	Hero words and supporting words on light grounds.
accent	Sparingly: 1 element per scene (a button press, the switch, the done state). Never a whole ground unless the brief asks for an accent hero card.
accent_ink	Text on the accent.
dark, dark_ink	Hard-cut hero cards, the dark moments.
accent_on_dark	Key words on dark cards (the accent lightened until it reads; dark_ink for monochrome brands).
highlight	A soft marker behind 1 or 2 key words per line, never more.
success, danger	Checks, done states, the rare failure word.
fonts.display	Hero words (weight and tracking from the site's h1).
fonts.body	Supporting lines, UI chips.
logo, name, tagline, domain	The name beat on the cut and the end lockup.
copy	Words for the script. The film speaks the site's language; launch-story starts from copy.h1, copy.subhead, copy.h2 and copy.features.
images	Candidate product shots. Real product screens or recordings from the reader beat anything scraped.

Fallbacks

• No logo found. The tool falls back to the site icon and says so. Ask the reader for an SVG (best) or a transparent PNG at 1000 px wide or more; put it in brand/ and point logo.file at it.
• Dark-mode site. mode is dark. The page's background becomes dark, and ground and ink are derived for light statement scenes. If the brand wants dark statement scenes too, swap ground and dark (and ink and dark_ink) by hand.
• Monochrome brand. No saturated colour won a vote, so accent is the main button colour (often black) and highlight is a light grey. Ask the reader whether they have a signature colour; if not, keep it monochrome and let type and motion carry the film.
• Web font not downloadable. Some foundries block direct downloads. Install the font locally (the film falls back to installed fonts by family name) or pick the closest open font from Google Fonts and put its files in brand/fonts/.
• Font licensing. A web licence does not always cover video. Before the film ships, confirm the display and body fonts are licensed for video or motion use, or use an open (OFL) font.
• The reader has a brand guide. Their guide wins. Enter its values into brand.json by hand (keep the same keys), put the logo files in brand/, re-render the preview and mark it reviewed.
• The site blocks headless browsers. Save the page from a normal browser (File, Save Page As, complete) and run the tool on the saved HTML file.

Hand-off

launch-film reads brand/brand.json at build time. A film built on "reviewed": false is a draft; say so when you show it.