@vanillaskyai/video 0.1.0

package/dist/chunk-BCRUUJ6A.js

@@ -0,0 +1,756 @@
+import {
+  Emoji,
+  planTypewriterEmoji,
+  renderWithEmoji
+} from "./chunk-L5BTTCZV.js";
+import {
+  Easing,
+  SPRING_CRISP,
+  interpolate,
+  spring
+} from "./chunk-XTOXFMLM.js";
+
+// src/visual-system/scene-templates/text-archetypes.ts
+var TEXT_ARCHETYPES = [
+  "subtle",
+  "typewriter",
+  "wordStagger",
+  "slam",
+  "cinematic",
+  "heroWord"
+];
+function normalizeArchetype(input) {
+  if (typeof input !== "string" || input.length === 0) return "subtle";
+  if (TEXT_ARCHETYPES.includes(input)) return input;
+  return "subtle";
+}
+var ARCHETYPE_SPECS = {
+  subtle: {
+    name: "subtle",
+    description: "Quiet caption. Visual is the star, text supports.",
+    entrance: 0.5,
+    exit: 0.7,
+    allowedCanvas: ["tight", "open"],
+    roles: ["body", "closer"],
+    sizeRange: [0.7, 1],
+    minDuration: 1.5,
+    maxDuration: 5
+  },
+  typewriter: {
+    name: "typewriter",
+    description: "Char-by-char reveal with blinking cursor. Slide-left cascade exit, top line first.",
+    entrance: 1.2,
+    exit: 0.85,
+    allowedCanvas: ["tight", "open"],
+    roles: ["body", "hook"],
+    sizeRange: [0.8, 1],
+    minDuration: 1.8,
+    maxDuration: 6
+  },
+  wordStagger: {
+    name: "wordStagger",
+    description: "Sequential word build with active-word focus. Slide-left cascade exit, top line first.",
+    entrance: 1.4,
+    exit: 0.7,
+    allowedCanvas: ["tight", "open"],
+    roles: ["body"],
+    sizeRange: [0.8, 1],
+    minDuration: 1.8,
+    maxDuration: 6
+  },
+  slam: {
+    name: "slam",
+    description: "In-place impact with violent squash-and-stretch, frame shake, and letter crunch.",
+    entrance: 0.5,
+    exit: 0.5,
+    allowedCanvas: ["tight", "open"],
+    roles: ["hook", "body"],
+    sizeRange: [0.9, 1.2],
+    minDuration: 1.2,
+    maxDuration: 4
+  },
+  cinematic: {
+    name: "cinematic",
+    description: "Trailer FlyIn from depth \u2192 recedes back into background.",
+    entrance: 0.7,
+    exit: 0.8,
+    allowedCanvas: ["open"],
+    roles: ["hook", "body", "closer"],
+    sizeRange: [0.9, 1.1],
+    minDuration: 1.8,
+    maxDuration: 6
+  },
+  heroWord: {
+    name: "heroWord",
+    description: "Single word fills frame. Simple fast exit so words get the most time.",
+    entrance: 0.35,
+    exit: 0.25,
+    allowedCanvas: ["open"],
+    roles: ["hook", "body", "closer"],
+    sizeRange: [2, 3],
+    minDuration: 1,
+    maxDuration: 5
+  }
+};
+var ENTRANCE_START = 0.02;
+var ENTRANCE_PHASE_CAP = 0.4;
+var EXIT_PHASE_CAP = 0.4;
+function computePhases(spec, sceneDuration, progress, phaseScale = 1) {
+  const entrancePhase = Math.min(ENTRANCE_PHASE_CAP, spec.entrance * phaseScale / sceneDuration);
+  const exitPhase = Math.min(EXIT_PHASE_CAP, spec.exit * phaseScale / sceneDuration);
+  const exitStart = 1 - exitPhase;
+  return { entrancePhase, exitPhase, exitStart, inExit: progress >= exitStart };
+}
+function rawEntrance(progress, entrancePhase, startAt = ENTRANCE_START) {
+  return interpolate(progress, [startAt, startAt + entrancePhase], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+}
+function rawExit(progress, exitStart) {
+  if (progress < exitStart) return 0;
+  return interpolate(progress, [exitStart, 1], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+}
+function holdT(progress, entrancePhase, exitStart, startAt = ENTRANCE_START) {
+  const holdStart = startAt + entrancePhase;
+  if (progress < holdStart || progress > exitStart || exitStart <= holdStart) return 0;
+  return (progress - holdStart) / (exitStart - holdStart);
+}
+function breathe(t, magnitude, cycles = 1) {
+  return Math.sin(t * Math.PI * 2 * cycles) * magnitude / 2;
+}
+function renderArchetype(archetypeRaw, progress, scale, text, sceneDuration, phaseScale = 1, motionProgress = progress) {
+  const archetype = normalizeArchetype(archetypeRaw);
+  const spec = ARCHETYPE_SPECS[archetype];
+  const phases = computePhases(spec, sceneDuration, motionProgress, phaseScale);
+  const presentationProgress = Math.max(progress, motionProgress);
+  switch (archetype) {
+    case "subtle":
+      return renderSubtle(motionProgress, scale, text, phases);
+    case "typewriter":
+      return renderTypewriter(presentationProgress, motionProgress, scale, text, phases, sceneDuration);
+    case "wordStagger":
+      return renderWordStagger(presentationProgress, motionProgress, scale, text, sceneDuration);
+    case "slam":
+      return renderSlam(motionProgress, scale, text, phases);
+    case "cinematic":
+      return renderCinematic(motionProgress, scale, text, phases);
+    case "heroWord":
+      return renderHeroWord(presentationProgress, motionProgress, text, phases);
+  }
+}
+function renderSubtle(progress, _scale, text, phases) {
+  const raw = rawEntrance(progress, phases.entrancePhase);
+  const ex = rawExit(progress, phases.exitStart);
+  const opacityIn = Easing.out(Easing.cubic)(raw);
+  const opacityOut = 1 - Easing.in(Easing.cubic)(ex);
+  const opacity = opacityIn * (phases.inExit ? opacityOut : 1);
+  return {
+    kind: "block",
+    block: {
+      opacity,
+      transform: "none"
+    },
+    text
+  };
+}
+function renderTypewriter(progress, motionProgress, scale, text, phases, sceneDuration) {
+  const raw = rawEntrance(progress, phases.entrancePhase);
+  const visibleChars = Math.max(0, Math.floor(raw * text.length));
+  const seconds = progress * sceneDuration;
+  const cursorOn = Math.sin(seconds * Math.PI * 3) > 0;
+  const stillTyping = visibleChars < text.length;
+  const opacityIn = Math.min(1, raw * 8);
+  const cursor = cursorOn && (stillTyping || !phases.inExit && opacityIn > 0.5);
+  let charExits;
+  if (phases.inExit && text.length > 0) {
+    const STAGGER_OUT = 0.025;
+    const PER_CHAR_OUT = 0.3;
+    const SLIDE_LEFT_DISTANCE = 350 * scale;
+    const actualExitSec = phases.exitPhase * sceneDuration;
+    const idealExitSec = (text.length - 1) * STAGGER_OUT + PER_CHAR_OUT;
+    const outScale = Math.min(1, actualExitSec / idealExitSec);
+    const stagOutNorm = STAGGER_OUT * outScale / sceneDuration;
+    const perCharOutNorm = PER_CHAR_OUT * outScale / sceneDuration;
+    charExits = Array.from({ length: text.length }, (_, i) => {
+      const charExitStart = phases.exitStart + i * stagOutNorm;
+      const charExitEnd = charExitStart + perCharOutNorm;
+      const charExitRaw = interpolate(motionProgress, [charExitStart, charExitEnd], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      const charExitEased = Easing.in(Easing.cubic)(charExitRaw);
+      return {
+        opacity: 1 - charExitEased,
+        translateX: -charExitEased * SLIDE_LEFT_DISTANCE
+      };
+    });
+  }
+  return {
+    kind: "typewriter",
+    visibleChars,
+    cursor,
+    opacity: opacityIn,
+    transform: "none",
+    charExits
+  };
+}
+function renderWordStagger(progress, motionProgress, scale, text, sceneDuration) {
+  const words = text.split(/\s+/).filter(Boolean);
+  const wordCount = Math.max(words.length, 1);
+  const STAGGER_MIN = 0.28;
+  const STAGGER_MAX = 0.45;
+  const PER_WORD_ANIM = 0.5;
+  const minEntrance = (wordCount - 1) * STAGGER_MIN + PER_WORD_ANIM;
+  const TARGET_ENTRANCE_FRACTION = 0.55;
+  const targetEntrance = sceneDuration * TARGET_ENTRANCE_FRACTION;
+  const exitSec = ARCHETYPE_SPECS.wordStagger.exit;
+  const minHold = 0.5;
+  const maxEntrance = Math.max(0.6, sceneDuration - exitSec - minHold);
+  let entranceSec = Math.min(maxEntrance, Math.max(minEntrance, targetEntrance));
+  if (wordCount > 1) {
+    const impliedStagger = (entranceSec - PER_WORD_ANIM) / (wordCount - 1);
+    if (impliedStagger > STAGGER_MAX) {
+      entranceSec = (wordCount - 1) * STAGGER_MAX + PER_WORD_ANIM;
+    }
+  }
+  const entrancePhase = entranceSec / sceneDuration;
+  const exitPhase = Math.min(0.4, exitSec / sceneDuration);
+  const exitStart = 1 - exitPhase;
+  const staggerIn = wordCount > 1 ? (entranceSec - PER_WORD_ANIM) / (wordCount - 1) / sceneDuration : 0;
+  const wordEntranceDur = PER_WORD_ANIM / sceneDuration;
+  const STAGGER_OUT = 0.06;
+  const PER_WORD_OUT = 0.32;
+  const SLIDE_LEFT_DISTANCE = 350 * scale;
+  const actualExitSec = exitPhase * sceneDuration;
+  const idealExitSec = (wordCount - 1) * STAGGER_OUT + PER_WORD_OUT;
+  const outScale = Math.min(1, actualExitSec / idealExitSec);
+  const stagOutNorm = STAGGER_OUT * outScale / sceneDuration;
+  const perWordOutNorm = PER_WORD_OUT * outScale / sceneDuration;
+  const ht = holdT(motionProgress, entrancePhase, exitStart);
+  const ACTIVE_DIM = 0.85;
+  const perWord = words.map((w, i) => {
+    const wordStart = ENTRANCE_START + i * staggerIn;
+    const wordEnd = wordStart + wordEntranceDur;
+    const wordRaw = interpolate(progress, [wordStart, wordEnd], [0, 1], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp"
+    });
+    const sp = spring(wordRaw, SPRING_CRISP);
+    const yIn = interpolate(sp, [0, 1], [55 * scale, 0]);
+    const rotIn = interpolate(sp, [0, 1], [-3, 0]);
+    const opacityIn = Math.min(1, wordRaw * 7);
+    const yBreathe = breathe(ht, 1 * scale, 1) * Math.cos(i / wordCount * Math.PI);
+    let dimProgress = 0;
+    if (i < words.length - 1) {
+      const nextStart = ENTRANCE_START + (i + 1) * staggerIn;
+      const SNAP_RAMP = 0.02;
+      dimProgress = interpolate(progress, [nextStart, nextStart + SNAP_RAMP], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+    }
+    const focusOpacity = 1 - dimProgress * (1 - ACTIVE_DIM);
+    const wordExitStart = exitStart + i * stagOutNorm;
+    const wordExitEnd = wordExitStart + perWordOutNorm;
+    const wordExitRaw = interpolate(motionProgress, [wordExitStart, wordExitEnd], [0, 1], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp"
+    });
+    const wordExitEased = Easing.in(Easing.cubic)(wordExitRaw);
+    const exitX = -wordExitEased * SLIDE_LEFT_DISTANCE;
+    const isExiting = wordExitRaw > 0;
+    const opacity = opacityIn * focusOpacity * (1 - wordExitEased);
+    const y = yIn + (isExiting ? 0 : yBreathe);
+    const rot = isExiting ? 0 : rotIn;
+    return {
+      text: w,
+      style: {
+        opacity,
+        transform: `translate(${exitX}px, ${y}px) rotate(${rot}deg)`
+      }
+    };
+  });
+  return {
+    kind: "words",
+    words: perWord,
+    blockOpacity: 1,
+    blockTransform: "none"
+  };
+}
+function renderSlam(progress, scale, text, phases) {
+  const raw = rawEntrance(progress, phases.entrancePhase);
+  const ex = rawExit(progress, phases.exitStart);
+  const ht = holdT(progress, phases.entrancePhase, phases.exitStart);
+  const sxIn = interpolate(raw, [0, 0.3, 0.45, 0.6, 1], [0.92, 1.22, 0.94, 1.02, 1]);
+  const syIn = interpolate(raw, [0, 0.3, 0.45, 0.6, 1], [1.18, 0.74, 1.12, 0.99, 1]);
+  const rotIn = interpolate(raw, [0, 0.3, 0.45, 1], [-1.5, 0, 0.8, 0]);
+  const lsInEm = interpolate(raw, [0, 0.2, 0.3, 0.45, 1], [0, -0.04, -0.06, 0, 0]);
+  const shakeWindow = Math.max(0, 1 - Math.max(0, raw - 0.3) / 0.2);
+  const shakeX = Math.sin(raw * 70) * 14 * scale * shakeWindow;
+  const shakeY = Math.cos(raw * 80) * 10 * scale * shakeWindow;
+  const opacityIn = Math.min(1, raw * 8);
+  const sBreathe = 1 + breathe(ht, 8e-3, 1);
+  const easedExit = Easing.in(Easing.exp)(ex);
+  const sOut = interpolate(easedExit, [0, 1], [1, 0.85]);
+  const opacityOut = interpolate(ex, [0, 0.55, 1], [1, 0.8, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  const sx = phases.inExit ? sOut : sxIn * sBreathe;
+  const sy = phases.inExit ? sOut : syIn * sBreathe;
+  const tx = phases.inExit ? 0 : shakeX;
+  const ty = phases.inExit ? 0 : shakeY;
+  const rot = phases.inExit ? 0 : rotIn;
+  const ls = phases.inExit ? 0 : lsInEm;
+  const opacity = opacityIn * (phases.inExit ? opacityOut : 1);
+  return {
+    kind: "block",
+    block: {
+      opacity,
+      transform: `translate(${tx}px, ${ty}px) rotate(${rot}deg) scale(${sx}, ${sy})`,
+      letterSpacing: `${ls}em`
+    },
+    text
+  };
+}
+function renderCinematic(progress, scale, text, phases) {
+  const raw = rawEntrance(progress, phases.entrancePhase);
+  const ex = rawExit(progress, phases.exitStart);
+  const easedIn = Easing.out(Easing.circle)(raw);
+  const sIn = interpolate(easedIn, [0, 1], [3, 1]);
+  const yIn = interpolate(easedIn, [0, 1], [18 * scale, 0]);
+  const opacityIn = interpolate(raw, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  const easedExit = Easing.in(Easing.exp)(ex);
+  const sOut = interpolate(easedExit, [0, 1], [1, 0.4]);
+  const yOut = interpolate(easedExit, [0, 1], [0, -10 * scale]);
+  const opacityOut = interpolate(ex, [0, 0.5, 1], [1, 0.85, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  const s = phases.inExit ? sOut : sIn;
+  const y = phases.inExit ? yOut : yIn;
+  const opacity = opacityIn * (phases.inExit ? opacityOut : 1);
+  return {
+    kind: "block",
+    block: {
+      opacity,
+      transform: `translateY(${y}px) scale(${s})`,
+      willChange: "transform, opacity"
+    },
+    text
+  };
+}
+function renderHeroWord(progress, motionProgress, text, phases) {
+  const words = text.split(/\s+/).filter(Boolean);
+  if (words.length === 0) {
+    return { kind: "hero", word: "", index: 0, total: 0, opacity: 0, transform: "scale(1)" };
+  }
+  const sequenceStart = ENTRANCE_START + phases.entrancePhase * 0.2;
+  const sequenceEnd = phases.exitStart;
+  const sequenceDur = Math.max(0.01, sequenceEnd - sequenceStart);
+  const localProgress = Math.max(0, Math.min(0.999, (progress - sequenceStart) / sequenceDur));
+  const idx = Math.min(words.length - 1, Math.floor(localProgress / (1 / words.length)));
+  const local = localProgress * words.length - idx;
+  const isLast = idx === words.length - 1;
+  const ENTER_FRAC = 0.28;
+  const HOLD_FRAC = 0.55;
+  const HANDOFF_FRAC = 0.85;
+  let scale;
+  let opacity;
+  if (local < ENTER_FRAC) {
+    const entRaw = local / ENTER_FRAC;
+    const sp = spring(entRaw, SPRING_CRISP);
+    scale = sp < 0.7 ? interpolate(sp, [0, 0.7], [0.5, 1.06]) : interpolate(sp, [0.7, 1], [1.06, 1]);
+    opacity = Math.min(1, entRaw * 6);
+  } else if (local < HOLD_FRAC) {
+    const ht = (local - ENTER_FRAC) / (HOLD_FRAC - ENTER_FRAC);
+    scale = 1 + breathe(ht, 0.01, 1);
+    opacity = 1;
+  } else if (local < HANDOFF_FRAC && !isLast) {
+    const handoffRaw = (local - HOLD_FRAC) / (HANDOFF_FRAC - HOLD_FRAC);
+    scale = interpolate(handoffRaw, [0, 1], [1, 1.04]);
+    opacity = handoffRaw < 0.3 ? 1 : interpolate(handoffRaw, [0.3, 1], [1, 0]);
+  } else if (!isLast) {
+    scale = 1.04;
+    opacity = 0;
+  } else {
+    scale = 1;
+    opacity = 1;
+  }
+  if (isLast && phases.inExit) {
+    const ex = rawExit(motionProgress, phases.exitStart);
+    const easedExit = Easing.in(Easing.cubic)(ex);
+    scale = interpolate(easedExit, [0, 1], [1, 1.08]);
+    opacity = 1 - easedExit;
+  }
+  return {
+    kind: "hero",
+    word: words[idx],
+    index: idx,
+    total: words.length,
+    opacity,
+    transform: `scale(${scale})`
+  };
+}
+
+// src/visual-system/scene-templates/template-text.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_SAFE_ZONE = { top: 24, right: 24, bottom: 24, left: 24 };
+var DEFAULT_FONT = "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
+var TYPO = {
+  headline: {
+    letterSpacing: "-0.022em",
+    wordSpacing: "0.04em",
+    lineHeight: 1.1
+  },
+  caption: {
+    letterSpacing: "-0.012em",
+    wordSpacing: "0.06em",
+    lineHeight: 1.25
+  },
+  label: {
+    letterSpacing: "-0.005em",
+    wordSpacing: "0.10em",
+    lineHeight: 1.4
+  }
+};
+var FONT_FEATURES = '"kern" 1, "liga" 1';
+function dropShadowFor(textColor) {
+  const dark = isLikelyDark(textColor);
+  const tone = dark ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.2)";
+  return `0 1px 2px ${tone}`;
+}
+function isLikelyDark(color) {
+  const m = color.replace("#", "");
+  if (m.length === 3) {
+    const r = parseInt(m[0] + m[0], 16);
+    const g = parseInt(m[1] + m[1], 16);
+    const b = parseInt(m[2] + m[2], 16);
+    return (r * 299 + g * 587 + b * 114) / 1e3 < 128;
+  }
+  if (m.length === 6) {
+    const r = parseInt(m.slice(0, 2), 16);
+    const g = parseInt(m.slice(2, 4), 16);
+    const b = parseInt(m.slice(4, 6), 16);
+    return (r * 299 + g * 587 + b * 114) / 1e3 < 128;
+  }
+  return false;
+}
+function computeHeroFontSize(wordChars, position, width, height, safeZone) {
+  const chars = Math.max(wordChars, 1);
+  const s_min = Math.min(width, height) / 1080;
+  const widthBudget = (width - safeZone.left - safeZone.right) * 0.92;
+  const pxPerChar = 0.58;
+  const widthCap = widthBudget / (chars * pxPerChar);
+  if (position === "center") {
+    return Math.min(480 * s_min, widthCap);
+  }
+  const heightCap = height * 0.28 * 0.8;
+  return Math.min(220 * s_min, widthCap, heightCap);
+}
+function smoothSize(chars, maxChars, max, min) {
+  const t = Math.max(0, Math.min(1, chars / maxChars));
+  const eased = t * t;
+  return max - (max - min) * eased;
+}
+function computeFontSize(archetype, text, role, position, width, height, safeZone) {
+  const s_min = Math.min(width, height) / 1080;
+  if (archetype === "heroWord") {
+    const longestChars = text.split(/\s+/).filter(Boolean).reduce((m, w) => Math.max(m, w.length), 1);
+    return {
+      fontSize: computeHeroFontSize(longestChars, position, width, height, safeZone),
+      fontWeight: 800
+    };
+  }
+  const chars = text.length;
+  if (role === "headline") {
+    const refSize2 = smoothSize(
+      chars,
+      /* maxChars */
+      70,
+      /* max */
+      88,
+      /* min */
+      60
+    );
+    return { fontSize: refSize2 * s_min, fontWeight: 700 };
+  }
+  if (role === "caption") {
+    const refSize2 = smoothSize(chars, 80, 48, 32);
+    return { fontSize: refSize2 * s_min, fontWeight: 600 };
+  }
+  const refSize = smoothSize(chars, 80, 34, 24);
+  return { fontSize: refSize * s_min, fontWeight: 500 };
+}
+function positionStyle(position, height, safeZone) {
+  switch (position) {
+    case "top":
+      return {
+        top: safeZone.top + height * 0.06,
+        height: height * 0.28,
+        alignItems: "flex-start"
+      };
+    case "bottom":
+      return {
+        bottom: safeZone.bottom + height * 0.06,
+        height: height * 0.28,
+        alignItems: "flex-end"
+      };
+    case "center":
+    default:
+      return {
+        top: 0,
+        bottom: 0,
+        alignItems: "center"
+      };
+  }
+}
+var TemplateText = ({
+  archetype: archetypeRaw,
+  text: textRaw,
+  progress,
+  motionProgress = progress,
+  sceneDuration,
+  width,
+  height,
+  position = "center",
+  sizeRole = "headline",
+  typeTreatment,
+  safeZone = DEFAULT_SAFE_ZONE,
+  font = DEFAULT_FONT,
+  color = "#FFFFFF",
+  beatIntensity = 0
+}) => {
+  const textSafe = typeof textRaw === "string" ? textRaw : "";
+  const isDevelopment = import.meta.env?.DEV;
+  if (textRaw !== void 0 && typeof textRaw !== "string" && isDevelopment) {
+    console.warn("[TemplateText] received non-string text:", textRaw);
+  }
+  const text = textSafe.replace(/\s*\|\s*/g, "\n");
+  const archetype = normalizeArchetype(archetypeRaw);
+  const scale = Math.min(width, height) / 1080;
+  const result = renderArchetype(
+    archetype,
+    progress,
+    scale,
+    text,
+    sceneDuration,
+    typeTreatment?.phaseScale ?? 1,
+    motionProgress
+  );
+  const { fontSize, fontWeight } = computeFontSize(
+    archetype,
+    text,
+    sizeRole,
+    position,
+    width,
+    height,
+    safeZone
+  );
+  void beatIntensity;
+  const baseTypo = TYPO[sizeRole];
+  const tt = sizeRole === "headline" ? typeTreatment : void 0;
+  const typo = tt ? {
+    ...baseTypo,
+    ...tt.trackingDeltaEm !== 0 ? {
+      letterSpacing: `${Number(
+        (parseFloat(baseTypo.letterSpacing) + tt.trackingDeltaEm).toFixed(4)
+      )}em`
+    } : {},
+    ...tt.transform ? { textTransform: tt.transform } : {}
+  } : baseTypo;
+  const presetWeight = tt ? Math.min(900, Math.max(100, fontWeight + tt.weightDelta)) : fontWeight;
+  const presetSize = tt ? fontSize * tt.sizeScale : fontSize;
+  const textShadow = dropShadowFor(color);
+  const containerStyle = {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    display: "flex",
+    justifyContent: "center",
+    padding: `0 ${safeZone.right}px 0 ${safeZone.left}px`,
+    color,
+    fontFamily: font,
+    fontWeight: presetWeight,
+    fontSize: presetSize,
+    textAlign: "center",
+    pointerEvents: "none",
+    fontFeatureSettings: FONT_FEATURES,
+    textRendering: "optimizeLegibility",
+    WebkitFontSmoothing: "antialiased",
+    MozOsxFontSmoothing: "grayscale",
+    // Respect explicit newlines — the centralized `|` → `\n` conversion
+    // above (and callers passing real newlines) rely on this. Multiple
+    // spaces still collapse normally; only `\n` and CRLF break.
+    whiteSpace: "pre-line",
+    ...textShadow ? { textShadow } : {},
+    ...typo,
+    ...positionStyle(position, height, safeZone)
+  };
+  if (result.kind === "block") {
+    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          opacity: result.block.opacity,
+          transform: `${result.block.transform}`,
+          // Inherit letter-spacing from the container's typography defaults
+          // unless the archetype explicitly overrides (e.g., for animated tracking).
+          ...result.block.letterSpacing ? { letterSpacing: result.block.letterSpacing } : {},
+          ...result.block.willChange ? { willChange: result.block.willChange } : {},
+          maxWidth: "85%"
+        },
+        children: renderWithEmoji(result.text, fontSize)
+      }
+    ) });
+  }
+  if (result.kind === "typewriter") {
+    const chars = text.split("");
+    const emojiPlan = planTypewriterEmoji(text);
+    const cursorBar = {
+      position: "absolute",
+      width: "0.08em",
+      height: "0.88em",
+      background: "currentColor",
+      borderRadius: "0.01em",
+      pointerEvents: "none"
+    };
+    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          opacity: result.opacity,
+          maxWidth: "85%",
+          whiteSpace: "pre-wrap",
+          position: "relative"
+        },
+        children: [
+          chars.map((ch, i) => {
+            const isTyped = i < result.visibleChars;
+            const isLastTyped = i === result.visibleChars - 1;
+            const anchorCursor = isLastTyped && result.cursor;
+            const charExit = result.charExits?.[i];
+            const baseOpacity = isTyped ? 1 : 0;
+            const finalOpacity = baseOpacity * (charExit?.opacity ?? 1);
+            const exitStyle = charExit ? {
+              display: "inline-block",
+              transform: `translateX(${charExit.translateX}px)`,
+              whiteSpace: "pre"
+            } : null;
+            const emojiChar = emojiPlan?.starts.get(i);
+            if (emojiPlan?.covered.has(i)) return null;
+            return /* @__PURE__ */ jsxs(
+              "span",
+              {
+                style: {
+                  opacity: finalOpacity,
+                  position: anchorCursor ? "relative" : "static",
+                  ...exitStyle ?? {}
+                },
+                children: [
+                  emojiChar ? /* @__PURE__ */ jsx(Emoji, { char: emojiChar, size: fontSize }) : ch,
+                  anchorCursor && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      style: {
+                        ...cursorBar,
+                        left: "100%",
+                        top: "0.08em",
+                        marginLeft: "0.12em"
+                      }
+                    }
+                  )
+                ]
+              },
+              i
+            );
+          }),
+          result.visibleChars === 0 && result.cursor && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              style: {
+                ...cursorBar,
+                left: 0,
+                top: "0.08em"
+              }
+            }
+          )
+        ]
+      }
+    ) });
+  }
+  if (result.kind === "words") {
+    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          opacity: result.blockOpacity,
+          transform: `${result.blockTransform} `,
+          maxWidth: "85%"
+        },
+        children: result.words.map((w, i) => /* @__PURE__ */ jsxs("span", { children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                display: "inline-block",
+                opacity: w.style.opacity,
+                transform: w.style.transform
+              },
+              children: renderWithEmoji(w.text, fontSize)
+            }
+          ),
+          i < result.words.length - 1 ? " " : ""
+        ] }, i))
+      }
+    ) });
+  }
+  if (result.kind === "hero") {
+    const perWordFontSize = computeHeroFontSize(
+      result.word.length,
+      position,
+      width,
+      height,
+      safeZone
+    );
+    const slotHeight = position === "center" ? 480 * scale : Math.min(220 * scale, height * 0.28 * 0.8);
+    return /* @__PURE__ */ jsx("div", { style: { ...containerStyle, fontSize: perWordFontSize }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          height: slotHeight,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              opacity: result.opacity,
+              transform: `${result.transform} `,
+              lineHeight: 1,
+              ...result.letterSpacing ? { letterSpacing: result.letterSpacing } : {}
+            },
+            children: renderWithEmoji(result.word, perWordFontSize)
+          }
+        )
+      }
+    ) });
+  }
+  return null;
+};
+
+export {
+  smoothSize,
+  TemplateText
+};