@vysmo/transitions 0.1.0

package/dist/transitions/prism-split.js

@@ -0,0 +1,52 @@
+import { defineTransition } from "./define.js";
+/**
+ * Directional RGB chromatic split. Like looking through a prism along a
+ * fixed axis: red and blue channels separate along `direction` while
+ * green stays put, then recombine on the to-image. Distinct from
+ * chromatic-pulse (which is radial outward from center).
+ */
+export const prismSplit = defineTransition({
+    name: "prism-split",
+    defaults: {
+        direction: [1, 0],
+        intensity: 0.04,
+        softness: 0.2,
+    },
+    glsl: `
+uniform vec2 uDirection;
+uniform float uIntensity;
+uniform float uSoftness;
+
+vec4 transition(vec2 uv) {
+  vec2 d = normalize(uDirection);
+  float env = 4.0 * uProgress * (1.0 - uProgress);
+  // Cap the per-channel split. Past ~0.07 the R/B samples come from
+  // unrelated parts of the scene and edge clamping turns the offsets into
+  // colored stripes — no longer reads as chromatic aberration. Hard-clamp
+  // here so the transition is reliable regardless of caller input.
+  float split = env * min(uIntensity, 0.07);
+
+  vec2 offR = clamp(uv + d * split, 0.0, 1.0);
+  vec2 offB = clamp(uv - d * split, 0.0, 1.0);
+
+  vec3 fromRGB = vec3(
+    getFromColor(offR).r,
+    getFromColor(uv).g,
+    getFromColor(offB).b
+  );
+  vec3 toRGB = vec3(
+    getToColor(offR).r,
+    getToColor(uv).g,
+    getToColor(offB).b
+  );
+
+  // Crossfade width controlled by softness: 0.7 → fade across middle 70%
+  // of progress (range [0.15, 0.85]); higher = gentler, lower = punchier.
+  float fadeHalf = clamp(uSoftness, 0.05, 0.95) * 0.5;
+  float mixW = smoothstep(0.5 - fadeHalf, 0.5 + fadeHalf, uProgress);
+  vec3 rgb = mix(fromRGB, toRGB, mixW);
+  return vec4(rgb, 1.0);
+}
+`,
+});
+//# sourceMappingURL=prism-split.js.map

package/dist/transitions/prism-split.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-split.js","sourceRoot":"","sources":["../../src/transitions/prism-split.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,gBAAgB,CAAC;IACzC,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE;QACR,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QACjB,SAAS,EAAE,IAAI;QACf,QAAQ,EAAE,GAAG;KACd;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCP;CACA,CAAC,CAAC"}

package/dist/transitions/push.d.ts

@@ -0,0 +1,4 @@
+export declare const push: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly direction: readonly [1, 0];
+}>>;
+//# sourceMappingURL=push.d.ts.map

package/dist/transitions/push.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"push.d.ts","sourceRoot":"","sources":["../../src/transitions/push.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI;;GA+Bf,CAAC"}

package/dist/transitions/push.js

@@ -0,0 +1,34 @@
+import { defineTransition } from "./define.js";
+export const push = defineTransition({
+    name: "push",
+    defaults: {
+        direction: [1, 0],
+    },
+    glsl: `
+uniform vec2 uDirection;
+
+// Snap a direction vector to the nearest axis-aligned unit (Right/Left/Down/Up).
+// Translation transitions only look right axis-aligned; diagonal inputs leave
+// triangular gaps at corners. Snapping in-shader keeps the visual reliable
+// regardless of caller input, so the UI's axis-only picker matches.
+vec2 snapAxis(vec2 v) {
+  vec2 d = normalize(v);
+  return abs(d.x) > abs(d.y) ? vec2(sign(d.x), 0.0) : vec2(0.0, sign(d.y));
+}
+
+vec4 transition(vec2 uv) {
+  vec2 d = snapAxis(uDirection);
+  // Both images scroll together in direction -d over time.
+  // At progress=0: from fills the frame; to is at +d offset (off-screen).
+  // At progress=1: to fills the frame; from is at -d offset (off-screen).
+  vec2 fromUv = uv + d * uProgress;
+  vec2 toUv = uv - d * (1.0 - uProgress);
+
+  bool fromVisible = fromUv.x >= 0.0 && fromUv.x <= 1.0
+                  && fromUv.y >= 0.0 && fromUv.y <= 1.0;
+  if (fromVisible) return getFromColor(fromUv);
+  return getToColor(toUv);
+}
+`,
+});
+//# sourceMappingURL=push.js.map

package/dist/transitions/push.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"push.js","sourceRoot":"","sources":["../../src/transitions/push.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,CAAC,MAAM,IAAI,GAAG,gBAAgB,CAAC;IACnC,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE;QACR,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;KAClB;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;CAyBP;CACA,CAAC,CAAC"}

package/dist/transitions/radial-reveal.d.ts

@@ -0,0 +1,5 @@
+export declare const radialReveal: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly center: readonly [0.5, 0.5];
+    readonly softness: 0.05;
+}>>;
+//# sourceMappingURL=radial-reveal.d.ts.map

package/dist/transitions/radial-reveal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radial-reveal.d.ts","sourceRoot":"","sources":["../../src/transitions/radial-reveal.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;GA4BvB,CAAC"}

package/dist/transitions/radial-reveal.js

@@ -0,0 +1,31 @@
+import { defineTransition } from "./define.js";
+export const radialReveal = defineTransition({
+    name: "radial-reveal",
+    defaults: {
+        center: [0.5, 0.5],
+        softness: 0.05,
+    },
+    glsl: `
+uniform vec2 uCenter;
+uniform float uSoftness;
+
+vec4 transition(vec2 uv) {
+  // Measure distance in screen (pixel) space so the reveal stays a true circle
+  // on non-square canvases.
+  vec2 pixel = uv * uResolution;
+  vec2 pixelCenter = uCenter * uResolution;
+
+  float maxDist = max(
+    max(length(pixelCenter), length(pixelCenter - vec2(uResolution.x, 0.0))),
+    max(length(pixelCenter - vec2(0.0, uResolution.y)), length(pixelCenter - uResolution))
+  );
+  float dist = length(pixel - pixelCenter) / maxDist;
+
+  float radius = uProgress * (1.0 + 2.0 * uSoftness) - uSoftness;
+  float w = smoothstep(radius - uSoftness, radius + uSoftness, dist);
+
+  return mix(getToColor(uv), getFromColor(uv), w);
+}
+`,
+});
+//# sourceMappingURL=radial-reveal.js.map

package/dist/transitions/radial-reveal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radial-reveal.js","sourceRoot":"","sources":["../../src/transitions/radial-reveal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CAAC;IAC3C,IAAI,EAAE,eAAe;IACrB,QAAQ,EAAE;QACR,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;QAClB,QAAQ,EAAE,IAAI;KACf;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;CAqBP;CACA,CAAC,CAAC"}

package/dist/transitions/ripple-wave.d.ts

@@ -0,0 +1,24 @@
+/**
+ * A water-like ripple emanates from a source point. The mesh deforms
+ * in z so the wave has real geometric presence (depth, lighting), but
+ * the wave shape, surface normal, and refraction are all recomputed
+ * per-fragment — so the refraction stays smooth even at high amplitude
+ * regardless of mesh subdivision. No faceting, no interpolation
+ * crystalline artifacts.
+ *
+ * Wave profile is asymmetric around the travelling front: sharp cut-
+ * off ahead (no pre-wave ripple) and moderate Gaussian decay behind
+ * (one dominant leading ring followed by a fading secondary ring).
+ * Refraction shifts the sample uv along the in-plane surface normal,
+ * so the image visibly bends through the water. A tight specular
+ * highlight adds a crest sparkle.
+ *
+ * Endpoints: envelope = 4·p·(1-p) gates z, refraction, lighting and
+ * specular all to zero at progress 0 and 1. The mask is pinned to
+ * saturated 0 and 1 respectively — pixel-pure endpoints.
+ */
+export declare const rippleWave: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly amplitude: 0.1;
+    readonly source: readonly [0.5, 0.5];
+}>>;
+//# sourceMappingURL=ripple-wave.d.ts.map

package/dist/transitions/ripple-wave.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple-wave.d.ts","sourceRoot":"","sources":["../../src/transitions/ripple-wave.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,UAAU;;;GAiHrB,CAAC"}

package/dist/transitions/ripple-wave.js

@@ -0,0 +1,135 @@
+import { defineTransition } from "./define.js";
+/**
+ * A water-like ripple emanates from a source point. The mesh deforms
+ * in z so the wave has real geometric presence (depth, lighting), but
+ * the wave shape, surface normal, and refraction are all recomputed
+ * per-fragment — so the refraction stays smooth even at high amplitude
+ * regardless of mesh subdivision. No faceting, no interpolation
+ * crystalline artifacts.
+ *
+ * Wave profile is asymmetric around the travelling front: sharp cut-
+ * off ahead (no pre-wave ripple) and moderate Gaussian decay behind
+ * (one dominant leading ring followed by a fading secondary ring).
+ * Refraction shifts the sample uv along the in-plane surface normal,
+ * so the image visibly bends through the water. A tight specular
+ * highlight adds a crest sparkle.
+ *
+ * Endpoints: envelope = 4·p·(1-p) gates z, refraction, lighting and
+ * specular all to zero at progress 0 and 1. The mask is pinned to
+ * saturated 0 and 1 respectively — pixel-pure endpoints.
+ */
+export const rippleWave = defineTransition({
+    name: "ripple-wave",
+    mesh: { subdivisions: [48, 48], instances: 1 },
+    defaults: {
+        amplitude: 0.1,
+        source: [0.5, 0.5],
+    },
+    vertex: `
+uniform float uAmplitude;
+uniform vec2 uSource;
+
+out vec2 vClipPos;
+
+#define PI 3.14159265359
+#define WAVELENGTH 0.35
+#define MAX_R 3.0
+#define TRANSITION_WIDTH 0.03
+
+void main() {
+  vUv = aUv;
+  vClipPos = aPosition;
+
+  // Mesh still deforms in z for real 3D presence; fragment will do
+  // the smooth per-pixel wave. Both use the same analytic wave.
+  vec2 sourceClip = uSource * 2.0 - 1.0;
+  float r = distance(aPosition, sourceClip);
+  float frontR = mix(
+    -TRANSITION_WIDTH,
+    MAX_R + TRANSITION_WIDTH,
+    uProgress
+  );
+  float phase = (r - frontR) / WAVELENGTH;
+  float k = mix(0.5, 4.0, step(0.0, phase));
+  float decay = exp(-phase * phase * k);
+  float envelope = 4.0 * uProgress * (1.0 - uProgress);
+  float wave = sin(phase * 2.0 * PI) * decay;
+  float z = uAmplitude * envelope * wave;
+
+  gl_Position = vec4(aPosition, -z, 1.0);
+}
+`,
+    glsl: `
+uniform float uAmplitude;
+uniform vec2 uSource;
+
+in vec2 vClipPos;
+
+#define PI 3.14159265359
+#define WAVELENGTH 0.35
+#define MAX_R 3.0
+#define TRANSITION_WIDTH 0.03
+
+vec4 transition(vec2 uv) {
+  vec2 sourceClip = uSource * 2.0 - 1.0;
+  vec2 toSource = vClipPos - sourceClip;
+  float r = length(toSource);
+  vec2 radialDir = r > 1e-5 ? toSource / r : vec2(0.0);
+
+  float frontR = mix(
+    -TRANSITION_WIDTH,
+    MAX_R + TRANSITION_WIDTH,
+    uProgress
+  );
+  float phase = (r - frontR) / WAVELENGTH;
+
+  // Asymmetric decay: sharp ahead of front (k=4, no pre-wave), moderate
+  // behind (k=0.5, one dominant ring + soft fading second ring).
+  float k = mix(0.5, 4.0, step(0.0, phase));
+  float decay = exp(-phase * phase * k);
+  float envelope = 4.0 * uProgress * (1.0 - uProgress);
+  float sinP = sin(phase * 2.0 * PI);
+  float cosP = cos(phase * 2.0 * PI);
+
+  // d(wave)/d(phase) = 2π·cos·decay − 2·phase·k·sin·decay
+  float dWave = decay * (2.0 * PI * cosP - 2.0 * phase * k * sinP);
+  float dzdr = uAmplitude * envelope * dWave / WAVELENGTH;
+
+  vec3 normal = normalize(vec3(-dzdr * radialDir, 1.0));
+
+  float mask = smoothstep(
+    -TRANSITION_WIDTH,
+    TRANSITION_WIDTH,
+    frontR - r
+  );
+
+  // Refraction: gentle in-plane offset, clamped so high amplitudes
+  // don't generate wild UV jumps that would moire through even mipmapped
+  // trilinear sampling.
+  vec2 refractOffset = normal.xy * 0.22;
+  refractOffset = clamp(refractOffset, vec2(-0.08), vec2(0.08));
+  vec2 sampleUv = clamp(uv + refractOffset, 0.0, 1.0);
+
+  // Diffuse lighting referenced so flat = 1.0 exactly.
+  vec3 lightDir = normalize(vec3(0.3, 0.5, -1.0));
+  float directional = dot(normal, -lightDir);
+  float flatDot = -lightDir.z;
+  float rippleGain = (directional - flatDot) * 0.6;
+  float vLight = clamp(1.0 + rippleGain * envelope, 0.6, 1.35);
+
+  // Tight specular highlight on the crest — zero at endpoints (envelope),
+  // zero on flat water (normal parallel to z).
+  vec3 refl = reflect(lightDir, normal);
+  vec3 viewDir = vec3(0.0, 0.0, 1.0);
+  float spec = pow(max(dot(refl, viewDir), 0.0), 48.0);
+  float specBase = pow(max(dot(vec3(0, 0, 1), -lightDir), 0.0), 48.0);
+  float specGain = max(spec - specBase, 0.0) * envelope * 0.7;
+
+  vec3 fromCol = getFromColor(sampleUv).rgb;
+  vec3 toCol = getToColor(sampleUv).rgb;
+  vec3 col = mix(fromCol, toCol, mask) * vLight + vec3(specGain);
+  return vec4(col, 1.0);
+}
+`,
+});
+//# sourceMappingURL=ripple-wave.js.map

package/dist/transitions/ripple-wave.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple-wave.js","sourceRoot":"","sources":["../../src/transitions/ripple-wave.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,gBAAgB,CAAC;IACzC,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE;IAC9C,QAAQ,EAAE;QACR,SAAS,EAAE,GAAG;QACd,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAU;KAC5B;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCT;IACC,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEP;CACA,CAAC,CAAC"}

package/dist/transitions/ripple.d.ts

@@ -0,0 +1,7 @@
+export declare const ripple: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly center: readonly [0.5, 0.5];
+    readonly amplitude: 0.03;
+    readonly frequency: 6;
+    readonly speed: 8;
+}>>;
+//# sourceMappingURL=ripple.d.ts.map

package/dist/transitions/ripple.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.d.ts","sourceRoot":"","sources":["../../src/transitions/ripple.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;GAwCjB,CAAC"}

package/dist/transitions/ripple.js

@@ -0,0 +1,43 @@
+import { defineTransition } from "./define.js";
+export const ripple = defineTransition({
+    name: "ripple",
+    defaults: {
+        center: [0.5, 0.5],
+        amplitude: 0.03,
+        frequency: 6,
+        speed: 8,
+    },
+    glsl: `
+uniform vec2 uCenter;
+uniform float uAmplitude;
+uniform float uFrequency;
+uniform float uSpeed;
+
+const float TWO_PI = 6.2831853;
+
+vec4 transition(vec2 uv) {
+  vec2 delta = uv - uCenter;
+  float dist = length(delta);
+  vec2 dir = dist > 0.0001 ? delta / dist : vec2(1.0, 0.0);
+
+  // Velocity-scaled envelope: zero at endpoints, peak at midpoint.
+  float env = 4.0 * uProgress * (1.0 - uProgress);
+
+  // Radial sinusoid traveling outward as progress grows.
+  float phase = dist * uFrequency * TWO_PI - uProgress * uSpeed;
+  float wave = sin(phase);
+
+  // From pushes outward with the wave; to pulls inward (opposite sign).
+  vec2 displacement = dir * wave * uAmplitude * env;
+
+  vec4 fromColor = getFromColor(clamp(uv + displacement, 0.0, 1.0));
+  vec4 toColor = getToColor(clamp(uv - displacement, 0.0, 1.0));
+
+  // Crossfade concentrated in the middle 40%, so both images are ripple-warped
+  // throughout the overlap region.
+  float mixW = smoothstep(0.3, 0.7, uProgress);
+  return mix(fromColor, toColor, mixW);
+}
+`,
+});
+//# sourceMappingURL=ripple.js.map

package/dist/transitions/ripple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.js","sourceRoot":"","sources":["../../src/transitions/ripple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,gBAAgB,CAAC;IACrC,IAAI,EAAE,QAAQ;IACd,QAAQ,EAAE;QACR,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;QAClB,SAAS,EAAE,IAAI;QACf,SAAS,EAAE,CAAC;QACZ,KAAK,EAAE,CAAC;KACT;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BP;CACA,CAAC,CAAC"}

package/dist/transitions/shape-reveal.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Geometric shape reveal from a center point. `sides` controls the shape:
+ * 3 = triangle, 4 = diamond (with rotation 45°), 5 = pentagon, 6 = hexagon,
+ * 8 = octagon, 12 = dodecagon, 20+ approaches a circle.
+ */
+export declare const shapeReveal: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly center: readonly [0.5, 0.5];
+    readonly sides: 6;
+    readonly rotation: 0;
+    readonly softness: 0.05;
+}>>;
+//# sourceMappingURL=shape-reveal.d.ts.map

package/dist/transitions/shape-reveal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape-reveal.d.ts","sourceRoot":"","sources":["../../src/transitions/shape-reveal.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,WAAW;;;;;GA6CtB,CAAC"}

package/dist/transitions/shape-reveal.js

@@ -0,0 +1,53 @@
+import { defineTransition } from "./define.js";
+/**
+ * Geometric shape reveal from a center point. `sides` controls the shape:
+ * 3 = triangle, 4 = diamond (with rotation 45°), 5 = pentagon, 6 = hexagon,
+ * 8 = octagon, 12 = dodecagon, 20+ approaches a circle.
+ */
+export const shapeReveal = defineTransition({
+    name: "shape-reveal",
+    defaults: {
+        center: [0.5, 0.5],
+        sides: 6,
+        rotation: 0,
+        softness: 0.05,
+    },
+    glsl: `
+uniform vec2 uCenter;
+uniform float uSides;
+uniform float uRotation;
+uniform float uSoftness;
+
+const float TWO_PI = 6.2831853;
+
+vec4 transition(vec2 uv) {
+  // Work in screen pixel space so the polygon is geometrically regular
+  // regardless of canvas aspect ratio.
+  vec2 pixel = uv * uResolution;
+  vec2 pixelCenter = uCenter * uResolution;
+  vec2 delta = pixel - pixelCenter;
+
+  float slice = TWO_PI / max(uSides, 3.0);
+  float halfSlice = slice * 0.5;
+
+  // Fold the pixel's angle into one polygon sector; distance to the sector's
+  // edge midpoint direction gives the regular-polygon distance from center.
+  float angle = atan(delta.y, delta.x) - uRotation;
+  float folded = mod(angle + halfSlice, slice) - halfSlice;
+
+  // Normalize so canvas corners map to ≤ 1 (guaranteed by the max-corner
+  // division, since cos(folded) ≤ 1).
+  float maxDist = max(
+    max(length(pixelCenter), length(pixelCenter - vec2(uResolution.x, 0.0))),
+    max(length(pixelCenter - vec2(0.0, uResolution.y)), length(pixelCenter - uResolution))
+  );
+  float dist = length(delta) * cos(folded) / max(maxDist, 0.0001);
+
+  float radius = uProgress * (1.0 + 2.0 * uSoftness) - uSoftness;
+  float w = smoothstep(radius - uSoftness, radius + uSoftness, dist);
+
+  return mix(getToColor(uv), getFromColor(uv), w);
+}
+`,
+});
+//# sourceMappingURL=shape-reveal.js.map

package/dist/transitions/shape-reveal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape-reveal.js","sourceRoot":"","sources":["../../src/transitions/shape-reveal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,gBAAgB,CAAC;IAC1C,IAAI,EAAE,cAAc;IACpB,QAAQ,EAAE;QACR,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;QAClB,KAAK,EAAE,CAAC;QACR,QAAQ,EAAE,CAAC;QACX,QAAQ,EAAE,IAAI;KACf;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCP;CACA,CAAC,CAAC"}

package/dist/transitions/shockwave.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A concentric wavefront expands from a center point, distorting pixels
+ * radially at the wavefront's crest. Behind the wave: `to`. Ahead: `from`.
+ */
+export declare const shockwave: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly center: readonly [0.5, 0.5];
+    readonly thickness: 0.15;
+    readonly strength: 0.04;
+}>>;
+//# sourceMappingURL=shockwave.d.ts.map

package/dist/transitions/shockwave.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shockwave.d.ts","sourceRoot":"","sources":["../../src/transitions/shockwave.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;GAiDpB,CAAC"}

package/dist/transitions/shockwave.js

@@ -0,0 +1,56 @@
+import { defineTransition } from "./define.js";
+/**
+ * A concentric wavefront expands from a center point, distorting pixels
+ * radially at the wavefront's crest. Behind the wave: `to`. Ahead: `from`.
+ */
+export const shockwave = defineTransition({
+    name: "shockwave",
+    defaults: {
+        center: [0.5, 0.5],
+        thickness: 0.15,
+        strength: 0.04,
+    },
+    glsl: `
+uniform vec2 uCenter;
+uniform float uThickness;
+uniform float uStrength;
+
+vec4 transition(vec2 uv) {
+  vec2 pixel = uv * uResolution;
+  vec2 pixelCenter = uCenter * uResolution;
+  vec2 delta = pixel - pixelCenter;
+  float r = length(delta);
+  vec2 dir = r > 0.5 ? delta / r : vec2(1.0, 0.0);
+
+  float maxR = max(
+    max(length(pixelCenter), length(pixelCenter - vec2(uResolution.x, 0.0))),
+    max(length(pixelCenter - vec2(0.0, uResolution.y)), length(pixelCenter - uResolution))
+  );
+  float normalizedR = r / max(maxR, 0.0001);
+
+  // Wavefront position sweeps from outside-at-center (-thickness) to
+  // outside-at-corner (1+thickness) so distortion & seam fully exit the frame
+  // at the endpoints.
+  float wavePos = uProgress * (1.0 + 2.0 * uThickness) - uThickness;
+  float distToWave = normalizedR - wavePos;
+
+  // Distortion magnitude peaks at the wavefront and zeroes at endpoints.
+  float env = 4.0 * uProgress * (1.0 - uProgress);
+  float waveX = distToWave / max(uThickness, 0.001);
+  float waveMag = exp(-waveX * waveX * 4.0) * env * uStrength;
+
+  // Displace each image radially away from center by the wave magnitude.
+  vec2 disp = dir * waveMag;
+
+  // Behind the wavefront (distToWave < 0): show "to". Ahead: show "from".
+  // 1 - smoothstep form (smoothstep(high, low) is GLSL UB).
+  float sweep = 1.0 - smoothstep(-uThickness, uThickness, distToWave);
+
+  vec4 fromColor = getFromColor(clamp(uv + disp, 0.0, 1.0));
+  vec4 toColor = getToColor(clamp(uv - disp, 0.0, 1.0));
+
+  return mix(fromColor, toColor, sweep);
+}
+`,
+});
+//# sourceMappingURL=shockwave.js.map

package/dist/transitions/shockwave.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shockwave.js","sourceRoot":"","sources":["../../src/transitions/shockwave.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,gBAAgB,CAAC;IACxC,IAAI,EAAE,WAAW;IACjB,QAAQ,EAAE;QACR,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;QAClB,SAAS,EAAE,IAAI;QACf,QAAQ,EAAE,IAAI;KACf;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCP;CACA,CAAC,CAAC"}

package/dist/transitions/singularity.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The image collapses to a single point and re-expands as the other.
+ * A scale factor runs from 1 at progress 0 to 0 at progress 0.5 to 1
+ * again at progress 1. Sampling from / to at
+ *
+ *   sampleUv = center + (uv - center) · scale
+ *
+ * means that as scale approaches 0 the whole frame converges on
+ * whatever from/to looks like at the centre pixel — so the image
+ * visibly shrinks to a dot, flashes, and re-expands as the other
+ * content. A content-derived whitening pulse at progress ≈ 0.5
+ * sells the event-horizon moment without injecting synthetic
+ * colour. Crossfade happens in a narrow window around progress 0.5
+ * so from and to don't visibly coexist except at the flash instant.
+ *
+ * Endpoints: scale = 1 at progress 0/1, so the sample UV is identity
+ * and we render pure from / to. The flash envelope is zero there too.
+ */
+export declare const singularity: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly center: readonly [0.5, 0.5];
+}>>;
+//# sourceMappingURL=singularity.d.ts.map

package/dist/transitions/singularity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"singularity.d.ts","sourceRoot":"","sources":["../../src/transitions/singularity.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,WAAW;;GAsCtB,CAAC"}

package/dist/transitions/singularity.js

@@ -0,0 +1,59 @@
+import { defineTransition } from "./define.js";
+/**
+ * The image collapses to a single point and re-expands as the other.
+ * A scale factor runs from 1 at progress 0 to 0 at progress 0.5 to 1
+ * again at progress 1. Sampling from / to at
+ *
+ *   sampleUv = center + (uv - center) · scale
+ *
+ * means that as scale approaches 0 the whole frame converges on
+ * whatever from/to looks like at the centre pixel — so the image
+ * visibly shrinks to a dot, flashes, and re-expands as the other
+ * content. A content-derived whitening pulse at progress ≈ 0.5
+ * sells the event-horizon moment without injecting synthetic
+ * colour. Crossfade happens in a narrow window around progress 0.5
+ * so from and to don't visibly coexist except at the flash instant.
+ *
+ * Endpoints: scale = 1 at progress 0/1, so the sample UV is identity
+ * and we render pure from / to. The flash envelope is zero there too.
+ */
+export const singularity = defineTransition({
+    name: "singularity",
+    defaults: {
+        center: [0.5, 0.5],
+    },
+    glsl: `
+uniform vec2 uCenter;
+
+vec4 transition(vec2 uv) {
+  // Scale: 1 at endpoints, 0 at progress 0.5. Clamped above epsilon so
+  // the flash frame still samples a real texel instead of hitting the
+  // exact centre pixel (and to give the collapse a tiny residual
+  // chromatic core rather than a hard dot).
+  float raw = abs(uProgress - 0.5) * 2.0;
+  float scale = max(raw, 1e-3);
+
+  vec2 sampleUv = clamp(uCenter + (uv - uCenter) * scale, 0.0, 1.0);
+
+  vec4 fromC = getFromColor(sampleUv);
+  vec4 toC = getToColor(sampleUv);
+
+  // Tight crossfade around the collapse — from dominates until almost
+  // progress 0.5, to takes over just after. This keeps the geometry
+  // (shrinking → dot → growing) as the dominant narrative, not a
+  // mushy overlap.
+  float blend = smoothstep(0.48, 0.52, uProgress);
+  vec3 result = mix(fromC.rgb, toC.rgb, blend);
+
+  // Event-horizon whitening: content-derived gain that peaks at the
+  // instant of collapse. Smooth falloff to zero by progress 0.3/0.7
+  // so there's no residual brightness outside the flash.
+  float flash = 1.0 - smoothstep(0.0, 0.2, raw);
+  float lum = dot(result, vec3(0.299, 0.587, 0.114));
+  result += (1.0 - result) * lum * flash;
+
+  return vec4(result, 1.0);
+}
+`,
+});
+//# sourceMappingURL=singularity.js.map

package/dist/transitions/singularity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"singularity.js","sourceRoot":"","sources":["../../src/transitions/singularity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,gBAAgB,CAAC;IAC1C,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE;QACR,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;KACnB;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCP;CACA,CAAC,CAAC"}

package/dist/transitions/slide.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Cover slide: the "to" image slides in and covers the stationary "from".
+ * Distinct from `push` (which scrolls both images together as a unit).
+ */
+export declare const slide: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly direction: readonly [-1, 0];
+    readonly feather: 0.015;
+    readonly blur: 0;
+}>>;
+//# sourceMappingURL=slide.d.ts.map

package/dist/transitions/slide.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slide.d.ts","sourceRoot":"","sources":["../../src/transitions/slide.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,KAAK;;;;GAqEhB,CAAC"}