@vysmo/transitions 0.1.0

package/src/transitions/pinwheel.ts

@@ -0,0 +1,40 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Multi-spoke angular sweep: `spokes` wedges each open simultaneously around
+ * a center, sweeping through their angular slice as progress grows. A
+ * rotating "fan" reveal, aspect-corrected so spokes stay radial.
+ */
+export const pinwheel = defineTransition({
+  name: "pinwheel",
+  defaults: {
+    center: [0.5, 0.5],
+    spokes: 8,
+    softness: 0.05,
+  },
+  glsl: `
+uniform vec2 uCenter;
+uniform float uSpokes;
+uniform float uSoftness;
+
+const float TWO_PI = 6.2831853;
+
+vec4 transition(vec2 uv) {
+  // Aspect-correct so spokes remain radial on non-square canvases.
+  vec2 delta = (uv - uCenter) * vec2(uResolution.x / uResolution.y, 1.0);
+  float angle = atan(delta.y, delta.x);
+  float slice = TWO_PI / max(uSpokes, 2.0);
+
+  // Position within a single spoke's angular range, 0 to slice.
+  float folded = mod(angle, slice);
+
+  // Softness expressed as a fraction of the slice so it scales with spoke count.
+  float s = slice * uSoftness;
+  // Threshold sweeps from -s (outside range) to slice+s (outside range), so
+  // feather never reaches visible pixels at the endpoints.
+  float threshold = -s + uProgress * (slice + 2.0 * s);
+  float w = smoothstep(threshold - s, threshold + s, folded);
+  return mix(getToColor(uv), getFromColor(uv), w);
+}
+`,
+});

package/src/transitions/pixelate.ts

@@ -0,0 +1,26 @@
+import { defineTransition } from "./define.js";
+
+export const pixelate = defineTransition({
+  name: "pixelate",
+  defaults: {
+    maxBlockSize: 40,
+  },
+  glsl: `
+uniform float uMaxBlockSize;
+
+vec4 transition(vec2 uv) {
+  // Block size peaks at midpoint, 1px at endpoints.
+  float env = 4.0 * uProgress * (1.0 - uProgress);
+  float blockSize = max(1.0, uMaxBlockSize * env);
+
+  // Quantize to a grid of blockSize-pixel cells, sample from cell centers.
+  vec2 pixel = uv * uResolution;
+  vec2 quantized = floor(pixel / blockSize) * blockSize + blockSize * 0.5;
+  vec2 quantUv = quantized / uResolution;
+
+  // Crossfade concentrated in the middle 40% when pixelation is heaviest.
+  float mixW = smoothstep(0.3, 0.7, uProgress);
+  return mix(getFromColor(quantUv), getToColor(quantUv), mixW);
+}
+`,
+});

package/src/transitions/polka-dots-curtain.ts

@@ -0,0 +1,46 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Radial dot-grid reveal: every cell of an N×N grid contains a dot that
+ * grows to cover its cell, with cells near the center revealing first.
+ * Stylized but kept premium by softening the dot edge with smoothstep
+ * and bounding maxDotRadius so each dot fully covers its cell at the
+ * end (no leftover background between dots).
+ */
+export const polkaDotsCurtain = defineTransition({
+  name: "polka-dots-curtain",
+  defaults: {
+    dots: 15,
+    center: [0.5, 0.5],
+    softness: 0.05,
+  },
+  glsl: `
+uniform float uDots;
+uniform vec2 uCenter;
+uniform float uSoftness;
+
+vec4 transition(vec2 uv) {
+  // dots=0 produces degenerate cellPos math (uv*0=0, all pixels in same cell);
+  // floor at 1. Clamp here so the transition is reliable regardless of caller input.
+  float dots = max(uDots, 1.0);
+  vec2 cellPos = fract(uv * dots);
+  float dotDist = distance(cellPos, vec2(0.5));
+  float distToCenter = distance(uv, uCenter);
+
+  // Per-cell ignition time: cells near uCenter reveal first.
+  float cellRevealTime = distToCenter / 1.4142136;
+  float window = 0.6;
+  float start = cellRevealTime * (1.0 - window);
+  float localP = clamp((uProgress - start) / max(window, 0.0001), 0.0, 1.0);
+
+  // Dot radius grows from -softness (off) to maxDotRadius+softness (covers
+  // cell corners cleanly). 0.85 > sqrt(2)/2 so corners are guaranteed inside.
+  float maxDotRadius = 0.85;
+  float radius = localP * (maxDotRadius + 2.0 * uSoftness) - uSoftness;
+
+  float w = 1.0 - smoothstep(radius - uSoftness, radius + uSoftness, dotDist);
+
+  return mix(getFromColor(uv), getToColor(uv), w);
+}
+`,
+});

package/src/transitions/polygon-flip.ts

@@ -0,0 +1,97 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Subdivided plane of square tiles. Each tile flips 180° around a
+ * horizontal axis through its centre, staggered by a diagonal wavefront
+ * so the flip sweeps top-left → bottom-right with per-tile jitter.
+ *
+ * Because a tile (quad) is self-symmetric under 180° horizontal flip,
+ * its canvas footprint is invariant across the rotation — no "screwed
+ * rect" overlap with neighbours. The two triangles that compose each
+ * tile share the same per-quad centroid, so they flip together.
+ *
+ * Front face (angle 0 → π/2) samples `from` at the tile's own uv —
+ * source content rides on the flipping card. Back face (angle π/2 → π)
+ * samples `to` at gl_FragCoord-based screen uv — destination stays
+ * pinned to the canvas, so at progress=1 every pixel is exactly to.
+ *
+ * Instance 0 is a back plane at z=0.9 cross-fading from → to; it fills
+ * the thin moments when a tile is edge-on so the full-frame rule holds.
+ *
+ * Endpoints: progress 0 → all tiles flat, front-facing, sampling from
+ * at aUv = pixel-pure from. Progress 1 → all tiles flat-mirrored (tile
+ * is self-symmetric), back-facing, sampling to at screen uv = pixel-
+ * pure to.
+ */
+export const polygonFlip = defineTransition({
+  name: "polygon-flip",
+  mesh: { subdivisions: [24, 14], instances: 2 },
+  defaults: {
+    rim: 0.25,
+  },
+  vertex: `
+out float vFlip;
+flat out int vInstance;
+
+#define PI 3.14159265359
+
+void main() {
+  vInstance = gl_InstanceID;
+  vUv = aUv;
+
+  if (gl_InstanceID == 0) {
+    gl_Position = vec4(aPosition, 0.9, 1.0);
+    vFlip = 0.0;
+    return;
+  }
+
+  // Diagonal wavefront top-left → bottom-right, plus a strong per-tile
+  // jitter so neighbours don't all finish together. aCentroid is per-
+  // quad (same for all 6 vertices of a tile) so the whole tile flips
+  // as one unit.
+  float waveX = (aCentroid.x + 1.0) * 0.5;
+  float waveY = 1.0 - (aCentroid.y + 1.0) * 0.5;  // top → bottom
+  float wave = waveX * 0.55 + waveY * 0.35 + (aOffset - 0.5) * 0.35;
+  wave = clamp(wave, 0.0, 1.0);
+
+  float window = 0.22;
+  float start = wave * (1.0 - window);
+  float t = smoothstep(start, start + window, uProgress);
+  vFlip = t;
+
+  float angle = t * PI;
+  float c = cos(angle);
+  float s = sin(angle);
+
+  vec2 p = aPosition - aCentroid;
+  vec3 q = vec3(p.x, p.y * c, p.y * s);
+  q.xy += aCentroid;
+
+  // Slight z-bias forward of the back plane; in-plane rotation produces
+  // a small depth spread that helps adjacent tiles resolve cleanly.
+  gl_Position = vec4(q.x, q.y, q.z * 0.4 + 0.05, 1.0);
+}
+`,
+  glsl: `
+in float vFlip;
+flat in int vInstance;
+uniform float uRim;
+
+vec4 transition(vec2 uv) {
+  if (vInstance == 0) {
+    return mix(getFromColor(uv), getToColor(uv), smoothstep(0.0, 1.0, uProgress));
+  }
+
+  vec2 screenUv = gl_FragCoord.xy / uResolution;
+  vec4 col = gl_FrontFacing ? getFromColor(uv) : getToColor(screenUv);
+
+  // Subtle rim darkening across the flip window — tiles read as
+  // tilted cards catching light, without the hard wireframe look
+  // that fwidth(bary) edge highlights produce.
+  float amt = 4.0 * vFlip * (1.0 - vFlip);
+  col.rgb *= 1.0 - amt * uRim;
+
+  return col;
+}
+`,
+});

package/src/transitions/portal-dive.ts

@@ -0,0 +1,83 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Polar-coordinate portal. A circular reveal front sweeps from the centre
+ * outward, and around the front a narrow radial band swirls + magnifies
+ * the sampled content to evoke a tunnel mouth. Swirl and magnification
+ * fall off both radially (gaussian band around the reveal front) and
+ * temporally (zero at progress 0 and 1), which keeps every sample in
+ * bounds — no clamp streaks, no empty frame regions.
+ *
+ * Endpoints: at progress 0/1 the envelope is zero so the sample UV is
+ * identity, and the reveal edge sits well outside the frame on both
+ * sides, so output is pixel-pure from/to.
+ */
+export const portalDive = defineTransition({
+  name: "portal-dive",
+  defaults: {
+    twist: 3.14159,
+    depth: 1.0,
+    reflection: 0.0,
+  },
+  glsl: `
+uniform float uTwist;
+uniform float uDepth;
+uniform float uReflection;
+
+vec4 transition(vec2 uv) {
+  float aspect = uResolution.x / uResolution.y;
+  vec2 c = vec2(0.5);
+  vec2 aDelta = vec2((uv.x - c.x) * aspect, uv.y - c.y);
+  float r = length(aDelta);
+  float theta = atan(aDelta.y, aDelta.x);
+  float maxR = sqrt(aspect * aspect * 0.25 + 0.25);
+
+  // Portal front position: negative at progress=0, past the farthest
+  // corner at progress=1, for any aspect ratio.
+  float portalR = mix(-0.15, maxR + 0.15, uProgress);
+
+  // Strength of distortion: gaussian band around the portal front,
+  // zero at progress 0/1. Both falloffs together guarantee sample UVs
+  // stay in-bounds everywhere (keeps clamp streaks out).
+  float bandWidth = 0.25;
+  float band = exp(-pow((r - portalR) / bandWidth, 2.0));
+  float envelope = 4.0 * uProgress * (1.0 - uProgress);
+  float strength = band * envelope;
+
+  // Swirl: rotate sample direction around centre.
+  float swirlAngle = strength * uTwist;
+  float newTheta = theta + swirlAngle;
+
+  // Inward pull: sample from a slightly smaller radius so content appears
+  // to be drawn toward the portal mouth (magnification = depth feel).
+  // Radius only ever DECREASES, so a pixel in bounds stays in bounds.
+  float pulledR = r * (1.0 - strength * uDepth * 0.3);
+
+  vec2 newAD = vec2(cos(newTheta), sin(newTheta)) * pulledR;
+  vec2 sampleUv = c + vec2(newAD.x / aspect, newAD.y);
+  // Defensive clamp — should be a no-op given the analysis above.
+  sampleUv = clamp(sampleUv, 0.0, 1.0);
+
+  vec4 fromColor = getFromColor(sampleUv);
+  vec4 toColor = getToColor(sampleUv);
+
+  // Soft radial reveal: centre crosses to to first, expanding outward.
+  float fade = smoothstep(portalR - 0.08, portalR + 0.08, r);
+  vec4 result = mix(toColor, fromColor, fade);
+
+  // Env glint at the tunnel mouth: use the radial direction as a
+  // surface-normal-like lookup into the env map, so the rim reads as a
+  // curved glass lip catching reflections. Gated by strength (= band *
+  // envelope), which is already zero at endpoints and away from the
+  // tunnel mouth — clean endpoints, no global tint bleed.
+  if (uReflection > 0.0) {
+    vec2 nDir = r > 1e-4 ? aDelta / r : vec2(0.0);
+    vec2 envUv = vec2(0.5 + 0.5 * nDir.x, 0.5 - 0.5 * nDir.y);
+    vec3 envColor = getEnvironment(envUv).rgb;
+    result.rgb = mix(result.rgb, envColor, strength * uReflection);
+  }
+
+  return result;
+}
+`,
+});

package/src/transitions/prism-split.ts

@@ -0,0 +1,52 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Directional RGB chromatic split. Like looking through a prism along a
+ * fixed axis: red and blue channels separate along `direction` while
+ * green stays put, then recombine on the to-image. Distinct from
+ * chromatic-pulse (which is radial outward from center).
+ */
+export const prismSplit = defineTransition({
+  name: "prism-split",
+  defaults: {
+    direction: [1, 0],
+    intensity: 0.04,
+    softness: 0.2,
+  },
+  glsl: `
+uniform vec2 uDirection;
+uniform float uIntensity;
+uniform float uSoftness;
+
+vec4 transition(vec2 uv) {
+  vec2 d = normalize(uDirection);
+  float env = 4.0 * uProgress * (1.0 - uProgress);
+  // Cap the per-channel split. Past ~0.07 the R/B samples come from
+  // unrelated parts of the scene and edge clamping turns the offsets into
+  // colored stripes — no longer reads as chromatic aberration. Hard-clamp
+  // here so the transition is reliable regardless of caller input.
+  float split = env * min(uIntensity, 0.07);
+
+  vec2 offR = clamp(uv + d * split, 0.0, 1.0);
+  vec2 offB = clamp(uv - d * split, 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
+  );
+
+  // Crossfade width controlled by softness: 0.7 → fade across middle 70%
+  // of progress (range [0.15, 0.85]); higher = gentler, lower = punchier.
+  float fadeHalf = clamp(uSoftness, 0.05, 0.95) * 0.5;
+  float mixW = smoothstep(0.5 - fadeHalf, 0.5 + fadeHalf, uProgress);
+  vec3 rgb = mix(fromRGB, toRGB, mixW);
+  return vec4(rgb, 1.0);
+}
+`,
+});

package/src/transitions/push.ts

@@ -0,0 +1,34 @@
+import { defineTransition } from "./define.js";
+
+export const push = defineTransition({
+  name: "push",
+  defaults: {
+    direction: [1, 0],
+  },
+  glsl: `
+uniform vec2 uDirection;
+
+// Snap a direction vector to the nearest axis-aligned unit (Right/Left/Down/Up).
+// Translation transitions only look right axis-aligned; diagonal inputs leave
+// triangular gaps at corners. Snapping in-shader keeps the visual reliable
+// regardless of caller input, so the UI's axis-only picker matches.
+vec2 snapAxis(vec2 v) {
+  vec2 d = normalize(v);
+  return abs(d.x) > abs(d.y) ? vec2(sign(d.x), 0.0) : vec2(0.0, sign(d.y));
+}
+
+vec4 transition(vec2 uv) {
+  vec2 d = snapAxis(uDirection);
+  // Both images scroll together in direction -d over time.
+  // At progress=0: from fills the frame; to is at +d offset (off-screen).
+  // At progress=1: to fills the frame; from is at -d offset (off-screen).
+  vec2 fromUv = uv + d * uProgress;
+  vec2 toUv = uv - d * (1.0 - uProgress);
+
+  bool fromVisible = fromUv.x >= 0.0 && fromUv.x <= 1.0
+                  && fromUv.y >= 0.0 && fromUv.y <= 1.0;
+  if (fromVisible) return getFromColor(fromUv);
+  return getToColor(toUv);
+}
+`,
+});

package/src/transitions/radial-reveal.ts

@@ -0,0 +1,31 @@
+import { defineTransition } from "./define.js";
+
+export const radialReveal = defineTransition({
+  name: "radial-reveal",
+  defaults: {
+    center: [0.5, 0.5],
+    softness: 0.05,
+  },
+  glsl: `
+uniform vec2 uCenter;
+uniform float uSoftness;
+
+vec4 transition(vec2 uv) {
+  // Measure distance in screen (pixel) space so the reveal stays a true circle
+  // on non-square canvases.
+  vec2 pixel = uv * uResolution;
+  vec2 pixelCenter = uCenter * uResolution;
+
+  float maxDist = max(
+    max(length(pixelCenter), length(pixelCenter - vec2(uResolution.x, 0.0))),
+    max(length(pixelCenter - vec2(0.0, uResolution.y)), length(pixelCenter - uResolution))
+  );
+  float dist = length(pixel - pixelCenter) / maxDist;
+
+  float radius = uProgress * (1.0 + 2.0 * uSoftness) - uSoftness;
+  float w = smoothstep(radius - uSoftness, radius + uSoftness, dist);
+
+  return mix(getToColor(uv), getFromColor(uv), w);
+}
+`,
+});

package/src/transitions/ripple-wave.ts

@@ -0,0 +1,135 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * A water-like ripple emanates from a source point. The mesh deforms
+ * in z so the wave has real geometric presence (depth, lighting), but
+ * the wave shape, surface normal, and refraction are all recomputed
+ * per-fragment — so the refraction stays smooth even at high amplitude
+ * regardless of mesh subdivision. No faceting, no interpolation
+ * crystalline artifacts.
+ *
+ * Wave profile is asymmetric around the travelling front: sharp cut-
+ * off ahead (no pre-wave ripple) and moderate Gaussian decay behind
+ * (one dominant leading ring followed by a fading secondary ring).
+ * Refraction shifts the sample uv along the in-plane surface normal,
+ * so the image visibly bends through the water. A tight specular
+ * highlight adds a crest sparkle.
+ *
+ * Endpoints: envelope = 4·p·(1-p) gates z, refraction, lighting and
+ * specular all to zero at progress 0 and 1. The mask is pinned to
+ * saturated 0 and 1 respectively — pixel-pure endpoints.
+ */
+export const rippleWave = defineTransition({
+  name: "ripple-wave",
+  mesh: { subdivisions: [48, 48], instances: 1 },
+  defaults: {
+    amplitude: 0.1,
+    source: [0.5, 0.5] as const,
+  },
+  vertex: `
+uniform float uAmplitude;
+uniform vec2 uSource;
+
+out vec2 vClipPos;
+
+#define PI 3.14159265359
+#define WAVELENGTH 0.35
+#define MAX_R 3.0
+#define TRANSITION_WIDTH 0.03
+
+void main() {
+  vUv = aUv;
+  vClipPos = aPosition;
+
+  // Mesh still deforms in z for real 3D presence; fragment will do
+  // the smooth per-pixel wave. Both use the same analytic wave.
+  vec2 sourceClip = uSource * 2.0 - 1.0;
+  float r = distance(aPosition, sourceClip);
+  float frontR = mix(
+    -TRANSITION_WIDTH,
+    MAX_R + TRANSITION_WIDTH,
+    uProgress
+  );
+  float phase = (r - frontR) / WAVELENGTH;
+  float k = mix(0.5, 4.0, step(0.0, phase));
+  float decay = exp(-phase * phase * k);
+  float envelope = 4.0 * uProgress * (1.0 - uProgress);
+  float wave = sin(phase * 2.0 * PI) * decay;
+  float z = uAmplitude * envelope * wave;
+
+  gl_Position = vec4(aPosition, -z, 1.0);
+}
+`,
+  glsl: `
+uniform float uAmplitude;
+uniform vec2 uSource;
+
+in vec2 vClipPos;
+
+#define PI 3.14159265359
+#define WAVELENGTH 0.35
+#define MAX_R 3.0
+#define TRANSITION_WIDTH 0.03
+
+vec4 transition(vec2 uv) {
+  vec2 sourceClip = uSource * 2.0 - 1.0;
+  vec2 toSource = vClipPos - sourceClip;
+  float r = length(toSource);
+  vec2 radialDir = r > 1e-5 ? toSource / r : vec2(0.0);
+
+  float frontR = mix(
+    -TRANSITION_WIDTH,
+    MAX_R + TRANSITION_WIDTH,
+    uProgress
+  );
+  float phase = (r - frontR) / WAVELENGTH;
+
+  // Asymmetric decay: sharp ahead of front (k=4, no pre-wave), moderate
+  // behind (k=0.5, one dominant ring + soft fading second ring).
+  float k = mix(0.5, 4.0, step(0.0, phase));
+  float decay = exp(-phase * phase * k);
+  float envelope = 4.0 * uProgress * (1.0 - uProgress);
+  float sinP = sin(phase * 2.0 * PI);
+  float cosP = cos(phase * 2.0 * PI);
+
+  // d(wave)/d(phase) = 2π·cos·decay − 2·phase·k·sin·decay
+  float dWave = decay * (2.0 * PI * cosP - 2.0 * phase * k * sinP);
+  float dzdr = uAmplitude * envelope * dWave / WAVELENGTH;
+
+  vec3 normal = normalize(vec3(-dzdr * radialDir, 1.0));
+
+  float mask = smoothstep(
+    -TRANSITION_WIDTH,
+    TRANSITION_WIDTH,
+    frontR - r
+  );
+
+  // Refraction: gentle in-plane offset, clamped so high amplitudes
+  // don't generate wild UV jumps that would moire through even mipmapped
+  // trilinear sampling.
+  vec2 refractOffset = normal.xy * 0.22;
+  refractOffset = clamp(refractOffset, vec2(-0.08), vec2(0.08));
+  vec2 sampleUv = clamp(uv + refractOffset, 0.0, 1.0);
+
+  // Diffuse lighting referenced so flat = 1.0 exactly.
+  vec3 lightDir = normalize(vec3(0.3, 0.5, -1.0));
+  float directional = dot(normal, -lightDir);
+  float flatDot = -lightDir.z;
+  float rippleGain = (directional - flatDot) * 0.6;
+  float vLight = clamp(1.0 + rippleGain * envelope, 0.6, 1.35);
+
+  // Tight specular highlight on the crest — zero at endpoints (envelope),
+  // zero on flat water (normal parallel to z).
+  vec3 refl = reflect(lightDir, normal);
+  vec3 viewDir = vec3(0.0, 0.0, 1.0);
+  float spec = pow(max(dot(refl, viewDir), 0.0), 48.0);
+  float specBase = pow(max(dot(vec3(0, 0, 1), -lightDir), 0.0), 48.0);
+  float specGain = max(spec - specBase, 0.0) * envelope * 0.7;
+
+  vec3 fromCol = getFromColor(sampleUv).rgb;
+  vec3 toCol = getToColor(sampleUv).rgb;
+  vec3 col = mix(fromCol, toCol, mask) * vLight + vec3(specGain);
+  return vec4(col, 1.0);
+}
+`,
+});

package/src/transitions/ripple.ts

@@ -0,0 +1,43 @@
+import { defineTransition } from "./define.js";
+
+export const ripple = defineTransition({
+  name: "ripple",
+  defaults: {
+    center: [0.5, 0.5],
+    amplitude: 0.03,
+    frequency: 6,
+    speed: 8,
+  },
+  glsl: `
+uniform vec2 uCenter;
+uniform float uAmplitude;
+uniform float uFrequency;
+uniform float uSpeed;
+
+const float TWO_PI = 6.2831853;
+
+vec4 transition(vec2 uv) {
+  vec2 delta = uv - uCenter;
+  float dist = length(delta);
+  vec2 dir = dist > 0.0001 ? delta / dist : vec2(1.0, 0.0);
+
+  // Velocity-scaled envelope: zero at endpoints, peak at midpoint.
+  float env = 4.0 * uProgress * (1.0 - uProgress);
+
+  // Radial sinusoid traveling outward as progress grows.
+  float phase = dist * uFrequency * TWO_PI - uProgress * uSpeed;
+  float wave = sin(phase);
+
+  // From pushes outward with the wave; to pulls inward (opposite sign).
+  vec2 displacement = dir * wave * uAmplitude * env;
+
+  vec4 fromColor = getFromColor(clamp(uv + displacement, 0.0, 1.0));
+  vec4 toColor = getToColor(clamp(uv - displacement, 0.0, 1.0));
+
+  // Crossfade concentrated in the middle 40%, so both images are ripple-warped
+  // throughout the overlap region.
+  float mixW = smoothstep(0.3, 0.7, uProgress);
+  return mix(fromColor, toColor, mixW);
+}
+`,
+});

package/src/transitions/shape-reveal.ts

@@ -0,0 +1,53 @@
+import { defineTransition } from "./define.js";
+
+/**
+ * Geometric shape reveal from a center point. `sides` controls the shape:
+ * 3 = triangle, 4 = diamond (with rotation 45°), 5 = pentagon, 6 = hexagon,
+ * 8 = octagon, 12 = dodecagon, 20+ approaches a circle.
+ */
+export const shapeReveal = defineTransition({
+  name: "shape-reveal",
+  defaults: {
+    center: [0.5, 0.5],
+    sides: 6,
+    rotation: 0,
+    softness: 0.05,
+  },
+  glsl: `
+uniform vec2 uCenter;
+uniform float uSides;
+uniform float uRotation;
+uniform float uSoftness;
+
+const float TWO_PI = 6.2831853;
+
+vec4 transition(vec2 uv) {
+  // Work in screen pixel space so the polygon is geometrically regular
+  // regardless of canvas aspect ratio.
+  vec2 pixel = uv * uResolution;
+  vec2 pixelCenter = uCenter * uResolution;
+  vec2 delta = pixel - pixelCenter;
+
+  float slice = TWO_PI / max(uSides, 3.0);
+  float halfSlice = slice * 0.5;
+
+  // Fold the pixel's angle into one polygon sector; distance to the sector's
+  // edge midpoint direction gives the regular-polygon distance from center.
+  float angle = atan(delta.y, delta.x) - uRotation;
+  float folded = mod(angle + halfSlice, slice) - halfSlice;
+
+  // Normalize so canvas corners map to ≤ 1 (guaranteed by the max-corner
+  // division, since cos(folded) ≤ 1).
+  float maxDist = max(
+    max(length(pixelCenter), length(pixelCenter - vec2(uResolution.x, 0.0))),
+    max(length(pixelCenter - vec2(0.0, uResolution.y)), length(pixelCenter - uResolution))
+  );
+  float dist = length(delta) * cos(folded) / max(maxDist, 0.0001);
+
+  float radius = uProgress * (1.0 + 2.0 * uSoftness) - uSoftness;
+  float w = smoothstep(radius - uSoftness, radius + uSoftness, dist);
+
+  return mix(getToColor(uv), getFromColor(uv), w);
+}
+`,
+});