@vysmo/transitions 0.1.0

package/dist/transitions/liquid-chrome.js

@@ -0,0 +1,114 @@
+import { defineTransition } from "./define.js";
+/**
+ * A liquid-metal blob expands from the centre, showing `to` through its
+ * glossy surface. The silhouette is a three-lobe metaball with small
+ * orbital wobbles so the boundary feels organic rather than a clean
+ * circle. Inside the blob, a fake specular highlight (overhead-left
+ * light) and rim brightening derived from the sampled `to` luminance
+ * produce the T-1000 chrome read — all gain derived from sampled content,
+ * so the full-frame rule holds (no synthetic white).
+ *
+ * Sample UVs only ever shift inward, so the clamp stays a no-op (no
+ * radial streaks from out-of-bounds reads). Specular + rim + refraction
+ * all scale by a `4·p·(1-p)` envelope, so at progress 0 and 1 the
+ * mercury shading collapses to pure from/to respectively.
+ */
+export const liquidChrome = defineTransition({
+    name: "liquid-chrome",
+    defaults: {
+        shine: 0.9,
+        rim: 0.25,
+        wobble: 0.12,
+        refraction: 0.035,
+        reflection: 0.0,
+    },
+    glsl: `
+uniform float uShine;
+uniform float uRim;
+uniform float uWobble;
+uniform float uRefraction;
+uniform float uReflection;
+
+// Polynomial smooth-min for organic metaball union.
+float smin(float a, float b, float k) {
+  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
+  return mix(b, a, h) - k * h * (1.0 - h);
+}
+
+vec4 transition(vec2 uv) {
+  float aspect = uResolution.x / uResolution.y;
+  vec2 c = vec2(0.5);
+  vec2 aDelta = vec2((uv.x - c.x) * aspect, uv.y - c.y);
+  float maxR = sqrt(aspect * aspect * 0.25 + 0.25);
+
+  // Blob radius grows from fully off-frame (negative) to comfortably
+  // past the farthest corner — guarantees clean endpoints.
+  float blobR = mix(-0.2, maxR + 0.25, uProgress);
+
+  // Orbital wobble: two small satellite blobs on curved paths. At
+  // progress=0 blobR is negative so they're already off-frame; at
+  // progress=1 blobR is huge so wobble is subsumed into the main mass.
+  float t = uProgress;
+  vec2 o1 = vec2(sin(t * 8.0), cos(t * 6.0)) * uWobble;
+  vec2 o2 = vec2(cos(t * 7.0), -sin(t * 5.0)) * uWobble;
+
+  // Three-lobe SDF, union via smooth-min.
+  float d1 = length(aDelta) - blobR;
+  float d2 = length(aDelta - o1 * 0.35) - blobR * 0.82;
+  float d3 = length(aDelta - o2 * 0.35) - blobR * 0.82;
+  float d = smin(smin(d1, d2, 0.08), d3, 0.08);
+
+  // Inside-blob membership, with a narrow soft edge so the silhouette
+  // doesn't alias but the body stays crisp.
+  float insideMask = 1.0 - smoothstep(-0.006, 0.006, d);
+
+  // Envelope so all surface shading vanishes at the endpoints.
+  float envelope = 4.0 * uProgress * (1.0 - uProgress);
+
+  // Depth within blob: 0 at centre, 1 at rim.
+  float depthT = clamp(1.0 + d / max(blobR, 0.001), 0.0, 1.0);
+
+  // Radial direction from blob core. Used for both refraction offset
+  // and as a cheap surface-normal approximation for shading.
+  vec2 nDir = length(aDelta) > 1e-4 ? aDelta / length(aDelta) : vec2(0.0);
+
+  // Refraction: sample to from slightly inward — depth-T weighted so
+  // the centre is undistorted and the rim bends sharpest. Stays in
+  // bounds because the shift is always toward the blob core.
+  float refract = uRefraction * depthT * envelope;
+  vec2 refractOffset = nDir * refract;
+  vec2 refractUv = clamp(uv - vec2(refractOffset.x / aspect, refractOffset.y), 0.0, 1.0);
+  vec4 toSample = getToColor(refractUv);
+
+  // Specular: fake overhead-left light bouncing off the "normal".
+  vec2 lightDir = vec2(-0.7071, -0.7071);
+  float lightDot = max(dot(nDir, lightDir), 0.0);
+  float specBand = smoothstep(0.35, 0.95, depthT);
+  float spec = pow(lightDot, 6.0) * specBand * envelope;
+
+  // Rim brightening near the silhouette. Ramp by depthT so only the
+  // outer shell of the blob catches the rim.
+  float rimShell = smoothstep(0.82, 1.0, depthT);
+  float rimAmt = rimShell * envelope * uRim;
+
+  // Apply gain from sampled luminance — keeps all output within content.
+  float lum = dot(toSample.rgb, vec3(0.299, 0.587, 0.114));
+  vec3 chromed = toSample.rgb + (1.0 - toSample.rgb) * lum * (spec * uShine + rimAmt);
+
+  // Environment reflection: sample the env map using the surface normal
+  // direction as a (coarse) env lookup, and blend stronger at the rim
+  // where fresnel would peak on a real dielectric. Gated by uReflection
+  // so the default (0) is a no-op; envelope keeps endpoints clean.
+  if (uReflection > 0.0) {
+    vec2 envUv = vec2(0.5 + 0.5 * nDir.x, 0.5 - 0.5 * nDir.y);
+    vec3 envColor = getEnvironment(envUv).rgb;
+    float reflectBand = mix(0.15, 0.9, depthT) * envelope * uReflection;
+    chromed = mix(chromed, envColor, reflectBand);
+  }
+
+  vec4 fromColor = getFromColor(uv);
+  return mix(fromColor, vec4(chromed, 1.0), insideMask);
+}
+`,
+});
+//# sourceMappingURL=liquid-chrome.js.map

package/dist/transitions/liquid-chrome.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"liquid-chrome.js","sourceRoot":"","sources":["../../src/transitions/liquid-chrome.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CAAC;IAC3C,IAAI,EAAE,eAAe;IACrB,QAAQ,EAAE;QACR,KAAK,EAAE,GAAG;QACV,GAAG,EAAE,IAAI;QACT,MAAM,EAAE,IAAI;QACZ,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,GAAG;KAChB;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFP;CACA,CAAC,CAAC"}

package/dist/transitions/liquid-morph.d.ts

@@ -0,0 +1,6 @@
+export declare const liquidMorph: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly scale: 3;
+    readonly strength: 0.1;
+    readonly flow: 3;
+}>>;
+//# sourceMappingURL=liquid-morph.d.ts.map

package/dist/transitions/liquid-morph.d.ts.map

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

package/dist/transitions/liquid-morph.js

@@ -0,0 +1,50 @@
+import { defineTransition } from "./define.js";
+export const liquidMorph = defineTransition({
+    name: "liquid-morph",
+    defaults: {
+        scale: 3,
+        strength: 0.1,
+        flow: 3,
+    },
+    glsl: `
+uniform float uScale;
+uniform float uStrength;
+uniform float uFlow;
+
+float hash21(vec2 p) {
+  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+float valueNoise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);
+  float a = hash21(i);
+  float b = hash21(i + vec2(1.0, 0.0));
+  float c = hash21(i + vec2(0.0, 1.0));
+  float d = hash21(i + vec2(1.0, 1.0));
+  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+}
+
+// Evolving 2D flow field: noise shifts over progress so the distortion
+// pattern moves, not just scales.
+vec2 flow(vec2 p, float t) {
+  float nx = valueNoise(p + vec2(t, 0.0));
+  float ny = valueNoise(p + vec2(0.0, t) + vec2(13.7, 7.2));
+  return vec2(nx, ny) - 0.5;
+}
+
+vec4 transition(vec2 uv) {
+  // Envelope zeroes at endpoints, peaks mid-transition.
+  float env = 4.0 * uProgress * (1.0 - uProgress);
+  vec2 offset = flow(uv * uScale, uProgress * uFlow) * uStrength * env;
+
+  vec2 fromUv = clamp(uv + offset, 0.0, 1.0);
+  vec2 toUv = clamp(uv - offset, 0.0, 1.0);
+
+  float mixW = smoothstep(0.3, 0.7, uProgress);
+  return mix(getFromColor(fromUv), getToColor(toUv), mixW);
+}
+`,
+});
+//# sourceMappingURL=liquid-morph.js.map

package/dist/transitions/liquid-morph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"liquid-morph.js","sourceRoot":"","sources":["../../src/transitions/liquid-morph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,CAAC,MAAM,WAAW,GAAG,gBAAgB,CAAC;IAC1C,IAAI,EAAE,cAAc;IACpB,QAAQ,EAAE;QACR,KAAK,EAAE,CAAC;QACR,QAAQ,EAAE,GAAG;QACb,IAAI,EAAE,CAAC;KACR;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCP;CACA,CAAC,CAAC"}

package/dist/transitions/lumina-melt.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Inspired by gl-transitions' luminamelt. Content-aware dissolve: each pixel
+ * transitions based on its brightness in the "from" image. Brighter pixels
+ * transition first, darker pixels last — creating a melt-like effect driven
+ * by image content, not a uniform or noise threshold.
+ */
+export declare const luminaMelt: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly softness: 0.15;
+    readonly invert: 0;
+}>>;
+//# sourceMappingURL=lumina-melt.d.ts.map

package/dist/transitions/lumina-melt.d.ts.map

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

package/dist/transitions/lumina-melt.js

@@ -0,0 +1,36 @@
+import { defineTransition } from "./define.js";
+/**
+ * Inspired by gl-transitions' luminamelt. Content-aware dissolve: each pixel
+ * transitions based on its brightness in the "from" image. Brighter pixels
+ * transition first, darker pixels last — creating a melt-like effect driven
+ * by image content, not a uniform or noise threshold.
+ */
+export const luminaMelt = defineTransition({
+    name: "lumina-melt",
+    defaults: {
+        softness: 0.15,
+        invert: 0,
+    },
+    glsl: `
+uniform float uSoftness;
+uniform float uInvert;
+
+vec4 transition(vec2 uv) {
+  vec4 fromColor = getFromColor(uv);
+  vec4 toColor = getToColor(uv);
+
+  // ITU-R BT.601 luminance.
+  float luma = dot(fromColor.rgb, vec3(0.299, 0.587, 0.114));
+
+  // invert=0: bright pixels transition first (fieldValue = 1 - luma)
+  // invert=1: dark pixels transition first (fieldValue = luma)
+  float fieldValue = mix(1.0 - luma, luma, uInvert);
+
+  float threshold = uProgress * (1.0 + 2.0 * uSoftness) - uSoftness;
+  float w = smoothstep(threshold - uSoftness, threshold + uSoftness, fieldValue);
+  // w=1: pixel hasn't melted yet (still from)
+  return mix(toColor, fromColor, w);
+}
+`,
+});
+//# sourceMappingURL=lumina-melt.js.map

package/dist/transitions/lumina-melt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lumina-melt.js","sourceRoot":"","sources":["../../src/transitions/lumina-melt.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,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,CAAC;KACV;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;CAoBP;CACA,CAAC,CAAC"}

package/dist/transitions/mosaic.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Tile-shuffle reveal: the frame is partitioned into cells that transition
+ * on staggered start times. Each tile picks a random direction; its
+ * `from` sample slides OUT in that direction while its `to` sample
+ * arrives from the SAME direction — so every tile reads as one continuous
+ * flow from a to b instead of reversing at the midpoint.
+ */
+export declare const mosaic: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly count: 14;
+    readonly jitter: 0.08;
+    readonly stagger: 0.4;
+}>>;
+//# sourceMappingURL=mosaic.d.ts.map

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

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

package/dist/transitions/mosaic.js

@@ -0,0 +1,58 @@
+import { defineTransition } from "./define.js";
+/**
+ * Tile-shuffle reveal: the frame is partitioned into cells that transition
+ * on staggered start times. Each tile picks a random direction; its
+ * `from` sample slides OUT in that direction while its `to` sample
+ * arrives from the SAME direction — so every tile reads as one continuous
+ * flow from a to b instead of reversing at the midpoint.
+ */
+export const mosaic = defineTransition({
+    name: "mosaic",
+    defaults: {
+        count: 14,
+        jitter: 0.08,
+        stagger: 0.4,
+    },
+    glsl: `
+uniform float uCount;
+uniform float uJitter;
+uniform float uStagger;
+
+float hash21(vec2 p) {
+  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
+}
+vec2 hash22(vec2 p) {
+  return vec2(
+    fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453),
+    fract(sin(dot(p, vec2(39.3468, 11.1357))) * 24678.1234)
+  );
+}
+
+vec4 transition(vec2 uv) {
+  // 1×1 = full fade, 2×2 = quad-split — neither reads as "mosaic".
+  // Clamp here so the transition is reliable regardless of caller input.
+  float count = max(uCount, 3.0);
+  vec2 cell = floor(uv * count);
+
+  // Random unit direction per cell.
+  vec2 rawDir = hash22(cell) * 2.0 - 1.0;
+  vec2 dir = rawDir / max(length(rawDir), 0.0001);
+
+  // Staggered per-cell transition, monotonic in uProgress.
+  float priority = hash21(cell);
+  float start = priority * uStagger;
+  float localP = clamp((uProgress - start) / max(1.0 - uStagger, 0.0001), 0.0, 1.0);
+
+  // One-way flow: from-sample slides out in dir, to-sample arrives from
+  // the same dir. Same velocity + direction through the crossfade, so the
+  // tile reads as one continuous movement instead of out-and-back.
+  // Mirror-sample so out-of-range UVs reflect into in-bounds content
+  // instead of clamping into edge-color streaks.
+  vec2 fromUv = mirrorUv(uv + dir * uJitter * localP);
+  vec2 toUv = mirrorUv(uv + dir * uJitter * (localP - 1.0));
+
+  return mix(getFromColor(fromUv), getToColor(toUv), localP);
+}
+`,
+});
+//# sourceMappingURL=mosaic.js.map

package/dist/transitions/mosaic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mosaic.js","sourceRoot":"","sources":["../../src/transitions/mosaic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,gBAAgB,CAAC;IACrC,IAAI,EAAE,QAAQ;IACd,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,GAAG;KACb;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCP;CACA,CAAC,CAAC"}

package/dist/transitions/noise-dissolve.d.ts

@@ -0,0 +1,5 @@
+export declare const noiseDissolve: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly scale: 20;
+    readonly softness: 0.05;
+}>>;
+//# sourceMappingURL=noise-dissolve.d.ts.map

package/dist/transitions/noise-dissolve.d.ts.map

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

package/dist/transitions/noise-dissolve.js

@@ -0,0 +1,41 @@
+import { defineTransition } from "./define.js";
+export const noiseDissolve = defineTransition({
+    name: "noise-dissolve",
+    defaults: {
+        scale: 20,
+        softness: 0.05,
+    },
+    glsl: `
+uniform float uScale;
+uniform float uSoftness;
+
+float hash21(vec2 p) {
+  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+// Bilinearly-smoothed value noise.
+float valueNoise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);
+  float a = hash21(i);
+  float b = hash21(i + vec2(1.0, 0.0));
+  float c = hash21(i + vec2(0.0, 1.0));
+  float d = hash21(i + vec2(1.0, 1.0));
+  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+}
+
+vec4 transition(vec2 uv) {
+  // Sample a noise field; each pixel gets a "transition time" in [0,1].
+  float n = valueNoise(uv * uScale);
+
+  // Threshold moves from just-below-0 to just-above-1, so the feather
+  // is fully off the noise range at the endpoints.
+  float threshold = uProgress * (1.0 + 2.0 * uSoftness) - uSoftness;
+  float w = smoothstep(threshold - uSoftness, threshold + uSoftness, n);
+
+  return mix(getToColor(uv), getFromColor(uv), w);
+}
+`,
+});
+//# sourceMappingURL=noise-dissolve.js.map

package/dist/transitions/noise-dissolve.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"noise-dissolve.js","sourceRoot":"","sources":["../../src/transitions/noise-dissolve.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,CAAC,MAAM,aAAa,GAAG,gBAAgB,CAAC;IAC5C,IAAI,EAAE,gBAAgB;IACtB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE;QACT,QAAQ,EAAE,IAAI;KACf;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BP;CACA,CAAC,CAAC"}

package/dist/transitions/page-curl.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Classic book-page curl — impossible in a fragment shader because it
+ * needs real geometry deformation, silhouette, and depth-ordered self-
+ * occlusion.
+ *
+ * A tilted hinge line sweeps across the plane. Vertices on the curled
+ * side wrap around a cylinder whose effective radius grows with the
+ * fraction of the sweep completed (sqrt growth: a real rolled page
+ * starts tight and fattens as more length wraps). Front face samples
+ * `from` with Lambert-ish shading; back face uses the configurable
+ * `backColor` with softened shading so it reads as bright paper even
+ * where the key light can't reach.
+ *
+ * Instance 0 is a back plane showing `to`; it also casts a soft drop
+ * shadow from the curl, so the rolled paper visibly floats above the
+ * revealed page. Shadow envelope is 4·p·(1-p) so it gates cleanly to
+ * zero at both endpoints.
+ *
+ * Mesh is densely subdivided along the curl direction (128 cells) so
+ * the cylinder silhouette reads smooth at typical canvas sizes.
+ *
+ * Endpoints: progress 0 → every foreground vertex flat at z=0, front-
+ * facing, `from` at its uv, vLight=1; shadow mask zero. Pixel-pure
+ * from. Progress 1 → every foreground vertex curled past the viewport
+ * edge (clipped out), back plane visible with shadow mask zero. Pixel-
+ * pure to.
+ */
+export declare const pageCurl: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly tilt: 0.12;
+    readonly backColor: readonly [0.97, 0.96, 0.94];
+}>>;
+//# sourceMappingURL=page-curl.d.ts.map

package/dist/transitions/page-curl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-curl.d.ts","sourceRoot":"","sources":["../../src/transitions/page-curl.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,QAAQ;;;GAuInB,CAAC"}

package/dist/transitions/page-curl.js

@@ -0,0 +1,165 @@
+import { defineTransition } from "./define.js";
+/**
+ * Classic book-page curl — impossible in a fragment shader because it
+ * needs real geometry deformation, silhouette, and depth-ordered self-
+ * occlusion.
+ *
+ * A tilted hinge line sweeps across the plane. Vertices on the curled
+ * side wrap around a cylinder whose effective radius grows with the
+ * fraction of the sweep completed (sqrt growth: a real rolled page
+ * starts tight and fattens as more length wraps). Front face samples
+ * `from` with Lambert-ish shading; back face uses the configurable
+ * `backColor` with softened shading so it reads as bright paper even
+ * where the key light can't reach.
+ *
+ * Instance 0 is a back plane showing `to`; it also casts a soft drop
+ * shadow from the curl, so the rolled paper visibly floats above the
+ * revealed page. Shadow envelope is 4·p·(1-p) so it gates cleanly to
+ * zero at both endpoints.
+ *
+ * Mesh is densely subdivided along the curl direction (128 cells) so
+ * the cylinder silhouette reads smooth at typical canvas sizes.
+ *
+ * Endpoints: progress 0 → every foreground vertex flat at z=0, front-
+ * facing, `from` at its uv, vLight=1; shadow mask zero. Pixel-pure
+ * from. Progress 1 → every foreground vertex curled past the viewport
+ * edge (clipped out), back plane visible with shadow mask zero. Pixel-
+ * pure to.
+ */
+export const pageCurl = defineTransition({
+    name: "page-curl",
+    mesh: { subdivisions: [128, 32], instances: 2 },
+    defaults: {
+        tilt: 0.12,
+        backColor: [0.97, 0.96, 0.94],
+    },
+    vertex: `
+uniform float uTilt;
+const float uRadius = 0.5;
+
+out float vLight;
+out float vAlpha;
+flat out int vInstance;
+
+#define PI 3.14159265359
+
+void main() {
+  vInstance = gl_InstanceID;
+  vUv = aUv;
+
+  if (gl_InstanceID == 0) {
+    gl_Position = vec4(aPosition, 0.99, 1.0);
+    vLight = 1.0;
+    vAlpha = 1.0;
+    return;
+  }
+
+  vec2 sweepDir = vec2(cos(uTilt), sin(uTilt));
+  vec2 hingeDir = vec2(-sweepDir.y, sweepDir.x);
+
+  float s = dot(aPosition, sweepDir);
+  float h = dot(aPosition, hingeDir);
+
+  float maxExtent = abs(sweepDir.x) + abs(sweepDir.y);
+  float hingePos = mix(
+    maxExtent + uRadius,
+    -maxExtent - 2.0 * uRadius,
+    uProgress
+  );
+
+  float d = s - hingePos;
+
+  if (d <= 0.0) {
+    gl_Position = vec4(aPosition, 0.0, 1.0);
+    vLight = 1.0;
+    vAlpha = 1.0;
+    return;
+  }
+
+  float totalTravel = 2.0 * maxExtent + 3.0 * uRadius;
+  float traveled = maxExtent + uRadius - hingePos;
+  float rEff = uRadius * (0.18 + 0.82 * sqrt(traveled / totalTravel));
+
+  float theta = d / rEff;
+  float newS = hingePos + rEff * sin(theta);
+  float newZ = rEff * (cos(theta) - 1.0);
+
+  vec2 newPos = newS * sweepDir + h * hingeDir;
+  gl_Position = vec4(newPos, newZ, 1.0);
+
+  vec3 normal = vec3(sin(theta) * sweepDir, -cos(theta));
+  vec3 lightDir = normalize(vec3(0.35, 0.55, -1.0));
+  vLight = clamp(0.5 + 0.55 * dot(normal, lightDir), 0.3, 1.0);
+
+  vAlpha = 1.0 - smoothstep(PI, PI * 2.0, theta);
+}
+`,
+    glsl: `
+uniform float uTilt;
+uniform vec3 uBackColor;
+const float uRadius = 0.5;
+
+in float vLight;
+in float vAlpha;
+flat in int vInstance;
+
+vec4 transition(vec2 uv) {
+  if (vInstance == 0) {
+    // Back plane: the destination page, with a soft drop shadow cast
+    // by the curl floating above it. Shadow is strongest right past
+    // the hinge (where the curl overhangs) and fades over a few
+    // effective radii. 4·p·(1-p) envelope keeps endpoints pure.
+    vec3 col = getToColor(uv).rgb;
+
+    vec2 sweepDir = vec2(cos(uTilt), sin(uTilt));
+    float maxExtent = abs(sweepDir.x) + abs(sweepDir.y);
+    float hingePos = mix(
+      maxExtent + uRadius,
+      -maxExtent - 2.0 * uRadius,
+      uProgress
+    );
+
+    vec2 clipPos = uv * 2.0 - 1.0;
+    float s = dot(clipPos, sweepDir);
+    float d = s - hingePos;
+
+    float totalTravel = 2.0 * maxExtent + 3.0 * uRadius;
+    float traveled = max(maxExtent + uRadius - hingePos, 0.0);
+    float rEff = uRadius * (0.18 + 0.82 * sqrt(traveled / totalTravel));
+
+    float distPastHinge = max(d, 0.0);
+    float shadow = 1.0 - smoothstep(0.0, 3.5 * rEff, distPastHinge);
+    float envelope = 4.0 * uProgress * (1.0 - uProgress);
+    col *= 1.0 - shadow * 0.55 * envelope;
+
+    return vec4(col, 1.0);
+  }
+
+  if (vAlpha < 0.01) discard;
+
+  vec3 col;
+  float alpha;
+  if (gl_FrontFacing) {
+    col = getFromColor(uv).rgb * vLight;
+    // Smooth fade on the image side so the seam at the wrap-around
+    // (theta ≈ 2π, page disappearing past itself) doesn't read as a
+    // hard edge.
+    alpha = vAlpha;
+  } else {
+    // Paper back: author-chosen colour with gentle shading that never
+    // drops below ~85%, so the back reads as diffusely lit paper even
+    // where the key light can't reach (the far side of the curl).
+    float backLight = 0.85 + 0.15 * vLight;
+    col = uBackColor * backLight;
+    // Always opaque inside the visible mesh — paper isn't transparent.
+    // Letting the back's alpha follow vAlpha lets the next page bleed
+    // through the back during the wrap-around fade, breaking the
+    // illusion of a solid page. Hard discard above (vAlpha < 0.01)
+    // already handles culling for fully wrapped vertices.
+    alpha = 1.0;
+  }
+  return vec4(col, alpha);
+}
+`,
+});
+//# sourceMappingURL=page-curl.js.map

package/dist/transitions/page-curl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-curl.js","sourceRoot":"","sources":["../../src/transitions/page-curl.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,gBAAgB,CAAC;IACvC,IAAI,EAAE,WAAW;IACjB,IAAI,EAAE,EAAE,YAAY,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE;IAC/C,QAAQ,EAAE;QACR,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU;KACvC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DT;IACC,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEP;CACA,CAAC,CAAC"}

package/dist/transitions/paint-bleed.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Ink-like directional bleed: a dominant gradient sweeps across, with noise
+ * perturbing the wavefront edge so it feels organic (watercolor / ink on
+ * paper) rather than a clean wipe or a uniform dissolve.
+ */
+export declare const paintBleed: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly direction: readonly [-1, 0];
+    readonly scale: 10;
+    readonly softness: 0.02;
+    readonly noiseStrength: 0.35;
+}>>;
+//# sourceMappingURL=paint-bleed.d.ts.map

package/dist/transitions/paint-bleed.d.ts.map

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

package/dist/transitions/paint-bleed.js

@@ -0,0 +1,59 @@
+import { defineTransition } from "./define.js";
+/**
+ * Ink-like directional bleed: a dominant gradient sweeps across, with noise
+ * perturbing the wavefront edge so it feels organic (watercolor / ink on
+ * paper) rather than a clean wipe or a uniform dissolve.
+ */
+export const paintBleed = defineTransition({
+    name: "paint-bleed",
+    defaults: {
+        direction: [-1, 0],
+        scale: 10,
+        softness: 0.02,
+        noiseStrength: 0.35,
+    },
+    glsl: `
+uniform vec2 uDirection;
+uniform float uScale;
+uniform float uSoftness;
+uniform float uNoiseStrength;
+
+float hash21(vec2 p) {
+  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+float valueNoise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);
+  float a = hash21(i);
+  float b = hash21(i + vec2(1.0, 0.0));
+  float c = hash21(i + vec2(0.0, 1.0));
+  float d = hash21(i + vec2(1.0, 1.0));
+  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+}
+
+vec4 transition(vec2 uv) {
+  vec2 d = normalize(uDirection);
+  // Max |dot(uv - 0.5, -d)| over uv ∈ [0,1]² is (|dx| + |dy|) * 0.5.
+  // Without dividing by it, gradient extends beyond [0, 1] for diagonal
+  // directions and the threshold-based smoothstep can't fully reveal the
+  // corners at progress=1 — leaving a sliver of the previous image.
+  float maxProj = max((abs(d.x) + abs(d.y)) * 0.5, 0.0001);
+  float gradient = 0.5 + dot(uv - 0.5, -d) / (2.0 * maxProj);
+
+  // Noise only perturbs the wavefront edge, not the overall progression.
+  float perturbation = (valueNoise(uv * uScale) - 0.5) * uNoiseStrength;
+  float fieldValue = gradient + perturbation;
+
+  // Extend threshold range to accommodate noise extrema → endpoints stay clean.
+  float noiseRange = uNoiseStrength * 0.5;
+  float totalEdge = uSoftness + noiseRange;
+  float threshold = uProgress * (1.0 + 2.0 * totalEdge) - totalEdge;
+  float w = smoothstep(threshold - uSoftness, threshold + uSoftness, fieldValue);
+
+  return mix(getToColor(uv), getFromColor(uv), w);
+}
+`,
+});
+//# sourceMappingURL=paint-bleed.js.map

package/dist/transitions/paint-bleed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paint-bleed.js","sourceRoot":"","sources":["../../src/transitions/paint-bleed.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,gBAAgB,CAAC;IACzC,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE;QACR,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAClB,KAAK,EAAE,EAAE;QACT,QAAQ,EAAE,IAAI;QACd,aAAa,EAAE,IAAI;KACpB;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CP;CACA,CAAC,CAAC"}