@pixerate/flair 0.25.0 → 0.27.0

package/dist/{chunk-PYDN5G2P.js → chunk-DBNSI4MF.js}

@@ -1558,6 +1558,167 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
     { name: "Dense", values: { uLanes: 26, uDensity: 1, uWidth: 0.12, uPulses: 0.8 } }
   ]
 };
+var memphisPattern = {
+  kind: "shader",
+  id: "memphis-pattern",
+  name: "Memphis pattern",
+  description: "An 80s Memphis-design field of squiggles, zigzags, triangles, rings, dots and confetti, bobbing, drifting and boiling like hand-drawn ink.",
+  category: "pattern",
+  tags: ["background", "retro", "80s", "playful", "confetti"],
+  loop: 8,
+  source: glsl(
+    `// Memphis pattern: scattered flat-colour shapes that bob, drift and boil.
+uniform vec3 uBackground; // @control color default=#FFF3DC label="Background"
+uniform vec3 uInkA;       // @control color default=#FF4FA3 label="Ink A"
+uniform vec3 uInkB;       // @control color default=#00B3C7 label="Ink B"
+uniform vec3 uInkC;       // @control color default=#FFC23C label="Ink C"
+uniform vec3 uInkD;       // @control color default=#1B1B1B label="Ink D"
+uniform float uDensity;   // @control min=0 max=1 default=0.7 label="Density"
+uniform float uScale;     // @control min=2 max=20 default=7 label="Shapes across"
+uniform float uDrift;     // @control min=0 max=1 default=0.3 label="Drift"
+uniform float uWobble;    // @control min=0 max=1 default=0.5 label="Wobble"
+uniform float uWeight;    // @control min=0.02 max=0.16 default=0.07 label="Line weight"`,
+    HASH,
+    NOISE,
+    ROTATE,
+    `#define TAU 6.28318
+#define LOOP 8.0
+
+float segDist(vec2 p, vec2 a, vec2 b) {
+  vec2 pa = p - a;
+  vec2 ba = b - a;
+  float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
+  return length(pa - ba * h);
+}
+
+float triDist(vec2 p, float r) {
+  const float k = 1.7320508;
+  p.x = abs(p.x) - r;
+  p.y = p.y + r / k;
+  if (p.x + k * p.y > 0.0) p = vec2(p.x - k * p.y, -k * p.x - p.y) / 2.0;
+  p.x -= clamp(p.x, -2.0 * r, 0.0);
+  return -length(p) * sign(p.y);
+}
+
+// Distance to a sine (or zigzag) stroke centred on the origin, halfLen long.
+float waveDist(vec2 q, float amp, float freq, bool zig, float halfLen) {
+  float x = clamp(q.x, -halfLen, halfLen);
+  float y;
+  float slope;
+  if (zig) {
+    float f = fract(x * freq + 0.25);
+    y = amp * (abs(f - 0.5) * 4.0 - 1.0);
+    slope = 4.0 * amp * freq;
+  } else {
+    y = amp * sin(x * freq * TAU);
+    slope = amp * freq * TAU * cos(x * freq * TAU);
+  }
+  return length(vec2(q.x - x, (q.y - y) / sqrt(1.0 + slope * slope)));
+}
+
+float shapeDist(int kind, vec2 q, float w) {
+  if (kind == 0) return waveDist(q, 0.08, 2.2, false, 0.36) - w;
+  if (kind == 1) return waveDist(q, 0.08, 2.5, true, 0.34) - w;
+  if (kind == 2) return triDist(q, 0.2);
+  if (kind == 3) return abs(length(q) - 0.16) - w;
+  if (kind == 4) return length(q) - 0.1;
+  if (kind == 5) return segDist(q, vec2(-0.13, 0.0), vec2(0.13, 0.0)) - w;
+  vec2 g = q - clamp(round(q / 0.11), -1.0, 1.0) * 0.11;
+  return length(g) - 0.028;
+}
+
+vec3 ink(float h) {
+  if (h < 0.25) return uInkA;
+  if (h < 0.5) return uInkB;
+  if (h < 0.75) return uInkC;
+  return uInkD;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = uScale / iResolution.y;
+  float t = TAU * iTime / LOOP;
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) * px;
+  p += uDrift * vec2(2.0 * cos(t), sin(2.0 * t));
+  // Boil: the line wobble jumps six times a second, like redrawn frames.
+  float frame = mod(floor(iTime * 6.0), LOOP * 6.0);
+  vec2 n = vec2(vnoise(p * 3.0 + frame * 7.13), vnoise(p * 3.0 + frame * 3.71 + 19.0)) - 0.5;
+  p += n * uWobble * 0.07;
+
+  vec3 col = uBackground;
+  vec2 id0 = floor(p);
+  for (int j = -1; j <= 1; j++) {
+    for (int i = -1; i <= 1; i++) {
+      vec2 id = id0 + vec2(float(i), float(j));
+      if (hash12(id) > uDensity) continue;
+      float ph = hash12(id + 11.1) * TAU;
+      vec2 c = id + 0.5 + (hash22(id + 3.7) - 0.5) * 0.6;
+      c.y += 0.06 * sin(t * 2.0 + ph);
+      float ang = hash12(id + 5.3) * TAU + 0.35 * sin(t + ph);
+      float sz = 0.8 + 0.5 * hash12(id + 8.8);
+      vec2 q = rot(ang) * (p - c) / sz;
+      int kind = min(int(hash12(id + 2.2) * 7.0), 6);
+      float d = shapeDist(kind, q, uWeight * 0.5 / sz) * sz;
+      float cover = 1.0 - smoothstep(-0.75 * px, 0.75 * px, d);
+      col = mix(col, ink(hash12(id + 9.9)), cover);
+    }
+  }
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Saved by the bell", values: {} },
+    { name: "Pastel", values: { uBackground: [0.97, 0.95, 1], uInkA: [1, 0.7, 0.8], uInkB: [0.62, 0.85, 0.95], uInkC: [1, 0.87, 0.55], uInkD: [0.72, 0.65, 0.95], uWobble: 0.3 } },
+    { name: "After dark", values: { uBackground: [0.07, 0.06, 0.14], uInkA: [1, 0.25, 0.65], uInkB: [0.15, 0.95, 0.9], uInkC: [1, 0.85, 0.2], uInkD: [0.98, 0.98, 0.98] } },
+    { name: "Sparse", values: { uDensity: 0.35, uScale: 5, uDrift: 0.15, uWeight: 0.05 } }
+  ]
+};
+var chevronTunnel = {
+  kind: "shader",
+  id: "chevron-tunnel",
+  name: "Chevron tunnel",
+  description: "Two-tone hazard chevrons radiating from a centre point and streaming outward like a tunnel, behind a title card.",
+  category: "pattern",
+  tags: ["background", "hazard", "warning", "tunnel", "title", "loop"],
+  loop: 1,
+  source: glsl(
+    `// Chevron tunnel: hazard chevrons streaming out of (or into) a centre point.
+uniform vec3 uColorA;     // @control color default=#FACC15 label="Colour A"
+uniform vec3 uColorB;     // @control color default=#111111 label="Colour B"
+uniform int uCount;       // @control min=2 max=16 default=8 label="Chevrons around"
+uniform float uFrequency; // @control min=0.5 max=12 default=3 label="Stripe frequency"
+uniform float uSpeed;     // @control min=0 max=4 default=1 label="Speed"
+uniform bool uInward;     // @control default=false label="Stream inward"
+uniform vec2 uCentre;     // @control min=0 max=1 default=0.5,0.5 label="Centre"
+uniform float uAngle;     // @control min=-180 max=180 default=0 label="Angle (\xB0)"
+uniform float uTwist;     // @control min=-3 max=3 default=0 label="Twist"
+uniform float uDepth;     // @control min=0 max=3 default=1 label="Chevron point"
+uniform float uSoft;      // @control min=0 max=1 default=0 label="Softness"
+uniform float uVignette;  // @control min=0 max=1 default=0.35 label="Vignette"`,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - uCentre * iResolution.xy) / iResolution.y;
+  float lr = log(max(length(p), 1e-4));
+  float a = atan(p.y, p.x) - radians(uAngle) - uTwist * lr;
+  // 0 down the middle of each chevron, 1 at its edges.
+  float side = abs(fract(a * float(uCount) / 6.28318) - 0.5) * 2.0;
+  float dir = uInward ? 1.0 : -1.0;
+  // Log radius gives tunnel perspective; chevrons point the way they travel.
+  float s = lr * uFrequency - dir * uDepth * side + dir * iTime * uSpeed;
+  float tri = abs(fract(s) - 0.5);
+  float e = max(fwidth(s) * 0.75, uSoft * 0.25) + 1e-4;
+  float m = smoothstep(0.25 - e, 0.25 + e, tri);
+  vec3 col = mix(uColorA, uColorB, m);
+  vec2 uv = fragCoord / iResolution.xy - 0.5;
+  col *= 1.0 - uVignette * smoothstep(0.1, 0.75, dot(uv, uv) * 2.0);
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Hazard", values: {} },
+    { name: "Red alert", values: { uColorA: [0.95, 0.12, 0.15], uColorB: [0.98, 0.96, 0.92], uCount: 6, uSpeed: 1.5, uVignette: 0.5 } },
+    { name: "Rave warp", values: { uColorA: [1, 0.2, 0.7], uColorB: [0.1, 0.9, 1], uTwist: 1.2, uFrequency: 4, uSpeed: 2, uCount: 10 } },
+    { name: "Suck in", values: { uInward: true, uDepth: 1.6, uCount: 4, uSoft: 0.1 } }
+  ]
+};
 
 // src/catalog/interaction.ts
 var r1 = (v) => Math.round(v * 10) / 10;
@@ -2065,6 +2226,113 @@ var pressButton = {
     ]
   }
 };
+var TOAST = { x: 92, y: 24, w: 252, h: 68 };
+var TOAST_OFF = "translate(300 0)";
+var TOAST_IN = 520;
+var toastAt = (x) => `translate(${x} 0)`;
+var BADGE_X = TOAST.x + 32;
+var BADGE_Y = TOAST.y + 34;
+var toastNotification = {
+  kind: "vector",
+  id: "toast-notification",
+  name: "Toast notification",
+  description: "A toast card that slides in from the top right with a slight overshoot, draws a tick in its badge as its timer bar runs down, then slides away by itself.",
+  category: "interaction",
+  tags: ["interactive", "ui", "click", "toast", "notification", "alert", "success", "feedback", "micro-interaction"],
+  trigger: "click",
+  hold: 600,
+  presets: [
+    { name: "Light", values: { background: [0.96, 0.97, 0.98], card: [1, 1, 1], ink: [0.07, 0.09, 0.15], accent: [0.09, 0.64, 0.29] } },
+    { name: "Indigo", values: { title: "Deploy complete", message: "Live on production in 42s", accent: [0.39, 0.4, 0.95] } }
+  ],
+  derived: (v) => {
+    const title = fit(v.title, 164, 15);
+    const message = fit(v.message, 164, 12.5);
+    const stay = Math.round(Math.min(5, Math.max(1, Number(v.duration) || 2.4)) * 1e3);
+    const leave = TOAST_IN + stay;
+    return { titleSize: title.size, titleLen: title.length, messageSize: message.size, messageLen: message.length, stay, leave, nudged: leave + 120, fade: leave + 300, gone: leave + 520 };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 360 200"><!-- {{title: text default='Key generated' label='Title'}} {{message: text default='Ready for remote calls' label='Message'}} {{duration: float min=1 max=5 default=2.4 step=0.1 label='Time on screen (s)'}} {{background: color default=#0B0F17 label='Background'}} {{card: color default=#171C27 label='Card'}} {{accent: color default=#22C55E label='Accent'}} {{ink: color default=#F3F4F6 label='Text colour'}} --><defs><clipPath id="toastClip"><rect x="${TOAST.x}" y="${TOAST.y}" width="${TOAST.w}" height="${TOAST.h}" rx="14"/></clipPath><filter id="toastShadow" x="-20%" y="-40%" width="140%" height="180%"><feGaussianBlur stdDeviation="8"/></filter></defs><rect width="360" height="200" fill="{{background}}"/><g fill="{{ink}}" fill-opacity="0.07"><circle cx="34" cy="34" r="9"/><rect x="50" y="29" width="64" height="10" rx="5"/><rect x="24" y="118" width="140" height="12" rx="6"/><rect x="24" y="142" width="312" height="8" rx="4"/><rect x="24" y="158" width="282" height="8" rx="4"/><rect x="24" y="174" width="220" height="8" rx="4"/></g><g id="toast" transform="${TOAST_OFF}" opacity="0"><rect x="${TOAST.x}" y="${TOAST.y + 8}" width="${TOAST.w}" height="${TOAST.h}" rx="14" fill="#000000" opacity="0.3" filter="url(#toastShadow)"/><rect x="${TOAST.x}" y="${TOAST.y}" width="${TOAST.w}" height="${TOAST.h}" rx="14" fill="{{card}}" stroke="{{ink}}" stroke-opacity="0.08"/><g id="badge" transform="${about(BADGE_X, BADGE_Y, 0)}"><circle id="halo" cx="${BADGE_X}" cy="${BADGE_Y}" r="15" fill="{{accent}}" opacity="0"/><circle cx="${BADGE_X}" cy="${BADGE_Y}" r="15" fill="{{accent}}"/><path id="tick" d="M${BADGE_X - 6.5} ${BADGE_Y + 0.5} L${BADGE_X - 2} ${BADGE_Y + 5} L${BADGE_X + 6.5} ${BADGE_Y - 4.5}" fill="none" stroke="{{card}}" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round" opacity="0"/></g><text x="${TOAST.x + 58}" y="${TOAST.y + 28}" textLength="{{titleLen}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS}" font-size="{{titleSize}}" font-weight="650" fill="{{ink}}">{{title}}</text><text x="${TOAST.x + 58}" y="${TOAST.y + 47}" textLength="{{messageLen}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS}" font-size="{{messageSize}}" font-weight="400" fill="{{ink}}" fill-opacity="0.62">{{message}}</text><path d="M324 36 L332 44 M332 36 L324 44" stroke="{{ink}}" stroke-opacity="0.35" stroke-width="1.6" stroke-linecap="round"/><rect id="timer" x="${TOAST.x}" y="${TOAST.y + TOAST.h - 4}" width="${TOAST.w}" height="4" fill="{{accent}}" clip-path="url(#toastClip)"/></g></svg>`,
+    animate: [
+      // One step that returns by itself: in past its place and back, a while on screen, then away right.
+      { id: "toast", step: 1, attrs: { transform: [TOAST_OFF, toastAt(-9)] }, ms: 340, ease: "out" },
+      { id: "toast", step: 1, attrs: { transform: [toastAt(-9), toastAt(0)] }, delay: 340, ms: 200, ease: "in-out" },
+      { id: "toast", step: 1, attrs: { opacity: [0, 1] }, ms: 160 },
+      // The badge pops, its tick draws on and a soft ring breathes out.
+      { id: "badge", step: 1, attrs: { transform: [about(BADGE_X, BADGE_Y, 0), about(BADGE_X, BADGE_Y, 1.18)] }, delay: 220, ms: 200, ease: "out" },
+      { id: "badge", step: 1, attrs: { transform: [about(BADGE_X, BADGE_Y, 1.18), about(BADGE_X, BADGE_Y, 1)] }, delay: 420, ms: 180, ease: "in-out" },
+      { id: "tick", step: 1, attrs: { opacity: [0, 1] }, delay: 400, ms: 40 },
+      { id: "tick", step: 1, draw: true, delay: 400, ms: 300, ease: "out" },
+      { id: "halo", step: 1, attrs: { r: [15, 26], opacity: [0.45, 0] }, delay: 440, ms: 650, ease: "out" },
+      // The timer runs down, then the card nudges left and slides off.
+      { id: "timer", step: 1, attrs: { width: [TOAST.w, 0] }, delay: TOAST_IN, ms: n("stay"), ease: "linear" },
+      { id: "toast", step: 1, attrs: { transform: [toastAt(0), toastAt(-6)] }, delay: n("leave"), ms: 120, ease: "out" },
+      { id: "toast", step: 1, attrs: { transform: [toastAt(-6), TOAST_OFF] }, delay: n("nudged"), ms: 380, ease: "in-out" },
+      { id: "toast", step: 1, attrs: { opacity: [1, 0] }, delay: n("fade"), ms: 200 },
+      // Out of sight, everything it flashed goes back for the next round.
+      snap("badge", "transform", about(BADGE_X, BADGE_Y, 0), n("gone")),
+      snap("tick", "opacity", 0, n("gone")),
+      { id: "tick", step: 1, draw: [0, 0], delay: n("gone"), ms: 0 },
+      snap("halo", "r", 15, n("gone")),
+      snap("halo", "opacity", 0.45, n("gone")),
+      snap("timer", "width", TOAST.w, n("gone"))
+    ]
+  }
+};
+var SLIDER = { x: 40, y: 90, w: 280 };
+var KNOB_FROM = r1(SLIDER.x + SLIDER.w * 0.14);
+var KNOB_TO = r1(SLIDER.x + SLIDER.w * 0.82);
+var knobAt = (x) => `translate(${r1(x)} ${SLIDER.y})`;
+var cursorAt = (x, y = SLIDER.y + 3) => `translate(${r1(x)} ${y})`;
+var CURSOR_REST = cursorAt(304, 138);
+var SCRUB_BACK = 2800;
+var sliderScrub = {
+  kind: "vector",
+  id: "slider-scrub",
+  name: "Slider scrub",
+  description: "A labelled slider whose knob a cursor grabs and drags along the track, the fill and value readout counting with it, settling with a small bounce before it glides back.",
+  category: "interaction",
+  tags: ["interactive", "ui", "click", "slider", "range", "input", "settings", "cursor", "micro-interaction"],
+  trigger: "click",
+  hold: 600,
+  presets: [
+    { name: "Light", values: { background: [1, 1, 1], track: [0.9, 0.91, 0.94], ink: [0.07, 0.09, 0.15], accent: [0.31, 0.27, 0.9] } },
+    { name: "Volume", values: { label: "Volume", from: 20, to: 85, accent: [0.96, 0.45, 0.2] } }
+  ],
+  derived: (v) => {
+    const { size, length } = fit(v.label, 200, 16);
+    return { size, length };
+  },
+  motion: (() => {
+    const move = (from, to, delay, ms, withCursor) => [
+      { id: "knob", step: 1, attrs: { transform: [knobAt(from), knobAt(to)] }, delay, ms, ease: "in-out" },
+      { id: "fill", step: 1, attrs: { width: [r1(from - SLIDER.x), r1(to - SLIDER.x)] }, delay, ms, ease: "in-out" },
+      ...withCursor ? [{ id: "cursor", step: 1, attrs: { transform: [cursorAt(from + 2), cursorAt(to + 2)] }, delay, ms, ease: "in-out" }] : []
+    ];
+    return {
+      svg: `<svg viewBox="0 0 360 160"><!-- {{label: text default='Number of results' label='Label'}} {{from: int min=0 max=99999 default=50 label='From value'}} {{to: int min=0 max=99999 default=306 label='To value'}} {{background: color default=#0B0F17 label='Background'}} {{accent: color default=#8B5CF6 label='Accent'}} {{track: color default=#272D3A label='Track'}} {{ink: color default=#F3F4F6 label='Text colour'}} --><rect width="360" height="160" fill="{{background}}"/><text x="${SLIDER.x}" y="58" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS}" font-size="{{size}}" font-weight="600" fill="{{ink}}">{{label}}</text><text id="value" x="${SLIDER.x + SLIDER.w}" y="58" text-anchor="end" font-family="${SANS}" font-size="16" font-weight="700" fill="{{accent}}">{{from}}</text><rect x="${SLIDER.x}" y="${SLIDER.y - 3}" width="${SLIDER.w}" height="6" rx="3" fill="{{track}}"/><rect id="fill" x="${SLIDER.x}" y="${SLIDER.y - 3}" width="${r1(KNOB_FROM - SLIDER.x)}" height="6" rx="3" fill="{{accent}}"/><g id="knob" transform="${knobAt(KNOB_FROM)}"><circle id="halo" r="11" fill="{{accent}}" opacity="0"/><circle cy="1.5" r="11" fill="#000000" opacity="0.2"/><circle id="dot" r="10" fill="#FFFFFF" stroke="{{accent}}" stroke-width="3"/></g><g id="cursor" transform="${CURSOR_REST}"><path d="M0 0 L0 17 L4.6 12.8 L7.8 19.6 L10.6 18.3 L7.5 11.7 L13.4 11.4 Z" fill="#FFFFFF" stroke="#111827" stroke-width="1.3" stroke-linejoin="round"/></g></svg>`,
+      animate: [
+        // One step that returns by itself: the cursor comes to the knob and grabs it.
+        { id: "cursor", step: 1, attrs: { transform: [CURSOR_REST, cursorAt(KNOB_FROM + 2)] }, ms: 420, ease: "in-out" },
+        { id: "dot", step: 1, attrs: { r: [10, 12] }, delay: 420, ms: 120, ease: "out" },
+        { id: "halo", step: 1, attrs: { r: [11, 20], opacity: [0, 0.22] }, delay: 420, ms: 160, ease: "out" },
+        // Dragged a touch past, let go, it springs back and settles as the value counts.
+        ...move(KNOB_FROM, KNOB_TO + 7, 540, 1e3, true),
+        { id: "value", step: 1, count: [n("from"), n("to")], delay: 540, ms: 1e3, ease: "in-out" },
+        { id: "dot", step: 1, attrs: { r: [12, 10] }, delay: 1540, ms: 160, ease: "out" },
+        { id: "halo", step: 1, attrs: { r: [20, 26], opacity: [0.22, 0] }, delay: 1540, ms: 260, ease: "out" },
+        snap("halo", "r", 11, 1900),
+        ...move(KNOB_TO + 7, KNOB_TO - 3, 1540, 170, false),
+        ...move(KNOB_TO - 3, KNOB_TO, 1710, 150, false),
+        // Back to where it began: the cursor leaves and the knob glides home.
+        { id: "cursor", step: 1, attrs: { transform: [cursorAt(KNOB_TO + 9), CURSOR_REST] }, delay: SCRUB_BACK, ms: 450, ease: "in-out" },
+        ...move(KNOB_TO, KNOB_FROM, SCRUB_BACK + 100, 600, false),
+        { id: "value", step: 1, count: [n("to"), n("from")], delay: SCRUB_BACK + 100, ms: 600, ease: "in-out" }
+      ]
+    };
+  })()
+};
 var interactionEffects = [
   likeButton,
   toggleSwitch,
@@ -2077,7 +2345,9 @@ var interactionEffects = [
   linkHover,
   buttonHoverFill,
   tooltipPop,
-  pressButton
+  pressButton,
+  toastNotification,
+  sliderScrub
 ];
 
 // src/catalog/splatter.ts
@@ -2708,7 +2978,87 @@ var washiTape = {
     ]
   }
 };
-var stickerEffects = [stickerSlap, stickerPeel, holoSticker, stickerSheet, stampBadge, washiTape];
+function sealOutline(points, sharp) {
+  const count = Math.max(6, Math.round(Number(points)));
+  if (sharp) return star(120, 120, 90, 79, count);
+  const samples = Math.max(112, count * 8);
+  return outline(
+    Array.from({ length: samples }, (_, k) => {
+      const a = k / samples * Math.PI * 2 - Math.PI / 2;
+      const rr = 88 * (0.93 + 0.07 * Math.cos(a * count + Math.PI / 2 * count));
+      return [120 + rr * Math.cos(a), 120 + rr * Math.sin(a)];
+    })
+  );
+}
+var SEAL_PULSES = [0.22, 0.68];
+var SEAL_BEAT = [
+  [0, 1],
+  [170, 1.12],
+  [320, 0.96],
+  [460, 1]
+];
+var SEAL_GLINT_MS = 560;
+var sealBadge = {
+  kind: "vector",
+  id: "seal-badge",
+  name: "Seal badge",
+  description: 'A scalloped seal sticker (a "NEW" or "UPDATE LIVE" price-tag burst) turning slowly under upright one- or two-line text, pulsing now and then as a glint sweeps across its face.',
+  category: "sticker",
+  tags: ["sticker", "seal", "badge", "burst", "price-tag", "label", "spin", "new", "loop"],
+  hold: 0,
+  presets: [
+    { name: "New", values: { top: "NEW", bottom: "", seal: [0.98, 0.8, 0.12], ink: [0.25, 0.13, 0.01], points: 16 } },
+    { name: "Sale", values: { top: "50%", bottom: "OFF", seal: [0.93, 0.16, 0.24], sharp: true, points: 28, turn: 8 } },
+    { name: "Mint", values: { top: "JUST", bottom: "LAUNCHED", seal: [0.2, 0.83, 0.6], ink: [0.03, 0.2, 0.14], background: [0.09, 0.1, 0.13], border: [0.95, 0.97, 0.96] } }
+  ],
+  derived: (v) => {
+    const period = Math.round(Number(v.turn) * 1e3);
+    const d = sealOutline(v.points, v.sharp);
+    const two = String(v.bottom).trim() !== "";
+    const top = fit2(v.top, two ? 118 : 124, two ? 36 : 46);
+    const bottom = two ? fit2(v.bottom, 104, 30) : { size: 0, length: 0 };
+    const gap = two ? 4 : 0;
+    const height = top.size + gap + bottom.size;
+    const topMid = 120 - height / 2 + top.size / 2;
+    const bottomMid = topMid + top.size / 2 + gap + bottom.size / 2;
+    const beats = Object.fromEntries(
+      SEAL_PULSES.flatMap((f, i) => {
+        const at3 = Math.round(period * f);
+        return [...SEAL_BEAT.map(([ms], j) => [`beat${i}_${j}`, at3 + ms]), [`glint${i}`, at3 + 60]];
+      })
+    );
+    return {
+      period,
+      d,
+      topSize: top.size,
+      topLength: top.length,
+      topBase: r13(topMid + top.size * 0.36),
+      bottomSize: Math.max(1, bottom.size),
+      bottomLength: Math.max(1, bottom.length),
+      bottomBase: r13(bottomMid + bottom.size * 0.36),
+      ...beats
+    };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 240 240"><!-- {{top: text default='UPDATE' label='Top line'}} {{bottom: text default='LIVE' label='Bottom line (may be empty)'}} {{background: color default=#F3EFE6 label='Background'}} {{seal: color default=#FF3D6E label='Seal'}} {{ink: color default=#FFFFFF label='Text colour'}} {{border: color default=#FFFFFF label='Border'}} {{points: int min=8 max=40 default=20 label='Points'}} {{sharp: bool default=false label='Sharp points'}} {{turn: float min=3 max=40 default=14 step=0.5 label='Spin (seconds per turn)'}} ${FONT} --><defs><filter id="sealBadgeSoft" x="-30%" y="-30%" width="160%" height="160%"><feGaussianBlur stdDeviation="5"/></filter>${gloss("sealBadgeGloss")}<linearGradient id="sealBadgeGlintFill" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#FFFFFF" stop-opacity="0"/><stop offset="0.5" stop-color="#FFFFFF" stop-opacity="0.65"/><stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/></linearGradient><clipPath id="sealBadgeClip"><path id="sealClipShape" d="{{d}}" transform="rotate(0 120 120)"/></clipPath></defs><rect width="240" height="240" fill="{{background}}"/><g id="sealPulse" transform="${pose(120, 120, 1, 0)}"><circle cx="120" cy="127" r="92" fill="#000000" opacity="0.28" filter="url(#sealBadgeSoft)"/><g id="sealSpin" transform="rotate(0 120 120)"><path d="{{d}}" fill="{{border}}" stroke="{{border}}" stroke-width="10" stroke-linejoin="round"/><path d="{{d}}" fill="{{seal}}"/><circle cx="120" cy="120" r="70" fill="none" stroke="{{ink}}" stroke-opacity="0.6" stroke-width="2" stroke-dasharray="1.5 5.5" stroke-linecap="round"/><circle cx="120" cy="120" r="63" fill="none" stroke="{{ink}}" stroke-opacity="0.3" stroke-width="1.2"/></g><g clip-path="url(#sealBadgeClip)"><rect width="240" height="240" fill="url(#sealBadgeGloss)"/><rect id="sealGlint" x="0" y="20" width="40" height="200" fill="url(#sealBadgeGlintFill)" transform="translate(-14 0) skewX(-20)"/></g><g font-family="{{font}}" font-weight="900" fill="{{ink}}" text-anchor="middle"><text x="120" y="{{topBase}}" textLength="{{topLength}}" lengthAdjust="spacingAndGlyphs" font-size="{{topSize}}">{{top}}</text><text x="120" y="{{bottomBase}}" textLength="{{bottomLength}}" lengthAdjust="spacingAndGlyphs" font-size="{{bottomSize}}">{{bottom}}</text></g></g></svg>`,
+    animate: [
+      // One whole turn a loop, the clip turning with it so the shine stays on the seal.
+      ...["sealSpin", "sealClipShape"].map((id) => ({ id, attrs: { transform: ["rotate(0 120 120)", "rotate(360 120 120)"] }, ms: n4("period"), ease: "linear" })),
+      // Now and then it pulses and a glint sweeps across.
+      ...SEAL_PULSES.flatMap((_, i) => [
+        ...SEAL_BEAT.slice(1).map(([at3, scale], j) => ({
+          id: "sealPulse",
+          attrs: { transform: [pose(120, 120, SEAL_BEAT[j][1], 0), pose(120, 120, scale, 0)] },
+          delay: n4(`beat${i}_${j}`),
+          ms: at3 - SEAL_BEAT[j][0],
+          ease: j === 0 ? "out" : "in-out"
+        })),
+        { id: "sealGlint", attrs: { transform: ["translate(-14 0) skewX(-20)", "translate(300 0) skewX(-20)"] }, delay: n4(`glint${i}`), ms: SEAL_GLINT_MS, ease: "in-out" }
+      ])
+    ]
+  }
+};
+var stickerEffects = [stickerSlap, stickerPeel, holoSticker, stickerSheet, stampBadge, washiTape, sealBadge];
 
 // src/catalog/trail.ts
 var r14 = (v) => {
@@ -3567,7 +3917,91 @@ var lineBoil = {
     }))
   }
 };
-var comicEffects = [soundEffect, speechBubble, fightCloud, dizzyStars, animeEmotes, cartoonPoof, lineBoil];
+var DB_X = 200;
+var DB_Y = 120;
+var DB_OUT = 2450;
+var DB_END = 2860;
+var DB_BOIL = 120;
+var DB_SEEDS = [3, 11, 19, 27];
+var DB_SHAPES = [
+  `<path d="M0 -7 L6.5 5 L-6.5 5 Z"/>`,
+  `<circle cx="0" cy="0" r="6"/>`,
+  `<path d="M-7 0 H7"/>`,
+  `<path d="M-11 1 q2.75 -7 5.5 0 t5.5 0 t5.5 0 t5.5 0"/>`,
+  `<path d="M-6.5 0 H6.5 M0 -6.5 V6.5"/>`,
+  `<path d="M-6 -3 H6 M-3.5 3.5 H3.5"/>`
+];
+var DB_DOODLES = Array.from({ length: 14 }, (_, k) => {
+  const a = -Math.PI / 2 + k / 14 * Math.PI * 2 + (rand(k + 200) - 0.5) * 0.3;
+  const reach = 1 + rand(k + 210) * 0.1;
+  return {
+    a,
+    x: DB_X + 152 * reach * Math.cos(a),
+    y: DB_Y + 96 * reach * Math.sin(a),
+    shape: (k * 7 + 3) % DB_SHAPES.length,
+    colour: ["doodleA", "doodleB", "doodleC"][k * 5 % 14 % 3],
+    turn: Math.round((rand(k + 220) - 0.5) * 80),
+    at: 110 + k * 5 % 14 * 42
+  };
+});
+var dbPose = (d, u, s, rot) => `translate(${r15(DB_X + (d.x - DB_X) * u)} ${r15(DB_Y + (d.y - DB_Y) * u)}) rotate(${r15(rot)}) scale(${r27(s)})`;
+var dbCard = (s, rot) => `translate(${DB_X} ${DB_Y}) rotate(${r15(rot)}) rotate({{tilt}}) scale(${r27(s)}) translate(${-DB_X} ${-DB_Y})`;
+var doodleBurst = {
+  kind: "vector",
+  id: "doodle-burst",
+  name: "Doodle burst",
+  description: "A tilted label card that pops in past its size while hand-drawn doodles (triangles, rings, dashes, squiggles and plus signs) burst out round it one after another, linger drifting and twinkling with a line boil, then shrink away and play again.",
+  category: "comic",
+  tags: ["cartoon", "comic", "doodle", "hand-drawn", "line-boil", "label", "burst", "announcement", "loop"],
+  hold: 340,
+  presets: [
+    { name: "Night", values: { background: [0.08, 0.09, 0.13], card: [0.98, 0.84, 0.2], ink: [0.04, 0.04, 0.06], text: [0.08, 0.08, 0.1], doodleA: [0.98, 0.42, 0.62], doodleB: [0.4, 0.86, 1], doodleC: [1, 1, 1] } },
+    { name: "New feature", values: { label: "NEW FEATURE", card: [0.39, 0.4, 0.95], text: [1, 1, 1], tilt: 5, doodleA: [0.98, 0.45, 0.2], doodleB: [0.13, 0.77, 0.55], doodleC: [0.39, 0.4, 0.95] } },
+    { name: "Calm", values: { tilt: -2, wobble: 1, background: [0.96, 0.96, 0.94], doodleA: [0.55, 0.6, 0.7], doodleB: [0.55, 0.6, 0.7], doodleC: [0.55, 0.6, 0.7] } }
+  ],
+  derived: (v) => {
+    const e = Math.max(0.6, textWidthEm(String(v.label)));
+    const size = Math.min(30, 210 / e);
+    const length = e * size;
+    const [w, h] = [length + 44, size + 30];
+    return { size: r15(size), length: r15(length), w: r15(w), h: r15(h), x: r15(DB_X - w / 2), y: r15(DB_Y - h / 2), base: r15(DB_Y + size * 0.36) };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 400 240"><!-- {{label: text default='SOFTWARE UPDATE' label='Label'}} {{tilt: float min=-20 max=20 default=-6 step=0.5 label='Tilt (degrees)'}} {{background: color default=#FFF4DC label='Background'}} {{card: color default=#FFFFFF label='Card'}} {{text: color default=#111827 label='Text colour'}} {{ink: color default=#111827 label='Ink'}} {{doodleA: color default=#FF4D6D label='Doodle colour 1'}} {{doodleB: color default=#3B82F6 label='Doodle colour 2'}} {{doodleC: color default=#F5B700 label='Doodle colour 3'}} {{font: text default="${LETTERING}" label='Font'}} --><defs><filter id="doodleBurstBoil" x="-10%" y="-10%" width="120%" height="120%"><feTurbulence id="dbNoise" type="turbulence" baseFrequency="0.04" numOctaves="2" seed="${DB_SEEDS[0]}" result="doodleBurstWarp"/><feDisplacementMap in="SourceGraphic" in2="doodleBurstWarp" scale="{{wobble: float min=0 max=8 default=3 step=0.5 label='Line boil'}}" xChannelSelector="R" yChannelSelector="G"/></filter></defs><rect width="400" height="240" fill="{{background}}"/><g filter="url(#doodleBurstBoil)" fill="none" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round">${DB_DOODLES.map(
+      (d, k) => `<g id="db${k}" transform="${dbPose(d, 0.55, 0, d.turn - 40)}" stroke="{{${d.colour}}}">${DB_SHAPES[d.shape]}</g>`
+    ).join("")}</g><g id="dbCard" transform="${dbCard(0, -24)}" filter="url(#doodleBurstBoil)"><rect x="{{x}}" y="{{y}}" width="{{w}}" height="{{h}}" rx="9" fill="{{ink}}" transform="translate(6 6)"/><rect x="{{x}}" y="{{y}}" width="{{w}}" height="{{h}}" rx="9" fill="{{card}}" stroke="{{ink}}" stroke-width="3.5"/><text x="${DB_X}" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="900" fill="{{text}}">{{label}}</text></g></svg>`,
+    animate: [
+      // The card pops in past its size with a twist, breathes, then shrinks away.
+      ...keys("dbCard", "transform", [
+        [0, dbCard(0, -24)],
+        [260, dbCard(1.16, 5)],
+        [380, dbCard(0.95, -2)],
+        [500, dbCard(1, 0)],
+        [DB_OUT + 120, dbCard(1.04, 0)],
+        [DB_OUT + 240, dbCard(1.12, -3)],
+        [DB_END, dbCard(0, 16)]
+      ], { ease: "out" }),
+      // Each doodle pops out along its ray, drifts on twinkling, then pops off.
+      ...DB_DOODLES.flatMap((d, k) => {
+        const spin = k % 2 ? 14 : -14;
+        const out = DB_OUT + k * 3 % 14 * 14;
+        return keys(`db${k}`, "transform", [
+          [0, dbPose(d, 0.55, 0, d.turn - 40)],
+          [d.at, dbPose(d, 0.55, 0, d.turn - 40)],
+          [d.at + 230, dbPose(d, 1.08, 1.3, d.turn + 6)],
+          [d.at + 380, dbPose(d, 1, 1, d.turn)],
+          [Math.round((d.at + 380 + out) / 2), dbPose(d, 1.03, k % 3 ? 0.82 : 1.12, d.turn + spin / 2)],
+          [out, dbPose(d, 1.06, 1, d.turn + spin)],
+          [out + 90, dbPose(d, 1.1, 1.2, d.turn + spin)],
+          [out + 260, dbPose(d, 1.16, 0, d.turn + spin + 30)]
+        ], { ease: "out" });
+      }),
+      // The line boil: the noise redrawn every few frames all the way round the loop.
+      ...Array.from({ length: Math.ceil(DB_END / DB_BOIL) }, (_, k) => snap5("dbNoise", "seed", DB_SEEDS[k % DB_SEEDS.length], k * DB_BOIL))
+    ]
+  }
+};
+var comicEffects = [soundEffect, speechBubble, fightCloud, dizzyStars, animeEmotes, cartoonPoof, lineBoil, doodleBurst];
 
 // src/catalog/glow.ts
 var r16 = (v) => Math.round(v * 10) / 10;
@@ -3713,7 +4147,63 @@ var liftCard = {
     ]
   }
 };
-var shadowEffects = [liftCard];
+var EL_X = 200;
+var EL_Y = 196;
+var EL_ISO = `translate(${EL_X} ${EL_Y}) matrix(0.866 0.5 -0.866 0.5 0 0)`;
+var EL_TIMES = { up1: 280, up2: 400, up3: 520, upMs: 680, down3: 2100, down2: 2220, down1: 2340, downMs: 620 };
+var elT = (name) => `{{el_${name}}}`;
+var elSlab = (body, side) => `<g transform="translate(0 ${side})"><g transform="${EL_ISO}">${body}</g></g><g transform="translate(0 ${side})"><g transform="${EL_ISO}" fill="{{shadow}}" opacity="0.2">${body}</g></g><g transform="${EL_ISO}">${body}</g>`;
+var EL_IMAGE = `<rect x="-66" y="-46" width="132" height="58" rx="7"/>`;
+var EL_BADGE = `<circle cx="62" cy="-40" r="17"/>`;
+var elShadow = (k, footprint) => `<g id="elS${k}" transform="translate(0 0)" opacity="0.34"><g transform="${EL_ISO}" fill="{{shadow}}" filter="url(#explodedLayersBlur${k})">${footprint}</g></g>`;
+var explodedLayers = {
+  kind: "vector",
+  id: "exploded-layers",
+  name: "Exploded layers",
+  description: "An isometric UI card whose layers (shadow plate, card base, image and text lines, floating badge) lift apart one after another, showing the gaps and the soft shadows between them, hold, then settle back together.",
+  category: "shadow",
+  tags: ["shadow", "isometric", "layers", "exploded", "card", "ui", "depth", "3d", "loop"],
+  hold: 500,
+  presets: [
+    { name: "Dark", values: { background: [0.07, 0.08, 0.12], card: [0.16, 0.18, 0.25], accent: [0.35, 0.85, 0.95], shadow: [0, 0, 0] } },
+    { name: "Coral", values: { background: [1, 0.95, 0.92], accent: [0.97, 0.42, 0.36], shadow: [0.4, 0.12, 0.08], lift: 38 } },
+    { name: "Slow and deep", values: { lift: 44, speed: 0.6 } }
+  ],
+  derived: (v) => {
+    const speed = Math.max(0.1, Number(v.speed));
+    const lift = Number(v.lift);
+    return {
+      ...Object.fromEntries(Object.entries(EL_TIMES).map(([name, ms]) => [`el_${name}`, Math.round(ms / speed)])),
+      up: r17(-lift),
+      fall: r17(lift * 0.92),
+      spread: r17(lift * 0.12)
+    };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 400 300"><!-- {{background: color default=#ECEFF7 label='Background'}} {{card: color default=#FFFFFF label='Card'}} {{accent: color default=#6366F1 label='Accent'}} {{shadow: color default=#1E1B4B label='Shadow colour'}} {{lift: float min=10 max=46 default=34 step=1 label='Lift distance'}} {{speed: float min=0.25 max=3 default=1 step=0.05 label='Speed'}} --><defs>${[0, 1, 2, 3].map((k) => `<filter id="explodedLayersBlur${k}" x="-40%" y="-40%" width="180%" height="180%"><feGaussianBlur id="elBlur${k}" stdDeviation="${k ? 1.5 : 4}"/></filter>`).join("")}</defs><rect width="400" height="300" fill="{{background}}"/><g id="elS0" transform="translate(0 6)" opacity="0.32"><g transform="${EL_ISO}" fill="{{shadow}}" filter="url(#explodedLayersBlur0)"><rect x="-84" y="-62" width="168" height="124" rx="14"/></g></g><g id="elL1" transform="translate(0 0)"><g fill="{{card}}">${elSlab(`<rect x="-80" y="-58" width="160" height="116" rx="12"/>`, 7)}</g><g transform="${EL_ISO}"><rect x="-80" y="-58" width="160" height="116" rx="12" fill="none" stroke="#FFFFFF" stroke-opacity="0.4" stroke-width="1"/></g>${elShadow(1, `${EL_IMAGE}<rect x="-66" y="22" width="112" height="9" rx="4.5"/><rect x="-66" y="38" width="76" height="9" rx="4.5"/>`)}<g id="elL2" transform="translate(0 0)"><g fill="{{accent}}">${elSlab(EL_IMAGE, 3)}</g><g transform="${EL_ISO}"><path d="M-60 6 L-30 -22 L-8 0 L10 -14 L60 6 Z" fill="#FFFFFF" opacity="0.4"/><circle cx="34" cy="-28" r="8" fill="#FFFFFF" opacity="0.55"/><rect x="-66" y="-46" width="132" height="58" rx="7" fill="none" stroke="#FFFFFF" stroke-opacity="0.5" stroke-width="1"/><g fill="{{accent}}" opacity="0.35"><rect x="-66" y="22" width="112" height="9" rx="4.5"/><rect x="-66" y="38" width="76" height="9" rx="4.5"/></g></g>${elShadow(2, EL_BADGE)}<g id="elL3" transform="translate(0 0)"><g fill="{{accent}}">${elSlab(EL_BADGE, 4)}</g><g transform="${EL_ISO}"><circle cx="62" cy="-40" r="12.5" fill="none" stroke="#FFFFFF" stroke-opacity="0.45" stroke-width="1.5"/><path d="M55 -40 L60 -35 L69 -45" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g></g></g></g></svg>`,
+    animate: [
+      // Up: each layer in turn rises off the one below, its shadow falling back and spreading.
+      ...[1, 2, 3].flatMap((k) => [
+        { id: `elL${k}`, attrs: { transform: ["translate(0 0)", "translate(0 {{up}})"] }, delay: elT(`up${k}`), ms: elT("upMs"), ease: "in-out" },
+        { id: `elL${k}`, attrs: { transform: ["translate(0 {{up}})", "translate(0 0)"] }, delay: elT(`down${k}`), ms: elT("downMs"), ease: "in-out" }
+      ]),
+      ...[1, 2, 3].flatMap((k) => {
+        const s = `elS${k - 1}`;
+        const rest = k === 1 ? "translate(0 6)" : "translate(0 0)";
+        const open = k === 1 ? "translate({{spread}} {{fall}})" : "translate({{spread}} {{spread}})";
+        const [o0, o1] = k === 1 ? [0.32, 0.18] : [0.34, 0.2];
+        const [b0, b1] = k === 1 ? [4, 11] : [1.5, 6];
+        return [
+          { id: s, attrs: { transform: [rest, open], opacity: [o0, o1] }, delay: elT(`up${k}`), ms: elT("upMs"), ease: "in-out" },
+          { id: s, attrs: { transform: [open, rest], opacity: [o1, o0] }, delay: elT(`down${k}`), ms: elT("downMs"), ease: "in-out" },
+          { id: `elBlur${k - 1}`, attrs: { stdDeviation: [b0, b1] }, delay: elT(`up${k}`), ms: elT("upMs"), ease: "in-out" },
+          { id: `elBlur${k - 1}`, attrs: { stdDeviation: [b1, b0] }, delay: elT(`down${k}`), ms: elT("downMs"), ease: "in-out" }
+        ];
+      })
+    ]
+  }
+};
+var shadowEffects = [liftCard, explodedLayers];
 
 // src/catalog/lighting.ts
 var sway = (deg) => `rotate(${deg} 120 0)`;
@@ -7031,7 +7521,399 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
     { name: "No surface", values: { uSurface: false, uLevel: 0.15, uTint: [1, 1, 1] } }
   ]
 };
-var splatterShaders = [paintSplatter, inkSplash, splashCrown, gooSplat, paintRoller, waterSplash];
+var SMAX = `
+float smax(float a, float b, float k) {
+  return -smin(-a, -b, k);
+}`.trim();
+var GOO_SHADE = `
+vec3 gooShade(vec3 goo, vec3 n, float thick, float gloss) {
+  vec3 light = normalize(vec3(-0.45, 0.6, 1.0));
+  vec3 col = mix(goo * 1.15, goo * 0.62, thick * 0.6) * (0.78 + 0.22 * dot(n, light));
+  col = mix(col, vec3(1.0), pow(1.0 - n.z, 2.0) * 0.35);
+  col *= 1.0 - 0.25 * smoothstep(0.0, 0.6, -n.y) * (1.0 - thick);
+  float rz = max(reflect(-light, n).z, 0.0);
+  return min(col + gloss * (pow(rz, 40.0) * 0.9 + pow(rz, 6.0) * 0.12), vec3(1.0));
+}`.trim();
+var slimeCurtainWipe = {
+  kind: "shader",
+  id: "slime-curtain-wipe",
+  name: "Slime curtain wipe",
+  description: "Thick, glossy slime pouring down from the top with a wobbling front and long beaded drips until it covers the frame, then sliding off in stretchy strings to reveal the next picture.",
+  category: "splatter",
+  video: "transition",
+  tags: ["splatter", "slime", "goo", "transition", "image", "reveal", "slideshow", "playful"],
+  loop: 6,
+  source: glsl(
+    `// Slime curtain wipe: goo pours down over the From picture, then slides off to show the To one, and back again.
+uniform sampler2D uFrom;   // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.landscape} label="From image"
+uniform sampler2D uTo;     // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.city} label="To image"
+uniform bool uSwap;        // @control default=true label="Reveal the To image"
+uniform vec3 uColorA;      // @control color default=#FF4FA3 label="Goo"
+uniform vec3 uColorB;      // @control color default=#A3E635 label="Swirl colour"
+uniform float uMarble;     // @control min=0 max=1 default=0.3 label="Swirl amount"
+uniform int uDripCount;    // @control min=0 max=24 default=14 label="Drips"
+uniform float uThickness;  // @control min=0.4 max=2 default=1 label="Thickness"
+uniform float uGloss;      // @control min=0 max=1 default=0.9 label="Gloss"
+uniform bool uAnimate;     // @control default=true label="Animate"
+uniform float uProgress;   // @control min=0 max=1 default=0.45 label="Progress (when still)"
+${BACKDROP_CONTROLS}`,
+    HASH,
+    NOISE,
+    FBM,
+    SMIN,
+    SMAX,
+    SEGMENT,
+    GOO_SHADE,
+    PICTURE,
+    `// The pass: x cover (0\u20131), y reveal (0\u20131), z seconds into it, w a seed.
+vec4 gPass;
+
+// The pouring front's height at x: uneven, sagging in fat bellies, wobbling as it comes.
+float frontAt(float x) {
+  float s = gPass.w;
+  float lag = 0.14 * (vnoise(vec2(x * 2.3 + s, 0.5)) - 0.5) + 0.05 * (vnoise(vec2(x * 6.1 + s, 2.5)) - 0.5);
+  float belly = 0.022 * sqrt(abs(sin(x * 6.5 + s)) + 0.02);
+  float wob = 0.012 * sin(x * 9.0 + gPass.z * 5.0 + s) * (1.0 - gPass.y);
+  return mix(1.13, -0.3, gPass.x) - 0.75 * gPass.y + lag - belly + wob;
+}
+
+// The top edge as the goo slides off.
+float topAt(float x) {
+  float e = gPass.y * gPass.y * (3.0 - 2.0 * gPass.y);
+  return mix(1.1, -0.16, e) + 0.04 * (vnoise(vec2(x * 3.1 + gPass.w, 7.0)) - 0.5) - 0.025 * sin(x * 2.0 + gPass.w);
+}
+
+// The goo's signed distance (frame heights) at P: the curtain, its drips and, sliding off, its strings.
+float curtain(vec2 P, float aspect) {
+  float d = frontAt(P.x) - P.y;
+  float s = gPass.w;
+  for (int k = 0; k < 24; k++) {
+    if (k >= uDripCount) break;
+    vec3 h = vec3(hash22(vec2(float(k) + 0.5, s + 3.3)), hash12(vec2(s + 1.7, float(k) * 2.9)));
+    float x = (float(k) + 0.5 + (h.x - 0.5) * 0.7) / float(uDripCount) * aspect;
+    if (abs(P.x - x) > 0.12) continue;
+    float fx = frontAt(x);
+    float len = (0.08 + 0.3 * h.y) * smoothstep(0.08, 0.7, gPass.x) * (1.0 + 0.8 * gPass.y) * (1.0 + 0.05 * sin(gPass.z * 4.0 + h.x * 6.28));
+    float w = (0.01 + 0.015 * h.z) * uThickness;
+    vec2 b = vec2(x, fx - len);
+    vec2 sg = segment(P, vec2(x, fx + 0.03), b);
+    d = smin(d, sg.x - w * mix(1.15, 0.7, sg.y), 0.03);
+    d = smin(d, length((P - b + vec2(0.0, w * 0.5)) * vec2(1.0, 0.85)) - w * 1.6, 0.012);
+  }
+  if (gPass.y > 0.0) {
+    d = smax(d, P.y - topAt(P.x), 0.02);
+    // Strings still stuck to the top, stretching thin and snapping.
+    for (int j = 0; j < 6; j++) {
+      vec3 h = vec3(hash22(vec2(float(j) + 0.5, s + 8.1)), hash12(vec2(s + 4.3, float(j) * 1.3)));
+      float x = (float(j) + 0.2 + 0.6 * h.x) / 6.0 * aspect;
+      float wj = (0.016 + 0.02 * h.y) * uThickness * (1.0 - smoothstep(0.3, 0.7 + 0.25 * h.z, gPass.y));
+      if (wj <= 0.0 || abs(P.x - x) > 0.06) continue;
+      vec2 sg = segment(P, vec2(x, topAt(x) - 0.01), vec2(x, 1.1));
+      d = smin(d, sg.x - wj * mix(1.0, 0.55, sin(3.14159 * sg.y)), 0.05);
+    }
+  }
+  return d;
+}
+
+// The goo's surface height: a dome falling away at the rim, rippled where it runs.
+float gooHeight(vec2 P, float aspect, out float d) {
+  d = curtain(P, aspect);
+  float k = 0.028 * uThickness;
+  float ripple = fbm(vec2(P.x * 9.0, (P.y + gPass.z * 0.35) * 2.5) + gPass.w, 3);
+  return -1.6 * k * exp(min(d, 0.0) / k) + 0.03 * uThickness * ripple * smoothstep(-0.01, -0.09, d);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float px = 1.0 / iResolution.y;
+  float aspect = iResolution.x / iResolution.y;
+  vec2 P = vec2(uv.x * aspect, uv.y);
+  // Two passes a loop: pour over the From picture and slide off the To one, then back.
+  float t = mod(iTime, 6.0);
+  bool second = uAnimate && t >= 3.0;
+  float prog = uAnimate ? (t - (second ? 3.0 : 0.0)) / 3.0 : uProgress;
+  gPass = vec4(smoothstep(0.03, 0.42, prog), smoothstep(0.5, 0.98, prog), prog * 3.0, second ? 7.0 : 0.0);
+  vec4 a = pictureRGBA(uFrom, uv);
+  vec4 b = uSwap ? pictureRGBA(uTo, uv) : a;
+  vec4 below = gPass.y > 0.0 ? (second ? a : b) : (second ? b : a);
+  // A soft shadow the goo casts down on the picture.
+  float dS = curtain(P + vec2(-0.006, 0.016), aspect);
+  below.rgb *= 1.0 - 0.38 * smoothstep(0.022, -0.012, dS);
+  float d;
+  float h = gooHeight(P, aspect, d);
+  float cover = clamp(0.5 - d / px, 0.0, 1.0);
+  vec4 col = below;
+  if (cover > 0.0) {
+    float eps = px;
+    float dd;
+    vec2 g = vec2(gooHeight(P + vec2(eps, 0.0), aspect, dd), gooHeight(P + vec2(0.0, eps), aspect, dd)) - h;
+    vec3 n = normalize(vec3(-g / eps, 1.0));
+    // Swirls of the second colour running through it.
+    float v = fbm(vec2(P.x * 2.5 + gPass.w, (P.y + gPass.z * 0.35) * 0.9), 4);
+    float m = uMarble > 0.0 ? smoothstep(0.74 - 0.4 * uMarble, 0.75 - 0.4 * uMarble, v) : 0.0;
+    vec3 goo = mix(uColorA, uColorB, m);
+    col = mix(below, vec4(gooShade(goo, n, smoothstep(0.0, -0.08, d), uGloss), 1.0), cover);
+  }
+  fragColor = col;
+}`
+  ),
+  presets: [
+    { name: "Lime slime", values: { uColorA: [0.64, 0.9, 0.21], uColorB: [1, 0.31, 0.64], uMarble: 0.15 } },
+    { name: "Clear off", values: { uSwap: false, uMarble: 0.55, uDripCount: 20 } },
+    { name: "Chocolate", values: { uColorA: [0.36, 0.2, 0.11], uColorB: [0.55, 0.33, 0.18], uMarble: 0.4, uThickness: 1.5, uGloss: 0.75 } }
+  ]
+};
+var gooeyFrame = {
+  kind: "shader",
+  id: "gooey-frame",
+  name: "Gooey frame",
+  description: "A wobbling rim of glossy slime round a rounded frame, with drips swelling on its edges, sliding down and dropping off in beads, for cards and buttons.",
+  category: "splatter",
+  tags: ["splatter", "slime", "goo", "border", "frame", "ui", "card", "overlay", "playful"],
+  transparent: true,
+  loop: 8,
+  source: glsl(
+    `// Gooey frame: a slime rim round a rounded rectangle, wobbling, with drips that swell, run and drop.
+uniform vec3 uColor;      // @control color default=#A3E635 label="Goo"
+uniform float uInset;     // @control min=0 max=0.3 default=0.14 label="Inset"
+uniform float uRadius;    // @control min=0 max=0.5 default=0.08 label="Corner radius"
+uniform float uThickness; // @control min=0.005 max=0.08 default=0.022 label="Thickness"
+uniform float uDrips;     // @control min=0 max=1 default=0.6 label="Drip rate"
+uniform float uWobble;    // @control min=0 max=1 default=0.5 label="Wobble"
+uniform float uGloss;     // @control min=0 max=1 default=0.9 label="Gloss"
+uniform bool uShadow;     // @control default=true label="Shadow"`,
+    HASH,
+    NOISE,
+    SMIN,
+    SEGMENT,
+    OVER2,
+    GOO_SHADE,
+    `float boxSdf(vec2 p, vec2 b, float r) {
+  vec2 q = abs(p) - b + r;
+  return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r;
+}
+
+// The rim's signed distance (frame heights) at p, T seconds into the loop.
+float gooFrame(vec2 p, vec2 box, float rad, float T) {
+  // Noise drifting round a circle, so the wobble loops.
+  float ph = 6.28318 * T / 8.0;
+  float n1 = vnoise(p * 6.0 + vec2(cos(ph), sin(ph)) * 1.3);
+  float n2 = vnoise(p * 14.0 + vec2(cos(2.0 * ph + 1.0), sin(2.0 * ph + 1.0)) * 0.9 + 9.0);
+  float th = uThickness * (1.0 + uWobble * ((n1 - 0.5) * 1.1 + (n2 - 0.5) * 0.4));
+  // It sags, so it is fatter along the bottom.
+  th *= mix(1.0, 1.35, smoothstep(0.2, -1.0, p.y / box.y));
+  float d = abs(boxSdf(p, box, rad) + uWobble * uThickness * (n2 - 0.5) * 0.8) - th;
+  // Drips: each swells on an edge, runs down and, off the bottom, drops away; on the top it soaks back in.
+  for (int k = 0; k < 12; k++) {
+    vec3 h = vec3(hash22(vec2(float(k) + 0.5, 7.3)), hash12(vec2(4.1, float(k) * 1.9 + 0.3)));
+    if (h.z > uDrips) continue;
+    float cyc = mod(T + h.x * 8.0, 8.0);
+    float which = floor(cyc / 4.0);
+    float a = cyc - which * 4.0;
+    vec2 hh = hash22(vec2(float(k) * 3.1 + which * 17.0, 2.2));
+    bool top = hh.y < 0.3;
+    float x = (hh.x * 2.0 - 1.0) * max(box.x - rad - uThickness * 2.0, 0.0);
+    if (abs(p.x - x) > 0.12) continue;
+    float y0 = top ? box.y : -box.y;
+    float grow = smoothstep(0.0, 0.8, a);
+    float w = uThickness * (0.6 + 0.35 * h.y) * (top ? 1.0 - smoothstep(2.8, 3.9, a) : 1.0);
+    float lmax = top ? 0.05 + 0.1 * h.y : 0.07 + 0.15 * h.y;
+    float run = smoothstep(0.6, 2.6, a);
+    bool dropped = !top && a > 2.6;
+    float len = lmax * run * (dropped ? 1.0 - smoothstep(2.6, 3.3, a) : 1.0);
+    vec2 sg = segment(p, vec2(x, y0), vec2(x, y0 - len));
+    d = smin(d, sg.x - w * mix(0.8, 0.5, sg.y) * grow, w * 1.2 * grow + 1e-4);
+    float fall = dropped ? 1.25 * (a - 2.6) * (a - 2.6) : 0.0;
+    vec2 bead = vec2(x, y0 - lmax * run - fall - w * 0.3);
+    float db = length((p - bead) * vec2(1.0, 0.85)) - w * mix(0.8, 1.5, grow);
+    d = dropped ? min(d, db) : smin(d, db, w * 0.8 * grow + 1e-4);
+  }
+  return d;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = 1.0 / iResolution.y;
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) * px;
+  vec2 box = max(0.5 * iResolution.xy * px - uInset, vec2(0.05));
+  float rad = min(uRadius, min(box.x, box.y));
+  float T = mod(iTime, 8.0);
+  vec4 acc = vec4(0.0);
+  float d = gooFrame(p, box, rad, T);
+  float cover = clamp(0.5 - d / px, 0.0, 1.0);
+  if (uShadow) {
+    float dS = gooFrame(p + vec2(-0.007, 0.013), box, rad, T);
+    acc = over(acc, vec3(0.0), 0.32 * smoothstep(0.02, -0.01, dS) * (1.0 - cover));
+  }
+  if (cover > 0.0) {
+    float eps = px;
+    vec2 g = vec2(gooFrame(p + vec2(eps, 0.0), box, rad, T), gooFrame(p + vec2(0.0, eps), box, rad, T)) - d;
+    g /= eps;
+    vec3 n = normalize(vec3(g * exp(min(d, 0.0) / (uThickness * 0.9)) * 1.6, 1.0));
+    float thick = smoothstep(0.0, -uThickness * 1.2, d);
+    acc = over(acc, gooShade(uColor, n, thick, uGloss), cover * mix(0.97, 0.9, thick));
+  }
+  fragColor = unpremultiply(acc);
+}`
+  ),
+  presets: [
+    { name: "Slime button", values: { uInset: 0.05, uRadius: 0.5, uThickness: 0.016, uDrips: 0.4 } },
+    { name: "Bubblegum", values: { uColor: [1, 0.42, 0.7], uRadius: 0.12, uWobble: 0.7 } },
+    { name: "Heavy drip", values: { uThickness: 0.035, uDrips: 1, uWobble: 0.8, uInset: 0.18 } }
+  ]
+};
+var gooVortex = {
+  kind: "shader",
+  id: "goo-vortex",
+  name: "Goo vortex",
+  description: "Two glossy ribbons of goo spiralling in round the centre, coiling into a ball and flinging out to splat round the frame, an intro on a loop.",
+  category: "splatter",
+  tags: ["splatter", "slime", "goo", "intro", "spiral", "paint", "playful"],
+  loop: 6,
+  source: glsl(
+    `// Goo vortex: ribbons of goo spiral in, coil up, fling out and splat; then it starts again.
+uniform vec3 uColorA;     // @control color default=#FF4FA3 label="Goo 1"
+uniform vec3 uColorB;     // @control color default=#A3E635 label="Goo 2"
+uniform vec3 uBackground; // @control color default=#FFD93D label="Background"
+uniform float uSpin;      // @control min=0 max=3 default=1 label="Spin speed"
+uniform float uWidth;     // @control min=0.015 max=0.12 default=0.05 label="Ribbon width"
+uniform int uArms;        // @control min=1 max=6 default=2 label="Arms"
+uniform float uSplat;     // @control min=0 max=1 default=0.7 label="Splat amount"
+uniform float uGloss;     // @control min=0 max=1 default=0.9 label="Gloss"`,
+    HASH,
+    NOISE,
+    SMIN,
+    SMAX,
+    SEGMENT,
+    GOO_SHADE,
+    `// The union of two (distance, colour) pairs, melted together within k.
+vec2 meld(vec2 a, vec2 b, float k) {
+  float h = clamp(0.5 + 0.5 * (b.x - a.x) / k, 0.0, 1.0);
+  return vec2(mix(b.x, a.x, h) - k * h * (1.0 - h), mix(b.y, a.y, smoothstep(0.3, 0.7, h)));
+}
+
+// A splat in units of its radius, age seconds after it landed flying along dir.
+float splatSd(vec2 q, float seed, float age, vec2 dir) {
+  float grow = 1.0 - exp(-age * 14.0);
+  float wob = 0.25 * exp(-age * 5.0) * cos(age * 24.0);
+  float s = mix(0.45, 1.0, grow);
+  // Its own frame: x along the flight. It lands squashed and wobbles back.
+  vec2 L = vec2(dot(q, dir), dot(q, vec2(-dir.y, dir.x)));
+  vec2 b = L / vec2(1.0 - wob, 1.0 + wob) / s;
+  float d = length(b) - 0.5;
+  for (int k = 0; k < 5; k++) {
+    vec2 h = hash22(vec2(seed, float(k) + 0.5));
+    float a = h.x * 6.28318;
+    d = smin(d, length(b - vec2(cos(a), sin(a)) * (0.3 + 0.3 * h.y)) - 0.16 - 0.12 * hash12(h + seed), 0.2);
+  }
+  d = (d + (vnoise(b * 3.5 + seed) - 0.5) * 0.08) * s;
+  // Rays thrown on ahead, each ending in a drop.
+  for (int k = 0; k < 4; k++) {
+    vec3 h = vec3(hash22(vec2(seed + 3.3, float(k) + 0.5)), hash12(vec2(float(k) * 2.1, seed)));
+    float a = (h.x - 0.5) * 2.2;
+    vec2 rd = vec2(cos(a), sin(a));
+    float len = (0.5 + 0.55 * h.y) * grow;
+    vec2 sg = segment(L, rd * 0.3, rd * len);
+    d = smin(d, sg.x - mix(0.17, 0.07, sg.y), 0.14);
+    d = smin(d, length(L - rd * len) - 0.1 - 0.05 * h.z, 0.08);
+    d = min(d, length(L - rd * (len + (0.2 + 0.2 * h.z) * grow)) - (0.05 + 0.06 * h.z) * grow);
+  }
+  // Two drips running down, with beads on their ends.
+  for (int j = 0; j < 2; j++) {
+    vec2 h = hash22(vec2(seed + 6.1, float(j) + 0.5));
+    vec2 top = vec2((h.x - 0.5) * 0.8, -0.3);
+    float len = (0.3 + 0.8 * h.y) * (1.0 - exp(-max(age - 0.3, 0.0) * 0.6));
+    float w = 0.08;
+    vec2 sg = segment(q, top, top - vec2(0.0, len));
+    d = smin(d, sg.x - w * mix(1.0, 0.7, sg.y), 0.1);
+    d = smin(d, length(q - top + vec2(0.0, len + w * 0.4)) - w * 1.4, 0.05);
+  }
+  return d;
+}
+
+// The goo at p, T seconds into the loop: x its signed distance (frame heights), y its colour (0 the first, 1 the second).
+vec2 vortex(vec2 p, float T, float aspect) {
+  float N = float(uArms);
+  float r = max(length(p), 1e-4);
+  float lr = log(r);
+  float ang = atan(p.y, p.x);
+  // The ribbons are arms of a log spiral turning in; as they fling out it unwinds.
+  float fl = smoothstep(2.45, 3.3, T);
+  float c = mix(2.4, 0.4, fl);
+  float f = (ang - uSpin * T * 2.2 - c * lr) * N / 6.28318;
+  float idx = floor(f + 0.5);
+  float del = (f - idx) * 6.28318 / N;
+  float perp = r * del / sqrt(1.0 + c * c);
+  float arm = mod(idx, N);
+  float other = mod(mod(idx + (del > 0.0 ? 1.0 : -1.0), N), 2.0);
+  float colour = mix(mod(arm, 2.0), other, 0.5 * smoothstep(3.14159 / N - 0.05, 3.14159 / N, abs(del)));
+  // Thinner at the middle, twisting along its length, and breaking into blobs as it flings.
+  float w = uWidth * (0.35 + 0.65 * smoothstep(0.0, 0.3, r)) * (0.65 + 0.35 * cos(lr * 10.0 - T * 6.0 + arm * 3.4));
+  float brk = vnoise(vec2(lr * 7.0 + arm * 3.1, arm * 1.3 + 2.0));
+  w *= smoothstep(fl * 1.1 - 0.1, fl * 1.1 + 0.1, brk);
+  float e = clamp(T / 2.4, 0.0, 1.0);
+  float head = mix(1.05, 0.03, 1.0 - (1.0 - e) * (1.0 - e)) + fl * fl * 1.3;
+  vec2 res = vec2(smax(abs(perp) - w, head - r, uWidth * 0.8), colour);
+  // The coil balling up in the middle before it bursts.
+  float ballR = 0.12 * smoothstep(1.6, 2.5, T) * (1.0 - smoothstep(2.65, 2.95, T));
+  if (ballR > 0.0) res = meld(res, vec2(r - ballR * (1.0 + 0.06 * sin(ang * 3.0 + T * 9.0)), colour), 0.04);
+  // Blobs flung out from the burst, splatting round the frame.
+  int count = int(uSplat * 12.0 + 0.5);
+  for (int k = 0; k < 12; k++) {
+    if (k >= count) break;
+    vec3 h = vec3(hash22(vec2(float(k) + 0.5, 3.1)), hash12(vec2(5.7, float(k) * 1.3)));
+    float a0 = float(k) * 2.39996 + h.x * 0.8 + 0.6;
+    vec2 rest = vec2(cos(a0) * 0.5 * aspect, sin(a0) * 0.5) * (0.35 + 0.55 * h.y);
+    vec2 dir = normalize(rest);
+    float R = (0.065 + 0.06 * h.z) * (0.7 + 0.5 * uSplat);
+    float age = T - 2.75 - 0.12 * h.y;
+    if (age < 0.0) continue;
+    float ff = min(age / 0.3, 1.0);
+    vec2 pos = rest * (1.0 - (1.0 - ff) * (1.0 - ff));
+    float ds;
+    if (age < 0.3) {
+      vec2 sg = segment(p, pos - dir * R * 2.5 * (1.0 - ff), pos);
+      ds = sg.x - R * 0.6 * (0.7 + 0.3 * sg.y);
+    } else {
+      vec2 q = (p - pos) / R;
+      float lq = length(q);
+      ds = (lq > 3.4 ? lq - 2.8 : splatSd(q, float(k) * 7.3 + 1.0, age - 0.3, dir)) * R;
+    }
+    res = meld(res, vec2(ds, mod(float(k), 2.0)), 0.015);
+  }
+  return res;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = 1.0 / iResolution.y;
+  float aspect = iResolution.x / iResolution.y;
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) * px;
+  float T = mod(iTime, 6.0);
+  float fade = 1.0 - smoothstep(5.2, 5.95, T);
+  vec3 bg = uBackground * (1.06 - 0.22 * dot(p, p));
+  // A soft shadow under the goo.
+  float dS = vortex(p + vec2(-0.012, 0.022), T, aspect).x;
+  bg *= 1.0 - 0.3 * smoothstep(0.03, -0.02, dS) * fade;
+  vec2 v = vortex(p, T, aspect);
+  float cover = clamp(0.5 - v.x / px, 0.0, 1.0) * fade;
+  vec3 col = bg;
+  if (cover > 0.0) {
+    float eps = px;
+    vec2 g = vec2(vortex(p + vec2(eps, 0.0), T, aspect).x, vortex(p + vec2(0.0, eps), T, aspect).x) - v.x;
+    g /= eps;
+    vec3 n = normalize(vec3(g * exp(min(v.x, 0.0) / (uWidth * 1.1)) * 1.6, 1.0));
+    float thick = smoothstep(0.0, -uWidth * 1.2, v.x);
+    col = mix(bg, gooShade(mix(uColorA, uColorB, v.y), n, thick, uGloss), cover);
+  }
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Three-way", values: { uArms: 3, uWidth: 0.04, uSpin: 1.4 } },
+    { name: "Candy", values: { uColorA: [0.5, 0.75, 1], uColorB: [1, 0.62, 0.85], uBackground: [0.98, 0.95, 0.9] } },
+    { name: "Calm", values: { uSpin: 0.4, uSplat: 0.3, uWidth: 0.07 } }
+  ]
+};
+var splatterShaders = [paintSplatter, inkSplash, splashCrown, gooSplat, paintRoller, waterSplash, slimeCurtainWipe, gooeyFrame, gooVortex];
 
 // src/catalog/shaders/bubble.ts
 var OVER3 = `
@@ -12108,6 +12990,82 @@ ${BACKDROP_CONTROLS}`,
     { name: "Crisp", values: { uEdge: 0.015, uScale: 5 } }
   ]
 };
+var transitionWhipPan = {
+  kind: "shader",
+  id: "transition-whip-pan",
+  name: "Whip pan",
+  description: "A beat-cut whip pan or zoom punch: the first image flies off in a motion blur that peaks at the cut, and the next one lands from the other side.",
+  category: "transition",
+  video: "transition",
+  tags: ["transition", "whip", "pan", "zoom", "motion blur", "image", "cut"],
+  loop: 4,
+  source: glsl(
+    `// Whip pan: From accelerates away under a motion blur (directional, or radial in zoom mode), swaps at mid-progress, and To decelerates in.
+${pair(SAMPLE_IMAGES.landscape, SAMPLE_IMAGES.city)}
+uniform int uMode;         // @control min=0 max=1 default=0 label="Mode (0 whip, 1 zoom)"
+uniform float uAngle;      // @control min=0 max=360 default=0 label="Direction (\xB0)"
+uniform float uStrength;   // @control min=0 max=1 default=0.6 label="Blur strength"
+uniform float uPunch;      // @control min=0 max=1 default=0.15 label="Scale punch"
+${BACKDROP_CONTROLS}`,
+    PICTURE,
+    COMMON,
+    `// Mirrored at the frame edges, so a moving image never runs out of picture.
+vec4 folded(sampler2D tex, vec2 uv) {
+  return coverRGBA(tex, 1.0 - abs(1.0 - mod(uv, 2.0)));
+}
+
+// 24 taps spread len along dir, centred on uv: a directional motion blur.
+vec4 smear(sampler2D tex, vec2 uv, vec2 dir, float len) {
+  vec4 sum = vec4(0.0);
+  for (int i = 0; i < 24; i++) {
+    sum += folded(tex, uv + dir * len * ((float(i) + 0.5) / 24.0 - 0.5));
+  }
+  return sum / 24.0;
+}
+
+// 24 taps from uv towards the centre, a zoom blur.
+vec4 zoomSmear(sampler2D tex, vec2 uv, float len) {
+  vec4 sum = vec4(0.0);
+  for (int i = 0; i < 24; i++) {
+    float k = 1.0 - len * (float(i) + 0.5) / 24.0;
+    sum += folded(tex, 0.5 + (uv - 0.5) * k);
+  }
+  return sum / 24.0;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float t = progress();
+  bool second = t >= 0.5;
+  // Each half runs 0 at its far end to 1 at the cut; travel eases in (u\xB3), so speed (u\xB2) peaks at the cut.
+  float u = second ? 2.0 - 2.0 * t : 2.0 * t;
+  float travel = u * u * u;
+  float speed = u * u;
+  vec4 col;
+  if (uMode == 0) {
+    vec2 dir = vec2(cos(radians(uAngle)), sin(radians(uAngle))) * vec2(iResolution.y / iResolution.x, 1.0);
+    // From leaves along dir; To arrives from behind, so it is offset back along dir.
+    vec2 shift = dir * travel * (0.4 + 0.6 * uStrength) * (second ? -1.0 : 1.0);
+    vec2 p = 0.5 + (uv - 0.5) / (1.0 + uPunch * speed) - shift;
+    float len = uStrength * 0.6 * speed;
+    col = second ? smear(uTo, p, dir, len) : smear(uFrom, p, dir, len);
+  } else {
+    vec2 p = 0.5 + (uv - 0.5) / (1.0 + 4.0 * uPunch * travel + 0.2 * uStrength * travel);
+    float len = uStrength * 0.5 * speed;
+    col = second ? zoomSmear(uTo, p, len) : zoomSmear(uFrom, p, len);
+  }
+  // A touch of exposure at the cut sells the speed.
+  col.rgb *= 1.0 + 0.25 * uStrength * speed * speed;
+  fragColor = col;
+}`
+  ),
+  presets: [
+    { name: "Whip left", values: { uMode: 0, uAngle: 180 } },
+    { name: "Whip up", values: { uMode: 0, uAngle: 90 } },
+    { name: "Zoom punch", values: { uMode: 1, uStrength: 0.7, uPunch: 0.4 } },
+    { name: "Hard whip", values: { uMode: 0, uAngle: 0, uStrength: 1, uPunch: 0.3 } }
+  ]
+};
 var morphShaders = [
   featureMorph,
   silhouetteMorph,
@@ -12115,7 +13073,8 @@ var morphShaders = [
   transitionDisplacement,
   transitionLuma,
   transitionParticleSwap,
-  transitionInkBleed
+  transitionInkBleed,
+  transitionWhipPan
 ];
 
 // src/catalog/shaders/overlay.ts
@@ -20853,6 +21812,65 @@ var viewfinder = {
     ]).flat()
   }
 };
+var UPLOAD_IMAGE = { x: 40, y: 32, w: 160, h: 96 };
+var UPLOAD_BADGE = [184, 48];
+var UPLOAD_SHOW = 1900;
+var uploadAbout = (cx, cy, s) => `translate(${cx} ${cy}) scale(${s}) translate(${-cx} ${-cy})`;
+var num2 = (name) => `{{${name}}}`;
+var uploadCard = {
+  kind: "vector",
+  id: "upload-card",
+  name: "Upload card",
+  description: "An image upload card whose progress bar fills as the percentage counts to 100%, then the placeholder cross-fades into the finished picture with a check, and resets.",
+  category: "loader",
+  tags: ["upload", "progress", "image", "file", "ui", "loader"],
+  hold: 300,
+  presets: [
+    { name: "Dark", values: { card: [0.09, 0.11, 0.15], ink: [0.95, 0.96, 0.97], accent: [0.55, 0.36, 0.96] } },
+    { name: "Ocean", values: { label: "beach-day.png", accent: [0.02, 0.6, 0.75] } }
+  ],
+  derived: (v) => {
+    const e = Math.max(0.6, textWidthEm(String(v.label)));
+    const size = Math.round(Math.min(13, 112 / e) * 10) / 10;
+    const up = Math.round(Math.min(6, Math.max(0.5, Number(v.duration) || 2.2)) * 1e3);
+    const back = up + UPLOAD_SHOW;
+    return { size, length: Math.round(e * size * 10) / 10, up, swap: up + 80, pop: up + 300, popped: up + 500, tickAt: up + 420, back, hidden: back + 300, shown: back + 350 };
+  },
+  motion: (() => {
+    const { x, y, w, h } = UPLOAD_IMAGE;
+    const [bx, by] = UPLOAD_BADGE;
+    const mid = [x + w / 2, y + h / 2];
+    return {
+      svg: `<svg viewBox="0 0 240 200"><!-- {{label: text default='mountains.jpg' label='File name'}} {{duration: float min=0.5 max=6 default=2.2 step=0.1 label='Upload time (s)'}} {{card: color default=#FFFFFF label='Card'}} {{accent: color default=#6366F1 label='Accent'}} {{ink: color default=#111827 label='Text colour'}} --><defs><filter id="cardShadow" x="-20%" y="-20%" width="140%" height="150%"><feGaussianBlur stdDeviation="6"/></filter><clipPath id="imageClip"><rect x="${x}" y="${y}" width="${w}" height="${h}" rx="10"/></clipPath><linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="{{accent}}" stop-opacity="0.45"/><stop offset="1" stop-color="{{accent}}" stop-opacity="0.1"/></linearGradient></defs><rect x="24" y="22" width="192" height="168" rx="16" fill="#000000" opacity="0.14" filter="url(#cardShadow)"/><rect x="24" y="16" width="192" height="168" rx="16" fill="{{card}}" stroke="{{ink}}" stroke-opacity="0.08"/><g id="placeholder"><rect x="${x}" y="${y}" width="${w}" height="${h}" rx="10" fill="{{ink}}" fill-opacity="0.05" stroke="{{ink}}" stroke-opacity="0.18" stroke-width="1.5" stroke-dasharray="5 4"/><g fill="none" stroke="{{ink}}" stroke-opacity="0.4" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="142" cy="64" r="7"/><path d="M84 104 L104 80 L118 95 L128 86 L156 104 Z"/></g></g><g id="picture" opacity="0" transform="${uploadAbout(mid[0], mid[1], 1.06)}" clip-path="url(#imageClip)"><rect x="${x}" y="${y}" width="${w}" height="${h}" fill="{{card}}"/><rect x="${x}" y="${y}" width="${w}" height="${h}" fill="url(#sky)"/><circle cx="150" cy="60" r="11" fill="#FDE68A"/><path d="M40 128 L40 110 L82 74 L114 102 L146 80 L200 116 L200 128 Z" fill="{{accent}}" fill-opacity="0.55"/><path d="M40 128 L40 118 Q90 96 138 110 T200 106 L200 128 Z" fill="{{accent}}"/></g><g id="badge" transform="${uploadAbout(bx, by, 0)}"><circle cx="${bx}" cy="${by}" r="11" fill="{{accent}}" stroke="{{card}}" stroke-width="3"/><path id="tick" d="M${bx - 5} ${by + 0.5} L${bx - 1.5} ${by + 4} L${bx + 5} ${by - 3.5}" fill="none" stroke="#FFFFFF" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" opacity="0"/></g><text x="${x}" y="152" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="system-ui, -apple-system, 'Segoe UI', sans-serif" font-size="{{size}}" font-weight="600" fill="{{ink}}">{{label}}</text><text id="pct" x="${x + w}" y="152" text-anchor="end" font-family="system-ui, -apple-system, 'Segoe UI', sans-serif" font-size="12" font-weight="500" fill="{{ink}}" fill-opacity="0.6">0%</text><rect x="${x}" y="162" width="${w}" height="6" rx="3" fill="{{ink}}" fill-opacity="0.1"/><rect id="bar" x="${x}" y="162" width="0" height="6" rx="3" fill="{{accent}}"/></svg>`,
+      animate: [
+        // Uploading: the bar and the percentage climb together.
+        { id: "bar", attrs: { width: [0, w] }, ms: num2("up"), ease: "in-out" },
+        { id: "pct", count: [0, 100], format: "{n}%", ms: num2("up"), ease: "in-out" },
+        // Done: the placeholder gives way to the picture, settling as it fades in, and a check pops on.
+        { id: "placeholder", attrs: { opacity: [1, 0] }, delay: num2("swap"), ms: 360 },
+        { id: "picture", attrs: { opacity: [0, 1] }, delay: num2("swap"), ms: 420 },
+        { id: "picture", attrs: { transform: [uploadAbout(mid[0], mid[1], 1.06), uploadAbout(mid[0], mid[1], 1)] }, delay: num2("swap"), ms: 600, ease: "out" },
+        { id: "badge", attrs: { transform: [uploadAbout(bx, by, 0), uploadAbout(bx, by, 1.2)] }, delay: num2("pop"), ms: 200, ease: "out" },
+        { id: "badge", attrs: { transform: [uploadAbout(bx, by, 1.2), uploadAbout(bx, by, 1)] }, delay: num2("popped"), ms: 160, ease: "in-out" },
+        { id: "tick", attrs: { opacity: [0, 1] }, delay: num2("tickAt"), ms: 40 },
+        { id: "tick", draw: true, delay: num2("tickAt"), ms: 260, ease: "out" },
+        // Reset: back to the empty placeholder, the bar and count fading out and back in at zero.
+        { id: "picture", attrs: { opacity: [1, 0] }, delay: num2("back"), ms: 360 },
+        { id: "placeholder", attrs: { opacity: [0, 1] }, delay: num2("back"), ms: 360 },
+        { id: "badge", attrs: { transform: [uploadAbout(bx, by, 1), uploadAbout(bx, by, 0)] }, delay: num2("back"), ms: 220, ease: "in-out" },
+        { id: "tick", attrs: { opacity: [1, 0] }, delay: num2("back"), ms: 120 },
+        { id: "tick", draw: [0, 0], delay: num2("hidden"), ms: 0 },
+        { id: "picture", attrs: { transform: [uploadAbout(mid[0], mid[1], 1.06), uploadAbout(mid[0], mid[1], 1.06)] }, delay: num2("hidden"), ms: 0 },
+        { id: "bar", attrs: { opacity: [1, 0] }, delay: num2("back"), ms: 250 },
+        { id: "pct", attrs: { opacity: [1, 0] }, delay: num2("back"), ms: 250 },
+        { id: "bar", attrs: { width: [0, 0] }, delay: num2("hidden"), ms: 0 },
+        { id: "pct", count: [0, 0], format: "{n}%", delay: num2("hidden"), ms: 0 },
+        { id: "bar", attrs: { opacity: [0, 1] }, delay: num2("shown"), ms: 250 },
+        { id: "pct", attrs: { opacity: [0, 1] }, delay: num2("shown"), ms: 250 }
+      ]
+    };
+  })()
+};
 var vectorEffects = [
   spinner,
   bouncingDots,
@@ -20872,7 +21890,8 @@ var vectorEffects = [
   blobMorph,
   dripText,
   flowNetwork,
-  viewfinder
+  viewfinder,
+  uploadCard
 ];
 
 // src/catalog/index.ts
@@ -20895,6 +21914,8 @@ var SHADER_EFFECTS = [
   moire,
   kaleidoscope,
   barberStripes,
+  memphisPattern,
+  chevronTunnel,
   neonCircuit,
   bokeh,
   godRays,
@@ -21017,4 +22038,4 @@ export {
   effectControls,
   effectDefaults
 };
-//# sourceMappingURL=chunk-PYDN5G2P.js.map
+//# sourceMappingURL=chunk-DBNSI4MF.js.map