Background Controller

1import type { CSSProperties } from "react";
2 
3/**
4 * Pure-CSS pattern backgrounds — tileable wallpapers built entirely from `background-image` layers
5 * (multiple backgrounds + gradients) and SVG `mask-image` silhouettes, all colored off the live
6 * OKLCH tint tokens so they recolor with the theme. No canvas, no rAF loop: each static style is a
7 * single GPU paint; the animated scenes (synthwave / moonrise grid scroll, the Pac-Man chase) move
8 * on compositor-only transforms. Sibling of GradientBackground (CSS gradient) and CanvasBackground
9 * (JS canvas).
10 */
11 
12export type PatternStyle = "dots" | "grid" | "mesh" | "starfield" | "synthwave" | "moonrise" | "chase";
13 
14export const PATTERN_STYLES: PatternStyle[] = [
15  "dots",
16  "grid",
17  "mesh",
18  "starfield",
19  "synthwave",
20  "moonrise",
21  "chase",
22];
23 
24/** Patterns that animate (CSS keyframes) — gates the speed control and shares the --pat-dur/--pat-play pace. */
25export const ANIMATED_PATTERNS = new Set<PatternStyle>([
26  "synthwave",
27  "moonrise",
28  "chase",
29]);
30 
31/** Horizon scenes with a sun/moon disc that can be placed left / center / right. */
32export const DISC_PATTERNS = new Set<PatternStyle>([
33  "synthwave",
34  "moonrise",
35]);
36 
37/** Star-field density — how many of the star field's points render (a "range of stars"). */
38export type PatternDensity = "sparse" | "medium" | "dense";
39export const PATTERN_DENSITIES: PatternDensity[] = [
40  "sparse",
41  "medium",
42  "dense",
43];
44const STAR_COUNT: Record<PatternDensity, number> = {
45  sparse: 16,
46  medium: 33,
47  dense: 50,
48};
49/** Chase pellet-cell scale per density — sparse = larger cells (fewer per screen), dense = smaller (more). */
50const DENSITY_SCALE: Record<PatternDensity, number> = {
51  sparse: 1.4,
52  medium: 1,
53  dense: 0.68,
54};
55/** Tile-size scale for the geometric tiles (dots / grid) — a much airier ladder: the old sparse (1.4)
56 * is the new DENSE, with medium and sparse extrapolated outward on the same ~1.4× step. */
57const TILE_SCALE: Record<PatternDensity, number> = {
58  sparse: 2.8,
59  medium: 2,
60  dense: 1.4,
61};
62 
63// SVG silhouettes as mask sources. White fill + transparent ground works whether the browser samples
64// the mask by alpha or luminance. Wrapped in url(...) after encoding so it's a valid CSS value.
65const svgMask = (body: string, viewBox = "0 0 100 100") =>
66  `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='${viewBox}' fill='#fff'>${body}</svg>`)}")`;
67 
68// … truncated