@vysmo/transitions 0.1.0

package/src/transitions/drip-wipe.ts

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

package/src/transitions/ember-scatter.ts

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

package/src/transitions/film-burn.ts

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

package/src/transitions/film-grain.ts

@@ -0,0 +1,78 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * 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 const filmGrain = defineTransition({
+  name: "film-grain",
+  defaults: {
+    grain: 1.0,
+  },
+  glsl: `
+uniform float uGrain;
+
+float hash21(vec2 p) {
+  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+vec4 transition(vec2 uv) {
+  vec3 fromC = getFromColor(uv).rgb;
+  vec3 toC = getToColor(uv).rgb;
+  vec3 base = mix(fromC, toC, smoothstep(0.25, 0.75, uProgress));
+
+  // Peak envelope — zero at both endpoints, 1 at mid.
+  float peak = 4.0 * uProgress * (1.0 - uProgress) * uGrain;
+
+  // Partial desaturation toward luminance (old film is less vivid).
+  float lum = dot(base, vec3(0.299, 0.587, 0.114));
+  base = mix(base, vec3(lum), peak * 0.25);
+
+  // Warm tint: subtle R boost + B drop at peak. Still multiplicative
+  // on content (no synthetic colour introduced from nothing).
+  base *= mix(vec3(1.0), vec3(1.08, 1.00, 0.88), peak * 0.6);
+
+  // Stepped seed → scrubbing reads as projector flicker between
+  // a handful of discrete grain "frames" across the transition.
+  float frame = floor(uProgress * 22.0);
+
+  // Multi-scale grain. Fine texture + medium clumps + occasional
+  // coarse blotches — reads as film-stock rather than digital noise.
+  float g = 0.0;
+  g += (hash21(uv * 520.0 + vec2(frame, 0.0)) - 0.5) * 0.6;
+  g += (hash21(uv * 130.0 + vec2(0.0, frame)) - 0.5) * 0.3;
+  g += (hash21(uv * 32.0 + vec2(frame, frame)) - 0.5) * 0.18;
+  base += vec3(g) * peak * 0.55;
+
+  // Vertical scratches on ~2% of columns, reseeded every two frames.
+  float scratchCol = floor(uv.x * 220.0);
+  float scratchSeed = floor(frame * 0.5);
+  float scratchHash = hash21(vec2(scratchCol, scratchSeed));
+  float isScratch = step(0.98, scratchHash);
+  base *= mix(1.0, 0.32, isScratch * peak);
+
+  // Soft corner vignette at peak only — old projector look.
+  float d = distance(uv, vec2(0.5));
+  float vignette = 1.0 - smoothstep(0.35, 0.9, d);
+  base *= mix(1.0, 0.65 + 0.35 * vignette, peak * 0.8);
+
+  return vec4(base, 1.0);
+}
+`,
+});

package/src/transitions/flow-warp.ts

@@ -0,0 +1,51 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Faithful port of akella demo6 (the "planetary" transition). Reads a
+ * displacement-map texture supplied via `RenderArgs.displacement` to drive
+ * a per-pixel UV offset vector. From-image is displaced in the direction
+ * `rotate(angle1) * dispVec * progress`; to-image is displaced in the
+ * direction `rotate(angle2) * dispVec * (1-progress)`. The two opposing
+ * angles produce the signature dual-flow akella aesthetic.
+ *
+ * The displacement is interpreted as centered: mid-gray (0.5) maps to
+ * zero offset; channel-r drives the x-component, channel-g the y. This
+ * differs from akella's raw [0,1] convention so the runner's default
+ * mid-gray fallback degrades to a clean crossfade when no displacement
+ * is supplied.
+ */
+export const flowWarp = defineTransition({
+  name: "flow-warp",
+  defaults: {
+    intensity: 0.4,
+    angle1: 0.7853982,
+    angle2: -2.3561945,
+  },
+  glsl: `
+uniform float uIntensity;
+uniform float uAngle1;
+uniform float uAngle2;
+
+mat2 rotate2d(float a) {
+  float s = sin(a);
+  float c = cos(a);
+  return mat2(c, -s, s, c);
+}
+
+// Out-of-range UVs use the runner-prologue mirrorUv() so displacement
+// reads as mirrored continuation rather than streaked edge texels.
+vec4 transition(vec2 uv) {
+  vec4 disp = getDisplacement(uv);
+  // Centered convention: mid-gray = no displacement, range [-1, 1].
+  vec2 dispVec = (disp.rg - 0.5) * 2.0;
+
+  vec2 distorted1 = uv + rotate2d(uAngle1) * dispVec * uIntensity * uProgress;
+  vec2 distorted2 = uv + rotate2d(uAngle2) * dispVec * uIntensity * (1.0 - uProgress);
+
+  vec4 t1 = getFromColor(mirrorUv(distorted1));
+  vec4 t2 = getToColor(mirrorUv(distorted2));
+
+  return mix(t1, t2, uProgress);
+}
+`,
+});

package/src/transitions/fluid-flow.ts

@@ -0,0 +1,94 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Multi-pass pixel advection. The from-image is progressively carried
+ * along a swirly vector field, then blended toward to. Each pass
+ * samples uPrevious at a displaced position — pixels genuinely move
+ * (follow flow lines across iterations) rather than fading in place,
+ * so the character is closer to ink-stirring-into-water than any
+ * crossfade. Impossible single-pass: resolving a multi-step flow
+ * trajectory requires reading previous pass output.
+ *
+ *   pass 0              — seed: sample from.
+ *   pass 1..passCount-2 — advection: sample uPrevious at uv - flow·step,
+ *                         and blend toward to by a per-pass amount
+ *                         chosen so the compounded blend reaches
+ *                         progress after all advection passes.
+ *   final pass          — pass-through (output previous).
+ *
+ * Endpoints: at progress 0, step = 0 and per-pass blend = 0, so the
+ * chain preserves from. At progress 1, the per-pass blend = 1 so the
+ * first advection pass already writes to, and every subsequent pass
+ * preserves it (advecting a uniform field is a fixed point).
+ */
+export const fluidFlow = defineTransition({
+  name: "fluid-flow",
+  passes: 6,
+  defaults: {
+    strength: 0.12,
+    scale: 3,
+  },
+  glsl: `
+uniform float uStrength;
+uniform float uScale;
+
+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;
+}
+
+// Swirly 2D vector field in [-1,1]² per axis. Two offset fbm fields
+// give a non-divergence-free flow that still reads as fluid swirl.
+vec2 flowField(vec2 p) {
+  return vec2(
+    fbm(p) * 2.0 - 1.0,
+    fbm(p + vec2(17.3, 23.7)) * 2.0 - 1.0
+  );
+}
+
+vec4 transition(vec2 uv) {
+  // Final pass: pass through the accumulated result.
+  if (uPass == uPassCount - 1) {
+    return getPrevious(uv);
+  }
+
+  // Seed pass: carry the from image in untouched.
+  if (uPass == 0) {
+    return vec4(getFromColor(uv).rgb, 1.0);
+  }
+
+  float nAdvect = float(uPassCount - 2);
+  vec2 flow = flowField(uv * uScale);
+  float stepAmount = uStrength * uProgress / nAdvect;
+
+  // Sample previous at the advected position — pixels flow along the
+  // field. Clamp keeps samples in-bounds when the flow pushes near
+  // the frame edge.
+  vec2 advectedUv = clamp(uv - flow * stepAmount, 0.0, 1.0);
+  vec3 advected = getPrevious(advectedUv).rgb;
+
+  // Per-pass blend chosen so (1 - blend)^N = 1 - progress, i.e. after
+  // nAdvect passes the compounded blend exactly equals progress.
+  float perPassBlend = 1.0 - pow(1.0 - uProgress, 1.0 / nAdvect);
+
+  vec3 blended = mix(advected, getToColor(uv).rgb, perPassBlend);
+  return vec4(blended, 1.0);
+}
+`,
+});

package/src/transitions/glass-shatter.ts

@@ -0,0 +1,86 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Voronoi tessellation where each cell flips from from to to at its own
+ * randomised moment, with a soft temporal window so the flip isn't an
+ * instant step. Every pixel samples both source images at its own uv —
+ * no per-shard displacement — so adjacent cells never diverge into
+ * different sample positions and the Voronoi edges resolve cleanly
+ * without halos or ghost outlines.
+ *
+ * Optional env-map glint (reflection > 0): each shard gets a random
+ * "facet direction" which picks a different patch of the env map, and
+ * that reflection blends in strongest at the shard's own mid-flip
+ * moment — reads as broken mirror catching the light as each piece
+ * rotates through, not a coloured tile. Defaults to 0 (no reflection)
+ * so the transition is unchanged without an env map.
+ *
+ * Endpoints: each cell's flip moment is constrained to [flipWindow/2,
+ * 1 - flipWindow/2] with a small safety margin, so at progress 0/1 the
+ * smoothstep is saturated off/on for every cell AND the mid-flip
+ * glint envelope is zero for every cell.
+ */
+export const glassShatter = defineTransition({
+  name: "glass-shatter",
+  defaults: {
+    cells: 14,
+    reflection: 0.0,
+  },
+  glsl: `
+uniform float uCells;
+uniform float uReflection;
+const float uFlipWindow = 0.12;
+
+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.5, 31.3)));
+}
+
+vec4 transition(vec2 uv) {
+  float aspect = uResolution.x / uResolution.y;
+  vec2 freq = vec2(uCells * aspect, uCells);
+  vec2 p = uv * freq;
+  vec2 cellBase = floor(p);
+  vec2 local = fract(p);
+
+  // 3x3 neighbourhood search for the closest cell (Voronoi).
+  float dist1 = 999.0;
+  vec2 id1 = cellBase;
+  for (int j = -1; j <= 1; j++) {
+    for (int i = -1; i <= 1; i++) {
+      vec2 nId = cellBase + vec2(float(i), float(j));
+      vec2 jitter = hash22(nId);
+      vec2 nPos = vec2(float(i), float(j)) + jitter;
+      float d = length(nPos - local);
+      if (d < dist1) {
+        dist1 = d;
+        id1 = nId;
+      }
+    }
+  }
+
+  // Keep cell flip moments away from 0 and 1 with enough headroom for
+  // the window, plus a tiny safety margin so endpoints saturate cleanly.
+  float halfWin = uFlipWindow * 0.5;
+  float cellFlip = mix(halfWin + 0.02, 1.0 - halfWin - 0.02, hash21(id1 + vec2(0.31)));
+
+  float reveal = smoothstep(cellFlip - halfWin, cellFlip + halfWin, uProgress);
+  vec4 baseColor = mix(getFromColor(uv), getToColor(uv), reveal);
+
+  // Per-shard mirror glint: each shard has its own facet direction, and
+  // its reflection of the env map peaks at reveal=0.5 (the moment the
+  // shard flips). Reveal=0 or 1 → glintEnv=0, so endpoints stay clean.
+  if (uReflection > 0.0) {
+    vec2 facetDir = normalize(hash22(id1 + vec2(0.83)) * 2.0 - 1.0);
+    vec2 envUv = vec2(0.5 + 0.5 * facetDir.x, 0.5 - 0.5 * facetDir.y);
+    vec3 envColor = getEnvironment(envUv).rgb;
+    float glintEnv = 4.0 * reveal * (1.0 - reveal);
+    baseColor.rgb = mix(baseColor.rgb, envColor, glintEnv * uReflection);
+  }
+
+  return baseColor;
+}
+`,
+});

package/src/transitions/glitch.ts

@@ -0,0 +1,59 @@
+import { defineTransition } from "./define.js";
+
+export const glitch = defineTransition({
+  name: "glitch",
+  defaults: {
+    intensity: 0.6,
+    chroma: 0.02,
+    blocks: 30,
+  },
+  glsl: `
+uniform float uIntensity;
+uniform float uChroma;
+uniform float uBlocks;
+
+float hash11(float n) { return fract(sin(n * 12.9898) * 43758.5453); }
+float hash21(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); }
+
+vec4 transition(vec2 uv) {
+  // Envelope: ramps up to max at midpoint, zero at endpoints.
+  float envelope = 4.0 * uProgress * (1.0 - uProgress);
+  float glitchAmt = uIntensity * envelope;
+
+  // Per-stripe horizontal displacement; stripe layout evolves over time.
+  float stripeId = floor(uv.y * uBlocks);
+  float timeStep = floor(uProgress * 24.0);
+  float stripeSeed = hash21(vec2(stripeId, timeStep));
+  float displaceActive = step(0.6, stripeSeed);
+  float displaceAmount = (hash11(stripeSeed + 1.0) - 0.5) * 0.12 * glitchAmt * displaceActive;
+
+  vec2 displacedUv = vec2(uv.x + displaceAmount, uv.y);
+  vec2 clamped = clamp(displacedUv, 0.0, 1.0);
+
+  // RGB channel split scales with glitch amount. chroma is the per-channel
+  // UV offset multiplier — capped at 0.05; past that, R/B samples come from
+  // unrelated parts of the scene and edge-clamping creates color stripes
+  // instead of reading as glitch chromatic aberration.
+  float chromaOffset = glitchAmt * min(uChroma, 0.05);
+  vec2 offR = clamp(displacedUv + vec2(chromaOffset, 0.0), 0.0, 1.0);
+  vec2 offB = clamp(displacedUv - vec2(chromaOffset, 0.0), 0.0, 1.0);
+
+  vec3 fromRgb = vec3(
+    getFromColor(offR).r,
+    getFromColor(clamped).g,
+    getFromColor(offB).b
+  );
+  vec3 toRgb = vec3(
+    getToColor(offR).r,
+    getToColor(clamped).g,
+    getToColor(offB).b
+  );
+
+  // Hard-ish crossover concentrated in the middle 20% for a "cut" feel.
+  float mixW = smoothstep(0.45, 0.55, uProgress);
+  vec3 rgb = mix(fromRgb, toRgb, mixW);
+
+  return vec4(rgb, 1.0);
+}
+`,
+});