@vysmo/transitions 0.1.0

package/dist/transitions/particle-assemble.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The image is partitioned into small rectangular cells; each cell
+ * translates as a rigid block along its own per-cell random direction,
+ * with a 4·p·(1-p) envelope so displacement is zero at both endpoints
+ * and peaks at mid-progress. Neighbouring cells with different flight
+ * directions tear apart, producing visible seams that read as discrete
+ * particle boundaries — the key difference from per-pixel noise
+ * displacement, which only ever blurs continuously.
+ *
+ * Update param is density (cells per unit height) rather than
+ * scatter-only, so authors directly control particle grain. Aspect
+ * is compensated so cells stay roughly square regardless of canvas
+ * shape.
+ *
+ * Endpoints: envelope = 0 at progress 0/1, so displacement collapses
+ * and each pixel samples from/to at its own uv. Crossfade smoothstep
+ * saturates to 0 at progress 0 and 1 at progress 1.
+ */
+export declare const particleAssemble: import("../types.js").Transition<import("../types.js").Widen<{
+    readonly scatter: 0.22;
+    readonly density: 48;
+}>>;
+//# sourceMappingURL=particle-assemble.d.ts.map

package/dist/transitions/particle-assemble.d.ts.map

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

package/dist/transitions/particle-assemble.js

@@ -0,0 +1,65 @@
+import { defineTransition } from "./define.js";
+/**
+ * The image is partitioned into small rectangular cells; each cell
+ * translates as a rigid block along its own per-cell random direction,
+ * with a 4·p·(1-p) envelope so displacement is zero at both endpoints
+ * and peaks at mid-progress. Neighbouring cells with different flight
+ * directions tear apart, producing visible seams that read as discrete
+ * particle boundaries — the key difference from per-pixel noise
+ * displacement, which only ever blurs continuously.
+ *
+ * Update param is density (cells per unit height) rather than
+ * scatter-only, so authors directly control particle grain. Aspect
+ * is compensated so cells stay roughly square regardless of canvas
+ * shape.
+ *
+ * Endpoints: envelope = 0 at progress 0/1, so displacement collapses
+ * and each pixel samples from/to at its own uv. Crossfade smoothstep
+ * saturates to 0 at progress 0 and 1 at progress 1.
+ */
+export const particleAssemble = defineTransition({
+    name: "particle-assemble",
+    defaults: {
+        scatter: 0.22,
+        density: 48,
+    },
+    glsl: `
+uniform float uScatter;
+uniform float uDensity;
+
+float hash21(vec2 p) {
+  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+vec2 hash22(vec2 p) {
+  return vec2(hash21(p), hash21(p + vec2(17.3, 23.7)));
+}
+
+vec4 transition(vec2 uv) {
+  float aspect = uResolution.x / uResolution.y;
+
+  // Aspect-square cells. Density is cells per unit height.
+  vec2 cellSize = vec2(1.0 / (aspect * uDensity), 1.0 / uDensity);
+  vec2 cellId = floor(uv / cellSize);
+
+  // One random flight direction per cell → pixels in the same cell
+  // share displacement, so the cell moves as a rigid block. Adjacent
+  // cells with different directions tear apart visibly.
+  vec2 dir = normalize(hash22(cellId) * 2.0 - 1.0 + vec2(1e-4));
+
+  float envelope = 4.0 * uProgress * (1.0 - uProgress);
+  vec2 disp = dir * envelope * uScatter;
+
+  // Sample source as if the cell is showing at its displaced position.
+  // Approximation: sample at uv - d(uv). Neighbouring cells with
+  // different d produce hard seams = particle boundaries.
+  vec2 homeUv = clamp(uv - disp, 0.0, 1.0);
+
+  // Wide crossfade so both images overlap through most of the peak
+  // scatter, giving the eye time to read the particle motion.
+  float blend = smoothstep(0.15, 0.85, uProgress);
+  return mix(getFromColor(homeUv), getToColor(homeUv), blend);
+}
+`,
+});
+//# sourceMappingURL=particle-assemble.js.map

package/dist/transitions/particle-assemble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"particle-assemble.js","sourceRoot":"","sources":["../../src/transitions/particle-assemble.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;IAC/C,IAAI,EAAE,mBAAmB;IACzB,QAAQ,EAAE;QACR,OAAO,EAAE,IAAI;QACb,OAAO,EAAE,EAAE;KACZ;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCP;CACA,CAAC,CAAC"}

package/dist/transitions/pinwheel.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Multi-spoke angular sweep: `spokes` wedges each open simultaneously around
+ * a center, sweeping through their angular slice as progress grows. A
+ * rotating "fan" reveal, aspect-corrected so spokes stay radial.
+ */
+export declare const pinwheel: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly center: readonly [0.5, 0.5];
+    readonly spokes: 8;
+    readonly softness: 0.05;
+}>>;
+//# sourceMappingURL=pinwheel.d.ts.map

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

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

package/dist/transitions/pinwheel.js

@@ -0,0 +1,40 @@
+import { defineTransition } from "./define.js";
+/**
+ * Multi-spoke angular sweep: `spokes` wedges each open simultaneously around
+ * a center, sweeping through their angular slice as progress grows. A
+ * rotating "fan" reveal, aspect-corrected so spokes stay radial.
+ */
+export const pinwheel = defineTransition({
+    name: "pinwheel",
+    defaults: {
+        center: [0.5, 0.5],
+        spokes: 8,
+        softness: 0.05,
+    },
+    glsl: `
+uniform vec2 uCenter;
+uniform float uSpokes;
+uniform float uSoftness;
+
+const float TWO_PI = 6.2831853;
+
+vec4 transition(vec2 uv) {
+  // Aspect-correct so spokes remain radial on non-square canvases.
+  vec2 delta = (uv - uCenter) * vec2(uResolution.x / uResolution.y, 1.0);
+  float angle = atan(delta.y, delta.x);
+  float slice = TWO_PI / max(uSpokes, 2.0);
+
+  // Position within a single spoke's angular range, 0 to slice.
+  float folded = mod(angle, slice);
+
+  // Softness expressed as a fraction of the slice so it scales with spoke count.
+  float s = slice * uSoftness;
+  // Threshold sweeps from -s (outside range) to slice+s (outside range), so
+  // feather never reaches visible pixels at the endpoints.
+  float threshold = -s + uProgress * (slice + 2.0 * s);
+  float w = smoothstep(threshold - s, threshold + s, folded);
+  return mix(getToColor(uv), getFromColor(uv), w);
+}
+`,
+});
+//# sourceMappingURL=pinwheel.js.map

package/dist/transitions/pinwheel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pinwheel.js","sourceRoot":"","sources":["../../src/transitions/pinwheel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,gBAAgB,CAAC;IACvC,IAAI,EAAE,UAAU;IAChB,QAAQ,EAAE;QACR,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;QAClB,MAAM,EAAE,CAAC;QACT,QAAQ,EAAE,IAAI;KACf;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;CAwBP;CACA,CAAC,CAAC"}

package/dist/transitions/pixelate.d.ts

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

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

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

package/dist/transitions/pixelate.js

@@ -0,0 +1,26 @@
+import { defineTransition } from "./define.js";
+export const pixelate = defineTransition({
+    name: "pixelate",
+    defaults: {
+        maxBlockSize: 40,
+    },
+    glsl: `
+uniform float uMaxBlockSize;
+
+vec4 transition(vec2 uv) {
+  // Block size peaks at midpoint, 1px at endpoints.
+  float env = 4.0 * uProgress * (1.0 - uProgress);
+  float blockSize = max(1.0, uMaxBlockSize * env);
+
+  // Quantize to a grid of blockSize-pixel cells, sample from cell centers.
+  vec2 pixel = uv * uResolution;
+  vec2 quantized = floor(pixel / blockSize) * blockSize + blockSize * 0.5;
+  vec2 quantUv = quantized / uResolution;
+
+  // Crossfade concentrated in the middle 40% when pixelation is heaviest.
+  float mixW = smoothstep(0.3, 0.7, uProgress);
+  return mix(getFromColor(quantUv), getToColor(quantUv), mixW);
+}
+`,
+});
+//# sourceMappingURL=pixelate.js.map

package/dist/transitions/pixelate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixelate.js","sourceRoot":"","sources":["../../src/transitions/pixelate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,CAAC,MAAM,QAAQ,GAAG,gBAAgB,CAAC;IACvC,IAAI,EAAE,UAAU;IAChB,QAAQ,EAAE;QACR,YAAY,EAAE,EAAE;KACjB;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;CAiBP;CACA,CAAC,CAAC"}

package/dist/transitions/plasma-pulse.d.ts.map

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

package/dist/transitions/plasma-pulse.js

@@ -0,0 +1,92 @@
+import { defineTransition } from "./define.js";
+/**
+ * Electric sibling to film-burn: expanding ring with a bright white-blue
+ * plasma core + radial chromatic aberration concentrated at the advancing
+ * edge. Lightning-like turbulence (layered noise) for the electric feel.
+ */
+export const plasmaPulse = defineTransition({
+    name: "plasma-pulse",
+    defaults: {
+        center: [0.5, 0.5],
+        scale: 8,
+        edgeWidth: 0.04,
+        chroma: 0.012,
+        plasmaColor: [1.2, 1.6, 2.5],
+    },
+    glsl: `
+uniform vec2 uCenter;
+uniform float uScale;
+uniform float uEdgeWidth;
+uniform float uChroma;
+uniform vec3 uPlasmaColor;
+
+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 pixel = uv * uResolution;
+  vec2 centerPx = uCenter * uResolution;
+  float dist = distance(pixel, centerPx);
+  float maxDist = max(
+    max(length(centerPx), length(centerPx - vec2(uResolution.x, 0.0))),
+    max(length(centerPx - vec2(0.0, uResolution.y)), length(centerPx - uResolution))
+  );
+  float normalizedDist = dist / max(maxDist, 0.0001);
+
+  // Layered noise: fast turbulence + slow drift → electric flicker feel.
+  float noiseStrength = 0.06;
+  float n = valueNoise(uv * uScale) * 0.6 + valueNoise(uv * uScale * 2.3) * 0.4;
+  float perturbed = normalizedDist - (n - 0.5) * noiseStrength;
+
+  float totalEdge = uEdgeWidth + noiseStrength * 0.5;
+  float plasmaRadius = uProgress * (1.0 + 2.0 * totalEdge) - totalEdge;
+  float signedDist = perturbed - plasmaRadius;
+
+  float w = smoothstep(-uEdgeWidth, uEdgeWidth, -signedDist);
+
+  // Radial chromatic aberration concentrated at the edge, env-gated.
+  float env = 4.0 * uProgress * (1.0 - uProgress);
+  float edgeX = signedDist / max(uEdgeWidth * 2.0, 0.0001);
+  float edgeProximity = exp(-edgeX * edgeX * 2.0);
+  float chromaStrength = env * edgeProximity * uChroma;
+
+  vec2 toCenter = uv - uCenter;
+  float r = length(toCenter);
+  vec2 dir = r > 0.0001 ? toCenter / r : vec2(1.0, 0.0);
+  vec2 offR = clamp(uv - dir * chromaStrength, 0.0, 1.0);
+  vec2 offB = clamp(uv + dir * chromaStrength, 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
+  );
+  vec3 base = mix(fromRGB, toRGB, w);
+
+  // Plasma core: tight bright band at the ring, env-gated.
+  float plasmaX = signedDist / max(uEdgeWidth * 1.2, 0.0001);
+  float plasmaBand = exp(-plasmaX * plasmaX * 4.0);
+  vec3 plasma = uPlasmaColor * plasmaBand * env;
+
+  return vec4(base + plasma, 1.0);
+}
+`,
+});
+//# sourceMappingURL=plasma-pulse.js.map

package/dist/transitions/plasma-pulse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plasma-pulse.js","sourceRoot":"","sources":["../../src/transitions/plasma-pulse.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,SAAS,EAAE,IAAI;QACf,MAAM,EAAE,KAAK;QACb,WAAW,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;KAC7B;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EP;CACA,CAAC,CAAC"}

package/dist/transitions/polka-dots-curtain.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Radial dot-grid reveal: every cell of an N×N grid contains a dot that
+ * grows to cover its cell, with cells near the center revealing first.
+ * Stylized but kept premium by softening the dot edge with smoothstep
+ * and bounding maxDotRadius so each dot fully covers its cell at the
+ * end (no leftover background between dots).
+ */
+export declare const polkaDotsCurtain: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly dots: 15;
+    readonly center: readonly [0.5, 0.5];
+    readonly softness: 0.05;
+}>>;
+//# sourceMappingURL=polka-dots-curtain.d.ts.map

package/dist/transitions/polka-dots-curtain.d.ts.map

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

package/dist/transitions/polka-dots-curtain.js

@@ -0,0 +1,46 @@
+import { defineTransition } from "./define.js";
+/**
+ * Radial dot-grid reveal: every cell of an N×N grid contains a dot that
+ * grows to cover its cell, with cells near the center revealing first.
+ * Stylized but kept premium by softening the dot edge with smoothstep
+ * and bounding maxDotRadius so each dot fully covers its cell at the
+ * end (no leftover background between dots).
+ */
+export const polkaDotsCurtain = defineTransition({
+    name: "polka-dots-curtain",
+    defaults: {
+        dots: 15,
+        center: [0.5, 0.5],
+        softness: 0.05,
+    },
+    glsl: `
+uniform float uDots;
+uniform vec2 uCenter;
+uniform float uSoftness;
+
+vec4 transition(vec2 uv) {
+  // dots=0 produces degenerate cellPos math (uv*0=0, all pixels in same cell);
+  // floor at 1. Clamp here so the transition is reliable regardless of caller input.
+  float dots = max(uDots, 1.0);
+  vec2 cellPos = fract(uv * dots);
+  float dotDist = distance(cellPos, vec2(0.5));
+  float distToCenter = distance(uv, uCenter);
+
+  // Per-cell ignition time: cells near uCenter reveal first.
+  float cellRevealTime = distToCenter / 1.4142136;
+  float window = 0.6;
+  float start = cellRevealTime * (1.0 - window);
+  float localP = clamp((uProgress - start) / max(window, 0.0001), 0.0, 1.0);
+
+  // Dot radius grows from -softness (off) to maxDotRadius+softness (covers
+  // cell corners cleanly). 0.85 > sqrt(2)/2 so corners are guaranteed inside.
+  float maxDotRadius = 0.85;
+  float radius = localP * (maxDotRadius + 2.0 * uSoftness) - uSoftness;
+
+  float w = 1.0 - smoothstep(radius - uSoftness, radius + uSoftness, dotDist);
+
+  return mix(getFromColor(uv), getToColor(uv), w);
+}
+`,
+});
+//# sourceMappingURL=polka-dots-curtain.js.map

package/dist/transitions/polka-dots-curtain.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"polka-dots-curtain.js","sourceRoot":"","sources":["../../src/transitions/polka-dots-curtain.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;IAC/C,IAAI,EAAE,oBAAoB;IAC1B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE;QACR,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;QAClB,QAAQ,EAAE,IAAI;KACf;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BP;CACA,CAAC,CAAC"}

package/dist/transitions/polygon-flip.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Subdivided plane of square tiles. Each tile flips 180° around a
+ * horizontal axis through its centre, staggered by a diagonal wavefront
+ * so the flip sweeps top-left → bottom-right with per-tile jitter.
+ *
+ * Because a tile (quad) is self-symmetric under 180° horizontal flip,
+ * its canvas footprint is invariant across the rotation — no "screwed
+ * rect" overlap with neighbours. The two triangles that compose each
+ * tile share the same per-quad centroid, so they flip together.
+ *
+ * Front face (angle 0 → π/2) samples `from` at the tile's own uv —
+ * source content rides on the flipping card. Back face (angle π/2 → π)
+ * samples `to` at gl_FragCoord-based screen uv — destination stays
+ * pinned to the canvas, so at progress=1 every pixel is exactly to.
+ *
+ * Instance 0 is a back plane at z=0.9 cross-fading from → to; it fills
+ * the thin moments when a tile is edge-on so the full-frame rule holds.
+ *
+ * Endpoints: progress 0 → all tiles flat, front-facing, sampling from
+ * at aUv = pixel-pure from. Progress 1 → all tiles flat-mirrored (tile
+ * is self-symmetric), back-facing, sampling to at screen uv = pixel-
+ * pure to.
+ */
+export declare const polygonFlip: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly rim: 0.25;
+}>>;
+//# sourceMappingURL=polygon-flip.d.ts.map

package/dist/transitions/polygon-flip.d.ts.map

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

package/dist/transitions/polygon-flip.js

@@ -0,0 +1,97 @@
+import { defineTransition } from "./define.js";
+/**
+ * Subdivided plane of square tiles. Each tile flips 180° around a
+ * horizontal axis through its centre, staggered by a diagonal wavefront
+ * so the flip sweeps top-left → bottom-right with per-tile jitter.
+ *
+ * Because a tile (quad) is self-symmetric under 180° horizontal flip,
+ * its canvas footprint is invariant across the rotation — no "screwed
+ * rect" overlap with neighbours. The two triangles that compose each
+ * tile share the same per-quad centroid, so they flip together.
+ *
+ * Front face (angle 0 → π/2) samples `from` at the tile's own uv —
+ * source content rides on the flipping card. Back face (angle π/2 → π)
+ * samples `to` at gl_FragCoord-based screen uv — destination stays
+ * pinned to the canvas, so at progress=1 every pixel is exactly to.
+ *
+ * Instance 0 is a back plane at z=0.9 cross-fading from → to; it fills
+ * the thin moments when a tile is edge-on so the full-frame rule holds.
+ *
+ * Endpoints: progress 0 → all tiles flat, front-facing, sampling from
+ * at aUv = pixel-pure from. Progress 1 → all tiles flat-mirrored (tile
+ * is self-symmetric), back-facing, sampling to at screen uv = pixel-
+ * pure to.
+ */
+export const polygonFlip = defineTransition({
+    name: "polygon-flip",
+    mesh: { subdivisions: [24, 14], instances: 2 },
+    defaults: {
+        rim: 0.25,
+    },
+    vertex: `
+out float vFlip;
+flat out int vInstance;
+
+#define PI 3.14159265359
+
+void main() {
+  vInstance = gl_InstanceID;
+  vUv = aUv;
+
+  if (gl_InstanceID == 0) {
+    gl_Position = vec4(aPosition, 0.9, 1.0);
+    vFlip = 0.0;
+    return;
+  }
+
+  // Diagonal wavefront top-left → bottom-right, plus a strong per-tile
+  // jitter so neighbours don't all finish together. aCentroid is per-
+  // quad (same for all 6 vertices of a tile) so the whole tile flips
+  // as one unit.
+  float waveX = (aCentroid.x + 1.0) * 0.5;
+  float waveY = 1.0 - (aCentroid.y + 1.0) * 0.5;  // top → bottom
+  float wave = waveX * 0.55 + waveY * 0.35 + (aOffset - 0.5) * 0.35;
+  wave = clamp(wave, 0.0, 1.0);
+
+  float window = 0.22;
+  float start = wave * (1.0 - window);
+  float t = smoothstep(start, start + window, uProgress);
+  vFlip = t;
+
+  float angle = t * PI;
+  float c = cos(angle);
+  float s = sin(angle);
+
+  vec2 p = aPosition - aCentroid;
+  vec3 q = vec3(p.x, p.y * c, p.y * s);
+  q.xy += aCentroid;
+
+  // Slight z-bias forward of the back plane; in-plane rotation produces
+  // a small depth spread that helps adjacent tiles resolve cleanly.
+  gl_Position = vec4(q.x, q.y, q.z * 0.4 + 0.05, 1.0);
+}
+`,
+    glsl: `
+in float vFlip;
+flat in int vInstance;
+uniform float uRim;
+
+vec4 transition(vec2 uv) {
+  if (vInstance == 0) {
+    return mix(getFromColor(uv), getToColor(uv), smoothstep(0.0, 1.0, uProgress));
+  }
+
+  vec2 screenUv = gl_FragCoord.xy / uResolution;
+  vec4 col = gl_FrontFacing ? getFromColor(uv) : getToColor(screenUv);
+
+  // Subtle rim darkening across the flip window — tiles read as
+  // tilted cards catching light, without the hard wireframe look
+  // that fwidth(bary) edge highlights produce.
+  float amt = 4.0 * vFlip * (1.0 - vFlip);
+  col.rgb *= 1.0 - amt * uRim;
+
+  return col;
+}
+`,
+});
+//# sourceMappingURL=polygon-flip.js.map

package/dist/transitions/polygon-flip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"polygon-flip.js","sourceRoot":"","sources":["../../src/transitions/polygon-flip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,gBAAgB,CAAC;IAC1C,IAAI,EAAE,cAAc;IACpB,IAAI,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE;IAC9C,QAAQ,EAAE;QACR,GAAG,EAAE,IAAI;KACV;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CT;IACC,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;CAqBP;CACA,CAAC,CAAC"}

package/dist/transitions/portal-dive.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Polar-coordinate portal. A circular reveal front sweeps from the centre
+ * outward, and around the front a narrow radial band swirls + magnifies
+ * the sampled content to evoke a tunnel mouth. Swirl and magnification
+ * fall off both radially (gaussian band around the reveal front) and
+ * temporally (zero at progress 0 and 1), which keeps every sample in
+ * bounds — no clamp streaks, no empty frame regions.
+ *
+ * Endpoints: at progress 0/1 the envelope is zero so the sample UV is
+ * identity, and the reveal edge sits well outside the frame on both
+ * sides, so output is pixel-pure from/to.
+ */
+export declare const portalDive: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly twist: 3.14159;
+    readonly depth: 1;
+    readonly reflection: 0;
+}>>;
+//# sourceMappingURL=portal-dive.d.ts.map

package/dist/transitions/portal-dive.d.ts.map

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

package/dist/transitions/portal-dive.js

@@ -0,0 +1,83 @@
+import { defineTransition } from "./define.js";
+/**
+ * Polar-coordinate portal. A circular reveal front sweeps from the centre
+ * outward, and around the front a narrow radial band swirls + magnifies
+ * the sampled content to evoke a tunnel mouth. Swirl and magnification
+ * fall off both radially (gaussian band around the reveal front) and
+ * temporally (zero at progress 0 and 1), which keeps every sample in
+ * bounds — no clamp streaks, no empty frame regions.
+ *
+ * Endpoints: at progress 0/1 the envelope is zero so the sample UV is
+ * identity, and the reveal edge sits well outside the frame on both
+ * sides, so output is pixel-pure from/to.
+ */
+export const portalDive = defineTransition({
+    name: "portal-dive",
+    defaults: {
+        twist: 3.14159,
+        depth: 1.0,
+        reflection: 0.0,
+    },
+    glsl: `
+uniform float uTwist;
+uniform float uDepth;
+uniform float uReflection;
+
+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 r = length(aDelta);
+  float theta = atan(aDelta.y, aDelta.x);
+  float maxR = sqrt(aspect * aspect * 0.25 + 0.25);
+
+  // Portal front position: negative at progress=0, past the farthest
+  // corner at progress=1, for any aspect ratio.
+  float portalR = mix(-0.15, maxR + 0.15, uProgress);
+
+  // Strength of distortion: gaussian band around the portal front,
+  // zero at progress 0/1. Both falloffs together guarantee sample UVs
+  // stay in-bounds everywhere (keeps clamp streaks out).
+  float bandWidth = 0.25;
+  float band = exp(-pow((r - portalR) / bandWidth, 2.0));
+  float envelope = 4.0 * uProgress * (1.0 - uProgress);
+  float strength = band * envelope;
+
+  // Swirl: rotate sample direction around centre.
+  float swirlAngle = strength * uTwist;
+  float newTheta = theta + swirlAngle;
+
+  // Inward pull: sample from a slightly smaller radius so content appears
+  // to be drawn toward the portal mouth (magnification = depth feel).
+  // Radius only ever DECREASES, so a pixel in bounds stays in bounds.
+  float pulledR = r * (1.0 - strength * uDepth * 0.3);
+
+  vec2 newAD = vec2(cos(newTheta), sin(newTheta)) * pulledR;
+  vec2 sampleUv = c + vec2(newAD.x / aspect, newAD.y);
+  // Defensive clamp — should be a no-op given the analysis above.
+  sampleUv = clamp(sampleUv, 0.0, 1.0);
+
+  vec4 fromColor = getFromColor(sampleUv);
+  vec4 toColor = getToColor(sampleUv);
+
+  // Soft radial reveal: centre crosses to to first, expanding outward.
+  float fade = smoothstep(portalR - 0.08, portalR + 0.08, r);
+  vec4 result = mix(toColor, fromColor, fade);
+
+  // Env glint at the tunnel mouth: use the radial direction as a
+  // surface-normal-like lookup into the env map, so the rim reads as a
+  // curved glass lip catching reflections. Gated by strength (= band *
+  // envelope), which is already zero at endpoints and away from the
+  // tunnel mouth — clean endpoints, no global tint bleed.
+  if (uReflection > 0.0) {
+    vec2 nDir = r > 1e-4 ? aDelta / r : vec2(0.0);
+    vec2 envUv = vec2(0.5 + 0.5 * nDir.x, 0.5 - 0.5 * nDir.y);
+    vec3 envColor = getEnvironment(envUv).rgb;
+    result.rgb = mix(result.rgb, envColor, strength * uReflection);
+  }
+
+  return result;
+}
+`,
+});
+//# sourceMappingURL=portal-dive.js.map

package/dist/transitions/portal-dive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal-dive.js","sourceRoot":"","sources":["../../src/transitions/portal-dive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,gBAAgB,CAAC;IACzC,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE;QACR,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,GAAG;QACV,UAAU,EAAE,GAAG;KAChB;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DP;CACA,CAAC,CAAC"}

package/dist/transitions/prism-split.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 declare const prismSplit: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly direction: readonly [1, 0];
+    readonly intensity: 0.04;
+    readonly softness: 0.2;
+}>>;
+//# sourceMappingURL=prism-split.d.ts.map

package/dist/transitions/prism-split.d.ts.map

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