@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/backgrounds/effects/particle/particleOrb.js

@@ -0,0 +1,95 @@
+import { round } from "../../runtime/rng.js";
+import { defineCssEffect, duration, liteMeta } from "../define.js";
+import { paletteRef, paletteVars } from "../palette.js";
+export const PARTICLE_ORB_META = {
+    id: "particle-orb",
+    label: "Particle Orb CSS",
+    category: "particle",
+    family: "css",
+    cost: { kb: "5–30 KB generated CSS", cpu: 2, gpu: 3 },
+    tier: "mid",
+    note: "Each particle is a DOM element; a canvas would be lighter.",
+};
+const PARTICLE_ORB_LITE_META = liteMeta(PARTICLE_ORB_META, "A still dotted sphere with a soft glow: two gradients, no particles.");
+/** Golden angle in degrees: spreads points evenly over a sphere (Fibonacci sphere). */
+const GOLDEN = 137.50776;
+// Every particle carries its own static 3D transform: turn to its longitude,
+// tilt to its latitude, push out by the radius. ONE parent (`orb`, a 3D stage
+// inside the layer, so the layer's overflow clipping does not flatten it)
+// spins the whole sphere: rotations about the same axis add up, so this looks
+// exactly like every dot turning its own longitude, but Chrome restyles one
+// animated element per frame instead of one per dot.
+const CSS = `@layer components {
+  :where([data-sx-bg="particle-orb"]) {
+    perspective: 900px;
+  }
+  :where([data-sx-bg="particle-orb"] [data-sx-bg-part="orb"]) {
+    position: absolute;
+    inset-inline-start: 50%;
+    inset-block-start: 50%;
+    transform-style: preserve-3d;
+    animation: sx-bg-orb ${duration("var(--sx-bg-d)")} linear infinite;
+  }
+  :where([data-sx-bg="particle-orb"] [data-sx-bg-part="dot"]) {
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    inline-size: var(--sx-bg-dot);
+    aspect-ratio: 1;
+    margin-inline-start: calc(var(--sx-bg-dot) / -2);
+    margin-block-start: calc(var(--sx-bg-dot) / -2);
+    border-radius: 50%;
+    background: var(--c);
+    transform: rotateY(var(--a)) rotateX(var(--b)) translateZ(var(--sx-bg-r));
+  }
+  @keyframes sx-bg-orb {
+    to { transform: rotateY(360deg); }
+  }
+}`;
+const LITE_CSS = `@layer components {
+  :where([data-sx-bg="particle-orb-lite"])::before {
+    content: "";
+    position: absolute;
+    inset-inline-start: 50%;
+    inset-block-start: 50%;
+    inline-size: calc(var(--sx-bg-r) * 2);
+    aspect-ratio: 1;
+    margin-inline-start: calc(var(--sx-bg-r) * -1);
+    margin-block-start: calc(var(--sx-bg-r) * -1);
+    border-radius: 50%;
+    background:
+      radial-gradient(circle at 38% 34%, color-mix(in oklab, var(--sx-bg-c1) 45%, transparent), transparent 65%),
+      radial-gradient(circle, var(--sx-bg-c1) 1px, transparent 1.6px) center / 9px 9px;
+    mask-image: radial-gradient(circle closest-side, black 55%, transparent);
+  }
+}`;
+/** A sphere of particles slowly spinning. */
+export function particleOrb(options = {}) {
+    const palette = paletteVars(options.colors);
+    const count = Math.min(400, Math.max(20, Math.round(options.count ?? 160)));
+    const dots = [];
+    for (let i = 0; i < count; i++) {
+        // y from +1 to -1, evenly spaced; latitude = asin(y)
+        const y = 1 - (2 * (i + 0.5)) / count;
+        dots.push({
+            part: "dot",
+            vars: {
+                "--a": `${round((i * GOLDEN) % 360, 1)}deg`,
+                "--b": `${round((Math.asin(y) * 180) / Math.PI, 1)}deg`,
+                "--c": paletteRef(i, palette.count),
+            },
+        });
+    }
+    const vars = {
+        ...palette.vars,
+        "--sx-bg-r": `${options.radius ?? 32}cqmin`,
+        "--sx-bg-dot": `${options.dot ?? 3}px`,
+        "--sx-bg-d": "24s",
+    };
+    const nodes = [{ part: "orb", vars: {}, children: dots }];
+    return defineCssEffect(PARTICLE_ORB_META, CSS, options, {
+        vars,
+        nodes,
+        fallback: defineCssEffect(PARTICLE_ORB_LITE_META, LITE_CSS, options, { vars }),
+    });
+}

package/dist/backgrounds/effects/particle/particleOrb.schema.d.ts

@@ -0,0 +1 @@
+export declare const PARTICLE_ORB_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/backgrounds/effects/particle/particleOrb.schema.js

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, colorsField } from "../../../schema/common.js";
+export const PARTICLE_ORB_SCHEMA = defineSchema()({
+    id: "particle-orb",
+    family: "background",
+    factory: "particleOrb",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        count: { kind: "integer", label: "Particles", min: 20, max: 400, default: 160 },
+        radius: { kind: "number", label: "Orb radius", min: 5, max: 50, step: 1, unit: "%", default: 32, help: "Of the layer's shorter side." },
+        dot: { kind: "number", label: "Particle size", min: 1, max: 10, step: 0.5, unit: "px", default: 3 },
+        colors: { ...colorsField(["var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-accent) 55%, var(--color-sx-primary))", "color-mix(in oklab, var(--color-sx-accent) 60%, var(--color-sx-secondary))"], 1, 6) },
+    },
+});

package/dist/backgrounds/effects/particle/particles.d.ts

@@ -0,0 +1,23 @@
+import type { CanvasEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const PARTICLES_META: EffectMeta;
+export interface ParticlesOptions extends LayerOptions {
+    /** Number of particles; touch screens are capped at 150. */
+    readonly count?: number;
+    readonly speed?: number;
+    /** Radius range in px. */
+    readonly size?: readonly [min: number, max: number];
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+export interface Particle {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    r: number;
+    alpha: number;
+}
+/** Moves a particle and wraps it around the edges (with its radius as margin). */
+export declare function drift(p: Particle, seconds: number, width: number, height: number): void;
+/** A calm field of small particles drifting in every direction. */
+export declare function particles(options?: ParticlesOptions): CanvasEffect;

package/dist/backgrounds/effects/particle/particles.js

@@ -0,0 +1,63 @@
+import { defineCanvasEffect } from "../define.js";
+import { budget, paint, rand, TAU } from "../canvasKit.js";
+export const PARTICLES_META = {
+    id: "particles",
+    label: "Minimalist Canvas Animated Particle",
+    category: "particle",
+    family: "canvas",
+    cost: { kb: "2–4 KB", cpu: 2, gpu: 1 },
+    tier: "all",
+    note: "Keep under ~150 particles on phones.",
+};
+/** Moves a particle and wraps it around the edges (with its radius as margin). */
+export function drift(p, seconds, width, height) {
+    p.x += p.vx * seconds;
+    p.y += p.vy * seconds;
+    if (p.x < -p.r)
+        p.x += width + p.r * 2;
+    else if (p.x > width + p.r)
+        p.x -= width + p.r * 2;
+    if (p.y < -p.r)
+        p.y += height + p.r * 2;
+    else if (p.y > height + p.r)
+        p.y -= height + p.r * 2;
+}
+function program(count, speed, size) {
+    return {
+        init(env, random) {
+            const n = budget(count, 90, 400, 150, env);
+            const particles = Array.from({ length: n }, () => {
+                const angle = random() * TAU;
+                const v = rand(random, 6, 22) * speed;
+                return {
+                    x: random() * env.width,
+                    y: random() * env.height,
+                    vx: Math.cos(angle) * v,
+                    vy: Math.sin(angle) * v,
+                    r: rand(random, size[0], size[1]),
+                    alpha: rand(random, 0.35, 0.9),
+                };
+            });
+            return { particles };
+        },
+        step(state, deltaMs, _pointer, env) {
+            for (const p of state.particles)
+                drift(p, deltaMs / 1000, env.width, env.height);
+        },
+        draw(ctx, state, env) {
+            ctx.clearRect(0, 0, env.width, env.height);
+            state.particles.forEach((p, i) => {
+                ctx.fillStyle = paint(env, i, p.alpha);
+                ctx.beginPath();
+                ctx.arc(p.x, p.y, p.r, 0, TAU);
+                ctx.fill();
+            });
+        },
+    };
+}
+/** A calm field of small particles drifting in every direction. */
+export function particles(options = {}) {
+    return defineCanvasEffect(PARTICLES_META, program(options.count, options.speed ?? 1, options.size ?? [0.8, 2.4]), options, {
+        colors: options.colors ?? ["var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-muted) 70%, transparent)"],
+    });
+}

package/dist/backgrounds/effects/particle/particles.schema.d.ts

@@ -0,0 +1 @@
+export declare const PARTICLES_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/backgrounds/effects/particle/particles.schema.js

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { colorsField, layerFields, seedField } from "../../../schema/common.js";
+export const PARTICLES_SCHEMA = defineSchema()({
+    id: "particles",
+    family: "background",
+    factory: "particles",
+    fields: {
+        ...layerFields(),
+        count: { kind: "integer", label: "Particles", min: 10, max: 400, autoValue: 90, autoNote: "90, at most 150 on touch screens" },
+        speed: { kind: "number", label: "Speed", min: 0, max: 4, step: 0.05, default: 1 },
+        size: { kind: "range", label: "Radius", min: 0.2, max: 10, step: 0.1, unit: "px", default: [0.8, 2.4] },
+        colors: colorsField(["var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-muted) 70%, transparent)"]),
+        seed: seedField(1),
+    },
+});

package/dist/backgrounds/effects/particle/starfield.d.ts

@@ -0,0 +1,12 @@
+import type { CanvasEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const STARFIELD_META: EffectMeta;
+export interface StarfieldOptions extends LayerOptions {
+    /** Number of stars; touch screens are capped at 220. */
+    readonly count?: number;
+    /** 1 = cruising, 4+ = hyperspeed (long streaks). */
+    readonly warp?: number;
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** Stars rushing toward you; turn up `warp` for hyperspeed streaks. */
+export declare function starfield(options?: StarfieldOptions): CanvasEffect;

package/dist/backgrounds/effects/particle/starfield.js

@@ -0,0 +1,88 @@
+import { defineCanvasEffect, defineCssEffect, liteMeta } from "../define.js";
+import { budget, fadeTrail, paint, rand } from "../canvasKit.js";
+export const STARFIELD_META = {
+    id: "starfield",
+    label: "Starfield / hyperspeed warp",
+    category: "particle",
+    family: "canvas",
+    cost: { kb: "3 KB canvas / ~200 KB Three.js", cpu: 2, gpu: 2 },
+    tier: "mid",
+    note: "Canvas version runs on all devices.",
+};
+const STARFIELD_LITE_META = liteMeta({ ...STARFIELD_META, family: "css" }, "Still stars: three dot screens at uneven spacing, no motion.");
+const NEAR = 0.04;
+function project(s, width, height) {
+    const f = Math.min(width, height) * 0.5;
+    return { x: width / 2 + (s.x / s.z) * f, y: height / 2 + (s.y / s.z) * f };
+}
+function reset(s, random, width, height) {
+    s.x = rand(random, -1, 1) * (width / Math.min(width, height));
+    s.y = rand(random, -1, 1) * (height / Math.min(width, height));
+    s.z = rand(random, 0.6, 1);
+    const p = project(s, width, height);
+    s.px = p.x;
+    s.py = p.y;
+}
+// Stars fly toward the camera. Each frame draws a line from where a star was
+// to where it is now, so speed shows as streak length; trails fade to
+// transparent, so the page background shows through.
+function program(count, warp) {
+    return {
+        init(env, random) {
+            const n = budget(count, 420, 1200, 220, env);
+            const stars = Array.from({ length: n }, () => {
+                const s = { x: 0, y: 0, z: 1, px: 0, py: 0 };
+                reset(s, random, env.width, env.height);
+                s.z = rand(random, NEAR, 1); // spread the first frame through the depth
+                const p = project(s, env.width, env.height);
+                s.px = p.x;
+                s.py = p.y;
+                return s;
+            });
+            return { random, stars };
+        },
+        step(state, deltaMs, _pointer, env) {
+            const dz = (deltaMs / 1000) * 0.18 * warp;
+            for (const s of state.stars) {
+                const before = project(s, env.width, env.height);
+                s.px = before.x;
+                s.py = before.y;
+                s.z -= dz;
+                const now = project(s, env.width, env.height);
+                const off = now.x < -50 || now.y < -50 || now.x > env.width + 50 || now.y > env.height + 50;
+                if (s.z <= NEAR || off)
+                    reset(s, state.random, env.width, env.height);
+            }
+        },
+        draw(ctx, state, env) {
+            fadeTrail(ctx, env, 0.35);
+            ctx.lineCap = "round";
+            state.stars.forEach((s, i) => {
+                const p = project(s, env.width, env.height);
+                const near = 1 - s.z;
+                ctx.strokeStyle = paint(env, i, 0.25 + near * 0.75);
+                ctx.lineWidth = 0.4 + near * 2;
+                ctx.beginPath();
+                ctx.moveTo(s.px, s.py);
+                ctx.lineTo(p.x, p.y);
+                ctx.stroke();
+            });
+        },
+    };
+}
+const LITE_CSS = `@layer components {
+  :where([data-sx-bg="starfield-lite"]) {
+    background:
+      radial-gradient(circle, var(--sx-bg-star) 0 1px, transparent 1.5px) 0 0 / 97px 89px,
+      radial-gradient(circle, var(--sx-bg-star) 0 0.8px, transparent 1.3px) 31px 47px / 61px 71px,
+      radial-gradient(circle, color-mix(in oklab, var(--sx-bg-star) 60%, transparent) 0 1.4px, transparent 2px) 13px 7px / 151px 131px;
+  }
+}`;
+/** Stars rushing toward you; turn up `warp` for hyperspeed streaks. */
+export function starfield(options = {}) {
+    const colors = options.colors ?? ["color-mix(in oklab, var(--color-sx-ink) 85%, transparent)", "var(--color-sx-accent)"];
+    return defineCanvasEffect(STARFIELD_META, program(options.count, options.warp ?? 1.5), options, {
+        colors,
+        fallback: defineCssEffect(STARFIELD_LITE_META, LITE_CSS, options, { vars: { "--sx-bg-star": colors[0] ?? "currentColor" } }),
+    });
+}

package/dist/backgrounds/effects/particle/starfield.schema.d.ts

@@ -0,0 +1 @@
+export declare const STARFIELD_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/backgrounds/effects/particle/starfield.schema.js

@@ -0,0 +1,14 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, seedField, colorsField } from "../../../schema/common.js";
+export const STARFIELD_SCHEMA = defineSchema()({
+    id: "starfield",
+    family: "background",
+    factory: "starfield",
+    fields: {
+        ...layerFields(),
+        count: { kind: "integer", label: "Stars", min: 50, max: 800, autoValue: 300, autoNote: "fits the screen; at most 220 on touch" },
+        warp: { kind: "number", label: "Warp", min: 0.2, max: 8, step: 0.1, default: 1.5, help: "1 cruising, 4+ hyperspeed." },
+        colors: { ...colorsField(["color-mix(in oklab, var(--color-sx-ink) 85%, transparent)", "var(--color-sx-accent)"], 1, 6) },
+        seed: seedField(1),
+    },
+});

package/dist/backgrounds/effects/pattern/circlesPattern.schema.d.ts

@@ -0,0 +1 @@
+export declare const CIRCLES_PATTERN_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/backgrounds/effects/pattern/circlesPattern.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields } from "../../../schema/common.js";
+export const CIRCLES_PATTERN_SCHEMA = defineSchema()({
+    id: "circles-pattern",
+    family: "background",
+    factory: "circlesPattern",
+    fields: {
+        ...layerFields(),
+        size: { kind: "number", label: "Tile size", min: 12, max: 160, step: 1, unit: "px", default: 48 },
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-accent)", help: "The pattern derives its shades from it." },
+    },
+});

package/dist/backgrounds/effects/pattern/diamondsPattern.schema.d.ts

@@ -0,0 +1 @@
+export declare const DIAMONDS_PATTERN_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/backgrounds/effects/pattern/diamondsPattern.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields } from "../../../schema/common.js";
+export const DIAMONDS_PATTERN_SCHEMA = defineSchema()({
+    id: "diamonds-pattern",
+    family: "background",
+    factory: "diamondsPattern",
+    fields: {
+        ...layerFields({ opacity: 0.55 }),
+        size: { kind: "number", label: "Tile size", min: 12, max: 160, step: 1, unit: "px", default: 40 },
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-accent)", help: "The pattern derives its shades from it." },
+    },
+});

package/dist/backgrounds/effects/pattern/leatherPattern.schema.d.ts

@@ -0,0 +1 @@
+export declare const LEATHER_PATTERN_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/backgrounds/effects/pattern/leatherPattern.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields } from "../../../schema/common.js";
+export const LEATHER_PATTERN_SCHEMA = defineSchema()({
+    id: "leather-pattern",
+    family: "background",
+    factory: "leatherPattern",
+    fields: {
+        ...layerFields(),
+        size: { kind: "number", label: "Tile size", min: 12, max: 160, step: 1, unit: "px", default: 44 },
+        color: { kind: "color", label: "Colour", default: "color-mix(in oklab, var(--color-sx-accent) 45%, black)", help: "The pattern derives its shades from it." },
+    },
+});

package/dist/backgrounds/effects/pattern/patterns.d.ts

@@ -0,0 +1,22 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const CIRCLES_PATTERN_META: EffectMeta;
+export declare const DIAMONDS_PATTERN_META: EffectMeta;
+export declare const SCALES_PATTERN_META: EffectMeta;
+export declare const LEATHER_PATTERN_META: EffectMeta;
+export declare const STRANGE_PATTERN_META: EffectMeta;
+export interface PatternOptions extends LayerOptions {
+    /** Tile size in px. */
+    readonly size?: number;
+    /** The pattern's main colour; each pattern derives its shades from it. */
+    readonly color?: string;
+}
+/** Overlapping rings in two offset rows. */
+export declare function circlesPattern(options?: PatternOptions): CssEffect;
+/** Lit-and-shaded pyramid studs that read as 3D diamonds. */
+export declare function diamondsPattern(options?: PatternOptions): CssEffect;
+/** Overlapping fish scales. */
+export declare function scalesPattern(options?: PatternOptions): CssEffect;
+/** Tufted leather upholstery, like a Chesterfield sofa. */
+export declare function leatherPattern(options?: PatternOptions): CssEffect;
+/** Winding Truchet-tile paths: an odd, maze-like weave. */
+export declare function strangePattern(options?: PatternOptions): CssEffect;

package/dist/backgrounds/effects/pattern/patterns.js

@@ -0,0 +1,120 @@
+import { defineCssEffect } from "../define.js";
+// Five static tessellated patterns. Pure gradients: they paint once and cost
+// nothing after that. Each takes a tile `size` and colours that default to the
+// theme. They tile from the layer's top-left corner, so they do not mirror in
+// RTL (a mirrored tiling would look the same anyway).
+const pattern = (id, label, note) => ({
+    id,
+    label,
+    category: "pattern",
+    family: "css",
+    cost: { kb: "<1 KB", cpu: 1, gpu: 1 },
+    tier: "all",
+    ...(note ? { note } : {}),
+});
+export const CIRCLES_PATTERN_META = pattern("circles-pattern", "CSS-Only Pattern: Circles", "Static patterns cost almost nothing after the first paint.");
+export const DIAMONDS_PATTERN_META = pattern("diamonds-pattern", "3D Shadowed Diamonds Tessellated");
+export const SCALES_PATTERN_META = pattern("scales-pattern", "Pure CSS Purple Scales Tessellated Pattern");
+export const LEATHER_PATTERN_META = pattern("leather-pattern", "Pure CSS Leather Sofa Tessellated Pattern", "Avoid background-attachment: fixed with it; that repaints on every scroll.");
+export const STRANGE_PATTERN_META = pattern("strange-pattern", "A Strange CSS Only Pattern");
+const tile = (options, fallback) => ({
+    "--sx-bg-s": `${options.size ?? fallback}px`,
+    "--sx-bg-color": options.color ?? "var(--color-sx-accent)",
+});
+// ---------------------------------------------------------------------------
+const CIRCLES_CSS = `@layer components {
+  :where([data-sx-bg="circles-pattern"]) {
+    --sx-bg-ring: color-mix(in oklab, var(--sx-bg-color) 45%, transparent);
+    background:
+      radial-gradient(circle closest-side, transparent 0 56%, var(--sx-bg-ring) 56% 62%, transparent 62% 84%, var(--sx-bg-ring) 84% 90%, transparent 90%) 0 0 / var(--sx-bg-s) var(--sx-bg-s),
+      radial-gradient(circle closest-side, transparent 0 56%, var(--sx-bg-ring) 56% 62%, transparent 62% 84%, var(--sx-bg-ring) 84% 90%, transparent 90%) calc(var(--sx-bg-s) / 2) calc(var(--sx-bg-s) / 2) / var(--sx-bg-s) var(--sx-bg-s);
+  }
+}`;
+/** Overlapping rings in two offset rows. */
+export function circlesPattern(options = {}) {
+    return defineCssEffect(CIRCLES_PATTERN_META, CIRCLES_CSS, options, { vars: tile(options, 48) });
+}
+// ---------------------------------------------------------------------------
+// A conic gradient that starts at 45° splits each tile into four triangles
+// meeting in the middle; lit top, shaded bottom, two mid sides = a pyramid
+// stud. Rows of studs read as shadowed diamonds.
+const DIAMONDS_CSS = `@layer components {
+  :where([data-sx-bg="diamonds-pattern"]) {
+    background: conic-gradient(
+      from -45deg,
+      color-mix(in oklab, var(--sx-bg-color) 35%, white) 0 25%,
+      color-mix(in oklab, var(--sx-bg-color) 80%, white) 0 50%,
+      color-mix(in oklab, var(--sx-bg-color) 65%, black) 0 75%,
+      var(--sx-bg-color) 0
+    ) 0 0 / var(--sx-bg-s) var(--sx-bg-s);
+  }
+}`;
+/** Lit-and-shaded pyramid studs that read as 3D diamonds. */
+export function diamondsPattern(options = {}) {
+    return defineCssEffect(DIAMONDS_PATTERN_META, DIAMONDS_CSS, { opacity: 0.55, ...options }, { vars: tile(options, 40) });
+}
+// ---------------------------------------------------------------------------
+// Each tile holds the lower half of a circle hanging from its top edge; a
+// second layer offset by half a tile fills the rows between. The fill colour
+// underneath closes the gaps, so only the scale edges read as lines.
+const SCALES_CSS = `@layer components {
+  :where([data-sx-bg="scales-pattern"]) {
+    --sx-bg-fill: color-mix(in oklab, var(--sx-bg-color) 25%, var(--color-sx-secondary));
+    --sx-bg-edge: color-mix(in oklab, var(--sx-bg-color) 75%, var(--color-sx-primary));
+    --sx-bg-r: calc(var(--sx-bg-s) / 2);
+    background:
+      radial-gradient(circle at 50% 0, var(--sx-bg-fill) 0 calc(var(--sx-bg-r) - 3px), var(--sx-bg-edge) calc(var(--sx-bg-r) - 2px) var(--sx-bg-r), transparent calc(var(--sx-bg-r) + 0.5px)) calc(var(--sx-bg-s) / 2) calc(var(--sx-bg-s) / 2) / var(--sx-bg-s) var(--sx-bg-s),
+      radial-gradient(circle at 50% 0, var(--sx-bg-fill) 0 calc(var(--sx-bg-r) - 3px), var(--sx-bg-edge) calc(var(--sx-bg-r) - 2px) var(--sx-bg-r), transparent calc(var(--sx-bg-r) + 0.5px)) 0 0 / var(--sx-bg-s) var(--sx-bg-s),
+      var(--sx-bg-fill);
+  }
+}`;
+/** Overlapping fish scales. */
+export function scalesPattern(options = {}) {
+    return defineCssEffect(SCALES_PATTERN_META, SCALES_CSS, options, { vars: tile(options, 36) });
+}
+// ---------------------------------------------------------------------------
+// Tufted upholstery. Within each tile, two diagonal gradients run dark at the
+// tile's diagonals and light halfway between: the dark lines are the creases,
+// and where both gradients are light the leather puffs up into a diamond. A
+// button sits at every crease crossing (the tile's corners and centre).
+const LEATHER_CSS = `@layer components {
+  :where([data-sx-bg="leather-pattern"]) {
+    --sx-bg-crease: color-mix(in oklab, black 45%, transparent);
+    --sx-bg-shine: color-mix(in oklab, white 14%, transparent);
+    --sx-bg-fold: var(--sx-bg-crease) 0%, var(--sx-bg-shine) 25%, var(--sx-bg-crease) 50%, var(--sx-bg-shine) 75%, var(--sx-bg-crease) 100%;
+    --sx-bg-button: radial-gradient(circle, color-mix(in oklab, var(--sx-bg-color) 40%, black) 0 2.5px, transparent 3.5px);
+    background:
+      var(--sx-bg-button) 0 0 / var(--sx-bg-s) var(--sx-bg-s),
+      var(--sx-bg-button) calc(var(--sx-bg-s) / 2) calc(var(--sx-bg-s) / 2) / var(--sx-bg-s) var(--sx-bg-s),
+      linear-gradient(45deg, var(--sx-bg-fold)) 0 0 / var(--sx-bg-s) var(--sx-bg-s),
+      linear-gradient(-45deg, var(--sx-bg-fold)) 0 0 / var(--sx-bg-s) var(--sx-bg-s),
+      var(--sx-bg-color);
+  }
+}`;
+/** Tufted leather upholstery, like a Chesterfield sofa. */
+export function leatherPattern(options = {}) {
+    return defineCssEffect(LEATHER_PATTERN_META, LEATHER_CSS, options, {
+        vars: { ...tile(options, 44), "--sx-bg-color": options.color ?? "color-mix(in oklab, var(--color-sx-accent) 45%, black)" },
+    });
+}
+// ---------------------------------------------------------------------------
+// Truchet tiles: two quarter-circle arcs per tile, joining the midpoints of
+// neighbouring edges. Repeated, the arcs link into endless winding paths, with
+// a dot in each of the tile's two empty corners.
+const STRANGE_CSS = `@layer components {
+  :where([data-sx-bg="strange-pattern"]) {
+    --sx-bg-h: calc(var(--sx-bg-s) / 2);
+    --sx-bg-w: calc(var(--sx-bg-s) / 9);
+    --sx-bg-arc: transparent calc(var(--sx-bg-h) - var(--sx-bg-w)), var(--sx-bg-color) calc(var(--sx-bg-h) - var(--sx-bg-w)) var(--sx-bg-h), transparent var(--sx-bg-h);
+    --sx-bg-dot: color-mix(in oklab, var(--sx-bg-color) 50%, transparent) 0 calc(var(--sx-bg-w) * 0.9), transparent calc(var(--sx-bg-w) * 0.9 + 0.5px);
+    background:
+      radial-gradient(circle at 0 0, var(--sx-bg-arc)) 0 0 / var(--sx-bg-s) var(--sx-bg-s),
+      radial-gradient(circle at 100% 100%, var(--sx-bg-arc)) 0 0 / var(--sx-bg-s) var(--sx-bg-s),
+      radial-gradient(circle at 100% 0, var(--sx-bg-dot)) 0 0 / var(--sx-bg-s) var(--sx-bg-s),
+      radial-gradient(circle at 0 100%, var(--sx-bg-dot)) 0 0 / var(--sx-bg-s) var(--sx-bg-s);
+  }
+}`;
+/** Winding Truchet-tile paths: an odd, maze-like weave. */
+export function strangePattern(options = {}) {
+    return defineCssEffect(STRANGE_PATTERN_META, STRANGE_CSS, options, { vars: tile(options, 56) });
+}

package/dist/backgrounds/effects/pattern/scalesPattern.schema.d.ts

@@ -0,0 +1 @@
+export declare const SCALES_PATTERN_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/backgrounds/effects/pattern/scalesPattern.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields } from "../../../schema/common.js";
+export const SCALES_PATTERN_SCHEMA = defineSchema()({
+    id: "scales-pattern",
+    family: "background",
+    factory: "scalesPattern",
+    fields: {
+        ...layerFields(),
+        size: { kind: "number", label: "Tile size", min: 12, max: 160, step: 1, unit: "px", default: 36 },
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-accent)", help: "The pattern derives its shades from it." },
+    },
+});

package/dist/backgrounds/effects/pattern/strangePattern.schema.d.ts

@@ -0,0 +1 @@
+export declare const STRANGE_PATTERN_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/backgrounds/effects/pattern/strangePattern.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields } from "../../../schema/common.js";
+export const STRANGE_PATTERN_SCHEMA = defineSchema()({
+    id: "strange-pattern",
+    family: "background",
+    factory: "strangePattern",
+    fields: {
+        ...layerFields(),
+        size: { kind: "number", label: "Tile size", min: 12, max: 160, step: 1, unit: "px", default: 56 },
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-accent)", help: "The pattern derives its shades from it." },
+    },
+});

package/dist/backgrounds/effects/scroll/cinematicReveal.d.ts

@@ -0,0 +1,13 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const CINEMATIC_REVEAL_META: EffectMeta;
+export interface CinematicRevealOptions extends LayerOptions {
+    /** 1 = the default 2.4 s sequence; 2 = twice as fast. */
+    readonly speed?: number;
+    /** Seconds to wait after coming into view. */
+    readonly delay?: number;
+    /** Colour of the letterbox bars. Default: the page surface. */
+    readonly bars?: string;
+    readonly glow?: string;
+}
+/** Letterbox bars open, a glow settles, a light sweeps across: once, when the section comes into view. */
+export declare function cinematicReveal(options?: CinematicRevealOptions): CssEffect;