@vysmo/transitions 0.1.0

package/src/transitions/shockwave.ts

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

package/src/transitions/singularity.ts

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

package/src/transitions/slide.ts

@@ -0,0 +1,76 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Cover slide: the "to" image slides in and covers the stationary "from".
+ * Distinct from `push` (which scrolls both images together as a unit).
+ */
+export const slide = defineTransition({
+  name: "slide",
+  defaults: {
+    direction: [-1, 0],
+    feather: 0.015,
+    blur: 0,
+  },
+  glsl: `
+uniform vec2 uDirection;
+uniform float uFeather;
+uniform float uBlur;
+
+vec4 sampleToBlurred(vec2 uv, vec2 motion, float amount) {
+  if (amount < 0.001) return getToColor(clamp(uv, 0.0, 1.0));
+  // 8 Gaussian-weighted samples along the motion axis. Center samples
+  // dominate; trailing ones fade out so the blur reads as continuous, not
+  // as discrete ghost copies. Effective spread is capped at the call site
+  // — past ~0.05 UV the eye sees stripes regardless of sample count.
+  const int N = 8;
+  const float sigma = 0.25;
+  vec4 sum = vec4(0.0);
+  float wSum = 0.0;
+  for (int i = 0; i < N; i++) {
+    float t = float(i) / float(N - 1) - 0.5;
+    float w = exp(-(t * t) / (2.0 * sigma * sigma));
+    sum += getToColor(clamp(uv + motion * amount * t, 0.0, 1.0)) * w;
+    wSum += w;
+  }
+  return sum / wSum;
+}
+
+// Snap to nearest axis-aligned unit. Slide's seam math is built around
+// axis-aligned motion; diagonals leave triangular gaps at the corners.
+// Enforced in-shader 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);
+
+  // "to" is translated from off-screen (behind the trailing edge) into place.
+  // At progress=0, to is offset by +d (fully off-screen). At progress=1, to is at origin.
+  vec2 toUv = uv + d * (1.0 - uProgress);
+
+  // Feathered seam between from (stationary) and to (moving into frame).
+  // The projected coordinate's range is ±maxProj where maxProj = (|dx|+|dy|)/2,
+  // so we scale by it to keep the feather zone off-screen at the endpoints
+  // for any direction (axis-aligned OR diagonal).
+  float maxProj = max((abs(d.x) + abs(d.y)) * 0.5, 0.0001);
+  float boundary = (maxProj + uFeather) * (1.0 - 2.0 * uProgress);
+  float projected = dot(uv - 0.5, -d);
+  float w = smoothstep(boundary - uFeather, boundary + uFeather, projected);
+
+  // From is stationary → sample cleanly, no blur.
+  vec4 fromColor = getFromColor(uv);
+
+  // To is the moving layer → velocity-scaled motion blur along motion axis.
+  // uBlur is the peak spread radius in UV units, capped at 0.1: past that
+  // the discrete sample structure shows as visible stripes regardless of
+  // sample count. Hard-clamp here so the transition is reliable for any
+  // caller input.
+  float motion = 4.0 * uProgress * (1.0 - uProgress) * min(uBlur, 0.1);
+  vec4 toColor = sampleToBlurred(toUv, -d, motion);
+
+  return mix(fromColor, toColor, w);
+}
+`,
+});

package/src/transitions/smoldering-edge.ts

@@ -0,0 +1,74 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Linear burn with a smoldering trail: heavy low-frequency noise produces
+ * finger-like tendrils of fire reaching ahead of the main front, while
+ * an amber trail behind the front decays over `trailLength`. Evokes
+ * paper burning or a slow wildfire advancing, vs. directional-burn's
+ * sharper fuse-line aesthetic.
+ */
+export const smolderingEdge = defineTransition({
+  name: "smoldering-edge",
+  defaults: {
+    direction: [1, 1],
+    scale: 3,
+    edgeWidth: 0.04,
+    trailLength: 0.18,
+    emberColor: [1.4, 0.5, 0.1],
+  },
+  glsl: `
+uniform vec2 uDirection;
+uniform float uScale;
+uniform float uEdgeWidth;
+uniform float uTrailLength;
+uniform vec3 uEmberColor;
+
+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);
+  float projected = dot(uv - 0.5, -d);
+  float maxProj = 0.5 * (abs(d.x) + abs(d.y));
+
+  // Heavy low-frequency noise for tendril-like edge deformation.
+  float noiseStrength = 0.25;
+  float n = valueNoise(uv * uScale);
+  float perturbed = projected - (n - 0.5) * noiseStrength;
+
+  float totalEdge = uEdgeWidth + noiseStrength * 0.5;
+  float boundary = (maxProj + totalEdge) * (1.0 - 2.0 * uProgress);
+  float signedDist = perturbed - boundary;
+
+  float w = smoothstep(-uEdgeWidth, uEdgeWidth, signedDist);
+  vec4 base = mix(getFromColor(uv), getToColor(uv), w);
+
+  // Front band: tight Gaussian on the advancing line.
+  float bandX = signedDist / max(uEdgeWidth * 1.5, 0.0001);
+  float frontBand = exp(-bandX * bandX * 3.0);
+  // Trail: only behind the front (signedDist > 0 = already burned side),
+  // exponential decay with distance from the front.
+  float trail = max(signedDist, 0.0);
+  float trailGlow = exp(-trail / max(uTrailLength, 0.0001));
+  float trailMask = step(0.0, signedDist);
+
+  float glow = max(frontBand, trailGlow * trailMask * 0.55);
+  float env = 4.0 * uProgress * (1.0 - uProgress);
+  vec3 ember = uEmberColor * glow * env;
+
+  return vec4(base.rgb + ember, base.a);
+}
+`,
+});

package/src/transitions/split.ts

@@ -0,0 +1,53 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Unified split transition: open (doors part) or close (doors meet) along
+ * either axis. Replaces four gl-transitions (HorizontalOpen, HorizontalClose,
+ * VerticalOpen, VerticalClose) with one parametric transition.
+ *
+ * axis: 0 = horizontal split (parts along Y), 1 = vertical split (parts along X)
+ * mode: 0 = open (from parts, revealing to), 1 = close (to meets over from)
+ */
+export const split = defineTransition({
+  name: "split",
+  defaults: {
+    axis: 0,
+    mode: 0,
+    softness: 0.01,
+  },
+  glsl: `
+uniform float uAxis;
+uniform float uMode;
+uniform float uSoftness;
+
+vec4 transition(vec2 uv) {
+  // Distance from the split axis (perpendicular to the doors' motion).
+  float splitCoord = mix(uv.x, uv.y, uAxis);
+  float absDist = abs(splitCoord - 0.5);
+
+  // Boundary is "how far from the split center the doors extend right now".
+  // OPEN: grows from -softness to 0.5+softness (from doors retreat outward).
+  // CLOSE: shrinks from 0.5+softness to -softness (to doors close inward).
+  // Both inner and outer sample at uv directly. Each door is a position-based
+  // reveal, not a texture that slides with the door — so the softness band
+  // blends two views of the same scene location instead of two different
+  // places of from/to (which produced the "wrong content at the seam"
+  // artifact in the previous slide-with-content implementation).
+  float boundary;
+  vec4 innerColor;
+  vec4 outerColor;
+  if (uMode < 0.5) {
+    boundary = -uSoftness + uProgress * (0.5 + 2.0 * uSoftness);
+    innerColor = getToColor(uv);
+    outerColor = getFromColor(uv);
+  } else {
+    boundary = (0.5 + uSoftness) - uProgress * (0.5 + 2.0 * uSoftness);
+    innerColor = getFromColor(uv);
+    outerColor = getToColor(uv);
+  }
+
+  float w = smoothstep(boundary - uSoftness, boundary + uSoftness, absDist);
+  return mix(innerColor, outerColor, w);
+}
+`,
+});

package/src/transitions/swirl.ts

@@ -0,0 +1,42 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Ported from gl-transitions' Swirl (by Sergey Kosarevsky). Both images are
+ * sampled at the same swirled UV — so the symmetric swirl envelope does NOT
+ * cause a visual freeze, because the linear crossfade keeps opacity changing
+ * throughout. Rotation uses a quadratic falloff from center: strongest at
+ * the center, zero at the edge of the active radius.
+ */
+export const swirl = defineTransition({
+  name: "swirl",
+  defaults: {
+    radius: 1.0,
+    strength: 25.13,
+  },
+  glsl: `
+uniform float uRadius;
+uniform float uStrength;
+
+vec4 transition(vec2 uv) {
+  vec2 centered = uv - 0.5;
+  float dist = length(centered);
+
+  if (dist < uRadius) {
+    float pct = (uRadius - dist) / uRadius;
+    // Symmetric ramp: 0 → 1 → 0 as progress goes 0 → 0.5 → 1.
+    float a = uProgress <= 0.5
+              ? uProgress / 0.5
+              : 1.0 - (uProgress - 0.5) / 0.5;
+    float theta = pct * pct * a * uStrength;
+    float s = sin(theta);
+    float c = cos(theta);
+    centered = vec2(dot(centered, vec2(c, -s)), dot(centered, vec2(s, c)));
+  }
+
+  vec2 swirledUv = clamp(centered + 0.5, 0.0, 1.0);
+  vec4 c0 = getFromColor(swirledUv);
+  vec4 c1 = getToColor(swirledUv);
+  return mix(c0, c1, uProgress);
+}
+`,
+});

package/src/transitions/tangent-motion-blur.ts

@@ -0,0 +1,58 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Directional motion blur concentrated on the wipe front. As the wipe
+ * sweeps across the frame, pixels near the boundary get heavy along-axis
+ * blur, simulating a camera pan through the cut. Away from the boundary,
+ * pixels stay crisp — distinct from linear-blur which blurs everything
+ * uniformly at midpoint.
+ */
+export const tangentMotionBlur = defineTransition({
+  name: "tangent-motion-blur",
+  defaults: {
+    direction: [1, 0],
+    intensity: 0.08,
+    softness: 0.2,
+  },
+  glsl: `
+uniform vec2 uDirection;
+uniform float uIntensity;
+uniform float uSoftness;
+
+const int SAMPLES = 24;
+
+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 +(maxProj+softness) to -(maxProj+softness) so the
+  // softness band is off-screen at both endpoints, for any direction.
+  float boundary = (maxProj + uSoftness) * (1.0 - 2.0 * uProgress);
+  float signedDist = projected - boundary;
+
+  float wipeMask = smoothstep(-uSoftness, uSoftness, signedDist);
+
+  // Blur amount peaks on the wipe front; envelope-gated so it zeros at
+  // both endpoints regardless of the Gaussian falloff shape.
+  float env = 4.0 * uProgress * (1.0 - uProgress);
+  float falloffX = signedDist / max(uSoftness, 0.0001);
+  float falloff = exp(-falloffX * falloffX * 2.0);
+  float blur = uIntensity * env * falloff;
+
+  vec4 cFrom = vec4(0.0);
+  vec4 cTo = vec4(0.0);
+  for (int i = 0; i < SAMPLES; i++) {
+    float t = (float(i) - float(SAMPLES - 1) * 0.5) / float(SAMPLES - 1);
+    vec2 sampleUv = clamp(uv + d * blur * t, 0.0, 1.0);
+    cFrom += getFromColor(sampleUv);
+    cTo += getToColor(sampleUv);
+  }
+  cFrom /= float(SAMPLES);
+  cTo /= float(SAMPLES);
+
+  return mix(cFrom, cTo, wipeMask);
+}
+`,
+});

package/src/transitions/tile-scatter.ts

@@ -0,0 +1,122 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * The plane is subdivided into tiles; each tile flies off into 3D
+ * space (outward xy drift from the source point, push back in z, and
+ * a random-axis rotation around its own centroid), staggered by per-
+ * tile offset. A fake-perspective divide lets z-motion visibly shrink
+ * the tile on screen so the fly-back feels spatial rather than flat.
+ *
+ * Tiles fade out over the last 30% of their flight. Behind them, a
+ * back plane at z=0.99 shows `to`. At progress=0 every tile is at
+ * rest covering the plane (pure from); at progress=1 every tile has
+ * completed its flight with alpha=0 and the back plane is unobscured
+ * (pure to).
+ *
+ * This proves per-primitive 3D motion — the three.js flying-tiles
+ * reference the user pointed at. Per-quad attributes (aCentroid,
+ * aOffset, aRandom shared across a tile's 6 verts) let each tile
+ * translate and rotate coherently.
+ */
+export const tileScatter = defineTransition({
+  name: "tile-scatter",
+  mesh: { subdivisions: [20, 12], instances: 2 },
+  defaults: {
+    scatter: 1.0,
+  },
+  vertex: `
+uniform float uScatter;
+
+out float vAlpha;
+flat out int vInstance;
+
+#define PI 3.14159265359
+#define WINDOW 0.35
+
+float hash(float n) {
+  return fract(sin(n * 12.9898 + 4.1371) * 43758.5453);
+}
+
+mat3 rotationMatrix(vec3 axis, float angle) {
+  float c = cos(angle);
+  float s = sin(angle);
+  float t = 1.0 - c;
+  vec3 a = axis;
+  return mat3(
+    c + a.x * a.x * t,      a.y * a.x * t + a.z * s, a.z * a.x * t - a.y * s,
+    a.x * a.y * t - a.z * s, c + a.y * a.y * t,     a.z * a.y * t + a.x * s,
+    a.x * a.z * t + a.y * s, a.y * a.z * t - a.x * s, c + a.z * a.z * t
+  );
+}
+
+void main() {
+  vUv = aUv;
+  vInstance = gl_InstanceID;
+
+  if (gl_InstanceID == 0) {
+    // Back plane: destination, far z.
+    gl_Position = vec4(aPosition, 0.99, 1.0);
+    vAlpha = 1.0;
+    return;
+  }
+
+  float start = aOffset * (1.0 - WINDOW);
+  float localT = smoothstep(start, start + WINDOW, uProgress);
+
+  // Random rotation: axis per tile, angle rate per tile.
+  vec3 axis = normalize(vec3(
+    hash(aRandom) * 2.0 - 1.0,
+    hash(aRandom + 0.13) * 2.0 - 1.0,
+    hash(aRandom + 0.27) * 2.0 - 1.0
+  ));
+  float angle = localT * PI * 1.6 * (0.6 + hash(aRandom + 0.41) * 0.8);
+  mat3 rot = rotationMatrix(axis, angle);
+
+  // Rotate the vertex around the tile centroid.
+  vec3 local = vec3(aPosition - aCentroid, 0.0);
+  vec3 rotated = rot * local;
+
+  // Translation: outward from canvas center + push back in z. Source is
+  // hardcoded to (0.5, 0.5) → in clip space that's (0, 0), so awayDir is
+  // simply the centroid's direction from origin.
+  vec2 awayDir = length(aCentroid) > 1e-5 ? normalize(aCentroid) : vec2(0.0);
+
+  vec3 translation = vec3(
+    awayDir * uScatter * 0.75 * localT,
+    uScatter * 2.4 * localT
+  );
+
+  // Per-tile jitter so tiles don't all move in perfect radial symmetry.
+  vec3 jitter = vec3(
+    hash(aRandom + 0.55) * 2.0 - 1.0,
+    hash(aRandom + 0.71) * 2.0 - 1.0,
+    hash(aRandom + 0.89)
+  ) * uScatter * 0.35 * localT;
+
+  vec3 worldPos = vec3(aCentroid, 0.0) + rotated + translation + jitter;
+
+  // Fake perspective: z-motion visibly shrinks tiles on screen.
+  float persp = max(1.0 + worldPos.z * 0.45, 0.1);
+  vec2 screenXY = worldPos.xy / persp;
+  float clipZ = clamp(worldPos.z * 0.15, -0.9, 0.95);
+
+  gl_Position = vec4(screenXY, clipZ, 1.0);
+
+  // Alpha fade over last third of flight.
+  vAlpha = 1.0 - smoothstep(0.7, 1.0, localT);
+}
+`,
+  glsl: `
+in float vAlpha;
+flat in int vInstance;
+
+vec4 transition(vec2 uv) {
+  if (vInstance == 0) {
+    return getToColor(uv);
+  }
+  if (vAlpha < 0.01) discard;
+  vec4 col = getFromColor(uv);
+  return vec4(col.rgb, col.a * vAlpha);
+}
+`,
+});

package/src/transitions/warp-zoom.ts

@@ -0,0 +1,70 @@
+import { defineTransition } from "./define.js";
+
+export const warpZoom = defineTransition({
+  name: "warp-zoom",
+  defaults: {
+    center: [0.5, 0.5],
+    strength: 1.0,
+    rotation: 1.0,
+    blur: 0.02,
+  },
+  glsl: `
+uniform vec2 uCenter;
+uniform float uStrength;
+uniform float uRotation;
+uniform float uBlur;
+
+vec2 warpAround(vec2 uv, vec2 center, float angle, float scale) {
+  vec2 d = uv - center;
+  float c = cos(angle);
+  float s = sin(angle);
+  mat2 rot = mat2(c, -s, s, c);
+  return rot * d / scale + center;
+}
+
+vec4 sampleFromBlurred(vec2 uv, float amount) {
+  if (amount < 0.001) return getFromColor(clamp(uv, 0.0, 1.0));
+  const int N = 5;
+  vec4 sum = vec4(0.0);
+  for (int i = 0; i < N; i++) {
+    float t = (float(i) - 2.0) / 4.0;
+    vec2 offset = (uv - 0.5) * amount * t;
+    sum += getFromColor(clamp(uv + offset, 0.0, 1.0));
+  }
+  return sum / float(N);
+}
+
+vec4 sampleToBlurred(vec2 uv, float amount) {
+  if (amount < 0.001) return getToColor(clamp(uv, 0.0, 1.0));
+  const int N = 5;
+  vec4 sum = vec4(0.0);
+  for (int i = 0; i < N; i++) {
+    float t = (float(i) - 2.0) / 4.0;
+    vec2 offset = (uv - 0.5) * amount * t;
+    sum += getToColor(clamp(uv + offset, 0.0, 1.0));
+  }
+  return sum / float(N);
+}
+
+vec4 transition(vec2 uv) {
+  // From: rotates clockwise + zooms outward (gets bigger, we see less of it)
+  float fromAngle = uProgress * uRotation;
+  float fromScale = 1.0 + uProgress * uStrength;
+
+  // To: rotates counter-clockwise + zooms in (starts big, settles to native)
+  float toAngle = -(1.0 - uProgress) * uRotation;
+  float toScale = 1.0 + (1.0 - uProgress) * uStrength;
+
+  vec2 fromUv = warpAround(uv, uCenter, fromAngle, fromScale);
+  vec2 toUv = warpAround(uv, uCenter, toAngle, toScale);
+
+  // Velocity-scaled radial blur
+  float motion = 4.0 * uProgress * (1.0 - uProgress) * uBlur;
+  vec4 fromColor = sampleFromBlurred(fromUv, motion);
+  vec4 toColor = sampleToBlurred(toUv, motion);
+
+  float mixW = smoothstep(0.3, 0.7, uProgress);
+  return mix(fromColor, toColor, mixW);
+}
+`,
+});

package/src/transitions/wave-stripes.ts

@@ -0,0 +1,55 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Inspired by chungeric's codepen MWQoLqV. The reveal pattern is a
+ * `mod()` modulation of an oblique sine field — which creates curved
+ * stripes following the iso-contours of `cos(x) + 0.8*sin(y)`. A moving
+ * threshold biased along `direction` flips stripes from from→to one by
+ * one. The original used a hard `step()`; we soften with smoothstep to
+ * honor the no-hard-cuts rule while keeping the curved-stripe character.
+ *
+ * `scale` and `softness` are baked-in — they don't expose meaningful
+ * tuning at this scale (single sine field, single stripe period). Only
+ * `direction` is user-tunable.
+ */
+export const waveStripes = defineTransition({
+  name: "wave-stripes",
+  defaults: {
+    direction: [1, 0],
+  },
+  glsl: `
+uniform vec2 uDirection;
+
+// Snap to nearest axis-aligned unit. The sweep math projects uv onto -d
+// for the threshold bias; diagonals give an out-of-range projection that
+// breaks endpoint correctness. Enforced in-shader so the UI's axis-only
+// picker matches.
+vec2 snapAxis(vec2 v) {
+  vec2 dn = normalize(v);
+  return abs(dn.x) > abs(dn.y) ? vec2(sign(dn.x), 0.0) : vec2(0.0, sign(dn.y));
+}
+
+vec4 transition(vec2 uv) {
+  const float SCALE = 1.0;
+  const float SOFTNESS = 0.003;
+
+  vec2 d = snapAxis(uDirection);
+
+  // Oblique sine field; mod creates stripes following its iso-contours.
+  float field = cos(uv.x * SCALE) + sin(uv.y * SCALE) * 0.8;
+  float stripe = mod(field, 0.05);
+
+  // Threshold sweeps from above-max-stripe to below-zero. Pixels flip
+  // earliest where threshold-bias is lowest, so the reveal travels in
+  // the direction +d. d=[1,0] (default) → bias = uv.x*0.05 → reveal
+  // moves left-to-right, matching the original hardcoded behavior.
+  float proj = dot(uv - vec2(0.5), d) + 0.5;
+  float bias = proj * 0.05;
+  float threshold = (0.05 + 2.0 * SOFTNESS + bias) * (1.0 - uProgress) - SOFTNESS;
+
+  float dMix = smoothstep(threshold - SOFTNESS, threshold + SOFTNESS, stripe);
+
+  return mix(getFromColor(uv), getToColor(uv), dMix);
+}
+`,
+});