@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/backgrounds/effects/three/kit.js

@@ -0,0 +1,126 @@
+// ---------------------------------------------------------------------------
+// Running Three.js inside the background runtime. A Three.js effect is an
+// ordinary GpuProgram: the WebGL host makes the context (and hands it back
+// off screen), Three.js renders into it. So the ~16-context budget, pausing,
+// reduced motion and the fallback chain all work the same as for raw WebGL.
+// ---------------------------------------------------------------------------
+import * as THREE from "three";
+import { RoomEnvironment } from "three/addons/environments/RoomEnvironment.js";
+import { WebglUnavailable } from "../../runtime/webgl.js";
+/**
+ * A GpuProgram that runs a Three.js scene. Three.js r163+ needs WebGL2, so
+ * the program asks for it; the host's context attributes (premultiplied
+ * alpha, no antialias, low power) are kept.
+ */
+export function threeProgram(build, warmup = 0) {
+    return {
+        api: "webgl2",
+        warmup,
+        init(gl, frame, random) {
+            if (typeof WebGL2RenderingContext === "undefined" || !(gl instanceof WebGL2RenderingContext)) {
+                throw new WebglUnavailable("Three.js needs WebGL2");
+            }
+            const renderer = new THREE.WebGLRenderer({ canvas: gl.canvas, context: gl, alpha: true, premultipliedAlpha: true });
+            renderer.setPixelRatio(1); // the host already sized the canvas in device pixels
+            renderer.setSize(frame.width, frame.height, false);
+            renderer.setClearColor(0x000000, 0);
+            renderer.outputColorSpace = THREE.SRGBColorSpace;
+            const scene = new THREE.Scene();
+            const built = build({ renderer, scene, frame, random });
+            return { renderer, scene, built, width: frame.width, height: frame.height };
+        },
+        frame(_gl, s, f) {
+            if (f.width !== s.width || f.height !== s.height) {
+                s.renderer.setSize(f.width, f.height, false);
+                s.built.resize?.(f.width, f.height);
+                s.width = f.width;
+                s.height = f.height;
+            }
+            s.built.render(f);
+        },
+        dispose(_gl, s) {
+            s.built.dispose?.();
+            disposeTree(s.scene);
+            s.renderer.dispose();
+        },
+    };
+}
+/** Free every geometry, material and texture under `root`. */
+export function disposeTree(root) {
+    root.traverse((obj) => {
+        const mesh = obj;
+        mesh.geometry?.dispose();
+        const materials = Array.isArray(mesh.material) ? mesh.material : mesh.material ? [mesh.material] : [];
+        for (const m of materials) {
+            for (const value of Object.values(m))
+                if (value instanceof THREE.Texture)
+                    value.dispose();
+            m.dispose();
+        }
+    });
+    if (root instanceof THREE.Scene) {
+        if (root.environment)
+            root.environment.dispose();
+        if (root.background instanceof THREE.Texture)
+            root.background.dispose();
+    }
+}
+/** A resolved runtime colour as a Three.js colour (the runtime gives sRGB 0–1). */
+export function colour(c, target = new THREE.Color()) {
+    return target.setRGB(c?.[0] ?? 1, c?.[1] ?? 1, c?.[2] ?? 1, THREE.SRGBColorSpace);
+}
+/**
+ * Reflections without a download: Three.js's procedural studio room,
+ * prefiltered on the GPU into an environment map.
+ */
+export function roomEnvironment(renderer) {
+    const pmrem = new THREE.PMREMGenerator(renderer);
+    const room = new RoomEnvironment();
+    const texture = pmrem.fromScene(room, 0.04).texture;
+    disposeTree(room);
+    pmrem.dispose();
+    return texture;
+}
+/**
+ * Soft colour blobs painted on a 2D canvas: the thing glass refracts. Redrawn
+ * when the colours change (a theme switch). `colors[0]` is the base.
+ */
+export function backdropTexture() {
+    const canvas = document.createElement("canvas");
+    canvas.width = 512;
+    canvas.height = 256;
+    const ctx = canvas.getContext("2d");
+    const texture = new THREE.CanvasTexture(canvas);
+    texture.colorSpace = THREE.SRGBColorSpace;
+    let key = "";
+    const css = (c, a = 1) => `rgba(${Math.round((c?.[0] ?? 1) * 255)}, ${Math.round((c?.[1] ?? 1) * 255)}, ${Math.round((c?.[2] ?? 1) * 255)}, ${a})`;
+    return {
+        texture,
+        paint(colors) {
+            const next = colors.map((c) => c.join()).join("|");
+            if (!ctx || next === key)
+                return;
+            key = next;
+            ctx.fillStyle = css(colors[0]);
+            ctx.fillRect(0, 0, 512, 256);
+            const spots = [[120, 90, 150], [380, 70, 130], [300, 210, 160], [60, 220, 110]];
+            spots.forEach(([x, y, r], i) => {
+                const g = ctx.createRadialGradient(x, y, 0, x, y, r);
+                g.addColorStop(0, css(colors[1 + (i % Math.max(1, colors.length - 1))], 0.95));
+                g.addColorStop(1, css(colors[1 + (i % Math.max(1, colors.length - 1))], 0));
+                ctx.fillStyle = g;
+                ctx.fillRect(0, 0, 512, 256);
+            });
+            // a few hard stripes, so refraction has edges to bend
+            ctx.fillStyle = css(colors[colors.length - 1], 0.35);
+            for (let x = 20; x < 512; x += 64)
+                ctx.fillRect(x, 0, 6, 256);
+            texture.needsUpdate = true;
+        },
+    };
+}
+/** The pointer, or a slow wandering point while there is none: 0–1, y up. */
+export function aimPoint(f) {
+    return f.pointerIn ? f.pointer : [0.5 + 0.32 * Math.sin(f.time * 0.45), 0.5 + 0.26 * Math.sin(f.time * 0.71 + 1.1)];
+}
+export { THREE };

package/dist/backgrounds/effects/three/liquidGlass.d.ts

@@ -0,0 +1,11 @@
+import type { LayerOptions, WebglEffect } from "../../types.js";
+export interface LiquidGlassOptions extends LayerOptions {
+    readonly speed?: number;
+    /** How much the blob wobbles, 0–1. */
+    readonly wobble?: number;
+    /** Four colours: the backdrop base and three colour pools the glass bends. */
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** A molten glass blob with droplets circling it, refracting a soft colour backdrop. */
+export declare function liquidGlass(options?: LiquidGlassOptions): WebglEffect;

package/dist/backgrounds/effects/three/liquidGlass.js

@@ -0,0 +1,55 @@
+import { defineGpuEffect } from "../define.js";
+import { SX_FIELD, slots, stillFallback } from "../shaderKit.js";
+import { LIQUID_GLASS_META } from "./metas.js";
+import { THREE, colour, threeProgram } from "./kit.js";
+import { stage } from "./stage.js";
+/** A molten glass blob with droplets circling it, refracting a soft colour backdrop. */
+export function liquidGlass(options = {}) {
+    const colors = slots(options.colors, SX_FIELD);
+    const speed = options.speed ?? 1;
+    const wobble = Math.min(1, Math.max(0, options.wobble ?? 0.6));
+    return defineGpuEffect(LIQUID_GLASS_META, threeProgram((ctx) => {
+        const set = stage(ctx, { backdrop: true, lean: 0.6 });
+        const glass = new THREE.MeshPhysicalMaterial({
+            transmission: 1,
+            thickness: 1.4,
+            roughness: 0.05,
+            ior: 1.45,
+            clearcoat: 1,
+            iridescence: 0.25,
+        });
+        // the blob's surface moves on the GPU: three sine fields push each vertex along its normal
+        const time = { value: 0 };
+        glass.onBeforeCompile = (shader) => {
+            shader.uniforms.uTime = time;
+            shader.vertexShader = `uniform float uTime;\n${shader.vertexShader}`.replace("#include <begin_vertex>", `#include <begin_vertex>
+  float n = sin(position.x * 2.1 + uTime) * sin(position.y * 2.7 - uTime * 1.2) * sin(position.z * 1.9 + uTime * 0.8);
+  transformed += normal * n * ${(0.3 * wobble).toFixed(3)};`);
+        };
+        const blob = new THREE.Mesh(new THREE.IcosahedronGeometry(1.15, 24), glass);
+        set.group.add(blob);
+        const droplets = [0.32, 0.22, 0.16].map((r) => {
+            const m = new THREE.Mesh(new THREE.SphereGeometry(r, 32, 16), glass);
+            set.group.add(m);
+            return m;
+        });
+        return {
+            resize: set.resize,
+            render(f) {
+                const t = f.time * speed;
+                time.value = t * 0.8;
+                blob.rotation.set(t * 0.15, t * 0.22, 0);
+                droplets.forEach((d, i) => {
+                    const a = t * (0.5 + i * 0.17) + i * 2.1;
+                    d.position.set(Math.cos(a) * (1.75 + i * 0.2), Math.sin(a * 1.3) * 0.7, Math.sin(a) * 0.9);
+                });
+                colour(f.colors[2], glass.attenuationColor);
+                set.update(f);
+                ctx.renderer.render(ctx.scene, set.camera);
+            },
+        };
+    }), options, {
+        colors,
+        fallback: stillFallback(LIQUID_GLASS_META, "A still glassy highlight over the colour pools.", "radial-gradient(circle at 48% 45%, color-mix(in oklab, white 35%, transparent), transparent 22%), radial-gradient(ellipse 28% 38% at 50% 50%, var(--sx-bg-c3), transparent 70%), radial-gradient(circle at 25% 35%, var(--sx-bg-c2), transparent 55%), var(--sx-bg-c1)", options, colors),
+    });
+}

package/dist/backgrounds/effects/three/liquidGlass.schema.d.ts

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

package/dist/backgrounds/effects/three/liquidGlass.schema.js

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const LIQUID_GLASS_SCHEMA = defineSchema()({
+    id: "liquid-glass",
+    family: "background",
+    factory: "liquidGlass",
+    entry: "@sharedex/ui/three",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        wobble: { kind: "number", label: "Wobble", min: 0, max: 1, step: 0.01, default: 0.6 },
+        colors: { ...colorsField(["var(--color-sx-secondary)", "var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-accent) 50%, var(--color-sx-primary))", "color-mix(in oklab, var(--color-sx-accent) 35%, var(--color-sx-secondary))"], 1, 4), help: "The backdrop, then three colour pools the glass bends." },
+        seed: seedField(),
+    },
+});

package/dist/backgrounds/effects/three/metas.d.ts

@@ -0,0 +1,7 @@
+import type { EffectMeta } from "../../types.js";
+export declare const LIQUID_GLASS_META: EffectMeta;
+export declare const GLASS_SHAPES_META: EffectMeta;
+export declare const CHROME_META: EffectMeta;
+export declare const SPECTRAL_GHOST_META: EffectMeta;
+export declare const WOVEN_LIGHT_META: EffectMeta;
+export declare const NEON_TUBES_META: EffectMeta;

package/dist/backgrounds/effects/three/metas.js

@@ -0,0 +1,66 @@
+// ---------------------------------------------------------------------------
+// Metadata of the Three.js effects. Kept apart from the effects themselves so
+// the registry (in the main entry) can list them without importing three:
+// only `@sharedex/ui/three` does that.
+// ---------------------------------------------------------------------------
+const THREE_KB = "~170 KB (Three.js, shared by every effect on the page)";
+export const LIQUID_GLASS_META = {
+    id: "liquid-glass",
+    label: "Liquid Glass 3D Shapes",
+    category: "glass",
+    family: "three",
+    cost: { kb: THREE_KB, cpu: 2, gpu: 4 },
+    tier: "high",
+    needs: { pointer: true },
+    note: "Real-time glass refraction is one of the most expensive effects on the web. No model or HDR download.",
+};
+export const GLASS_SHAPES_META = {
+    id: "glass-shapes",
+    label: "3D Glass Abstract Shapes",
+    category: "glass",
+    family: "three",
+    cost: { kb: THREE_KB, cpu: 2, gpu: 4 },
+    tier: "high",
+    needs: { pointer: true },
+    note: "Use a pre-rendered image (the fallback slot) unless the shapes must react to the user.",
+};
+export const CHROME_META = {
+    id: "chrome",
+    label: "Abstract 3D Chrome Elements",
+    category: "glass",
+    family: "three",
+    cost: { kb: THREE_KB, cpu: 2, gpu: 3 },
+    tier: "high",
+    needs: { pointer: true },
+    note: "Reflections come from a procedural room built on the GPU: no 1–5 MB HDR file.",
+};
+export const SPECTRAL_GHOST_META = {
+    id: "spectral-ghost",
+    label: "Interactive Spectral 3D Ghost Effect",
+    category: "glass",
+    family: "three",
+    cost: { kb: THREE_KB, cpu: 2, gpu: 4 },
+    tier: "high",
+    needs: { pointer: true },
+    note: "Each post-processing pass (bloom, distortion) re-paints the full screen again.",
+};
+export const WOVEN_LIGHT_META = {
+    id: "woven-light",
+    label: "Woven Light Hero",
+    category: "glass",
+    family: "three",
+    cost: { kb: THREE_KB, cpu: 2, gpu: 3 },
+    tier: "mid",
+    needs: { pointer: true },
+    note: "Thousands of light particles react to the cursor (fewer on touch screens). Test on a low phone.",
+};
+export const NEON_TUBES_META = {
+    id: "neon-tubes",
+    label: "Neon 3D Tubes Cursor Trail",
+    category: "cursor",
+    family: "three",
+    cost: { kb: THREE_KB, cpu: 2, gpu: 4 },
+    tier: "high",
+    needs: { pointer: true },
+    note: "Bloom post-processing is the heavy part. Without a mouse the trail follows a wandering path.",
+};

package/dist/backgrounds/effects/three/neonTubes.d.ts

@@ -0,0 +1,29 @@
+import type { LayerOptions, WebglEffect } from "../../types.js";
+export interface NeonTubesOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Number of tubes braided along the trail (1–5). */
+    readonly tubes?: number;
+    /** Trail length in points (10–120). */
+    readonly length?: number;
+    /** Bloom strength, 0–3. */
+    readonly bloom?: number;
+    /** One colour per tube (cycled). The layer is transparent: the page shows behind the glow. */
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** Points along the trail -> points along one braided tube around it (pure: tested). */
+export declare function braid(trail: readonly (readonly [number, number])[], index: number, tubes: number, time: number): [number, number, number][];
+/** Rings along each tube and vertices around each ring. Fixed, so a tube's buffers never change size. */
+export declare const TUBE_SEGMENTS = 96;
+export declare const TUBE_RADIAL = 8;
+/** Triangles for a tube of `segments` × `radial` quads (rings carry `radial + 1` vertices: a seam). Pure. */
+export declare function tubeIndices(segments: number, radial: number): Uint16Array;
+/**
+ * Writes a tube of `radius` around a Catmull-Rom curve through `path` into
+ * `out` (`(segments + 1) * (radial + 1) * 3` floats), in place: no curve
+ * object, no new buffers, nothing for the garbage collector. Each ring sits
+ * in the plane across the curve's direction, oriented against the z axis
+ * (the trail lies near z = 0, so the direction is never parallel to it). Pure.
+ */
+export declare function writeTube(out: Float32Array, path: readonly (readonly [number, number, number])[], segments: number, radial: number, radius: number): void;
+export declare function neonTubes(options?: NeonTubesOptions): WebglEffect;

package/dist/backgrounds/effects/three/neonTubes.js

@@ -0,0 +1,162 @@
+import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
+import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
+import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
+import { OutputPass } from "three/addons/postprocessing/OutputPass.js";
+import { defineGpuEffect } from "../define.js";
+import { SX_GLOW, slots, stillFallback } from "../shaderKit.js";
+import { NEON_TUBES_META } from "./metas.js";
+import { THREE, aimPoint, colour, threeProgram } from "./kit.js";
+/** Points along the trail -> points along one braided tube around it (pure: tested). */
+export function braid(trail, index, tubes, time) {
+    const n = trail.length;
+    return trail.map(([x, y], i) => {
+        const taper = 1 - i / Math.max(1, n - 1); // full width at the head, none at the tail
+        const a = i * 0.35 - time * 2 + (index * Math.PI * 2) / tubes;
+        const r = tubes > 1 ? 0.14 * taper : 0;
+        return [x + Math.cos(a) * r, y + Math.sin(a) * r, Math.sin(a) * r];
+    });
+}
+/** Rings along each tube and vertices around each ring. Fixed, so a tube's buffers never change size. */
+export const TUBE_SEGMENTS = 96;
+export const TUBE_RADIAL = 8;
+/** Triangles for a tube of `segments` × `radial` quads (rings carry `radial + 1` vertices: a seam). Pure. */
+export function tubeIndices(segments, radial) {
+    const out = new Uint16Array(segments * radial * 6);
+    let k = 0;
+    for (let i = 0; i < segments; i++) {
+        for (let j = 0; j < radial; j++) {
+            const a = i * (radial + 1) + j;
+            const b = a + radial + 1;
+            out.set([a, b, a + 1, b, b + 1, a + 1], k);
+            k += 6;
+        }
+    }
+    return out;
+}
+/**
+ * Writes a tube of `radius` around a Catmull-Rom curve through `path` into
+ * `out` (`(segments + 1) * (radial + 1) * 3` floats), in place: no curve
+ * object, no new buffers, nothing for the garbage collector. Each ring sits
+ * in the plane across the curve's direction, oriented against the z axis
+ * (the trail lies near z = 0, so the direction is never parallel to it). Pure.
+ */
+export function writeTube(out, path, segments, radial, radius) {
+    const n = path.length;
+    if (n < 2) {
+        out.fill(0);
+        return;
+    }
+    const at = (i) => path[Math.min(n - 1, Math.max(0, i))] ?? [0, 0, 0];
+    let w = 0;
+    for (let i = 0; i <= segments; i++) {
+        const t = (i / segments) * (n - 1);
+        const k = Math.min(n - 2, Math.floor(t));
+        const u = t - k;
+        const p0 = at(k - 1);
+        const p1 = at(k);
+        const p2 = at(k + 1);
+        const p3 = at(k + 2);
+        const pos = [0, 0, 0];
+        const tan = [0, 0, 0];
+        for (let c = 0; c < 3; c++) {
+            const a = p0[c] ?? 0;
+            const b = p1[c] ?? 0;
+            const d = p2[c] ?? 0;
+            const e = p3[c] ?? 0;
+            pos[c] = 0.5 * (2 * b + (-a + d) * u + (2 * a - 5 * b + 4 * d - e) * u * u + (-a + 3 * b - 3 * d + e) * u * u * u);
+            tan[c] = 0.5 * (-a + d + 2 * (2 * a - 5 * b + 4 * d - e) * u + 3 * (-a + 3 * b - 3 * d + e) * u * u);
+        }
+        // across = normalize(tan × z), up = across × tan (both unit, both across the curve)
+        let ax = tan[1] ?? 0;
+        let ay = -(tan[0] ?? 0);
+        const al = Math.hypot(ax, ay) || 1;
+        ax /= al;
+        ay /= al;
+        const tl = Math.hypot(tan[0] ?? 0, tan[1] ?? 0, tan[2] ?? 0) || 1;
+        const tx = (tan[0] ?? 0) / tl;
+        const ty = (tan[1] ?? 0) / tl;
+        const tz = (tan[2] ?? 0) / tl;
+        const ux = ay * tz;
+        const uy = -ax * tz;
+        const uz = ax * ty - ay * tx;
+        for (let j = 0; j <= radial; j++) {
+            const a = (j / radial) * Math.PI * 2;
+            const cs = Math.cos(a) * radius;
+            const sn = Math.sin(a) * radius;
+            out[w++] = (pos[0] ?? 0) + ax * cs + ux * sn;
+            out[w++] = (pos[1] ?? 0) + ay * cs + uy * sn;
+            out[w++] = (pos[2] ?? 0) + uz * sn;
+        }
+    }
+}
+// The pointer's recent path (or a wandering one) on the z = 0 plane. Every
+// frame each tube's vertices are rewritten in place along a smooth curve
+// through that path, braided around it and tapering to the tail: fixed-size
+// buffers, so nothing is allocated per frame. The colours are pure emission,
+// and bloom turns them into neon. The scene has no background: the glow lands
+// on the page itself, so light themes work too (a coloured background would
+// bloom as a whole).
+export function neonTubes(options = {}) {
+    const colors = slots(options.colors, SX_GLOW);
+    const speed = options.speed ?? 1;
+    const tubes = Math.min(5, Math.max(1, Math.round(options.tubes ?? 3)));
+    const length = Math.min(120, Math.max(10, Math.round(options.length ?? 48)));
+    const bloom = Math.min(3, Math.max(0, options.bloom ?? 0.9));
+    return defineGpuEffect(NEON_TUBES_META, threeProgram(({ renderer, scene, frame }) => {
+        const camera = new THREE.PerspectiveCamera(40, frame.width / frame.height, 0.1, 50);
+        camera.position.set(0, 0, 6);
+        const indices = new THREE.BufferAttribute(tubeIndices(TUBE_SEGMENTS, TUBE_RADIAL), 1);
+        const meshes = Array.from({ length: tubes }, () => {
+            const geometry = new THREE.BufferGeometry();
+            const position = new THREE.BufferAttribute(new Float32Array((TUBE_SEGMENTS + 1) * (TUBE_RADIAL + 1) * 3), 3);
+            position.setUsage(THREE.DynamicDrawUsage);
+            geometry.setAttribute("position", position);
+            geometry.setIndex(indices);
+            geometry.setDrawRange(0, 0);
+            const m = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ toneMapped: false }));
+            m.frustumCulled = false; // the buffer changes every frame; no bounds to keep current
+            scene.add(m);
+            return m;
+        });
+        const trail = [];
+        const composer = new EffectComposer(renderer);
+        composer.setPixelRatio(1);
+        composer.setSize(frame.width, frame.height);
+        composer.addPass(new RenderPass(scene, camera));
+        const bloomPass = new UnrealBloomPass(new THREE.Vector2(frame.width, frame.height), bloom, 0.2, 0.2);
+        composer.addPass(bloomPass);
+        composer.addPass(new OutputPass());
+        return {
+            resize(width, height) {
+                camera.aspect = width / height;
+                camera.updateProjectionMatrix();
+                composer.setSize(width, height);
+            },
+            render(f) {
+                const t = f.time * speed;
+                const [x, y] = aimPoint(f);
+                const h = Math.tan(THREE.MathUtils.degToRad(camera.fov / 2)) * camera.position.z;
+                trail.unshift([(x * 2 - 1) * h * camera.aspect, (y * 2 - 1) * h]);
+                if (trail.length > length)
+                    trail.length = length;
+                meshes.forEach((m, k) => {
+                    colour(f.colors[k % Math.max(1, f.colors.length)], m.material.color);
+                    if (trail.length < 4)
+                        return;
+                    const position = m.geometry.getAttribute("position");
+                    writeTube(position.array, braid(trail, k, tubes, t), TUBE_SEGMENTS, TUBE_RADIAL, 0.035);
+                    position.needsUpdate = true;
+                    m.geometry.setDrawRange(0, Infinity);
+                });
+                composer.render(f.delta);
+            },
+            dispose() {
+                bloomPass.dispose();
+                composer.dispose();
+            },
+        };
+    }, 60), options, {
+        colors,
+        fallback: stillFallback(NEON_TUBES_META, "A still neon squiggle glow (the atlas marks the live version desktop only).", "radial-gradient(ellipse 30% 6% at 45% 50%, color-mix(in oklab, var(--sx-bg-c1) 70%, transparent), transparent), radial-gradient(ellipse 20% 5% at 60% 46%, color-mix(in oklab, var(--sx-bg-c2) 60%, transparent), transparent)", options, colors),
+    });
+}

package/dist/backgrounds/effects/three/neonTubes.schema.d.ts

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

package/dist/backgrounds/effects/three/neonTubes.schema.js

@@ -0,0 +1,17 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const NEON_TUBES_SCHEMA = defineSchema()({
+    id: "neon-tubes",
+    family: "background",
+    factory: "neonTubes",
+    entry: "@sharedex/ui/three",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        tubes: { kind: "integer", label: "Tubes", min: 1, max: 5, default: 3 },
+        length: { kind: "integer", label: "Trail length", min: 10, max: 120, default: 48 },
+        bloom: { kind: "number", label: "Bloom", min: 0, max: 3, step: 0.05, default: 0.9 },
+        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) 50%, var(--color-sx-secondary))"], 1, 3), help: "One per tube (cycled)." },
+        seed: seedField(),
+    },
+});

package/dist/backgrounds/effects/three/spectralGhost.d.ts

@@ -0,0 +1,11 @@
+import type { LayerOptions, WebglEffect } from "../../types.js";
+export interface SpectralGhostOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Bloom strength, 0–3. */
+    readonly bloom?: number;
+    /** Three colours the ghost's rim shifts through. The layer is transparent: the page shows behind it. */
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** A glowing, shimmering ghost that follows the cursor, trailed by wisps. */
+export declare function spectralGhost(options?: SpectralGhostOptions): WebglEffect;

package/dist/backgrounds/effects/three/spectralGhost.js

@@ -0,0 +1,145 @@
+import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
+import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
+import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
+import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";
+import { OutputPass } from "three/addons/postprocessing/OutputPass.js";
+import { defineGpuEffect } from "../define.js";
+import { SX_GLOW, slots, stillFallback } from "../shaderKit.js";
+import { SPECTRAL_GHOST_META } from "./metas.js";
+import { THREE, aimPoint, colour, threeProgram } from "./kit.js";
+// The ghost is a sphere whose lower half ripples like a hem, drawn only as a
+// glowing rim (fresnel: bright where the surface turns away from the camera)
+// whose colour drifts through the palette. It eases after the pointer, trailed
+// by fading wisps that replay its recent path. Bloom makes it glow; a last pass
+// shimmers the picture like heat haze. No scene background: the glow lands on
+// the page itself (a coloured background would bloom as a whole on light themes).
+const GHOST_VERTEX = `uniform float uTime;
+varying vec3 vNormal;
+varying vec3 vView;
+varying float vLow;
+void main() {
+  vec3 p = position;
+  float hem = smoothstep(0.1, -1.0, p.y);
+  p.xz *= 1.0 + hem * 0.25;
+  p.y += hem * 0.18 * sin(atan(p.z, p.x) * 6.0 + uTime * 3.0);
+  p += normal * 0.04 * sin(uTime * 2.0 + p.y * 5.0);
+  vec4 world = modelViewMatrix * vec4(p, 1.0);
+  vNormal = normalize(normalMatrix * normal);
+  vView = normalize(-world.xyz);
+  vLow = hem;
+  gl_Position = projectionMatrix * world;
+}`;
+const GHOST_FRAGMENT = `uniform float uTime;
+uniform float uFade;
+uniform vec3 uA;
+uniform vec3 uB;
+uniform vec3 uC;
+varying vec3 vNormal;
+varying vec3 vView;
+varying float vLow;
+void main() {
+  float rim = pow(1.0 - abs(dot(vNormal, vView)), 2.2);
+  float k = 0.5 + 0.5 * sin(uTime * 0.7 + vNormal.y * 3.0);
+  vec3 c = mix(mix(uA, uB, k), uC, rim);
+  float a = (rim * 0.95 + 0.08) * (1.0 - vLow * 0.55) * uFade;
+  gl_FragColor = vec4(c * a, a);
+}`;
+const HAZE = {
+    uniforms: { tDiffuse: { value: null }, uTime: { value: 0 } },
+    vertexShader: `varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}`,
+    fragmentShader: `uniform sampler2D tDiffuse;
+uniform float uTime;
+varying vec2 vUv;
+void main() {
+  vec2 uv = vUv + 0.0025 * vec2(sin(vUv.y * 40.0 + uTime * 2.0), cos(vUv.x * 32.0 + uTime * 1.7));
+  gl_FragColor = texture2D(tDiffuse, uv);
+}`,
+};
+const TRAIL = 6;
+/** A glowing, shimmering ghost that follows the cursor, trailed by wisps. */
+export function spectralGhost(options = {}) {
+    const colors = slots(options.colors, SX_GLOW);
+    const speed = options.speed ?? 1;
+    const bloom = Math.min(3, Math.max(0, options.bloom ?? 1.1));
+    return defineGpuEffect(SPECTRAL_GHOST_META, threeProgram((ctx) => {
+        const { renderer, scene, frame } = ctx;
+        const camera = new THREE.PerspectiveCamera(40, frame.width / frame.height, 0.1, 50);
+        camera.position.set(0, 0, 7);
+        const make = (fade) => new THREE.ShaderMaterial({
+            vertexShader: GHOST_VERTEX,
+            fragmentShader: GHOST_FRAGMENT,
+            uniforms: {
+                uTime: { value: 0 },
+                uFade: { value: fade },
+                uA: { value: new THREE.Color() },
+                uB: { value: new THREE.Color() },
+                uC: { value: new THREE.Color() },
+            },
+            transparent: true,
+            depthWrite: false,
+            blending: THREE.CustomBlending,
+            blendSrc: THREE.OneFactor,
+            blendDst: THREE.OneMinusSrcAlphaFactor,
+        });
+        const geometry = new THREE.SphereGeometry(0.75, 64, 48);
+        const ghost = new THREE.Mesh(geometry, make(1));
+        scene.add(ghost);
+        const wisps = Array.from({ length: TRAIL }, (_, i) => {
+            const m = new THREE.Mesh(geometry, make(0.5 * (1 - i / TRAIL)));
+            m.scale.setScalar(0.8 - i * 0.1);
+            scene.add(m);
+            return m;
+        });
+        const path = Array.from({ length: TRAIL * 4 }, () => new THREE.Vector3());
+        const composer = new EffectComposer(renderer);
+        composer.setPixelRatio(1);
+        composer.setSize(frame.width, frame.height);
+        composer.addPass(new RenderPass(scene, camera));
+        const bloomPass = new UnrealBloomPass(new THREE.Vector2(frame.width, frame.height), bloom, 0.3, 0.12);
+        composer.addPass(bloomPass);
+        const haze = new ShaderPass(HAZE);
+        composer.addPass(haze);
+        composer.addPass(new OutputPass());
+        const target = new THREE.Vector3();
+        return {
+            resize(width, height) {
+                camera.aspect = width / height;
+                camera.updateProjectionMatrix();
+                composer.setSize(width, height);
+            },
+            render(f) {
+                const t = f.time * speed;
+                for (const m of [ghost, ...wisps]) {
+                    const u = m.material.uniforms;
+                    u.uTime.value = t;
+                    colour(f.colors[0], u.uA.value);
+                    colour(f.colors[1], u.uB.value);
+                    colour(f.colors[2], u.uC.value);
+                }
+                // the aim point on the z = 0 plane the camera looks at
+                const [x, y] = aimPoint(f);
+                const h = Math.tan(THREE.MathUtils.degToRad(camera.fov / 2)) * camera.position.z;
+                target.set((x * 2 - 1) * h * camera.aspect * 0.8, (y * 2 - 1) * h * 0.8, 0);
+                ghost.position.lerp(target, 1 - Math.pow(0.04, f.delta || 1 / 60));
+                ghost.rotation.y = Math.sin(t * 0.8) * 0.4;
+                ghost.position.y += Math.sin(t * 2) * 0.004;
+                path.pop();
+                path.unshift(ghost.position.clone());
+                wisps.forEach((w, i) => w.position.copy(path[(i + 1) * 4 - 1] ?? ghost.position));
+                haze.uniforms.uTime.value = t;
+                composer.render(f.delta);
+            },
+            dispose() {
+                bloomPass.dispose();
+                composer.dispose();
+            },
+        };
+    }, 30), options, {
+        colors,
+        fallback: stillFallback(SPECTRAL_GHOST_META, "A still soft glow in the ghost's colours.", "radial-gradient(circle at 50% 45%, color-mix(in oklab, var(--sx-bg-c3) 55%, transparent), transparent 22%), radial-gradient(ellipse 30% 35% at 50% 48%, color-mix(in oklab, var(--sx-bg-c1) 40%, transparent), transparent 70%)", options, colors),
+    });
+}

package/dist/backgrounds/effects/three/spectralGhost.schema.d.ts

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