@vysmo/transitions 0.1.0

package/src/transitions/lenticular-flip.ts

@@ -0,0 +1,73 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Hologram-card flip. The frame is divided into vertical strips, each
+ * modelled as a narrow rectangle that rotates around its vertical axis
+ * from 0 (showing from face-on) through 90° (edge-on — content pinches
+ * to zero width) to 180° (showing to face-on). Flip timing is
+ * staggered across strips left → right, so a wavefront of flipping
+ * strips sweeps across the image.
+ *
+ * Perspective is faked by compressing strip content to fit the
+ * visible half-width |cos(rotation)| · stripWidth/2. When a strip is
+ * edge-on, its visible half-width is zero and every pixel falls into
+ * the "crease" region, which fills with a mix(from, to, flipT) so
+ * the full-frame rule holds (no black cracks).
+ *
+ * Endpoints: at progress 0 every strip is at flipT=0 (cos=1, full
+ * visibility, sampling from at the correct uv). At progress 1 every
+ * strip is at flipT=1 (cos=-1, full visibility, sampling to).
+ */
+export const lenticularFlip = defineTransition({
+  name: "lenticular-flip",
+  defaults: {
+    stripCount: 22,
+  },
+  glsl: `
+uniform float uStripCount;
+
+vec4 transition(vec2 uv) {
+  // stripCount<3 collapses to a single full-canvas flip (1) or a half-and-half
+  // (2) — neither reads as "lenticular". Clamp here so the transition is
+  // reliable regardless of caller input.
+  float stripCount = max(uStripCount, 3.0);
+
+  float stripF = uv.x * stripCount;
+  float stripIdx = floor(stripF);
+  float localU = fract(stripF);
+
+  // Staggered flip timing: each strip flips over a window of 0.5 in
+  // progress. The window's start scales from 0 (leftmost strip) to
+  // 0.5 (rightmost strip), so the wave finishes exactly at progress 1.
+  float stripStart = stripIdx / stripCount;
+  float windowStart = stripStart * 0.5;
+  float flipT = smoothstep(windowStart, windowStart + 0.5, uProgress);
+
+  // Strip rotation: 0 at flipT=0, PI at flipT=1.
+  float rotAngle = flipT * 3.14159265;
+  float cosRot = cos(rotAngle);
+  float visibleHalfWidth = abs(cosRot) * 0.5;
+
+  // Local coord centred in the strip, range [-0.5, 0.5].
+  float centered = localU - 0.5;
+
+  // Decompress: map visible [-vhw, vhw] back to [0, 1] strip-local,
+  // clamped so out-of-window pixels sample the strip's edge cleanly
+  // (instead of out-of-strip or out-of-canvas).
+  float decompressed = clamp((centered / max(visibleHalfWidth, 0.0001) + 1.0) * 0.5, 0.0, 1.0);
+  vec2 sampleUv = vec2((stripIdx + decompressed) / stripCount, uv.y);
+  vec4 stripColor = cosRot >= 0.0 ? getFromColor(sampleUv) : getToColor(sampleUv);
+
+  // Crease fallback: outside the visible window, crossfade from→to so
+  // we never emit a black pixel. Feather across a small band at the
+  // boundary so the spatial edge between "compressed strip sample" and
+  // "crossfade crease" doesn't read as a 1-pixel flickering line —
+  // those two values are computed from completely different source
+  // positions and the hard step between them was the visible artifact.
+  vec4 creaseColor = mix(getFromColor(uv), getToColor(uv), flipT);
+  float feather = 1.0 / stripCount * 0.04;
+  float t = smoothstep(visibleHalfWidth - feather, visibleHalfWidth + feather, abs(centered));
+  return mix(stripColor, creaseColor, t);
+}
+`,
+});

package/src/transitions/light-leak.ts

@@ -0,0 +1,43 @@
+import { defineTransition } from "./define.js";
+
+export const lightLeak = defineTransition({
+  name: "light-leak",
+  defaults: {
+    direction: [1, 0],
+    color: [1.0, 0.85, 0.55],
+    bandWidth: 0.2,
+    intensity: 1.0,
+  },
+  glsl: `
+uniform vec2 uDirection;
+uniform vec3 uColor;
+uniform float uBandWidth;
+uniform float uIntensity;
+
+vec4 transition(vec2 uv) {
+  vec2 d = normalize(uDirection);
+  // Scale by maxProj so diagonal directions clear corners at endpoints
+  // (see paint-bleed.ts).
+  float maxProj = max((abs(d.x) + abs(d.y)) * 0.5, 0.0001);
+  float projected = dot(uv - 0.5, -d);
+
+  // Boundary sweeps from just beyond the trailing edge to just beyond the
+  // leading edge (offset by bandWidth so the bloom zone clears both edges
+  // cleanly at the endpoints).
+  float boundary = (maxProj + uBandWidth) * (1.0 - 2.0 * uProgress);
+
+  // Which side of the boundary? 0 = still from, 1 = already to.
+  float sweep = smoothstep(-uBandWidth * 0.5, uBandWidth * 0.5, projected - boundary);
+  vec4 baseColor = mix(getFromColor(uv), getToColor(uv), sweep);
+
+  // Gaussian-ish bloom centered on the boundary, scaled to zero at endpoints.
+  float env = 4.0 * uProgress * (1.0 - uProgress);
+  float distToBand = abs(projected - boundary);
+  float bandX = distToBand / max(uBandWidth, 0.0001);
+  float bandIntensity = exp(-bandX * bandX * 4.0) * env * uIntensity;
+
+  vec3 bloomed = baseColor.rgb + uColor * bandIntensity;
+  return vec4(bloomed, baseColor.a);
+}
+`,
+});

package/src/transitions/linear-blur.ts

@@ -0,0 +1,40 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Directional linear blur. 32 samples along a configurable axis, avoiding
+ * the 2D grid artifacts that box-blur kernels produce at high displacement.
+ * Blur amount peaks at the midpoint (triangular envelope), linear crossfade
+ * across the full progress range.
+ */
+export const linearBlur = defineTransition({
+  name: "linear-blur",
+  defaults: {
+    direction: [1, 0],
+    intensity: 0.1,
+  },
+  glsl: `
+uniform vec2 uDirection;
+uniform float uIntensity;
+
+const int SAMPLES = 32;
+
+vec4 transition(vec2 uv) {
+  vec2 d = normalize(uDirection);
+  // Triangular envelope: zero at endpoints, peaks at p=0.5.
+  float disp = uIntensity * (0.5 - distance(0.5, uProgress)) * 2.0;
+
+  vec4 c1 = vec4(0.0);
+  vec4 c2 = vec4(0.0);
+  for (int i = 0; i < SAMPLES; i++) {
+    float t = (float(i) - float(SAMPLES - 1) * 0.5) / float(SAMPLES - 1);
+    vec2 off = d * disp * t;
+    c1 += getFromColor(uv + off);
+    c2 += getToColor(uv + off);
+  }
+  c1 /= float(SAMPLES);
+  c2 /= float(SAMPLES);
+
+  return mix(c1, c2, uProgress);
+}
+`,
+});

package/src/transitions/liquid-chrome.ts

@@ -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);
+}
+`,
+});

package/src/transitions/liquid-morph.ts

@@ -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);
+}
+`,
+});

package/src/transitions/lumina-melt.ts

@@ -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);
+}
+`,
+});

package/src/transitions/mosaic.ts

@@ -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);
+}
+`,
+});

package/src/transitions/noise-dissolve.ts

@@ -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);
+}
+`,
+});

package/src/transitions/page-curl.ts

@@ -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] as const,
+  },
+  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);
+}
+`,
+});

package/src/transitions/paint-bleed.ts

@@ -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);
+}
+`,
+});