From ccf55f1d498c2626e63bcd4171a0fd00e04181a5 Mon Sep 17 00:00:00 2001 From: rzen Date: Fri, 7 Aug 2026 11:24:10 -0400 Subject: [PATCH] =?UTF-8?q?The=20backgrounds=20get=20a=20swatch=20gallery?= =?UTF-8?q?=20=E2=80=94=20sweep=20one=20of=20the=20bundled=20artwork=20exp?= =?UTF-8?q?loration?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit DESIGN/explorations/board-backgrounds: working material, not a numbered design doc — the app side of background images is settled, so the deliverable is purely artwork. The model is base layer × filler layer, swept across hue strategy, HSB family, filler shape, density, placement and opacity; the gallery is one self-contained HTML generator, every swatch procedural SVG off a seeded PRNG so swatch IDs stay stable references across reloads. Status: first sweep published, awaiting review. Claude-Session: https://claude.ai/code/session_014PtZdPwqZuqEDLc6wZMtEy --- .../board-backgrounds-gallery.html | 755 ++++++++++++++++++ DESIGN/explorations/board-backgrounds.md | 54 ++ 2 files changed, 809 insertions(+) create mode 100644 DESIGN/explorations/board-backgrounds-gallery.html create mode 100644 DESIGN/explorations/board-backgrounds.md diff --git a/DESIGN/explorations/board-backgrounds-gallery.html b/DESIGN/explorations/board-backgrounds-gallery.html new file mode 100644 index 0000000..7e78685 --- /dev/null +++ b/DESIGN/explorations/board-backgrounds-gallery.html @@ -0,0 +1,755 @@ +Board Background Swatches + +
+
+

Board Background Swatches

+

96 procedural candidates — base layer × filler layer. Toggle the board overlay to judge them under content.

+
+ +
+
+ + + + + + + + + + + + + +
+
+ + + +
+ +
+ +
+

Axes

+
+
Base
solid · linear 2/3-stop (angle) · radial/corner glow · soft-blob mesh
+
Hue strategy
mono · analogous · complementary accent · multicolor
+
HSB family
pastel · muted · deep/dark
+
Filler shape
dots · rings · blobs/chips · capsules · triangles · plus-signs · contour lines · sine bands · grid
+
Density
sparse → dense
+
Size
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
+
+
+ +
+

Whisper

+

A vertical pastel gradient ground carries roughly sixty faint dots at 6–10% opacity — the quietest family in the set.

+
+
+ +
+

Confetti

+

A near-neutral ground is scattered with about seventy tiny circles, rotated squares and triangles across three related hues.

+
+
+ +
+

Aurora

+

A flat pastel ground holds four to six large soft-edged gradient blobs that overlap and drift toward one corner, mesh-gradient style.

+
+
+ +
+

Contours

+

A flat ground is crossed by fourteen thin wavy horizontal lines built from summed sine harmonics, evoking topographic contours.

+
+
+ +
+

Drift

+

A diagonal two-tone gradient ground carries rotated capsule shapes rejection-sampled into a diagonal band across the canvas.

+
+
+ +
+

Bubbles

+

A top-left radial gradient ground carries a power-law scatter of circles — a few large, more medium, many small — mixing filled discs with stroked rings.

+
+
+ +
+

Terrazzo

+

A near-neutral ground is covered in about fifty-five small irregular polygon chips across four related colors, like stone terrazzo.

+
+
+ +
+

Graph

+

A pale ground is ruled into a 24px grid, with a few plus-mark intersections and small accent dots — graph paper.

+
+
+ +
+

Waves

+

A horizontal gradient ground is layered with six translucent sine-wave bands, phase-shifted and stacked toward the bottom third like dunes.

+
+
+ +
+

Dusk

+

A deep vertical gradient ground holds large soft gradient blobs and a faint horizon glow low in the frame — moody, no small shapes.

+
+
+ +
+

Starfield

+

A dark radial ground is scattered with about ninety tiny stars, a handful haloed and brighter, plus two faint nebula blobs.

+
+
+ +
+

Slate

+

A flat dark ground carries the same wavy contour lines as Contours, with small accent dots resting on the lines — dark topographic.

+
+
+
+ + + + diff --git a/DESIGN/explorations/board-backgrounds.md b/DESIGN/explorations/board-backgrounds.md new file mode 100644 index 0000000..062614e --- /dev/null +++ b/DESIGN/explorations/board-backgrounds.md @@ -0,0 +1,54 @@ +# Board background image set — exploration notes + +Status: **first sweep 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: }` 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%. + +## 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.