{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "beforeAfter", "type": "registry:block", "title": "Before After", "description": "Clear transformation or contrast between two states, especially symbolic or visual before/after: manual to automated, chaos to order, old way to new way.", "dependencies": [ "react" ], "registryDependencies": [ "@vanillasky/backgrounds", "@vanillasky/motion", "@vanillasky/theme", "@vanillasky/typography", "@vanillasky/video-config" ], "files": [ { "path": "src/lib/scene-templates/infographic-before-after.tsx", "type": "registry:component", "target": "vanillasky/scene-templates/infographic-before-after.tsx", "content": "/**\n * infographic-before-after — emoji-driven before/after contrast.\n *\n * Layout: a centered \"BEFORE\" / \"AFTER\" pill label sits above the\n * centered headline text; emojis distribute across the FULL frame\n * around the central text zone (top band, sides, bottom band). Pill\n * styling matches problemSolution — same shape, scale-pop entry, just\n * BEFORE/AFTER wording with a red→green color shift.\n *\n * Two phases on a brand-color gradient:\n * 1. Before phase: red BEFORE pill + problem headline + scattered\n * problem emojis with chaos jitter.\n * 2. Transition: problem emojis fall off-screen with gravity (confetti-\n * style drop) while the pill + headline crossfade.\n * 3. After phase: green AFTER pill + solution headline + solution\n * emojis pop in with a happy bounce in the same slots.\n *\n * Pick this for symbolic before/after content where the emojis tell the\n * story; `problemSolution` for full-statement text contrast.\n *\n * Block structure (docs/blocks.md):\n * background — brand gradient (gradientBackground)\n * hero — BeforeAfterSplit primitive (both phases: pills, headlines,\n * emoji scatter/fall/pop — text integral, no caption slot)\n */\n\nimport React from \"react\";\nimport type { VariableField } from \"../video-config\";\nimport { parseList } from \"../parse-list\";\nimport type { SceneTemplateProps } from \"./types\";\nimport { resolveTokens } from \"../theme\";\nimport { gradientBackground } from \"../backgrounds\";\nimport { BeforeAfterSplit } from \"../primitives/infographic/BeforeAfterSplit\";\n\nexport const infographicBeforeAfterSchema: Record = {\n problemLabel: {\n type: \"string\",\n label: \"Before label\",\n default: \"BEFORE\",\n description: \"Uppercase pill label shown above the before headline.\",\n },\n problemHeadline: {\n type: \"string\",\n label: \"Before headline\",\n default: \"Your calendar today.\",\n required: true,\n description: \"Headline shown during the before phase. 2-5 words. Sits centered, beneath the BEFORE pill.\",\n },\n solutionLabel: {\n type: \"string\",\n label: \"After label\",\n default: \"AFTER\",\n description: \"Uppercase pill label shown above the after headline.\",\n },\n solutionHeadline: {\n type: \"string\",\n label: \"After headline\",\n default: \"Calmly organized.\",\n required: true,\n description: \"Headline shown during the after phase. 2-5 words. Sits centered, beneath the AFTER pill.\",\n },\n problemEmojis: {\n type: \"string\",\n label: \"Before emojis\",\n default: \"📅,😰,💼,📊,⏰,💬,📞,🔔\",\n required: true,\n description: \"JSON array of emojis for the chaos / before state (5-8 types, cycled to fill 16 slots distributed around the central text). Example: [\\\"📅\\\", \\\"😰\\\", \\\"💼\\\", \\\"📊\\\", \\\"⏰\\\", \\\"💬\\\", \\\"📞\\\", \\\"🔔\\\"]\",\n },\n solutionEmojis: {\n type: \"string\",\n label: \"After emojis\",\n default: \"✨,📋,✅,🎯\",\n required: true,\n description: \"JSON array of emojis for the calm / after state (3-5 types, cycled to fill 16 slots distributed around the central text). Example: [\\\"✨\\\", \\\"📋\\\", \\\"✅\\\", \\\"🎯\\\"]\",\n },\n showEmojis: {\n type: \"boolean\",\n label: \"Show decorative emojis\",\n default: true,\n description: \"Show the animated emoji scatter. Disable for sober financial or editorial comparisons.\",\n },\n textColor: {\n type: \"color\",\n label: \"Text color\",\n default: \"\",\n description: \"Override text color (leave empty for auto).\",\n },\n};\n\nexport const infographicBeforeAfterDefaults: Record = {\n problemLabel: \"BEFORE\",\n problemHeadline: \"Your calendar today.\",\n solutionLabel: \"AFTER\",\n solutionHeadline: \"Calmly organized.\",\n problemEmojis: \"📅,😰,💼,📊,⏰,💬,📞,🔔\",\n solutionEmojis: \"✨,📋,✅,🎯\",\n showEmojis: true,\n textColor: \"\",\n};\n\nexport const InfographicBeforeAfterTemplate: React.FC = ({\n variables,\n style,\n progress,\n beatIntensity,\n width,\n height,\n textArchetype,\n safeZone,\n sceneDuration,\n}) => {\n const { accent, secondary, content, font } = resolveTokens(style);\n const textColor = String(variables.textColor || \"\") || content;\n\n const problemHeadline = String(variables.problemHeadline || \"\");\n const solutionHeadline = String(variables.solutionHeadline || \"\");\n const problemTypes = parseList(variables.problemEmojis);\n const solutionTypes = parseList(variables.solutionEmojis);\n const showEmojis = variables.showEmojis !== false && String(variables.showEmojis ?? \"true\").toLowerCase() !== \"false\";\n\n const gradSeed = (problemHeadline + solutionHeadline)\n .split(\"\")\n .reduce((acc, c) => acc + c.charCodeAt(0), 0);\n\n // textArchetype is intentionally unused — this template uses the\n // problemSolution-style direct text rendering instead of TemplateText.\n void textArchetype;\n void safeZone;\n\n return (\n \n {/* [slot: background] Brand-color gradient */}\n \n\n {/* [slot: hero] Two-phase before/after reveal — shared primitive */}\n \n \n );\n};\n" }, { "path": "src/lib/primitives/infographic/BeforeAfterSplit.tsx", "type": "registry:component", "target": "vanillasky/primitives/infographic/BeforeAfterSplit.tsx", "content": "/**\n * BeforeAfterSplit\n * The template composes this component (the\n * brand gradient stays in the template), so the two can no longer drift.\n *\n * Two-phase before/after reveal. Before phase: red BEFORE pill +\n * problem headline + scrambled emoji scatter with chaos jitter. Mid-\n * scene the emojis fall like confetti while pill+headline crossfade.\n * After phase: green AFTER pill + solution headline + solution emojis\n * pop in with a happy bounce.\n *\n * Gradient background is NOT included — paint that with SceneBackground\n * above this primitive. The optional `beforeUrl` / `afterUrl` props let\n * a consumer paint a media still behind the corresponding phase (e.g. a\n * before screenshot vs after screenshot); when omitted the emoji\n * scatter carries the contrast on its own.\n */\n\nimport * as React from \"react\";\nimport {\n interpolate,\n spring,\n type SpringConfig,\n} from \"../../motion\";\nimport { smoothSize } from \"../../scene-templates/template-text\";\nimport { stripPipe } from \"../../typography\";\nimport { Emoji } from \"../../emoji\";\nimport { renderWithEmoji } from \"../../emoji/emoji-text\";\nimport { TOKEN_DEFAULTS } from \"../../theme\";\n\nconst SPRING_POP: SpringConfig = { damping: 6, stiffness: 250 };\nconst SPRING_HAPPY: SpringConfig = { damping: 9, stiffness: 220 };\nconst SPRING_TEXT: SpringConfig = { damping: 10, stiffness: 150 };\n\n// 16 deterministic scatter slots framing the central text zone.\nconst POSITIONS = [\n { x: 0.06, y: 0.06 }, { x: 0.30, y: 0.10 }, { x: 0.62, y: 0.07 }, { x: 0.92, y: 0.09 },\n { x: 0.08, y: 0.26 }, { x: 0.92, y: 0.24 }, { x: 0.04, y: 0.40 }, { x: 0.96, y: 0.42 },\n { x: 0.04, y: 0.62 }, { x: 0.96, y: 0.60 },\n { x: 0.10, y: 0.78 }, { x: 0.34, y: 0.82 }, { x: 0.66, y: 0.80 }, { x: 0.90, y: 0.78 },\n { x: 0.22, y: 0.92 }, { x: 0.78, y: 0.94 },\n];\nconst ROTATIONS = [-12, 8, -5, 15, -8, 10, -15, 6, -10, 12, -6, 14, -9, 7, -13, 11];\nconst POP_ORDER = [7, 12, 3, 9, 0, 14, 5, 11, 2, 8, 15, 4, 10, 1, 13, 6];\nconst FALL_SWAY = [0.7, -1.0, 0.4, -0.6, 0.9, -0.3, 0.5, -0.8, 0.6, -0.5, 0.3, -0.9, 0.8, -0.4, 0.2, -0.7];\n\n// ─── Typed component (direct use from templates) ────────────────\n\n/**\n * Props for BeforeAfterSplit.\n *\n * - `progress` (required): scene progress 0→1 driving both phases.\n * - `width` / `height` (required): scene viewport. Drives the emoji-\n * scatter zone and orientation-aware text scaling.\n * - `problemHeadline` (required): the BEFORE headline, 2-5 words.\n * Centered beneath the BEFORE pill. Pipe suffixes stripped.\n * - `solutionHeadline` (required): the AFTER headline, 2-5 words.\n * Centered beneath the AFTER pill. Pipe suffixes stripped.\n * - `problemEmojis` (optional): emoji glyphs cycled across 16 scatter\n * slots during the before phase. Defaults to `[\"📅\", \"😰\"]` if empty.\n * - `solutionEmojis` (optional): emoji glyphs cycled across 16 scatter\n * slots during the after phase. Defaults to `[\"✨\", \"✅\"]` if empty.\n * - `beforeLabel` (optional, default `\"BEFORE\"`): uppercase pill text\n * shown during the before phase.\n * - `afterLabel` (optional, default `\"AFTER\"`): uppercase pill text\n * shown during the after phase.\n * - `beforeUrl` (optional): when present, painted as a cover-fit\n * image behind the before phase (replaces nothing — sits behind the\n * emojis + pill + headline so the emojis still tell the story).\n * - `afterUrl` (optional): same but for the after phase.\n * - `textColor` (optional, default `#ffffff`): headline color.\n * - `font` (optional, default `Inter`).\n * - `beatIntensity` (optional, default `0`): drives a small per-emoji\n * beat-pulse on both phases.\n */\nexport interface BeforeAfterSplitProps {\n progress: number;\n width: number;\n height: number;\n problemHeadline: string;\n solutionHeadline: string;\n problemEmojis?: string[];\n solutionEmojis?: string[];\n showEmojis?: boolean;\n beforeLabel?: string;\n afterLabel?: string;\n beforeUrl?: string;\n afterUrl?: string;\n textColor?: string;\n font?: string;\n beatIntensity?: number;\n}\n\nexport const BeforeAfterSplit: React.FC = ({\n progress,\n width,\n height,\n problemHeadline: rawProblemHeadline,\n solutionHeadline: rawSolutionHeadline,\n problemEmojis: rawProblemEmojis = [],\n solutionEmojis: rawSolutionEmojis = [],\n showEmojis = true,\n beforeLabel = \"BEFORE\",\n afterLabel = \"AFTER\",\n beforeUrl,\n afterUrl,\n textColor = \"#ffffff\",\n font = TOKEN_DEFAULTS.font,\n beatIntensity = 0,\n}) => {\n const s = Math.min(width, height) / 1080;\n\n const problemLabel = String(beforeLabel || \"BEFORE\").toUpperCase();\n const solutionLabel = String(afterLabel || \"AFTER\").toUpperCase();\n const problemHeadline = stripPipe(String(rawProblemHeadline || \"\"));\n const solutionHeadline = stripPipe(String(rawSolutionHeadline || \"\"));\n const problemTypes = showEmojis ? rawProblemEmojis.filter((e) => (e || \"\").length > 0) : [];\n const solutionTypes = showEmojis ? rawSolutionEmojis.filter((e) => (e || \"\").length > 0) : [];\n if (showEmojis && problemTypes.length === 0) problemTypes.push(\"📅\", \"😰\");\n if (showEmojis && solutionTypes.length === 0) solutionTypes.push(\"✨\", \"✅\");\n\n const beforeColor = \"#ef4444\";\n const afterColor = \"#22c55e\";\n\n const SLOT_COUNT = POSITIONS.length;\n const problemEmojis = showEmojis\n ? Array.from({ length: SLOT_COUNT }, (_, i) => problemTypes[POP_ORDER[i] % problemTypes.length])\n : [];\n const solutionEmojis = showEmojis\n ? Array.from({ length: SLOT_COUNT }, (_, i) => solutionTypes[POP_ORDER[i] % solutionTypes.length])\n : [];\n\n // ── Phase windows ────────────────────────────────────────────\n const PROBLEM_BASE = 0.05;\n const PROBLEM_STAGGER = 0.010;\n const FALL_START = 0.35;\n const FALL_END = 0.50;\n const HEADLINE_FADE = [0.40, 0.50] as const;\n const SOLUTION_BASE = 0.50;\n const SOLUTION_STAGGER = 0.008;\n\n const problemHeadlineMask = 1 - interpolate(progress, [HEADLINE_FADE[0], HEADLINE_FADE[1]], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n });\n const solutionHeadlineMask = interpolate(progress, [HEADLINE_FADE[0] + 0.05, HEADLINE_FADE[1] + 0.05], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n });\n\n // ── Layout ───────────────────────────────────────────────────\n const emojiFontSize = Math.min(72 * s, width * 0.085);\n const emojiHalf = emojiFontSize / 2;\n const padX = emojiHalf + 8 * s;\n const padY = emojiHalf + 8 * s;\n const zoneTop = padY;\n const zoneLeft = padX;\n const zoneWidth = width - padX * 2;\n const zoneHeight = height - padY * 2;\n\n const labelFontSize = 32 * s;\n const pillTop = height * 0.38;\n const textTop = height * 0.46;\n const longerChars = Math.max(problemHeadline.length, solutionHeadline.length, 1);\n const mainSize = smoothSize(longerChars, 70, 88, 60) * s;\n\n const problemTextP = spring(\n interpolate(progress, [0.10, 0.25], [0, 1], { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" }),\n SPRING_TEXT,\n );\n const problemTextScale = interpolate(problemTextP, [0, 1], [1.4, 1]);\n const problemTextOpacity = interpolate(progress, [0.10, 0.20], [0, 1], { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" });\n\n const solutionTextP = spring(\n interpolate(progress, [0.55, 0.70], [0, 1], { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" }),\n SPRING_TEXT,\n );\n const solutionTextScale = interpolate(solutionTextP, [0, 1], [1.4, 1]);\n const solutionTextOpacity = interpolate(progress, [0.55, 0.65], [0, 1], { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" });\n\n return (\n <>\n {/* Optional before media — painted behind the before phase scatter */}\n {beforeUrl ? (\n \n ) : null}\n\n {/* Optional after media */}\n {afterUrl ? (\n \n ) : null}\n\n {/* Problem emojis — scrambled fast pop, jitter, then gravity-fall */}\n {problemEmojis.map((emoji, i) => {\n const pos = POSITIONS[i];\n const rotation = ROTATIONS[i];\n const popRank = POP_ORDER[i];\n const sway = FALL_SWAY[i];\n const cx = zoneLeft + pos.x * zoneWidth;\n const cy = zoneTop + pos.y * zoneHeight;\n\n const popDelay = PROBLEM_BASE + popRank * PROBLEM_STAGGER;\n const popP = spring(\n interpolate(progress, [popDelay, popDelay + 0.10], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n }),\n SPRING_POP,\n );\n const emojiScale = interpolate(popP, [0, 1], [0, 1]);\n\n const settled = popP > 0.5;\n const inFall = progress >= FALL_START;\n const shakePhase = progress * 50;\n const shakeX = settled && !inFall ? Math.sin(shakePhase + i * 1.7) * 7 * s : 0;\n const shakeY = settled && !inFall ? Math.cos(shakePhase + i * 2.3) * 5 * s : 0;\n const shakeRotate = settled && !inFall\n ? rotation + Math.sin(shakePhase * 0.7 + i * 3.1) * 9\n : rotation;\n\n const fallProgress = interpolate(progress, [FALL_START, FALL_END], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n });\n const fallY = fallProgress * fallProgress * height * 1.3;\n const fallSwayX = Math.sin(fallProgress * Math.PI * 2 + i * 0.7) * 30 * s * sway;\n const fallRotate = fallProgress * (180 + (i % 5) * 60) * (i % 2 === 0 ? 1 : -1);\n\n const fadeOut = interpolate(progress, [FALL_END - 0.02, FALL_END + 0.02], [1, 0], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n });\n\n const beatPulse = 1 + beatIntensity * 0.04 * ((i % 2 === 0) ? 1 : -0.5);\n\n return (\n \n \n \n );\n })}\n\n {/* Solution emojis — scrambled happy bouncy pop in same slots */}\n {solutionEmojis.map((emoji, i) => {\n const pos = POSITIONS[i];\n const popRank = POP_ORDER[i];\n const cx = zoneLeft + pos.x * zoneWidth;\n const cy = zoneTop + pos.y * zoneHeight;\n\n const popDelay = SOLUTION_BASE + popRank * SOLUTION_STAGGER;\n const popP = spring(\n interpolate(progress, [popDelay, popDelay + 0.14], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n }),\n SPRING_HAPPY,\n );\n const emojiScale = interpolate(popP, [0, 1], [0, 1]);\n const liftY = (1 - Math.min(1, popP)) * 14 * s;\n\n const settled = popP > 0.95;\n const breathe = settled\n ? 1 + Math.sin(progress * Math.PI * 4 + i * 0.9) * 0.015\n : 1;\n\n const exitP = interpolate(progress, [0.90, 1.0], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n });\n const exitFade = 1 - exitP;\n const exitLift = exitP * -20 * s;\n const exitShrink = 1 - exitP * 0.06;\n\n const beatPulse = 1 + beatIntensity * 0.03;\n const opacity = interpolate(popP, [0, 0.3], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n }) * exitFade;\n\n return (\n \n \n \n );\n })}\n\n {/* BEFORE pill + headline */}\n
\n \n \n {problemLabel}\n
\n \n \n {renderWithEmoji(problemHeadline, mainSize)}\n \n \n\n {/* AFTER pill + headline */}\n
\n \n \n {solutionLabel}\n
\n \n \n {renderWithEmoji(solutionHeadline, mainSize)}\n \n \n \n );\n};\n" }, { "path": "src/lib/emoji/emoji-text.tsx", "type": "registry:component", "target": "vanillasky/emoji/emoji-text.tsx", "content": "/**\n * EmojiText / renderWithEmoji — split a string into text runs + color-emoji\n * runs, rendering each color emoji as an inline emoji-PNG (via )\n * while leaving everything else as plain text.\n *\n * Why this exists: raw-unicode emoji fall through to the OS emoji font (Mac =\n * Apple, Linux = Noto), so the three render paths (preview / client SVG export\n * / server Puppeteer) disagree. Wrapping every template/AI-supplied string here\n * makes ALL color emoji render as the same mapped PNG in all three.\n *\n * What it does NOT touch: monochrome symbols (★ ✦ ✓ → ↑ …). Those render\n * identically as text across OSes, and imaging them would be wrong. The gate\n * is `emojiToDataUri()` — only clusters that resolve to a PNG in the\n * map become ; anything else (monochrome symbols, unmapped/custom\n * emoji, skin-tone variants not in the set) stays raw text.\n *\n * Segmentation: grapheme clusters via Intl.Segmenter so ZWJ sequences\n * (👩‍💻) and skin-tone modifiers (👍🏽) stay single units. Adjacent emoji\n * clusters each render as their own in sequence.\n *\n * Sizing: each emoji is sized to `fontSizePx` (the surrounding font\n * size) so the emoji box matches a glyph box — width/line-count stay\n * ~identical to the raw-text layout, which keeps fitTextSize / archetype\n * char-count measurement valid (all string-based, never DOM-measured).\n */\n\nimport * as React from \"react\";\nimport { Emoji, emojiToDataUri } from \"./index\";\n\n// Coarse \"is this cluster a color-emoji candidate?\" test. Deliberately broad:\n// the real decision is whether emojiToDataUri() resolves it to a mapped PNG.\n// This regex only needs to (a) catch the OS-divergent color ranges and (b)\n// avoid flagging plain text/whitespace so we don't merge text into emoji runs.\n//\n// - \\u{1F000}-\\u{1FAFF} — main emoji planes (most pictographs)\n// - \\u{2600}-\\u{27BF} — misc symbols + dingbats (color when + FE0F)\n// - \\u{2B00}-\\u{2BFF} — stars/arrows block (⭐ lives here)\n// - \\u{1F1E6}-\\u{1F1FF} — regional indicators (flags)\n// - \\u{1F3FB}-\\u{1F3FF} — skin-tone modifiers\n// - \\u{FE0F} | \\u{200D} | \\u{20E3} — VS16 / ZWJ / keycap combiners\n//\n// Combining/joiner codepoints (FE0F, ZWJ, keycap) are matched via alternation\n// rather than inside the character class — eslint's\n// no-misleading-character-class flags combining chars inside `[...]`, and\n// alternation is equivalent here (we only test, never capture).\nconst EMOJI_CANDIDATE =\n /[\\u{1F000}-\\u{1FAFF}\\u{2600}-\\u{27BF}\\u{2B00}-\\u{2BFF}\\u{1F1E6}-\\u{1F1FF}]|[\\u{1F3FB}-\\u{1F3FF}]|\\u{FE0F}|\\u{200D}|\\u{20E3}/u;\n\nfunction isEmojiCandidate(cluster: string): boolean {\n return EMOJI_CANDIDATE.test(cluster);\n}\n\n/** Split text into grapheme clusters (ZWJ + skin-tone safe). */\nfunction toGraphemes(text: string): string[] {\n const Seg = (Intl as unknown as { Segmenter?: typeof Intl.Segmenter }).Segmenter;\n if (Seg) {\n const seg = new Seg(undefined, { granularity: \"grapheme\" });\n const out: string[] = [];\n for (const { segment } of seg.segment(text)) out.push(segment);\n return out;\n }\n // Fallback: code-point spread. Won't keep ZWJ/skin-tone as single units, so\n // those land as separate clusters; emojiToDataUri's FE0F tolerance + the raw\n // fallback keep them from breaking. Modern browsers all have Segmenter.\n return Array.from(text);\n}\n\nexport interface RenderWithEmojiOptions {\n /** vertical-align passed to each . */\n verticalAlign?: React.CSSProperties[\"verticalAlign\"];\n /** Extra style merged onto each emoji . */\n emojiStyle?: React.CSSProperties;\n}\n\n/**\n * Split `text` into an array of React nodes — plain-text strings interleaved\n * with images for every mapped color emoji. Returns a single-element\n * `[text]` fast-path when there are no color emoji (the common case), so\n * non-emoji text pays ~one regex test.\n *\n * @param text the string to render\n * @param fontSizePx surrounding font size in px (emoji box = this size)\n */\nexport function renderWithEmoji(\n text: string,\n fontSizePx: number,\n opts?: RenderWithEmojiOptions,\n): React.ReactNode[] {\n if (!text) return [text];\n // Cheap bail-out: if the whole string has no emoji-range codepoint, return\n // it untouched (no segmentation, no array churn) — the hot path for the vast\n // majority of titles/bodies.\n if (!EMOJI_CANDIDATE.test(text)) return [text];\n\n const clusters = toGraphemes(text);\n const nodes: React.ReactNode[] = [];\n let textBuf = \"\";\n let key = 0;\n\n const flushText = () => {\n if (textBuf) {\n nodes.push(textBuf);\n textBuf = \"\";\n }\n };\n\n for (const cluster of clusters) {\n const uri = isEmojiCandidate(cluster) ? emojiToDataUri(cluster) : null;\n if (uri) {\n flushText();\n nodes.push(\n ,\n );\n } else {\n textBuf += cluster;\n }\n }\n flushText();\n return nodes;\n}\n\n/**\n * Per-code-unit emoji plan for the typewriter archetype, which reveals text\n * one UTF-16 code unit at a time and indexes by `text.length`. We can't just\n * call renderWithEmoji there (it would re-segment and desync the visibleChars\n * counter), so this maps each cluster's START code-unit index to its emoji-PNG\n * data URI and marks the cluster's CONTINUATION indices as covered (render\n * nothing for them — the start index's already spans the whole cluster).\n *\n * Returns null when the text contains no mapped color emoji (the common case),\n * so the typewriter render keeps its plain per-char path.\n */\nexport interface EmojiTypewriterPlan {\n /** code-unit index → full emoji cluster char (cluster start). */\n starts: Map;\n /** code-unit indices that are continuations of a cluster (render nothing). */\n covered: Set;\n}\n\nexport function planTypewriterEmoji(text: string): EmojiTypewriterPlan | null {\n if (!text || !EMOJI_CANDIDATE.test(text)) return null;\n const starts = new Map();\n const covered = new Set();\n let idx = 0;\n let found = false;\n for (const cluster of toGraphemes(text)) {\n const len = cluster.length; // UTF-16 code units\n if (isEmojiCandidate(cluster) && emojiToDataUri(cluster)) {\n found = true;\n // Store the WHOLE cluster char (not just the start unit) so callers can\n // pass it straight to for a correct map lookup.\n starts.set(idx, cluster);\n for (let k = 1; k < len; k++) covered.add(idx + k);\n }\n idx += len;\n }\n return found ? { starts, covered } : null;\n}\n\nexport interface EmojiTextProps {\n /** The text to render, color emoji replaced with emoji-PNG . */\n children: string;\n /** Surrounding font size in px — sizes each emoji image to match a glyph. */\n fontSize: number;\n verticalAlign?: React.CSSProperties[\"verticalAlign\"];\n emojiStyle?: React.CSSProperties;\n}\n\n/**\n * Inline wrapper around renderWithEmoji. Renders a React.Fragment of text +\n * emoji runs. Use where a component currently renders a raw `{text}`\n * child and you have the surrounding font size in px.\n */\nexport const EmojiText: React.FC = ({\n children,\n fontSize,\n verticalAlign,\n emojiStyle,\n}) => {\n const text = typeof children === \"string\" ? children : \"\";\n return <>{renderWithEmoji(text, fontSize, { verticalAlign, emojiStyle })};\n};\n" }, { "path": "src/lib/emoji/index.tsx", "type": "registry:component", "target": "vanillasky/emoji/index.tsx", "content": "/**\n * Emoji — render emojis as inline PNG data-URI elements.\n *\n * Why images, not the system emoji font: VanillaSky renders the same scene\n * three ways — real-DOM preview, client SVG-as-image export, server Puppeteer.\n * Raw-unicode emojis fall through to whatever emoji font the OS has (Mac=Apple,\n * Linux=Noto), so preview and export disagree. Inlining each emoji as a\n * data-URI renders the SAME PNG in all three. Critically, the\n * client export rasterizes the frame via , which\n * can ONLY load inlined data-URI images (not @font-face, not external URLs) —\n * so data URIs are exactly what works there.\n *\n * Source artwork: emoji-datasource-google (Google Noto emoji set, Apache-2.0).\n * The map ships inside the publicly redistributed skill tarball, and Apple's\n * artwork is not licensed for redistribution — Noto's Apache-2.0 is. The set\n * is swappable via the generator's EMOJI_SET constant\n * (scripts/generate-emoji-map.mjs).\n *\n * Bundle: the generated char→dataURI map is ~1.1MB of base64, so it is\n * LAZY-LOADED via dynamic import and never enters the initial app bundle. The\n * import is kicked off eagerly at module load (below) — long before any export\n * or screenshot — so by the time a frame is captured the map has resolved.\n * Until it resolves, renders the raw unicode char, then re-renders to\n * the image when the map lands. Any emoji not in the map also falls back to the\n * raw char, so nothing ever breaks for custom/unmapped emojis.\n */\n\nimport * as React from \"react\";\n\nlet EMOJI_MAP: Record | null = null;\nlet loadPromise: Promise> | null = null;\nconst subscribers = new Set<() => void>();\n\nfunction loadEmojiMap(): Promise> {\n if (loadPromise) return loadPromise;\n loadPromise = import(\"./emoji-map.generated\")\n .then((mod) => {\n EMOJI_MAP = mod.default;\n subscribers.forEach((fn) => fn());\n return EMOJI_MAP;\n })\n .catch((err) => {\n // Network/chunk failure: leave map null → everything falls back to char.\n console.warn(\"[emoji] failed to load emoji map:\", err);\n EMOJI_MAP = {};\n return EMOJI_MAP;\n });\n return loadPromise;\n}\n\n// Kick off the load immediately when this module is first imported (app/registry\n// init), so the map is ready well before any export or server screenshot.\nloadEmojiMap();\n\n/**\n * Resolve once the emoji-PNG map has loaded (or definitively failed). Render\n * paths that capture frames MUST await this before their first capture so they\n * never screenshot a frame while emoji are still raw-unicode chars:\n * - server: Render.tsx awaits before setting window.__ready\n * - client export: export-video.ts awaits in the media-preload step\n * The preview path doesn't capture, so it can stay lazy (subscribers re-render\n * char → image when the map lands). On chunk failure this resolves to {} so\n * the await never hangs — everything falls back to the raw char.\n */\nexport function ensureEmojiMap(): Promise> {\n return loadEmojiMap();\n}\n\n/**\n * Returns the emoji-PNG data URI for an emoji char, or null if the map hasn't\n * loaded yet or the char isn't in the set (caller should fall back to the char).\n */\nexport function emojiToDataUri(char: string): string | null {\n if (!EMOJI_MAP) return null;\n const key = (char || \"\").trim();\n if (EMOJI_MAP[key]) return EMOJI_MAP[key];\n // Tolerate a trailing variation selector mismatch (U+FE0F).\n const stripped = key.replace(/️/g, \"\");\n if (stripped !== key && EMOJI_MAP[stripped]) return EMOJI_MAP[stripped];\n return null;\n}\n\n/** Subscribe to map-loaded so a component re-renders char → image when ready. */\nfunction useEmojiMapReady(): boolean {\n const [, force] = React.useReducer((n: number) => n + 1, 0);\n React.useEffect(() => {\n if (EMOJI_MAP) return;\n const fn = () => force();\n subscribers.add(fn);\n loadEmojiMap();\n return () => {\n subscribers.delete(fn);\n };\n }, []);\n return EMOJI_MAP != null;\n}\n\nexport interface EmojiProps {\n /** The emoji character(s), e.g. \"🎉\". */\n char: string;\n /** Box size in px — matches the prior glyph's font-size so layout is identical. */\n size: number;\n /** vertical-align for inline flow. Defaults to a glyph-like baseline nudge. */\n verticalAlign?: React.CSSProperties[\"verticalAlign\"];\n /** Extra styles merged onto the (or fallback ). */\n style?: React.CSSProperties;\n}\n\n/**\n * Renders an emoji as an inline emoji-PNG when available, else the raw\n * unicode char in a same-size box (so scale/opacity/transform are unchanged).\n */\nexport const Emoji: React.FC = ({ char, size, verticalAlign = \"-0.15em\", style }) => {\n useEmojiMapReady();\n const uri = emojiToDataUri(char);\n\n if (!uri) {\n // Fallback: raw char sized to the same box so layout/scale are preserved.\n return (\n \n {char}\n \n );\n }\n\n return (\n \n );\n};\n" }, { "path": "src/lib/scene-templates/template-text.tsx", "type": "registry:component", "target": "vanillasky/scene-templates/template-text.tsx", "content": "/**\n * TemplateText — unified text component for scene templates.\n *\n * Replaces the per-template hand-rolled text rendering with a single component\n * that owns: archetype motion lifecycle (entrance + hold + exit), font sizing,\n * position, beat pulse, and safe zone.\n *\n * Each template declares its constraints (position + sizeRole) at the call site;\n * the user/AI picks the archetype. Templates that can only show text at the top\n * just always pass position=\"top\".\n *\n * Example — a data template (caption above a chart):\n *\n * \n *\n * Example — a media template (full-frame headline):\n *\n * \n *\n * Note: `textArchetype` is destructured from props (a scene-level\n * field on `SceneTemplateProps`), NOT read from `variables`. Copying\n * the wrong pattern silently no-ops — the executor routes\n * `setSceneVariable(\"textArchetype\", ...)` to the scene-level field,\n * never into variables, so `variables.textArchetype` is always\n * undefined.\n */\n\nimport {\n renderArchetype,\n normalizeArchetype,\n type TextArchetype,\n type ArchetypeRender,\n} from \"../typography\";\nimport type { TypeTreatment } from \"../theme\";\nimport { renderWithEmoji, planTypewriterEmoji } from \"../emoji/emoji-text\";\nimport { Emoji } from \"../emoji\";\n\nexport type TextPosition = \"top\" | \"center\" | \"bottom\";\nexport type TextSizeRole = \"headline\" | \"caption\" | \"label\";\n\nexport interface SafeZone {\n top: number;\n right: number;\n bottom: number;\n left: number;\n}\n\nexport interface TemplateTextProps {\n archetype: TextArchetype;\n text: string;\n /** Scene progress 0→1. */\n progress: number;\n /** Scene duration in seconds — drives entrance/exit phase scaling. */\n sceneDuration: number;\n /** Frame width in pixels (1080 in production, smaller in previews). */\n width: number;\n /** Frame height in pixels (1920 in production). */\n height: number;\n /** Where the text box sits in the frame. Templates declare this. */\n position?: TextPosition;\n /** Size envelope. Templates declare this. */\n sizeRole?: TextSizeRole;\n /** Preset type treatment — weight/tracking/size/case shift from style.preset. */\n typeTreatment?: TypeTreatment;\n /** Padding from frame edges. Defaults to a 24px box. */\n safeZone?: SafeZone;\n /** Font family. */\n font?: string;\n /** Fill color. */\n color?: string;\n /** Beat intensity 0→1 (currently unused — kept for forward compat). */\n beatIntensity?: number;\n}\n\nconst DEFAULT_SAFE_ZONE: SafeZone = { top: 24, right: 24, bottom: 24, left: 24 };\nconst DEFAULT_FONT =\n \"ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\";\n\n// ─── Typography constants ───────────────────────────────────────\n// All em-based so they scale with font size and behave consistently across\n// font families. Values from print/motion-design conventions:\n//\n// - Big text (display/headline) gets TIGHTER tracking and TIGHTER leading.\n// -0.022em (≈ -2.2%) is the sweet spot for 48–88px headlines on most\n// sans-serifs (Inter, Helvetica, SF Pro, Manrope, Geist).\n// - Word-spacing kept subtle (≤0.08em). CSS word-spacing is ADDITIVE on\n// top of the natural space char, so what looks like \"a touch of\n// rhythm\" in print becomes a visible double-gap on 80px motion\n// headlines (especially under wordStagger, where each word renders\n// as an inline-block and the gap between them is preserved). Old\n// values (0.16/0.18/0.22 em) added ~13–18px per gap on display\n// type — the \"too much space between words\" symptom.\n// - Line-height 1.1 for headlines, 1.5 for body — Bringhurst-aligned ratios.\n// - kern + liga always on so any font's pair-kerning and ligatures fire\n// consistently (works across Inter, Manrope, SF, IBM Plex, etc.).\nconst TYPO = {\n headline: {\n letterSpacing: \"-0.022em\",\n wordSpacing: \"0.04em\",\n lineHeight: 1.1,\n },\n caption: {\n letterSpacing: \"-0.012em\",\n wordSpacing: \"0.06em\",\n lineHeight: 1.25,\n },\n label: {\n letterSpacing: \"-0.005em\",\n wordSpacing: \"0.10em\",\n lineHeight: 1.4,\n },\n};\nconst FONT_FEATURES = '\"kern\" 1, \"liga\" 1';\n\n// Drop shadow tuned to give crisp edges on retina without muddying text on\n// saturated gradients. Earlier two-layer shadow (1px tight + 16px wide) cast\n// dark halos that made gradient-backed text look smudged. A single barely-\n// there shadow is enough for edge definition; bg-media adds its own dark\n// scrim for legibility over photos, so we don't need to compensate here.\nfunction dropShadowFor(textColor: string): string {\n const dark = isLikelyDark(textColor);\n const tone = dark ? \"rgba(255,255,255,0.15)\" : \"rgba(0,0,0,0.2)\";\n return `0 1px 2px ${tone}`;\n}\n\nfunction isLikelyDark(color: string): boolean {\n // Crude luminance check — handles #rrggbb and #rgb. Anything we can't parse\n // (named colors, rgb()) defaults to \"not dark\" so the heavier shadow shows.\n const m = color.replace(\"#\", \"\");\n if (m.length === 3) {\n const r = parseInt(m[0] + m[0], 16);\n const g = parseInt(m[1] + m[1], 16);\n const b = parseInt(m[2] + m[2], 16);\n return (r * 299 + g * 587 + b * 114) / 1000 < 128;\n }\n if (m.length === 6) {\n const r = parseInt(m.slice(0, 2), 16);\n const g = parseInt(m.slice(2, 4), 16);\n const b = parseInt(m.slice(4, 6), 16);\n return (r * 299 + g * 587 + b * 114) / 1000 < 128;\n }\n return false;\n}\n// ─── Font sizing matrix ─────────────────────────────────────────\n// Mirrors what production templates actually render today, ported from:\n// - text-overlay.tsx (headline: 80/64/48 × s_min by char count)\n// - infographic-steps.tsx (caption: ~44 × s_min capped by layout)\n\n/**\n * Compute heroWord font size for a single word. Each active word fills its\n * own moment — trailer convention. Center can go large (480ref cap); top\n * stays inside the top zone height so it doesn't crash into the animation\n * or data viz below.\n */\nfunction computeHeroFontSize(\n wordChars: number,\n position: TextPosition,\n width: number,\n height: number,\n safeZone: SafeZone,\n): number {\n const chars = Math.max(wordChars, 1);\n const s_min = Math.min(width, height) / 1080;\n const widthBudget = (width - safeZone.left - safeZone.right) * 0.92;\n const pxPerChar = 0.58; // bold sans-serif approximation\n const widthCap = widthBudget / (chars * pxPerChar);\n\n if (position === \"center\") {\n return Math.min(480 * s_min, widthCap);\n }\n\n // Top/bottom: keep the word inside its zone (~28% of frame height) with\n // 80% headroom for entrance overshoot + breathe. Reference target 220ref\n // so even short words stay big without overflowing the zone.\n const heightCap = height * 0.28 * 0.8;\n return Math.min(220 * s_min, widthCap, heightCap);\n}\n\n/**\n * Smooth interpolation between max and min font size based on character count.\n * Avoids the visible \"jump\" you get from bucket boundaries when copy length\n * crosses a threshold (e.g., 25→26 chars dropping headline from 80px to 64px).\n *\n * Exported so templates that lay out their own text can match the headline\n * curve instead of inventing their own bucketed scaling.\n *\n * Returns size at 1080-reference scale; caller multiplies by s_min.\n */\nexport function smoothSize(chars: number, maxChars: number, max: number, min: number): number {\n const t = Math.max(0, Math.min(1, chars / maxChars));\n // Slight curve so short text stays at maxSize longer before scaling down.\n const eased = t * t;\n return max - (max - min) * eased;\n}\n\nfunction computeFontSize(\n archetype: TextArchetype,\n text: string,\n role: TextSizeRole,\n position: TextPosition,\n width: number,\n height: number,\n safeZone: SafeZone,\n): { fontSize: number; fontWeight: number } {\n const s_min = Math.min(width, height) / 1080;\n\n // heroWord container fontSize uses the longest word as a safe fallback. The\n // ACTIVE-word size is recomputed per-render in the \"hero\" render branch\n // (via computeHeroFontSize) so each word fills its own moment optimally —\n // trailer convention.\n if (archetype === \"heroWord\") {\n const longestChars = text\n .split(/\\s+/)\n .filter(Boolean)\n .reduce((m, w) => Math.max(m, w.length), 1);\n return {\n fontSize: computeHeroFontSize(longestChars, position, width, height, safeZone),\n fontWeight: 800,\n };\n }\n\n const chars = text.length;\n\n // Smooth scaling, minimums set so even long copy stays readable in production\n // (1080 reference). Numbers tuned to match — but improve on — the previous\n // bucketed system.\n if (role === \"headline\") {\n // Floor 60 (was 48) — matches the typography guideline \"Titles/headlines\n // 60-86px at 1080\" and lifts long-copy headlines off the body-text floor\n // that left ProblemSolution-shaped statements feeling small. Max held at\n // 88 so short, punchy headlines still fill the frame.\n const refSize = smoothSize(chars, /* maxChars */ 70, /* max */ 88, /* min */ 60);\n return { fontSize: refSize * s_min, fontWeight: 700 };\n }\n\n if (role === \"caption\") {\n const refSize = smoothSize(chars, 80, 48, 32);\n return { fontSize: refSize * s_min, fontWeight: 600 };\n }\n\n // label\n const refSize = smoothSize(chars, 80, 34, 24);\n return { fontSize: refSize * s_min, fontWeight: 500 };\n}\n\n// ─── Positioning ───────────────────────────────────────────────\n\nfunction positionStyle(\n position: TextPosition,\n height: number,\n safeZone: SafeZone,\n): React.CSSProperties {\n switch (position) {\n case \"top\":\n return {\n top: safeZone.top + height * 0.06,\n height: height * 0.28,\n alignItems: \"flex-start\",\n };\n case \"bottom\":\n return {\n bottom: safeZone.bottom + height * 0.06,\n height: height * 0.28,\n alignItems: \"flex-end\",\n };\n case \"center\":\n default:\n return {\n top: 0,\n bottom: 0,\n alignItems: \"center\",\n };\n }\n}\n\n// ─── Component ─────────────────────────────────────────────────\n\nexport const TemplateText: React.FC = ({\n archetype: archetypeRaw,\n text: textRaw,\n progress,\n sceneDuration,\n width,\n height,\n position = \"center\",\n sizeRole = \"headline\",\n typeTreatment,\n safeZone = DEFAULT_SAFE_ZONE,\n font = DEFAULT_FONT,\n color = \"#FFFFFF\",\n beatIntensity = 0,\n}) => {\n // Defensive coerce: TemplateText is downstream of ~16 templates that pass\n // their own `variables.X` strings. If any one of them passes undefined\n // (missing variable on a freshly added scene, stale saved config, vibecoded\n // template not setting a field), the unguarded `.split` / `.length` calls\n // below crash the entire Studio preview. Treat undefined/non-string as\n // empty so a single bad scene doesn't take everything down. Warn in dev\n // so the upstream gap still surfaces.\n const textSafe = typeof textRaw === \"string\" ? textRaw : \"\";\n if (textRaw !== undefined && typeof textRaw !== \"string\" && import.meta.env.DEV) {\n console.warn(\"[TemplateText] received non-string text:\", textRaw);\n }\n // `|` is the AI's explicit line-break convention for headline copy\n // (\"Built for speed.|Designed for you.\"). Convert centrally so EVERY\n // template that renders text through TemplateText honors it — bg-media\n // used to convert locally while confetti/emojiBurst/etc. rendered the\n // pipe literally. Whitespace around the pipe is trimmed so spaced and\n // unspaced pipes produce identical output. The container's\n // `white-space: pre-line` renders the resulting `\\n` as a hard break.\n // Templates that legitimately render pipes (code, terminal commands)\n // don't flow through TemplateText, so they're unaffected.\n const text = textSafe.replace(/\\s*\\|\\s*/g, \"\\n\");\n // Normalize the archetype prop so legacy effect names from old saved\n // configs (e.g., \"fade-in\") map to a real archetype instead of crashing.\n const archetype = normalizeArchetype(archetypeRaw);\n const scale = Math.min(width, height) / 1080;\n // Motion pacing applies at every size role — a calm video should ease its\n // captions in too, not just its headlines. (The rest of the treatment is\n // headline-only; see `tt` below.)\n const result: ArchetypeRender = renderArchetype(\n archetype,\n progress,\n scale,\n text,\n sceneDuration,\n typeTreatment?.phaseScale ?? 1,\n );\n const { fontSize, fontWeight } = computeFontSize(\n archetype,\n text,\n sizeRole,\n position,\n width,\n height,\n safeZone,\n );\n\n // beatIntensity reserved for future use; currently a no-op on text body.\n void beatIntensity;\n\n const baseTypo = TYPO[sizeRole];\n // Preset type treatment. Absent (or the default preset's zero-deltas) leaves\n // every value exactly as it was, so unpresetted configs are unaffected.\n const tt = sizeRole === \"headline\" ? typeTreatment : undefined;\n // Only rewrite a value the preset actually changes — reformatting\n // letterSpacing with a zero delta would alter the emitted string (and every\n // stability snapshot) without changing the render.\n const typo = tt\n ? {\n ...baseTypo,\n ...(tt.trackingDeltaEm !== 0\n ? {\n letterSpacing: `${Number(\n (parseFloat(baseTypo.letterSpacing) + tt.trackingDeltaEm).toFixed(4),\n )}em`,\n }\n : {}),\n ...(tt.transform ? { textTransform: tt.transform } : {}),\n }\n : baseTypo;\n const presetWeight = tt ? Math.min(900, Math.max(100, fontWeight + tt.weightDelta)) : fontWeight;\n const presetSize = tt ? fontSize * tt.sizeScale : fontSize;\n const textShadow = dropShadowFor(color);\n\n const containerStyle: React.CSSProperties = {\n position: \"absolute\",\n left: 0,\n right: 0,\n display: \"flex\",\n justifyContent: \"center\",\n padding: `0 ${safeZone.right}px 0 ${safeZone.left}px`,\n color,\n fontFamily: font,\n fontWeight: presetWeight,\n fontSize: presetSize,\n textAlign: \"center\",\n pointerEvents: \"none\",\n fontFeatureSettings: FONT_FEATURES,\n textRendering: \"optimizeLegibility\",\n WebkitFontSmoothing: \"antialiased\",\n MozOsxFontSmoothing: \"grayscale\",\n // Respect explicit newlines — the centralized `|` → `\\n` conversion\n // above (and callers passing real newlines) rely on this. Multiple\n // spaces still collapse normally; only `\\n` and CRLF break.\n whiteSpace: \"pre-line\",\n ...(textShadow ? { textShadow } : {}),\n ...typo,\n ...positionStyle(position, height, safeZone),\n };\n\n if (result.kind === \"block\") {\n return (\n
\n \n {renderWithEmoji(result.text, fontSize)}\n
\n \n );\n }\n\n if (result.kind === \"typewriter\") {\n // Render every character as its own span so the FULL TEXT always sets the\n // layout — wrapping is decided by the complete string, not the typed\n // prefix. The cursor is overlaid with position:absolute from the last\n // typed char so it doesn't break the word it's inside.\n const chars = text.split(\"\");\n // Map cluster-start code-unit indices → mapped emoji-PNG image so color\n // emoji render as images even in the per-char typewriter reveal. Indexing\n // stays on text.length (UTF-16 units) so result.visibleChars / charExits\n // line up exactly; continuation units of a cluster render nothing.\n const emojiPlan = planTypewriterEmoji(text);\n const cursorBar = {\n position: \"absolute\" as const,\n width: \"0.08em\",\n height: \"0.88em\",\n background: \"currentColor\",\n borderRadius: \"0.01em\",\n pointerEvents: \"none\" as const,\n };\n return (\n
\n \n {chars.map((ch, i) => {\n const isTyped = i < result.visibleChars;\n const isLastTyped = i === result.visibleChars - 1;\n const anchorCursor = isLastTyped && result.cursor;\n const charExit = result.charExits?.[i];\n const baseOpacity = isTyped ? 1 : 0;\n const finalOpacity = baseOpacity * (charExit?.opacity ?? 1);\n // During exit the per-char span needs inline-block so translateX\n // takes effect; whiteSpace: pre keeps space chars from collapsing.\n const exitStyle = charExit\n ? {\n display: \"inline-block\" as const,\n transform: `translateX(${charExit.translateX}px)`,\n whiteSpace: \"pre\" as const,\n }\n : null;\n // Emoji handling: a cluster-start unit renders the mapped PNG; the\n // cluster's continuation units render nothing (image spans them).\n const emojiChar = emojiPlan?.starts.get(i);\n if (emojiPlan?.covered.has(i)) return null;\n return (\n \n {emojiChar ? : ch}\n {anchorCursor && (\n \n )}\n \n );\n })}\n {result.visibleChars === 0 && result.cursor && (\n \n )}\n
\n \n );\n }\n\n if (result.kind === \"words\") {\n // Render words inline-block with REAL space chars between them — word\n // spacing inherits from the container's typography defaults, matching\n // every other archetype's wrap behavior.\n return (\n
\n \n {result.words.map((w, i) => (\n \n \n {renderWithEmoji(w.text, fontSize)}\n \n {i < result.words.length - 1 ? \" \" : \"\"}\n \n ))}\n
\n \n );\n }\n\n if (result.kind === \"hero\") {\n // Per-word sizing: each active word fills its own moment optimally.\n const perWordFontSize = computeHeroFontSize(\n result.word.length,\n position,\n width,\n height,\n safeZone,\n );\n // Fixed-height slot so words of different sizes don't jump vertically.\n // Slot is the max possible hero size for this position; lineHeight: 1 on\n // the inner word locks the glyph box to the font height so flex-center\n // lands the glyph at the same Y for every word.\n const slotHeight =\n position === \"center\" ? 480 * scale : Math.min(220 * scale, height * 0.28 * 0.8);\n return (\n
\n \n \n {renderWithEmoji(result.word, perWordFontSize)}\n
\n \n \n );\n }\n\n return null;\n};\n" }, { "path": "src/lib/scene-templates/types.ts", "type": "registry:lib", "target": "vanillasky/scene-templates/types.ts", "content": "/**\n * Scene template types.\n *\n * A template is a reusable React component that defines how a scene looks.\n * It declares what variables it needs (auto-shown as input fields in the Studio)\n * and receives universal settings as props.\n *\n * Templates are searchable by AI via description, category, jobs, register,\n * and useWhen guidance.\n * The variable schema enables any LLM to fill in template variables via JSON.\n */\n\nimport type { ResolvedTokens } from \"../theme\";\nimport type { GlobalStyle, VariableField, SafeZone } from \"../video-config\";\n\n/**\n * Props passed to every scene template component.\n *\n * All animation must be driven by `progress` (0→1). No CSS animations,\n * no Framer Motion, no requestAnimationFrame. Use interpolate/spring\n * from animation-utils.ts.\n *\n * Scale factor: use `Math.min(width, height) / 1080` — normalizes to\n * the short edge so visuals are consistent across portrait and landscape.\n */\nexport interface SceneTemplateProps {\n variables: Record;\n style: GlobalStyle;\n /** 0→1 through the scene's duration */\n progress: number;\n /** 0→1 beat pulse intensity */\n beatIntensity: number;\n /** 1080 (portrait) or 1920 (landscape) */\n width: number;\n /** 1920 (portrait) or 1080 (landscape) */\n height: number;\n /** Video-level default text effect (for templates that opt in via usesGlobalTextEffect) */\n textArchetype?: string;\n /** How text leaves the scene (fade / shrink / pop / blur-scale). Falls back to a sensible default per textArchetype when undefined. */\n /** Video-level default background effect (for templates that opt in via usesGlobalBackgroundEffect) */\n backgroundEffect?: string;\n /** Platform-aware safe zone insets in pixels — use for text placement */\n safeZone: SafeZone;\n /** Scene duration in seconds — use for time-based (not progress-based) animations */\n sceneDuration?: number;\n /**\n * Brand tokens already resolved from `style`. Built-in templates import\n * resolveTokens directly; an ejected `custom_*` scene can't import anything,\n * so without this it has no way to reach the same values and ends up\n * hardcoding white, black and shadows — the body then looks generic next to\n * a frame that IS using the brand.\n */\n tokens?: ResolvedTokens;\n /**\n * True when the preview player is actively advancing progress; false when paused.\n * Templates that play HTML5