rzen
ccf55f1d49
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
4.3 KiB
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: <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 asurlto 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
- Review with overlay on; pick surviving families / specific IDs and direction tweaks ("aurora but duskier", "contours denser").
- Sweep 2: deepen winners, add the reserved axes (grain, two-layer depth, clusters, outlines).
- 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.