@pixerate/flair 0.16.0 → 0.18.0

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

@@ -12,7 +12,7 @@ import {
   hexToRgb,
   parseControls,
   rgbToHex
-} from "./chunk-WC3VADZC.js";
+} from "./chunk-VYOMXE6I.js";
 
 // src/catalog/glsl.ts
 var HASH = `
@@ -390,6 +390,7 @@ var imageRipple = {
   name: "Ripple",
   description: "An image rippling as if seen through water, from the pointer or the centre.",
   category: "image",
+  video: "filter",
   tags: ["image", "water", "interactive", "distortion"],
   source: glsl(
     `// Ripple: an image rippling as if under water.
@@ -419,6 +420,7 @@ var imageGlitch = {
   name: "Glitch",
   description: "Digital glitch on an image: RGB split, slice displacement and blocky corruption in bursts.",
   category: "image",
+  video: "filter",
   tags: ["image", "glitch", "cyber", "transition"],
   source: glsl(
     `// Glitch: RGB split, slice displacement and blocky corruption in bursts.
@@ -456,6 +458,7 @@ var imageDuotone = {
   name: "Duotone",
   description: "An image mapped onto two colours, with a slow light sweep.",
   category: "image",
+  video: "filter",
   tags: ["image", "brand", "editorial", "colour"],
   source: glsl(
     `// Duotone: an image mapped onto two colours, with a light sweep.
@@ -487,6 +490,7 @@ var imagePixelate = {
   name: "Pixel reveal",
   description: "An image resolving from big blocks to full detail, then back, in a loop.",
   category: "image",
+  video: "filter",
   tags: ["image", "reveal", "transition", "8-bit"],
   loop: 4,
   source: glsl(
@@ -511,6 +515,7 @@ var imageHalftone = {
   name: "Halftone",
   description: "An image printed as rotated halftone dots, breathing slightly.",
   category: "image",
+  video: "filter",
   tags: ["image", "print", "comic", "pop-art"],
   source: glsl(
     `// Halftone: an image as rotated print dots.
@@ -542,6 +547,7 @@ var crt = {
   name: "CRT screen",
   description: "An image on a curved CRT: scanlines, shadow mask, bloom and flicker.",
   category: "image",
+  video: "filter",
   tags: ["image", "retro", "screen", "arcade"],
   source: glsl(
     `// CRT screen: an image on a curved tube with scanlines and a shadow mask.
@@ -580,6 +586,7 @@ var filmGrain = {
   name: "Film look",
   description: "An image graded like film: grain, gate weave, halation and vignette.",
   category: "image",
+  video: "filter",
   tags: ["image", "cinematic", "grain", "vintage"],
   source: glsl(
     `// Film look: grain, gate weave, halation and vignette.
@@ -626,6 +633,7 @@ var transitions = TRANSITIONS.map(({ type, id, name, description }) => ({
   name,
   description: `${description} Loops back and forth; or turn Animate off and set Progress.`,
   category: "transition",
+  video: "transition",
   tags: ["transition", "image", "slideshow"],
   loop: 4,
   source: glsl(
@@ -1748,9 +1756,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>`;
@@ -2452,6 +2460,7 @@ var image8bit = {
   name: "8-bit",
   description: "An image on a chunky pixel grid, reduced to a classic console or computer palette with ordered Bayer dithering.",
   category: "retro",
+  video: "filter",
   tags: ["pixel", "retro", "image", "8-bit", "dither", "palette", "game boy", "pico-8"],
   source: glsl(
     `// 8-bit: an image on a chunky pixel grid in a classic palette, Bayer-dithered.
@@ -2527,6 +2536,7 @@ var gameboyScreen = {
   name: "Game Boy screen",
   description: "An image on a handheld's green dot-matrix LCD: four shades, a visible pixel grid and smeary ghosting, inset in an olive bezel.",
   category: "retro",
+  video: "filter",
   tags: ["pixel", "retro", "image", "game boy", "lcd", "handheld", "screen"],
   source: glsl(
     `// Game Boy screen: an image on a 4-shade green LCD with a pixel grid, ghosting and a bezel.
@@ -2969,6 +2979,7 @@ var rasterBars = {
   name: "Raster bars",
   description: "Demoscene copper bars bouncing on sine paths behind a sine-scrolling greeting, all in chunky pixels.",
   category: "retro",
+  video: "none",
   tags: ["pixel", "retro", "demoscene", "amiga", "c64", "scroller", "text", "copper"],
   source: glsl(
     `// Raster bars: copper bars on sine paths behind a sine scroller.
@@ -3154,6 +3165,7 @@ var pixelDissolve = {
   name: "Pixel dissolve",
   description: "The picture pixelates up to big blocks, the blocks swap to the next image in a random order, then it resolves into the new picture. Loops back and forth; or turn Animate off and set Progress.",
   category: "transition",
+  video: "transition",
   tags: ["transition", "pixel", "image", "retro", "8-bit", "slideshow"],
   loop: 4,
   source: glsl(
@@ -4215,6 +4227,7 @@ var hoverLiquid = {
   name: "Liquid hover",
   description: "An image that swells and ripples like liquid around the pointer while it hovers.",
   category: "interaction",
+  video: "interactive",
   tags: ["interactive", "hover", "image", "liquid", "distortion"],
   source: glsl(
     `// Liquid hover: an image bulging and rippling around the pointer, as strongly as it is hovered.
@@ -4261,6 +4274,7 @@ var hoverReveal = {
   name: "X-ray reveal",
   description: "A second image showing through a soft lens around the pointer that grows as it hovers and pulses on click.",
   category: "interaction",
+  video: "interactive",
   tags: ["interactive", "hover", "click", "image", "reveal", "x-ray"],
   source: glsl(
     `// X-ray reveal: a second image seen through a soft lens at the pointer.
@@ -4312,6 +4326,7 @@ var magnifier = {
   name: "Magnifier",
   description: "A round magnifying glass over an image at the pointer, with a bright rim and a fringe of colour at its edge.",
   category: "interaction",
+  video: "interactive",
   tags: ["interactive", "hover", "image", "lens", "zoom"],
   source: glsl(
     `// Magnifier: a round lens over an image at the pointer, showing while hovered.
@@ -4366,6 +4381,7 @@ var holoCard = {
   name: "Holo card",
   description: "A holographic foil trading card whose rainbow sheen and glare shift as the pointer tilts it.",
   category: "interaction",
+  video: "interactive",
   tags: ["interactive", "hover", "card", "holographic", "foil", "iridescent"],
   transparent: true,
   source: glsl(
@@ -4520,6 +4536,7 @@ var hoverSwap = {
   name: "Hover swap",
   description: "One image burning away into another from the pointer as it hovers, along a glowing ragged edge.",
   category: "interaction",
+  video: "interactive",
   tags: ["interactive", "hover", "image", "dissolve", "transition"],
   source: glsl(
     `// Hover swap: image A dissolves into image B as hover goes 0 \u2192 1, spreading from the pointer.
@@ -5044,6 +5061,7 @@ var electricText = {
   name: "Electric text",
   description: "A word with electricity crawling over its outlines and arcs leaping between its letters, flickering on a dark background.",
   category: "electric",
+  video: "none",
   tags: ["electric", "text", "title", "glow", "sci-fi"],
   source: glsl(
     `// Electric text: electricity crawling along the letters' outlines, arcs jumping between them.
@@ -5306,6 +5324,7 @@ var powerSurge = {
   name: "Power surge",
   description: "A picture jolted by a power surge: a flash, an arc tearing across, scanlines and colour split, then a brownout before it settles.",
   category: "electric",
+  video: "filter",
   tags: ["electric", "image", "glitch", "surge", "flash"],
   source: glsl(
     `// Power surge: an image jolted by a surge, then settling, on a schedule.
@@ -5487,6 +5506,7 @@ var dripMelt = {
   name: "Drip melt",
   description: "An image melting from the top edge down: columns slump, thick glossy drips run down and pool in a puddle, then it all reforms.",
   category: "melt",
+  video: "filter",
   tags: ["melt", "image", "drip", "liquid", "glossy", "loop"],
   loop: 8,
   source: glsl(
@@ -5595,6 +5615,7 @@ var heatHaze = {
   name: "Heat haze",
   description: "A mirage shimmer rising off a hot image: wavering refraction strongest near the ground, with a warm tint and a faint reflection.",
   category: "melt",
+  video: "filter",
   tags: ["melt", "image", "heat", "mirage", "shimmer", "desert", "distortion"],
   source: glsl(
     `// Heat haze: rising, wavering refraction over a picture, strongest near the bottom.
@@ -5654,6 +5675,7 @@ var waxMelt = {
   name: "Wax melt",
   description: "A silhouette softening like warm wax: its edges round off, its top sags and it slumps into a glossy puddle, then sets again.",
   category: "melt",
+  video: "none",
   tags: ["melt", "wax", "text", "silhouette", "glossy", "loop"],
   loop: 8,
   source: glsl(
@@ -5754,6 +5776,7 @@ var meltingText = {
   name: "Melting text",
   description: "Letters sagging and stretching downwards as long glossy drips run from their bottoms and droplets break off and fall.",
   category: "melt",
+  video: "none",
   tags: ["melt", "text", "title", "drip", "liquid", "glossy", "loop"],
   loop: 8,
   transparent: true,
@@ -5871,6 +5894,7 @@ var liquify = {
   name: "Liquify",
   description: "An image pushed and smeared like wet paint by a moving brush (or the pointer), the smears slowly relaxing back.",
   category: "melt",
+  video: "filter",
   tags: ["melt", "image", "liquify", "smear", "paint", "interactive", "hover"],
   source: glsl(
     `// Liquify: a brush pushes the picture around; its recent path leaves smears that relax over time.
@@ -6946,6 +6970,7 @@ var timeEcho = {
   name: "Time echo",
   description: "A swaying picture trailed by fading, tinted ghost echoes of where it just was.",
   category: "timewarp",
+  video: "stills",
   tags: ["time", "image", "echo", "trail", "ghost"],
   loop: 8,
   source: glsl(
@@ -6993,6 +7018,7 @@ var chronoSplit = {
   name: "Chrono split",
   description: "Red, green and blue each lagging a little further behind in time, so movement leaves colour fringes.",
   category: "timewarp",
+  video: "stills",
   tags: ["time", "image", "rgb", "chromatic", "echo"],
   loop: 8,
   source: glsl(
@@ -7026,6 +7052,7 @@ var timeSlice = {
   name: "Time slice",
   description: "Bands of a moving picture each showing a different moment, staggered like a time-displacement.",
   category: "timewarp",
+  video: "stills",
   tags: ["time", "image", "slices", "stagger", "displacement"],
   loop: 8,
   source: glsl(
@@ -7090,6 +7117,7 @@ var rewind = {
   name: "VHS rewind",
   description: "A tape playing, then rewinding fast with tracking noise, jittering lines, colour bleed and a \u25C0\u25C0 display.",
   category: "timewarp",
+  video: "stills",
   tags: ["time", "image", "vhs", "retro", "rewind", "tape"],
   loop: 6,
   source: glsl(
@@ -7196,6 +7224,7 @@ var bulletTime = {
   name: "Bullet time",
   description: "A shockwave sweeping out from the centre or a click, freezing the picture grey and zoomed behind it while the rest moves on.",
   category: "timewarp",
+  video: "stills",
   tags: ["time", "image", "freeze", "shockwave", "click", "cinematic"],
   loop: 8,
   source: glsl(
@@ -7255,6 +7284,7 @@ var timeTunnel = {
   name: "Time tunnel",
   description: "A picture wrapped round a spiralling tunnel rushing at the viewer, with light streaks and a blazing core.",
   category: "timewarp",
+  video: "filter",
   tags: ["time", "image", "tunnel", "vortex", "sci-fi", "warp"],
   loop: 8,
   source: glsl(
@@ -7313,6 +7343,7 @@ var speedRamp = {
   name: "Speed ramp",
   description: "A panning picture lurching from a crawl to a blur and back, motion-blurred in proportion to its speed.",
   category: "timewarp",
+  video: "stills",
   tags: ["time", "image", "speed", "motion blur", "cinematic"],
   loop: 4,
   source: glsl(
@@ -7360,6 +7391,7 @@ var stutterFreeze = {
   name: "Stutter freeze",
   description: "A moving picture that catches in irregular bursts, holding or stuttering frames with a flash on each freeze.",
   category: "timewarp",
+  video: "stills",
   tags: ["time", "image", "freeze", "stutter", "glitch"],
   source: glsl(
     `// Stutter freeze: some moments end in a hold (or a skipping stutter) before cutting back to live.
@@ -7445,6 +7477,7 @@ var featureMorph = {
   name: "Feature morph",
   description: "The classic face morph: two pictures warp so five matching points (eyes, mouth, chin, hairline) meet while they cross-fade.",
   category: "morph",
+  video: "stills",
   tags: ["morph", "face", "warp", "image", "transition"],
   loop: 4,
   source: glsl(
@@ -7543,6 +7576,7 @@ var silhouetteMorph = {
   name: "Silhouette morph",
   description: "One silhouette or logo flowing into another as a gooey blob, its colour blending from the first shape's to the second's.",
   category: "morph",
+  video: "stills",
   tags: ["morph", "shape", "logo", "goo", "blob", "text"],
   loop: 4,
   source: glsl(
@@ -7623,6 +7657,7 @@ var transitionLiquidMorph = {
   name: "Liquid morph",
   description: "Both images swept along a flowing, swirling current that peaks half way, dissolving one into the other like ink in water.",
   category: "transition",
+  video: "transition",
   tags: ["transition", "morph", "liquid", "image", "flow"],
   loop: 4,
   source: glsl(
@@ -7664,6 +7699,7 @@ var transitionDisplacement = {
   name: "Displacement",
   description: "Each image's brightness pushes it out in one direction as the next slides in, warped by its own light and dark.",
   category: "transition",
+  video: "transition",
   tags: ["transition", "morph", "displacement", "image", "warp"],
   loop: 4,
   source: glsl(
@@ -7696,6 +7732,7 @@ var transitionLuma = {
   name: "Luma fade",
   description: "Pixels switch to the next image in order of brightness, shadows first or highlights first, along a soft edge.",
   category: "transition",
+  video: "transition",
   tags: ["transition", "morph", "luma", "image", "dissolve"],
   loop: 4,
   source: glsl(
@@ -7730,6 +7767,7 @@ var transitionParticleSwap = {
   name: "Particle swap",
   description: "The image breaks into square particles that tumble along curved, staggered paths and land as the next image.",
   category: "transition",
+  video: "transition",
   tags: ["transition", "morph", "particles", "image", "mosaic"],
   loop: 4,
   source: glsl(
@@ -7813,6 +7851,7 @@ var transitionInkBleed = {
   name: "Ink bleed",
   description: "The next image bleeds through the first like wet ink on paper, spreading from a few seeds with dark, pooled edges.",
   category: "transition",
+  video: "transition",
   tags: ["transition", "morph", "ink", "watercolour", "image", "organic"],
   loop: 4,
   source: glsl(
@@ -8498,6 +8537,7 @@ var shaderText = {
   name: "Shader text",
   description: "A title filled with a living texture (plasma, fire, caustics or liquid chrome), with a soft glow and outline.",
   category: "text",
+  video: "none",
   tags: ["text", "title", "plasma", "fire", "chrome", "glow"],
   source: glsl(
     `// Shader text: the letters of a text image filled with an animated pattern.
@@ -8601,6 +8641,7 @@ var imageKenBurns = {
   name: "Ken Burns",
   description: "A slow documentary-style pan and zoom across an image, easing in and out and back again.",
   category: "image",
+  video: "filter",
   tags: ["image", "camera", "documentary", "slideshow"],
   loop: 12,
   source: glsl(
@@ -8641,6 +8682,7 @@ var imageAscii = {
   name: "ASCII art",
   description: "An image drawn as text characters picked by brightness, in one ink or the picture's own colours.",
   category: "image",
+  video: "filter",
   tags: ["image", "ascii", "text", "terminal", "retro"],
   source: glsl(
     `// ASCII art: each cell of the image becomes a character, denser for brighter cells.
@@ -8700,6 +8742,7 @@ var imageShatter = {
   name: "Shatter",
   description: "An image breaking into glass-like shards that fly apart, spin and reassemble in a loop.",
   category: "image",
+  video: "filter",
   tags: ["image", "shatter", "transition", "voronoi", "explode"],
   loop: 5,
   source: glsl(
@@ -8783,6 +8826,7 @@ var imageMelt = {
   name: "Melt",
   description: "An image melting and dripping downwards in slow, noisy runs.",
   category: "image",
+  video: "filter",
   tags: ["image", "melt", "drip", "psychedelic", "distortion"],
   source: glsl(
     `// Melt: noise-driven runs drag the image downwards.
@@ -8821,6 +8865,7 @@ var imageRisograph = {
   name: "Risograph",
   description: "An image printed in two posterized, slightly misregistered inks on grainy paper.",
   category: "image",
+  video: "filter",
   tags: ["image", "print", "riso", "editorial", "poster"],
   source: glsl(
     `// Risograph: two posterized ink layers, out of register, on grainy paper.
@@ -8871,6 +8916,7 @@ var imageThermal = {
   name: "Thermal",
   description: "An image seen through a heat camera or night-vision goggles.",
   category: "image",
+  video: "filter",
   tags: ["image", "thermal", "night-vision", "surveillance", "colour"],
   source: glsl(
     `// Thermal: brightness mapped to a heat palette, or to green night-vision phosphor.
@@ -8924,6 +8970,7 @@ var imageEdgeGlow = {
   name: "Edge glow",
   description: "An image's edges traced as glowing neon lines over a dimmed picture, with a travelling pulse.",
   category: "image",
+  video: "filter",
   tags: ["image", "neon", "edges", "outline", "cyber"],
   loop: 2,
   source: glsl(
@@ -8984,6 +9031,7 @@ var imageTiltShift = {
   name: "Tilt-shift",
   description: "An image blurred outside a sharp horizontal band, with punchy colour, so it looks like a miniature.",
   category: "image",
+  video: "filter",
   tags: ["image", "blur", "miniature", "photography", "depth"],
   source: glsl(
     `// Tilt-shift: blur away from a focus band, plus saturation, for the miniature look.
@@ -9026,6 +9074,7 @@ var imageSlitScan = {
   name: "Slit-scan",
   description: "An image smeared into time-stretched streaks, like a slit-scan photograph.",
   category: "image",
+  video: "stills",
   tags: ["image", "slit-scan", "smear", "experimental", "distortion"],
   source: glsl(
     `// Slit-scan: rows (or columns) squeeze towards a moving slit and smear into streaks.
@@ -9070,6 +9119,7 @@ var imageMosaic = {
   name: "Mosaic flip",
   description: "Hexagonal or triangular tiles flipping over from the left to reveal an image, then back.",
   category: "image",
+  video: "filter",
   tags: ["image", "reveal", "transition", "tiles", "hexagon"],
   loop: 6,
   source: glsl(
@@ -9155,6 +9205,7 @@ var imageChromaticLens = {
   name: "Chromatic lens",
   description: "An image through a cheap wide lens: barrel distortion and colour fringes growing towards the edges.",
   category: "image",
+  video: "filter",
   tags: ["image", "lens", "aberration", "distortion", "vintage"],
   source: glsl(
     `// Chromatic lens: barrel distortion with red, green and blue bent by different amounts.
@@ -9195,6 +9246,7 @@ var imageOilPaint = {
   name: "Oil paint",
   description: "An image repainted in flat, edge-keeping brush dabs, like an oil painting.",
   category: "image",
+  video: "filter",
   tags: ["image", "painterly", "artistic", "kuwahara", "filter"],
   source: glsl(
     `// Oil paint: a four-sector Kuwahara filter, each pixel takes the calmest neighbourhood's colour.
@@ -9265,6 +9317,139 @@ 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 VIDEO_USES = ["filter", "transition", "interactive", "stills", "none"];
+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 +9459,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 +9473,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 +9499,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 +9536,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 +9568,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 +9594,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 +9630,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 +9645,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 +9673,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 +9698,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 +9711,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 +9739,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 +9756,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 +9785,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 +9814,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 +9827,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 +9843,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 +9892,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 +9915,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 +9944,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 +9969,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 +9995,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 +10407,7 @@ var flowNetwork = {
   }
 };
 var DRIP_BASELINE = 120;
+var DRIP_SIZE = 104;
 var DRIP_CAP = 75;
 var DRIP_TOP = 106;
 var DRIPS2 = [
@@ -10328,6 +10419,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 +10434,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 }
           ];
         })
       ]
@@ -10508,6 +10610,7 @@ function findEffects(query = {}) {
     if (query.category && e.category !== query.category) return false;
     if (query.kind && e.kind !== query.kind) return false;
     if (query.tags && !query.tags.every((t) => e.tags.includes(t))) return false;
+    if (query.video && !(e.kind === "shader" && e.video && query.video.includes(e.video))) return false;
     const haystack = [e.id, e.name, e.description, e.category, ...e.tags].join(" ").toLowerCase();
     return words.every((w) => haystack.includes(w));
   });
@@ -10518,7 +10621,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 {
@@ -10533,11 +10637,14 @@ export {
   SAMPLE_IMAGES,
   textImage,
   EFFECT_CATEGORIES,
+  VIDEO_USES,
   VECTOR_CONTROL_TYPES,
   vectorControls,
   vectorEffectControls,
   vectorControlIssues,
   vectorControlDef,
+  CURRENT_COLOR,
+  isCurrentColor,
   renderVectorEffect,
   colorControl,
   numberControl,
@@ -10548,4 +10655,4 @@ export {
   effectControls,
   effectDefaults
 };
-//# sourceMappingURL=chunk-KWNFZ5NC.js.map
+//# sourceMappingURL=chunk-UI5X4D63.js.map