@bendyline/squisq 2.11.9 → 2.11.11

package/dist/{chunk-QOVINAB2.js → chunk-42IU2SJY.js}

@@ -26,6 +26,7 @@ import {
   DEFAULT_THEME,
   FRONTMATTER_CUSTOM_TEMPLATES_KEY,
   FRONTMATTER_CUSTOM_THEMES_KEY,
+  MOTION_PROFILES,
   VIEWPORT_PRESETS,
   cloneData,
   createTemplateContext,
@@ -35,13 +36,14 @@ import {
   isTemplateBlock,
   oklchDarken,
   pickContrastingText,
+  readFrontmatterMotion,
   relativeLuminance,
   resolveFontFamily,
   scaledFontSize2 as scaledFontSize,
   validateCustomTemplateDefinition,
   validateTheme,
   withAlpha
-} from "./chunk-PCCQLD3G.js";
+} from "./chunk-PFH3WV6J.js";
 import {
   mediaEditValuesFromAttributes,
   mediaEditValuesFromParams,
@@ -461,6 +463,27 @@ function themedEntrance(context, layerType, fallback) {
   if (!type || type === "slowZoom" || type === fallback.type) return fallback;
   return { ...fallback, type };
 }
+function getMotionProfile(context) {
+  return context.motion ?? MOTION_PROFILES.calm;
+}
+function motionEntrance(context, fallback, layerType = "text") {
+  const themed = themedEntrance(context, layerType, fallback);
+  const profile = getMotionProfile(context);
+  if (profile.name === "calm") return themed;
+  if (themed.type === "typewriter" || themed.type === "none") return themed;
+  const { textEntrance } = profile;
+  return {
+    ...themed,
+    type: textEntrance.type,
+    duration: textEntrance.duration,
+    ...themed.delay != null ? { delay: motionDelay(context, themed.delay) } : {},
+    ...textEntrance.easing ? { easing: textEntrance.easing } : {}
+  };
+}
+function motionDelay(context, delay) {
+  const scale = getMotionProfile(context).textEntrance.delayScale;
+  return scale === 1 ? delay : Number((delay * scale).toFixed(3));
+}
 function shouldUseShadow(context) {
   return context.theme.style.textShadow ?? true;
 }
@@ -676,7 +699,7 @@ function titleBlock(input, context) {
         width: layout.maxTextWidth,
         height: `${px(titleH)}%`
       },
-      animation: themedEntrance(context, "text", { type: "fadeIn", duration: 2 })
+      animation: motionEntrance(context, { type: "fadeIn", duration: 2 })
     }
   );
   if (subtitle && subtitleFit) {
@@ -1052,7 +1075,7 @@ function sectionHeader(input, context) {
       width: layout.maxTextWidth,
       height: `${px(titleH)}%`
     },
-    animation: themedEntrance(context, "text", { type: "fadeIn", duration: 1.5 })
+    animation: motionEntrance(context, { type: "fadeIn", duration: 1.5 })
   });
   return layers;
 }
@@ -1184,7 +1207,7 @@ function bigText(input, context) {
       width: `${BIG_TEXT_WIDTH_FRACTION * 100}%`,
       height: `${BIG_TEXT_HEIGHT_FRACTION * 100}%`
     },
-    animation: themedEntrance(context, "text", { type: "fadeIn", duration: 1 })
+    animation: motionEntrance(context, { type: "fadeIn", duration: 1 })
   });
   return layers;
 }
@@ -2215,6 +2238,59 @@ function contentBlock(input, context) {
   return layers;
 }
 
+// src/doc/utils/countUp.ts
+var STAT_PATTERN = /^([^\d]*?)([-−]?\d[\d,]*(?:\.\d+)?)(.*)$/s;
+function parseStatNumber(text) {
+  const match = STAT_PATTERN.exec(text.trim());
+  if (!match) return null;
+  const [, prefix, numeric, suffix] = match;
+  const normalized = numeric.replace(/,/g, "").replace("\u2212", "-");
+  const value = Number(normalized);
+  if (!Number.isFinite(value)) return null;
+  const decimals = normalized.includes(".") ? normalized.split(".")[1].length : 0;
+  const bare = /^-?\d{4}$/.test(normalized);
+  const looksLikeYear = bare && Math.abs(value) >= 1e3 && Math.abs(value) <= 2999 && !/^[$€£¥]/.test(prefix);
+  if (looksLikeYear && !/^[%KMB]/i.test(suffix.trim())) return null;
+  return { prefix, value, decimals, grouping: numeric.includes(","), suffix };
+}
+function countUpSpecFor(text) {
+  const parsed = parseStatNumber(text);
+  if (!parsed) return null;
+  return {
+    from: 0,
+    to: parsed.value,
+    decimals: parsed.decimals,
+    grouping: parsed.grouping,
+    prefix: parsed.prefix,
+    suffix: parsed.suffix
+  };
+}
+function easeOutCubic(t) {
+  const u = 1 - t;
+  return 1 - u * u * u;
+}
+function formatCountValue(value, decimals, grouping) {
+  const fixed = Math.abs(value).toFixed(decimals);
+  const [whole, fraction] = fixed.split(".");
+  const grouped = grouping ? whole.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : whole;
+  const sign = value < 0 && Number(fixed) !== 0 ? "-" : "";
+  return `${sign}${grouped}${fraction ? `.${fraction}` : ""}`;
+}
+function formatCountUp(text, animation, blockTime) {
+  const count = animation.count ?? countUpSpecFor(text);
+  if (!count) return text;
+  const delay = animation.delay ?? 0;
+  const duration = animation.duration ?? 1.5;
+  const progress = duration <= 0 ? 1 : Math.min(1, Math.max(0, (blockTime - delay) / duration));
+  if (progress >= 1) return animation.count ? formatFinal(count) : text;
+  const from = count.from ?? 0;
+  const value = from + (count.to - from) * easeOutCubic(progress);
+  return `${count.prefix ?? ""}${formatCountValue(value, count.decimals ?? 0, count.grouping ?? false)}${count.suffix ?? ""}`;
+}
+function formatFinal(count) {
+  return `${count.prefix ?? ""}${formatCountValue(count.to, count.decimals ?? 0, count.grouping ?? false)}${count.suffix ?? ""}`;
+}
+
 // src/doc/templates/statHighlight.ts
 var SAFE_TOP = 0.08;
 var SAFE_BOTTOM = 0.92;
@@ -2235,6 +2311,10 @@ function statHighlight(input, context) {
   const descFontSize = themedFontSize(32, context, false);
   const detailFontSize = themedFontSize(26, context, false);
   const layers = [createBackgroundLayer("bg", themedSurfaceGradient(context, 180))];
+  const motion = getMotionProfile(context);
+  const countSpec = motion.countUp ? countUpSpecFor(stat) : null;
+  const statEntrance = getTemplateHint(context, "statHighlight", "entrance", "subtle") === "dramatic" ? { type: "zoomIn", duration: 0.4 } : { type: "zoomIn", duration: 0.6 };
+  const statAnimation = countSpec ? { type: "countUp", duration: motion.countUpDuration, delay: 0.15, count: countSpec } : statEntrance;
   if (accentImage) {
     layers.push(
       ...createAccentLayers(
@@ -2317,7 +2397,7 @@ function statHighlight(input, context) {
       }
     },
     position: box(statTop, statBoxH),
-    animation: getTemplateHint(context, "statHighlight", "entrance", "subtle") === "dramatic" ? { type: "zoomIn", duration: 0.4 } : { type: "zoomIn", duration: 0.6 }
+    animation: statAnimation
   });
   if (descFit) {
     layers.push({
@@ -2337,7 +2417,7 @@ function statHighlight(input, context) {
         }
       },
       position: box(descTop, descBoxH),
-      animation: { type: "fadeIn", duration: 1, delay: 0.3 }
+      animation: motionEntrance(context, { type: "fadeIn", duration: 1, delay: 0.3 })
     });
   }
   if (detailFit) {
@@ -2361,7 +2441,7 @@ function statHighlight(input, context) {
         }
       },
       position: box(detailTop, detailBoxH),
-      animation: { type: "fadeIn", duration: 1, delay: 1 }
+      animation: motionEntrance(context, { type: "fadeIn", duration: 1, delay: 1 })
     });
   }
   return layers;
@@ -2524,7 +2604,7 @@ function quoteBlock(input, context) {
       height: pct(quoteFit.heightPx),
       anchor: "top-left"
     },
-    animation: themedEntrance(context, "text", { type: "fadeIn", duration: 2 })
+    animation: motionEntrance(context, { type: "fadeIn", duration: 2 })
   };
   layers.push(quoteLayer);
   if (attribution && attrFit) {
@@ -2657,7 +2737,7 @@ function factCard(input, context) {
       }
     },
     position: box(factTop, factBoxH),
-    animation: themedEntrance(context, "text", { type: "fadeIn", duration: 1.5 })
+    animation: motionEntrance(context, { type: "fadeIn", duration: 1.5 })
   });
   if (explainFit) {
     layers.push({
@@ -2677,7 +2757,7 @@ function factCard(input, context) {
         }
       },
       position: box(explainTop, explainBoxH),
-      animation: themedEntrance(context, "text", { type: "fadeIn", duration: 1, delay: 0.8 })
+      animation: motionEntrance(context, { type: "fadeIn", duration: 1, delay: 0.8 })
     });
   }
   if (sourceFit) {
@@ -2791,7 +2871,7 @@ function twoColumn(input, context) {
         width: `${bandWidthPct}%`,
         anchor: "top-left"
       },
-      animation: themedEntrance(context, "text", { type: "fadeIn", duration: 0.8 })
+      animation: motionEntrance(context, { type: "fadeIn", duration: 0.8 })
     });
   }
   let leftY;
@@ -2830,7 +2910,7 @@ function twoColumn(input, context) {
       anchor: "center",
       width: columnWidth
     },
-    animation: themedEntrance(context, "text", { type: "fadeIn", duration: 1 })
+    animation: motionEntrance(context, { type: "fadeIn", duration: 1 })
   });
   if (left.sublabel) {
     layers.push({
@@ -2898,7 +2978,7 @@ function twoColumn(input, context) {
       anchor: "center",
       width: columnWidth
     },
-    animation: themedEntrance(context, "text", { type: "fadeIn", duration: 1, delay: 0.5 })
+    animation: motionEntrance(context, { type: "fadeIn", duration: 1, delay: 0.5 })
   });
   if (right.sublabel) {
     layers.push({
@@ -3156,7 +3236,7 @@ function imageWithCaption(input, context) {
         anchor: "center",
         width: layout.maxTextWidth
       },
-      animation: { type: "fadeIn", duration: 0.8 }
+      animation: motionEntrance(context, { type: "fadeIn", duration: 0.8 })
     });
     if (subtitle) {
       layers.push({
@@ -3178,7 +3258,7 @@ function imageWithCaption(input, context) {
           anchor: "center",
           width: layout.maxTextWidth
         },
-        animation: { type: "fadeIn", duration: 0.8, delay: 0.2 }
+        animation: motionEntrance(context, { type: "fadeIn", duration: 0.8, delay: 0.2 })
       });
     }
     return layers;
@@ -3212,7 +3292,10 @@ function imageWithCaption(input, context) {
           textAlign: "center",
           shadow: shouldUseShadow(context),
           lineHeight: 1.18,
-          maxLines: 2
+          maxLines: 2,
+          // A two-line caption centres on the band instead of hanging its
+          // second line below it (the block centres on the anchor).
+          shrinkToFit: true
         }
       },
       position: {
@@ -3221,7 +3304,7 @@ function imageWithCaption(input, context) {
         anchor: "center",
         width: "78%"
       },
-      animation: { type: "fadeIn", duration: 1.5, delay: 0.5 }
+      animation: motionEntrance(context, { type: "fadeIn", duration: 1.5, delay: 0.5 })
     });
   }
   return layers;
@@ -3409,7 +3492,7 @@ function buildFeatureLayers(input, context, side) {
         anchor: textAnchor,
         width: pctW(titleWrapWidth)
       },
-      animation: themedEntrance(context, "text", { type: "fadeIn", duration: 0.8 })
+      animation: motionEntrance(context, { type: "fadeIn", duration: 0.8 })
     });
   }
   if (body && bodyFit) {
@@ -3433,7 +3516,7 @@ function buildFeatureLayers(input, context, side) {
         anchor: textAnchor,
         width: pctW(bodyWrapWidth)
       },
-      animation: themedEntrance(context, "text", { type: "fadeIn", duration: 0.8, delay: 0.2 })
+      animation: motionEntrance(context, { type: "fadeIn", duration: 0.8, delay: 0.2 })
     });
   }
   return layers;
@@ -3626,7 +3709,10 @@ function fullBleedQuote(input, context) {
         height: pct(fit.heightPx),
         anchor: "top-left"
       },
-      animation: getTemplateHint(context, "fullBleedQuote", "entrance", "subtle") === "dramatic" ? { type: "zoomIn", duration: 0.8 } : { type: "fadeIn", duration: 1.5 }
+      animation: motionEntrance(
+        context,
+        getTemplateHint(context, "fullBleedQuote", "entrance", "subtle") === "dramatic" ? { type: "zoomIn", duration: 0.8 } : { type: "fadeIn", duration: 1.5 }
+      )
     }
   ];
 }
@@ -3741,7 +3827,7 @@ function listBlock(input, context) {
         y: adjustY(`${titleTopPct}%`, accentLayout),
         width: accentLayout.textWidth
       },
-      animation: themedEntrance(context, "text", { type: "fadeIn", duration: 1 })
+      animation: motionEntrance(context, { type: "fadeIn", duration: 1 })
     });
   }
   const availablePx = Math.max(0, (bottomLimitPct - startY) / 100 * context.viewport.height);
@@ -3758,7 +3844,7 @@ function listBlock(input, context) {
     const itemText = items[i];
     const itemHtml = richItems[i]?.text === itemText ? richItems[i]?.html : void 0;
     const lineCount = estimateProseLineCount(itemText, itemFontSize, bodyWidthPx);
-    const animation = themedEntrance(context, "text", {
+    const animation = motionEntrance(context, {
       type: "fadeIn",
       duration: 0.8,
       delay: 0.3 + 0.3 * i
@@ -3825,6 +3911,7 @@ function photoGrid(input, context) {
   const caption = rawCaption ? cleanCaption(rawCaption) : rawCaption;
   const { theme, layout } = context;
   const treatment = themedImageTreatment(context, input.imageTreatment);
+  const stagger = getMotionProfile(context).photoGridStagger;
   const layers = [
     // Theme surface background (visible in gaps between images)
     {
@@ -3863,7 +3950,12 @@ function photoGrid(input, context) {
         height: `${pos.h}%`
       },
       // Apply ambient motion to the first (largest) image only
-      animation: i === 0 && ambientMotion ? { type: ambientMotion, duration: 15 } : { type: "fadeIn", duration: 1, delay: 0.2 * i }
+      animation: i === 0 && ambientMotion ? { type: ambientMotion, duration: 15 } : stagger > 0 ? {
+        type: "reveal",
+        origin: pos.x < 50 ? "left" : "right",
+        duration: 0.7,
+        delay: Number((0.15 + stagger * i).toFixed(3))
+      } : { type: "fadeIn", duration: 1, delay: 0.2 * i }
     });
   }
   if (caption) {
@@ -3893,7 +3985,8 @@ function photoGrid(input, context) {
           textAlign: "center",
           shadow: true,
           lineHeight: 1.18,
-          maxLines: layout.stackColumns ? 2 : 1
+          maxLines: layout.stackColumns ? 2 : 1,
+          shrinkToFit: true
         }
       },
       position: {
@@ -3902,7 +3995,7 @@ function photoGrid(input, context) {
         anchor: "center",
         width: "78%"
       },
-      animation: { type: "fadeIn", duration: 1, delay: 0.5 }
+      animation: motionEntrance(context, { type: "fadeIn", duration: 1, delay: 0.5 })
     });
   }
   return layers;
@@ -4051,7 +4144,7 @@ function definitionCard(input, context) {
       }
     },
     position: box(termTop, termH + termFit.fontSize * BOX_SLACK_EM2),
-    animation: themedEntrance(context, "text", { type: "fadeIn", duration: 1.5 })
+    animation: motionEntrance(context, { type: "fadeIn", duration: 1.5 })
   });
   layers.push({
     type: "shape",
@@ -4088,7 +4181,7 @@ function definitionCard(input, context) {
         }
       },
       position: box(defTop, defH + defFit.fontSize * BOX_SLACK_EM2),
-      animation: themedEntrance(context, "text", { type: "fadeIn", duration: 1, delay: 0.8 })
+      animation: motionEntrance(context, { type: "fadeIn", duration: 1, delay: 0.8 })
     });
   }
   if (originText) {
@@ -4122,8 +4215,8 @@ function comparisonBar(input, context) {
   const colors = resolveColorScheme(context, colorScheme);
   const leftValue = Number.isFinite(input.leftValue) ? input.leftValue : 0;
   const rightValue = Number.isFinite(input.rightValue) ? input.rightValue : 0;
-  const labelFontSize = themedFontSize(28, context, false);
-  const valueFontSize = themedFontSize(48, context, true);
+  const labelFontSize = themedFontSize(34, context, false);
+  const valueFontSize = themedFontSize(58, context, true);
   const formatValue = (v) => {
     if (!Number.isFinite(v)) return "\u2014";
     if (v >= 1e6) return `${(v / 1e6).toFixed(1)}M`;
@@ -4132,16 +4225,40 @@ function comparisonBar(input, context) {
   };
   const leftDisplay = unit ? `${formatValue(leftValue)} ${unit}` : formatValue(leftValue);
   const rightDisplay = unit ? `${formatValue(rightValue)} ${unit}` : formatValue(rightValue);
-  const barStartX = 15;
+  const motion = getMotionProfile(context);
+  const growEasing = motion.textEntrance.easing;
+  const barAnimation = (fallback) => {
+    if (!motion.chartGrowth) return fallback;
+    return {
+      type: "grow",
+      origin: "left",
+      duration: motion.chartGrowthDuration,
+      delay: motionDelay(context, fallback.delay ?? 0),
+      ...growEasing ? { easing: growEasing } : {}
+    };
+  };
+  const valueAnimation = (display, fallback) => {
+    const count = motion.countUp ? countUpSpecFor(display) : null;
+    if (!count) return motionEntrance(context, fallback);
+    return {
+      type: "countUp",
+      duration: motion.countUpDuration,
+      delay: motionDelay(context, fallback.delay ?? 0),
+      count
+    };
+  };
+  const labelAnimation = motion.name === "calm" ? void 0 : motionEntrance(context, { type: "fadeIn", duration: 0.6 });
   const barHeight = 6;
-  const topBarY = 36;
-  const bottomBarY = 58;
+  const topBarY = 39;
+  const bottomBarY = 61;
   const leftExtent = Math.max(0, leftValue);
   const rightExtent = Math.max(0, rightValue);
   const maxValue = Math.max(leftExtent, rightExtent, 1);
-  const longestLabelPx = Math.max(leftDisplay.length, rightDisplay.length) * valueFontSize * 0.58;
+  const longestLabelPx = Math.max(leftDisplay.length, rightDisplay.length) * valueFontSize * 0.7;
   const labelWidthPct = longestLabelPx / viewport.width * 100;
-  const maxBarWidth = Math.max(20, Math.min(65, 96 - barStartX - labelWidthPct - 2));
+  const marginX = 8;
+  const maxBarWidth = Math.max(20, Math.min(65, 100 - marginX * 2 - labelWidthPct - 2));
+  const barStartX = Math.max(marginX, (100 - (maxBarWidth + 2 + labelWidthPct)) / 2);
   const leftBarWidth = leftExtent / maxValue * maxBarWidth;
   const rightBarWidth = rightExtent / maxValue * maxBarWidth;
   return [
@@ -4167,7 +4284,8 @@ function comparisonBar(input, context) {
           color: theme.colors.textMuted
         }
       },
-      position: { x: `${barStartX}%`, y: `${topBarY - 8}%` }
+      position: { x: `${barStartX}%`, y: `${topBarY - 8}%` },
+      ...labelAnimation ? { animation: labelAnimation } : {}
     },
     // Top bar value
     {
@@ -4183,7 +4301,7 @@ function comparisonBar(input, context) {
         }
       },
       position: { x: `${barStartX + leftBarWidth + 2}%`, y: `${topBarY - 1}%` },
-      animation: { type: "fadeIn", duration: 0.8, delay: 0.3 }
+      animation: valueAnimation(leftDisplay, { type: "fadeIn", duration: 0.8, delay: 0.3 })
     },
     // Top bar
     {
@@ -4200,7 +4318,7 @@ function comparisonBar(input, context) {
         width: `${leftBarWidth}%`,
         height: `${barHeight}%`
       },
-      animation: { type: "fadeIn", duration: 1 }
+      animation: barAnimation({ type: "fadeIn", duration: 1 })
     },
     // Bottom bar label
     {
@@ -4214,7 +4332,8 @@ function comparisonBar(input, context) {
           color: theme.colors.textMuted
         }
       },
-      position: { x: `${barStartX}%`, y: `${bottomBarY - 8}%` }
+      position: { x: `${barStartX}%`, y: `${bottomBarY - 8}%` },
+      ...labelAnimation ? { animation: labelAnimation } : {}
     },
     // Bottom bar value
     {
@@ -4230,7 +4349,7 @@ function comparisonBar(input, context) {
         }
       },
       position: { x: `${barStartX + rightBarWidth + 2}%`, y: `${bottomBarY - 1}%` },
-      animation: { type: "fadeIn", duration: 0.8, delay: 0.6 }
+      animation: valueAnimation(rightDisplay, { type: "fadeIn", duration: 0.8, delay: 0.6 })
     },
     // Bottom bar
     {
@@ -4247,7 +4366,7 @@ function comparisonBar(input, context) {
         width: `${rightBarWidth}%`,
         height: `${barHeight}%`
       },
-      animation: { type: "fadeIn", duration: 1, delay: 0.3 }
+      animation: barAnimation({ type: "fadeIn", duration: 1, delay: 0.3 })
     }
   ];
 }
@@ -4328,7 +4447,7 @@ function pullQuoteLockup(options, context) {
       anchor: "top-left",
       width: `${COLUMN_WIDTH_PCT}%`
     },
-    animation: themedEntrance(context, "text", { type: "fadeIn", duration: 2 })
+    animation: motionEntrance(context, { type: "fadeIn", duration: 2 })
   };
   const layers = [];
   if (showDeco) {
@@ -4373,7 +4492,7 @@ function pullQuoteLockup(options, context) {
         anchor: "top-left",
         width: `${COLUMN_WIDTH_PCT}%`
       },
-      animation: { type: "fadeIn", duration: 1, delay: 1.5 }
+      animation: motionEntrance(context, { type: "fadeIn", duration: 1, delay: 1.5 })
     });
   }
   return layers;
@@ -5478,7 +5597,7 @@ var PADDING = 80;
 var CANVAS_PADDING = PADDING;
 var CANVAS_TITLE_LINE_HEIGHT = 1.15;
 var CANVAS_TITLE_MAX_LINES = 2;
-var CANVAS_TITLE_GAP_PX = 36;
+var CANVAS_TITLE_GAP_PX = 60;
 var CANVAS_DESCRIPTION_LINE_HEIGHT = 1.35;
 var CANVAS_DESCRIPTION_MAX_LINES = 3;
 var CANVAS_DESCRIPTION_GAP_PX = 28;
@@ -5782,6 +5901,16 @@ function diagramBlock(input, context) {
   }
   const containers = resolved.nodes.filter((n) => n.isContainer).sort((a, b) => a.depth - b.depth || a.y - b.y || a.x - b.x);
   const leaves = resolved.nodes.filter((n) => !n.isContainer);
+  const build = getMotionProfile(context).diagramBuild;
+  const leafOrder = /* @__PURE__ */ new Map();
+  [...leaves].sort((a, b) => a.y - b.y || a.x - b.x).forEach((node, index) => leafOrder.set(node.id, index));
+  const containerDepth = new Map(containers.map((node) => [node.id, node.depth]));
+  const nodeDelay = (id) => {
+    const order = leafOrder.get(id);
+    if (order !== void 0) return Number(Math.min(2, 0.2 + order * 0.12).toFixed(3));
+    return Number((0.05 + (containerDepth.get(id) ?? 0) * 0.08).toFixed(3));
+  };
+  const at = (animation) => build ? { animation } : {};
   for (const node of containers) {
     const t = transform(node);
     const card = {
@@ -5795,7 +5924,8 @@ function diagramBlock(input, context) {
         strokeWidth: Math.max(1, strokeW - 1),
         borderRadius: 10
       },
-      position: { x: t.x, y: t.y, width: t.w, height: t.h }
+      position: { x: t.x, y: t.y, width: t.w, height: t.h },
+      ...at({ type: "fadeIn", duration: 0.5, delay: nodeDelay(node.id) })
     };
     layers.push(card);
   }
@@ -5812,6 +5942,9 @@ function diagramBlock(input, context) {
     const b = positions.get(edge.target);
     if (!a || !b) continue;
     const endMarker = edge.directed ? configuredEnd : "none";
+    const edgeDelay = Number(
+      (Math.max(nodeDelay(edge.source), nodeDelay(edge.target)) + 0.3).toFixed(3)
+    );
     const snapped = snapEndpoints(a, b);
     const start = edge.sourceAnchor ? anchorPoint(a, edge.sourceAnchor) : snapped.start;
     const end = edge.targetAnchor ? anchorPoint(b, edge.targetAnchor) : snapped.end;
@@ -5827,7 +5960,8 @@ function diagramBlock(input, context) {
         ...startMarker !== "none" ? { startMarker } : {},
         ...endMarker !== "none" ? { endMarker } : {}
       },
-      position: { x: 0, y: 0, width: "100%", height: "100%" }
+      position: { x: 0, y: 0, width: "100%", height: "100%" },
+      ...at({ type: "drawOn", duration: 0.6, delay: edgeDelay })
     };
     layers.push(pathLayer);
     if (edge.label) {
@@ -5846,7 +5980,8 @@ function diagramBlock(input, context) {
             textAlign: "center"
           }
         },
-        position: { x: mx, y: my - labelFontSize * 0.9, anchor: "center" }
+        position: { x: mx, y: my - labelFontSize * 0.9, anchor: "center" },
+        ...at({ type: "fadeIn", duration: 0.4, delay: Number((edgeDelay + 0.5).toFixed(3)) })
       };
       layers.push(labelLayer);
     }
@@ -5863,7 +5998,8 @@ function diagramBlock(input, context) {
         strokeWidth: strokeW,
         borderRadius: input.nodeShape === "pill" ? t.h / 2 : 10
       },
-      position: { x: t.x, y: t.y, width: t.w, height: t.h }
+      position: { x: t.x, y: t.y, width: t.w, height: t.h },
+      ...at({ type: "grow", origin: "center", duration: 0.45, delay: nodeDelay(node.id) })
     };
     layers.push(card);
     const preferredFontSize = themedFontSize(Math.round(22 * fontAdj), context, false);
@@ -5887,7 +6023,12 @@ function diagramBlock(input, context) {
         y: t.y + t.h / 2 + fit.firstLineOffset,
         anchor: "center",
         width: fit.textWidth
-      }
+      },
+      ...at({
+        type: "fadeIn",
+        duration: 0.3,
+        delay: Number((nodeDelay(node.id) + 0.15).toFixed(3))
+      })
     };
     layers.push(label);
   }
@@ -5907,7 +6048,8 @@ function diagramBlock(input, context) {
           textAlign: "center"
         }
       },
-      position: { x: t.x + t.w / 2, y: t.y + fontSize, anchor: "center", width: t.w }
+      position: { x: t.x + t.w / 2, y: t.y + fontSize, anchor: "center", width: t.w },
+      ...at({ type: "fadeIn", duration: 0.4, delay: nodeDelay(node.id) })
     };
     layers.push(label);
   }
@@ -6010,6 +6152,13 @@ function treeBlock(input, context) {
   return layers;
 }
 
+// src/doc/utils/textMetrics.ts
+var AVERAGE_CHAR_WIDTH_EM = 0.62;
+var BOLD_CHAR_WIDTH_EM = 0.66;
+function estimateTextWidth(text, fontSize, charWidthEm = AVERAGE_CHAR_WIDTH_EM) {
+  return text.length * fontSize * charWidthEm;
+}
+
 // src/doc/templates/timelineBlock.ts
 var clamp012 = (value) => Math.max(0, Math.min(1, value));
 var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
@@ -6073,7 +6222,7 @@ function coerceLinks(raw, eventIds) {
   }
   return links;
 }
-function diamondLayer(id, x, y, radius, color, delay) {
+function diamondLayer(id, x, y, radius, color, delay, build) {
   return {
     type: "path",
     id,
@@ -6084,7 +6233,7 @@ function diamondLayer(id, x, y, radius, color, delay) {
       strokeWidth: 2
     },
     position: { x: x - radius, y: y - radius, width: radius * 2, height: radius * 2 },
-    animation: { type: "zoomIn", duration: 0.35, delay }
+    animation: build ? { type: "grow", origin: "center", duration: 0.35, delay } : { type: "zoomIn", duration: 0.35, delay }
   };
 }
 function branchPath(source, target, bend) {
@@ -6102,10 +6251,22 @@ function timelineBlock(input, context) {
   const colors = resolveColorScheme(context, input.colorScheme);
   const tracks = coerceTracks(input.tracks);
   const layers = [createBackgroundLayer("bg", themedSurfaceGradient(context, 165))];
-  const titleFontSize = themedFontSize(44, context, true);
-  const trackFontSize = themedFontSize(22, context, false);
-  const baseEventFontSize = themedFontSize(24, context, false);
-  const baseDescriptionFontSize = themedFontSize(17, context, false);
+  const build = getMotionProfile(context).diagramBuild;
+  const strokeIn = (duration, delay, fallbackDuration) => build ? { type: "drawOn", duration, delay } : { type: "fadeIn", duration: fallbackDuration, delay };
+  const titleFontSize = themedFontSize(52, context, true);
+  const trackFontSize = themedFontSize(26, context, false);
+  const baseEventFontSize = themedFontSize(28, context, false);
+  const baseDescriptionFontSize = themedFontSize(20, context, false);
+  const trackCount = Math.max(1, tracks.length);
+  const viewportScale = Math.min(viewport.width, viewport.height) / 1080;
+  const calloutExtent = 78 + Math.min(baseEventFontSize, 28 * viewportScale) * 1.4 + Math.min(baseDescriptionFontSize, 20 * viewportScale) * 1.4 * 2 + 28;
+  const naturalBand = calloutExtent * 2 + 24;
+  const titleBlock2 = input.title ? titleFontSize * 1.3 + 40 : 0;
+  const maxTracksHeight = viewport.height * 0.82 - titleBlock2;
+  const trackBand = Math.max(120, Math.min(naturalBand, maxTracksHeight / trackCount));
+  const groupHeight = titleBlock2 + trackBand * trackCount;
+  const groupTop = Math.max(viewport.height * 0.06, (viewport.height - groupHeight) / 2);
+  const contentTop = groupTop + titleBlock2;
   if (input.title) {
     layers.push({
       type: "text",
@@ -6121,8 +6282,8 @@ function timelineBlock(input, context) {
           shadow: shouldUseShadow(context)
         }
       },
-      position: { x: "50%", y: Math.max(50, titleFontSize * 1.2), width: "82%", anchor: "center" },
-      animation: { type: "fadeIn", duration: 0.7 }
+      position: { x: "50%", y: groupTop + titleFontSize * 0.65, width: "82%", anchor: "center" },
+      animation: motionEntrance(context, { type: "fadeIn", duration: 0.7 })
     });
   }
   if (tracks.length === 0) {
@@ -6144,14 +6305,17 @@ function timelineBlock(input, context) {
   }
   const hasTrackLabels = tracks.some((track) => !!track.label);
   const outerMargin = Math.max(48, viewport.width * 0.065);
-  const labelWidth = hasTrackLabels ? Math.min(280, viewport.width * 0.18) : 0;
+  const labelGap = 32;
+  const longestLabel = Math.max(
+    0,
+    ...tracks.map(
+      (track) => track.label ? estimateTextWidth(track.label, trackFontSize, BOLD_CHAR_WIDTH_EM) : 0
+    )
+  );
+  const labelWidth = hasTrackLabels ? Math.min(Math.min(280, viewport.width * 0.18), Math.ceil(longestLabel) + labelGap) : 0;
   const axisStartX = outerMargin + labelWidth;
   const axisEndX = viewport.width - outerMargin;
   const axisWidth = Math.max(1, axisEndX - axisStartX);
-  const contentTop = input.title ? Math.max(titleFontSize * 2.2, viewport.height * 0.2) : viewport.height * 0.09;
-  const contentBottom = viewport.height * 0.91;
-  const availableHeight = Math.max(1, contentBottom - contentTop);
-  const trackBand = availableHeight / tracks.length;
   const markerRadius = Math.max(6, Math.min(11, Math.min(viewport.width, viewport.height) / 105));
   const trackColor = withAlpha(colors.text ?? theme.colors.primary, 0.72);
   const accentColor = colors.accent ?? theme.colors.primary;
@@ -6166,8 +6330,8 @@ function timelineBlock(input, context) {
     Math.min(330, axisWidth / Math.min(maxCalloutEvents, 4) * 0.86)
   );
   const minViewportScale = Math.min(viewport.width, viewport.height) / 1080;
-  const eventFontSize = Math.min(baseEventFontSize, 24 * minViewportScale);
-  const descriptionFontSize = Math.min(baseDescriptionFontSize, 17 * minViewportScale);
+  const eventFontSize = Math.min(baseEventFontSize, 28 * minViewportScale);
+  const descriptionFontSize = Math.min(baseDescriptionFontSize, 20 * minViewportScale);
   const trackMarkerRadii = tracks.map((track) => {
     const positions = track.events.map((event) => clamp012(event.position)).sort((a, b) => a - b);
     let minGapPx = Number.POSITIVE_INFINITY;
@@ -6193,7 +6357,7 @@ function timelineBlock(input, context) {
         endMarker: "arrow"
       },
       position: { x: axisStartX, y: y - markerRadius, width: axisWidth, height: markerRadius * 2 },
-      animation: { type: "fadeIn", duration: 0.65, delay: trackDelay }
+      animation: strokeIn(0.9, trackDelay, 0.65)
     };
     layers.push(line);
     if (track.label) {
@@ -6211,12 +6375,12 @@ function timelineBlock(input, context) {
           }
         },
         position: {
-          x: outerMargin + labelWidth / 2 - 16,
+          x: outerMargin + (labelWidth - labelGap) / 2,
           y,
-          width: Math.max(1, labelWidth - 32),
+          width: Math.max(1, labelWidth - labelGap),
           anchor: "center"
         },
-        animation: { type: "fadeIn", duration: 0.5, delay: trackDelay }
+        animation: motionEntrance(context, { type: "fadeIn", duration: 0.5, delay: trackDelay })
       };
       layers.push(label);
     }
@@ -6240,7 +6404,7 @@ function timelineBlock(input, context) {
           width: Math.max(48, outerMargin - markerRadius * 2),
           anchor: "top-left"
         },
-        animation: { type: "fadeIn", duration: 0.5, delay: trackDelay }
+        animation: motionEntrance(context, { type: "fadeIn", duration: 0.5, delay: trackDelay })
       });
     }
     track.events.forEach((event, eventIndex) => {
@@ -6272,7 +6436,7 @@ function timelineBlock(input, context) {
         endMarker: "arrow"
       },
       position: { x: 0, y: 0, width: "100%", height: "100%" },
-      animation: { type: "fadeIn", duration: 0.6, delay: 0.45 + linkIndex * 0.08 }
+      animation: strokeIn(0.6, 0.45 + linkIndex * 0.08, 0.6)
     });
     if (link.label) {
       const sameTrack = source.trackIndex === target.trackIndex;
@@ -6330,7 +6494,11 @@ function timelineBlock(input, context) {
           height: linkLabelHeight,
           anchor: "center"
         },
-        animation: { type: "fadeIn", duration: 0.5, delay: 0.55 + linkIndex * 0.08 }
+        animation: motionEntrance(context, {
+          type: "fadeIn",
+          duration: 0.5,
+          delay: 0.55 + linkIndex * 0.08
+        })
       });
     }
   });
@@ -6360,7 +6528,7 @@ function timelineBlock(input, context) {
           width: Math.max(2, Math.abs(calloutX - x)),
           height: Math.max(2, Math.abs(endY - y))
         },
-        animation: { type: "fadeIn", duration: 0.4, delay: stemDelay }
+        animation: strokeIn(0.35, stemDelay, 0.4)
       });
     };
     if (event.callout !== false) {
@@ -6384,7 +6552,8 @@ function timelineBlock(input, context) {
           y,
           pointMarkerRadius,
           accentColor,
-          delay
+          delay,
+          build
         )
       );
     } else {
@@ -6403,7 +6572,7 @@ function timelineBlock(input, context) {
           width: pointMarkerRadius * 2,
           height: pointMarkerRadius * 2
         },
-        animation: { type: "zoomIn", duration: 0.35, delay }
+        animation: build ? { type: "grow", origin: "center", duration: 0.35, delay } : { type: "zoomIn", duration: 0.35, delay }
       };
       layers.push(dot);
     }
@@ -6437,7 +6606,7 @@ function timelineBlock(input, context) {
           }
         },
         position: { x: calloutX, y: labelY, width: calloutWidth, anchor: "center" },
-        animation: { type: "fadeIn", duration: 0.5, delay: delay + 0.08 }
+        animation: motionEntrance(context, { type: "fadeIn", duration: 0.5, delay: delay + 0.08 })
       });
       if (event.description) {
         const descriptionSide = event.descriptionSide ?? side;
@@ -6486,7 +6655,11 @@ function timelineBlock(input, context) {
             }
           },
           position: { x: calloutX, y: descriptionY, width: calloutWidth, anchor: "center" },
-          animation: { type: "fadeIn", duration: 0.5, delay: delay + 0.14 }
+          animation: motionEntrance(context, {
+            type: "fadeIn",
+            duration: 0.5,
+            delay: delay + 0.14
+          })
         });
       }
     }
@@ -7699,12 +7872,13 @@ function stackSeries(series) {
     })
   );
 }
+var CHART_CHAR_WIDTH_EM = 0.62;
 function layoutLegend(labels, fontSize, maxWidth) {
   const swatchSize = fontSize * 0.9;
-  const gap = fontSize * 1.6;
+  const gap = fontSize * 2.2;
   const rowHeight = fontSize * 2;
   const widths = labels.map(
-    (label) => swatchSize + fontSize * 0.5 + label.length * fontSize * 0.58
+    (label) => swatchSize + fontSize * 0.5 + label.length * fontSize * CHART_CHAR_WIDTH_EM
   );
   const rows = [];
   let current = [];
@@ -7758,10 +7932,10 @@ function renderChart(kind, input, context) {
   const { theme, viewport } = context;
   const templateId = TEMPLATE_ID[kind];
   const title = (input.title ?? "").trim();
-  const titleFontSize = themedFontSize(44, context, true);
-  const axisFontSize = themedFontSize(20, context, false);
-  const labelFontSize = themedFontSize(22, context, false);
-  const legendFontSize = themedFontSize(22, context, false);
+  const titleFontSize = themedFontSize(52, context, true);
+  const axisFontSize = themedFontSize(24, context, false);
+  const labelFontSize = themedFontSize(26, context, false);
+  const legendFontSize = themedFontSize(26, context, false);
   const tableFontSize = themedFontSize(20, context, false);
   const bodyFont = getThemeFont(context, "body");
   const isRadial = kind === "pie" || kind === "donut";
@@ -7790,11 +7964,55 @@ function renderChart(kind, input, context) {
     tableFontSize
   });
   const entranceHint = getTemplateHint(context, templateId, "entrance", "staggered");
+  const markDelay = (index) => entranceHint === "subtle" ? 0.1 : Math.min(1.2, 0.2 + index * 0.08);
   const entrance = (index) => ({
     type: "fadeIn",
     duration: 0.6,
-    delay: entranceHint === "subtle" ? 0.1 : Math.min(1.2, 0.2 + index * 0.08)
+    delay: markDelay(index)
   });
+  const motion = getMotionProfile(context);
+  const growDuration = motion.chartGrowthDuration;
+  const growEasing = motion.textEntrance.easing;
+  const eased = (animation) => growEasing ? { ...animation, easing: growEasing } : animation;
+  const mark = (index, kind2, along = 0) => {
+    if (!motion.chartGrowth) return entrance(index);
+    const delay = motionDelay(context, markDelay(index));
+    switch (kind2) {
+      case "bar":
+        return eased({ type: "grow", origin: "left", duration: growDuration, delay });
+      case "bar-negative":
+        return eased({ type: "grow", origin: "right", duration: growDuration, delay });
+      case "column":
+        return eased({ type: "grow", origin: "bottom", duration: growDuration, delay });
+      case "column-negative":
+        return eased({ type: "grow", origin: "top", duration: growDuration, delay });
+      case "line":
+        return { type: "drawOn", duration: growDuration * 1.4, delay };
+      case "area":
+        return { type: "reveal", origin: "left", duration: growDuration * 1.4, delay };
+      case "point":
+        return {
+          type: "grow",
+          origin: "center",
+          duration: 0.35,
+          delay: Number((delay + growDuration * 1.4 * along).toFixed(3))
+        };
+      case "wedge":
+        return eased({
+          type: "grow",
+          origin: "center",
+          duration: Math.max(0.4, growDuration * 0.6),
+          delay
+        });
+      case "dot":
+        return eased({ type: "grow", origin: "center", duration: 0.4, delay });
+    }
+  };
+  const labelAnimation = (index, fallback, along = 0) => {
+    if (!motion.chartGrowth) return fallback;
+    const settled = motionDelay(context, markDelay(index)) + growDuration * (along > 0 ? 1.4 * along : 1);
+    return { type: "fadeIn", duration: 0.4, delay: Number(settled.toFixed(3)) };
+  };
   const paint = {
     kind,
     input,
@@ -7807,7 +8025,9 @@ function renderChart(kind, input, context) {
     bodyFont,
     gridColor: withAlpha(theme.colors.text, 0.12),
     axisTextColor: theme.colors.textMuted,
-    entrance
+    entrance,
+    mark,
+    labelAnimation
   };
   const layers = [createBackgroundLayer("bg", themedSurfaceGradient(context, 170))];
   if (title && frame.titleBand) {
@@ -7831,7 +8051,7 @@ function renderChart(kind, input, context) {
         width: frame.titleBand.width,
         anchor: "center"
       },
-      animation: { type: "fadeIn", duration: 0.8 }
+      animation: motionEntrance(context, { type: "fadeIn", duration: 0.8 })
     });
   }
   switch (kind) {
@@ -8005,7 +8225,7 @@ function paintCategoryAxisX(paint, xForCenter) {
   return layers;
 }
 function paintColumns(paint) {
-  const { frame, data, colors, input, entrance } = paint;
+  const { frame, data, colors, input, mark, labelAnimation } = paint;
   const scale = valueTicks("column", data, input);
   const yFor = (v) => frame.plot.y + frame.plot.height * (1 - (v - scale.niceMin) / (scale.niceMax - scale.niceMin));
   const layers = paintValueAxisY(paint, scale, yFor);
@@ -8030,7 +8250,7 @@ function paintColumns(paint) {
         id: `mark-${s}-${i}`,
         content: { shape: "rect", fill: colors[s], borderRadius: stacked ? 0 : 3 },
         position: { x, y: top, width: barWidth, height },
-        animation: entrance(i + s)
+        animation: mark(i + s, extent.y1 <= 0 ? "column-negative" : "column")
       });
       if (input.showValues === true && value !== null && !stacked) {
         layers.push(
@@ -8039,7 +8259,8 @@ function paintColumns(paint) {
             `val-${s}-${i}`,
             value,
             x + barWidth / 2,
-            value >= 0 ? top - paint.axisFontSize * 0.9 : top + height + paint.axisFontSize * 0.9
+            value >= 0 ? top - paint.axisFontSize * 0.9 : top + height + paint.axisFontSize * 0.9,
+            labelAnimation(i + s)
           )
         );
       }
@@ -8053,7 +8274,8 @@ function paintBars(paint) {
     data,
     colors,
     input,
-    entrance,
+    mark,
+    labelAnimation,
     labelFontSize,
     axisFontSize,
     bodyFont,
@@ -8062,7 +8284,7 @@ function paintBars(paint) {
   } = paint;
   const scale = valueTicks("bar", data, input);
   const labelGap = axisFontSize * 0.6;
-  const labelWidthPx = (value) => formatChartValue(value, input.unit).length * axisFontSize * 0.58;
+  const labelWidthPx = (value) => formatChartValue(value, input.unit).length * axisFontSize * CHART_CHAR_WIDTH_EM;
   const showValueLabels = input.showValues === true && !(input.stacked === true);
   const reservedForLabels = showValueLabels ? data.series.flatMap((series) => series.values).filter((v) => v !== null).reduce((max, v) => Math.max(max, labelWidthPx(v)), 0) + labelGap : 0;
   const axisWidth = Math.max(20, frame.plot.width - reservedForLabels);
@@ -8140,19 +8362,28 @@ function paintBars(paint) {
         id: `mark-${s}-${i}`,
         content: { shape: "rect", fill: colors[s], borderRadius: stacked ? 0 : 3 },
         position: { x: left, y, width, height: barHeight },
-        animation: entrance(i + s)
+        animation: mark(i + s, extent.y1 <= 0 ? "bar-negative" : "bar")
       });
       if (showValueLabels && value !== null) {
         const half = labelWidthPx(value) / 2;
         const labelX = value >= 0 ? left + width + labelGap + half : left - labelGap - half;
-        layers.push(valueLabel(paint, `val-${s}-${i}`, value, labelX, y + barHeight / 2));
+        layers.push(
+          valueLabel(
+            paint,
+            `val-${s}-${i}`,
+            value,
+            labelX,
+            y + barHeight / 2,
+            labelAnimation(i + s)
+          )
+        );
       }
     });
   });
   return layers;
 }
 function paintRadial(paint) {
-  const { kind, frame, data, colors, input, entrance, context } = paint;
+  const { kind, frame, data, colors, input, entrance, mark, labelAnimation, context } = paint;
   const slices = data.labels.map((label, index) => ({ label, value: data.series[0].values[index], index })).filter(
     (s) => s.value !== null && Number.isFinite(s.value) && s.value > 0
   );
@@ -8175,7 +8406,7 @@ function paintRadial(paint) {
         strokeWidth: 2
       },
       position: { x: cx - rOuter, y: cy - rOuter, width: rOuter * 2, height: rOuter * 2 },
-      animation: entrance(order)
+      animation: mark(order, "wedge")
     });
     if (input.showValues === true && sweep >= 14) {
       const mid = startDeg + sweep / 2;
@@ -8200,7 +8431,7 @@ function paintRadial(paint) {
           y: cy + rLabel * Math.sin(rad),
           anchor: "center"
         },
-        animation: entrance(order)
+        animation: labelAnimation(order, entrance(order))
       });
     }
     startDeg += sweep;
@@ -8208,7 +8439,7 @@ function paintRadial(paint) {
   return layers;
 }
 function paintLines(paint) {
-  const { kind, frame, data, colors, input, entrance } = paint;
+  const { kind, frame, data, colors, input, mark, labelAnimation } = paint;
   const scale = valueTicks(kind, data, input);
   const yFor = (v) => frame.plot.y + frame.plot.height * (1 - (v - scale.niceMin) / (scale.niceMax - scale.niceMin));
   const n = data.labels.length;
@@ -8249,7 +8480,7 @@ function paintLines(paint) {
             width: frame.plot.width,
             height: frame.plot.height
           },
-          animation: entrance(s)
+          animation: mark(s, "area")
         });
       }
       if (segment.length > 1) {
@@ -8263,7 +8494,7 @@ function paintLines(paint) {
             width: frame.plot.width,
             height: frame.plot.height
           },
-          animation: entrance(s)
+          animation: mark(s, "line")
         });
       }
     });
@@ -8276,7 +8507,7 @@ function paintLines(paint) {
           id: `pt-${s}-${i}`,
           content: { shape: "circle", fill: colors[s] },
           position: { x: xForCenter(i) - r, y: yFor(value) - r, width: r * 2, height: r * 2 },
-          animation: entrance(s)
+          animation: mark(s, "point", i / Math.max(1, n - 1))
         });
         if (input.showValues === true) {
           layers.push(
@@ -8285,7 +8516,8 @@ function paintLines(paint) {
               `val-${s}-${i}`,
               value,
               xForCenter(i),
-              yFor(value) - paint.axisFontSize
+              yFor(value) - paint.axisFontSize,
+              labelAnimation(s, void 0, i / Math.max(1, n - 1))
             )
           );
         }
@@ -8295,7 +8527,7 @@ function paintLines(paint) {
   return layers;
 }
 function paintScatter(paint) {
-  const { frame, data, colors, input, entrance } = paint;
+  const { frame, data, colors, input, mark } = paint;
   const scale = valueTicks("scatter", data, input);
   const yFor = (v) => frame.plot.y + frame.plot.height * (1 - (v - scale.niceMin) / (scale.niceMax - scale.niceMin));
   const layers = paintValueAxisY(paint, scale, yFor);
@@ -8353,7 +8585,7 @@ function paintScatter(paint) {
         id: `mark-${s}-${i}`,
         content: { shape: "circle", fill: colors[s], fillOpacity: 0.85 },
         position: { x: x - r, y: yFor(value) - r, width: r * 2, height: r * 2 },
-        animation: entrance(Math.floor(i / 3) + s)
+        animation: mark(Math.floor(i / 3) + s, "dot")
       });
     });
   });
@@ -8390,7 +8622,7 @@ function paintLegend(paint, legend, band, fontSize) {
   });
   return layers;
 }
-function valueLabel(paint, id, value, x, y) {
+function valueLabel(paint, id, value, x, y, animation) {
   return {
     type: "text",
     id,
@@ -8404,7 +8636,8 @@ function valueLabel(paint, id, value, x, y) {
         textAlign: "center"
       }
     },
-    position: { x, y, anchor: "center" }
+    position: { x, y, anchor: "center" },
+    ...animation ? { animation } : {}
   };
 }
 function tableLayer(table, band, fontSize, input, context) {
@@ -8729,6 +8962,25 @@ function avatarLayers(idPrefix, name, imageSrc, x, y, context) {
 }
 
 // src/doc/templates/registry.ts
+var GEOMETRY_BOUND_TEMPLATES = /* @__PURE__ */ new Set([
+  "barChart",
+  "columnChart",
+  "lineChart",
+  "areaChart",
+  "pieChart",
+  "donutChart",
+  "scatterChart",
+  "comparisonBar",
+  "timeline",
+  "diagram",
+  "drawing",
+  "tree",
+  "map",
+  "dataTable"
+]);
+function isGeometryBoundTemplate(template) {
+  return template !== void 0 && GEOMETRY_BOUND_TEMPLATES.has(template);
+}
 var templateRegistry = {
   title: titleBlock,
   sectionHeader,
@@ -9412,7 +9664,7 @@ function materializeBlockLayersWithRuntime(block, options, runtime) {
       source: layers.length > 0 ? "rich-content" : "empty"
     };
   }
-  const context = runtime.templateContext ? cloneData(runtime.templateContext) : createTemplateContext(theme, blockIndex, totalBlocks, viewport);
+  const context = runtime.templateContext ? cloneData(runtime.templateContext) : createTemplateContext(theme, blockIndex, totalBlocks, viewport, { motion: options.motion });
   context.block = cloneData(block);
   const execution = executeTemplateMaterialization(block, context, runtime.registry);
   if (execution.status === "ok") {
@@ -10297,8 +10549,9 @@ function coverBlock(input, context) {
       anchor: "center",
       width: layout.maxTextWidth
     },
-    // No animation delay - shown immediately at rest
-    animation: { type: "fadeIn", duration: 0.8 }
+    // No animation delay - shown immediately at rest. Word-by-word reveal is
+    // a profile opt-in (off by default: the cover doubles as the poster).
+    animation: getMotionProfile(context).coverWordReveal ? { type: "wordReveal", duration: 0.5, delay: 0.1, stagger: 0.12 } : { type: "fadeIn", duration: 0.8 }
   });
   if (subtitle) {
     layers.push({
@@ -10321,7 +10574,7 @@ function coverBlock(input, context) {
         anchor: "center",
         width: layout.maxTextWidth
       },
-      animation: { type: "fadeIn", duration: 0.8, delay: 0.2 }
+      animation: motionEntrance(context, { type: "fadeIn", duration: 0.8, delay: 0.2 })
     });
   }
   return layers;
@@ -10416,7 +10669,7 @@ function expandCoverBlock(config, context, template = "cover") {
 }
 
 // src/doc/templates/index.ts
-function materializeScheduledBlock(sourceBlock, blockIndex, totalBlocks, theme, viewport, persistentLayers, expandedPersistentLayers, registry, failureMode, onDiagnostic) {
+function materializeScheduledBlock(sourceBlock, blockIndex, totalBlocks, theme, viewport, persistentLayers, expandedPersistentLayers, registry, failureMode, onDiagnostic, motion) {
   const materialized = materializeBlockLayersWithRuntime(
     sourceBlock,
     {
@@ -10425,7 +10678,8 @@ function materializeScheduledBlock(sourceBlock, blockIndex, totalBlocks, theme,
       persistentLayers: persistentLayers ?? false,
       blockIndex,
       totalBlocks,
-      failureMode
+      failureMode,
+      motion
     },
     { registry, expandedPersistentLayers }
   );
@@ -10461,7 +10715,8 @@ function expandDocBlocks(blocks, options = {}) {
     failureMode = "fallback",
     onDiagnostic,
     splitLongBlocks = true,
-    mergeShortBlocks = true
+    mergeShortBlocks = true,
+    motion
   } = opts;
   const totalBlocks = blocks.length;
   const registry = customTemplates && customTemplates.length > 0 ? buildRegistry(customTemplates) : templateRegistry;
@@ -10483,7 +10738,8 @@ function expandDocBlocks(blocks, options = {}) {
         expandedPersistentLayers,
         registry,
         failureMode,
-        onDiagnostic
+        onDiagnostic,
+        motion
       );
       expandedBlock.startTime = currentTime;
       currentTime += expandedBlock.duration;
@@ -10515,7 +10771,8 @@ function expandDocBlocks(blocks, options = {}) {
           expandedPersistentLayers,
           registry,
           failureMode,
-          onDiagnostic
+          onDiagnostic,
+          motion
         );
         expandedBlock.startTime = offsetTime;
         offsetTime += expandedBlock.duration;
@@ -10553,7 +10810,8 @@ function expandDocBlocks(blocks, options = {}) {
         expandedPersistentLayers,
         registry,
         failureMode,
-        onDiagnostic
+        onDiagnostic,
+        motion
       );
       const templateBlock = block;
       expandedInfos.push({
@@ -11669,6 +11927,7 @@ function markdownToDoc(markdownDoc, options) {
   const customTemplates = readCustomTemplatesFromFrontmatter(markdownDoc.frontmatter);
   const customThemes = readCustomThemesFromFrontmatter(markdownDoc.frontmatter);
   const themeId = readFrontmatterThemeId(markdownDoc.frontmatter);
+  const motion = readFrontmatterMotion(markdownDoc.frontmatter);
   const doc = {
     articleId,
     duration: currentTime,
@@ -11679,6 +11938,7 @@ function markdownToDoc(markdownDoc, options) {
     ...captions ? { captions } : {},
     ...markdownDoc.frontmatter ? { frontmatter: markdownDoc.frontmatter } : {},
     ...themeId ? { themeId } : {},
+    ...motion ? { motion } : {},
     ...customTemplates ? { customTemplates } : {},
     ...customThemes ? { customThemes } : {},
     ...diagnostics.length > 0 ? { diagnostics } : {},
@@ -11987,6 +12247,9 @@ export {
   scaleAnimationDuration,
   getDefaultAnimation,
   themedEntrance,
+  getMotionProfile,
+  motionEntrance,
+  motionDelay,
   shouldUseShadow,
   getOverlayOpacity,
   themedImageTreatment,
@@ -12028,6 +12291,10 @@ export {
   autoTemplatePreservesContent,
   deriveTemplateInputs,
   contentBlock,
+  parseStatNumber,
+  countUpSpecFor,
+  formatCountValue,
+  formatCountUp,
   statHighlight,
   quoteBlock,
   factCard,
@@ -12065,6 +12332,8 @@ export {
   drawingBlock,
   computeLayoutLayers,
   layoutBlock,
+  GEOMETRY_BOUND_TEMPLATES,
+  isGeometryBoundTemplate,
   templateRegistry,
   buildRegistry,
   themeWantsAmbientMotion,