Brand reflection
Turn a real website into an on-brand film. Study the site and capture it before you write the page.
The best way to make a film for a real brand is not to describe the brand from memory. Study the site, capture its real surfaces, and carry its taste into motion.
Build the kit
node scripts/brand/kit.mjs https://example.com example --initOne command runs the section crawl and the palette read, and writes assets/brands/example/kit.json with the site's own palette, fonts and favicon. --init also checks that the checkout is ready to render. The kit builds from the site's own colours only. Do not improve the palette.
The pieces it runs are also available alone:
node scripts/brand/sections.mjs <url> <brand>screenshots every major section toassets/brands/<brand>/sections/and writessections.json. Plan one beat per section, in the site's order.node scripts/brand/palette.mjs assets/brands/<brand>/sectionsreads the pixels of the whole page. It reports the dominant colours and whether the brand is light-first or dark-first.
Dominance is decided by looking
A white site gets a white film. Confirm the dominance against the screenshots before you pick the ground.
Start the film from the launch template
bin/vawe new my-launch --from prompts/brand-launch-from-url.mdThe template asks for the URL, the one-line promise, three to five moments to show, the platform and length, and music. It allows only the site's own kit and real captures. Every screen in the film is a cropped capture of the real site or app. A feature you did not see on the site is a feature you must not show.
Put the captures in films/my-launch/assets/ with the source URL in a comment next to each <img>. See Backgrounds and images for treatments.
Check the match
Look at your frames beside the section screenshots.
bin/vawe compare --page films/my-launch/page.html --at 2,6,10Wrong dominance, off colours and invented imagery show here. The other checks are in Quality gates.