@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/backgrounds/effects/grid/geometricVectors.schema.js

@@ -0,0 +1,16 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const GEOMETRIC_VECTORS_SCHEMA = defineSchema()({
+    id: "geometric-vectors",
+    family: "background",
+    factory: "geometricVectors",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        count: { kind: "integer", label: "Shapes", min: 4, max: 40, default: 16 },
+        animate: { kind: "boolean", label: "Drift and turn", default: true },
+        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) },
+        line: { kind: "number", label: "Stroke width", min: 0.5, max: 6, step: 0.25, unit: "px", default: 1.25 },
+        seed: seedField(17),
+    },
+});

package/dist/backgrounds/effects/grid/gradientGrid.d.ts

@@ -0,0 +1,15 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const GRADIENT_GRID_META: EffectMeta;
+export interface GradientGridOptions extends LayerOptions {
+    /** Cell size in px. */
+    readonly cell?: number;
+    /** Line width in px. */
+    readonly line?: number;
+    /** Gradient start and end colours. */
+    readonly from?: string;
+    readonly to?: string;
+    /** Gradient angle in degrees. */
+    readonly angle?: number;
+}
+/** Grid lines coloured by a gradient running across the whole layer. */
+export declare function gradientGrid(options?: GradientGridOptions): CssEffect;

package/dist/backgrounds/effects/grid/gradientGrid.js

@@ -0,0 +1,37 @@
+import { defineCssEffect } from "../define.js";
+export const GRADIENT_GRID_META = {
+    id: "gradient-grid",
+    label: "Procedural CSS Gradient Grid Background",
+    category: "grid",
+    family: "css",
+    cost: { kb: "<1 KB", cpu: 1, gpu: 1 },
+    tier: "all",
+    note: "Static grid costs almost nothing after first paint.",
+};
+// The lines are a mask over a gradient fill, so every line picks up the
+// gradient colour under it.
+const CSS = `@layer components {
+  :where([data-sx-bg="gradient-grid"])::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image: linear-gradient(var(--sx-bg-angle), var(--sx-bg-from), var(--sx-bg-to));
+    mask-image:
+      linear-gradient(to right, black var(--sx-bg-line), transparent var(--sx-bg-line)),
+      linear-gradient(to bottom, black var(--sx-bg-line), transparent var(--sx-bg-line));
+    mask-size: var(--sx-bg-cell) var(--sx-bg-cell);
+    mask-position: center;
+  }
+}`;
+/** Grid lines coloured by a gradient running across the whole layer. */
+export function gradientGrid(options = {}) {
+    return defineCssEffect(GRADIENT_GRID_META, CSS, options, {
+        vars: {
+            "--sx-bg-cell": `${options.cell ?? 40}px`,
+            "--sx-bg-line": `${options.line ?? 1}px`,
+            "--sx-bg-angle": `${options.angle ?? 135}deg`,
+            "--sx-bg-from": options.from ?? "var(--color-sx-accent)",
+            "--sx-bg-to": options.to ?? "color-mix(in oklab, var(--color-sx-primary) 35%, transparent)",
+        },
+    });
+}

package/dist/backgrounds/effects/grid/gradientGrid.schema.d.ts

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

package/dist/backgrounds/effects/grid/gradientGrid.schema.js

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields } from "../../../schema/common.js";
+export const GRADIENT_GRID_SCHEMA = defineSchema()({
+    id: "gradient-grid",
+    family: "background",
+    factory: "gradientGrid",
+    fields: {
+        ...layerFields(),
+        cell: { kind: "number", label: "Cell size", min: 8, max: 160, step: 1, unit: "px", default: 40 },
+        line: { kind: "number", label: "Line width", min: 0.5, max: 6, step: 0.5, unit: "px", default: 1 },
+        from: { kind: "color", label: "Gradient start", default: "var(--color-sx-accent)" },
+        to: { kind: "color", label: "Gradient end", default: "color-mix(in oklab, var(--color-sx-primary) 35%, transparent)" },
+        angle: { kind: "number", label: "Gradient angle", min: 0, max: 360, step: 1, unit: "°", default: 135 },
+    },
+});

package/dist/backgrounds/effects/grid/gridHero.d.ts

@@ -0,0 +1,15 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const GRID_HERO_META: EffectMeta;
+export interface GridHeroOptions extends LayerOptions {
+    readonly speed?: number;
+    readonly cell?: number;
+    /** The grid lines. */
+    readonly color?: string;
+    /** The beams of light running along the lines. */
+    readonly beam?: string;
+    /** Number of beams (1–24). */
+    readonly beams?: number;
+    readonly seed?: number;
+}
+/** A grid with beams of light shooting along its lines. */
+export declare function gridHero(options?: GridHeroOptions): CssEffect;

package/dist/backgrounds/effects/grid/gridHero.js

@@ -0,0 +1,75 @@
+import { between, rng, round } from "../../runtime/rng.js";
+import { defineCssEffect, duration } from "../define.js";
+import { gridLinesImage } from "./lines.js";
+export const GRID_HERO_META = {
+    id: "grid-hero",
+    label: "Grid Hero Animated",
+    category: "grid",
+    family: "css",
+    cost: { kb: "2–5 KB", cpu: 1, gpu: 1 },
+    tier: "all",
+    note: "Tech inferred; check the code.",
+};
+// Faint grid lines with short beams of light running along them. Beams sit
+// exactly on line k (k × cell from the top-left), so the layer is pinned to
+// `direction: ltr`: the grid is decoration, and mirroring it would move the
+// lines off the beams.
+const CSS = `@layer components {
+  :where([data-sx-bg="grid-hero"]) {
+    direction: ltr;
+    background-image: ${gridLinesImage("var(--sx-bg-color)", "1px")};
+    background-size: var(--sx-bg-cell) var(--sx-bg-cell);
+  }
+  :where([data-sx-bg="grid-hero"] [data-sx-bg-part="beam-x"]) {
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-start: calc(var(--k) * var(--sx-bg-cell));
+    inline-size: var(--len);
+    block-size: 1px;
+    background: linear-gradient(to right, transparent, var(--sx-bg-beam));
+    animation: sx-bg-beam-x ${duration("var(--d)")} linear var(--delay) infinite;
+  }
+  :where([data-sx-bg="grid-hero"] [data-sx-bg-part="beam-y"]) {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(var(--k) * var(--sx-bg-cell));
+    inline-size: 1px;
+    block-size: var(--len);
+    background: linear-gradient(to bottom, transparent, var(--sx-bg-beam));
+    animation: sx-bg-beam-y ${duration("var(--d)")} linear var(--delay) infinite;
+  }
+  @keyframes sx-bg-beam-x {
+    from { transform: translate3d(-100%, 0, 0); }
+    to { transform: translate3d(110cqw, 0, 0); }
+  }
+  @keyframes sx-bg-beam-y {
+    from { transform: translate3d(0, -100%, 0); }
+    to { transform: translate3d(0, 110cqh, 0); }
+  }
+}`;
+/** A grid with beams of light shooting along its lines. */
+export function gridHero(options = {}) {
+    const r = rng(options.seed ?? 31);
+    const count = Math.min(24, Math.max(1, Math.round(options.beams ?? 12)));
+    const nodes = [];
+    for (let i = 0; i < count; i++) {
+        const d = round(between(r, 4, 9), 1);
+        nodes.push({
+            part: i % 2 === 0 ? "beam-x" : "beam-y",
+            vars: {
+                "--k": Math.floor(between(r, 1, 10)),
+                "--len": `${Math.round(between(r, 80, 200))}px`,
+                "--d": `${d}s`,
+                "--delay": `${-round(between(r, 0, d), 1)}s`,
+            },
+        });
+    }
+    return defineCssEffect(GRID_HERO_META, CSS, options, {
+        vars: {
+            "--sx-bg-cell": `${options.cell ?? 56}px`,
+            "--sx-bg-color": options.color ?? "color-mix(in oklab, var(--color-sx-muted) 20%, transparent)",
+            "--sx-bg-beam": options.beam ?? "var(--color-sx-accent)",
+        },
+        nodes,
+    });
+}

package/dist/backgrounds/effects/grid/gridHero.schema.d.ts

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

package/dist/backgrounds/effects/grid/gridHero.schema.js

@@ -0,0 +1,16 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField } from "../../../schema/common.js";
+export const GRID_HERO_SCHEMA = defineSchema()({
+    id: "grid-hero",
+    family: "background",
+    factory: "gridHero",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        cell: { kind: "number", label: "Cell size", min: 16, max: 160, step: 1, unit: "px", default: 56 },
+        color: { kind: "color", label: "Lines", default: "color-mix(in oklab, var(--color-sx-muted) 20%, transparent)" },
+        beam: { kind: "color", label: "Beams", default: "var(--color-sx-accent)" },
+        beams: { kind: "integer", label: "Beams", min: 1, max: 24, default: 12 },
+        seed: seedField(31),
+    },
+});

package/dist/backgrounds/effects/grid/gridHover.d.ts

@@ -0,0 +1,16 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const GRID_HOVER_META: EffectMeta;
+export interface GridHoverOptions extends LayerOptions {
+    readonly cell?: number;
+    readonly line?: number;
+    /** The faint resting grid. */
+    readonly color?: string;
+    /** The lit grid around the pointer. */
+    readonly glow?: string;
+    /** Reveal radius in px. */
+    readonly radius?: number;
+    /** 0–1, how much of the lit grid shows before the pointer arrives (and on touch). */
+    readonly idle?: number;
+}
+/** A faint grid that lights up around the cursor. */
+export declare function gridHover(options?: GridHoverOptions): CssEffect;

package/dist/backgrounds/effects/grid/gridHover.js

@@ -0,0 +1,46 @@
+import { defineCssEffect } from "../define.js";
+import { gridLinesImage } from "./lines.js";
+export const GRID_HOVER_META = {
+    id: "grid-hover",
+    label: "Grid Lines Hover Effect",
+    category: "grid",
+    family: "css",
+    cost: { kb: "1–2 KB", cpu: 1, gpu: 1 },
+    tier: "all",
+    needs: { pointer: true },
+    note: "Only moves when the mouse moves.",
+};
+// A faint grid, and a bright copy of it masked to a circle around the pointer.
+// The mask moves only when the runtime writes a new pointer position.
+const CSS = `@layer components {
+  :where([data-sx-bg="grid-hover"]) {
+    background-image: ${gridLinesImage("var(--sx-bg-color)", "var(--sx-bg-line)")};
+    background-size: var(--sx-bg-cell) var(--sx-bg-cell);
+  }
+  :where([data-sx-bg="grid-hover"])::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image: ${gridLinesImage("var(--sx-bg-glow)", "var(--sx-bg-line)")};
+    background-size: var(--sx-bg-cell) var(--sx-bg-cell);
+    mask-image: radial-gradient(circle var(--sx-bg-radius) at var(--sx-pointer-x, 50%) var(--sx-pointer-y, 50%), black, transparent);
+    opacity: var(--sx-bg-idle);
+    transition: opacity 300ms ease;
+  }
+  :where([data-sx-pointer="in"] [data-sx-bg="grid-hover"])::before {
+    opacity: 1;
+  }
+}`;
+/** A faint grid that lights up around the cursor. */
+export function gridHover(options = {}) {
+    return defineCssEffect(GRID_HOVER_META, CSS, options, {
+        vars: {
+            "--sx-bg-cell": `${options.cell ?? 44}px`,
+            "--sx-bg-line": `${options.line ?? 1}px`,
+            "--sx-bg-color": options.color ?? "color-mix(in oklab, var(--color-sx-muted) 18%, transparent)",
+            "--sx-bg-glow": options.glow ?? "var(--color-sx-accent)",
+            "--sx-bg-radius": `${options.radius ?? 180}px`,
+            "--sx-bg-idle": options.idle ?? 0.35,
+        },
+    });
+}

package/dist/backgrounds/effects/grid/gridHover.schema.d.ts

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

package/dist/backgrounds/effects/grid/gridHover.schema.js

@@ -0,0 +1,16 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields } from "../../../schema/common.js";
+export const GRID_HOVER_SCHEMA = defineSchema()({
+    id: "grid-hover",
+    family: "background",
+    factory: "gridHover",
+    fields: {
+        ...layerFields(),
+        cell: { kind: "number", label: "Cell size", min: 12, max: 160, step: 1, unit: "px", default: 44 },
+        line: { kind: "number", label: "Line width", min: 0.5, max: 6, step: 0.5, unit: "px", default: 1 },
+        color: { kind: "color", label: "Resting grid", default: "color-mix(in oklab, var(--color-sx-muted) 18%, transparent)" },
+        glow: { kind: "color", label: "Lit grid", default: "var(--color-sx-accent)" },
+        radius: { kind: "number", label: "Reveal radius", min: 40, max: 600, step: 5, unit: "px", default: 180 },
+        idle: { kind: "number", label: "Shown before the pointer", min: 0, max: 1, step: 0.01, default: 0.35 },
+    },
+});

package/dist/backgrounds/effects/grid/layeredGridCards.d.ts

@@ -0,0 +1,18 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const LAYERED_GRID_CARDS_META: EffectMeta;
+export interface LayeredGridCardsOptions extends LayerOptions {
+    readonly speed?: number;
+    readonly cols?: number;
+    readonly rows?: number;
+    /** Your texture image URL. Defaults to a generated paper-grain texture (no download). */
+    readonly texture?: string;
+    /** Texture tile size, a CSS length. */
+    readonly textureSize?: string;
+    /** 0–1, how strongly the texture shows. */
+    readonly textureStrength?: number;
+    /** Card tilt in degrees. */
+    readonly tilt?: number;
+    readonly seed?: number;
+}
+/** Textured cards in a tilted grid, each floating at its own height. */
+export declare function layeredGridCards(options?: LayeredGridCardsOptions): CssEffect;

package/dist/backgrounds/effects/grid/layeredGridCards.js

@@ -0,0 +1,78 @@
+import { between, rng, round } from "../../runtime/rng.js";
+import { defineCssEffect, duration } from "../define.js";
+import { noiseTile } from "../texture/filmGrain.js";
+import { cells } from "./lines.js";
+export const LAYERED_GRID_CARDS_META = {
+    id: "layered-grid-cards",
+    label: "Textured 3D Layered Grid Cards",
+    category: "grid",
+    family: "css",
+    cost: { kb: "~2 KB + 50–300 KB image", cpu: 1, gpu: 2 },
+    tier: "all",
+    note: "Cost is mainly the texture image.",
+};
+// A grid of cards, each tilted back under the layer's perspective and lifted
+// to a slightly different height, bobbing slowly. The texture sits on each
+// card's ::after in overlay mode, so it shades the card's own colours.
+const CSS = `@layer components {
+  :where([data-sx-bg="layered-grid-cards"]) {
+    display: grid;
+    grid-template-columns: repeat(var(--sx-bg-cols), minmax(0, 1fr));
+    /* rows are 3/4 of a column: set explicitly, since the grid would size rows
+       from the cards' aspect ratio before the columns are final */
+    grid-auto-rows: calc((100cqw - (var(--sx-bg-cols) - 1) * 2.5cqmin) / var(--sx-bg-cols) * 0.75);
+    align-content: center;
+    gap: 2.5cqmin;
+    perspective: 1000px;
+  }
+  :where([data-sx-bg="layered-grid-cards"] [data-sx-bg-part="card"]) {
+    position: relative;
+    border-radius: 8%;
+    border: 1px solid color-mix(in oklab, var(--color-sx-ink) 16%, transparent);
+    background: linear-gradient(160deg, color-mix(in oklab, var(--color-sx-accent) 22%, var(--color-sx-secondary)), color-mix(in oklab, var(--color-sx-accent) 48%, var(--color-sx-secondary)));
+    box-shadow: 0 2cqmin 4cqmin color-mix(in oklab, black 22%, transparent);
+    transform: rotateX(var(--sx-bg-tilt)) translateZ(var(--z));
+    animation: sx-bg-cards ${duration("var(--d)")} ease-in-out var(--delay) infinite alternate;
+  }
+  :where([data-sx-bg="layered-grid-cards"] [data-sx-bg-part="card"])::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background-image: var(--sx-bg-texture);
+    background-size: var(--sx-bg-texture-size);
+    mix-blend-mode: overlay;
+    opacity: var(--sx-bg-texture-strength);
+  }
+  @keyframes sx-bg-cards {
+    to { transform: rotateX(var(--sx-bg-tilt)) translateZ(calc(var(--z) + 3cqmin)); }
+  }
+}`;
+/** Textured cards in a tilted grid, each floating at its own height. */
+export function layeredGridCards(options = {}) {
+    const r = rng(options.seed ?? 17);
+    const cols = cells(options.cols, 5, 12);
+    const rows = cells(options.rows, 4, 12);
+    const nodes = [];
+    for (let i = 0; i < cols * rows; i++) {
+        const d = round(between(r, 4, 8), 1);
+        nodes.push({
+            part: "card",
+            vars: {
+                "--z": `${round(between(r, 0, 6), 1)}cqmin`,
+                "--d": `${d}s`,
+                "--delay": `${-round(between(r, 0, d), 1)}s`,
+            },
+        });
+    }
+    return defineCssEffect(LAYERED_GRID_CARDS_META, CSS, options, {
+        vars: {
+            "--sx-bg-cols": cols,
+            "--sx-bg-tilt": `${options.tilt ?? 22}deg`,
+            "--sx-bg-texture": options.texture ? `url("${options.texture}")` : noiseTile(0.9),
+            "--sx-bg-texture-size": options.textureSize ?? "160px",
+            "--sx-bg-texture-strength": options.textureStrength ?? 0.5,
+        },
+        nodes,
+    });
+}

package/dist/backgrounds/effects/grid/layeredGridCards.schema.d.ts

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

package/dist/backgrounds/effects/grid/layeredGridCards.schema.js

@@ -0,0 +1,18 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField } from "../../../schema/common.js";
+export const LAYERED_GRID_CARDS_SCHEMA = defineSchema()({
+    id: "layered-grid-cards",
+    family: "background",
+    factory: "layeredGridCards",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        cols: { kind: "integer", label: "Columns", min: 1, max: 12, default: 5 },
+        rows: { kind: "integer", label: "Rows", min: 1, max: 12, default: 4 },
+        texture: { kind: "text", label: "Texture image", url: true, autoNote: "a generated paper grain" },
+        textureSize: { kind: "text", label: "Texture tile", default: "160px", help: "A CSS length." },
+        textureStrength: { kind: "number", label: "Texture strength", min: 0, max: 1, step: 0.01, default: 0.5 },
+        tilt: { kind: "number", label: "Tilt", min: -60, max: 60, step: 1, unit: "°", default: 22 },
+        seed: seedField(17),
+    },
+});

package/dist/backgrounds/effects/grid/lines.d.ts

@@ -0,0 +1,5 @@
+export declare function gridLinesImage(color: string, line: string): string;
+/** Cells laid out as a CSS grid filling the layer (`--sx-bg-cols` × `--sx-bg-rows`). */
+export declare const CELL_GRID = "display: grid;\n    grid-template-columns: repeat(var(--sx-bg-cols), minmax(0, 1fr));\n    grid-template-rows: repeat(var(--sx-bg-rows), minmax(0, 1fr));";
+/** Clamp a cell count and report it as a whole number. */
+export declare function cells(value: number | undefined, fallback: number, max: number): number;

package/dist/backgrounds/effects/grid/lines.js

@@ -0,0 +1,14 @@
+// Shared CSS for square grid lines: two 1-line gradients tiled at the cell size.
+// `color`, `line` and `cell` are CSS values (usually var() references).
+export function gridLinesImage(color, line) {
+    return `linear-gradient(to right, ${color} ${line}, transparent ${line}),
+      linear-gradient(to bottom, ${color} ${line}, transparent ${line})`;
+}
+/** Cells laid out as a CSS grid filling the layer (`--sx-bg-cols` × `--sx-bg-rows`). */
+export const CELL_GRID = `display: grid;
+    grid-template-columns: repeat(var(--sx-bg-cols), minmax(0, 1fr));
+    grid-template-rows: repeat(var(--sx-bg-rows), minmax(0, 1fr));`;
+/** Clamp a cell count and report it as a whole number. */
+export function cells(value, fallback, max) {
+    return Math.min(max, Math.max(1, Math.round(value ?? fallback)));
+}

package/dist/backgrounds/effects/grid/magnetLines.d.ts

@@ -0,0 +1,13 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const MAGNET_LINES_META: EffectMeta;
+export interface MagnetLinesOptions extends LayerOptions {
+    readonly cols?: number;
+    readonly rows?: number;
+    readonly color?: string;
+    /** Line length in px. */
+    readonly length?: number;
+    /** Line thickness in px. */
+    readonly thickness?: number;
+}
+/** A field of short lines that turn to face the cursor like compass needles. */
+export declare function magnetLines(options?: MagnetLinesOptions): CssEffect;

package/dist/backgrounds/effects/grid/magnetLines.js

@@ -0,0 +1,61 @@
+import { round } from "../../runtime/rng.js";
+import { defineCssEffect } from "../define.js";
+import { CELL_GRID, cells } from "./lines.js";
+export const MAGNET_LINES_META = {
+    id: "magnet-lines",
+    label: "Magnet lines",
+    category: "grid",
+    family: "css",
+    cost: { kb: "2–4 KB", cpu: 2, gpu: 1 },
+    tier: "all",
+    needs: { pointer: true },
+    note: "In React Bits backgrounds.",
+};
+// Every line points at the pointer, with no per-frame JS: each cell knows its
+// own centre (--cx/--cy, % of the layer) and CSS atan2() turns
+// "pointer minus centre" into an angle. The runtime only writes the pointer
+// position. Pointer coordinates are physical, so the layer is pinned to
+// `direction: ltr` (in RTL the grid would mirror and the centres would lie).
+// Without a pointer, every line points at the middle.
+const CSS = `@layer components {
+  :where([data-sx-bg="magnet-lines"]) {
+    direction: ltr;
+    ${CELL_GRID}
+  }
+  :where([data-sx-bg="magnet-lines"] [data-sx-bg-part="line"]) {
+    place-self: center;
+    inline-size: var(--sx-bg-len);
+    block-size: var(--sx-bg-thick);
+    border-radius: 999px;
+    background: var(--sx-bg-color);
+    rotate: atan2(
+      calc(var(--sx-pointer-y, 50cqh) - var(--cy) * 1cqh),
+      calc(var(--sx-pointer-x, 50cqw) - var(--cx) * 1cqw)
+    );
+    transition: rotate 200ms ease-out;
+  }
+}`;
+/** A field of short lines that turn to face the cursor like compass needles. */
+export function magnetLines(options = {}) {
+    const cols = cells(options.cols, 16, 40);
+    const rows = cells(options.rows, 9, 30);
+    const nodes = [];
+    for (let y = 0; y < rows; y++) {
+        for (let x = 0; x < cols; x++) {
+            nodes.push({
+                part: "line",
+                vars: { "--cx": round(((x + 0.5) / cols) * 100), "--cy": round(((y + 0.5) / rows) * 100) },
+            });
+        }
+    }
+    return defineCssEffect(MAGNET_LINES_META, CSS, options, {
+        vars: {
+            "--sx-bg-cols": cols,
+            "--sx-bg-rows": rows,
+            "--sx-bg-len": `${options.length ?? 22}px`,
+            "--sx-bg-thick": `${options.thickness ?? 2}px`,
+            "--sx-bg-color": options.color ?? "color-mix(in oklab, var(--color-sx-muted) 55%, transparent)",
+        },
+        nodes,
+    });
+}

package/dist/backgrounds/effects/grid/magnetLines.schema.d.ts

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

package/dist/backgrounds/effects/grid/magnetLines.schema.js

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields } from "../../../schema/common.js";
+export const MAGNET_LINES_SCHEMA = defineSchema()({
+    id: "magnet-lines",
+    family: "background",
+    factory: "magnetLines",
+    fields: {
+        ...layerFields(),
+        cols: { kind: "integer", label: "Columns", min: 1, max: 40, default: 16 },
+        rows: { kind: "integer", label: "Rows", min: 1, max: 30, default: 9 },
+        color: { kind: "color", label: "Colour", default: "color-mix(in oklab, var(--color-sx-muted) 55%, transparent)" },
+        length: { kind: "number", label: "Line length", min: 4, max: 80, step: 1, unit: "px", default: 22 },
+        thickness: { kind: "number", label: "Thickness", min: 0.5, max: 10, step: 0.5, unit: "px", default: 2 },
+    },
+});

package/dist/backgrounds/effects/grid/meltyLines.d.ts

@@ -0,0 +1,15 @@
+import type { CanvasEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const MELTY_LINES_META: EffectMeta;
+export interface MeltyLinesOptions extends LayerOptions {
+    /** Number of lines (2–60). */
+    readonly lines?: number;
+    readonly speed?: number;
+    /** Wobble height in px. */
+    readonly amplitude?: number;
+    /** Drip length in px. */
+    readonly drip?: number;
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** Horizontal lines that wobble and drip like warm wax. */
+export declare function meltyLines(options?: MeltyLinesOptions): CanvasEffect;

package/dist/backgrounds/effects/grid/meltyLines.js

@@ -0,0 +1,67 @@
+import { fbm, noise3 } from "../../runtime/noise.js";
+import { defineCanvasEffect } from "../define.js";
+import { paint } from "../canvasKit.js";
+export const MELTY_LINES_META = {
+    id: "melty-lines",
+    label: "Melty Line Goodness",
+    category: "grid",
+    family: "canvas",
+    cost: { kb: "2–5 KB", cpu: 2, gpu: 1 },
+    tier: "all",
+    note: "Not sure which exact demo this is; check whether it uses canvas or SVG.",
+};
+const SAMPLE = 10; // px between points along a line
+function program(lines, speed, amplitude, drip, seed) {
+    return {
+        init(env) {
+            const points = Math.ceil(env.width / SAMPLE) + 1;
+            return {
+                noise: noise3(seed),
+                time: 0,
+                ys: Array.from({ length: lines }, () => new Float32Array(points)),
+                gap: env.height / (lines + 1),
+            };
+        },
+        step(state, deltaMs) {
+            state.time += deltaMs * speed;
+            const t = state.time * 0.0003;
+            state.ys.forEach((ys, i) => {
+                const base = state.gap * (i + 1);
+                for (let p = 0; p < ys.length; p++) {
+                    const x = p * SAMPLE;
+                    const wobble = fbm(state.noise, x * 0.004, i * 0.35, t) * amplitude;
+                    // drips: where the noise runs high, the line sags downward sharply
+                    const m = Math.max(0, state.noise(x * 0.012, i * 0.5 + 40, t * 0.6));
+                    ys[p] = base + wobble + m * m * m * drip * 8;
+                }
+            });
+        },
+        draw(ctx, state, env) {
+            ctx.clearRect(0, 0, env.width, env.height);
+            ctx.lineWidth = 1.5;
+            ctx.lineJoin = "round";
+            state.ys.forEach((ys, i) => {
+                ctx.strokeStyle = paint(env, i, 0.8);
+                ctx.beginPath();
+                for (let p = 0; p < ys.length; p++) {
+                    const y = ys[p] ?? 0;
+                    if (p === 0)
+                        ctx.moveTo(0, y);
+                    else
+                        ctx.lineTo(p * SAMPLE, y);
+                }
+                ctx.stroke();
+            });
+        },
+    };
+}
+/** Horizontal lines that wobble and drip like warm wax. */
+export function meltyLines(options = {}) {
+    const lines = Math.min(60, Math.max(2, Math.round(options.lines ?? 18)));
+    return defineCanvasEffect(MELTY_LINES_META, program(lines, options.speed ?? 1, options.amplitude ?? 14, options.drip ?? 30, options.seed ?? 3), options, {
+        colors: options.colors ?? [
+            "var(--color-sx-accent)",
+            "color-mix(in oklab, var(--color-sx-accent) 50%, var(--color-sx-primary))",
+        ],
+    });
+}

package/dist/backgrounds/effects/grid/meltyLines.schema.d.ts

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

package/dist/backgrounds/effects/grid/meltyLines.schema.js

@@ -0,0 +1,16 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, seedField, colorsField } from "../../../schema/common.js";
+export const MELTY_LINES_SCHEMA = defineSchema()({
+    id: "melty-lines",
+    family: "background",
+    factory: "meltyLines",
+    fields: {
+        ...layerFields(),
+        lines: { kind: "integer", label: "Lines", min: 2, max: 60, default: 18 },
+        speed: { kind: "number", label: "Speed", min: 0, max: 4, step: 0.05, default: 1 },
+        amplitude: { kind: "number", label: "Wobble", min: 0, max: 60, step: 1, unit: "px", default: 14 },
+        drip: { kind: "number", label: "Drip", min: 0, max: 120, step: 1, unit: "px", default: 30 },
+        colors: { ...colorsField(["var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-accent) 50%, var(--color-sx-primary))"], 1, 6) },
+        seed: seedField(),
+    },
+});

package/dist/backgrounds/effects/grid/morphGrid.d.ts

@@ -0,0 +1,14 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const MORPH_GRID_META: EffectMeta;
+export interface MorphGridOptions extends LayerOptions {
+    readonly speed?: number;
+    readonly cols?: number;
+    readonly rows?: number;
+    readonly colors?: readonly string[];
+    /** Seconds for one square -> circle -> square cycle. */
+    readonly duration?: number;
+}
+/** The atlas's cell budget (it assumed border-radius repaints; kept as a sane cap). */
+export declare const MORPH_GRID_MAX_CELLS = 200;
+/** A grid of squares that morph into circles and back in a diagonal wave. */
+export declare function morphGrid(options?: MorphGridOptions): CssEffect;