html2pptx-local-mcp 1.1.17

package/src/animation-renderers.js

@@ -0,0 +1,584 @@
+// src/animation-renderers.js
+//
+// Per-preset OOXML timing renderers.
+//
+// This replaces the previous "opacity 0→1 for every preset" approach with
+// proper preset-specific animation XML. Each renderer returns the
+// <p:childTnLst> contents for a given entrance / emphasis / exit effect.
+//
+// Three families:
+//
+//   1. animEffect — a high-level PowerPoint filter ("fade", "wipe(right)",
+//      "blinds(vertical)", etc.). PowerPoint renders them natively and
+//      correctly — this covers ~70% of the good-looking presets.
+//
+//   2. anim(attr) — drive a specific attribute (ppt_x, ppt_y, ppt_w,
+//      ppt_h, style.rotation, style.opacity) over time. Used for motion-
+//      based effects like flyin (ppt_x), zoom (ppt_w), spin (rotation).
+//
+//   3. combinations — entrance effects often need BOTH (visibility set +
+//      motion anim). Renderers compose them.
+//
+// All renderers take a uniform context object:
+//   { baseId, durMs, delayMs, spid, direction, easing }
+// and return an XML string that fits inside <p:childTnLst>…</p:childTnLst>.
+//
+// The outer <p:par><p:cTn presetID=... presetClass=... presetSubtype=...>
+// wrapper is built by the caller in animation-injector.js.
+
+// ----------------------------------------------------------------------
+// Ease curves
+// ----------------------------------------------------------------------
+//
+// <p:anim> supports:
+//   calcmode="lin"    — linear
+//   calcmode="discrete" — stepped (used only for set-style effects)
+//   calcmode="spline" — with explicit keySplines ("cpX1 cpY1 cpX2 cpY2")
+//
+// We use ease-out by default (natural deceleration) which reads as
+// "premium / Apple-like" rather than mechanical.
+const EASE_OUT_SPLINE = '0,0 0.25,1';
+const EASE_IN_OUT_SPLINE = '0.42,0 0.58,1';
+
+// ----------------------------------------------------------------------
+// Helpers
+// ----------------------------------------------------------------------
+
+function escapeXmlAttr(s) {
+  return String(s)
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+function setVisible(spid, id) {
+  return `
+    <p:set>
+      <p:cBhvr>
+        <p:cTn id="${id}" dur="1" fill="hold">
+          <p:stCondLst><p:cond delay="0"/></p:stCondLst>
+        </p:cTn>
+        <p:tgtEl><p:spTgt spid="${spid}"/></p:tgtEl>
+        <p:attrNameLst><p:attrName>style.visibility</p:attrName></p:attrNameLst>
+      </p:cBhvr>
+      <p:to><p:strVal val="visible"/></p:to>
+    </p:set>`;
+}
+
+function setHidden(spid, id) {
+  return `
+    <p:set>
+      <p:cBhvr>
+        <p:cTn id="${id}" dur="1" fill="hold">
+          <p:stCondLst><p:cond delay="0"/></p:stCondLst>
+        </p:cTn>
+        <p:tgtEl><p:spTgt spid="${spid}"/></p:tgtEl>
+        <p:attrNameLst><p:attrName>style.visibility</p:attrName></p:attrNameLst>
+      </p:cBhvr>
+      <p:to><p:strVal val="hidden"/></p:to>
+    </p:set>`;
+}
+
+// Emit a <p:animEffect> block with the given filter.
+// Transition is "in" for entrance, "out" for exit, "none" for emphasis.
+function animEffect({ id, durMs, spid, filter, transition = 'in' }) {
+  return `
+    <p:animEffect transition="${transition}" filter="${escapeXmlAttr(filter)}">
+      <p:cBhvr>
+        <p:cTn id="${id}" dur="${durMs}"/>
+        <p:tgtEl><p:spTgt spid="${spid}"/></p:tgtEl>
+      </p:cBhvr>
+    </p:animEffect>`;
+}
+
+// Emit a <p:anim> block that drives a single attribute (e.g. ppt_x) from
+// `fromVal` to `toVal` over `durMs`.
+function attrAnim({ id, durMs, spid, attrName, fromVal, toVal, easing = 'spline', spline = EASE_OUT_SPLINE, valueType = 'num' }) {
+  const calcmode = easing === 'lin' ? 'lin' : 'spline';
+  const splineAttr = calcmode === 'spline' ? ` keySpline="${spline}"` : '';
+  return `
+    <p:anim calcmode="${calcmode}"${splineAttr} valueType="${valueType}">
+      <p:cBhvr additive="base">
+        <p:cTn id="${id}" dur="${durMs}" fill="hold"/>
+        <p:tgtEl><p:spTgt spid="${spid}"/></p:tgtEl>
+        <p:attrNameLst><p:attrName>${attrName}</p:attrName></p:attrNameLst>
+      </p:cBhvr>
+      <p:tavLst>
+        <p:tav tm="0"><p:val><p:strVal val="${escapeXmlAttr(fromVal)}"/></p:val></p:tav>
+        <p:tav tm="100000"><p:val><p:strVal val="${escapeXmlAttr(toVal)}"/></p:val></p:tav>
+      </p:tavLst>
+    </p:anim>`;
+}
+
+// Fade-based opacity animation (used as emphasis helper)
+function opacityAnim({ id, durMs, spid, from, to }) {
+  return attrAnim({ id, durMs, spid, attrName: 'style.opacity', fromVal: String(from), toVal: String(to) });
+}
+
+// ----------------------------------------------------------------------
+// Direction helpers
+// ----------------------------------------------------------------------
+
+// For flyin/flyout, map cardinal direction → from/to values on ppt_x or ppt_y.
+//   - "left" means "enter from left edge of slide" → from ppt_x = negative width
+//   - "right" means "enter from right edge" → from ppt_x = slide_w
+//   - "up" means "enter from top" → from ppt_y = negative height
+//   - "down" means "enter from bottom" → from ppt_y = slide_h
+//
+// We use PowerPoint formula syntax: #ppt_x references the shape's current X.
+// For "from offscreen left": x = "#ppt_x - #ppt_w"
+function flyFromForEntrance(direction) {
+  switch (direction) {
+    case 'right':  return { attr: 'ppt_x', from: '#ppt_x + #ppt_w', to: '#ppt_x' };
+    case 'up':     return { attr: 'ppt_y', from: '#ppt_y - #ppt_h', to: '#ppt_y' };
+    case 'down':   return { attr: 'ppt_y', from: '#ppt_y + #ppt_h', to: '#ppt_y' };
+    case 'topleft':     return null; // covered by two anims — caller handles
+    case 'topright':    return null;
+    case 'bottomleft':  return null;
+    case 'bottomright': return null;
+    case 'left':
+    default:       return { attr: 'ppt_x', from: '#ppt_x - #ppt_w', to: '#ppt_x' };
+  }
+}
+function flyToForExit(direction) {
+  switch (direction) {
+    case 'right':  return { attr: 'ppt_x', from: '#ppt_x', to: '#ppt_x + #ppt_w' };
+    case 'up':     return { attr: 'ppt_y', from: '#ppt_y', to: '#ppt_y - #ppt_h' };
+    case 'down':   return { attr: 'ppt_y', from: '#ppt_y', to: '#ppt_y + #ppt_h' };
+    case 'left':
+    default:       return { attr: 'ppt_x', from: '#ppt_x', to: '#ppt_x - #ppt_w' };
+  }
+}
+
+// For animEffect-based wipes, map our cardinal direction → PowerPoint filter
+function wipeFilter(direction) {
+  switch (direction) {
+    case 'right': return 'wipe(right)';
+    case 'up':    return 'wipe(up)';
+    case 'down':  return 'wipe(down)';
+    case 'left':
+    default:      return 'wipe(left)';
+  }
+}
+
+// ======================================================================
+// ENTRANCE RENDERERS
+// ======================================================================
+
+function renderFadein(ctx) {
+  const { baseId, durMs, spid } = ctx;
+  return [
+    setVisible(spid, baseId + 1),
+    animEffect({ id: baseId + 2, durMs, spid, filter: 'fade', transition: 'in' }),
+  ].join('');
+}
+
+function renderAppear(ctx) {
+  const { baseId, spid } = ctx;
+  return setVisible(spid, baseId + 1);
+}
+
+function renderFlyin(ctx) {
+  const { baseId, durMs, spid, direction = 'left' } = ctx;
+  const fly = flyFromForEntrance(direction);
+  // Diagonal flyin uses both X and Y
+  if (!fly) {
+    const xDir = direction.includes('right') ? 'right' : 'left';
+    const yDir = direction.includes('top') ? 'up' : 'down';
+    const flyX = flyFromForEntrance(xDir);
+    const flyY = flyFromForEntrance(yDir);
+    return [
+      setVisible(spid, baseId + 1),
+      attrAnim({ id: baseId + 2, durMs, spid, attrName: flyX.attr, fromVal: flyX.from, toVal: flyX.to }),
+      attrAnim({ id: baseId + 3, durMs, spid, attrName: flyY.attr, fromVal: flyY.from, toVal: flyY.to }),
+    ].join('');
+  }
+  return [
+    setVisible(spid, baseId + 1),
+    attrAnim({ id: baseId + 2, durMs, spid, attrName: fly.attr, fromVal: fly.from, toVal: fly.to }),
+  ].join('');
+}
+
+function renderFloatin(ctx) {
+  // Float in = fade + slight position drift (shorter distance than flyin).
+  const { baseId, durMs, spid, direction = 'up' } = ctx;
+  const drift = direction === 'down' ? '#ppt_y - #ppt_h/3' : '#ppt_y + #ppt_h/3';
+  const attrName = 'ppt_y';
+  return [
+    setVisible(spid, baseId + 1),
+    animEffect({ id: baseId + 2, durMs, spid, filter: 'fade', transition: 'in' }),
+    attrAnim({ id: baseId + 3, durMs, spid, attrName, fromVal: drift, toVal: '#ppt_y' }),
+  ].join('');
+}
+
+function renderZoom(ctx) {
+  // Scale from 0 → full size, from center.
+  const { baseId, durMs, spid, direction = 'in' } = ctx;
+  const isOut = direction === 'out';
+  const fromScale = isOut ? '1.5' : '0';
+  const toScale = '1';
+  return [
+    setVisible(spid, baseId + 1),
+    animEffect({ id: baseId + 2, durMs, spid, filter: 'fade', transition: 'in' }),
+    attrAnim({ id: baseId + 3, durMs, spid, attrName: 'ppt_w', fromVal: fromScale, toVal: toScale, valueType: 'num' }),
+    attrAnim({ id: baseId + 4, durMs, spid, attrName: 'ppt_h', fromVal: fromScale, toVal: toScale, valueType: 'num' }),
+  ].join('');
+}
+
+function renderWipe(ctx) {
+  const { baseId, durMs, spid, direction = 'left' } = ctx;
+  return [
+    setVisible(spid, baseId + 1),
+    animEffect({ id: baseId + 2, durMs, spid, filter: wipeFilter(direction), transition: 'in' }),
+  ].join('');
+}
+
+function renderDissolve(ctx) {
+  const { baseId, durMs, spid } = ctx;
+  return [
+    setVisible(spid, baseId + 1),
+    animEffect({ id: baseId + 2, durMs, spid, filter: 'dissolve', transition: 'in' }),
+  ].join('');
+}
+
+function renderSplit(ctx) {
+  const { baseId, durMs, spid, direction = 'out' } = ctx;
+  const filter = direction === 'in' ? 'barn(inVertical)' : 'barn(outVertical)';
+  return [
+    setVisible(spid, baseId + 1),
+    animEffect({ id: baseId + 2, durMs, spid, filter, transition: 'in' }),
+  ].join('');
+}
+
+function renderStretch(ctx) {
+  // Stretch = reveal with horizontal scale from 0 to 1.
+  const { baseId, durMs, spid } = ctx;
+  return [
+    setVisible(spid, baseId + 1),
+    attrAnim({ id: baseId + 2, durMs, spid, attrName: 'ppt_w', fromVal: '0', toVal: '1' }),
+    animEffect({ id: baseId + 3, durMs, spid, filter: 'fade', transition: 'in' }),
+  ].join('');
+}
+
+function renderBounce(ctx) {
+  // Elegant bounce entrance = vertical spring motion with fade-in.
+  const { baseId, durMs, spid } = ctx;
+  return [
+    setVisible(spid, baseId + 1),
+    animEffect({ id: baseId + 2, durMs, spid, filter: 'fade', transition: 'in' }),
+    // Vertical bounce: from 30% above, overshoot slightly, settle
+    `<p:anim calcmode="spline" keySpline="0.68,-0.55 0.265,1.55" valueType="num">
+      <p:cBhvr additive="base">
+        <p:cTn id="${baseId + 3}" dur="${durMs}" fill="hold"/>
+        <p:tgtEl><p:spTgt spid="${spid}"/></p:tgtEl>
+        <p:attrNameLst><p:attrName>ppt_y</p:attrName></p:attrNameLst>
+      </p:cBhvr>
+      <p:tavLst>
+        <p:tav tm="0"><p:val><p:strVal val="#ppt_y - #ppt_h/2"/></p:val></p:tav>
+        <p:tav tm="100000"><p:val><p:strVal val="#ppt_y"/></p:val></p:tav>
+      </p:tavLst>
+    </p:anim>`,
+  ].join('');
+}
+
+function renderSpin(ctx) {
+  // Full rotation + fade-in (entrance variant of spin).
+  const { baseId, durMs, spid } = ctx;
+  return [
+    setVisible(spid, baseId + 1),
+    animEffect({ id: baseId + 2, durMs, spid, filter: 'fade', transition: 'in' }),
+    attrAnim({ id: baseId + 3, durMs, spid, attrName: 'style.rotation', fromVal: '-180', toVal: '0', easing: 'spline' }),
+  ].join('');
+}
+
+function renderRiseUp(ctx) {
+  // Rise up = subtle slide up from below with fade. Modern "classy" reveal.
+  const { baseId, durMs, spid } = ctx;
+  return [
+    setVisible(spid, baseId + 1),
+    animEffect({ id: baseId + 2, durMs, spid, filter: 'fade', transition: 'in' }),
+    attrAnim({ id: baseId + 3, durMs, spid, attrName: 'ppt_y', fromVal: '#ppt_y + #ppt_h/4', toVal: '#ppt_y' }),
+  ].join('');
+}
+
+function renderDescend(ctx) {
+  const { baseId, durMs, spid } = ctx;
+  return [
+    setVisible(spid, baseId + 1),
+    animEffect({ id: baseId + 2, durMs, spid, filter: 'fade', transition: 'in' }),
+    attrAnim({ id: baseId + 3, durMs, spid, attrName: 'ppt_y', fromVal: '#ppt_y - #ppt_h/4', toVal: '#ppt_y' }),
+  ].join('');
+}
+
+// Fallback: pure fade-in (used for less common entrance presets)
+function renderGenericEntrance(ctx) {
+  return renderFadein(ctx);
+}
+
+// ======================================================================
+// EMPHASIS RENDERERS
+// ======================================================================
+
+function renderPulse(ctx) {
+  // Pulse scales 1 → 1.08 → 1 over the duration.
+  const { baseId, durMs, spid } = ctx;
+  return `
+    <p:anim calcmode="spline" keySpline="0.42,0 0.58,1 0.42,0 0.58,1" valueType="num">
+      <p:cBhvr additive="base">
+        <p:cTn id="${baseId + 1}" dur="${durMs}" fill="hold"/>
+        <p:tgtEl><p:spTgt spid="${spid}"/></p:tgtEl>
+        <p:attrNameLst><p:attrName>ppt_w</p:attrName></p:attrNameLst>
+      </p:cBhvr>
+      <p:tavLst>
+        <p:tav tm="0"><p:val><p:strVal val="#ppt_w"/></p:val></p:tav>
+        <p:tav tm="50000"><p:val><p:strVal val="#ppt_w * 1.08"/></p:val></p:tav>
+        <p:tav tm="100000"><p:val><p:strVal val="#ppt_w"/></p:val></p:tav>
+      </p:tavLst>
+    </p:anim>
+    <p:anim calcmode="spline" keySpline="0.42,0 0.58,1 0.42,0 0.58,1" valueType="num">
+      <p:cBhvr additive="base">
+        <p:cTn id="${baseId + 2}" dur="${durMs}" fill="hold"/>
+        <p:tgtEl><p:spTgt spid="${spid}"/></p:tgtEl>
+        <p:attrNameLst><p:attrName>ppt_h</p:attrName></p:attrNameLst>
+      </p:cBhvr>
+      <p:tavLst>
+        <p:tav tm="0"><p:val><p:strVal val="#ppt_h"/></p:val></p:tav>
+        <p:tav tm="50000"><p:val><p:strVal val="#ppt_h * 1.08"/></p:val></p:tav>
+        <p:tav tm="100000"><p:val><p:strVal val="#ppt_h"/></p:val></p:tav>
+      </p:tavLst>
+    </p:anim>`;
+}
+
+function renderEmphasisSpin(ctx) {
+  const { baseId, durMs, spid } = ctx;
+  return attrAnim({ id: baseId + 1, durMs, spid, attrName: 'style.rotation', fromVal: '0', toVal: '360', easing: 'lin' });
+}
+
+function renderGrow(ctx) {
+  // Grow 1 → 1.15
+  const { baseId, durMs, spid } = ctx;
+  return [
+    attrAnim({ id: baseId + 1, durMs, spid, attrName: 'ppt_w', fromVal: '#ppt_w', toVal: '#ppt_w * 1.15' }),
+    attrAnim({ id: baseId + 2, durMs, spid, attrName: 'ppt_h', fromVal: '#ppt_h', toVal: '#ppt_h * 1.15' }),
+  ].join('');
+}
+
+function renderShrink(ctx) {
+  const { baseId, durMs, spid } = ctx;
+  return [
+    attrAnim({ id: baseId + 1, durMs, spid, attrName: 'ppt_w', fromVal: '#ppt_w', toVal: '#ppt_w * 0.85' }),
+    attrAnim({ id: baseId + 2, durMs, spid, attrName: 'ppt_h', fromVal: '#ppt_h', toVal: '#ppt_h * 0.85' }),
+  ].join('');
+}
+
+function renderFlash(ctx) {
+  const { baseId, durMs, spid } = ctx;
+  return `
+    <p:anim calcmode="discrete" valueType="num">
+      <p:cBhvr additive="base">
+        <p:cTn id="${baseId + 1}" dur="${durMs}" fill="hold"/>
+        <p:tgtEl><p:spTgt spid="${spid}"/></p:tgtEl>
+        <p:attrNameLst><p:attrName>style.opacity</p:attrName></p:attrNameLst>
+      </p:cBhvr>
+      <p:tavLst>
+        <p:tav tm="0"><p:val><p:strVal val="1"/></p:val></p:tav>
+        <p:tav tm="25000"><p:val><p:strVal val="0.2"/></p:val></p:tav>
+        <p:tav tm="50000"><p:val><p:strVal val="1"/></p:val></p:tav>
+        <p:tav tm="75000"><p:val><p:strVal val="0.2"/></p:val></p:tav>
+        <p:tav tm="100000"><p:val><p:strVal val="1"/></p:val></p:tav>
+      </p:tavLst>
+    </p:anim>`;
+}
+
+function renderTeeter(ctx) {
+  // Teeter = tilt back and forth around center (+8°, -8°, +4°, 0°)
+  const { baseId, durMs, spid } = ctx;
+  return `
+    <p:anim calcmode="spline" keySpline="0.4,0 0.6,1 0.4,0 0.6,1 0.4,0 0.6,1 0.4,0 0.6,1" valueType="num">
+      <p:cBhvr additive="base">
+        <p:cTn id="${baseId + 1}" dur="${durMs}" fill="hold"/>
+        <p:tgtEl><p:spTgt spid="${spid}"/></p:tgtEl>
+        <p:attrNameLst><p:attrName>style.rotation</p:attrName></p:attrNameLst>
+      </p:cBhvr>
+      <p:tavLst>
+        <p:tav tm="0"><p:val><p:strVal val="0"/></p:val></p:tav>
+        <p:tav tm="25000"><p:val><p:strVal val="8"/></p:val></p:tav>
+        <p:tav tm="50000"><p:val><p:strVal val="-8"/></p:val></p:tav>
+        <p:tav tm="75000"><p:val><p:strVal val="4"/></p:val></p:tav>
+        <p:tav tm="100000"><p:val><p:strVal val="0"/></p:val></p:tav>
+      </p:tavLst>
+    </p:anim>`;
+}
+
+function renderBlink(ctx) {
+  const { baseId, durMs, spid } = ctx;
+  return `
+    <p:anim calcmode="discrete" valueType="num">
+      <p:cBhvr additive="base">
+        <p:cTn id="${baseId + 1}" dur="${durMs}" fill="hold"/>
+        <p:tgtEl><p:spTgt spid="${spid}"/></p:tgtEl>
+        <p:attrNameLst><p:attrName>style.opacity</p:attrName></p:attrNameLst>
+      </p:cBhvr>
+      <p:tavLst>
+        <p:tav tm="0"><p:val><p:strVal val="1"/></p:val></p:tav>
+        <p:tav tm="50000"><p:val><p:strVal val="0"/></p:val></p:tav>
+        <p:tav tm="100000"><p:val><p:strVal val="1"/></p:val></p:tav>
+      </p:tavLst>
+    </p:anim>`;
+}
+
+// Fallback for less common emphasis effects
+function renderGenericEmphasis(ctx) {
+  return renderPulse(ctx);
+}
+
+// ======================================================================
+// EXIT RENDERERS
+// ======================================================================
+
+function renderFadeout(ctx) {
+  const { baseId, durMs, spid } = ctx;
+  return [
+    animEffect({ id: baseId + 1, durMs, spid, filter: 'fade', transition: 'out' }),
+    setHidden(spid, baseId + 2),
+  ].join('');
+}
+
+function renderDisappear(ctx) {
+  const { baseId, spid } = ctx;
+  return setHidden(spid, baseId + 1);
+}
+
+function renderFlyout(ctx) {
+  const { baseId, durMs, spid, direction = 'left' } = ctx;
+  const fly = flyToForExit(direction);
+  return [
+    attrAnim({ id: baseId + 1, durMs, spid, attrName: fly.attr, fromVal: fly.from, toVal: fly.to }),
+    setHidden(spid, baseId + 2),
+  ].join('');
+}
+
+function renderZoomout(ctx) {
+  const { baseId, durMs, spid, direction = 'out' } = ctx;
+  const toScale = direction === 'in' ? '1.5' : '0';
+  return [
+    animEffect({ id: baseId + 1, durMs, spid, filter: 'fade', transition: 'out' }),
+    attrAnim({ id: baseId + 2, durMs, spid, attrName: 'ppt_w', fromVal: '1', toVal: toScale }),
+    attrAnim({ id: baseId + 3, durMs, spid, attrName: 'ppt_h', fromVal: '1', toVal: toScale }),
+    setHidden(spid, baseId + 4),
+  ].join('');
+}
+
+function renderWipeout(ctx) {
+  const { baseId, durMs, spid, direction = 'left' } = ctx;
+  return [
+    animEffect({ id: baseId + 1, durMs, spid, filter: wipeFilter(direction), transition: 'out' }),
+    setHidden(spid, baseId + 2),
+  ].join('');
+}
+
+function renderDissolveout(ctx) {
+  const { baseId, durMs, spid } = ctx;
+  return [
+    animEffect({ id: baseId + 1, durMs, spid, filter: 'dissolve', transition: 'out' }),
+    setHidden(spid, baseId + 2),
+  ].join('');
+}
+
+function renderGenericExit(ctx) {
+  return renderFadeout(ctx);
+}
+
+// ======================================================================
+// REGISTRY
+// ======================================================================
+//
+// Maps entrance/emphasis/exit preset names → renderer function.
+// Presets not in the registry fall through to a sensible generic renderer.
+
+export const PRESET_RENDERERS = {
+  // --- Entrance ---
+  appear: renderAppear,
+  fadein: renderFadein,
+  flyin: renderFlyin,
+  floatin: renderFloatin,
+  split: renderSplit,
+  wipe: renderWipe,
+  zoom: renderZoom,
+  bounce: renderBounce,
+  swivel: renderSpin,
+  dissolvein: renderDissolve,
+  expand: renderStretch,
+  stretch: renderStretch,
+  riseup: renderRiseUp,
+  ascend: renderRiseUp,
+  descend: renderDescend,
+  risefall: renderDescend,
+  float: renderFloatin,
+  glidein: renderFadein,
+  fadeswivel: renderSpin,
+  zoomcenter: renderZoom,
+  basiczoom: renderZoom,
+  fadedzoom: renderZoom,
+  compress: renderZoom,
+  centerrevolve: renderSpin,
+  spinner: renderSpin,
+  pinwheel: renderSpin,
+  boomerang: renderBounce,
+  credits: renderRiseUp,
+  curveup: renderRiseUp,
+  flipin: renderSpin,
+  foldin: renderStretch,
+  gridout: renderWipe,
+  spiral: renderSpin,
+  thread: renderFadein,
+  whip: renderFlyin,
+  // --- Emphasis ---
+  pulse: renderPulse,
+  spin: renderEmphasisSpin,
+  grow: renderGrow,
+  shrink: renderShrink,
+  flash: renderFlash,
+  colorpulse: renderPulse,
+  teeter: renderTeeter,
+  shimmer: renderPulse,
+  blink: renderBlink,
+  bold: renderPulse,
+  wave: renderTeeter,
+  desaturate: renderPulse,
+  darken: renderPulse,
+  lighten: renderPulse,
+  transparent: renderPulse,
+  colorwave: renderPulse,
+  brushon: renderPulse,
+  wobble: renderTeeter,
+  // --- Exit ---
+  disappear: renderDisappear,
+  fadeout: renderFadeout,
+  flyout: renderFlyout,
+  floatout: renderFadeout,
+  zoomout: renderZoomout,
+  splitout: renderFadeout,
+  wipeout: renderWipeout,
+  shrinkout: renderZoomout,
+  dissolveout: renderDissolveout,
+  peekout: renderFadeout,
+  bounceout: renderFadeout,
+  swivelout: renderFadeout,
+  spiralout: renderFadeout,
+  flipout: renderFadeout,
+  foldout: renderFadeout,
+  glideout: renderFadeout,
+  boomerangout: renderFadeout,
+  contract: renderZoomout,
+};
+
+export function renderPresetChildTimeline(name, ctx) {
+  const renderer = PRESET_RENDERERS[name];
+  if (renderer) return renderer(ctx);
+  // Fallback — sensible default per preset class
+  if (ctx.presetClass === 'exit') return renderGenericExit(ctx);
+  if (ctx.presetClass === 'emph') return renderGenericEmphasis(ctx);
+  return renderGenericEntrance(ctx);
+}