offbrand

Generative advertising. Public-domain museum art and invented brands, recast as a new campaign every week, for a product that never appears.

Each ISO week seeds one campaign: an invented brand name from Ortho, a palette, a font pairing, a picture, a crop, a layout, a decoration, corner ornaments (vignette, marginalia, arabesque, American scrollwork, acanthus, or English scroll, placed on the top, bottom, diagonal, or all corners), and suggestive copy from curated lists. The campaign runs across three standard web ad sizes (728 × 90, 300 × 250, 160 × 600), so the set reads as one campaign.

Pictures are a drawn, shaded product shape (bottle, jar, perfume flask, can, tube, box, sphere, cone, or pyramid) on a tint, horizon, or fade (sometimes with Ben-Day dots), or a public-domain work found by the browser in the Art Institute of Chicago, The Met, Cleveland Museum of Art, or SMK (National Gallery of Denmark) collections, with a credit. Fonts come from Google Fonts. No keys, accounts, or build step are needed.

See it working in a website

leemeredith.github.io runs offbrand as part of an artist's portfolio: two campaigns, one changing every 3 days and one every 12 hours, run as ads beside the work, in all three sizes, and the offbrand page shows a campaign with its picture credit and lets you browse other weeks.

Try it

Open index.html through a web server; browsers don't run modules from a double-clicked file. For example, run python3 -m http.server 8000 in this folder and visit http://127.0.0.1:8000/. Turning on GitHub Pages for this repository serves the same demo publicly.

Files

• offbrand/offbrand.js: the generator, as an ES module with no build step.
• offbrand/offbrand-ad.js: the <offbrand-ad> and <offbrand-campaign> web components.
• offbrand/offbrand.css: the ad styles. Class names start with offbrand-, and colours and fonts are --ob-* variables, so they won't clash with the page around them.
• ortho/: a copy of Ortho, which invents the brand names. Keep it next to the offbrand/ folder.
• index.html: the demo.

To use offbrand on your own site, copy the offbrand/ and ortho/ folders side by side and load offbrand/offbrand.css.

Use as a tag

Copy the offbrand/ and ortho/ folders side by side, then:

<script type="module" src="offbrand/offbrand-ad.js"></script>

<offbrand-ad size="rectangle" every="3d" href="about.html"></offbrand-ad>
<offbrand-campaign></offbrand-campaign>

• size: leaderboard (728 x 90), rectangle (300 x 250, the default) or skyscraper (160 x 600).
• every: week (the default), 3d or 12h, how often the campaign changes.
• href: optional; makes the ad a link.

<offbrand-campaign> shows this week's campaign in all three sizes with buttons to browse other weeks. Each tag keeps its styles in its own shadow root, so your page's CSS can't break it. Changing an attribute redraws the ad.

Use from JavaScript

import { placeAd, mount, configure } from "./offbrand/offbrand.js";

placeAd(element, "rectangle", "campaign.html"); // one ad; also "leaderboard" or "skyscraper"
placeAd(element, "skyscraper", "campaign.html", "12h"); // a campaign that changes every 12 hours ("3d" for 3 days)
mount(element);                                  // this week's full set, with buttons
configure({ headlines: ["You already know."] }); // replace any ingredient list

The ingredient lists you can replace are palettes, headlines, lines, calls, images, sources, shapes, backdrops, subjects, layouts, decos, ornaments, placements, labels, dotSizes, zooms and fonts. The defaults and what each one means are at the top of offbrand/offbrand.js.

Credits

Museum pictures are public-domain works from the open-access APIs of the Art Institute of Chicago, The Metropolitan Museum of Art, the Cleveland Museum of Art and SMK, credited under each campaign. Each ad carries a small disclosure label just outside it ("Advertisement", "Sponsored" and so on), as real sites do.

MIT licence.