Vawe

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 --init

One 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 to assets/brands/<brand>/sections/ and writes sections.json. Plan one beat per section, in the site's order.
  • node scripts/brand/palette.mjs assets/brands/<brand>/sections reads 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.md

The 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,10

Wrong dominance, off colours and invented imagery show here. The other checks are in Quality gates.

On this page