@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/backgrounds/effects/shader/aether.d.ts

@@ -0,0 +1,12 @@
+import type { EffectMeta, LayerOptions, WebglEffect } from "../../types.js";
+export declare const AETHER_META: EffectMeta;
+export interface AetherOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Strength of the readability veil toward the surface colour, 0–1. */
+    readonly veil?: number;
+    /** Four colours: the surface (also the veil), two clouds, and highlights. */
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** Slow nebula light with a readability veil behind the copy. */
+export declare function aether(options?: AetherOptions): WebglEffect;

package/dist/backgrounds/effects/shader/aether.js

@@ -0,0 +1,46 @@
+import { defineWebglEffect } from "../define.js";
+import { GLSL_NOISE, GLSL_OUT, GLSL_SPACE, SX_FIELD, slots, stillFallback } from "../shaderKit.js";
+export const AETHER_META = {
+    id: "aether",
+    label: "AetherHero",
+    category: "shader",
+    family: "webgl",
+    cost: { kb: "~3 KB (own runner, no library)", cpu: 1, gpu: 3 },
+    tier: "mid",
+    note: "Comes with a built-in veil on the text side (inline-start and bottom), so copy stays readable.",
+};
+// Nebula-like light: noise warped by noise (two layers), coloured in three
+// steps plus bright glints. Then a veil fades it toward the surface colour on
+// the inline-start side and at the bottom, where hero copy usually sits; in
+// RTL the veil moves to the right with the text.
+const FRAGMENT = `
+uniform vec4 u_c0;
+uniform vec4 u_c1;
+uniform vec4 u_c2;
+uniform vec4 u_c3;
+uniform float u_speed;
+uniform float u_veil;
+uniform float u_seed;
+${GLSL_NOISE}${GLSL_SPACE}${GLSL_OUT}
+void main() {
+  vec2 p = sx_centered();
+  float t = u_time * u_speed * 0.07 + u_seed * 3.0;
+  vec2 q = vec2(sx_fbm(p * 1.6 + t), sx_fbm(p * 1.6 - t + 5.2));
+  float n = sx_fbm(p * 2.2 + q * 1.8 + vec2(t * 0.6, -t * 0.4));
+  vec3 c = mix(u_c0.rgb, u_c1.rgb, smoothstep(0.3, 0.75, n));
+  c = mix(c, u_c2.rgb, smoothstep(0.35, 0.9, q.x * n * 1.8));
+  c += u_c3.rgb * pow(smoothstep(0.62, 1.0, n), 3.0) * 0.7;
+  float x = mix(v_uv.x, 1.0 - v_uv.x, u_rtl);
+  float veil = clamp((1.0 - smoothstep(0.0, 0.7, x)) * 0.85 + (1.0 - smoothstep(0.0, 0.45, v_uv.y)) * 0.5, 0.0, 1.0);
+  gl_FragColor = sx_out(mix(clamp(c, 0.0, 1.0), u_c0.rgb, veil * u_veil), 1.0);
+}
+`;
+/** Slow nebula light with a readability veil behind the copy. */
+export function aether(options = {}) {
+    const colors = slots(options.colors, [SX_FIELD[0], SX_FIELD[2], SX_FIELD[1], "color-mix(in oklab, var(--color-sx-accent) 40%, white)"]);
+    return defineWebglEffect(AETHER_META, FRAGMENT, options, {
+        colors,
+        uniforms: { u_speed: options.speed ?? 1, u_veil: Math.min(1, Math.max(0, options.veil ?? 0.75)), u_seed: options.seed ?? 0 },
+        fallback: stillFallback(AETHER_META, "Still clouds on the far side, the surface colour behind the text.", "radial-gradient(ellipse at 80% 35%, var(--sx-bg-c3), transparent 55%), radial-gradient(ellipse at 65% 70%, var(--sx-bg-c2), transparent 60%), var(--sx-bg-c1)", options, colors),
+    });
+}

package/dist/backgrounds/effects/shader/aether.schema.d.ts

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

package/dist/backgrounds/effects/shader/aether.schema.js

@@ -0,0 +1,14 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const AETHER_SCHEMA = defineSchema()({
+    id: "aether",
+    family: "background",
+    factory: "aether",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        veil: { kind: "number", label: "Readability veil", min: 0, max: 1, step: 0.01, default: 0.75 },
+        colors: { ...colorsField(["var(--color-sx-secondary)", "color-mix(in oklab, var(--color-sx-accent) 50%, var(--color-sx-primary))", "var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-accent) 40%, white)"], 1, 4), help: "The surface (and veil), two clouds, highlights." },
+        seed: seedField(),
+    },
+});

package/dist/backgrounds/effects/shader/animatedGradient.d.ts

@@ -0,0 +1,14 @@
+import type { EffectMeta, LayerOptions, WebglEffect } from "../../types.js";
+export declare const ANIMATED_GRADIENT_META: EffectMeta;
+export interface AnimatedGradientOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Twist around the centre in radians at its strongest (0 = none). */
+    readonly swirl?: number;
+    /** Noise roughness, 0–1. */
+    readonly noise?: number;
+    /** Three colours along the gradient. */
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** A three-colour gradient that swirls and breathes. */
+export declare function animatedGradient(options?: AnimatedGradientOptions): WebglEffect;

package/dist/backgrounds/effects/shader/animatedGradient.js

@@ -0,0 +1,45 @@
+import { defineWebglEffect } from "../define.js";
+import { GLSL_NOISE, GLSL_OUT, GLSL_SPACE, SX_FIELD, slots, stillFallback } from "../shaderKit.js";
+export const ANIMATED_GRADIENT_META = {
+    id: "animated-gradient",
+    label: "Animated Gradient (Componentry)",
+    category: "shader",
+    family: "webgl",
+    cost: { kb: "~3 KB (own runner, no library)", cpu: 1, gpu: 2 },
+    tier: "mid",
+    note: "Light option for a moving gradient: a swirl and a little noise.",
+};
+// A three-stop linear gradient whose space is twisted around the centre
+// (strongest in the middle, none at the edges) by an angle that swings back
+// and forth, then roughened with noise.
+const FRAGMENT = `
+uniform vec4 u_c0;
+uniform vec4 u_c1;
+uniform vec4 u_c2;
+uniform float u_speed;
+uniform float u_swirl;
+uniform float u_noise;
+uniform float u_seed;
+${GLSL_NOISE}${GLSL_SPACE}${GLSL_OUT}
+void main() {
+  vec2 p = sx_centered();
+  float t = u_time * u_speed * 0.25 + u_seed * 4.0;
+  float angle = u_swirl * (1.0 - smoothstep(0.0, 0.9, length(p))) * sin(t * 0.7);
+  float cs = cos(angle);
+  float sn = sin(angle);
+  p = vec2(cs * p.x - sn * p.y, sn * p.x + cs * p.y);
+  p += u_noise * 0.35 * (vec2(sx_fbm(p * 2.0 + t), sx_fbm(p * 2.0 - t + 7.0)) - 0.5);
+  float k = clamp(0.5 + p.x * 0.6 + p.y * 0.4 + 0.15 * sin(t), 0.0, 1.0);
+  vec3 c = mix(mix(u_c0.rgb, u_c1.rgb, k * 2.0), mix(u_c1.rgb, u_c2.rgb, k * 2.0 - 1.0), step(0.5, k));
+  gl_FragColor = sx_out(c, 1.0);
+}
+`;
+/** A three-colour gradient that swirls and breathes. */
+export function animatedGradient(options = {}) {
+    const colors = slots(options.colors, [SX_FIELD[3], SX_FIELD[1], SX_FIELD[2]]);
+    return defineWebglEffect(ANIMATED_GRADIENT_META, FRAGMENT, options, {
+        colors,
+        uniforms: { u_speed: options.speed ?? 1, u_swirl: options.swirl ?? 1.6, u_noise: options.noise ?? 0.4, u_seed: options.seed ?? 0 },
+        fallback: stillFallback(ANIMATED_GRADIENT_META, "The same three stops as a still linear gradient.", "linear-gradient(60deg, var(--sx-bg-c1), var(--sx-bg-c2), var(--sx-bg-c3))", options, colors),
+    });
+}

package/dist/backgrounds/effects/shader/animatedGradient.schema.d.ts

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

package/dist/backgrounds/effects/shader/animatedGradient.schema.js

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const ANIMATED_GRADIENT_SCHEMA = defineSchema()({
+    id: "animated-gradient",
+    family: "background",
+    factory: "animatedGradient",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        swirl: { kind: "number", label: "Swirl", min: 0, max: 6, step: 0.1, default: 1.6, help: "Twist around the centre, radians." },
+        noise: { kind: "number", label: "Roughness", min: 0, max: 1, step: 0.01, default: 0.4 },
+        colors: { ...colorsField(["color-mix(in oklab, var(--color-sx-accent) 35%, var(--color-sx-secondary))", "var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-accent) 50%, var(--color-sx-primary))"], 1, 3) },
+        seed: seedField(),
+    },
+});

package/dist/backgrounds/effects/shader/aurora.d.ts

@@ -0,0 +1,21 @@
+import type { CssEffect, EffectMeta, LayerOptions, WebglEffect } from "../../types.js";
+export declare const AURORA_META: EffectMeta;
+export interface AuroraOptions extends LayerOptions {
+    /** 1 = default pace; 0.5 = half as fast. */
+    readonly speed?: number;
+    /** Up to 6 CSS colours; defaults to the theme's accent family. */
+    readonly colors?: readonly string[];
+    /** Number of light blobs (2–8). */
+    readonly blobs?: number;
+    readonly seed?: number;
+    /** `webgl`: light curtains drawn by a shader (mid tier; the CSS blobs are its fallback). Default `css`. */
+    readonly renderer?: "css" | "webgl";
+}
+/** Large soft colour fields drifting slowly. `renderer: "webgl"` draws light curtains instead. */
+export declare function aurora(options: AuroraOptions & {
+    readonly renderer: "webgl";
+}): WebglEffect;
+export declare function aurora(options?: AuroraOptions & {
+    readonly renderer?: "css";
+}): CssEffect;
+export declare function aurora(options?: AuroraOptions): CssEffect | WebglEffect;

package/dist/backgrounds/effects/shader/aurora.js

@@ -0,0 +1,64 @@
+import { between, rng, round } from "../../runtime/rng.js";
+import { defineCssEffect, duration } from "../define.js";
+import { paletteRef, paletteVars } from "../palette.js";
+import { auroraWebgl } from "./auroraGl.js";
+export const AURORA_META = {
+    id: "aurora",
+    label: "Aurora / northern lights",
+    category: "shader",
+    family: "css",
+    cost: { kb: "~1 KB CSS / ~15–25 KB WebGL", cpu: 1, gpu: 2 },
+    tier: "all",
+    note: "Very common on SaaS sites. Keep it slow (8–20 s loops).",
+};
+// Soft blobs drawn with radial-gradient (already soft, so no costly
+// filter: blur) and moved only with transform.
+const CSS = `@layer components {
+  :where([data-sx-bg="aurora"] [data-sx-bg-part="blob"]) {
+    position: absolute;
+    inset-inline-start: var(--x);
+    inset-block-start: var(--y);
+    inline-size: var(--s);
+    aspect-ratio: 1.5;
+    translate: -50% -50%;
+    border-radius: 50%;
+    background: radial-gradient(closest-side, var(--c), transparent);
+    opacity: var(--o);
+    animation: sx-bg-aurora ${duration("var(--d)")} ease-in-out var(--delay) infinite alternate;
+    will-change: transform;
+  }
+  @keyframes sx-bg-aurora {
+    to { transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--r)) scale(var(--k)); }
+  }
+}`;
+export function aurora(options = {}) {
+    const css = auroraCss(options);
+    return options.renderer === "webgl" ? auroraWebgl(AURORA_META, options, css) : css;
+}
+function auroraCss(options) {
+    const palette = paletteVars(options.colors);
+    const r = rng(options.seed ?? 7);
+    const count = Math.min(8, Math.max(2, Math.round(options.blobs ?? 4)));
+    const nodes = [];
+    for (let i = 0; i < count; i++) {
+        const d = round(between(r, 12, 22), 1);
+        nodes.push({
+            part: "blob",
+            vars: {
+                "--x": `${round(between(r, 10, 90), 1)}%`,
+                "--y": `${round(between(r, 15, 70), 1)}%`,
+                "--s": `${round(between(r, 55, 90), 1)}cqmax`,
+                "--o": round(between(r, 0.45, 0.75)),
+                "--c": paletteRef(i, palette.count),
+                "--dx": `${round(between(r, -22, 22), 1)}cqmax`,
+                "--dy": `${round(between(r, -14, 14), 1)}cqmax`,
+                "--r": `${round(between(r, -40, 40), 0)}deg`,
+                "--k": round(between(r, 0.8, 1.3)),
+                "--d": `${d}s`,
+                // a negative delay starts each blob mid-way, so the first frame is already varied
+                "--delay": `${-round(between(r, 0, d), 1)}s`,
+            },
+        });
+    }
+    return defineCssEffect(AURORA_META, CSS, options, { vars: palette.vars, nodes });
+}

package/dist/backgrounds/effects/shader/aurora.schema.d.ts

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

package/dist/backgrounds/effects/shader/aurora.schema.js

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const AURORA_SCHEMA = defineSchema()({
+    id: "aurora",
+    family: "background",
+    factory: "aurora",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        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) },
+        blobs: { kind: "integer", label: "Light blobs", min: 2, max: 8, default: 4 },
+        seed: seedField(7),
+        renderer: { kind: "choice", label: "Renderer", values: ["css", "webgl"], labels: { "css": "CSS blobs (every device)", "webgl": "WebGL curtains (mid+)" }, default: "css" },
+    },
+});

package/dist/backgrounds/effects/shader/auroraGl.d.ts

@@ -0,0 +1,8 @@
+import type { CssEffect, EffectMeta, LayerOptions, WebglEffect } from "../../types.js";
+/** Same id and atlas row as the CSS aurora; the WebGL version is the atlas's "Mid+" variant. */
+export declare const AURORA_GL_META: (meta: EffectMeta) => EffectMeta;
+export declare function auroraWebgl(meta: EffectMeta, options: LayerOptions & {
+    readonly speed?: number;
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}, fallback: CssEffect): WebglEffect;

package/dist/backgrounds/effects/shader/auroraGl.js

@@ -0,0 +1,47 @@
+import { defineWebglEffect } from "../define.js";
+import { SX_PALETTE } from "../palette.js";
+import { GLSL_NOISE, GLSL_SPACE, slots } from "../shaderKit.js";
+/** Same id and atlas row as the CSS aurora; the WebGL version is the atlas's "Mid+" variant. */
+export const AURORA_GL_META = (meta) => ({
+    ...meta,
+    family: "webgl",
+    tier: "mid",
+    cost: { kb: "~2 KB (own runner)", cpu: 1, gpu: 2 },
+    note: "WebGL curtains with vertical rays; the CSS blobs are its fallback.",
+});
+// Three curtains of light: each hangs from a wavy baseline and fades
+// upward, broken into vertical rays by noise that drifts along the curtain.
+// Additive light on transparent, like the CSS version.
+const FRAGMENT = `
+uniform vec4 u_c0;
+uniform vec4 u_c1;
+uniform vec4 u_c2;
+uniform float u_speed;
+uniform float u_seed;
+${GLSL_NOISE}${GLSL_SPACE}
+void main() {
+  vec2 p = sx_centered();
+  float t = u_time * u_speed * 0.12 + u_seed * 4.0;
+  vec3 light = vec3(0.0);
+  for (int i = 0; i < 3; i++) {
+    float fi = float(i);
+    float base = 0.05 - fi * 0.11 + 0.1 * sin(p.x * 1.2 + t * 1.3 + fi * 2.0) + 0.05 * sin(p.x * 3.1 - t + fi);
+    float d = p.y - base;
+    float rays = 0.35 + 0.65 * sx_noise(vec2(p.x * 7.0 + fi * 13.0, t * 0.8));
+    float curtain = smoothstep(-0.02, 0.03, d) * exp(-max(d, 0.0) * (3.0 + fi)) * rays;
+    vec3 col = u_c0.rgb;
+    if (fi > 0.5) col = u_c1.rgb;
+    if (fi > 1.5) col = u_c2.rgb;
+    light += col * curtain * 0.7;
+  }
+  light = min(light, vec3(1.0));
+  gl_FragColor = vec4(light, max(light.r, max(light.g, light.b)));
+}
+`;
+export function auroraWebgl(meta, options, fallback) {
+    return defineWebglEffect(AURORA_GL_META(meta), FRAGMENT, options, {
+        colors: slots(options.colors, SX_PALETTE),
+        uniforms: { u_speed: options.speed ?? 1, u_seed: options.seed ?? 0 },
+        fallback,
+    });
+}

package/dist/backgrounds/effects/shader/caustics.d.ts

@@ -0,0 +1,12 @@
+import type { EffectMeta, LayerOptions, WebglEffect } from "../../types.js";
+export declare const CAUSTICS_META: EffectMeta;
+export interface CausticsOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Size of the light cells: larger = more, smaller cells. */
+    readonly scale?: number;
+    /** Three colours: deep water, shallow water, light. */
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** Shimmering lines of light on the bottom of a pool. */
+export declare function caustics(options?: CausticsOptions): WebglEffect;

package/dist/backgrounds/effects/shader/caustics.js

@@ -0,0 +1,68 @@
+import { defineWebglEffect } from "../define.js";
+import { GLSL_NOISE, GLSL_OUT, GLSL_SPACE, slots, stillFallback } from "../shaderKit.js";
+export const CAUSTICS_META = {
+    id: "caustics",
+    label: "Caustics (light through water)",
+    category: "shader",
+    family: "webgl",
+    cost: { kb: "~3 KB (own runner, no library)", cpu: 1, gpu: 3 },
+    tier: "mid",
+    note: "Good for pools, spa or summer themes.",
+};
+// Light focused by a moving water surface gathers along thin, wobbling
+// lines between cells. Here: the edges of a Voronoi pattern whose points
+// circle slowly (distance to the nearest point minus distance to the second
+// nearest is ~0 on an edge), in two layers, over a deep-to-shallow gradient.
+const FRAGMENT = `
+uniform vec4 u_c0;
+uniform vec4 u_c1;
+uniform vec4 u_c2;
+uniform float u_speed;
+uniform float u_scale;
+uniform float u_seed;
+${GLSL_NOISE}${GLSL_SPACE}${GLSL_OUT}
+float edges(vec2 p, float t) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  float f1 = 8.0;
+  float f2 = 8.0;
+  for (int y = -1; y <= 1; y++) {
+    for (int x = -1; x <= 1; x++) {
+      vec2 g = vec2(float(x), float(y));
+      vec2 h = vec2(sx_hash(i + g), sx_hash(i + g + 17.3));
+      vec2 o = 0.5 + 0.45 * sin(t + 6.2831 * h);
+      float d = length(g + o - f);
+      if (d < f1) {
+        f2 = f1;
+        f1 = d;
+      } else if (d < f2) {
+        f2 = d;
+      }
+    }
+  }
+  return f2 - f1;
+}
+void main() {
+  vec2 p = sx_centered() * u_scale + u_seed * 7.0;
+  float t = u_time * u_speed * 0.6;
+  p += 0.3 * (vec2(sx_noise(p * 0.7 + t * 0.2), sx_noise(p * 0.7 - t * 0.2 + 3.0)) - 0.5);
+  float e1 = edges(p, t);
+  float e2 = edges(p * 1.7 + 3.1, t * 1.3);
+  float light = pow(1.0 - smoothstep(0.0, 0.12, e1), 4.0) + 0.45 * pow(1.0 - smoothstep(0.0, 0.1, e2), 4.0);
+  vec3 water = mix(u_c0.rgb, u_c1.rgb, v_uv.y * 0.7 + 0.15);
+  gl_FragColor = sx_out(mix(water, u_c2.rgb, clamp(light * 0.6, 0.0, 1.0)), 1.0);
+}
+`;
+/** Shimmering lines of light on the bottom of a pool. */
+export function caustics(options = {}) {
+    const colors = slots(options.colors, [
+        "color-mix(in oklab, var(--color-sx-accent) 35%, var(--color-sx-primary))",
+        "color-mix(in oklab, var(--color-sx-accent) 70%, var(--color-sx-secondary))",
+        "color-mix(in oklab, var(--color-sx-accent) 25%, white)",
+    ]);
+    return defineWebglEffect(CAUSTICS_META, FRAGMENT, options, {
+        colors,
+        uniforms: { u_speed: options.speed ?? 1, u_scale: Math.min(12, Math.max(1, options.scale ?? 4)), u_seed: options.seed ?? 0 },
+        fallback: stillFallback(CAUSTICS_META, "Still water: the deep-to-shallow gradient without the light.", "linear-gradient(to top, var(--sx-bg-c1), var(--sx-bg-c2))", options, colors),
+    });
+}

package/dist/backgrounds/effects/shader/caustics.schema.d.ts

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

package/dist/backgrounds/effects/shader/caustics.schema.js

@@ -0,0 +1,14 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const CAUSTICS_SCHEMA = defineSchema()({
+    id: "caustics",
+    family: "background",
+    factory: "caustics",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        scale: { kind: "number", label: "Cell density", min: 1, max: 12, step: 0.5, default: 4 },
+        colors: { ...colorsField(["color-mix(in oklab, var(--color-sx-accent) 35%, var(--color-sx-primary))", "color-mix(in oklab, var(--color-sx-accent) 70%, var(--color-sx-secondary))", "color-mix(in oklab, var(--color-sx-accent) 25%, white)"], 1, 3), help: "Deep water, shallow water, light." },
+        seed: seedField(),
+    },
+});

package/dist/backgrounds/effects/shader/chromaticSine.d.ts

@@ -0,0 +1,14 @@
+import type { EffectMeta, LayerOptions, WebglEffect } from "../../types.js";
+export declare const CHROMATIC_SINE_META: EffectMeta;
+export interface ChromaticSineOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Number of waves (1–6). */
+    readonly lines?: number;
+    /** How far the red and blue copies drift apart, 0–1. */
+    readonly split?: number;
+    /** A tint for the light. */
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** Glowing sine waves whose colours split apart where they bend. */
+export declare function chromaticSine(options?: ChromaticSineOptions): WebglEffect;

package/dist/backgrounds/effects/shader/chromaticSine.js

@@ -0,0 +1,54 @@
+import { defineWebglEffect } from "../define.js";
+import { GLSL_SPACE, slots, stillFallback } from "../shaderKit.js";
+export const CHROMATIC_SINE_META = {
+    id: "chromatic-sine",
+    label: "Chromatic Aberration WebGL Sine Wave",
+    category: "shader",
+    family: "webgl",
+    cost: { kb: "~2 KB (own runner, no Three.js)", cpu: 1, gpu: 3 },
+    tier: "mid",
+    note: "Three evaluations per pixel (one per colour channel); still fine on mid devices.",
+};
+// Glowing sine lines, each evaluated three times with the curve shifted a
+// little sideways per colour channel: red, green and blue part where the
+// line bends, like a lens's chromatic aberration. Pure light on transparent.
+const FRAGMENT = `
+uniform vec4 u_c0;
+uniform float u_speed;
+uniform float u_lines;
+uniform float u_split;
+uniform float u_seed;
+${GLSL_SPACE}
+void main() {
+  vec2 p = sx_centered();
+  float t = u_time * u_speed * 0.6 + u_seed * 2.0;
+  vec3 off = vec3(-u_split, 0.0, u_split) * 0.06;
+  vec3 light = vec3(0.0);
+  for (int i = 0; i < 6; i++) {
+    float fi = float(i);
+    if (fi >= u_lines) break;
+    float amp = 0.1 + 0.035 * fi;
+    float freq = 2.2 + fi * 0.55;
+    float phase = t * (0.7 + 0.12 * fi) + fi * 1.3;
+    float base = (fi - (u_lines - 1.0) * 0.5) * 0.07;
+    vec3 y = amp * sin((p.x + off) * freq + phase) + base;
+    light += 0.0028 / max(abs(vec3(p.y) - y), 0.0006);
+  }
+  light = min(light, vec3(1.0)) * mix(vec3(1.0), u_c0.rgb, 0.45);
+  gl_FragColor = vec4(light, max(light.r, max(light.g, light.b)));
+}
+`;
+/** Glowing sine waves whose colours split apart where they bend. */
+export function chromaticSine(options = {}) {
+    const colors = slots(options.colors, ["var(--color-sx-accent)"]);
+    return defineWebglEffect(CHROMATIC_SINE_META, FRAGMENT, options, {
+        colors,
+        uniforms: {
+            u_speed: options.speed ?? 1,
+            u_lines: Math.min(6, Math.max(1, Math.round(options.lines ?? 4))),
+            u_split: Math.min(1, Math.max(0, options.split ?? 0.5)),
+            u_seed: options.seed ?? 0,
+        },
+        fallback: stillFallback(CHROMATIC_SINE_META, "A still soft band of the tint colour.", "linear-gradient(transparent 40%, color-mix(in oklab, var(--sx-bg-c1) 35%, transparent) 50%, transparent 60%)", options, colors),
+    });
+}

package/dist/backgrounds/effects/shader/chromaticSine.schema.d.ts

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

package/dist/backgrounds/effects/shader/chromaticSine.schema.js

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const CHROMATIC_SINE_SCHEMA = defineSchema()({
+    id: "chromatic-sine",
+    family: "background",
+    factory: "chromaticSine",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        lines: { kind: "integer", label: "Waves", min: 1, max: 6, default: 4 },
+        split: { kind: "number", label: "Colour split", min: 0, max: 1, step: 0.01, default: 0.5 },
+        colors: { ...colorsField(["var(--color-sx-accent)"], 1, 1, "Tint") },
+        seed: seedField(),
+    },
+});

package/dist/backgrounds/effects/shader/godRays.d.ts

@@ -0,0 +1,14 @@
+import type { EffectMeta, LayerOptions, WebglEffect } from "../../types.js";
+export declare const GOD_RAYS_META: EffectMeta;
+export interface GodRaysOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Where the light sits along the top, 0 (inline start) to 1 (inline end). */
+    readonly source?: number;
+    /** Overall brightness, 0–1. */
+    readonly intensity?: number;
+    /** Two colours: near the source and far from it. */
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** Soft beams of light fanning down from above. */
+export declare function godRays(options?: GodRaysOptions): WebglEffect;

package/dist/backgrounds/effects/shader/godRays.js

@@ -0,0 +1,51 @@
+import { defineWebglEffect } from "../define.js";
+import { GLSL_NOISE, GLSL_OUT, slots, stillFallback } from "../shaderKit.js";
+export const GOD_RAYS_META = {
+    id: "god-rays",
+    label: "Light beams / god rays",
+    category: "shader",
+    family: "webgl",
+    cost: { kb: "~2 KB (own runner instead of Three.js)", cpu: 1, gpu: 3 },
+    tier: "mid",
+    note: "Beams fanning from a light above the layer. Raw WebGL instead of a Three.js volumetric scene.",
+};
+// Rays are noise read around a circle: the angle from the light source picks
+// the noise value, so brightness changes across angles but not along a ray.
+// Two noise frequencies give broad and fine beams; light falls off with
+// distance and outside a downward cone. Additive light on transparent.
+const FRAGMENT = `
+uniform vec4 u_c0;
+uniform vec4 u_c1;
+uniform float u_speed;
+uniform float u_source;
+uniform float u_intensity;
+uniform float u_seed;
+${GLSL_NOISE}${GLSL_OUT}
+void main() {
+  float sourceX = mix(u_source, 1.0 - u_source, u_rtl);
+  vec2 d = v_uv - vec2(sourceX, 1.15);
+  d.x *= u_resolution.x / u_resolution.y;
+  float angle = atan(d.x, -d.y);
+  float dist = length(d);
+  float t = u_time * u_speed * 0.12 + u_seed * 5.0;
+  float rays = sx_noise(vec2(angle * 9.0, t)) * 0.65 + sx_noise(vec2(angle * 26.0 + 3.0, t * 1.7)) * 0.35;
+  rays = pow(rays, 2.0);
+  float fall = exp(-dist * 1.3) * (1.0 - smoothstep(0.5, 1.3, abs(angle)));
+  vec3 c = mix(u_c0.rgb, u_c1.rgb, clamp(dist * 0.8, 0.0, 1.0));
+  gl_FragColor = sx_out(c, rays * fall * u_intensity * 1.6);
+}
+`;
+/** Soft beams of light fanning down from above. */
+export function godRays(options = {}) {
+    const colors = slots(options.colors, ["color-mix(in oklab, var(--color-sx-accent) 45%, white)", "var(--color-sx-accent)"]);
+    return defineWebglEffect(GOD_RAYS_META, FRAGMENT, options, {
+        colors,
+        uniforms: {
+            u_speed: options.speed ?? 1,
+            u_source: Math.min(1, Math.max(0, options.source ?? 0.3)),
+            u_intensity: Math.min(1, Math.max(0, options.intensity ?? 0.7)),
+            u_seed: options.seed ?? 0,
+        },
+        fallback: stillFallback(GOD_RAYS_META, "Still beams from a conic gradient, masked to fade downward.", "conic-gradient(from 160deg at 30% -15%, transparent 0deg, color-mix(in oklab, var(--sx-bg-c1) 30%, transparent) 6deg, transparent 12deg, color-mix(in oklab, var(--sx-bg-c1) 22%, transparent) 20deg, transparent 27deg, color-mix(in oklab, var(--sx-bg-c2) 25%, transparent) 33deg, transparent 40deg)", options, colors),
+    });
+}

package/dist/backgrounds/effects/shader/godRays.schema.d.ts

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

package/dist/backgrounds/effects/shader/godRays.schema.js

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const GOD_RAYS_SCHEMA = defineSchema()({
+    id: "god-rays",
+    family: "background",
+    factory: "godRays",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        source: { kind: "number", label: "Light position", min: 0, max: 1, step: 0.01, default: 0.3, help: "Along the top, start to end." },
+        intensity: { kind: "number", label: "Brightness", min: 0, max: 1, step: 0.01, default: 0.7 },
+        colors: { ...colorsField(["color-mix(in oklab, var(--color-sx-accent) 45%, white)", "var(--color-sx-accent)"], 1, 2), help: "Near the source, then far from it." },
+        seed: seedField(),
+    },
+});

package/dist/backgrounds/effects/shader/gooeyBlobs.d.ts

@@ -0,0 +1,13 @@
+import type { EffectMeta, LayerOptions, SvgEffect } from "../../types.js";
+export declare const GOOEY_BLOBS_META: EffectMeta;
+export interface GooeyBlobsOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Number of blobs (2–12). */
+    readonly count?: number;
+    /** How far they wander, as a fraction of the layer. */
+    readonly spread?: number;
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** Coloured blobs that merge and split like liquid. */
+export declare function gooeyBlobs(options?: GooeyBlobsOptions): SvgEffect;