@pixerate/flair 0.13.1 → 0.15.0

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

@@ -10316,6 +10316,8 @@ var flowNetwork = {
     ]
   }
 };
+var DRIP_BASELINE = 120;
+var DRIP_CAP = 75;
 var DRIP_TOP = 106;
 var DRIPS2 = [
   { at: 0.067, width: 11, length: 34, delay: 0, ms: 1500 },
@@ -10330,7 +10332,7 @@ var dripText = {
   kind: "vector",
   id: "drip-text",
   name: "Drip text",
-  description: "A chunky outlined title popping in, then oozing slime drips from its letters.",
+  description: "A chunky outlined title popping in, then oozing slime drips from its letters; Inline sets it in a line of text.",
   category: "text",
   tags: ["title", "text", "drip", "slime", "y2k", "headline"],
   hold: 1200,
@@ -10345,6 +10347,10 @@ var dripText = {
     const left = 200 - width / 2;
     return {
       width,
+      // 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",
       ...Object.fromEntries(
         DRIPS2.flatMap((d, i) => {
           const x = Math.round((left + d.at * width) * 10) / 10;
@@ -10361,14 +10367,14 @@ var dripText = {
     };
   },
   motion: (() => {
-    const word = `<text x="200" y="120" text-anchor="middle" textLength="{{width}}" lengthAdjust="spacingAndGlyphs" font-family="'Arial Black', Impact, system-ui, sans-serif" font-size="104" font-weight="900" stroke-linejoin="round"`;
+    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}/>`
     ).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="0 0 400 200"><!-- {{word: text default=SLOP label='Word'}} {{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'}} --><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(
+      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>`,
       animate: [
@@ -10542,4 +10548,4 @@ export {
   effectControls,
   effectDefaults
 };
-//# sourceMappingURL=chunk-L4NFQM5N.js.map
+//# sourceMappingURL=chunk-KWNFZ5NC.js.map