# DBPA video-call backgrounds

A set of 1920×1080 virtual backgrounds for Zoom / Microsoft Teams, built in the
same visual language as the site (technical/engineering aesthetic, brand fonts,
blueprint palette). The **centre of every frame is kept clear** so the person on
camera is never behind text or graphics.

## The set — 30 images

Naming: `{look}--{layout}--{theme}.png`

| Axis        | Values |
|-------------|--------|
| **look**    | `standard` (light grey, like the OG image) · `blueprint` (deep-navy schematic) |
| **layout**  | `hud` (quiet, minimal frame) · `branded` (wordmark + service ribbon) · `schematic` (full exploded-diagram) |
| **theme**   | `ai-agents` (cyan) · `workflow` (amber) · `software` (green) · `consulting` (magenta) · `brand` (gold, generic) |

So e.g. `blueprint--schematic--ai-agents.png` is the dark, busy, cyan AI-Agents one;
`standard--hud--brand.png` is the light, minimal, generic-gold one.

`_contact-standard.png` / `_contact-blueprint.png` are review grids of all 15 per look.

## Which to use
- **Lighting:** `blueprint` (dark) looks most premium and makes a well-lit face pop,
  but needs decent front lighting. `standard` (light) is safest in any room.
- **Topic:** match the `theme` colour to the call (pitching automation → `workflow`,
  etc.), or just use `brand` (gold) as the everyday default.
- **Density:** `hud` for 1:1 client calls (least distracting), `branded` for most
  meetings, `schematic` for webinars / recorded / keynote moments.

## Using them

**Zoom:** Settings → Background & Effects → `+` → Add Image → pick a PNG.
**Teams:** before/in a call → Effects and avatars → Add new → upload a PNG.

Use a 1920×1080 (16:9) file as-is. Most rooms look best with the matte/no-blur
option. If your platform mirrors your self-view, text reads correctly to *others*
regardless — the mirror only affects your own preview.

## Regenerating / tweaking

The generator lives in `scripts/backgrounds/`:

```bash
# from repo root
node scripts/backgrounds/layouts/branded.mjs      # re-render one layout (10 imgs)
node scripts/backgrounds/layouts/hud.mjs
node scripts/backgrounds/layouts/schematic.mjs
bash scripts/backgrounds/contact-sheet.sh         # rebuild the review grids
```

- Design tokens (colours, themes, looks, brand copy, safe-zone) live in
  `scripts/backgrounds/lib.mjs` — edit there to restyle the whole set.
- Fonts are cached TTFs in `scripts/backgrounds/fonts/`.
- Rendering uses `next/og` (satori) in a standalone node script — no dev server needed.

> These files are deliverables, not part of the site build. Keep or delete the
> `video-backgrounds/` and `scripts/backgrounds/` folders independently of the app.
