@pixerate/flair 0.15.0 → 0.17.0

package/dist/{chunk-KWNFZ5NC.js → chunk-LURJMWYM.js}

@@ -12,7 +12,7 @@ import {
   hexToRgb,
   parseControls,
   rgbToHex
-} from "./chunk-WC3VADZC.js";
+} from "./chunk-VYOMXE6I.js";
 
 // src/catalog/glsl.ts
 var HASH = `
@@ -1748,9 +1748,9 @@ var checkFlash = (at2, back) => [
   { id: "check", step: 1, attrs: { opacity: [1, 0] }, delay: back, ms: 160 },
   { id: "check", step: 1, draw: [0, 0], delay: back + 200, ms: 0 }
 ];
-var buttonLabels = (a, b, room, max) => {
+var buttonLabels = (a, b, room2, max) => {
   const ems = [a, b].map((t) => Math.max(0.6, textWidthEm(String(t))));
-  const size = Math.min(max, room / Math.max(...ems));
+  const size = Math.min(max, room2 / Math.max(...ems));
   return { size: r1(size), base: r1(50 + size * 0.35), labelLen: r1(ems[0] * size), doneLen: r1(ems[1] * size) };
 };
 var labelTexts = (x) => `<text id="label" x="${x}" y="{{base}}" textLength="{{labelLen}}" lengthAdjust="spacingAndGlyphs" transform="translate(0 0)" font-family="${SANS}" font-size="{{size}}" font-weight="600" fill="{{ink}}">{{label}}</text><text id="done" x="${x}" y="{{base}}" textLength="{{doneLen}}" lengthAdjust="spacingAndGlyphs" transform="translate(0 10)" opacity="0" font-family="${SANS}" font-size="{{size}}" font-weight="600" fill="{{ink}}">{{doneText}}</text>`;
@@ -9265,6 +9265,138 @@ var imageTreatments = [
   imageOilPaint
 ];
 
+// src/catalog/types.ts
+var EFFECT_CATEGORIES = [
+  "gradient",
+  "organic",
+  "pattern",
+  "light",
+  "space",
+  "retro",
+  "image",
+  "overlay",
+  "text",
+  "morph",
+  "interaction",
+  "pyrotechnics",
+  "timewarp",
+  "melt",
+  "electric",
+  "transition",
+  "loader",
+  "data",
+  "icon"
+];
+var VECTOR_CONTROL_TYPES = ["float", "int", "bool", "color", "text"];
+var PLACEHOLDER = /\{\{\s*([A-Za-z_]\w*)\s*(?::\s*([A-Za-z0-9]*)([^}]*))?\}\}/g;
+function motionStrings(motion) {
+  const out = [];
+  const walk = (v) => {
+    if (typeof v === "string") out.push(v);
+    else if (Array.isArray(v)) v.forEach(walk);
+    else if (v && typeof v === "object") Object.values(v).forEach(walk);
+  };
+  walk(motion);
+  return out;
+}
+function vectorControls(motion) {
+  const controls = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const text of motionStrings(motion)) {
+    for (const [, name, type, attributes] of text.matchAll(PLACEHOLDER)) {
+      if (type === void 0 || seen.has(name) || !VECTOR_CONTROL_TYPES.includes(type)) continue;
+      seen.add(name);
+      const colour = type === "color";
+      controls.push(controlFromDeclaration(name, colour ? "vec3" : type, `${attributes}${colour ? " color" : ""}`, controls.length + 1));
+    }
+  }
+  return controls;
+}
+function vectorEffectControls(effect) {
+  const declared = vectorControls(effect.motion);
+  const names = new Set(declared.map((c) => c.name));
+  const listed = (effect.controls ?? []).filter((c) => !names.has(c.name));
+  return [...declared, ...listed.map((c, i) => vectorControlDef(c, declared.length + i + 1))];
+}
+function vectorControlIssues(motion) {
+  const issues = [];
+  const declarations = /* @__PURE__ */ new Map();
+  for (const text of motionStrings(motion)) {
+    for (const [whole, name, type] of text.matchAll(PLACEHOLDER)) {
+      if (type === void 0) continue;
+      if (!VECTOR_CONTROL_TYPES.includes(type))
+        issues.push(`${whole}: a control's type is one of ${VECTOR_CONTROL_TYPES.join(", ")}`);
+      else if (declarations.has(name) && declarations.get(name) !== whole)
+        issues.push(`"${name}" is declared twice; declare it once and write {{${name}}} everywhere else`);
+      else declarations.set(name, whole);
+    }
+  }
+  return issues;
+}
+function written(control, value) {
+  if (control.color && Array.isArray(value)) return rgbToHex(value);
+  if (Array.isArray(value)) return value.join(" ");
+  return value;
+}
+var escapeMarkup = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function vectorControlDef(control, line = 0) {
+  const min = control.min ?? 0;
+  return {
+    name: control.name,
+    type: control.type,
+    label: control.label ?? control.name,
+    color: control.color ?? false,
+    min,
+    max: control.max ?? Math.max(min + 1, 1),
+    step: control.step ?? (control.type === "int" ? 1 : 0.01),
+    default: control.default,
+    line
+  };
+}
+var CURRENT_COLOR = "currentColor";
+function isCurrentColor(value) {
+  return typeof value === "string" && value.trim().toLowerCase() === "currentcolor";
+}
+function renderVectorEffect(effect, values = {}) {
+  const filled = {};
+  const placeholders = /* @__PURE__ */ new Map();
+  for (const control of vectorEffectControls(effect)) {
+    const given = values[control.name];
+    if (control.color && isCurrentColor(given)) {
+      filled[control.name] = CURRENT_COLOR;
+      placeholders.set(control.name, CURRENT_COLOR);
+      continue;
+    }
+    const check = given === void 0 ? void 0 : checkControlValue(control, given);
+    filled[control.name] = check?.ok ? check.value : control.default;
+    placeholders.set(control.name, written(control, filled[control.name]));
+  }
+  for (const [name, value] of Object.entries(effect.derived?.(filled) ?? {})) placeholders.set(name, value);
+  const fill = (text, markup) => {
+    const whole = /^\{\{\s*([A-Za-z_]\w*)\s*(?::[^}]*)?\}\}$/.exec(text);
+    if (!markup && whole && placeholders.has(whole[1])) return placeholders.get(whole[1]);
+    return text.replace(PLACEHOLDER, (match, name) => {
+      if (!placeholders.has(name)) return match;
+      const value = String(placeholders.get(name));
+      return markup ? escapeMarkup(value) : value;
+    });
+  };
+  const walk = (v) => {
+    if (typeof v === "string") return fill(v, false);
+    if (Array.isArray(v)) return v.map(walk);
+    if (v && typeof v === "object") return Object.fromEntries(Object.entries(v).map(([k, x]) => [k, walk(x)]));
+    return v;
+  };
+  const { svg, ...rest } = effect.motion;
+  return { svg: fill(svg.replace(/<!--[\s\S]*?-->/g, ""), true), ...walk(rest) };
+}
+function colorControl(name, hex, label) {
+  return { name, type: "vec3", color: true, default: hexToRgb(hex) ?? [1, 1, 1], label: label ?? name };
+}
+function numberControl(name, value, min, max, label, step) {
+  return { name, type: "float", default: value, min, max, label: label ?? name, step };
+}
+
 // src/catalog/text.ts
 var r14 = (n5) => Math.round(n5 * 10) / 10;
 function fit2(text, width, max, ems = textWidthEm(text)) {
@@ -9274,6 +9406,10 @@ function fit2(text, width, max, ems = textWidthEm(text)) {
 }
 var lettersOf = (text) => Array.from(String(text));
 var mixHex2 = (a, b, t) => {
+  if (isCurrentColor(a) || isCurrentColor(b)) {
+    const css = (c) => isCurrentColor(c) ? CURRENT_COLOR : rgbToHex(Array.isArray(c) ? c : [1, 1, 1]);
+    return `color-mix(in srgb, ${css(a)}, ${css(b)} ${Math.round(t * 100)}%)`;
+  }
   const x = Array.isArray(a) ? a : [1, 1, 1];
   const y = Array.isArray(b) ? b : [1, 1, 1];
   return rgbToHex([0, 1, 2].map((i) => x[i] + (y[i] - x[i]) * t));
@@ -9284,6 +9420,16 @@ var MONO = `ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospa
 var MONO_EM = 0.6;
 var HEAVY = `'Arial Black', 'Helvetica Neue', Impact, system-ui, sans-serif`;
 var SANS3 = `system-ui, 'Helvetica Neue', Arial, sans-serif`;
+var SCRIPT = `'Pacifico', 'Brush Script MT', 'Segoe Script', 'Snell Roundhand', cursive`;
+var CAP = 0.72;
+var typeface = (font, weight) => `{{font: text default="${font}" label='Font'}} {{weight: int min=100 max=900 default=${weight} step=100 label='Weight'}} {{inline: bool default=false label='Inline'}}`;
+function frame(v, left, width, base, size, overhang = [0.05, 0, DESCENT, 0]) {
+  const spill = overhang.map((e) => Math.round(Math.max(0, e) * 100) / 100).join(" ");
+  return v.inline ? { viewBox: `${r14(left)} ${r14(base - size * CAP)} ${r14(width)} ${r14(size * CAP)}`, overflow: "visible", backdrop: 0, overhang: spill } : { viewBox: "0 0 400 200", overflow: "hidden", backdrop: 1, overhang: spill };
+}
+var DESCENT = 0.25;
+var glowing = (overhang, by) => overhang.map((e) => e + by);
+var room = (v, width) => v.inline ? Infinity : width;
 var BLINKS = 7;
 var typewriter = {
   kind: "vector",
@@ -9300,20 +9446,22 @@ var typewriter = {
   // Monospace, so the caret lands after the last letter however long the text is.
   derived: (v) => {
     const count = Math.max(1, lettersOf(v.text).length);
-    const size = r14(Math.min(44, 340 / ((count + 1) * MONO_EM)));
+    const size = r14(Math.min(44, room(v, 340) / ((count + 1) * MONO_EM)));
     const left = r14(200 - (count + 1) * MONO_EM * size / 2);
     const typing = Math.round(count * Number(v.pace));
+    const base = r14(100 + size * 0.35);
     return {
+      ...frame(v, left, (count + 1) * MONO_EM * size, base, size, [0.08, 0, DESCENT, 0]),
       size,
       left,
-      base: r14(100 + size * 0.35),
+      base,
       end: r14(left + count * MONO_EM * size),
       typing,
       ...Object.fromEntries(Array.from({ length: BLINKS }, (_, k) => [`blink${k}`, typing + k * 500]))
     };
   },
   motion: {
-    svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='Hello, world.' label='Text'}} {{paper: color default=#111827 label='Background'}} {{ink: color default=#F9FAFB label='Text colour'}} {{pace: float min=30 max=300 default=90 step=5 label='Ms per letter'}} --><rect width="400" height="200" fill="{{paper}}"/><text id="typed" x="{{left}}" y="{{base}}" font-family="${MONO}" font-size="{{size}}" fill="{{ink}}" xml:space="preserve">{{text}}</text><text id="caret" x="{{end}}" y="{{base}}" font-family="${MONO}" font-size="{{size}}" fill="{{ink}}" opacity="0">\u258C</text></svg>`,
+    svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Hello, world.' label='Text'}} {{paper: color default=#111827 label='Background'}} {{ink: color default=#F9FAFB label='Text colour'}} {{pace: float min=30 max=300 default=90 step=5 label='Ms per letter'}} ${typeface(MONO, 400)} --><rect width="400" height="200" fill="{{paper}}" opacity="{{backdrop}}"/><text id="typed" x="{{left}}" y="{{base}}" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}" xml:space="preserve">{{text}}</text><text id="caret" x="{{end}}" y="{{base}}" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}" opacity="0">\u258C</text></svg>`,
     animate: [
       { id: "typed", write: "{{text}}", caret: "\u258C", ms: n4("typing"), ease: "linear" },
       // Hidden while the writer shows its own caret, then blinking where it stopped.
@@ -9335,13 +9483,13 @@ var scrambleText = {
   ],
   derived: (v) => {
     const count = Math.max(1, lettersOf(v.text).length);
-    const size = r14(Math.min(60, 360 / (count * MONO_EM)));
+    const size = r14(Math.min(60, room(v, 360) / (count * MONO_EM)));
     const width = r14(count * MONO_EM * size);
     const base = r14(100 + size * 0.35);
-    return { size, base, barX: r14(200 - width / 2), barY: r14(base + size * 0.3), barW: width, decode: Math.round(count * Number(v.pace)), glowWide: Number(v.glow) * 2 };
+    return { size, base, barX: r14(200 - width / 2), barY: r14(base + size * 0.3), barW: width, decode: Math.round(count * Number(v.pace)), glowWide: Number(v.glow) * 2, ...frame(v, 200 - width / 2, width, base, size, glowing([0.08, 0, Math.max(DESCENT, 0.3 + 3 / size), 0], Number(v.glow) * 4 / size)) };
   },
   motion: {
-    svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='ACCESS GRANTED' label='Text'}} {{glyphs: text default='ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&@$*+' label='Scramble glyphs'}} {{background: color default=#05070D label='Background'}} {{ink: color default=#E2E8F0 label='Text colour'}} {{accent: color default=#22D3EE label='Accent'}} {{pace: float min=20 max=250 default=70 step=5 label='Ms per letter'}} {{glow: float min=0 max=6 default=2 step=0.5 label='Glow'}} --><defs><filter id="glow" x="-20%" y="-50%" width="140%" height="200%"><feGaussianBlur stdDeviation="{{glowWide}}" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><rect width="400" height="200" fill="{{background}}"/><text id="word" x="200" y="{{base}}" text-anchor="middle" font-family="${MONO}" font-size="{{size}}" font-weight="700" fill="{{ink}}" filter="url(#glow)" xml:space="preserve">{{text}}</text><rect id="bar" x="{{barX}}" y="{{barY}}" width="0" height="3" fill="{{accent}}"/></svg>`,
+    svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='ACCESS GRANTED' label='Text'}} {{glyphs: text default='ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&@$*+' label='Scramble glyphs'}} {{background: color default=#05070D label='Background'}} {{ink: color default=#E2E8F0 label='Text colour'}} {{accent: color default=#22D3EE label='Accent'}} {{pace: float min=20 max=250 default=70 step=5 label='Ms per letter'}} {{glow: float min=0 max=6 default=2 step=0.5 label='Glow'}} ${typeface(MONO, 700)} --><defs><filter id="glow" x="-20%" y="-50%" width="140%" height="200%"><feGaussianBlur stdDeviation="{{glowWide}}" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><text id="word" x="200" y="{{base}}" text-anchor="middle" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}" filter="url(#glow)" xml:space="preserve">{{text}}</text><rect id="bar" x="{{barX}}" y="{{barY}}" width="0" height="3" fill="{{accent}}"/></svg>`,
     animate: [
       // Pure noise for a moment (the scramble runs before the change starts), then it decodes.
       { id: "word", write: "{{text}}", scramble: "{{glyphs}}", delay: 500, ms: n4("decode"), ease: "linear" },
@@ -9367,10 +9515,11 @@ var kineticStagger = {
     const letters = lettersOf(v.text).slice(0, SLOTS2);
     const widths = letters.map((c) => textWidthEm(c));
     const ems = Math.max(0.6, widths.reduce((a, b) => a + b, 0));
-    const size = Math.min(92, 370 / ems);
+    const size = Math.min(92, room(v, 370) / ems);
     const base = 100 + size * 0.35;
     const stagger = Number(v.stagger);
     const out = {
+      ...frame(v, 200 - ems * size / 2, ems * size, base, size, [0.15, 0, Math.max(DESCENT, 0.2 + 6 / size), 0]),
       size: r14(size),
       base: r14(base),
       rise: r14(base - size * 0.1),
@@ -9392,9 +9541,9 @@ var kineticStagger = {
     return out;
   },
   motion: {
-    svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='Kinetic' label='Text'}} {{background: color default=#F8FAFC label='Background'}} {{ink: color default=#0F172A label='Text colour'}} {{accent: color default=#F43F5E label='Underline'}} {{stagger: float min=20 max=200 default=55 step=5 label='Ms between letters'}} --><rect width="400" height="200" fill="{{background}}"/>${Array.from(
+    svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Kinetic' label='Text'}} {{background: color default=#F8FAFC label='Background'}} {{ink: color default=#0F172A label='Text colour'}} {{accent: color default=#F43F5E label='Underline'}} {{stagger: float min=20 max=200 default=55 step=5 label='Ms between letters'}} ${typeface(HEAVY, 900)} --><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/>${Array.from(
       { length: SLOTS2 },
-      (_, i) => `<text id="l${i}" text-anchor="middle" transform="translate({{x${i}}} {{drop}}) rotate(-28) scale(0.3)" opacity="0" font-family="${HEAVY}" font-size="{{size}}" font-weight="900" fill="{{ink}}">{{c${i}}}</text>`
+      (_, i) => `<text id="l${i}" text-anchor="middle" transform="translate({{x${i}}} {{drop}}) rotate(-28) scale(0.3)" opacity="0" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}">{{c${i}}}</text>`
     ).join("")}<rect id="line" x="{{lineX}}" y="{{lineY}}" width="0" height="6" rx="3" fill="{{accent}}"/></svg>`,
     animate: [
       ...Array.from({ length: SLOTS2 }, (_, i) => [
@@ -9428,8 +9577,10 @@ var neonSign = {
   derived: (v) => {
     const letters = lettersOf(v.text);
     const k = Math.min(Math.max(0, Math.round(Number(v.faulty)) - 1), Math.max(0, letters.length - 1));
-    const { size, length } = fit2(String(v.text), 340, 84);
+    const { size, length, left } = fit2(String(v.text), room(v, 340), 84);
     return {
+      ...frame(v, left, length, 100 + size * 0.3, size, glowing([0.1, 0, DESCENT, 0], Number(v.glow) * 6 / size)),
+      hazeX: r14(Math.max(170, length / 2 + 30)),
       head: letters.slice(0, k).join(""),
       mid: letters[k] ?? "",
       tail: letters.slice(k + 1).join(""),
@@ -9441,12 +9592,12 @@ var neonSign = {
     };
   },
   motion: (() => {
-    const word = `x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="'Pacifico', 'Brush Script MT', 'Segoe Script', 'Snell Roundhand', cursive" font-size="{{size}}"`;
+    const word = `x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}"`;
     const runs = (id) => `<tspan>{{head}}</tspan><tspan id="${id}">{{mid}}</tspan><tspan>{{tail}}</tspan>`;
     const startUp = [[0, 0], [150, 0.85], [210, 0], [330, 1], [390, 0.15], [450, 1], [620, 0.35], [680, 1]];
     const buzz = [[0, 1], [1300, 0.15], [1350, 1], [1420, 0.2], [1520, 1], [2100, 0.1], [2160, 1], [2230, 0.25], [2280, 1]];
     return {
-      svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='Open late' label='Text'}} {{tube: color default=#FF3DA5 label='Tube'}} {{wall: color default=#120612 label='Wall'}} {{glow: float min=0.5 max=8 default=3.5 step=0.5 label='Glow'}} {{faulty: int min=1 max=24 default=6 label='Buzzing letter'}} --><defs><filter id="neon" x="-30%" y="-80%" width="160%" height="260%"><feGaussianBlur in="SourceGraphic" stdDeviation="{{glow}}" result="near"/><feGaussianBlur in="SourceGraphic" stdDeviation="{{far}}" result="far"/><feMerge><feMergeNode in="far"/><feMergeNode in="far"/><feMergeNode in="near"/><feMergeNode in="SourceGraphic"/></feMerge></filter><filter id="haze" x="-50%" y="-100%" width="200%" height="300%"><feGaussianBlur stdDeviation="30"/></filter></defs><rect width="400" height="200" fill="{{wall}}"/><g id="sign" opacity="0"><ellipse cx="200" cy="100" rx="170" ry="55" fill="{{tube}}" opacity="0.18" filter="url(#haze)"/><text ${word} fill="{{tube}}" stroke="{{tube}}" stroke-width="1.5" filter="url(#neon)">${runs("buzzGlow")}</text><text ${word} fill="{{core}}">${runs("buzzCore")}</text></g></svg>`,
+      svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Open late' label='Text'}} {{tube: color default=#FF3DA5 label='Tube'}} {{wall: color default=#120612 label='Wall'}} {{glow: float min=0.5 max=8 default=3.5 step=0.5 label='Glow'}} {{faulty: int min=1 max=24 default=6 label='Buzzing letter'}} ${typeface(SCRIPT, 400)} --><defs><filter id="neon" x="-30%" y="-80%" width="160%" height="260%"><feGaussianBlur in="SourceGraphic" stdDeviation="{{glow}}" result="near"/><feGaussianBlur in="SourceGraphic" stdDeviation="{{far}}" result="far"/><feMerge><feMergeNode in="far"/><feMergeNode in="far"/><feMergeNode in="near"/><feMergeNode in="SourceGraphic"/></feMerge></filter><filter id="haze" x="-50%" y="-100%" width="200%" height="300%"><feGaussianBlur stdDeviation="30"/></filter></defs><rect width="400" height="200" fill="{{wall}}" opacity="{{backdrop}}"/><g id="sign" opacity="0"><ellipse cx="200" cy="100" rx="{{hazeX}}" ry="55" fill="{{tube}}" opacity="0.18" filter="url(#haze)"/><text ${word} fill="{{tube}}" stroke="{{tube}}" stroke-width="1.5" filter="url(#neon)">${runs("buzzGlow")}</text><text ${word} fill="{{core}}">${runs("buzzCore")}</text></g></svg>`,
       animate: [
         ...holds("sign", "opacity", startUp),
         // fill-opacity rather than opacity: browsers ignore opacity on a <tspan>.
@@ -9469,11 +9620,12 @@ var strokeDrawText = {
   ],
   // <text> takes no pathLength, so `draw` cannot measure it: the dash grows instead, longer than any letter's outline.
   derived: (v) => {
-    const { size, length } = fit2(String(v.text), 360, 100);
-    return { size, length, base: r14(100 + size * 0.35), dash: Math.round(size * 6) };
+    const { size, length, left } = fit2(String(v.text), room(v, 360), 100);
+    const edge = Number(v.width) / 2 / size;
+    return { size, length, base: r14(100 + size * 0.35), dash: Math.round(size * 6), ...frame(v, left, length, 100 + size * 0.35, size, glowing([0.05, 0, DESCENT, 0], edge)) };
   },
   motion: {
-    svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='Draw' label='Text'}} {{background: color default=#FFFBF5 label='Background'}} {{outline: color default=#1E293B label='Outline'}} {{fill: color default=#F97316 label='Fill'}} {{width: float min=0.5 max=6 default=2 step=0.5 label='Outline width'}} {{fillOpacity: float min=0 max=1 default=1 label='Fill opacity'}} --><rect width="400" height="200" fill="{{background}}"/><text id="word" x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${HEAVY}" font-size="{{size}}" font-weight="900" fill="{{fill}}" fill-opacity="0" stroke="{{outline}}" stroke-width="{{width}}" stroke-linejoin="round" stroke-dasharray="0 {{dash}}">{{text}}</text></svg>`,
+    svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Draw' label='Text'}} {{background: color default=#FFFBF5 label='Background'}} {{outline: color default=#1E293B label='Outline'}} {{fill: color default=#F97316 label='Fill'}} {{width: float min=0.5 max=6 default=2 step=0.5 label='Outline width'}} {{fillOpacity: float min=0 max=1 default=1 label='Fill opacity'}} ${typeface(HEAVY, 900)} --><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><text id="word" x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{fill}}" fill-opacity="0" stroke="{{outline}}" stroke-width="{{width}}" stroke-linejoin="round" stroke-dasharray="0 {{dash}}">{{text}}</text></svg>`,
     animate: [
       { id: "word", attrs: { "stroke-dasharray": ["0 {{dash}}", "{{dash}} 0"] }, ms: 2e3, ease: "in-out" },
       { id: "word", attrs: { "fill-opacity": [0, n4("fillOpacity")] }, delay: 1500, ms: 700, ease: "out" }
@@ -9493,8 +9645,9 @@ var splitReveal = {
     { name: "Gold on black", values: { background: [0.02, 0.02, 0.02], ink: [0.96, 0.84, 0.55], line: [0.96, 0.84, 0.55] } }
   ],
   derived: (v) => {
-    const { size, length, left } = fit2(String(v.text), 360, 88);
+    const { size, length, left } = fit2(String(v.text), room(v, 360), 88);
     return {
+      ...frame(v, left, length, 100 + size * 0.36, size, [0.05, 10 / size, Math.max(DESCENT, 34 / size), 10 / size]),
       size,
       length,
       base: r14(100 + size * 0.36),
@@ -9505,9 +9658,9 @@ var splitReveal = {
     };
   },
   motion: (() => {
-    const word = `<text x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS3}" font-size="{{size}}" font-weight="800" fill="{{ink}}">{{text}}</text>`;
+    const word = `<text x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}">{{text}}</text>`;
     return {
-      svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='Chapter One' label='Text'}} {{caption: text default='The beginning' label='Caption'}} {{background: color default=#0F172A label='Background'}} {{ink: color default=#F8FAFC label='Text colour'}} {{line: color default=#38BDF8 label='Line'}} --><defs><clipPath id="above"><rect width="400" height="100"/></clipPath><clipPath id="below"><rect y="100" width="400" height="100"/></clipPath></defs><rect width="400" height="200" fill="{{background}}"/><g clip-path="url(#above)"><g id="top" transform="translate(0 {{shift}})">${word}</g></g><g clip-path="url(#below)"><g id="bottom" transform="translate(0 -{{shift}})">${word}</g></g><path id="line" d="M{{lineX1}} 100 H{{lineX2}}" stroke="{{line}}" stroke-width="2.5" stroke-linecap="round"/><text id="caption" x="200" y="{{captionY}}" text-anchor="middle" font-family="${SANS3}" font-size="13" letter-spacing="3" fill="{{ink}}" opacity="0">{{caption}}</text></svg>`,
+      svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Chapter One' label='Text'}} {{caption: text default='The beginning' label='Caption'}} {{background: color default=#0F172A label='Background'}} {{ink: color default=#F8FAFC label='Text colour'}} {{line: color default=#38BDF8 label='Line'}} ${typeface(SANS3, 800)} --><defs><clipPath id="above"><rect x="-5000" y="-5000" width="10400" height="5100"/></clipPath><clipPath id="below"><rect x="-5000" y="100" width="10400" height="5100"/></clipPath></defs><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><g clip-path="url(#above)"><g id="top" transform="translate(0 {{shift}})">${word}</g></g><g clip-path="url(#below)"><g id="bottom" transform="translate(0 -{{shift}})">${word}</g></g><path id="line" d="M{{lineX1}} 100 H{{lineX2}}" stroke="{{line}}" stroke-width="2.5" stroke-linecap="round"/><text id="caption" x="200" y="{{captionY}}" text-anchor="middle" font-family="{{font}}" font-size="13" letter-spacing="3" fill="{{ink}}" opacity="0">{{caption}}</text></svg>`,
       animate: [
         { id: "line", draw: true, ms: 600, ease: "in-out" },
         { id: "top", attrs: { transform: ["translate(0 {{shift}})", "translate(0 0)"] }, delay: 450, ms: 800, ease: "out" },
@@ -9533,12 +9686,13 @@ var highlighter = {
   ],
   // The swipe runs a little past the phrase at both ends, across its lower half, with a ragged second pass.
   derived: (v) => {
-    const { size, length, left } = fit2(String(v.text), 330, 56);
+    const { size, length, left } = fit2(String(v.text), room(v, 330), 56);
     const base = 100 + size * 0.35;
     const x0 = left - size * 0.25;
     const x1 = 400 - left + size * 0.2;
     const y = base - size * 0.3;
     return {
+      ...frame(v, left, length, base, size, [0.05, 0.2, DESCENT, 0.25]),
       size,
       length,
       base: r14(base),
@@ -9549,7 +9703,7 @@ var highlighter = {
     };
   },
   motion: {
-    svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='Ship it faster' label='Phrase'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#111827 label='Text colour'}} {{marker: color default=#FDE047 label='Marker'}} --><rect width="400" height="200" fill="{{background}}"/><g transform="rotate(-1.2 200 100)" opacity="0.9"><path id="swipe" d="{{swipe}}" fill="none" stroke="{{marker}}" stroke-width="{{thick}}"/><path id="ragged" d="{{ragged}}" fill="none" stroke="{{marker}}" stroke-width="{{thin}}" stroke-linecap="round"/></g><text id="phrase" x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS3}" font-size="{{size}}" font-weight="700" fill="{{ink}}" opacity="0">{{text}}</text></svg>`,
+    svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Ship it faster' label='Phrase'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#111827 label='Text colour'}} {{marker: color default=#FDE047 label='Marker'}} ${typeface(SANS3, 700)} --><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><g transform="rotate(-1.2 200 100)" opacity="0.9"><path id="swipe" d="{{swipe}}" fill="none" stroke="{{marker}}" stroke-width="{{thick}}"/><path id="ragged" d="{{ragged}}" fill="none" stroke="{{marker}}" stroke-width="{{thin}}" stroke-linecap="round"/></g><text id="phrase" x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}" opacity="0">{{text}}</text></svg>`,
     animate: [
       { id: "phrase", attrs: { opacity: [0, 1] }, ms: 300, ease: "out" },
       { id: "swipe", draw: true, delay: 350, ms: 650, ease: "in-out" },
@@ -9578,12 +9732,14 @@ var wordCycle = {
     const lead = textWidthEm(String(v.prefix));
     const ems = words.map((w) => Math.max(0.6, textWidthEm(w)));
     const total = lead + 0.3 + Math.max(...ems);
-    const size = Math.min(52, 370 / total);
+    const size = Math.min(52, room(v, 370) / total);
     const left = 200 - total * size / 2;
     const base = 100 + size * 0.35;
     const step = size * 1.3;
     const wx = left + (lead + 0.3) * size;
     return {
+      ...frame(v, left, total * size, base, size, [0.08, 0, Math.max(DESCENT, 0.18 + 4 / size), 0]),
+      bold: Math.min(900, Number(v.weight) + 100),
       size: r14(size),
       base: r14(base),
       px: r14(left),
@@ -9605,9 +9761,9 @@ var wordCycle = {
     };
   },
   motion: {
-    svg: `<svg viewBox="0 0 400 200"><!-- {{prefix: text default='We build' label='Lead-in'}} {{word1: text default=apps label='Word 1'}} {{word2: text default=brands label='Word 2'}} {{word3: text default=websites label='Word 3'}} {{word4: text default=games label='Word 4'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#0F172A label='Text colour'}} {{accent: color default=#6366F1 label='Accent'}} --><defs><clipPath id="window"><rect x="{{clipX}}" y="{{clipY}}" width="{{clipW}}" height="{{clipH}}"/></clipPath></defs><rect width="400" height="200" fill="{{background}}"/><text x="{{px}}" y="{{base}}" textLength="{{plen}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS3}" font-size="{{size}}" font-weight="700" fill="{{ink}}">{{prefix}}</text><g clip-path="url(#window)"><g id="reel" transform="translate(0 -0)">${Array.from(
+    svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{prefix: text default='We build' label='Lead-in'}} {{word1: text default=apps label='Word 1'}} {{word2: text default=brands label='Word 2'}} {{word3: text default=websites label='Word 3'}} {{word4: text default=games label='Word 4'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#0F172A label='Text colour'}} {{accent: color default=#6366F1 label='Accent'}} ${typeface(SANS3, 700)} --><defs><clipPath id="window"><rect x="{{clipX}}" y="{{clipY}}" width="{{clipW}}" height="{{clipH}}"/></clipPath></defs><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><text x="{{px}}" y="{{base}}" textLength="{{plen}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}">{{prefix}}</text><g clip-path="url(#window)"><g id="reel" transform="translate(0 -0)">${Array.from(
       { length: CYCLE_WORDS + 1 },
-      (_, k) => `<text x="{{wx}}" y="{{y${k}}}" textLength="{{len${k}}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS3}" font-size="{{size}}" font-weight="800" fill="{{accent}}">{{w${k % CYCLE_WORDS}}}</text>`
+      (_, k) => `<text x="{{wx}}" y="{{y${k}}}" textLength="{{len${k}}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{bold}}" fill="{{accent}}">{{w${k % CYCLE_WORDS}}}</text>`
     ).join("")}</g></g><rect id="under" x="{{wx}}" y="{{underY}}" width="{{len0}}" height="4" rx="2" fill="{{accent}}"/></svg>`,
     animate: Array.from({ length: CYCLE_WORDS }, (_, i) => {
       const at2 = { delay: (i + 1) * SHOW_MS + i * ROLL_MS, ms: ROLL_MS, ease: "in-out" };
@@ -9618,7 +9774,7 @@ var wordCycle = {
     }).flat()
   }
 };
-var WAVE = `M-200 0${" q25 -8 50 0 t50 0".repeat(8)} V320 H-200Z`;
+var WAVE = `M-2000 0${" q25 -8 50 0 t50 0".repeat(46)} V320 H-2000Z`;
 var liquidFill = {
   kind: "vector",
   id: "liquid-fill",
@@ -9634,14 +9790,14 @@ var liquidFill = {
   ],
   // The surface starts under the letters and ends above their caps.
   derived: (v) => {
-    const { size, length } = fit2(String(v.text), 360, 110);
+    const { size, length, left } = fit2(String(v.text), room(v, 360), 110);
     const base = 100 + size * 0.36;
-    return { size, length, base: r14(base), low: r14(base + 12), high: r14(base - size * 0.82 - 12) };
+    return { ...frame(v, left, length, base, size), size, length, base: r14(base), low: r14(base + 12), high: r14(base - size * 0.82 - 12) };
   },
   motion: (() => {
-    const word = `x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${HEAVY}" font-size="{{size}}" font-weight="900"`;
+    const word = `x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}"`;
     return {
-      svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='FILL' label='Text'}} {{background: color default=#FFFFFF label='Background'}} {{empty: color default=#E0F2FE label='Empty'}} {{liquid: color default=#0284C7 label='Liquid'}} {{liquid2: color default=#38BDF8 label='Liquid sweep'}} --><defs><clipPath id="letters"><text ${word}>{{text}}</text></clipPath><linearGradient id="liq" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="400" y2="0" spreadMethod="repeat"><stop offset="0" stop-color="{{liquid}}"/><stop offset="0.5" stop-color="{{liquid2}}"/><stop offset="1" stop-color="{{liquid}}"/></linearGradient></defs><rect width="400" height="200" fill="{{background}}"/><text ${word} fill="{{empty}}" stroke="{{liquid}}" stroke-width="1.5" stroke-opacity="0.5">{{text}}</text><g clip-path="url(#letters)"><g id="level" transform="translate(0 {{low}})"><path id="back" d="${WAVE}" fill="{{liquid}}" opacity="0.45" transform="translate(-50 -5)"/><path id="wave" d="${WAVE}" fill="url(#liq)" transform="translate(0 0)"/></g></g></svg>`,
+      svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='FILL' label='Text'}} {{background: color default=#FFFFFF label='Background'}} {{empty: color default=#E0F2FE label='Empty'}} {{liquid: color default=#0284C7 label='Liquid'}} {{liquid2: color default=#38BDF8 label='Liquid sweep'}} ${typeface(HEAVY, 900)} --><defs><clipPath id="letters"><text ${word}>{{text}}</text></clipPath><linearGradient id="liq" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="400" y2="0" spreadMethod="repeat"><stop offset="0" stop-color="{{liquid}}"/><stop offset="0.5" stop-color="{{liquid2}}"/><stop offset="1" stop-color="{{liquid}}"/></linearGradient></defs><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><text ${word} fill="{{empty}}" stroke="{{liquid}}" stroke-width="1.5" stroke-opacity="0.5">{{text}}</text><g clip-path="url(#letters)"><g id="level" transform="translate(0 {{low}})"><path id="back" d="${WAVE}" fill="{{liquid}}" opacity="0.45" transform="translate(-50 -5)"/><path id="wave" d="${WAVE}" fill="url(#liq)" transform="translate(0 0)"/></g></g></svg>`,
       animate: [
         { id: "level", attrs: { transform: ["translate(0 {{low}})", "translate(0 {{high}})"] }, ms: 2800, ease: "out" },
         { id: "wave", attrs: { transform: ["translate(0 0)", "translate(-200 0)"] }, ms: 3e3, ease: "linear" },
@@ -9683,13 +9839,15 @@ var glitchText = {
     { name: "Vapor", values: { left: [1, 0.3, 0.85], right: [0.4, 0.6, 1], background: [0.08, 0.02, 0.12], amount: 1.4 } }
   ],
   derived: (v) => {
-    const { size, length } = fit2(String(v.text), 340, 100);
+    const { size, length, left } = fit2(String(v.text), room(v, 340), 100);
+    const a = Number(v.amount);
     const base = 100 + size * 0.36;
     const top = base - size * 0.78;
-    const cuts = [0, ...BANDS.map((f) => r14(top + f * (base - top))), 200];
+    const cuts = [-1e3, ...BANDS.map((f) => r14(top + f * (base - top))), 1200];
     const unit = size * Number(v.amount);
     const shift = ([x, y]) => `translate(${r14(x * unit)} ${r14(y * unit)})`;
     return {
+      ...frame(v, left, length, base, size, [0.05 + 0.04 * a, 0.25 * a, DESCENT + 0.04 * a, 0.25 * a]),
       size,
       length,
       base: r14(base),
@@ -9704,10 +9862,10 @@ var glitchText = {
     };
   },
   motion: (() => {
-    const word = (paint) => `<text x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${HEAVY}" font-size="{{size}}" font-weight="900" ${paint}>{{text}}</text>`;
+    const word = (paint) => `<text x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" ${paint}>{{text}}</text>`;
     const jumps = (id, value) => GLITCH.map((key, k) => ({ id, attrs: { transform: [value(k), value(k)] }, delay: key.at, ms: 0 }));
     return {
-      svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='GLITCH' label='Text'}} {{background: color default=#07070B label='Background'}} {{ink: color default=#F5F5F5 label='Text colour'}} {{left: color default=#FF0040 label='Red copy'}} {{right: color default=#00F0FF label='Cyan copy'}} {{amount: float min=0 max=3 default=1 step=0.1 label='Intensity'}} --><defs>${[0, 1, 2, 3].map((b) => `<clipPath id="slice${b}"><rect x="-100" y="{{cut${b}}}" width="600" height="{{band${b}}}"/></clipPath>`).join("")}</defs><rect width="400" height="200" fill="{{background}}"/><g id="red" style="mix-blend-mode:screen">${word(`fill="{{left}}"`)}</g><g id="cyan" style="mix-blend-mode:screen">${word(`fill="{{right}}"`)}</g>${[0, 1, 2, 3].map((b) => `<g clip-path="url(#slice${b})"><g id="s${b}">${word(`fill="{{ink}}"`)}</g></g>`).join("")}</svg>`,
+      svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='GLITCH' label='Text'}} {{background: color default=#07070B label='Background'}} {{ink: color default=#F5F5F5 label='Text colour'}} {{left: color default=#FF0040 label='Red copy'}} {{right: color default=#00F0FF label='Cyan copy'}} {{amount: float min=0 max=3 default=1 step=0.1 label='Intensity'}} ${typeface(HEAVY, 900)} --><defs>${[0, 1, 2, 3].map((b) => `<clipPath id="slice${b}"><rect x="-5000" y="{{cut${b}}}" width="10400" height="{{band${b}}}"/></clipPath>`).join("")}</defs><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><g id="red" style="mix-blend-mode:screen">${word(`fill="{{left}}"`)}</g><g id="cyan" style="mix-blend-mode:screen">${word(`fill="{{right}}"`)}</g>${[0, 1, 2, 3].map((b) => `<g clip-path="url(#slice${b})"><g id="s${b}">${word(`fill="{{ink}}"`)}</g></g>`).join("")}</svg>`,
       animate: [
         ...jumps("red", (k) => `{{red${k}}}`),
         ...jumps("cyan", (k) => `{{cyan${k}}}`),
@@ -9733,13 +9891,15 @@ var extrudedText = {
   ],
   // Each layer sits a step further back along the extrude direction, shaded from the side colour to the shadow.
   derived: (v) => {
-    const { size, length } = fit2(String(v.text), 320, 96);
+    const { size, length, left } = fit2(String(v.text), room(v, 320), 96);
+    const d = 0.36 * Number(v.depth);
     const step = size * 0.03 * Number(v.depth);
     const at2 = (deg, i) => {
       const a = deg * Math.PI / 180;
       return `translate(${r14(Math.cos(a) * step * i)} ${r14(Math.sin(a) * step * i)})`;
     };
     return {
+      ...frame(v, left, length, 92 + size * 0.35, size, [0.05, 0.77 * d, DESCENT + d, 0.77 * d]),
       size,
       length,
       base: r14(92 + size * 0.35),
@@ -9756,10 +9916,10 @@ var extrudedText = {
     };
   },
   motion: (() => {
-    const word = (paint) => `x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${HEAVY}" font-size="{{size}}" font-weight="900" stroke-linejoin="round" ${paint}`;
+    const word = (paint) => `x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" stroke-linejoin="round" ${paint}`;
     const layers = Array.from({ length: LAYERS }, (_, k) => LAYERS - k);
     return {
-      svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='RETRO' label='Text'}} {{background: color default=#FFE8C2 label='Background'}} {{face: color default=#FFD23F label='Face'}} {{outline: color default=#1A1423 label='Outline'}} {{side: color default=#EE4266 label='Extrude'}} {{shade: color default=#3B1F2B label='Shadow'}} {{depth: float min=0.2 max=2 default=1 step=0.1 label='Depth'}} --><rect width="400" height="200" fill="{{background}}"/>${layers.map((i) => `<text id="e${i}" transform="translate(0 0)" ${word(`fill="{{fill${i}}}" stroke="{{fill${i}}}" stroke-width="2"`)}>{{text}}</text>`).join("")}<text ${word(`fill="{{face}}" stroke="{{outline}}" stroke-width="2.5" paint-order="stroke"`)}>{{text}}</text></svg>`,
+      svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='RETRO' label='Text'}} {{background: color default=#FFE8C2 label='Background'}} {{face: color default=#FFD23F label='Face'}} {{outline: color default=#1A1423 label='Outline'}} {{side: color default=#EE4266 label='Extrude'}} {{shade: color default=#3B1F2B label='Shadow'}} {{depth: float min=0.2 max=2 default=1 step=0.1 label='Depth'}} ${typeface(HEAVY, 900)} --><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/>${layers.map((i) => `<text id="e${i}" transform="translate(0 0)" ${word(`fill="{{fill${i}}}" stroke="{{fill${i}}}" stroke-width="2"`)}>{{text}}</text>`).join("")}<text ${word(`fill="{{face}}" stroke="{{outline}}" stroke-width="2.5" paint-order="stroke"`)}>{{text}}</text></svg>`,
       animate: layers.flatMap((i) => [
         { id: `e${i}`, attrs: { transform: ["translate(0 0)", `{{a${i}}}`] }, ms: 700, ease: "out" },
         { id: `e${i}`, attrs: { transform: [`{{a${i}}}`, `{{b${i}}}`] }, delay: 1200, ms: 1500, ease: "in-out" },
@@ -9782,129 +9942,6 @@ var textEffects = [
   extrudedText
 ];
 
-// src/catalog/types.ts
-var EFFECT_CATEGORIES = [
-  "gradient",
-  "organic",
-  "pattern",
-  "light",
-  "space",
-  "retro",
-  "image",
-  "overlay",
-  "text",
-  "morph",
-  "interaction",
-  "pyrotechnics",
-  "timewarp",
-  "melt",
-  "electric",
-  "transition",
-  "loader",
-  "data",
-  "icon"
-];
-var VECTOR_CONTROL_TYPES = ["float", "int", "bool", "color", "text"];
-var PLACEHOLDER = /\{\{\s*([A-Za-z_]\w*)\s*(?::\s*([A-Za-z0-9]*)([^}]*))?\}\}/g;
-function motionStrings(motion) {
-  const out = [];
-  const walk = (v) => {
-    if (typeof v === "string") out.push(v);
-    else if (Array.isArray(v)) v.forEach(walk);
-    else if (v && typeof v === "object") Object.values(v).forEach(walk);
-  };
-  walk(motion);
-  return out;
-}
-function vectorControls(motion) {
-  const controls = [];
-  const seen = /* @__PURE__ */ new Set();
-  for (const text of motionStrings(motion)) {
-    for (const [, name, type, attributes] of text.matchAll(PLACEHOLDER)) {
-      if (type === void 0 || seen.has(name) || !VECTOR_CONTROL_TYPES.includes(type)) continue;
-      seen.add(name);
-      const colour = type === "color";
-      controls.push(controlFromDeclaration(name, colour ? "vec3" : type, `${attributes}${colour ? " color" : ""}`, controls.length + 1));
-    }
-  }
-  return controls;
-}
-function vectorEffectControls(effect) {
-  const declared = vectorControls(effect.motion);
-  const names = new Set(declared.map((c) => c.name));
-  const listed = (effect.controls ?? []).filter((c) => !names.has(c.name));
-  return [...declared, ...listed.map((c, i) => vectorControlDef(c, declared.length + i + 1))];
-}
-function vectorControlIssues(motion) {
-  const issues = [];
-  const declarations = /* @__PURE__ */ new Map();
-  for (const text of motionStrings(motion)) {
-    for (const [whole, name, type] of text.matchAll(PLACEHOLDER)) {
-      if (type === void 0) continue;
-      if (!VECTOR_CONTROL_TYPES.includes(type))
-        issues.push(`${whole}: a control's type is one of ${VECTOR_CONTROL_TYPES.join(", ")}`);
-      else if (declarations.has(name) && declarations.get(name) !== whole)
-        issues.push(`"${name}" is declared twice; declare it once and write {{${name}}} everywhere else`);
-      else declarations.set(name, whole);
-    }
-  }
-  return issues;
-}
-function written(control, value) {
-  if (control.color && Array.isArray(value)) return rgbToHex(value);
-  if (Array.isArray(value)) return value.join(" ");
-  return value;
-}
-var escapeMarkup = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-function vectorControlDef(control, line = 0) {
-  const min = control.min ?? 0;
-  return {
-    name: control.name,
-    type: control.type,
-    label: control.label ?? control.name,
-    color: control.color ?? false,
-    min,
-    max: control.max ?? Math.max(min + 1, 1),
-    step: control.step ?? (control.type === "int" ? 1 : 0.01),
-    default: control.default,
-    line
-  };
-}
-function renderVectorEffect(effect, values = {}) {
-  const filled = {};
-  const placeholders = /* @__PURE__ */ new Map();
-  for (const control of vectorEffectControls(effect)) {
-    const given = values[control.name];
-    const check = given === void 0 ? void 0 : checkControlValue(control, given);
-    filled[control.name] = check?.ok ? check.value : control.default;
-    placeholders.set(control.name, written(control, filled[control.name]));
-  }
-  for (const [name, value] of Object.entries(effect.derived?.(filled) ?? {})) placeholders.set(name, value);
-  const fill = (text, markup) => {
-    const whole = /^\{\{\s*([A-Za-z_]\w*)\s*(?::[^}]*)?\}\}$/.exec(text);
-    if (!markup && whole && placeholders.has(whole[1])) return placeholders.get(whole[1]);
-    return text.replace(PLACEHOLDER, (match, name) => {
-      if (!placeholders.has(name)) return match;
-      const value = String(placeholders.get(name));
-      return markup ? escapeMarkup(value) : value;
-    });
-  };
-  const walk = (v) => {
-    if (typeof v === "string") return fill(v, false);
-    if (Array.isArray(v)) return v.map(walk);
-    if (v && typeof v === "object") return Object.fromEntries(Object.entries(v).map(([k, x]) => [k, walk(x)]));
-    return v;
-  };
-  const { svg, ...rest } = effect.motion;
-  return { svg: fill(svg.replace(/<!--[\s\S]*?-->/g, ""), true), ...walk(rest) };
-}
-function colorControl(name, hex, label) {
-  return { name, type: "vec3", color: true, default: hexToRgb(hex) ?? [1, 1, 1], label: label ?? name };
-}
-function numberControl(name, value, min, max, label, step) {
-  return { name, type: "float", default: value, min, max, label: label ?? name, step };
-}
-
 // src/catalog/vector.ts
 var spinner = {
   kind: "vector",
@@ -10317,6 +10354,7 @@ var flowNetwork = {
   }
 };
 var DRIP_BASELINE = 120;
+var DRIP_SIZE = 104;
 var DRIP_CAP = 75;
 var DRIP_TOP = 106;
 var DRIPS2 = [
@@ -10328,6 +10366,9 @@ var DRIPS2 = [
   { at: 0.693, width: 12, length: 42, delay: 60, ms: 1700 },
   { at: 0.793, width: 11, length: 32, delay: 300, ms: 1500 }
 ];
+var DRIP_RUN = 300;
+var DRIP_RUNS = 8;
+var DRIP_SLOTS = Array.from({ length: DRIP_RUNS }, (_, run) => DRIPS2.map((d, k) => ({ ...d, i: run * DRIPS2.length + k, run, delay: d.delay + run * 90 }))).flat();
 var dripText = {
   kind: "vector",
   id: "drip-text",
@@ -10340,55 +10381,63 @@ var dripText = {
     { name: "Slime", values: { fill: [0.55, 0.93, 0.25], outline: [0.06, 0.2, 0.04], shine: [0.85, 1, 0.7] } },
     { name: "Molten gold", values: { fill: [1, 0.78, 0.2], outline: [0.35, 0.16, 0], shine: [1, 0.96, 0.75], drip: 1.5 } }
   ],
-  // The word is stretched to a width set by its length (textLength), so the drips land under its letters in any font.
+  // The word is drawn at its own width (textLength from its estimated width), so the drips land under its letters in any font.
   derived: (v) => {
-    const letters = Math.max(1, Array.from(String(v.word).trim()).length);
-    const width = Math.min(380, letters * 75);
+    const width = Math.round(Math.max(0.6, textWidthEm(String(v.word).trim())) * DRIP_SIZE);
     const left = 200 - width / 2;
+    const runs = Math.min(DRIP_RUNS, Math.max(1, Math.round(width / DRIP_RUN)));
+    const run = width / runs;
+    const r15 = (n5) => Math.round(n5 * 10) / 10;
+    const edge = Number(v.stroke) / 2 / DRIP_SIZE;
+    const tip = (DRIP_TOP + Math.max(...DRIPS2.map((d) => d.length)) * Number(v.drip) + 13 * 0.72 - DRIP_BASELINE) / DRIP_SIZE;
+    const overhang = [edge, edge, Math.max(0.05, tip) + edge, edge].map((e) => Math.round(e * 100) / 100).join(" ");
     return {
       width,
+      fit: v.inline ? 1 : Math.round(Math.min(1, 380 / width) * 1e3) / 1e3,
       // Inline, the picture frames just the word's capitals, from cap height to baseline, so it sits on
       // the line like a letter would; the pop, outline and drips spill out over the text around it.
       viewBox: v.inline ? `${left} ${DRIP_BASELINE - DRIP_CAP} ${width} ${DRIP_CAP}` : "0 0 400 200",
       overflow: v.inline ? "visible" : "hidden",
+      overhang,
       ...Object.fromEntries(
-        DRIPS2.flatMap((d, i) => {
-          const x = Math.round((left + d.at * width) * 10) / 10;
-          const length = Math.round(d.length * Number(v.drip) * 10) / 10;
+        DRIP_SLOTS.flatMap((d) => {
+          const x = r15(left + (d.run + d.at) * run);
+          const length = r15(d.length * Number(v.drip));
           return [
-            [`x${i}`, x],
-            [`left${i}`, x - d.width / 2],
-            [`shine${i}`, x - d.width * 0.25],
-            [`len${i}`, length],
-            [`tip${i}`, DRIP_TOP + length]
+            [`show${d.i}`, d.run < runs ? "inline" : "none"],
+            [`x${d.i}`, x],
+            [`left${d.i}`, r15(x - d.width / 2)],
+            [`shine${d.i}`, r15(x - d.width * 0.25)],
+            [`len${d.i}`, length],
+            [`tip${d.i}`, r15(DRIP_TOP + length)]
           ];
         })
       )
     };
   },
   motion: (() => {
-    const word = `<text x="200" y="${DRIP_BASELINE}" text-anchor="middle" textLength="{{width}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="104" font-weight="{{weight}}" stroke-linejoin="round"`;
-    const drips = (layer, paint) => DRIPS2.map(
-      (d, i) => `<rect id="${layer}r${i}" x="{{left${i}}}" y="${DRIP_TOP}" width="${d.width}" height="0" rx="${d.width / 2}" ${paint}/><circle id="${layer}c${i}" cx="{{x${i}}}" cy="${DRIP_TOP}" r="${d.width * 0.72}" ${paint}/>`
+    const word = `<text x="200" y="${DRIP_BASELINE}" text-anchor="middle" textLength="{{width}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="${DRIP_SIZE}" font-weight="{{weight}}" stroke-linejoin="round"`;
+    const drips = (layer, paint) => DRIP_SLOTS.map(
+      (d) => `<g display="{{show${d.i}}}"><rect id="${layer}r${d.i}" x="{{left${d.i}}}" y="${DRIP_TOP}" width="${d.width}" height="0" rx="${d.width / 2}" ${paint}/><circle id="${layer}c${d.i}" cx="{{x${d.i}}}" cy="${DRIP_TOP}" r="${d.width * 0.72}" ${paint}/></g>`
     ).join("");
     const outline = `fill="{{outline}}" stroke="{{outline}}" stroke-width="{{stroke}}"`;
     const pop = (from, to) => [`translate(200 100) scale(${from}) translate(-200 -100)`, `translate(200 100) scale(${to}) translate(-200 -100)`];
     return {
-      svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}"><!-- {{word: text default=SLOP label='Word'}} {{font: text default='Arial Black, Impact, system-ui, sans-serif' label='Font'}} {{weight: int min=100 max=900 default=900 step=100 label='Weight'}} {{fill: color default=#FF7EB6 label='Fill'}} {{outline: color default=#3A0A2C label='Outline'}} {{shine: color default=#FFD1E6 label='Shine'}} {{drip: float min=0.2 max=2 default=1 label='Drip length'}} {{stroke: float min=0 max=14 default=7 step=0.5 label='Outline width'}} {{inline: bool default=false label='Inline'}} --><g id="word" transform="${pop(0.6, 1)[0]}" opacity="0">${drips("o", outline)}${word} fill="none" stroke="{{outline}}" stroke-width="{{stroke}}">{{word}}</text>${drips("f", `fill="{{fill}}"`)}${word} fill="{{fill}}">{{word}}</text>${DRIPS2.map(
-        (d, i) => `<circle id="s${i}" cx="{{shine${i}}}" cy="${DRIP_TOP}" r="${d.width * 0.2}" fill="{{shine}}" opacity="0"/>`
-      ).join("")}</g></svg>`,
+      svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{word: text default=SLOP label='Word'}} {{font: text default='Arial Black, Impact, system-ui, sans-serif' label='Font'}} {{weight: int min=100 max=900 default=900 step=100 label='Weight'}} {{fill: color default=#FF7EB6 label='Fill'}} {{outline: color default=#3A0A2C label='Outline'}} {{shine: color default=#FFD1E6 label='Shine'}} {{drip: float min=0.2 max=2 default=1 label='Drip length'}} {{stroke: float min=0 max=14 default=7 step=0.5 label='Outline width'}} {{inline: bool default=false label='Inline'}} --><g transform="translate(200 100) scale({{fit}}) translate(-200 -100)"><g id="word" transform="${pop(0.6, 1)[0]}" opacity="0">${drips("o", outline)}${word} fill="none" stroke="{{outline}}" stroke-width="{{stroke}}">{{word}}</text>${drips("f", `fill="{{fill}}"`)}${word} fill="{{fill}}">{{word}}</text>${DRIP_SLOTS.map(
+        (d) => `<circle id="s${d.i}" display="{{show${d.i}}}" cx="{{shine${d.i}}}" cy="${DRIP_TOP}" r="${d.width * 0.2}" fill="{{shine}}" opacity="0"/>`
+      ).join("")}</g></g></svg>`,
       animate: [
         { id: "word", attrs: { transform: pop(0.6, 1.08), opacity: [0, 1] }, ms: 260, ease: "out" },
         { id: "word", attrs: { transform: pop(1.08, 1) }, delay: 260, ms: 200, ease: "in-out" },
-        ...DRIPS2.flatMap((d, i) => {
+        ...DRIP_SLOTS.flatMap((d) => {
           const at2 = { delay: 400 + d.delay, ms: d.ms, ease: "in-out" };
-          const tip = `{{tip${i}}}`;
+          const tip = `{{tip${d.i}}}`;
           return [
             ...["o", "f"].flatMap((layer) => [
-              { id: `${layer}r${i}`, attrs: { height: [0, `{{len${i}}}`] }, ...at2 },
-              { id: `${layer}c${i}`, attrs: { cy: [DRIP_TOP, tip] }, ...at2 }
+              { id: `${layer}r${d.i}`, attrs: { height: [0, `{{len${d.i}}}`] }, ...at2 },
+              { id: `${layer}c${d.i}`, attrs: { cy: [DRIP_TOP, tip] }, ...at2 }
             ]),
-            { id: `s${i}`, attrs: { cy: [DRIP_TOP, tip], opacity: [0, 0.9] }, ...at2 }
+            { id: `s${d.i}`, attrs: { cy: [DRIP_TOP, tip], opacity: [0, 0.9] }, ...at2 }
           ];
         })
       ]
@@ -10518,7 +10567,8 @@ function effectControls(effect) {
 function effectDefaults(effect, options = {}) {
   const preset = options.preset ? effect.presets?.find((p) => p.name === options.preset)?.values : void 0;
   const merged = { ...preset, ...options.values };
-  return Object.fromEntries(effectControls(effect).map((c) => [c.name, controlValue(c, merged)]));
+  const keep = (c) => effect.kind === "vector" && c.color && isCurrentColor(merged[c.name]);
+  return Object.fromEntries(effectControls(effect).map((c) => [c.name, keep(c) ? CURRENT_COLOR : controlValue(c, merged)]));
 }
 
 export {
@@ -10538,6 +10588,8 @@ export {
   vectorEffectControls,
   vectorControlIssues,
   vectorControlDef,
+  CURRENT_COLOR,
+  isCurrentColor,
   renderVectorEffect,
   colorControl,
   numberControl,
@@ -10548,4 +10600,4 @@ export {
   effectControls,
   effectDefaults
 };
-//# sourceMappingURL=chunk-KWNFZ5NC.js.map
+//# sourceMappingURL=chunk-LURJMWYM.js.map