@vysmo/transitions 0.1.0

package/dist/transitions/slide.js

@@ -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);
+}
+`,
+});
+//# sourceMappingURL=slide.js.map

package/dist/transitions/slide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slide.js","sourceRoot":"","sources":["../../src/transitions/slide.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;GAGG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,gBAAgB,CAAC;IACpC,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE;QACR,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAClB,OAAO,EAAE,KAAK;QACd,IAAI,EAAE,CAAC;KACR;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DP;CACA,CAAC,CAAC"}

package/dist/transitions/smoldering-edge.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 declare const smolderingEdge: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly direction: readonly [1, 1];
+    readonly scale: 3;
+    readonly edgeWidth: 0.04;
+    readonly trailLength: 0.18;
+    readonly emberColor: readonly [1.4, 0.5, 0.1];
+}>>;
+//# sourceMappingURL=smoldering-edge.d.ts.map

package/dist/transitions/smoldering-edge.d.ts.map

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

package/dist/transitions/smoldering-edge.js

@@ -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);
+}
+`,
+});
+//# sourceMappingURL=smoldering-edge.js.map

package/dist/transitions/smoldering-edge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"smoldering-edge.js","sourceRoot":"","sources":["../../src/transitions/smoldering-edge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,gBAAgB,CAAC;IAC7C,IAAI,EAAE,iBAAiB;IACvB,QAAQ,EAAE;QACR,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QACjB,KAAK,EAAE,CAAC;QACR,SAAS,EAAE,IAAI;QACf,WAAW,EAAE,IAAI;QACjB,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;KAC5B;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDP;CACA,CAAC,CAAC"}

package/dist/transitions/split.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 declare const split: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly axis: 0;
+    readonly mode: 0;
+    readonly softness: 0.01;
+}>>;
+//# sourceMappingURL=split.d.ts.map

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

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

package/dist/transitions/split.js

@@ -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);
+}
+`,
+});
+//# sourceMappingURL=split.js.map

package/dist/transitions/split.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split.js","sourceRoot":"","sources":["../../src/transitions/split.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,gBAAgB,CAAC;IACpC,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE;QACR,IAAI,EAAE,CAAC;QACP,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,IAAI;KACf;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCP;CACA,CAAC,CAAC"}

package/dist/transitions/swirl.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 declare const swirl: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly radius: 1;
+    readonly strength: 25.13;
+}>>;
+//# sourceMappingURL=swirl.d.ts.map

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

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

package/dist/transitions/swirl.js

@@ -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);
+}
+`,
+});
+//# sourceMappingURL=swirl.js.map

package/dist/transitions/swirl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swirl.js","sourceRoot":"","sources":["../../src/transitions/swirl.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,gBAAgB,CAAC;IACpC,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE;QACR,MAAM,EAAE,GAAG;QACX,QAAQ,EAAE,KAAK;KAChB;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;CAyBP;CACA,CAAC,CAAC"}

package/dist/transitions/tangent-motion-blur.d.ts

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

package/dist/transitions/tangent-motion-blur.d.ts.map

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

package/dist/transitions/tangent-motion-blur.js

@@ -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);
+}
+`,
+});
+//# sourceMappingURL=tangent-motion-blur.js.map

package/dist/transitions/tangent-motion-blur.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tangent-motion-blur.js","sourceRoot":"","sources":["../../src/transitions/tangent-motion-blur.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,gBAAgB,CAAC;IAChD,IAAI,EAAE,qBAAqB;IAC3B,QAAQ,EAAE;QACR,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QACjB,SAAS,EAAE,IAAI;QACf,QAAQ,EAAE,GAAG;KACd;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCP;CACA,CAAC,CAAC"}

package/dist/transitions/tile-scatter.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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 declare const tileScatter: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly scatter: 1;
+}>>;
+//# sourceMappingURL=tile-scatter.d.ts.map

package/dist/transitions/tile-scatter.d.ts.map

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

package/dist/transitions/tile-scatter.js

@@ -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);
+}
+`,
+});
+//# sourceMappingURL=tile-scatter.js.map

package/dist/transitions/tile-scatter.js.map

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

package/dist/transitions/tilt-sweep.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Port of akella demo2 (tympanus.net/Development/webGLImageTransitions).
+ * A directional mask that progresses faster on the leading side combined
+ * with bidirectional zoom: the from-image shrinks toward center while the
+ * to-image grows from center. The result is a diagonal sweep with an
+ * inward/outward zoom feel — distinct from any pure mask-based wipe.
+ */
+export declare const tiltSweep: import("../types.js").Transition<import("../types.js").Widen<{
+    readonly direction: readonly [0, 1];
+}>>;
+//# sourceMappingURL=tilt-sweep.d.ts.map

package/dist/transitions/tilt-sweep.d.ts.map

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

package/dist/transitions/tilt-sweep.js

@@ -0,0 +1,31 @@
+import { defineTransition } from "./define.js";
+/**
+ * Port of akella demo2 (tympanus.net/Development/webGLImageTransitions).
+ * A directional mask that progresses faster on the leading side combined
+ * with bidirectional zoom: the from-image shrinks toward center while the
+ * to-image grows from center. The result is a diagonal sweep with an
+ * inward/outward zoom feel — distinct from any pure mask-based wipe.
+ */
+export const tiltSweep = defineTransition({
+    name: "tilt-sweep",
+    defaults: {
+        direction: [0, 1],
+    },
+    glsl: `
+uniform vec2 uDirection;
+
+vec4 transition(vec2 uv) {
+  vec2 d = normalize(uDirection);
+  // Per-pixel local progress: leading edge along direction completes first.
+  float projected = clamp(dot(uv - 0.5, d) + 0.5, 0.0, 1.0);
+  float x = smoothstep(0.0, 1.0, uProgress * 2.0 + projected - 1.0);
+
+  // From shrinks to center, to grows from center.
+  vec2 fromUv = (uv - 0.5) * (1.0 - x) + 0.5;
+  vec2 toUv = (uv - 0.5) * x + 0.5;
+
+  return mix(getFromColor(fromUv), getToColor(toUv), x);
+}
+`,
+});
+//# sourceMappingURL=tilt-sweep.js.map

package/dist/transitions/tilt-sweep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tilt-sweep.js","sourceRoot":"","sources":["../../src/transitions/tilt-sweep.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,gBAAgB,CAAC;IACxC,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE;QACR,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;KAClB;IACD,IAAI,EAAE;;;;;;;;;;;;;;;CAeP;CACA,CAAC,CAAC"}

package/dist/transitions/warp-zoom.d.ts

@@ -0,0 +1,7 @@
+export declare const warpZoom: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly center: readonly [0.5, 0.5];
+    readonly strength: 1;
+    readonly rotation: 1;
+    readonly blur: 0.02;
+}>>;
+//# sourceMappingURL=warp-zoom.d.ts.map

package/dist/transitions/warp-zoom.d.ts.map

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