@vysmo/transitions 0.1.0

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

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

package/dist/transitions/dissolve.js

@@ -0,0 +1,16 @@
+import { defineTransition } from "./define.js";
+export const dissolve = defineTransition({
+    name: "dissolve",
+    defaults: {},
+    glsl: `
+vec4 transition(vec2 uv) {
+  vec4 a = getFromColor(uv);
+  vec4 b = getToColor(uv);
+  vec3 aLin = pow(a.rgb, vec3(2.2));
+  vec3 bLin = pow(b.rgb, vec3(2.2));
+  vec3 mixed = mix(aLin, bLin, uProgress);
+  return vec4(pow(mixed, vec3(1.0 / 2.2)), mix(a.a, b.a, uProgress));
+}
+`,
+});
+//# sourceMappingURL=dissolve.js.map

package/dist/transitions/dissolve.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dissolve.js","sourceRoot":"","sources":["../../src/transitions/dissolve.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,EAAE;IACZ,IAAI,EAAE;;;;;;;;;CASP;CACA,CAAC,CAAC"}

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

@@ -0,0 +1,25 @@
+/**
+ * Port of gl-transitions' DreamyZoom (Zeh Fernando, MIT). Phase 1 (p<0.5):
+ * from-image zooms in + rotates, fading toward white. Phase 2 (p>0.5):
+ * white fades back to to-image starting pre-rotated and unwinding to
+ * identity while zooming out. The white flash at p=0.5 masks the from→to
+ * image swap.
+ *
+ * Note: the original gl-transitions source has a bug (`* vec4(0)`) that
+ * disables the flash — fixed here to use white, matching the actual
+ * preview on gl-transitions.com.
+ *
+ * Single `intensity` param drives both rotation and scale internally.
+ * Rotation alone would push corners outside the canvas (visible edge-clamp
+ * streaks); scale must compensate. Splitting them as separate params lets
+ * the caller pick mismatched values that produce streaks. We map intensity
+ * to (rotation, scale) along a curve where scale always covers rotation,
+ * so any value in [0, 1] is visually safe.
+ *
+ * Default `intensity: 0.5` reproduces gl-transitions' defaults exactly
+ * (rotation ≈ 0.105 rad / 6°, scale ≈ 1.2).
+ */
+export declare const dreamyZoom: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly intensity: 0.5;
+}>>;
+//# sourceMappingURL=dreamy-zoom.d.ts.map

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

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

package/dist/transitions/dreamy-zoom.js

@@ -0,0 +1,66 @@
+import { defineTransition } from "./define.js";
+/**
+ * Port of gl-transitions' DreamyZoom (Zeh Fernando, MIT). Phase 1 (p<0.5):
+ * from-image zooms in + rotates, fading toward white. Phase 2 (p>0.5):
+ * white fades back to to-image starting pre-rotated and unwinding to
+ * identity while zooming out. The white flash at p=0.5 masks the from→to
+ * image swap.
+ *
+ * Note: the original gl-transitions source has a bug (`* vec4(0)`) that
+ * disables the flash — fixed here to use white, matching the actual
+ * preview on gl-transitions.com.
+ *
+ * Single `intensity` param drives both rotation and scale internally.
+ * Rotation alone would push corners outside the canvas (visible edge-clamp
+ * streaks); scale must compensate. Splitting them as separate params lets
+ * the caller pick mismatched values that produce streaks. We map intensity
+ * to (rotation, scale) along a curve where scale always covers rotation,
+ * so any value in [0, 1] is visually safe.
+ *
+ * Default `intensity: 0.5` reproduces gl-transitions' defaults exactly
+ * (rotation ≈ 0.105 rad / 6°, scale ≈ 1.2).
+ */
+export const dreamyZoom = defineTransition({
+    name: "dreamy-zoom",
+    defaults: {
+        intensity: 0.5,
+    },
+    glsl: `
+uniform float uIntensity;
+
+vec4 transition(vec2 uv) {
+  float ratio = uResolution.x / max(uResolution.y, 1.0);
+
+  // Single knob, mapped to rotation + scale together. Coefficients chosen
+  // so intensity=0.5 reproduces gl-transitions' (0.105 rad, 1.2) defaults.
+  float intensity = clamp(uIntensity, 0.0, 1.0);
+  float rotation = intensity * 0.21;
+  float scale = 1.0 + intensity * 0.4;
+
+  float phase = uProgress < 0.5 ? uProgress * 2.0 : (uProgress - 0.5) * 2.0;
+  float angleOffset = uProgress < 0.5
+    ? mix(0.0, rotation, phase)
+    : mix(-rotation, 0.0, phase);
+  float newScale = uProgress < 0.5
+    ? mix(1.0, scale, phase)
+    : mix(scale, 1.0, phase);
+
+  vec2 p = (uv - vec2(0.5)) / newScale * vec2(ratio, 1.0);
+  float angle = atan(p.y, p.x) + angleOffset;
+  float dist = length(p);
+  vec2 sampledP = vec2(
+    cos(angle) * dist / ratio + 0.5,
+    sin(angle) * dist + 0.5
+  );
+
+  vec4 c = uProgress < 0.5
+    ? getFromColor(sampledP)
+    : getToColor(sampledP);
+
+  // White flash: zero at endpoints, peaks at midpoint to mask the swap.
+  float flash = uProgress < 0.5 ? phase : 1.0 - phase;
+  return vec4(c.rgb + flash, c.a);
+}
+`,
+});
+//# sourceMappingURL=dreamy-zoom.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dreamy-zoom.js","sourceRoot":"","sources":["../../src/transitions/dreamy-zoom.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,QAAQ,EAAE;QACR,SAAS,EAAE,GAAG;KACf;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCP;CACA,CAAC,CAAC"}

package/dist/transitions/dreamy.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Ported from gl-transitions' Dreamy. A gentle vertical wobble displaces
+ * both images with opposing phases; combined with the linear crossfade this
+ * gives a soft, hypnotic "dream" feel. Procedural, no displacement texture
+ * required.
+ */
+export declare const dreamy: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{}>>;
+//# sourceMappingURL=dreamy.d.ts.map

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

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

package/dist/transitions/dreamy.js

@@ -0,0 +1,26 @@
+import { defineTransition } from "./define.js";
+/**
+ * Ported from gl-transitions' Dreamy. A gentle vertical wobble displaces
+ * both images with opposing phases; combined with the linear crossfade this
+ * gives a soft, hypnotic "dream" feel. Procedural, no displacement texture
+ * required.
+ */
+export const dreamy = defineTransition({
+    name: "dreamy",
+    defaults: {},
+    glsl: `
+vec2 dreamyOffset(float progress, float x, float theta) {
+  float shifty = 0.03 * progress * cos(10.0 * (progress + x) + theta);
+  return vec2(0.0, shifty);
+}
+
+vec4 transition(vec2 uv) {
+  return mix(
+    getFromColor(uv + dreamyOffset(uProgress, uv.x, 0.0)),
+    getToColor(uv + dreamyOffset(1.0 - uProgress, uv.x, 3.14159)),
+    uProgress
+  );
+}
+`,
+});
+//# sourceMappingURL=dreamy.js.map

package/dist/transitions/dreamy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dreamy.js","sourceRoot":"","sources":["../../src/transitions/dreamy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,gBAAgB,CAAC;IACrC,IAAI,EAAE,QAAQ;IACd,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;;;;;;;;;;;;;CAaP;CACA,CAAC,CAAC"}

package/dist/transitions/drip-wipe.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Faithful port of akella demo1. Horizontal sweep whose boundary is broken
+ * up by high-frequency Perlin noise hard-thresholded against the sweep
+ * position, producing isolated drip/splatter islands as the edge crosses.
+ *
+ * Deviations from the original:
+ * - The original's `smoothstep(edge, edge, x)` (undefined behavior when
+ *   edge0 == edge1) is avoided by clamping `w` to a tiny positive value,
+ *   so the edge smoothstep is always well-formed.
+ * - Endpoint position is `mix(-w, 1+w, progress)` (not akella's
+ *   `mix(-w/2, 1-w/2, progress)`) so at progress=0/1 the mask saturates
+ *   fully past the image bounds instead of relying on the UB fallback.
+ * - The displacement sampler is dropped — akella's shader declares it
+ *   but never references it.
+ */
+export declare const dripWipe: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly direction: readonly [-1, 0];
+    readonly width: 0.5;
+    readonly scaleX: 40;
+    readonly scaleY: 40;
+}>>;
+//# sourceMappingURL=drip-wipe.d.ts.map

package/dist/transitions/drip-wipe.d.ts.map

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

package/dist/transitions/drip-wipe.js

@@ -0,0 +1,109 @@
+import { defineTransition } from "./define.js";
+/**
+ * Faithful port of akella demo1. Horizontal sweep whose boundary is broken
+ * up by high-frequency Perlin noise hard-thresholded against the sweep
+ * position, producing isolated drip/splatter islands as the edge crosses.
+ *
+ * Deviations from the original:
+ * - The original's `smoothstep(edge, edge, x)` (undefined behavior when
+ *   edge0 == edge1) is avoided by clamping `w` to a tiny positive value,
+ *   so the edge smoothstep is always well-formed.
+ * - Endpoint position is `mix(-w, 1+w, progress)` (not akella's
+ *   `mix(-w/2, 1-w/2, progress)`) so at progress=0/1 the mask saturates
+ *   fully past the image bounds instead of relying on the UB fallback.
+ * - The displacement sampler is dropped — akella's shader declares it
+ *   but never references it.
+ */
+export const dripWipe = defineTransition({
+    name: "drip-wipe",
+    defaults: {
+        direction: [-1, 0],
+        width: 0.5,
+        scaleX: 40,
+        scaleY: 40,
+    },
+    glsl: `
+uniform vec2 uDirection;
+uniform float uWidth;
+uniform float uScaleX;
+uniform float uScaleY;
+
+// Stefan Gustavson classic 2D Perlin noise. Output range ≈ [-1, 1].
+vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec4 permute(vec4 x) { return mod289((x * 34.0 + 1.0) * x); }
+vec2 fade2(vec2 t) { return t * t * t * (t * (t * 6.0 - 15.0) + 10.0); }
+
+float pnoise(vec2 P) {
+  vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
+  vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
+  Pi = mod289(Pi);
+  vec4 ix = Pi.xzxz;
+  vec4 iy = Pi.yyww;
+  vec4 fx = Pf.xzxz;
+  vec4 fy = Pf.yyww;
+  vec4 i = permute(permute(ix) + iy);
+  vec4 gx = 2.0 * fract(i * (1.0 / 41.0)) - 1.0;
+  vec4 gy = abs(gx) - 0.5;
+  vec4 tx = floor(gx + 0.5);
+  gx = gx - tx;
+  vec2 g00 = vec2(gx.x, gy.x);
+  vec2 g10 = vec2(gx.y, gy.y);
+  vec2 g01 = vec2(gx.z, gy.z);
+  vec2 g11 = vec2(gx.w, gy.w);
+  vec4 norm = 1.79284291400159 - 0.85373472095314 *
+    vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11));
+  g00 *= norm.x;
+  g01 *= norm.y;
+  g10 *= norm.z;
+  g11 *= norm.w;
+  float n00 = dot(g00, vec2(fx.x, fy.x));
+  float n10 = dot(g10, vec2(fx.y, fy.y));
+  float n01 = dot(g01, vec2(fx.z, fy.z));
+  float n11 = dot(g11, vec2(fx.w, fy.w));
+  vec2 fxy = fade2(Pf.xy);
+  vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fxy.x);
+  return 2.3 * mix(n_x.x, n_x.y, fxy.y);
+}
+
+// Snap to nearest axis-aligned unit. The proj normalization below assumes
+// axis-aligned d (so proj ∈ [0,1]); diagonals would push it outside [0,1]
+// and the wipe edge would never reach part of the canvas. 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) {
+  vec2 d = snapAxis(uDirection);
+
+  // Project uv onto -d, centered at 0.5, so axis-aligned d gives a sweep
+  // coordinate in [0, 1]. Replaces the original's hardcoded uv.x.
+  //   d=[-1, 0] (Left)  → proj = uv.x         (default; matches old shader)
+  //   d=[ 1, 0] (Right) → proj = 1.0 - uv.x
+  //   d=[ 0,-1] (Down)  → proj = uv.y
+  //   d=[ 0, 1] (Up)    → proj = 1.0 - uv.y
+  float proj = dot(uv - vec2(0.5), -d) + 0.5;
+
+  // Width envelope: 0 at endpoints, 1 at mid-transition.
+  float dt = 4.0 * uProgress * (1.0 - uProgress);
+  // Keep w strictly positive so smoothstep(edge0, edge1, ...) never collapses.
+  float w = max(uWidth * dt, 0.001);
+
+  // Edge sweep: proj + shift spans well past [1 - w, 1] at both endpoints,
+  // so maskvalue saturates to 0 at progress=0 and 1 at progress=1.
+  float shift = mix(-w, 1.0 + w, uProgress);
+  float maskvalue = smoothstep(1.0 - w, 1.0, proj + shift);
+
+  // High-frequency Perlin, remapped to [0, 1] for akella's additive form.
+  float realnoise = 0.5 * (pnoise(uv * vec2(uScaleX, uScaleY)) + 1.0);
+
+  // Hard threshold with tiny softness (anti-alias only).
+  float mask = maskvalue + maskvalue * realnoise;
+  float final = smoothstep(0.99, 1.0, mask);
+
+  return mix(getFromColor(uv), getToColor(uv), final);
+}
+`,
+});
+//# sourceMappingURL=drip-wipe.js.map

package/dist/transitions/drip-wipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drip-wipe.js","sourceRoot":"","sources":["../../src/transitions/drip-wipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,gBAAgB,CAAC;IACvC,IAAI,EAAE,WAAW;IACjB,QAAQ,EAAE;QACR,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAClB,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,EAAE;QACV,MAAM,EAAE,EAAE;KACX;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFP;CACA,CAAC,CAAC"}

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

@@ -0,0 +1,22 @@
+/**
+ * Multi-point film-burn: a jittered grid of ignition points each expand
+ * outward with their own warm flame glow, merging as they meet to cover
+ * the frame. Per-ember staggered start times so different burns are at
+ * different phases.
+ *
+ * Locality invariant (to avoid cell-boundary rectangles): effective max
+ * reach of any ember = maxRadius + edgeWidth + noiseStrength, and this
+ * MUST stay under the distance to the nearest cell outside the search
+ * window (= (window_half-1) / uCount uv-units). With a 7x7 window that
+ * nearest-outside distance is 3/uCount, so `maxRadius = 1.6/uCount` plus
+ * edgeWidth=0.04 plus noiseStrength=0.06 gives reach = 1.6/uCount + 0.1,
+ * which stays below 3/uCount for uCount ≤ 12 (slider's max).
+ */
+export declare const emberScatter: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly count: 5;
+    readonly scale: 8;
+    readonly edgeWidth: 0.04;
+    readonly stagger: 0.35;
+    readonly flameColor: readonly [1.6, 0.7, 0.15];
+}>>;
+//# sourceMappingURL=ember-scatter.d.ts.map

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

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

package/dist/transitions/ember-scatter.js

@@ -0,0 +1,94 @@
+import { defineTransition } from "./define.js";
+/**
+ * Multi-point film-burn: a jittered grid of ignition points each expand
+ * outward with their own warm flame glow, merging as they meet to cover
+ * the frame. Per-ember staggered start times so different burns are at
+ * different phases.
+ *
+ * Locality invariant (to avoid cell-boundary rectangles): effective max
+ * reach of any ember = maxRadius + edgeWidth + noiseStrength, and this
+ * MUST stay under the distance to the nearest cell outside the search
+ * window (= (window_half-1) / uCount uv-units). With a 7x7 window that
+ * nearest-outside distance is 3/uCount, so `maxRadius = 1.6/uCount` plus
+ * edgeWidth=0.04 plus noiseStrength=0.06 gives reach = 1.6/uCount + 0.1,
+ * which stays below 3/uCount for uCount ≤ 12 (slider's max).
+ */
+export const emberScatter = defineTransition({
+    name: "ember-scatter",
+    defaults: {
+        count: 5,
+        scale: 8,
+        edgeWidth: 0.04,
+        stagger: 0.35,
+        flameColor: [1.6, 0.7, 0.15],
+    },
+    glsl: `
+uniform float uCount;
+uniform float uScale;
+uniform float uEdgeWidth;
+uniform float uStagger;
+uniform vec3 uFlameColor;
+
+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) {
+  float noiseStrength = 0.06;
+  float n = valueNoise(uv * uScale);
+  float noiseOffset = (n - 0.5) * noiseStrength;
+  float totalEdge = uEdgeWidth + noiseStrength * 0.5;
+  float maxRadius = 1.6 / max(uCount, 1.0);
+
+  vec2 gridPos = uv * uCount;
+  vec2 gridCell = floor(gridPos);
+
+  float bestSignedDist = 100.0;
+  for (int dy = -3; dy <= 3; dy++) {
+    for (int dx = -3; dx <= 3; dx++) {
+      vec2 neighborCell = gridCell + vec2(float(dx), float(dy));
+      vec2 jitter = vec2(
+        hash21(neighborCell + vec2(3.14, 0.0)),
+        hash21(neighborCell + vec2(0.0, 2.71))
+      );
+      vec2 emberUv = (neighborCell + jitter) / max(uCount, 1.0);
+
+      float emberStart = hash21(neighborCell + vec2(5.55, 5.55)) * uStagger;
+      float localP = clamp(
+        (uProgress - emberStart) / max(1.0 - uStagger, 0.0001),
+        0.0, 1.0
+      );
+
+      float d = distance(uv, emberUv);
+      float perturbed = d - noiseOffset;
+      float burnRadius = localP * (maxRadius + 2.0 * totalEdge) - totalEdge;
+      float signedDist = perturbed - burnRadius;
+
+      bestSignedDist = min(bestSignedDist, signedDist);
+    }
+  }
+
+  float w = smoothstep(-uEdgeWidth, uEdgeWidth, -bestSignedDist);
+  vec4 base = mix(getFromColor(uv), getToColor(uv), w);
+
+  float bandX = bestSignedDist / max(uEdgeWidth * 1.5, 0.0001);
+  float flameBand = exp(-bandX * bandX * 3.0);
+  float env = 4.0 * uProgress * (1.0 - uProgress);
+  vec3 flame = uFlameColor * flameBand * env;
+
+  return vec4(base.rgb + flame, base.a);
+}
+`,
+});
+//# sourceMappingURL=ember-scatter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ember-scatter.js","sourceRoot":"","sources":["../../src/transitions/ember-scatter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CAAC;IAC3C,IAAI,EAAE,eAAe;IACrB,QAAQ,EAAE;QACR,KAAK,EAAE,CAAC;QACR,KAAK,EAAE,CAAC;QACR,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC;KAC7B;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEP;CACA,CAAC,CAAC"}

package/dist/transitions/film-burn.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Cinematic film-burn reveal: an irregular hot-edged hole expands from a
+ * center point, eating through `from` to reveal `to` beneath. The burn
+ * front glows with a warm flame color that fades at the endpoints.
+ *
+ * Optional `chroma` param adds a radial RGB split concentrated at the
+ * advancing edge — set `flameColor` to a cool triplet (e.g. [1.2, 1.6, 2.5]
+ * "Electric") and `chroma > 0` for an electric / plasma-style vibe.
+ */
+export declare const filmBurn: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly center: readonly [0.5, 0.5];
+    readonly scale: 6;
+    readonly edgeWidth: 0.05;
+    readonly chroma: 0;
+    readonly flameColor: readonly [1.6, 0.7, 0.15];
+}>>;
+//# sourceMappingURL=film-burn.d.ts.map

package/dist/transitions/film-burn.d.ts.map

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

package/dist/transitions/film-burn.js

@@ -0,0 +1,101 @@
+import { defineTransition } from "./define.js";
+/**
+ * Cinematic film-burn reveal: an irregular hot-edged hole expands from a
+ * center point, eating through `from` to reveal `to` beneath. The burn
+ * front glows with a warm flame color that fades at the endpoints.
+ *
+ * Optional `chroma` param adds a radial RGB split concentrated at the
+ * advancing edge — set `flameColor` to a cool triplet (e.g. [1.2, 1.6, 2.5]
+ * "Electric") and `chroma > 0` for an electric / plasma-style vibe.
+ */
+export const filmBurn = defineTransition({
+    name: "film-burn",
+    defaults: {
+        center: [0.5, 0.5],
+        scale: 6,
+        edgeWidth: 0.05,
+        chroma: 0,
+        flameColor: [1.6, 0.7, 0.15],
+    },
+    glsl: `
+uniform vec2 uCenter;
+uniform float uScale;
+uniform float uEdgeWidth;
+uniform float uChroma;
+uniform vec3 uFlameColor;
+
+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 radial distance from center, normalized to [0,1] by the
+  // farthest canvas corner (matches the shape-reveal pattern).
+  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);
+
+  // Noise pushes the burn edge organically off a perfect circle.
+  float noiseStrength = 0.15;
+  float n = valueNoise(uv * uScale);
+  float perturbed = normalizedDist - (n - 0.5) * noiseStrength;
+
+  // Extend the threshold sweep so the full edgeWidth + noise half-range is
+  // beyond the valid [0,1] normalized-distance band at each endpoint.
+  float totalEdge = uEdgeWidth + noiseStrength * 0.5;
+  float burnRadius = uProgress * (1.0 + 2.0 * totalEdge) - totalEdge;
+  float signedDist = perturbed - burnRadius;
+
+  // Inside the burn: show to. Outside: show from.
+  float w = smoothstep(-uEdgeWidth, uEdgeWidth, -signedDist);
+  float env = 4.0 * uProgress * (1.0 - uProgress);
+
+  // Optional radial chromatic aberration concentrated at the burn edge.
+  // chroma=0 → no split; sample once and mix normally. chroma>0 → split
+  // R/B along the radial direction with edge-proximity Gaussian falloff.
+  vec3 baseRGB;
+  if (uChroma > 0.0001) {
+    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);
+    baseRGB = mix(fromRGB, toRGB, w);
+  } else {
+    baseRGB = mix(getFromColor(uv).rgb, getToColor(uv).rgb, w);
+  }
+
+  // Flame glow: tight Gaussian band at the burn edge, env-gated to zero
+  // at both endpoints.
+  float bandX = signedDist / max(uEdgeWidth * 1.5, 0.0001);
+  float flameBand = exp(-bandX * bandX * 3.0);
+  vec3 flame = uFlameColor * flameBand * env;
+
+  return vec4(baseRGB + flame, 1.0);
+}
+`,
+});
+//# sourceMappingURL=film-burn.js.map

package/dist/transitions/film-burn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"film-burn.js","sourceRoot":"","sources":["../../src/transitions/film-burn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;;;GAQG;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,CAAC;QACR,SAAS,EAAE,IAAI;QACf,MAAM,EAAE,CAAC;QACT,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC;KAC7B;IACD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+EP;CACA,CAAC,CAAC"}

package/dist/transitions/film-grain.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Filmic dissolve. Everything that modulates the image is gated by a
+ * 4·p·(1-p) peak envelope so endpoints are pixel-pure from/to.
+ *
+ * At peak, the image picks up:
+ *   - multi-scale animated grain (fine + medium + coarse), reseeded
+ *     in discrete progress frames so scrubbing flickers like a
+ *     projector
+ *   - partial desaturation (content drifts toward luminance)
+ *   - subtle warm tint (R up, B down)
+ *   - a soft corner vignette
+ *   - occasional dark vertical scratches on ~2% of columns, reseeded
+ *     every couple of frames
+ *
+ * Base crossfade is a soft smoothstep(0.25, 0.75) so from and to
+ * overlap through the grainy middle — the grain is what carries the
+ * hand-off, rather than a geometric wipe with film on top.
+ *
+ * One param: grain (master intensity of the whole film character).
+ */
+export declare const filmGrain: import("../types.js").Transition<import("@vysmo/gl-core").Widen<{
+    readonly grain: 1;
+}>>;
+//# sourceMappingURL=film-grain.d.ts.map

package/dist/transitions/film-grain.d.ts.map

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