lanework/DESIGN/explorations/board-backgrounds.md

Board background image set — exploration notes

Status: sweep 1 + faceted gallery published, awaiting swatch review (2026-08-07). Not a numbered design doc — this is working material for producing a set of bundled background images; the schema and rendering side is already settled in 03-board-ui.md § Styling ▸ Capabilities.

What this is

A set of shippable background images for boards. The app side needs nothing new: background: {image: <path>} relative to the board root, drawn scaled-to-fill and cropped under the transparent title bar with the frosted strip (BoardBackdropImage.swift), decoded at a 3072px ceiling (BoardBackdrop.maximumPixelSize), no in-app editor — the raw file is the escape hatch. So the deliverable is purely the artwork: PNG files generated from procedural recipes.

The model

Every background = base layer × filler layer.

Axes swept or reserved:

• Base: solid · linear gradient (2/3-stop, angle) · radial/corner glow · soft-blob mesh
• Hue strategy: monochrome · analogous · complementary accent · multicolor
• HSB family: pastel · muted/dusty · deep-dark
• Filler shapes: dots · rings · blob chips · capsules · triangles · plus-signs · contour lines · sine bands · grid
• Density sparse→dense; size distribution uniform vs power-law; placement uniform scatter · diagonal band · corner-weighted · grid-jitter
• Filler color: same-hue tint · accent hue · multicolor · alpha-only; opacity whisper 4–10% → visible 15–25%; depth crisp vs gradient-soft, layered sizes

Deliberately left out of sweep 1 (add to surviving families in sweep 2): grain/noise texture, two-layer depth (large blurred behind small crisp), clustered placement, outlined-only variants.

Sweep 1 — the gallery

• Artifact (preview): https://claude.ai/code/artifact/afa8f1d8-ded0-4d7b-9785-f4b7eb4f8008
• Generator source: board-backgrounds-gallery.html (this folder) — single self-contained HTML, all swatches procedural SVG off a seeded PRNG (xmur3 + mulberry32, seeded from the swatch ID string), so IDs are stable references across reloads and rebuilds. To republish after edits: publish this file via the Artifact tool passing the URL above as url to keep the link.
• 96 swatches = 12 families × 8 hues. Hue wheel (shared by all families): clay 8° · amber 38° · olive 80° · forest 140° · teal 175° · sky 215° · iris 262° · rose 335°. IDs are family-NN (aurora-05 = aurora × teal).
• Board overlay toggle draws translucent lane plates + opaque card plates + title strip over every swatch — the judging condition, since real backgrounds sit under exactly that stack (lanes are a translucent quaternary wash, cards opaque plates).

Families (1–9 light, 10–12 dark):

Family	Recipe
whisper	pastel vertical gradient + faint scattered dots — the quietest
confetti	neutral ground + small multicolor shapes (H, H+120, H+240)
aurora	4–6 large soft radial-gradient blobs, mesh look
contours	topographic wavy polylines, mono
drift	diagonal band of −32°-tilted capsules over diagonal gradient
bubbles	power-law circles/rings over corner glow
terrazzo	irregular 5–7-gon stone chips, four colors
graph	24px graph-paper grid + plus-signs + accent dots
waves	6 layered sine dunes toward the bottom
dusk	dark gradient, large glow blobs, horizon ellipse
starfield	tiny stars w/ gradient halos + faint nebulae on dark radial
slate	dark topographic lines + accent dots on flat dark ground

Rendering constraints baked into the generator (keep for sweep 2): no per-swatch SVG filters (all glow via radial gradients fading to alpha 0 — 96 filters would crawl), ≤~120 filler elements per swatch, gradient defs namespaced by swatch ID, light grounds ≥82% lightness / dark ≤20%.

Faceted gallery — user-designed originals (2026-08-07)

Separate from the sweep-1 axes model: patterns designed to the user's own criteria — canvas tiled by shapes, per-shape brightness jitter within a narrow band doing the drawing, base brightness set by light/dark tone. Geometry is random on every render (that's part of the concept), so the gallery has a Reroll button; a swatch ID names the recipe, not a fixed layout.

• Artifact: https://claude.ai/code/artifact/d27ad77f-9298-4cf1-9093-19d13a186752 (republished in place each round)
• Generator source: board-backgrounds-faceted.html (this folder) — same seeded-PRNG + board-overlay-toggle infrastructure as sweep 1; seed = swatch ID + generation counter.
• facets: grid-jittered dot scatter over an extended canvas → Bowyer–Watson Delaunay triangulation, each triangle stroked with its own fill color to kill antialiasing seams. Reference image: low-poly example on the Redesign board.
• bubbles: same color logic on ~64 opaque circles, power-law radii, drawn large-first. Set aside after round 1 ("we'll need more work on that") — round-1 recipe kept in git history of the generator file.

Round 2 (current, facets only) — axes per the user: vertex count, color count, tone, saturation; brightness stays the narrow in-image jitter. 216 swatches = 3 color strategies × 2 tones × 4 hues × 3 saturations × 3 densities. Hue wheel narrowed to 4 representatives (amber/forest/sky/rose) to keep the cross reviewable; full wheel returns for finals.

• Densities (columns): coarse 5×3 cells ≈20 triangles · medium 9×6 ≈97 · fine 14×9 ≈230.
• Color strategies (sections): mono · duo = complement H+180° weighted 65/35 · trio = triad H±120° weighted 50/30/20, hue picked per triangle.
• IDs facets-<hue>-<strategy>-<density>-<tone><sat>, e.g. facets-sk-duo-f-l2 = sky duo fine light mid.
• Jitters: hue ±3°, sat ±15%, brightness ±4.5 L around tone base (light 85–90, dark 17–21, rich rows get slight headroom shifts).

Shipped in-app (2026-08-07): the recipe is live in the board popover's Background tab (03-board-ui.md § Board popover ▸ Background tab) — Swift port in Kanban/UI/Board/Backgrounds/, rendered to a static facets.png at pick time (never a live view — the perf/sync ruling). One deliberate deviation from the gallery: the scatter grid gained a sacrificial boundary ring per density (coarse 7×5 @ margin 0.305, medium 10×7 @ 0.14, fine 15×10 @ 0.12 — interior cell size unchanged) because the gallery's fixed 0.075 margin let the ground notch the frame edge (coarse by up to 0.163 of the width — visible flat borders on the reviewed coarse swatches; medium 0.044, fine 0.004). Full-bleed coverage is now a tested invariant (margin ≥ 0.92 × cell both axes). Packaging question from sweep 1 is thereby answered for facets: generated on demand, not bundled.

Next steps

1. Review with overlay on; pick surviving families / specific IDs and direction tweaks ("aurora but duskier", "contours denser").
2. Sweep 2: deepen winners, add the reserved axes (grain, two-layer depth, clusters, outlines).
3. Settle final recipes → render real PNGs at 3072px long edge (canvas render of the same recipes, or a small script) → decide packaging (bundled set offered how? templates carry them? drag-in only?) — packaging is an open question, nothing ruled yet.