@sharedex/ui 0.0.0-stage → 0.10.0

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

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const BOKEH_SCHEMA = defineSchema()({
+    id: "bokeh",
+    family: "background",
+    factory: "bokeh",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        count: { kind: "integer", label: "Lights", min: 1, max: 40, default: 16 },
+        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) },
+        size: { kind: "range", label: "Light size", min: 1, max: 40, step: 0.5, unit: "%", default: [3, 12], help: "Of the layer's longer side." },
+        seed: seedField(11),
+    },
+});

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

@@ -0,0 +1,25 @@
+import type { CanvasEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const CONSTELLATION_META: EffectMeta;
+/** The atlas's limit: past this the pair checks dominate the frame. */
+export declare const CONSTELLATION_MAX = 80;
+export interface ConstellationOptions extends LayerOptions {
+    /** Number of points (max 80; touch screens 40). */
+    readonly count?: number;
+    /** Longest link in px. */
+    readonly distance?: number;
+    readonly speed?: number;
+    /** Points, then links. */
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/**
+ * All pairs closer than `distance`, found by bucketing points into cells of
+ * that size and only comparing neighbouring cells. Pure; returns
+ * [i, j, strength, …] with strength 1 (touching) … 0 (at the limit).
+ */
+export declare function nearPairs(points: readonly {
+    x: number;
+    y: number;
+}[], distance: number): number[];
+/** Drifting points linked by lines when they come close, and to the cursor. */
+export declare function constellation(options?: ConstellationOptions): CanvasEffect;

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

@@ -0,0 +1,119 @@
+import { defineCanvasEffect, defineCssEffect, liteMeta } from "../define.js";
+import { budget, paint, rand, TAU } from "../canvasKit.js";
+import { drift } from "./particles.js";
+export const CONSTELLATION_META = {
+    id: "constellation",
+    label: "Constellation network (particles.js style)",
+    category: "particle",
+    family: "canvas",
+    cost: { kb: "3 KB hand-written / 30–60 KB tsParticles", cpu: 3, gpu: 1 },
+    tier: "mid",
+    needs: { pointer: true },
+    note: "Checking distances between every pair grows fast; keep it under ~80 points.",
+};
+const CONSTELLATION_LITE_META = liteMeta({ ...CONSTELLATION_META, family: "css", needs: {} }, "Still points at uneven spacing, without the linking lines.");
+/** The atlas's limit: past this the pair checks dominate the frame. */
+export const CONSTELLATION_MAX = 80;
+/**
+ * All pairs closer than `distance`, found by bucketing points into cells of
+ * that size and only comparing neighbouring cells. Pure; returns
+ * [i, j, strength, …] with strength 1 (touching) … 0 (at the limit).
+ */
+export function nearPairs(points, distance) {
+    const buckets = new Map();
+    points.forEach((p, i) => {
+        const key = `${Math.floor(p.x / distance)},${Math.floor(p.y / distance)}`;
+        const list = buckets.get(key);
+        if (list)
+            list.push(i);
+        else
+            buckets.set(key, [i]);
+    });
+    const out = [];
+    points.forEach((p, i) => {
+        const cx = Math.floor(p.x / distance);
+        const cy = Math.floor(p.y / distance);
+        for (let ox = -1; ox <= 1; ox++) {
+            for (let oy = -1; oy <= 1; oy++) {
+                for (const j of buckets.get(`${cx + ox},${cy + oy}`) ?? []) {
+                    if (j <= i)
+                        continue;
+                    const q = points[j];
+                    if (!q)
+                        continue;
+                    const d = Math.hypot(p.x - q.x, p.y - q.y);
+                    if (d < distance)
+                        out.push(i, j, 1 - d / distance);
+                }
+            }
+        }
+    });
+    return out;
+}
+function program(count, distance, speed) {
+    return {
+        init(env, random) {
+            const n = budget(count, 60, CONSTELLATION_MAX, 40, env);
+            const points = Array.from({ length: n }, () => {
+                const a = random() * TAU;
+                const v = rand(random, 8, 20) * speed;
+                return { x: random() * env.width, y: random() * env.height, vx: Math.cos(a) * v, vy: Math.sin(a) * v, r: rand(random, 1.2, 2.4), alpha: 1 };
+            });
+            return { points, links: [], pointer: { x: 0, y: 0, inside: false } };
+        },
+        step(state, deltaMs, pointer, env) {
+            for (const p of state.points)
+                drift(p, deltaMs / 1000, env.width, env.height);
+            state.links = nearPairs(state.points, distance);
+            state.pointer = { x: pointer.x, y: pointer.y, inside: pointer.inside };
+        },
+        draw(ctx, state, env) {
+            ctx.clearRect(0, 0, env.width, env.height);
+            ctx.lineWidth = 1;
+            for (let k = 0; k < state.links.length; k += 3) {
+                const a = state.points[state.links[k] ?? 0];
+                const b = state.points[state.links[k + 1] ?? 0];
+                if (!a || !b)
+                    continue;
+                ctx.strokeStyle = paint(env, 1, (state.links[k + 2] ?? 0) * 0.6);
+                ctx.beginPath();
+                ctx.moveTo(a.x, a.y);
+                ctx.lineTo(b.x, b.y);
+                ctx.stroke();
+            }
+            if (state.pointer.inside) {
+                for (const p of state.points) {
+                    const d = Math.hypot(p.x - state.pointer.x, p.y - state.pointer.y);
+                    if (d >= distance * 1.4)
+                        continue;
+                    ctx.strokeStyle = paint(env, 0, (1 - d / (distance * 1.4)) * 0.8);
+                    ctx.beginPath();
+                    ctx.moveTo(state.pointer.x, state.pointer.y);
+                    ctx.lineTo(p.x, p.y);
+                    ctx.stroke();
+                }
+            }
+            ctx.fillStyle = paint(env, 0);
+            for (const p of state.points) {
+                ctx.beginPath();
+                ctx.arc(p.x, p.y, p.r, 0, TAU);
+                ctx.fill();
+            }
+        },
+    };
+}
+const LITE_CSS = `@layer components {
+  :where([data-sx-bg="constellation-lite"]) {
+    background:
+      radial-gradient(circle, var(--sx-bg-dot) 0 1.6px, transparent 2.2px) 0 0 / 113px 97px,
+      radial-gradient(circle, var(--sx-bg-dot) 0 1.2px, transparent 1.8px) 41px 53px / 89px 127px;
+  }
+}`;
+/** Drifting points linked by lines when they come close, and to the cursor. */
+export function constellation(options = {}) {
+    const colors = options.colors ?? ["var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-accent) 70%, var(--color-sx-muted))"];
+    return defineCanvasEffect(CONSTELLATION_META, program(options.count, options.distance ?? 130, options.speed ?? 1), options, {
+        colors,
+        fallback: defineCssEffect(CONSTELLATION_LITE_META, LITE_CSS, options, { vars: { "--sx-bg-dot": colors[0] ?? "currentColor" } }),
+    });
+}

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

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

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

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const CONSTELLATION_SCHEMA = defineSchema()({
+    id: "constellation",
+    family: "background",
+    factory: "constellation",
+    fields: {
+        ...layerFields(),
+        count: { kind: "integer", label: "Points", min: 10, max: 80, autoValue: 60, autoNote: "fits the screen; at most 40 on touch" },
+        distance: { kind: "number", label: "Longest link", min: 40, max: 300, step: 5, unit: "px", default: 130 },
+        speed: speedField(),
+        colors: { ...colorsField(["var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-accent) 70%, var(--color-sx-muted))"], 1, 6), help: "Points, then links." },
+        seed: seedField(1),
+    },
+});

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

@@ -0,0 +1,17 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const CURSOR_DOTS_META: EffectMeta;
+export interface CursorDotsOptions extends LayerOptions {
+    /** Distance between dots in px. */
+    readonly gap?: number;
+    /** Resting dot radius in px. */
+    readonly size?: number;
+    /** Dot radius near the pointer, in px. */
+    readonly grow?: number;
+    readonly color?: string;
+    /** Dot colour near the pointer. */
+    readonly glow?: string;
+    /** Reach of the pointer in px. */
+    readonly radius?: number;
+}
+/** A dot grid whose dots swell and light up around the cursor. */
+export declare function cursorDots(options?: CursorDotsOptions): CssEffect;

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

@@ -0,0 +1,47 @@
+import { defineCssEffect } from "../define.js";
+export const CURSOR_DOTS_META = {
+    id: "cursor-dots",
+    label: "Animated Hero (cursor dot grid)",
+    category: "particle",
+    family: "css",
+    cost: { kb: "2–5 KB", cpu: 2, gpu: 1 },
+    tier: "all",
+    needs: { pointer: true },
+    note: "Tech inferred; check the code.",
+};
+// Two dot screens on the same grid: small faint dots everywhere, and big
+// bright dots revealed only in a circle around the pointer. No dot elements,
+// so the grid can be as dense as you like.
+const dots = (color, size) => `radial-gradient(circle at center, ${color} ${size}, transparent calc(${size} + 0.6px))`;
+const CSS = `@layer components {
+  :where([data-sx-bg="cursor-dots"]) {
+    background-image: ${dots("var(--sx-bg-color)", "var(--sx-bg-dot)")};
+    background-size: var(--sx-bg-gap) var(--sx-bg-gap);
+  }
+  :where([data-sx-bg="cursor-dots"])::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image: ${dots("var(--sx-bg-glow)", "var(--sx-bg-grow)")};
+    background-size: var(--sx-bg-gap) var(--sx-bg-gap);
+    mask-image: radial-gradient(circle var(--sx-bg-radius) at var(--sx-pointer-x, 50%) var(--sx-pointer-y, 50%), black, transparent);
+    opacity: 0;
+    transition: opacity 300ms ease;
+  }
+  :where([data-sx-pointer="in"] [data-sx-bg="cursor-dots"])::after {
+    opacity: 1;
+  }
+}`;
+/** A dot grid whose dots swell and light up around the cursor. */
+export function cursorDots(options = {}) {
+    return defineCssEffect(CURSOR_DOTS_META, CSS, options, {
+        vars: {
+            "--sx-bg-gap": `${options.gap ?? 24}px`,
+            "--sx-bg-dot": `${options.size ?? 1.2}px`,
+            "--sx-bg-grow": `${options.grow ?? 3}px`,
+            "--sx-bg-color": options.color ?? "color-mix(in oklab, var(--color-sx-muted) 40%, transparent)",
+            "--sx-bg-glow": options.glow ?? "var(--color-sx-accent)",
+            "--sx-bg-radius": `${options.radius ?? 160}px`,
+        },
+    });
+}

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

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

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

@@ -0,0 +1,16 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields } from "../../../schema/common.js";
+export const CURSOR_DOTS_SCHEMA = defineSchema()({
+    id: "cursor-dots",
+    family: "background",
+    factory: "cursorDots",
+    fields: {
+        ...layerFields(),
+        gap: { kind: "number", label: "Spacing", min: 8, max: 80, step: 1, unit: "px", default: 24 },
+        size: { kind: "number", label: "Resting dot", min: 0.5, max: 6, step: 0.1, unit: "px", default: 1.2 },
+        grow: { kind: "number", label: "Dot near the pointer", min: 0.5, max: 12, step: 0.1, unit: "px", default: 3 },
+        color: { kind: "color", label: "Colour", default: "color-mix(in oklab, var(--color-sx-muted) 40%, transparent)" },
+        glow: { kind: "color", label: "Colour near the pointer", default: "var(--color-sx-accent)" },
+        radius: { kind: "number", label: "Reach", min: 40, max: 600, step: 5, unit: "px", default: 160 },
+    },
+});

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

@@ -0,0 +1,15 @@
+import type { CanvasEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const FALLING_PARTICLES_META: EffectMeta;
+export type FallingKind = "snow" | "rain" | "confetti";
+export interface FallingParticlesOptions extends LayerOptions {
+    readonly kind?: FallingKind;
+    /** Number of pieces; touch screens get at most 120. */
+    readonly count?: number;
+    readonly speed?: number;
+    /** Sideways drift; positive blows toward the inline end (it mirrors in RTL). */
+    readonly wind?: number;
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** Snow, rain or confetti falling across the layer. */
+export declare function fallingParticles(options?: FallingParticlesOptions): CanvasEffect;

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

@@ -0,0 +1,96 @@
+import { defineCanvasEffect } from "../define.js";
+import { budget, paint, rand, TAU } from "../canvasKit.js";
+export const FALLING_PARTICLES_META = {
+    id: "falling-particles",
+    label: "Snow / rain / confetti",
+    category: "particle",
+    family: "canvas",
+    cost: { kb: "2–5 KB", cpu: 2, gpu: 1 },
+    tier: "all",
+};
+const KINDS = {
+    snow: { count: 140, vy: [18, 55], size: [1, 3.2], sway: 22 },
+    rain: { count: 170, vy: [520, 820], size: [10, 22], sway: 0 },
+    confetti: { count: 90, vy: [50, 110], size: [5, 10], sway: 30 },
+};
+function spawn(p, random, width, kind, top) {
+    const k = KINDS[kind];
+    p.x = random() * width;
+    p.y = top;
+    p.vy = rand(random, k.vy[0], k.vy[1]);
+    p.size = rand(random, k.size[0], k.size[1]);
+    p.phase = random() * TAU;
+    p.sway = rand(random, 0.6, 1.4);
+    p.angle = random() * TAU;
+    p.spin = rand(random, -3, 3);
+    p.c = Math.floor(random() * 5);
+}
+function program(kind, count, speed, wind) {
+    return {
+        init(env, random) {
+            const n = budget(count, KINDS[kind].count, 600, 120, env);
+            const pieces = Array.from({ length: n }, () => {
+                const p = { x: 0, y: 0, vy: 0, size: 0, phase: 0, sway: 0, angle: 0, spin: 0, c: 0 };
+                spawn(p, random, env.width, kind, random() * env.height); // already spread over the screen
+                return p;
+            });
+            return { random, time: 0, pieces };
+        },
+        step(state, deltaMs, _pointer, env) {
+            state.time += deltaMs;
+            const s = (deltaMs / 1000) * speed;
+            const dir = env.rtl ? -1 : 1;
+            const k = KINDS[kind];
+            for (const p of state.pieces) {
+                p.y += p.vy * s;
+                p.x += (wind * dir * (kind === "rain" ? p.vy * 0.15 : 20) + Math.sin(state.time * 0.001 * p.sway + p.phase) * k.sway) * s;
+                p.angle += p.spin * s;
+                if (p.y > env.height + 30)
+                    spawn(p, state.random, env.width, kind, -30);
+                if (p.x < -40)
+                    p.x += env.width + 80;
+                else if (p.x > env.width + 40)
+                    p.x -= env.width + 80;
+            }
+        },
+        draw(ctx, state, env) {
+            ctx.clearRect(0, 0, env.width, env.height);
+            const dir = env.rtl ? -1 : 1;
+            for (const p of state.pieces) {
+                if (kind === "snow") {
+                    ctx.fillStyle = paint(env, 0, 0.5 + (p.size / 3.2) * 0.5);
+                    ctx.beginPath();
+                    ctx.arc(p.x, p.y, p.size, 0, TAU);
+                    ctx.fill();
+                }
+                else if (kind === "rain") {
+                    ctx.strokeStyle = paint(env, 0, 0.45);
+                    ctx.lineWidth = 1;
+                    ctx.beginPath();
+                    ctx.moveTo(p.x, p.y);
+                    ctx.lineTo(p.x - wind * dir * p.size * 0.15, p.y - p.size);
+                    ctx.stroke();
+                }
+                else {
+                    ctx.save();
+                    ctx.translate(p.x, p.y);
+                    ctx.rotate(p.angle);
+                    ctx.scale(1, Math.cos(state.time * 0.004 * p.sway + p.phase)); // the flip of a falling strip
+                    ctx.fillStyle = paint(env, p.c, 0.9);
+                    ctx.fillRect(-p.size / 2, -p.size / 4, p.size, p.size / 2);
+                    ctx.restore();
+                }
+            }
+        },
+    };
+}
+const DEFAULT_COLORS = {
+    snow: ["color-mix(in oklab, var(--color-sx-ink) 45%, transparent)"],
+    rain: ["color-mix(in oklab, var(--color-sx-ink) 50%, transparent)"],
+    confetti: ["var(--color-sx-accent)", "gold", "tomato", "deepskyblue", "mediumseagreen"],
+};
+/** Snow, rain or confetti falling across the layer. */
+export function fallingParticles(options = {}) {
+    const kind = options.kind ?? "snow";
+    return defineCanvasEffect(FALLING_PARTICLES_META, program(kind, options.count, options.speed ?? 1, options.wind ?? (kind === "rain" ? 0.25 : 0.3)), options, { colors: options.colors ?? DEFAULT_COLORS[kind] });
+}

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

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

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

@@ -0,0 +1,16 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, seedField } from "../../../schema/common.js";
+export const FALLING_PARTICLES_SCHEMA = defineSchema()({
+    id: "falling-particles",
+    family: "background",
+    factory: "fallingParticles",
+    fields: {
+        ...layerFields(),
+        kind: { kind: "choice", label: "Kind", values: ["snow", "rain", "confetti"], default: "snow" },
+        count: { kind: "integer", label: "Pieces", min: 10, max: 400, autoValue: 140, autoNote: "depends on the kind; at most 120 on touch" },
+        speed: { kind: "number", label: "Speed", min: 0, max: 4, step: 0.05, default: 1 },
+        wind: { kind: "number", label: "Wind", min: -2, max: 2, step: 0.05, autoValue: 0.3, autoNote: "0.3; 0.25 for rain", help: "Positive blows toward the inline end." },
+        colors: { kind: "colors", label: "Colours", min: 1, max: 6, autoNote: "depends on the kind" },
+        seed: seedField(1),
+    },
+});

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

@@ -0,0 +1,13 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const METEORS_META: EffectMeta;
+export interface MeteorsOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Number of meteors (1–40). */
+    readonly count?: number;
+    /** Degrees below the horizon they fall at. */
+    readonly angle?: number;
+    readonly color?: string;
+    readonly seed?: number;
+}
+/** Thin streaks crossing the sky now and then. */
+export declare function meteors(options?: MeteorsOptions): CssEffect;

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

@@ -0,0 +1,63 @@
+import { between, rng, round } from "../../runtime/rng.js";
+import { defineCssEffect, duration } from "../define.js";
+export const METEORS_META = {
+    id: "meteors",
+    label: "Shooting stars / meteors",
+    category: "particle",
+    family: "css",
+    cost: { kb: "<1 KB", cpu: 1, gpu: 1 },
+    tier: "all",
+};
+// Each meteor is a short gradient line that streaks for the first ~20% of its
+// cycle and waits for the rest, so the sky is never busy. In RTL the whole
+// streak mirrors (start position, tail and direction together).
+const CSS = `@layer components {
+  :where([data-sx-bg="meteors"] [data-sx-bg-part="meteor"]) {
+    position: absolute;
+    inset-inline-start: var(--x);
+    inset-block-start: var(--y);
+    inline-size: var(--len);
+    block-size: 1.5px;
+    border-radius: 999px;
+    background: linear-gradient(to right, var(--sx-bg-color), transparent);
+    opacity: 0;
+    animation: sx-bg-meteor ${duration("var(--d)")} linear var(--delay) infinite;
+  }
+  :where([dir="rtl"] [data-sx-bg="meteors"] [data-sx-bg-part="meteor"]) {
+    scale: -1 1;
+  }
+  @keyframes sx-bg-meteor {
+    0% { transform: rotate(var(--sx-bg-angle)) translate3d(0, 0, 0); opacity: 0; }
+    2% { opacity: 1; }
+    15% { opacity: 1; }
+    20%, 100% { transform: rotate(var(--sx-bg-angle)) translate3d(calc(-1 * var(--sx-bg-travel)), 0, 0); opacity: 0; }
+  }
+}`;
+/** Thin streaks crossing the sky now and then. */
+export function meteors(options = {}) {
+    const r = rng(options.seed ?? 3);
+    const count = Math.min(40, Math.max(1, Math.round(options.count ?? 12)));
+    const nodes = [];
+    for (let i = 0; i < count; i++) {
+        const d = round(between(r, 5, 13), 1);
+        nodes.push({
+            part: "meteor",
+            vars: {
+                "--x": `${round(between(r, 25, 115), 1)}%`,
+                "--y": `${round(between(r, -10, 45), 1)}%`,
+                "--len": `${round(between(r, 60, 170), 0)}px`,
+                "--d": `${d}s`,
+                "--delay": `${-round(between(r, 0, d), 1)}s`,
+            },
+        });
+    }
+    return defineCssEffect(METEORS_META, CSS, options, {
+        vars: {
+            // rotate(-a) points the line's +x up-right, so moving along -x falls down-left
+            "--sx-bg-angle": `${-(options.angle ?? 35)}deg`,
+            "--sx-bg-travel": "90cqmax",
+            "--sx-bg-color": options.color ?? "var(--color-sx-accent)",
+        },
+        nodes,
+    });
+}

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

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

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

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField } from "../../../schema/common.js";
+export const METEORS_SCHEMA = defineSchema()({
+    id: "meteors",
+    family: "background",
+    factory: "meteors",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        count: { kind: "integer", label: "Meteors", min: 1, max: 40, default: 12 },
+        angle: { kind: "number", label: "Fall angle", min: 0, max: 90, step: 1, unit: "°", default: 35 },
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-accent)" },
+        seed: seedField(3),
+    },
+});

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

@@ -0,0 +1,16 @@
+import type { CanvasEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const PARTICLE_HOVER_META: EffectMeta;
+export interface ParticleHoverOptions extends LayerOptions {
+    /** Distance between resting particles in px. */
+    readonly spacing?: number;
+    /** Push radius around the pointer in px. */
+    readonly radius?: number;
+    /** How hard the pointer pushes. */
+    readonly force?: number;
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** The most dots one canvas will ever simulate (a 4K screen at the default spacing). */
+export declare const PARTICLE_HOVER_MAX = 2400;
+/** A field of particles that scatters away from the cursor and settles back. */
+export declare function particleHover(options?: ParticleHoverOptions): CanvasEffect;

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

@@ -0,0 +1,73 @@
+import { defineCanvasEffect } from "../define.js";
+import { aim, paint, rand } from "../canvasKit.js";
+export const PARTICLE_HOVER_META = {
+    id: "particle-hover",
+    label: "Particle effect for hero",
+    category: "particle",
+    family: "canvas",
+    cost: { kb: "3–6 KB", cpu: 2, gpu: 1 },
+    tier: "all",
+    needs: { pointer: true },
+    note: "Particles react on hover.",
+};
+/** The most dots one canvas will ever simulate (a 4K screen at the default spacing). */
+export const PARTICLE_HOVER_MAX = 2400;
+// Every particle has a resting home and is held there by a spring. Near the
+// pointer it is pushed away; when the pointer leaves, the springs pull the
+// field back into shape. Without a pointer, a wandering point does the pushing.
+function program(spacing, radius, force) {
+    return {
+        init(env, random) {
+            // whole columns and rows of at least `spacing`, never more than the cap in total
+            const step = Math.max(spacing, Math.sqrt((env.width * env.height) / PARTICLE_HOVER_MAX));
+            const cols = Math.max(1, Math.floor(env.width / step));
+            const rows = Math.max(1, Math.floor(env.height / step));
+            const cw = env.width / cols;
+            const ch = env.height / rows;
+            const dots = [];
+            for (let r = 0; r < rows; r++) {
+                for (let c = 0; c < cols; c++) {
+                    const hx = (c + 0.5) * cw + rand(random, -cw * 0.3, cw * 0.3);
+                    const hy = (r + 0.5) * ch + rand(random, -ch * 0.3, ch * 0.3);
+                    dots.push({ hx, hy, x: hx, y: hy, vx: 0, vy: 0, c: random() < 0.25 ? 1 : 0 });
+                }
+            }
+            return { time: 0, dots };
+        },
+        step(state, deltaMs, pointer, env) {
+            state.time += deltaMs;
+            const s = Math.min(deltaMs, 32) / 1000;
+            const p = aim(pointer, state.time, env, 1.3);
+            for (const d of state.dots) {
+                const dx = d.x - p.x;
+                const dy = d.y - p.y;
+                const dist = Math.hypot(dx, dy) || 1;
+                if (dist < radius) {
+                    const push = (1 - dist / radius) * force;
+                    d.vx += (dx / dist) * push * s * 60;
+                    d.vy += (dy / dist) * push * s * 60;
+                }
+                d.vx += (d.hx - d.x) * 6 * s; // spring home
+                d.vy += (d.hy - d.y) * 6 * s;
+                d.vx *= 1 - Math.min(1, 6 * s); // damping
+                d.vy *= 1 - Math.min(1, 6 * s);
+                d.x += d.vx * s * 60;
+                d.y += d.vy * s * 60;
+            }
+        },
+        draw(ctx, state, env) {
+            ctx.clearRect(0, 0, env.width, env.height);
+            for (const d of state.dots) {
+                const moved = Math.min(1, Math.hypot(d.x - d.hx, d.y - d.hy) / 24);
+                ctx.fillStyle = paint(env, d.c === 1 || moved > 0.2 ? 1 : 0, 0.45 + moved * 0.55);
+                ctx.fillRect(d.x - 1, d.y - 1, 2, 2);
+            }
+        },
+    };
+}
+/** A field of particles that scatters away from the cursor and settles back. */
+export function particleHover(options = {}) {
+    return defineCanvasEffect(PARTICLE_HOVER_META, program(options.spacing ?? 20, options.radius ?? 110, options.force ?? 1.4), options, {
+        colors: options.colors ?? ["color-mix(in oklab, var(--color-sx-muted) 60%, transparent)", "var(--color-sx-accent)"],
+    });
+}

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

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

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

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, seedField, colorsField } from "../../../schema/common.js";
+export const PARTICLE_HOVER_SCHEMA = defineSchema()({
+    id: "particle-hover",
+    family: "background",
+    factory: "particleHover",
+    fields: {
+        ...layerFields(),
+        spacing: { kind: "number", label: "Spacing", min: 8, max: 60, step: 1, unit: "px", default: 20 },
+        radius: { kind: "number", label: "Push radius", min: 20, max: 400, step: 5, unit: "px", default: 110 },
+        force: { kind: "number", label: "Push force", min: 0, max: 5, step: 0.1, default: 1.4 },
+        colors: { ...colorsField(["color-mix(in oklab, var(--color-sx-muted) 60%, transparent)", "var(--color-sx-accent)"], 1, 6) },
+        seed: seedField(1),
+    },
+});

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

@@ -0,0 +1,14 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const PARTICLE_ORB_META: EffectMeta;
+export interface ParticleOrbOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Number of particles (20–400). */
+    readonly count?: number;
+    /** Orb radius in % of the layer's shorter side. */
+    readonly radius?: number;
+    /** Particle size in px. */
+    readonly dot?: number;
+    readonly colors?: readonly string[];
+}
+/** A sphere of particles slowly spinning. */
+export declare function particleOrb(options?: ParticleOrbOptions): CssEffect;