@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/transitions/effects/shader/displacement.schema.js

@@ -0,0 +1,13 @@
+import { defineSchema } from "../../../schema/define.js";
+import { shaderFallbackField } from "../../../schema/common.js";
+export const DISPLACEMENT_SCHEMA = defineSchema()({
+    id: "displacement",
+    family: "transition",
+    factory: "displacement",
+    fields: {
+        strength: { kind: "number", label: "Strength", min: 0, max: 2, step: 0.05, default: 0.3 },
+        scale: { kind: "number", label: "Noise size", min: 0.1, max: 40, step: 0.1, default: 2.5, help: "Higher = finer grain." },
+        map: { kind: "text", label: "Displacement map", url: true, autoNote: "built-in noise", help: "A greyscale picture (same origin, or served with CORS).", advanced: true },
+        fallback: shaderFallbackField(),
+    },
+});

package/dist/transitions/effects/shader/dissolves.d.ts

@@ -0,0 +1,20 @@
+import type { ShaderTransition } from "../../types.js";
+import { type ShaderOptionsBase } from "./kit.js";
+export interface PixelDissolveOptions extends ShaderOptionsBase {
+    /** Blocks across the height at the coarsest moment (halfway). Default `16`. */
+    readonly cells?: number;
+}
+export declare const PIXEL_DISSOLVE_FRAGMENT = "\nuniform float u_cells;\nvec4 transition(vec2 uv) {\n  float p = u_progress;\n  vec2 coarse = vec2(max(1.0, floor(u_cells * sx_aspect() + 0.5)), u_cells);\n  float levels = max(log2(u_resolution.y / u_cells), 0.0);\n  float k = floor((1.0 - sin(p * SX_PI)) * levels + 0.5);\n  vec2 grid = coarse * exp2(k);\n  vec2 snapped = (floor(uv * grid) + 0.5) / grid;\n  float at = 0.3 + 0.4 * sx_hash(floor(uv * coarse));\n  return p < at ? getFrom(snapped) : getTo(snapped);\n}\n";
+/** Coarsens into blocks that switch to the new picture in random order, then sharpens again. */
+export declare function pixelDissolve(options?: PixelDissolveOptions): ShaderTransition;
+export interface NoiseBurnOptions extends ShaderOptionsBase {
+    /** Width of the glowing edge, 0–1. Default `0.06`. */
+    readonly edge?: number;
+    /** Size of the noise: higher = more ragged. Default `3`. */
+    readonly scale?: number;
+    /** The edge colour. Default `var(--color-sx-accent)`. */
+    readonly color?: string;
+}
+export declare const NOISE_BURN_FRAGMENT = "\nuniform float u_edge;\nuniform float u_scale;\nuniform vec4 u_c0;\nvec4 transition(vec2 uv) {\n  float n = sx_fbm(uv * vec2(sx_aspect(), 1.0) * u_scale);\n  float front = mix(-0.03, 1.0 + u_edge + 0.03, u_progress);\n  float d = n - front;\n  float keep = smoothstep(0.0, 0.015, d);\n  float open = 1.0 - smoothstep(-u_edge - 0.015, -u_edge, d);\n  vec4 rim = vec4(u_c0.rgb * u_c0.a, u_c0.a);\n  return mix(mix(rim, getFrom(uv), keep), getTo(uv), open);\n}\n";
+/** The old picture burns away along a glowing noise edge and uncovers the new one. */
+export declare function noiseBurn(options?: NoiseBurnOptions): ShaderTransition;

package/dist/transitions/effects/shader/dissolves.js

@@ -0,0 +1,52 @@
+// Shader transitions that swap pixels in place: pixelDissolve, noiseBurn.
+// Our own GLSL (WebGL1); see ../../shader/program.ts for the fragment contract.
+import { defineShader, within } from "./kit.js";
+// The block size doubles in steps towards the middle, so every block nests
+// inside one coarse cell, and each coarse cell switches at its own seeded
+// moment between 30% and 70%: no block is ever cut in two by the switch.
+export const PIXEL_DISSOLVE_FRAGMENT = `
+uniform float u_cells;
+vec4 transition(vec2 uv) {
+  float p = u_progress;
+  vec2 coarse = vec2(max(1.0, floor(u_cells * sx_aspect() + 0.5)), u_cells);
+  float levels = max(log2(u_resolution.y / u_cells), 0.0);
+  float k = floor((1.0 - sin(p * SX_PI)) * levels + 0.5);
+  vec2 grid = coarse * exp2(k);
+  vec2 snapped = (floor(uv * grid) + 0.5) / grid;
+  float at = 0.3 + 0.4 * sx_hash(floor(uv * coarse));
+  return p < at ? getFrom(snapped) : getTo(snapped);
+}
+`;
+/** Coarsens into blocks that switch to the new picture in random order, then sharpens again. */
+export function pixelDissolve(options = {}) {
+    return defineShader("pixelDissolve", PIXEL_DISSOLVE_FRAGMENT, {
+        uniforms: { u_cells: Math.round(within(options.cells ?? 16, 2, 200)) },
+        fallback: options.fallback,
+    });
+}
+// d > 0: the fire has not reached this pixel yet (old picture); a band of
+// `u_edge` behind the front glows; past it, the new picture. The front runs
+// from just below the lowest noise value to just past the highest, so p = 0
+// and p = 1 show one picture each, untouched.
+export const NOISE_BURN_FRAGMENT = `
+uniform float u_edge;
+uniform float u_scale;
+uniform vec4 u_c0;
+vec4 transition(vec2 uv) {
+  float n = sx_fbm(uv * vec2(sx_aspect(), 1.0) * u_scale);
+  float front = mix(-0.03, 1.0 + u_edge + 0.03, u_progress);
+  float d = n - front;
+  float keep = smoothstep(0.0, 0.015, d);
+  float open = 1.0 - smoothstep(-u_edge - 0.015, -u_edge, d);
+  vec4 rim = vec4(u_c0.rgb * u_c0.a, u_c0.a);
+  return mix(mix(rim, getFrom(uv), keep), getTo(uv), open);
+}
+`;
+/** The old picture burns away along a glowing noise edge and uncovers the new one. */
+export function noiseBurn(options = {}) {
+    return defineShader("noiseBurn", NOISE_BURN_FRAGMENT, {
+        uniforms: { u_edge: within(options.edge ?? 0.06, 0.005, 0.5), u_scale: within(options.scale ?? 3, 0.2, 40) },
+        colors: [options.color ?? "var(--color-sx-accent)"],
+        fallback: options.fallback,
+    });
+}

package/dist/transitions/effects/shader/dreamy.schema.d.ts

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

package/dist/transitions/effects/shader/dreamy.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+import { shaderFallbackField } from "../../../schema/common.js";
+export const DREAMY_SCHEMA = defineSchema()({
+    id: "dreamy",
+    family: "transition",
+    factory: "dreamy",
+    fields: {
+        waves: { kind: "number", label: "Waves", min: 0, max: 40, step: 1, default: 3 },
+        amplitude: { kind: "number", label: "Bend", min: 0, max: 0.3, step: 0.005, default: 0.04 },
+        fallback: shaderFallbackField(),
+    },
+});

package/dist/transitions/effects/shader/gridFlip.schema.d.ts

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

package/dist/transitions/effects/shader/gridFlip.schema.js

@@ -0,0 +1,13 @@
+import { defineSchema } from "../../../schema/define.js";
+import { shaderFallbackField } from "../../../schema/common.js";
+export const GRID_FLIP_SCHEMA = defineSchema()({
+    id: "gridFlip",
+    family: "transition",
+    factory: "gridFlip",
+    fields: {
+        columns: { kind: "integer", label: "Columns", min: 1, max: 24, default: 4 },
+        rows: { kind: "integer", label: "Rows", min: 1, max: 24, default: 3 },
+        backdrop: { kind: "color", label: "Behind the tiles", default: "var(--color-sx-primary)" },
+        fallback: shaderFallbackField(),
+    },
+});

package/dist/transitions/effects/shader/kit.d.ts

@@ -0,0 +1,32 @@
+import type { UniformValue } from "../../../backgrounds/types.js";
+import type { CssTransition, ShaderTransition, TransitionMeta } from "../../types.js";
+import type { From } from "../css/kit.js";
+/** The stylesheet key of the default fallback (one sheet for every shader). */
+export declare const SHADER_FADE_ID = "shader-fade";
+/**
+ * Without WebGL, or below `mid`: the new picture fades in over the old one.
+ * Plays on an `<img>` inside the fallback layer, whose `--sx-p` the host writes.
+ */
+export declare function shaderFade(meta: TransitionMeta): CssTransition;
+export interface ShaderOptionsBase {
+    /** Plays instead without WebGL or on a weaker device. Any CSS transition (`wipe()` …). Default: a fade. */
+    readonly fallback?: CssTransition;
+}
+export interface ShaderParts {
+    readonly uniforms?: Readonly<Record<string, UniformValue>>;
+    readonly colors?: readonly string[];
+    readonly map?: string | undefined;
+    readonly fallback?: CssTransition | undefined;
+}
+/**
+ * A shader transition from its registry id (or, for a part's private shader
+ * such as ScrollDistort's, its own meta), its fragment and its option values.
+ */
+export declare function defineShader(metaOrId: string | TransitionMeta, fragment: string, parts?: ShaderParts): ShaderTransition;
+/**
+ * The way the pictures travel, as `sx_dir()` expects it (reading order, y up):
+ * "start" = the new picture comes in from where reading starts.
+ */
+export declare function travel(from: From): readonly [number, number];
+/** Clamp an option into a range (shader maths breaks on silly values). */
+export declare const within: (value: number, min: number, max: number) => number;

package/dist/transitions/effects/shader/kit.js

@@ -0,0 +1,60 @@
+// Helpers for shader transitions: defineShader() and the CSS fade every one of
+// them falls back to. Pure; the GLSL contract is in ../../shader/program.ts.
+import { metaOf } from "../../registry.js";
+import { content, layer } from "../css/kit.js";
+/** The stylesheet key of the default fallback (one sheet for every shader). */
+export const SHADER_FADE_ID = "shader-fade";
+/**
+ * Without WebGL, or below `mid`: the new picture fades in over the old one.
+ * Plays on an `<img>` inside the fallback layer, whose `--sx-p` the host writes.
+ */
+export function shaderFade(meta) {
+    return {
+        kind: "css",
+        id: SHADER_FADE_ID,
+        tier: "all",
+        meta,
+        css: layer(`  ${content(SHADER_FADE_ID)} { opacity: var(--sx-p); }`),
+        vars: {},
+        nodes: [],
+    };
+}
+/**
+ * A shader transition from its registry id (or, for a part's private shader
+ * such as ScrollDistort's, its own meta), its fragment and its option values.
+ */
+export function defineShader(metaOrId, fragment, parts = {}) {
+    const meta = typeof metaOrId === "string" ? metaOf(metaOrId) : metaOrId;
+    const uniforms = parts.uniforms ?? {};
+    const colors = parts.colors ?? [];
+    return {
+        kind: "webgl",
+        id: meta.id,
+        tier: meta.tier,
+        meta,
+        fragment,
+        uniforms,
+        colors,
+        map: parts.map,
+        signature: JSON.stringify([meta.id, uniforms, colors, parts.map ?? null]),
+        css: "",
+        vars: {},
+        nodes: [],
+        fallback: parts.fallback ?? shaderFade(meta),
+    };
+}
+/**
+ * The way the pictures travel, as `sx_dir()` expects it (reading order, y up):
+ * "start" = the new picture comes in from where reading starts.
+ */
+export function travel(from) {
+    if (from === "start")
+        return [1, 0];
+    if (from === "end")
+        return [-1, 0];
+    if (from === "top")
+        return [0, -1];
+    return [0, 1];
+}
+/** Clamp an option into a range (shader maths breaks on silly values). */
+export const within = (value, min, max) => Math.min(max, Math.max(min, value));

package/dist/transitions/effects/shader/liquidMorph.schema.d.ts

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

package/dist/transitions/effects/shader/liquidMorph.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+import { shaderFallbackField } from "../../../schema/common.js";
+export const LIQUID_MORPH_SCHEMA = defineSchema()({
+    id: "liquidMorph",
+    family: "transition",
+    factory: "liquidMorph",
+    fields: {
+        strength: { kind: "number", label: "Strength", min: 0, max: 1, step: 0.01, default: 0.12 },
+        scale: { kind: "number", label: "Flow size", min: 0.1, max: 20, step: 0.1, default: 2, help: "Higher = smaller eddies." },
+        fallback: shaderFallbackField(),
+    },
+});

package/dist/transitions/effects/shader/morph.schema.d.ts

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

package/dist/transitions/effects/shader/morph.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+import { shaderFallbackField } from "../../../schema/common.js";
+export const MORPH_SCHEMA = defineSchema()({
+    id: "morph",
+    family: "transition",
+    factory: "morph",
+    fields: {
+        strength: { kind: "number", label: "Strength", min: 0, max: 1, step: 0.01, default: 0.1 },
+        fallback: shaderFallbackField(),
+    },
+});

package/dist/transitions/effects/shader/noiseBurn.schema.d.ts

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

package/dist/transitions/effects/shader/noiseBurn.schema.js

@@ -0,0 +1,13 @@
+import { defineSchema } from "../../../schema/define.js";
+import { shaderFallbackField } from "../../../schema/common.js";
+export const NOISE_BURN_SCHEMA = defineSchema()({
+    id: "noiseBurn",
+    family: "transition",
+    factory: "noiseBurn",
+    fields: {
+        edge: { kind: "number", label: "Edge width", min: 0.005, max: 0.5, step: 0.005, default: 0.06 },
+        scale: { kind: "number", label: "Raggedness", min: 0.2, max: 40, step: 0.1, default: 3 },
+        color: { kind: "color", label: "Edge colour", default: "var(--color-sx-accent)" },
+        fallback: shaderFallbackField(),
+    },
+});

package/dist/transitions/effects/shader/pageCurl.d.ts

@@ -0,0 +1,19 @@
+import type { ShaderTransition } from "../../types.js";
+import { type ShaderOptionsBase } from "./kit.js";
+export interface PageCurlOptions extends ShaderOptionsBase {
+    /** Tilt of the fold in degrees: 0 lifts the whole end edge at once, higher lifts the bottom corner first. Default `15`. */
+    readonly angle?: number;
+    /** Radius of the curl, as a fraction of the box height. Default `0.12`. */
+    readonly radius?: number;
+    /** How dark the curl's shadow on the next page is, 0–1. Default `0.45`. */
+    readonly shadow?: number;
+    /** The back of the page. Default `var(--color-sx-secondary)`. */
+    readonly paper?: string;
+}
+export declare const PAGE_CURL_FRAGMENT = "\nuniform vec2 u_dir;\nuniform float u_radius;\nuniform float u_shade;\nuniform vec4 u_c0;\nbool sx_inside(vec2 uv) {\n  return uv.x >= 0.0 && uv.x <= 1.0 && uv.y >= 0.0 && uv.y <= 1.0;\n}\nvec4 sx_back(vec2 uv, float light) {\n  vec4 paper = vec4(u_c0.rgb * u_c0.a, u_c0.a);\n  vec4 c = mix(paper, getFrom(uv), 0.12);\n  return vec4(c.rgb * light, c.a);\n}\nvec4 transition(vec2 uv) {\n  float aspect = sx_aspect();\n  vec2 n = normalize(sx_dir(u_dir));\n  vec2 P = vec2(uv.x * aspect, uv.y);\n  float q = dot(P, n);\n  float q1 = dot(vec2(aspect, 0.0), n);\n  float q2 = dot(vec2(0.0, 1.0), n);\n  float q3 = dot(vec2(aspect, 1.0), n);\n  float qmin = min(min(0.0, q1), min(q2, q3));\n  float qmax = max(max(0.0, q1), max(q2, q3));\n  float r = u_radius;\n  float c = mix(qmax, qmin - r - 0.25, u_progress);\n  float d = q - c;\n  vec2 scale = vec2(1.0 / aspect, 1.0);\n  if (d <= 0.0) {\n    vec2 top = (P + n * (2.0 * (c - q) + SX_PI * r)) * scale;\n    if (sx_inside(top)) return sx_back(top, 1.0);\n    return getFrom(uv);\n  }\n  if (d < r) {\n    float th = asin(d / r);\n    vec2 back = (P + n * (r * (SX_PI - th) - d)) * scale;\n    if (sx_inside(back)) return sx_back(back, mix(0.7, 1.0, cos(th)));\n    vec2 front = (P + n * (r * th - d)) * scale;\n    if (sx_inside(front)) {\n      vec4 f = getFrom(front);\n      return vec4(f.rgb * mix(0.65, 1.0, cos(th)), f.a);\n    }\n  }\n  // the next page, darkened next to the curl (only where the page still reaches the fold)\n  bool folded = sx_inside((P - n * d) * scale);\n  float shade = folded ? u_shade * (1.0 - smoothstep(0.0, r * 1.5 + 0.02, max(d - r, 0.0))) : 0.0;\n  vec4 t = getTo(uv);\n  return vec4(t.rgb * (1.0 - shade), t.a);\n}\n";
+/**
+ * The page lifts from its end corner, curls over and turns away, showing its
+ * paper back, and uncovers the next one (for a one-card carousel: going back
+ * lays the page down again). High tier; below it, a wipe from the same edge.
+ */
+export declare function pageCurl(options?: PageCurlOptions): ShaderTransition;

package/dist/transitions/effects/shader/pageCurl.js

@@ -0,0 +1,82 @@
+// pageCurl: the page lifts from its end corner, rolls over a cylinder and
+// turns away (the atlas's "Page curl / fold", high tier). Our own GLSL, WebGL1,
+// no Three.js. See ../../shader/program.ts for the fragment contract.
+import { wipe } from "../css/wipe.js";
+import { defineShader, within } from "./kit.js";
+// In a space where 1 unit = the box height (P), q is the distance along n, the
+// direction towards the edge the page lifts from. The fold line sits at q = c
+// and sweeps from the far corner (q max) to past the near one. A page point at
+// q0 <= c lies flat; one with q0 - c = a in (0, πr] is on the cylinder at angle
+// θ = a / r (screen q = c + r sin θ, so a screen pixel there sees two layers:
+// the back at π - θ above, the front at θ below); beyond that it lies flat on
+// top again, back side up, folded back towards q min. Each pixel checks the
+// layers from the top down; where no page is left, the next picture shows,
+// in the curl's shadow.
+export const PAGE_CURL_FRAGMENT = `
+uniform vec2 u_dir;
+uniform float u_radius;
+uniform float u_shade;
+uniform vec4 u_c0;
+bool sx_inside(vec2 uv) {
+  return uv.x >= 0.0 && uv.x <= 1.0 && uv.y >= 0.0 && uv.y <= 1.0;
+}
+vec4 sx_back(vec2 uv, float light) {
+  vec4 paper = vec4(u_c0.rgb * u_c0.a, u_c0.a);
+  vec4 c = mix(paper, getFrom(uv), 0.12);
+  return vec4(c.rgb * light, c.a);
+}
+vec4 transition(vec2 uv) {
+  float aspect = sx_aspect();
+  vec2 n = normalize(sx_dir(u_dir));
+  vec2 P = vec2(uv.x * aspect, uv.y);
+  float q = dot(P, n);
+  float q1 = dot(vec2(aspect, 0.0), n);
+  float q2 = dot(vec2(0.0, 1.0), n);
+  float q3 = dot(vec2(aspect, 1.0), n);
+  float qmin = min(min(0.0, q1), min(q2, q3));
+  float qmax = max(max(0.0, q1), max(q2, q3));
+  float r = u_radius;
+  float c = mix(qmax, qmin - r - 0.25, u_progress);
+  float d = q - c;
+  vec2 scale = vec2(1.0 / aspect, 1.0);
+  if (d <= 0.0) {
+    vec2 top = (P + n * (2.0 * (c - q) + SX_PI * r)) * scale;
+    if (sx_inside(top)) return sx_back(top, 1.0);
+    return getFrom(uv);
+  }
+  if (d < r) {
+    float th = asin(d / r);
+    vec2 back = (P + n * (r * (SX_PI - th) - d)) * scale;
+    if (sx_inside(back)) return sx_back(back, mix(0.7, 1.0, cos(th)));
+    vec2 front = (P + n * (r * th - d)) * scale;
+    if (sx_inside(front)) {
+      vec4 f = getFrom(front);
+      return vec4(f.rgb * mix(0.65, 1.0, cos(th)), f.a);
+    }
+  }
+  // the next page, darkened next to the curl (only where the page still reaches the fold)
+  bool folded = sx_inside((P - n * d) * scale);
+  float shade = folded ? u_shade * (1.0 - smoothstep(0.0, r * 1.5 + 0.02, max(d - r, 0.0))) : 0.0;
+  vec4 t = getTo(uv);
+  return vec4(t.rgb * (1.0 - shade), t.a);
+}
+`;
+/** The default stand-in below `high`: the next page uncovered from the edge the curl starts at. */
+const SWEEP = wipe({ from: "end" });
+/**
+ * The page lifts from its end corner, curls over and turns away, showing its
+ * paper back, and uncovers the next one (for a one-card carousel: going back
+ * lays the page down again). High tier; below it, a wipe from the same edge.
+ */
+export function pageCurl(options = {}) {
+    const angle = (within(options.angle ?? 15, 0, 60) * Math.PI) / 180;
+    return defineShader("pageCurl", PAGE_CURL_FRAGMENT, {
+        uniforms: {
+            u_dir: [Math.cos(angle), -Math.sin(angle)],
+            u_radius: within(options.radius ?? 0.12, 0.02, 0.5),
+            u_shade: within(options.shadow ?? 0.45, 0, 1),
+        },
+        colors: [options.paper ?? "var(--color-sx-secondary)"],
+        fallback: options.fallback ?? SWEEP,
+    });
+}

package/dist/transitions/effects/shader/pageCurl.schema.d.ts

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

package/dist/transitions/effects/shader/pageCurl.schema.js

@@ -0,0 +1,14 @@
+import { defineSchema } from "../../../schema/define.js";
+import { shaderFallbackField } from "../../../schema/common.js";
+export const PAGE_CURL_SCHEMA = defineSchema()({
+    id: "pageCurl",
+    family: "transition",
+    factory: "pageCurl",
+    fields: {
+        angle: { kind: "number", label: "Fold tilt", min: 0, max: 60, step: 1, unit: "°", default: 15 },
+        radius: { kind: "number", label: "Curl radius", min: 0.02, max: 0.5, step: 0.01, default: 0.12 },
+        shadow: { kind: "number", label: "Shadow", min: 0, max: 1, step: 0.01, default: 0.45 },
+        paper: { kind: "color", label: "Back of the page", default: "var(--color-sx-secondary)" },
+        fallback: shaderFallbackField("a sweep"),
+    },
+});

package/dist/transitions/effects/shader/pixelDissolve.schema.d.ts

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

package/dist/transitions/effects/shader/pixelDissolve.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+import { shaderFallbackField } from "../../../schema/common.js";
+export const PIXEL_DISSOLVE_SCHEMA = defineSchema()({
+    id: "pixelDissolve",
+    family: "transition",
+    factory: "pixelDissolve",
+    fields: {
+        cells: { kind: "integer", label: "Blocks", min: 2, max: 200, default: 16, help: "Blocks down the height at the coarsest moment." },
+        fallback: shaderFallbackField(),
+    },
+});

package/dist/transitions/effects/shader/ripple.schema.d.ts

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

package/dist/transitions/effects/shader/ripple.schema.js

@@ -0,0 +1,13 @@
+import { defineSchema } from "../../../schema/define.js";
+import { shaderFallbackField } from "../../../schema/common.js";
+export const RIPPLE_SCHEMA = defineSchema()({
+    id: "ripple",
+    family: "transition",
+    factory: "ripple",
+    fields: {
+        origin: { kind: "point", label: "Origin", keywords: ["pointer", "center"], labels: { pointer: "The last tap (the centre in a reveal)", center: "The centre" }, default: "pointer" },
+        amplitude: { kind: "number", label: "Bend", min: 0, max: 0.3, step: 0.005, default: 0.03 },
+        width: { kind: "number", label: "Ring width", min: 0.02, max: 2, step: 0.01, default: 0.25 },
+        fallback: shaderFallbackField(),
+    },
+});

package/dist/transitions/effects/shader/scrollDistort.d.ts

@@ -0,0 +1,9 @@
+import type { ShaderTransition, TransitionMeta } from "../../types.js";
+export declare const SCROLL_DISTORT_META: TransitionMeta;
+export declare const SCROLL_DISTORT_FRAGMENT = "\nuniform float u_strength;\nuniform float u_scroll;\nvec4 transition(vec2 uv) {\n  float p = u_progress;\n  float v = u_scroll * u_strength;\n  float bend = sin(uv.x * SX_PI) * clamp(v * 0.04, -0.07, 0.07);\n  float edge = mix(-0.2, 1.2, p) + sin(uv.x * 2.0 * SX_PI + p * 3.0) * 0.04 * (1.0 - p);\n  float shown = 1.0 - smoothstep(edge - 0.06, edge, uv.y);\n  vec2 q = vec2(uv.x, uv.y + bend + (1.0 - p) * 0.2);\n  q = 0.5 + (q - 0.5) * 0.85;\n  float split = clamp(v * 0.006, -0.01, 0.01);\n  vec4 g = getTo(q);\n  vec4 c = vec4(getTo(q + vec2(0.0, split)).r, g.g, getTo(q - vec2(0.0, split)).b, g.a);\n  return c * shown;\n}\n";
+export interface ScrollDistortOptions {
+    /** How far the picture bends per unit of scroll speed. Default `1`. */
+    readonly strength?: number;
+}
+/** ScrollDistort's shader; below `high` (or without WebGL) the picture plays `zoomOut()`. */
+export declare function scrollDistort(options?: ScrollDistortOptions): ShaderTransition;

package/dist/transitions/effects/shader/scrollDistort.js

@@ -0,0 +1,43 @@
+// The shader behind <ScrollDistort>: a picture that rises in behind a wavy
+// edge when it is revealed and bends with the page's scroll speed (the atlas's
+// "WebGL scroll distortion reveal", high tier). Our own GLSL, WebGL1.
+// Not a registered transition: the atlas row is the ScrollDistort part.
+import { zoomOut } from "../css/reveals.js";
+import { defineShader, within } from "./kit.js";
+export const SCROLL_DISTORT_META = {
+    id: "scrollDistort",
+    label: "Scroll distortion",
+    kind: "webgl",
+    modes: ["reveal"],
+    group: "scroll",
+    tier: "high",
+    description: "A picture rises in behind a wavy edge, then bends with the scroll speed.",
+};
+// u_scroll is the page's scroll speed (viewport heights a second, + down):
+// the middle of the picture lags behind it like a sheet in the wind, and the
+// red and blue channels part a little. The bend is capped below the 7.5%
+// margin the small zoom leaves, so it never pulls in the picture's own edge.
+export const SCROLL_DISTORT_FRAGMENT = `
+uniform float u_strength;
+uniform float u_scroll;
+vec4 transition(vec2 uv) {
+  float p = u_progress;
+  float v = u_scroll * u_strength;
+  float bend = sin(uv.x * SX_PI) * clamp(v * 0.04, -0.07, 0.07);
+  float edge = mix(-0.2, 1.2, p) + sin(uv.x * 2.0 * SX_PI + p * 3.0) * 0.04 * (1.0 - p);
+  float shown = 1.0 - smoothstep(edge - 0.06, edge, uv.y);
+  vec2 q = vec2(uv.x, uv.y + bend + (1.0 - p) * 0.2);
+  q = 0.5 + (q - 0.5) * 0.85;
+  float split = clamp(v * 0.006, -0.01, 0.01);
+  vec4 g = getTo(q);
+  vec4 c = vec4(getTo(q + vec2(0.0, split)).r, g.g, getTo(q - vec2(0.0, split)).b, g.a);
+  return c * shown;
+}
+`;
+/** ScrollDistort's shader; below `high` (or without WebGL) the picture plays `zoomOut()`. */
+export function scrollDistort(options = {}) {
+    return defineShader(SCROLL_DISTORT_META, SCROLL_DISTORT_FRAGMENT, {
+        uniforms: { u_strength: within(options.strength ?? 1, 0, 5) },
+        fallback: zoomOut(),
+    });
+}

package/dist/transitions/effects/shader/stretchWarp.schema.d.ts

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

package/dist/transitions/effects/shader/stretchWarp.schema.js

@@ -0,0 +1,13 @@
+import { defineSchema } from "../../../schema/define.js";
+import { shaderFallbackField } from "../../../schema/common.js";
+export const STRETCH_WARP_SCHEMA = defineSchema()({
+    id: "stretchWarp",
+    family: "transition",
+    factory: "stretchWarp",
+    fields: {
+        from: { kind: "choice", label: "From", values: ["start", "end", "top", "bottom"], labels: { start: "Reading start", end: "Reading end", top: "Top", bottom: "Bottom" }, default: "start" },
+        strength: { kind: "number", label: "Stretch", min: 0, max: 4, step: 0.05, default: 0.6 },
+        repeat: { kind: "number", label: "Copies", min: 1, max: 12, step: 0.5, default: 2, help: "Mirrored copies of the new picture as it enters." },
+        fallback: shaderFallbackField(),
+    },
+});

package/dist/transitions/effects/shader/swirl.schema.d.ts

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

package/dist/transitions/effects/shader/swirl.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+import { shaderFallbackField } from "../../../schema/common.js";
+export const SWIRL_SCHEMA = defineSchema()({
+    id: "swirl",
+    family: "transition",
+    factory: "swirl",
+    fields: {
+        turns: { kind: "number", label: "Turns", min: -6, max: 6, step: 0.1, default: 1 },
+        fallback: shaderFallbackField(),
+    },
+});

package/dist/transitions/effects/shader/warps.d.ts

@@ -0,0 +1,60 @@
+import type { ShaderTransition } from "../../types.js";
+import type { From } from "../css/kit.js";
+import { type ShaderOptionsBase } from "./kit.js";
+export interface DisplacementOptions extends ShaderOptionsBase {
+    /** How far pixels drift, as a fraction of the box. Default `0.3`. */
+    readonly strength?: number;
+    /** Size of the built-in noise map: higher = finer grain. Default `2.5`. */
+    readonly scale?: number;
+    /** Your own displacement map (a greyscale picture; same origin or CORS). Default: built-in noise. */
+    readonly map?: string;
+}
+export declare const DISPLACEMENT_FRAGMENT = "\nuniform float u_strength;\nuniform float u_scale;\nuniform sampler2D u_map;\nuniform float u_hasMap;\nvec4 transition(vec2 uv) {\n  float p = u_progress;\n  float d = u_hasMap > 0.5 ? texture2D(u_map, uv).r : sx_fbm(uv * vec2(sx_aspect(), 1.0) * u_scale);\n  vec2 shift = vec2(d) * u_strength;\n  vec4 a = getFrom(uv + shift * p);\n  vec4 b = getTo(uv - shift * (1.0 - p));\n  return mix(a, b, smoothstep(0.0, 1.0, p));\n}\n";
+/** Both pictures drift along a displacement map (noise, or yours) while they cross. */
+export declare function displacement(options?: DisplacementOptions): ShaderTransition;
+export interface StretchWarpOptions extends ShaderOptionsBase {
+    /** Where the new picture comes in from. Default `"start"`. */
+    readonly from?: From;
+    /** How much both pictures stretch halfway. Default `0.6`. */
+    readonly strength?: number;
+    /** Mirrored copies of the new picture as it enters; they merge into one. Default `2`. */
+    readonly repeat?: number;
+}
+export declare const STRETCH_WARP_FRAGMENT = "\nuniform vec2 u_dir;\nuniform float u_strength;\nuniform float u_repeat;\nfloat sx_mirror(float x) { return 1.0 - abs(1.0 - mod(x, 2.0)); }\nvec4 transition(vec2 uv) {\n  float p = u_progress;\n  vec2 dir = sx_dir(u_dir);\n  vec2 c = uv - 0.5;\n  float along = dot(c, dir);\n  vec2 side = c - dir * along;\n  // a: 0 at the edge the new picture enters from, 1 at the far edge\n  float a = along + 0.5;\n  float bend = 1.0 + sin(p * SX_PI) * u_strength * 2.0;\n  if (a < p) {\n    float t = 1.0 - pow(1.0 - a / max(p, 0.0001), bend);\n    t = sx_mirror(t * mix(u_repeat, 1.0, p));\n    return getTo(0.5 + dir * (t - 0.5) + side);\n  }\n  float f = pow((a - p) / max(1.0 - p, 0.0001), bend);\n  return getFrom(0.5 + dir * (f - 0.5) + side);\n}\n";
+/** The new picture pushes in, stretched and repeated, squashing the old one ahead of it. */
+export declare function stretchWarp(options?: StretchWarpOptions): ShaderTransition;
+export interface RippleOptions extends ShaderOptionsBase {
+    /**
+     * Where the ring starts.
+     * - `"pointer"` (default): in a carousel, the last tap on it (the centre until
+     *   the first tap); in a reveal, the centre.
+     * - `"center"`.
+     * - `[x, y]`: fractions of the box, `[0, 1]` = bottom start corner.
+     */
+    readonly origin?: "pointer" | "center" | readonly [number, number];
+    /** How far the water bends the pictures. Default `0.03`. */
+    readonly amplitude?: number;
+    /** Width of the moving ring, as a fraction of the box height. Default `0.25`. */
+    readonly width?: number;
+}
+export declare const RIPPLE_FRAGMENT = "\nuniform vec2 u_point;\nuniform float u_fixed;\nuniform float u_amplitude;\nuniform float u_width;\nvec4 transition(vec2 uv) {\n  vec2 o = u_fixed > 0.5 ? vec2(u_rtl > 0.5 ? 1.0 - u_point.x : u_point.x, u_point.y) : u_origin;\n  vec2 aspect = vec2(sx_aspect(), 1.0);\n  vec2 d = (uv - o) * aspect;\n  float r = length(d);\n  float far = length(max(o, 1.0 - o) * aspect);\n  float front = mix(-u_width, far + u_width, u_progress);\n  float x = (r - front) / u_width;\n  float ring = exp(-x * x * 2.0);\n  vec2 off = (d / max(r, 0.0001)) * sin(x * 9.0) * u_amplitude * ring / aspect;\n  float inside = 1.0 - smoothstep(-0.5, 0.5, x);\n  return mix(getFrom(uv + off), getTo(uv + off), inside);\n}\n";
+/** A water ring spreads from the tap point (or the centre) and leaves the new picture behind it. */
+export declare function ripple(options?: RippleOptions): ShaderTransition;
+export interface ChromaticShiftOptions extends ShaderOptionsBase {
+    /** The way the pictures drift. Default `"start"`. */
+    readonly from?: From;
+    /** How far the red and blue channels split halfway, as a fraction of the box. Default `0.04`. */
+    readonly strength?: number;
+}
+export declare const CHROMATIC_SHIFT_FRAGMENT = "\nuniform vec2 u_dir;\nuniform float u_strength;\nvec4 sx_splitFrom(vec2 uv, vec2 off) {\n  vec4 g = getFrom(uv);\n  return vec4(getFrom(uv - off).r, g.g, getFrom(uv + off).b, g.a);\n}\nvec4 sx_splitTo(vec2 uv, vec2 off) {\n  vec4 g = getTo(uv);\n  return vec4(getTo(uv - off).r, g.g, getTo(uv + off).b, g.a);\n}\nvec4 transition(vec2 uv) {\n  float p = u_progress;\n  vec2 dir = sx_dir(u_dir);\n  vec2 off = dir * sin(p * SX_PI) * u_strength;\n  vec4 a = sx_splitFrom(uv - dir * p * 0.06, off);\n  vec4 b = sx_splitTo(uv + dir * (1.0 - p) * 0.06, off);\n  return mix(a, b, smoothstep(0.25, 0.75, p));\n}\n";
+/** The colour channels split apart while the pictures slide a little and cross. */
+export declare function chromaticShift(options?: ChromaticShiftOptions): ShaderTransition;
+export interface LiquidMorphOptions extends ShaderOptionsBase {
+    /** How far the liquid carries pixels. Default `0.12`. */
+    readonly strength?: number;
+    /** Size of the flow: higher = smaller eddies. Default `2`. */
+    readonly scale?: number;
+}
+export declare const LIQUID_MORPH_FRAGMENT = "\nuniform float u_strength;\nuniform float u_scale;\nvec4 transition(vec2 uv) {\n  float p = u_progress;\n  vec2 q = uv * vec2(sx_aspect(), 1.0) * u_scale;\n  vec2 flow = vec2(sx_fbm(q + vec2(0.0, p * 1.5)), sx_fbm(q + vec2(5.2, 1.3 - p * 1.5))) - 0.5;\n  vec2 off = flow * u_strength * sin(p * SX_PI);\n  float n = sx_fbm(q * 0.7 + 3.1);\n  float m = smoothstep(n - 0.25, n + 0.25, p * 1.5 - 0.25);\n  return mix(getFrom(uv + off * (1.0 + p)), getTo(uv - off * (2.0 - p)), m);\n}\n";
+/** The pictures flow into each other along a liquid noise. */
+export declare function liquidMorph(options?: LiquidMorphOptions): ShaderTransition;