@vysmo/transitions 0.1.0

package/src/transitions/god-rays-reveal.ts

@@ -0,0 +1,110 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Multi-pass transition. As to reveals through a noise mask, its
+ * bright highlights emit volumetric-looking light shafts toward a
+ * source point, built up by iterative radial blur — each pass samples
+ * from the previous pass's output at progressively finer steps along
+ * the ray from every pixel to the source. Impossible single-pass: a
+ * full-length radial streak would need ~30 samples across the ray,
+ * and after five iterations of 6 samples each, the shafts have
+ * progressively-refined spatial frequencies that a one-pass sampling
+ * of the source texture cannot produce.
+ *
+ *   pass 0               — seed: to-highlights gated by the reveal
+ *                          mask AND a 4·p·(1-p) envelope.
+ *   pass 1..passCount-2  — iterative radial blur. Pass i samples 6
+ *                          points along uv→source at step = 1/(5 · 2^(i-1)),
+ *                          reading from uPrevious so the shafts
+ *                          accumulate across passes.
+ *   final pass           — composite = mix(from, to, mask) +
+ *                          rays * intensity.
+ *
+ * Endpoints: seed envelope is 0 at progress 0 and 1, so the blur
+ * chain carries zeros and the composite resolves to pure from/to.
+ */
+export const godRaysReveal = defineTransition({
+  name: "god-rays-reveal",
+  passes: 7,
+  defaults: {
+    scale: 5,
+    softness: 0.08,
+    threshold: 0.45,
+    intensity: 1.6,
+    decay: 0.92,
+    source: [0.5, 0.5],
+  },
+  glsl: `
+uniform float uScale;
+uniform float uSoftness;
+uniform float uThreshold;
+uniform float uIntensity;
+uniform float uDecay;
+uniform vec2 uSource;
+
+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;
+}
+
+float revealMask(vec2 uv) {
+  float safeLow = uSoftness + 0.005;
+  float safeHigh = 1.0 - uSoftness - 0.005;
+  float n = mix(safeLow, safeHigh, clamp(fbm(uv * uScale), 0.0, 1.0));
+  return smoothstep(n - uSoftness, n + uSoftness, uProgress);
+}
+
+vec4 transition(vec2 uv) {
+  // Final pass: composite rays on top of the from→to reveal.
+  if (uPass == uPassCount - 1) {
+    vec3 rays = getPrevious(uv).rgb;
+    float mask = revealMask(uv);
+    vec3 base = mix(getFromColor(uv).rgb, getToColor(uv).rgb, mask);
+    return vec4(base + rays * uIntensity, 1.0);
+  }
+
+  // Seed pass: bright highlights of to, gated by reveal mask and
+  // a 4·p·(1-p) envelope so endpoints contribute zero.
+  if (uPass == 0) {
+    vec3 toC = getToColor(uv).rgb;
+    float lum = dot(toC, vec3(0.299, 0.587, 0.114));
+    float bright = smoothstep(uThreshold - 0.1, uThreshold + 0.1, lum);
+    float mask = revealMask(uv);
+    float envelope = 4.0 * uProgress * (1.0 - uProgress);
+    return vec4(toC * bright * mask * envelope, 1.0);
+  }
+
+  // Iterative radial blur: each pass samples 6 points along uv→source
+  // with step shrinking by 2× each pass. Over 5 passes, shafts span
+  // the full ray with well-refined density.
+  vec2 toSource = uSource - uv;
+  float passStep = 1.0 / (5.0 * pow(2.0, float(uPass - 1)));
+
+  vec3 accum = vec3(0.0);
+  float weightSum = 0.0;
+  for (int i = 0; i < 6; i++) {
+    float t = passStep * float(i);
+    float w = pow(uDecay, float(i));
+    accum += getPrevious(uv + toSource * t).rgb * w;
+    weightSum += w;
+  }
+  return vec4(accum / weightSum, 1.0);
+}
+`,
+});

package/src/transitions/gravity-pull.ts

@@ -0,0 +1,65 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Port of akella demo8. Pixels are pulled vertically toward `center` over
+ * the transition: from-image moves toward center by `progress * intensity`,
+ * to-image starts displaced AWAY from center and converges back. A fine
+ * noise field perturbs the magnitude per pixel so the pull reads as
+ * organic. Crossfade is linear so there's no freeze through the midpoint.
+ *
+ * Shrink-to-center: at midpoint the canvas samples from a smaller central
+ * region so the to-image's away-from-center displacement never samples
+ * outside `[0,1]` and clamps into vertical bars at the top/bottom edges.
+ */
+export const gravityPull = defineTransition({
+  name: "gravity-pull",
+  defaults: {
+    center: [0.5, 0.5],
+    intensity: 0.15,
+  },
+  glsl: `
+uniform vec2 uCenter;
+uniform float uIntensity;
+
+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 env = 4.0 * uProgress * (1.0 - uProgress);
+  float n = valueNoise(uv * 10.0);
+
+  // Vertical signed unit vector pointing toward the center.
+  vec2 toCenter = uCenter - uv;
+  float lenTC = length(toCenter);
+  float dy = lenTC > 0.001 ? toCenter.y / lenTC : 0.0;
+  vec2 d = vec2(0.0, dy);
+
+  float pullMag = uIntensity * (1.0 + n * 0.5);
+
+  // Shrink-to-center at midpoint so the away-from-center displacement
+  // stays in source bounds. At endpoints env=0 → shrunkUv=uv (no zoom),
+  // so endpoints are pixel-pure. Capped to keep image visible at high
+  // intensities.
+  float maxPull = uIntensity * 1.5;
+  float shrinkAmount = max(1.0 - env * 2.0 * maxPull, 0.2);
+  vec2 shrunkUv = (uv - 0.5) * shrinkAmount + 0.5;
+
+  vec2 fromUv = clamp(shrunkUv + d * uProgress * pullMag, 0.0, 1.0);
+  vec2 toUv = clamp(shrunkUv - d * (1.0 - uProgress) * pullMag, 0.0, 1.0);
+
+  return mix(getFromColor(fromUv), getToColor(toUv), uProgress);
+}
+`,
+});

package/src/transitions/grid-reveal.ts

@@ -0,0 +1,53 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Pattern values:
+ *  0 = sequential (left-to-right, top-to-bottom)
+ *  1 = radial (from center outward)
+ *  2 = pseudo-random
+ */
+export const gridReveal = defineTransition({
+  name: "grid-reveal",
+  defaults: {
+    count: 8,
+    stagger: 0.7,
+    pattern: 1,
+  },
+  glsl: `
+uniform float uCount;
+uniform float uStagger;
+uniform float uPattern;
+
+float hash21(vec2 p) {
+  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+vec4 transition(vec2 uv) {
+  // 1×1 is a fade and 2×2 is a quad-split — neither reads as "grid".
+  // Clamp here so the transition is reliable regardless of caller input.
+  float count = max(uCount, 3.0);
+  vec2 cell = floor(uv * count);
+
+  float priority;
+  if (uPattern < 0.5) {
+    // Sequential left-to-right, top-to-bottom
+    priority = (cell.y * count + cell.x) / (count * count);
+  } else if (uPattern < 1.5) {
+    // Radial from center of the grid
+    vec2 center = vec2(count * 0.5 - 0.5);
+    float dist = length(cell - center);
+    float maxDist = length(center);
+    priority = dist / max(maxDist, 0.0001);
+  } else {
+    // Pseudo-random per cell
+    priority = hash21(cell);
+  }
+
+  float start = priority * uStagger;
+  float window = max(0.0001, 1.0 - uStagger);
+  float localProgress = clamp((uProgress - start) / window, 0.0, 1.0);
+
+  return mix(getFromColor(uv), getToColor(uv), localProgress);
+}
+`,
+});

package/src/transitions/heat-haze.ts

@@ -0,0 +1,51 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Heat-haze shimmer: horizontal displacement driven by an animated noise
+ * field that flows upward over progress, simulating the look-through-
+ * hot-air effect. Both images receive the same displacement so they
+ * blend through a shared shimmer at the midpoint. Displacement envelope
+ * gates the effect to zero at endpoints.
+ */
+export const heatHaze = defineTransition({
+  name: "heat-haze",
+  defaults: {
+    intensity: 0.04,
+    frequency: 14,
+    flow: 5.0,
+  },
+  glsl: `
+uniform float uIntensity;
+uniform float uFrequency;
+uniform float uFlow;
+
+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 env = 4.0 * uProgress * (1.0 - uProgress);
+
+  // Horizontal column noise that drifts upward over progress (noise sampled
+  // at uv.y - progress*flow → rising pattern). Vertical frequency lower so
+  // bands are tall and column-like, matching real heat-haze.
+  float n = valueNoise(vec2(uv.x * uFrequency, uv.y * uFrequency * 0.4 - uProgress * uFlow));
+  float disp = (n - 0.5) * uIntensity * env;
+
+  vec2 sampleUv = clamp(vec2(uv.x + disp, uv.y), 0.0, 1.0);
+
+  return mix(getFromColor(sampleUv), getToColor(sampleUv), uProgress);
+}
+`,
+});

package/src/transitions/index.ts

@@ -0,0 +1,63 @@
+export { dissolve } from "./dissolve.js";
+export { wipeDirectional } from "./wipe-directional.js";
+export { slide } from "./slide.js";
+export { radialReveal } from "./radial-reveal.js";
+export { crossZoom } from "./cross-zoom.js";
+export { glitch } from "./glitch.js";
+export { noiseDissolve } from "./noise-dissolve.js";
+export { clockWipe } from "./clock-wipe.js";
+export { ripple } from "./ripple.js";
+export { pixelate } from "./pixelate.js";
+export { kineticBands } from "./kinetic-bands.js";
+export { lightLeak } from "./light-leak.js";
+export { liquidMorph } from "./liquid-morph.js";
+export { gridReveal } from "./grid-reveal.js";
+export { warpZoom } from "./warp-zoom.js";
+export { chromaticPulse } from "./chromatic-pulse.js";
+export { push } from "./push.js";
+export { shapeReveal } from "./shape-reveal.js";
+export { paintBleed } from "./paint-bleed.js";
+export { shockwave } from "./shockwave.js";
+export { swirl } from "./swirl.js";
+export { split } from "./split.js";
+export { directionalWarp } from "./directional-warp.js";
+export { wind } from "./wind.js";
+export { linearBlur } from "./linear-blur.js";
+export { luminaMelt } from "./lumina-melt.js";
+export { pinwheel } from "./pinwheel.js";
+export { dreamy } from "./dreamy.js";
+export { tangentMotionBlur } from "./tangent-motion-blur.js";
+export { colorPhase } from "./color-phase.js";
+export { filmBurn } from "./film-burn.js";
+export { mosaic } from "./mosaic.js";
+export { emberScatter } from "./ember-scatter.js";
+export { directionalBurn } from "./directional-burn.js";
+export { inkBloom } from "./ink-bloom.js";
+export { smolderingEdge } from "./smoldering-edge.js";
+export { polkaDotsCurtain } from "./polka-dots-curtain.js";
+export { crosshatch } from "./crosshatch.js";
+export { dreamyZoom } from "./dreamy-zoom.js";
+export { heatHaze } from "./heat-haze.js";
+export { prismSplit } from "./prism-split.js";
+export { irisZoom } from "./iris-zoom.js";
+export { gravityPull } from "./gravity-pull.js";
+export { waveStripes } from "./wave-stripes.js";
+export { flowWarp } from "./flow-warp.js";
+export { dripWipe } from "./drip-wipe.js";
+export { portalDive } from "./portal-dive.js";
+export { liquidChrome } from "./liquid-chrome.js";
+export { glassShatter } from "./glass-shatter.js";
+export { inkDiffuse } from "./ink-diffuse.js";
+export { bloomReveal } from "./bloom-reveal.js";
+export { godRaysReveal } from "./god-rays-reveal.js";
+export { fluidFlow } from "./fluid-flow.js";
+export { lenticularFlip } from "./lenticular-flip.js";
+export { filmGrain } from "./film-grain.js";
+export { singularity } from "./singularity.js";
+export { polygonFlip } from "./polygon-flip.js";
+export { pageCurl } from "./page-curl.js";
+export { rippleWave } from "./ripple-wave.js";
+export { tileScatter } from "./tile-scatter.js";
+export { defineTransition } from "./define.js";
+export type { DefineTransitionSpec } from "./define.js";
+export { ALL_TRANSITIONS } from "./all.js";

package/src/transitions/ink-bloom.ts

@@ -0,0 +1,76 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Cold fluid sibling to film-burn: a radial bloom expands from a center
+ * point with a dark deeply-tinted ring at the advancing boundary instead
+ * of a bright flame. Feels like ink diffusing through water. The ink
+ * color tint is multiplicative (darkens toward uInkColor) rather than
+ * additive bright glow.
+ */
+export const inkBloom = defineTransition({
+  name: "ink-bloom",
+  defaults: {
+    center: [0.5, 0.5],
+    scale: 5,
+    edgeWidth: 0.07,
+    bloomWidth: 0.12,
+    inkColor: [0.25, 0.08, 0.45],
+  },
+  glsl: `
+uniform vec2 uCenter;
+uniform float uScale;
+uniform float uEdgeWidth;
+uniform float uBloomWidth;
+uniform vec3 uInkColor;
+
+float hash21(vec2 p) {
+  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+float valueNoise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);
+  float a = hash21(i);
+  float b = hash21(i + vec2(1.0, 0.0));
+  float c = hash21(i + vec2(0.0, 1.0));
+  float d = hash21(i + vec2(1.0, 1.0));
+  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+}
+
+vec4 transition(vec2 uv) {
+  vec2 pixel = uv * uResolution;
+  vec2 centerPx = uCenter * uResolution;
+  float dist = distance(pixel, centerPx);
+  float maxDist = max(
+    max(length(centerPx), length(centerPx - vec2(uResolution.x, 0.0))),
+    max(length(centerPx - vec2(0.0, uResolution.y)), length(centerPx - uResolution))
+  );
+  float normalizedDist = dist / max(maxDist, 0.0001);
+
+  // Soft/low-frequency noise for fluid-like edge deformation.
+  float noiseStrength = 0.18;
+  float n = valueNoise(uv * uScale);
+  float perturbed = normalizedDist - (n - 0.5) * noiseStrength;
+
+  float totalEdge = uEdgeWidth + noiseStrength * 0.5;
+  float bloomRadius = uProgress * (1.0 + 2.0 * totalEdge) - totalEdge;
+  float signedDist = perturbed - bloomRadius;
+
+  float w = smoothstep(-uEdgeWidth, uEdgeWidth, -signedDist);
+  vec4 base = mix(getFromColor(uv), getToColor(uv), w);
+
+  // Wide dark bloom band — uBloomWidth controls how far the tint diffuses
+  // off the hard edge. env-gated so endpoints remain untouched.
+  float bandX = signedDist / max(uBloomWidth, 0.0001);
+  float bloomBand = exp(-bandX * bandX * 1.5);
+  float env = 4.0 * uProgress * (1.0 - uProgress);
+  float tint = bloomBand * env * 0.85;
+
+  vec3 darkened = base.rgb * uInkColor;
+  vec3 result = mix(base.rgb, darkened, tint);
+
+  return vec4(result, base.a);
+}
+`,
+});

package/src/transitions/ink-diffuse.ts

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

package/src/transitions/iris-zoom.ts

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

package/src/transitions/kinetic-bands.ts

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