@vysmo/transitions 0.1.0

package/dist/transitions/ink-diffuse.js

@@ -0,0 +1,90 @@
+import { defineTransition } from "./define.js";
+/**
+ * Multi-pass transition. A noise-seeded mask grows outward via iterated
+ * dilation with an expanding kernel, producing an ink-in-water spread
+ * that can't be computed in a single pass (each pixel has to read its
+ * neighbours' mask values from the previous iteration).
+ *
+ *   pass 0               — seed the mask by thresholding a noise field
+ *                          against progress. At progress 0 all zero;
+ *                          at progress 1 all one; in between, a noisy
+ *                          boundary seeded where noise ≈ progress.
+ *   pass 1..passCount-2  — dilate the mask with an expanding kernel
+ *                          (step doubles each pass: 1, 2, 4, 8, 16 px),
+ *                          biased with a light smoothing so edges
+ *                          stay organic.
+ *   final pass           — use the diffused mask to mix from → to.
+ *
+ * Endpoints: seed saturates to 0 at progress 0 and 1 at progress 1
+ * regardless of the noise field. Dilation is monotone on constants,
+ * so the mask stays saturated through every pass, and the final
+ * composition resolves to pure from / to.
+ */
+export const inkDiffuse = defineTransition({
+    name: "ink-diffuse",
+    passes: 7,
+    defaults: {
+        scale: 7,
+        softness: 0.08,
+    },
+    glsl: `
+uniform float uScale;
+uniform float uSoftness;
+
+float hash21(vec2 p) {
+  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+float valNoise(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);
+}
+
+float fbm(vec2 p) {
+  return valNoise(p) * 0.55 +
+         valNoise(p * 2.1) * 0.28 +
+         valNoise(p * 4.3) * 0.17;
+}
+
+vec4 transition(vec2 uv) {
+  // Final pass: use the diffused mask to composite from/to.
+  if (uPass == uPassCount - 1) {
+    float mask = getPrevious(uv).r;
+    return mix(getFromColor(uv), getToColor(uv), mask);
+  }
+
+  // Seed pass: threshold noise by progress. Clamped noise range
+  // [0.05, 0.95] plus a soft edge guarantees the mask saturates to 0
+  // at progress=0 and 1 at progress=1, for every pixel.
+  if (uPass == 0) {
+    float n = clamp(fbm(uv * uScale) * 0.9 + 0.05, 0.05, 0.95);
+    float mask = smoothstep(n - uSoftness, n + uSoftness, uProgress);
+    return vec4(mask, 0.0, 0.0, 1.0);
+  }
+
+  // Diffusion pass: expanding-kernel dilation blended with light
+  // neighbour-averaging. Step doubles each pass for an effective
+  // reach of ~2^(passCount-2) pixels by the last iteration.
+  float step = pow(2.0, float(uPass - 1));
+  vec2 px = vec2(step) / uResolution;
+  float c = getPrevious(uv).r;
+  float e = getPrevious(uv + vec2(px.x, 0.0)).r;
+  float w = getPrevious(uv - vec2(px.x, 0.0)).r;
+  float n = getPrevious(uv + vec2(0.0, px.y)).r;
+  float s = getPrevious(uv - vec2(0.0, px.y)).r;
+
+  float dilated = max(c, max(max(e, w), max(n, s)));
+  float avg = (c + e + w + n + s) * 0.2;
+  float nextMask = mix(dilated, avg, 0.3);
+
+  return vec4(nextMask, 0.0, 0.0, 1.0);
+}
+`,
+});
+//# sourceMappingURL=ink-diffuse.js.map

package/dist/transitions/ink-diffuse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ink-diffuse.js","sourceRoot":"","sources":["../../src/transitions/ink-diffuse.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,gBAAgB,CAAC;IACzC,IAAI,EAAE,aAAa;IACnB,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE;QACR,KAAK,EAAE,CAAC;QACR,QAAQ,EAAE,IAAI;KACf;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DP;CACA,CAAC,CAAC"}

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

@@ -0,0 +1,13 @@
+/**
+ * Inspired by akella demo3 (made procedural — original used a baked
+ * displacement-map texture that we don't yet support). Circular reveal
+ * with a noise-perturbed edge AND bidirectional zoom: from-image shrinks
+ * to center while to-image grows from center. Sibling to film-burn but
+ * without the flame glow and with the akella zoom-shift on top.
+ */
+export declare const irisZoom: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly center: readonly [0.5, 0.5];
+    readonly width: 0.08;
+    readonly scale: 8;
+}>>;
+//# sourceMappingURL=iris-zoom.d.ts.map

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

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

package/dist/transitions/iris-zoom.js

@@ -0,0 +1,67 @@
+import { defineTransition } from "./define.js";
+/**
+ * Inspired by akella demo3 (made procedural — original used a baked
+ * displacement-map texture that we don't yet support). Circular reveal
+ * with a noise-perturbed edge AND bidirectional zoom: from-image shrinks
+ * to center while to-image grows from center. Sibling to film-burn but
+ * without the flame glow and with the akella zoom-shift on top.
+ */
+export const irisZoom = defineTransition({
+    name: "iris-zoom",
+    defaults: {
+        center: [0.5, 0.5],
+        width: 0.08,
+        scale: 8,
+    },
+    glsl: `
+uniform vec2 uCenter;
+uniform float uWidth;
+uniform float uScale;
+
+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) {
+  // Aspect-correct distance from the iris center, normalized to [0,1] by
+  // the farthest canvas corner.
+  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);
+
+  float noiseStrength = 0.12;
+  float n = valueNoise(uv * uScale);
+  float perturbed = normalizedDist - (n - 0.5) * noiseStrength;
+
+  float totalEdge = uWidth + noiseStrength * 0.5;
+  float radius = uProgress * (1.0 + 2.0 * totalEdge) - totalEdge;
+  float signedDist = perturbed - radius;
+
+  // intpl: 0 = unburned (from), 1 = revealed (to).
+  float intpl = 1.0 - smoothstep(-uWidth, uWidth, signedDist);
+
+  // Bidirectional zoom: from shrinks to center, to grows from center.
+  vec2 fromUv = clamp((uv - 0.5) * (1.0 - intpl) + 0.5, 0.0, 1.0);
+  vec2 toUv = clamp((uv - 0.5) * intpl + 0.5, 0.0, 1.0);
+
+  return mix(getFromColor(fromUv), getToColor(toUv), intpl);
+}
+`,
+});
+//# sourceMappingURL=iris-zoom.js.map

package/dist/transitions/iris-zoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iris-zoom.js","sourceRoot":"","sources":["../../src/transitions/iris-zoom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,gBAAgB,CAAC;IACvC,IAAI,EAAE,WAAW;IACjB,QAAQ,EAAE;QACR,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;QAClB,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,CAAC;KACT;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDP;CACA,CAAC,CAAC"}

package/dist/transitions/kinetic-bands.d.ts

@@ -0,0 +1,7 @@
+export declare const kineticBands: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly count: 12;
+    readonly stagger: 0.6;
+    readonly softness: 0.02;
+    readonly direction: readonly [1, 0];
+}>>;
+//# sourceMappingURL=kinetic-bands.d.ts.map

package/dist/transitions/kinetic-bands.d.ts.map

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

package/dist/transitions/kinetic-bands.js

@@ -0,0 +1,58 @@
+import { defineTransition } from "./define.js";
+export const kineticBands = defineTransition({
+    name: "kinetic-bands",
+    defaults: {
+        count: 12,
+        stagger: 0.6,
+        softness: 0.02,
+        direction: [1, 0],
+    },
+    glsl: `
+uniform float uCount;
+uniform float uStagger;
+uniform float uSoftness;
+uniform vec2 uDirection;
+
+// Snap to nearest axis-aligned unit. Diagonals would tilt the bands away
+// from the natural horizontal stack and the boundary math would no longer
+// align with the band's own progress envelope. 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) {
+  // count=1 collapses to a single full-frame slide; not "kinetic bands".
+  // Clamp here so the transition is reliable regardless of caller input.
+  float count = max(uCount, 2.0);
+
+  vec2 d = snapAxis(uDirection);
+
+  // Bands run perpendicular to the sweep direction. For a horizontal sweep
+  // (Right/Left), bands are horizontal stripes stacked vertically (indexed
+  // by uv.y). For a vertical sweep (Up/Down), bands are vertical stripes
+  // stacked horizontally (indexed by uv.x). Otherwise the bands and sweep
+  // axis are mismatched and the effect looks broken.
+  bool horizontalBands = abs(d.x) > abs(d.y);
+  float bandCoord = horizontalBands ? uv.y : uv.x;
+  float band = floor(bandCoord * count);
+  float bandPos = (band + 0.5) / count;
+
+  // Each band starts at bandPos * stagger and runs for (1 - stagger) of time.
+  float start = bandPos * uStagger;
+  float window = max(0.0001, 1.0 - uStagger);
+  float localProgress = clamp((uProgress - start) / window, 0.0, 1.0);
+
+  // Within the band, run a slide-style sweep so each band has its own
+  // endpoint-correct mini-transition.
+  float maxProj = 0.5;
+  float projected = dot(uv - 0.5, -d);
+  float boundary = (maxProj + uSoftness) * (1.0 - 2.0 * localProgress);
+  float w = smoothstep(boundary - uSoftness, boundary + uSoftness, projected);
+
+  return mix(getFromColor(uv), getToColor(uv), w);
+}
+`,
+});
+//# sourceMappingURL=kinetic-bands.js.map

package/dist/transitions/kinetic-bands.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kinetic-bands.js","sourceRoot":"","sources":["../../src/transitions/kinetic-bands.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CAAC;IAC3C,IAAI,EAAE,eAAe;IACrB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE;QACT,OAAO,EAAE,GAAG;QACZ,QAAQ,EAAE,IAAI;QACd,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;KAClB;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CP;CACA,CAAC,CAAC"}

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

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

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

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

package/dist/transitions/lenticular-flip.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"lenticular-flip.js","sourceRoot":"","sources":["../../src/transitions/lenticular-flip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,gBAAgB,CAAC;IAC7C,IAAI,EAAE,iBAAiB;IACvB,QAAQ,EAAE;QACR,UAAU,EAAE,EAAE;KACf;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CP;CACA,CAAC,CAAC"}

package/dist/transitions/light-leak.d.ts

@@ -0,0 +1,7 @@
+export declare const lightLeak: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly direction: readonly [1, 0];
+    readonly color: readonly [1, 0.85, 0.55];
+    readonly bandWidth: 0.2;
+    readonly intensity: 1;
+}>>;
+//# sourceMappingURL=light-leak.d.ts.map

package/dist/transitions/light-leak.d.ts.map

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

package/dist/transitions/light-leak.js

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

package/dist/transitions/light-leak.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"light-leak.js","sourceRoot":"","sources":["../../src/transitions/light-leak.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,CAAC,MAAM,SAAS,GAAG,gBAAgB,CAAC;IACxC,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE;QACR,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QACjB,KAAK,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC;QACxB,SAAS,EAAE,GAAG;QACd,SAAS,EAAE,GAAG;KACf;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BP;CACA,CAAC,CAAC"}

package/dist/transitions/lightning-strike.d.ts

@@ -0,0 +1,22 @@
+/**
+ * A jagged lightning bolt flashes across the frame and the strike
+ * lights up the scene. Three parallel fractal paths (fbm-perturbed
+ * vertical lines at decreasing scales) give a branching look; the
+ * nearest-path distance drives a bright core + wider glow. A
+ * 4·p·(1-p) flash envelope peaks at mid-progress, so the whole scene
+ * whites up momentarily at strike time before settling into to.
+ *
+ * from-to crossfade is separate from the flash (monotonic smoothstep
+ * across progress), so the hand-off reads as "lightning reveals what
+ * was behind" rather than a regular wipe with a light effect tacked
+ * on.
+ *
+ * Endpoints: flash envelope is zero at progress 0 and 1, so no
+ * synthetic luminance leaks into either endpoint. Crossfade saturates
+ * to 0 at progress 0 and 1 at progress 1. Output is pixel-pure
+ * from / to respectively.
+ */
+export declare const lightningStrike: import("../types.js").Transition<import("../types.js").Widen<{
+    readonly intensity: 1;
+}>>;
+//# sourceMappingURL=lightning-strike.d.ts.map

package/dist/transitions/lightning-strike.d.ts.map

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

package/dist/transitions/lightning-strike.js

@@ -0,0 +1,90 @@
+import { defineTransition } from "./define.js";
+/**
+ * A jagged lightning bolt flashes across the frame and the strike
+ * lights up the scene. Three parallel fractal paths (fbm-perturbed
+ * vertical lines at decreasing scales) give a branching look; the
+ * nearest-path distance drives a bright core + wider glow. A
+ * 4·p·(1-p) flash envelope peaks at mid-progress, so the whole scene
+ * whites up momentarily at strike time before settling into to.
+ *
+ * from-to crossfade is separate from the flash (monotonic smoothstep
+ * across progress), so the hand-off reads as "lightning reveals what
+ * was behind" rather than a regular wipe with a light effect tacked
+ * on.
+ *
+ * Endpoints: flash envelope is zero at progress 0 and 1, so no
+ * synthetic luminance leaks into either endpoint. Crossfade saturates
+ * to 0 at progress 0 and 1 at progress 1. Output is pixel-pure
+ * from / to respectively.
+ */
+export const lightningStrike = defineTransition({
+    name: "lightning-strike",
+    defaults: {
+        intensity: 1.0,
+    },
+    glsl: `
+uniform float uIntensity;
+
+float hash21(vec2 p) {
+  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+float valNoise(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);
+}
+
+float fbm(vec2 p) {
+  return valNoise(p) * 0.55 +
+         valNoise(p * 2.1) * 0.28 +
+         valNoise(p * 4.3) * 0.17;
+}
+
+// One fractal lightning path: a vertical line at x ≈ 0.5 perturbed
+// by noise at three decreasing scales, giving fractal jaggedness.
+float boltPath(float y, float seed) {
+  float x = 0.5;
+  x += (fbm(vec2(y * 2.0, seed)) * 2.0 - 1.0) * 0.22;
+  x += (fbm(vec2(y * 6.0, seed + 1.3)) * 2.0 - 1.0) * 0.08;
+  x += (fbm(vec2(y * 18.0, seed + 2.7)) * 2.0 - 1.0) * 0.025;
+  return x;
+}
+
+// Nearest-bolt distance across three parallel paths — the min is the
+// distance to the nearest "branch".
+float boltDist(vec2 uv) {
+  float d1 = abs(uv.x - boltPath(uv.y, 0.0));
+  float d2 = abs(uv.x - boltPath(uv.y, 5.4));
+  float d3 = abs(uv.x - boltPath(uv.y, 11.1));
+  return min(d1, min(d2, d3));
+}
+
+vec4 transition(vec2 uv) {
+  // Base: a gently-soft from→to crossfade that runs alongside the flash.
+  float blend = smoothstep(0.15, 0.85, uProgress);
+  vec3 base = mix(getFromColor(uv).rgb, getToColor(uv).rgb, blend);
+
+  // Flash envelope: zero at both endpoints, peaks at mid.
+  float flash = 4.0 * uProgress * (1.0 - uProgress);
+  float d = boltDist(uv);
+
+  // Bright hot core right on the bolt, wider electric halo around.
+  float core = (1.0 - smoothstep(0.0, 0.004, d)) * flash;
+  float halo = (1.0 - smoothstep(0.004, 0.08, d)) * flash * 0.35;
+
+  // Content-derived brightening: push base toward white by an amount
+  // proportional to core + halo. Keeps output inside "meaningful
+  // content" rather than injecting synthetic colour.
+  vec3 litBase = base + (1.0 - base) * (core + halo) * uIntensity;
+
+  return vec4(litBase, 1.0);
+}
+`,
+});
+//# sourceMappingURL=lightning-strike.js.map

package/dist/transitions/lightning-strike.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lightning-strike.js","sourceRoot":"","sources":["../../src/transitions/lightning-strike.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,gBAAgB,CAAC;IAC9C,IAAI,EAAE,kBAAkB;IACxB,QAAQ,EAAE;QACR,SAAS,EAAE,GAAG;KACf;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+DP;CACA,CAAC,CAAC"}

package/dist/transitions/linear-blur.d.ts

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

package/dist/transitions/linear-blur.d.ts.map

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

package/dist/transitions/linear-blur.js

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

package/dist/transitions/linear-blur.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linear-blur.js","sourceRoot":"","sources":["../../src/transitions/linear-blur.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,gBAAgB,CAAC;IACzC,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE;QACR,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QACjB,SAAS,EAAE,GAAG;KACf;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;CAwBP;CACA,CAAC,CAAC"}

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

@@ -0,0 +1,22 @@
+/**
+ * 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 declare const liquidChrome: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly shine: 0.9;
+    readonly rim: 0.25;
+    readonly wobble: 0.12;
+    readonly refraction: 0.035;
+    readonly reflection: 0;
+}>>;
+//# sourceMappingURL=liquid-chrome.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"liquid-chrome.d.ts","sourceRoot":"","sources":["../../src/transitions/liquid-chrome.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY;;;;;;GAiGvB,CAAC"}