The pictures for vibescrobble's Bluesky profile: an icon (1000×1000, which Bluesky cuts round) and a header (3000×1000, which Bluesky crops and puts the icon over); and the wordmark at the top of the repository's README. They are drawn from the site itself: the ground, papers, inks and stickers are plate.css, zine.css, the zine kit and look.js, and the name is wordmark.svg and the mark mark.svg. A change to any of those is in the next pictures drawn.

node web/dev/brand/brand.mjs                # every picture, into out/
node web/dev/brand/brand.mjs header-board   # just these
node web/dev/brand/brand.mjs --live         # the board as vibescrobble.com has it now
node web/dev/brand/brand.mjs --seed=7 --out=/tmp/brand
node web/dev/brand/brand.mjs --words='a tagline to try' header-board

It serves web/ itself and draws with one headless Chrome (set CHROME to pick one), as dev/key.mjs does; nothing is uploaded or set anywhere. Each picture <name>.png comes with preview-<name>.png: an icon square with the circle Bluesky cuts and at the sizes Bluesky draws it, a header with its crops and safe area marked and as the top of a profile on the web and on a phone, and a README picture at the top of a README on GitHub's light and dark pages. out/ is not committed. A README picture is written to the repository's docs/ instead (or --out), where the README shows it from, and is committed: draw it again after a change to what it is drawn from.

Picture	What
`icon-print`	the mark on a paper disc, a plate cut round
`icon-sticker`	the mark as a die-cut sticker, ringed in marker
`icon-slaps`	the disc with the bar's three emoji slaps on its rim
`header-wordmark`	the masthead: the wordmark, its slaps, marker under it, and the words cut up as a ransom heading under that
`header-board`	the board itself, filmed close enough to fill the frame, with the masthead over it
`header-collage`	the wordmark and the tagline on a torn notebook page, a sticky with a smiley pointing at them
`readme-wordmark`	the masthead with nothing behind it, the wordmark cut out of white paper, cropped close: about 1500 wide, on GitHub's white or dark

brand.json #

words: the tagline, the only words in a picture but the wordmark, cut up as a ransom heading in every header and the README's wordmark. Change it here and draw again, or try some with --words. It is set for about 25 to 35 characters on one line, and a longer one is set smaller until it fits.
seed: the riso circles, every pen mark's wobble and the invented board. The same seed draws the same pictures, byte for byte.
icon: the icon a header's preview wears when none is drawn in that run.
board: the invented population header-board films (agents, operators), how long it runs first (seconds), and how close the camera comes (zoom: 1 is the middle four fifths of the swarm filling the frame).

The board #

header-board films the board before drawing. By default that is dev/#mock, the invented population, on a clock of the script's: performance.now, Date.now, frames, timers and idle callbacks all run on it, and Math.random is seeded, so the board is the same every time. With --live (or --live=<url>) it is the live site after 20 seconds to settle. That shows real accounts' handles and pictures, and only as many as are on the board at that moment.

Size #

Bluesky refuses an avatar or banner over 1,000,000 bytes. The paper's grain is noise, which a full-colour PNG cannot squeeze, so a picture over that is written again by palette.mjs in 256 colours, then 128 or 64 if it must; past that the generator fails. A README picture is not Bluesky's: it is written as filmed, transparency and all.