@ignix-social/editor 0.1.21 → 0.1.22

package/src/runtime/blocks/map.js

@@ -0,0 +1,68 @@
+/*
+ * map.js — bloque de Ignix Editor: «estamos aquí». Un mapa (la captura del cliente de su
+ * ficha de Google Maps en assets/, o un plano de calles dibujado), una chincheta que cae,
+ * un pulso alrededor y la tarjeta con el nombre y la dirección. Función pura del tiempo.
+ *
+ *   const MP = IgnixMap.create(document.getElementById('map'), {
+ *     image: 'assets/map.png',            // opcional: sin imagen se dibuja un plano genérico
+ *     pin: [0.55, 0.42],                   // posición de la chincheta (fracción del ancho/alto)
+ *     name: 'Studio Nova', address: 'Calle Mayor 12, Madrid', at: 0.3, accent: '#FF5A1F',
+ *   });
+ *   run({ id, duration, fps }, (t) => MP.draw(t));
+ *
+ * La dirección, la REAL del negocio (get_brand_profile / su ficha de Google).
+ */
+(function () {
+  const clamp01 = (x) => Math.min(1, Math.max(0, x));
+  const outBounce = (x) => {
+    const n = 7.5625, d = 2.75;
+    if (x < 1 / d) return n * x * x;
+    if (x < 2 / d) return n * (x -= 1.5 / d) * x + 0.75;
+    if (x < 2.5 / d) return n * (x -= 2.25 / d) * x + 0.9375;
+    return n * (x -= 2.625 / d) * x + 0.984375;
+  };
+  function rng(seed) {
+    let s = seed >>> 0 || 1;
+    return () => (s = (s * 1664525 + 1013904223) >>> 0) / 4294967296;
+  }
+  // Plano genérico: calles en rejilla torcida, un parque y un río (siempre el mismo).
+  function streets(w, h, seed) {
+    const r = rng(seed);
+    let s = `<rect width="${w}" height="${h}" fill="#EDE9E1"/>`;
+    s += `<path d="M${-50},${h * 0.72} C${w * 0.3},${h * 0.6} ${w * 0.6},${h * 0.9} ${w + 50},${h * 0.78}" stroke="#A9CDE6" stroke-width="${w * 0.05}" fill="none"/>`;
+    s += `<rect x="${w * 0.08}" y="${h * 0.1}" width="${w * 0.22}" height="${h * 0.16}" rx="18" fill="#CFE3C3"/>`;
+    for (let i = 0; i < 9; i++) {
+      const y = h * (i / 8) + (r() - 0.5) * 40, x = w * (i / 8) + (r() - 0.5) * 40;
+      s += `<line x1="0" y1="${y}" x2="${w}" y2="${y + (r() - 0.5) * 120}" stroke="#FFFFFF" stroke-width="${i % 3 === 0 ? 22 : 12}"/>`;
+      s += `<line x1="${x}" y1="0" x2="${x + (r() - 0.5) * 120}" y2="${h}" stroke="#FFFFFF" stroke-width="${i % 4 === 0 ? 22 : 12}"/>`;
+    }
+    return s;
+  }
+
+  function create(box, { image, pin = [0.5, 0.45], name = '', address = '', at = 0, accent = '#E0452B', ink = '#1F1D1B', fontSize = 44, width = 900, height = 1100, seed = 4 } = {}) {
+    box.innerHTML = '';
+    Object.assign(box.style, { position: 'relative', overflow: 'hidden', width: `${width}px`, height: `${height}px` });
+    box.innerHTML =
+      (image ? `<img src="${image}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover">` : `<svg width="${width}" height="${height}" style="position:absolute;inset:0">${streets(width, height, seed)}</svg>`) +
+      `<div class="ring" style="position:absolute;left:${pin[0] * 100}%;top:${pin[1] * 100}%;width:${fontSize * 4}px;height:${fontSize * 4}px;margin:-${fontSize * 2}px 0 0 -${fontSize * 2}px;border-radius:50%;border:${Math.max(4, fontSize * 0.12)}px solid ${accent};opacity:0"></div>` +
+      `<svg class="pin" width="${fontSize * 2}" height="${fontSize * 2.6}" viewBox="0 0 40 52" style="position:absolute;left:${pin[0] * 100}%;top:${pin[1] * 100}%;margin:-${fontSize * 2.6}px 0 0 -${fontSize}px;transform-origin:50% 100%;opacity:0"><path d="M20 0C9 0 0 9 0 20c0 15 20 32 20 32s20-17 20-32C40 9 31 0 20 0z" fill="${accent}"/><circle cx="20" cy="20" r="8" fill="#fff"/></svg>` +
+      (name || address ? `<div class="card" style="position:absolute;left:${fontSize * 0.6}px;right:${fontSize * 0.6}px;bottom:${fontSize * 0.6}px;background:#fff;border-radius:${fontSize * 0.5}px;padding:${fontSize * 0.5}px ${fontSize * 0.6}px;box-shadow:0 14px 30px rgba(0,0,0,.2);color:${ink};opacity:0"><div style="font-size:${fontSize}px;font-weight:900">${name}</div><div style="font-size:${fontSize * 0.65}px;font-weight:600;opacity:.7;margin-top:4px">${address}</div></div>` : '');
+    const pinEl = box.querySelector('.pin'), ring = box.querySelector('.ring'), card = box.querySelector('.card');
+    return {
+      draw(t) {
+        const k = clamp01((t - at) / 0.6);
+        pinEl.style.opacity = t >= at ? '1' : '0';
+        pinEl.style.transform = `translateY(${((1 - outBounce(k)) * -300).toFixed(1)}px)`;
+        const p = t >= at + 0.6 ? ((t - at - 0.6) % 1.4) / 1.4 : -1;
+        ring.style.opacity = p >= 0 ? (1 - p).toFixed(3) : '0';
+        ring.style.transform = `scale(${(0.3 + 0.9 * Math.max(0, p)).toFixed(4)})`;
+        if (card) {
+          const kc = clamp01((t - at - 0.8) / 0.4);
+          card.style.opacity = kc.toFixed(3);
+          card.style.transform = `translateY(${((1 - kc) * 40).toFixed(1)}px)`;
+        }
+      },
+    };
+  }
+  window.IgnixMap = { create };
+})();

package/src/runtime/blocks/menu.js

@@ -0,0 +1,69 @@
+/*
+ * menu.js — bloque de Ignix Editor: carta o catálogo. Los productos (nombre, precio, foto
+ * opcional) entran en cascada y uno se destaca. Función pura del tiempo.
+ *
+ * Productos y precios REALES (list_catalog o la tienda de Ignix): nunca inventados.
+ *
+ *   const M = IgnixMenu.create(document.getElementById('menu'), {
+ *     title: 'Today’s specials',
+ *     items: [
+ *       { name: 'Croissant', price: '€1.80', image: 'assets/croissant.jpg' },
+ *       { name: 'Pain au chocolat', price: '€2.10', note: 'fresh at 8 am' },
+ *     ],
+ *     at: 0.3, step: 0.35, highlight: { index: 1, at: 2.4 },
+ *     accent: '#FF5A1F',
+ *   });
+ *   run({ id, duration, fps }, (t) => M.draw(t));
+ */
+(function () {
+  const clamp01 = (x) => Math.min(1, Math.max(0, x));
+  const outCubic = (x) => 1 - (1 - x) ** 3;
+
+  function create(box, { title = '', items = [], at = 0, step = 0.3, highlight = null, accent = '#FF5A1F', ink = '#1F1D1B', card = '#FFFFFF', fontSize = 44 } = {}) {
+    box.innerHTML = '';
+    Object.assign(box.style, { display: 'flex', flexDirection: 'column', gap: `${fontSize * 0.4}px` });
+    const rows = [];
+    if (title) {
+      const h = document.createElement('div');
+      h.textContent = title;
+      Object.assign(h.style, { fontSize: `${fontSize * 1.3}px`, fontWeight: '900', color: ink, marginBottom: `${fontSize * 0.2}px`, opacity: '0' });
+      box.appendChild(h);
+      rows.push({ el: h, at });
+    }
+    items.forEach((it, i) => {
+      const r = document.createElement('div');
+      Object.assign(r.style, {
+        display: 'flex', alignItems: 'center', gap: `${fontSize * 0.5}px`, background: card, borderRadius: `${fontSize * 0.5}px`,
+        padding: `${fontSize * 0.4}px ${fontSize * 0.5}px`, boxShadow: '0 10px 28px rgba(0,0,0,.12)', opacity: '0', position: 'relative',
+        outline: `0px solid ${accent}`,
+      });
+      r.innerHTML =
+        (it.image ? `<img src="${it.image}" style="width:${fontSize * 2.4}px;height:${fontSize * 2.4}px;object-fit:cover;border-radius:${fontSize * 0.35}px;flex:0 0 auto">` : '') +
+        `<div style="flex:1 1 auto;min-width:0"><div style="font-size:${fontSize}px;font-weight:800;color:${ink};line-height:1.15">${esc(it.name)}</div>${it.note ? `<div style="font-size:${fontSize * 0.62}px;opacity:.6;margin-top:4px;color:${ink}">${esc(it.note)}</div>` : ''}</div>` +
+        `<div style="font-size:${fontSize * 1.05}px;font-weight:900;color:${accent};flex:0 0 auto">${esc(it.price ?? '')}</div>`;
+      box.appendChild(r);
+      rows.push({ el: r, at: at + (title ? 0.3 : 0) + i * step, index: i });
+    });
+
+    function draw(t) {
+      for (const r of rows) {
+        const k = clamp01((t - r.at) / 0.35);
+        r.el.style.opacity = clamp01(k * 2).toFixed(3);
+        let tr = `translateY(${((1 - outCubic(k)) * 60).toFixed(1)}px)`;
+        if (highlight && r.index === highlight.index) {
+          const kh = clamp01((t - highlight.at) / 0.3);
+          tr += ` scale(${(1 + 0.06 * outCubic(kh)).toFixed(4)})`;
+          r.el.style.outlineWidth = `${(Math.max(4, fontSize * 0.12) * kh).toFixed(1)}px`;
+          r.el.style.zIndex = '1';
+        }
+        r.el.style.transform = tr;
+      }
+    }
+    return { draw };
+  }
+
+  function esc(s) {
+    return String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+  }
+  window.IgnixMenu = { create };
+})();

package/src/runtime/blocks/offer.js

@@ -0,0 +1,51 @@
+/*
+ * offer.js — bloque de Ignix Editor: oferta con cuenta atrás. Tarjeta con el precio de
+ * antes tachado, el de ahora que salta, una etiqueta de descuento, la cuenta atrás que
+ * corre y la llamada a la acción. Función pura del tiempo.
+ *
+ * Solo ofertas REALES de la marca, con su fecha de fin de verdad: una cuenta atrás falsa
+ * es engañosa (y en la UE, práctica desleal).
+ *
+ *   const O = IgnixOffer.create(document.getElementById('offer'), {
+ *     title: 'Autumn colour + cut', oldPrice: '€85', price: '€59', badge: '-30%',
+ *     endsIn: 2 * 86400 + 3 * 3600 + 14 * 60, // segundos que quedan AL EMPEZAR el vídeo
+ *     cta: 'Book from the link in bio', at: 0.3, accent: '#FF5A1F',
+ *   });
+ *   run({ id, duration, fps }, (t) => O.draw(t));
+ */
+(function () {
+  const clamp01 = (x) => Math.min(1, Math.max(0, x));
+  const outBack = (x) => 1 + 2.6 * (x - 1) ** 3 + 1.6 * (x - 1) ** 2;
+  const two = (n) => String(Math.max(0, Math.floor(n))).padStart(2, '0');
+
+  function create(box, { title = '', oldPrice = '', price = '', badge = '', endsIn = 0, cta = '', at = 0, accent = '#FF5A1F', ink = '#1F1D1B', card = '#FFFFFF', fontSize = 48, labels = ['DAYS', 'HRS', 'MIN', 'SEC'] } = {}) {
+    box.innerHTML = '';
+    Object.assign(box.style, { position: 'relative', background: card, borderRadius: `${fontSize * 0.8}px`, padding: `${fontSize * 1.1}px ${fontSize}px`, boxShadow: '0 30px 60px rgba(0,0,0,.18)', color: ink, textAlign: 'center', opacity: '0' });
+    const unit = (l) => `<div style="flex:1"><div class="d" style="font-size:${fontSize * 1.5}px;font-weight:900;font-variant-numeric:tabular-nums;background:${ink};color:#fff;border-radius:${fontSize * 0.3}px;padding:${fontSize * 0.2}px 0">00</div><div style="font-size:${fontSize * 0.45}px;font-weight:800;opacity:.6;margin-top:6px">${l}</div></div>`;
+    box.innerHTML =
+      (badge ? `<div class="b" style="position:absolute;top:${-fontSize * 0.7}px;right:${fontSize * 0.6}px;background:${accent};color:#fff;font-weight:900;font-size:${fontSize * 1.1}px;padding:${fontSize * 0.2}px ${fontSize * 0.5}px;border-radius:${fontSize * 0.4}px;transform:rotate(6deg) scale(0)">${badge}</div>` : '') +
+      `<div style="font-size:${fontSize}px;font-weight:800">${title}</div>` +
+      `<div style="display:flex;align-items:baseline;justify-content:center;gap:${fontSize * 0.5}px;margin:${fontSize * 0.4}px 0 ${fontSize * 0.7}px"><span class="o" style="position:relative;font-size:${fontSize * 1.2}px;font-weight:800;opacity:.5">${oldPrice}<span class="s" style="position:absolute;left:-4%;right:-4%;top:52%;height:${Math.max(4, fontSize * 0.1)}px;background:${accent};transform-origin:0 50%;transform:scaleX(0)"></span></span><span class="p" style="font-size:${fontSize * 2.4}px;font-weight:900;color:${accent};display:inline-block;transform:scale(0)">${price}</span></div>` +
+      (endsIn > 0 ? `<div style="display:flex;gap:${fontSize * 0.3}px">${labels.map(unit).join('')}</div>` : '') +
+      (cta ? `<div class="c" style="margin-top:${fontSize * 0.8}px;background:${ink};color:#fff;font-weight:900;font-size:${fontSize * 0.85}px;padding:${fontSize * 0.45}px;border-radius:${fontSize * 2}px;opacity:0">${cta}</div>` : '');
+    const q = (s) => box.querySelector(s);
+    const digits = [...box.querySelectorAll('.d')];
+    return {
+      draw(t) {
+        const k = clamp01((t - at) / 0.35);
+        box.style.opacity = clamp01(k * 2).toFixed(3);
+        box.style.transform = `translateY(${((1 - outBack(k)) * 80).toFixed(1)}px)`;
+        q('.s') && (q('.s').style.transform = `scaleX(${clamp01((t - at - 0.4) / 0.3).toFixed(3)})`);
+        q('.p') && (q('.p').style.transform = `scale(${outBack(clamp01((t - at - 0.7) / 0.35)).toFixed(4)})`);
+        q('.b') && (q('.b').style.transform = `rotate(6deg) scale(${outBack(clamp01((t - at - 1.0) / 0.3)).toFixed(4)})`);
+        q('.c') && (q('.c').style.opacity = clamp01((t - at - 1.4) / 0.3).toFixed(3));
+        if (digits.length) {
+          const left = Math.max(0, endsIn - Math.max(0, t - at));
+          const parts = [left / 86400, (left % 86400) / 3600, (left % 3600) / 60, left % 60];
+          digits.forEach((d, i) => (d.textContent = two(parts[i])));
+        }
+      },
+    };
+  }
+  window.IgnixOffer = { create };
+})();

package/src/runtime/blocks/photos.js

@@ -0,0 +1,48 @@
+/*
+ * photos.js — bloque de Ignix Editor: fotos con movimiento (Ken Burns). Cada foto entra
+ * con un fundido, se acerca o se desplaza despacio y deja paso a la siguiente; con pie de
+ * foto opcional. Función pura del tiempo. Fotos LOCALES (assets/), del cliente o de stock
+ * con licencia.
+ *
+ *   const P = IgnixPhotos.create(document.getElementById('photos'), {
+ *     photos: [
+ *       { src: 'assets/salon-1.jpg', at: 0, dur: 2.6, from: [1.0, 0, 0], to: [1.15, -3, 2], caption: 'Saturday, 9 am' },
+ *       { src: 'assets/salon-2.jpg', at: 2.4, dur: 2.6, from: [1.2, 4, 0], to: [1.05, 0, 0] },
+ *     ],
+ *     fade: 0.45,
+ *   });
+ *   run({ id, duration, fps }, (t) => P.draw(t));
+ *
+ * from/to = [escala, desplazamiento x %, desplazamiento y %]. Las fotos cubren el contenedor.
+ */
+(function () {
+  const clamp01 = (x) => Math.min(1, Math.max(0, x));
+  const inOut = (x) => (x < 0.5 ? 2 * x * x : 1 - (-2 * x + 2) ** 2 / 2);
+
+  function create(box, { photos = [], fade = 0.45, fontSize = 44 } = {}) {
+    box.innerHTML = '';
+    Object.assign(box.style, { position: 'relative', overflow: 'hidden' });
+    const items = photos.map((p) => {
+      const wrap = document.createElement('div');
+      Object.assign(wrap.style, { position: 'absolute', inset: '0', opacity: '0' });
+      wrap.innerHTML = `<img src="${p.src}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%">${p.caption ? `<div style="position:absolute;left:${fontSize * 0.7}px;bottom:${fontSize * 0.9}px;background:rgba(0,0,0,.55);color:#fff;font-weight:800;font-size:${fontSize}px;padding:${fontSize * 0.25}px ${fontSize * 0.5}px;border-radius:${fontSize * 0.3}px">${p.caption}</div>` : ''}`;
+      box.appendChild(wrap);
+      return { wrap, img: wrap.querySelector('img'), at: p.at, dur: p.dur, from: p.from ?? [1, 0, 0], to: p.to ?? [1.12, 0, 0] };
+    });
+    return {
+      draw(t) {
+        for (const it of items) {
+          const local = t - it.at;
+          const on = local >= 0 && local <= it.dur;
+          const op = on ? Math.min(clamp01(local / fade), clamp01((it.dur - local) / fade) || (it === items[items.length - 1] ? 1 : 0)) : 0;
+          it.wrap.style.opacity = op.toFixed(3);
+          if (!on) continue;
+          const k = inOut(clamp01(local / it.dur));
+          const [s0, x0, y0] = it.from, [s1, x1, y1] = it.to;
+          it.img.style.transform = `translate(${(x0 + (x1 - x0) * k).toFixed(3)}%, ${(y0 + (y1 - y0) * k).toFixed(3)}%) scale(${(s0 + (s1 - s0) * k).toFixed(4)})`;
+        }
+      },
+    };
+  }
+  window.IgnixPhotos = { create };
+})();

package/src/runtime/blocks/quiz.js

@@ -0,0 +1,64 @@
+/*
+ * quiz.js — bloque de Ignix Editor: pregunta o reto. La pregunta, las opciones una a una,
+ * una cuenta atrás para pensar y la respuesta que se destaca. Función pura del tiempo.
+ * Para comentarios: «¿cuál dirías? Comenta A, B o C» antes de revelarla.
+ *
+ *   const Q = IgnixQuiz.create(document.getElementById('quiz'), {
+ *     question: 'When do most salon bookings happen?',
+ *     options: ['9–11 am', 'Lunch time', 'After 10 pm'],
+ *     correct: 2, at: 0.3, think: 3, accent: '#FF5A1F',
+ *   });
+ *   run({ id, duration, fps }, (t) => Q.draw(t));
+ *
+ * La respuesta correcta tiene que serlo de verdad (un dato de la marca o con fuente).
+ */
+(function () {
+  const clamp01 = (x) => Math.min(1, Math.max(0, x));
+  const outBack = (x) => 1 + 2.4 * (x - 1) ** 3 + 1.4 * (x - 1) ** 2;
+
+  function create(box, { question = '', options = [], correct = 0, at = 0, step = 0.35, think = 3, accent = '#FF5A1F', ink = '#1F1D1B', card = '#FFFFFF', fontSize = 48, letters = 'ABCDEF' } = {}) {
+    box.innerHTML = '';
+    Object.assign(box.style, { display: 'flex', flexDirection: 'column', gap: `${fontSize * 0.45}px` });
+    const q = document.createElement('div');
+    q.textContent = question;
+    Object.assign(q.style, { fontSize: `${fontSize * 1.15}px`, fontWeight: '900', color: ink, lineHeight: '1.15', marginBottom: `${fontSize * 0.3}px`, opacity: '0' });
+    box.appendChild(q);
+    const opts = options.map((o, i) => {
+      const el = document.createElement('div');
+      Object.assign(el.style, { display: 'flex', alignItems: 'center', gap: `${fontSize * 0.4}px`, background: card, color: ink, borderRadius: `${fontSize * 0.5}px`, padding: `${fontSize * 0.45}px ${fontSize * 0.5}px`, fontSize: `${fontSize}px`, fontWeight: '800', boxShadow: '0 10px 26px rgba(0,0,0,.12)', opacity: '0', border: `${Math.max(4, fontSize * 0.1)}px solid transparent` });
+      el.innerHTML = `<span style="flex:0 0 auto;width:${fontSize * 1.3}px;height:${fontSize * 1.3}px;border-radius:50%;background:${ink};color:#fff;display:flex;align-items:center;justify-content:center">${letters[i]}</span><span style="flex:1">${o}</span><span class="ok" style="opacity:0;font-size:${fontSize * 1.1}px">✓</span>`;
+      box.appendChild(el);
+      return { el, ok: el.querySelector('.ok'), at: at + 0.5 + i * step, right: i === correct };
+    });
+    const timer = document.createElement('div');
+    Object.assign(timer.style, { alignSelf: 'center', marginTop: `${fontSize * 0.4}px`, width: `${fontSize * 2.4}px`, height: `${fontSize * 2.4}px`, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: `${fontSize * 1.2}px`, fontWeight: '900', color: '#fff', background: accent, opacity: '0' });
+    box.appendChild(timer);
+    const thinkAt = at + 0.5 + options.length * step + 0.2;
+    const reveal = thinkAt + think;
+
+    return {
+      reveal,
+      draw(t) {
+        q.style.opacity = clamp01((t - at) / 0.3).toFixed(3);
+        for (const o of opts) {
+          const k = clamp01((t - o.at) / 0.3);
+          o.el.style.opacity = (clamp01(k * 2) * (t >= reveal && !o.right ? 0.35 : 1)).toFixed(3);
+          const kr = o.right ? clamp01((t - reveal) / 0.3) : 0;
+          o.el.style.transform = `translateX(${((1 - outBack(k)) * -80).toFixed(1)}px) scale(${(1 + 0.05 * kr).toFixed(4)})`;
+          o.el.style.borderColor = kr > 0 ? accent : 'transparent';
+          o.ok.style.opacity = kr.toFixed(3);
+          o.ok.style.color = accent;
+        }
+        const left = Math.ceil(reveal - t);
+        const showT = t >= thinkAt && t < reveal;
+        timer.style.opacity = showT ? '1' : '0';
+        if (showT) {
+          timer.textContent = String(left);
+          const frac = (reveal - t) % 1;
+          timer.style.transform = `scale(${(1 + 0.15 * clamp01((frac - 0.85) / 0.15)).toFixed(4)})`;
+        }
+      },
+    };
+  }
+  window.IgnixQuiz = { create };
+})();

package/src/runtime/blocks/reviews.js

@@ -0,0 +1,61 @@
+/*
+ * reviews.js — bloque de Ignix Editor: reseñas REALES que entran una tras otra mientras
+ * se rellenan sus estrellas. Función pura del tiempo; el navegador coloca las tarjetas
+ * (CSS) y aquí solo se anima con transform/opacity.
+ *
+ * Solo reseñas que existen (las de la marca en Ignix: list_reviews / list_booking_reviews),
+ * con el nombre como lo muestra la fuente y sin retocar el texto más allá de recortarlo.
+ *
+ *   const R = IgnixReviews.create(document.getElementById('reviews'), {
+ *     reviews: [
+ *       { author: 'Marta G.', stars: 5, text: 'Best haircut I have had in years.', source: 'Google', at: 0.4 },
+ *       { author: 'Leo P.', stars: 5, text: 'Booked at 11 pm from Instagram, done.', source: 'Google', at: 1.6 },
+ *     ],
+ *     accent: '#FF5A1F', fontSize: 40,
+ *   });
+ *   run({ id, duration, fps }, (t) => R.draw(t));
+ */
+(function () {
+  const clamp01 = (x) => Math.min(1, Math.max(0, x));
+  const outBack = (x) => 1 + 2.2 * (x - 1) ** 3 + 1.2 * (x - 1) ** 2;
+  const STAR = 'M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7L12 17.3 5.8 20.9l1.6-7L2 9.2l7.1-.6z';
+
+  function create(box, { reviews = [], accent = '#FFB400', fontSize = 40, card = '#FFFFFF', ink = '#1F1D1B', gap = 28, max = 3 } = {}) {
+    box.innerHTML = '';
+    Object.assign(box.style, { display: 'flex', flexDirection: 'column', gap: `${gap}px` });
+    const items = reviews.map((r, i) => {
+      const el = document.createElement('div');
+      Object.assign(el.style, {
+        background: card, color: ink, borderRadius: `${fontSize * 0.6}px`, padding: `${fontSize * 0.7}px ${fontSize * 0.8}px`,
+        boxShadow: '0 18px 40px rgba(0,0,0,.18)', fontSize: `${fontSize}px`, lineHeight: '1.3', opacity: '0', display: 'none',
+        transformOrigin: i % 2 ? '100% 50%' : '0% 50%',
+      });
+      const stars = Array.from({ length: 5 }, (_, k) => `<svg viewBox="0 0 24 24" width="${fontSize * 1.05}" height="${fontSize * 1.05}" style="margin-right:4px"><path d="${STAR}" fill="#E4E1DB"/><path class="fill" data-k="${k}" d="${STAR}" fill="${accent}" style="transform-origin:12px 12px;transform:scale(0)"/></svg>`).join('');
+      el.innerHTML = `<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:${fontSize * 0.35}px"><div style="display:flex">${stars}</div>${r.source ? `<div style="font-size:${fontSize * 0.6}px;opacity:.55;font-weight:700">${esc(r.source)}</div>` : ''}</div><div style="font-weight:600">“${esc(r.text)}”</div><div style="margin-top:${fontSize * 0.35}px;font-size:${fontSize * 0.7}px;opacity:.65;font-weight:700">— ${esc(r.author)}</div>`;
+      box.appendChild(el);
+      return { el, at: r.at ?? i * 1.2, stars: Math.max(0, Math.min(5, Math.round(r.stars ?? 5))), fills: [...el.querySelectorAll('.fill')], side: i % 2 ? 1 : -1 };
+    });
+
+    function draw(t) {
+      // Las `max` más recientes a la vista: las viejas se van por arriba.
+      const shown = items.filter((it) => t >= it.at);
+      const visible = new Set(shown.slice(-max));
+      for (const it of items) {
+        const k = clamp01((t - it.at) / 0.45);
+        it.el.style.display = visible.has(it) ? 'block' : 'none';
+        it.el.style.opacity = clamp01(k * 2).toFixed(3);
+        it.el.style.transform = `translateX(${((1 - outBack(k)) * 120 * it.side).toFixed(1)}px) rotate(${((1 - k) * 3 * it.side).toFixed(2)}deg)`;
+        it.fills.forEach((f, s) => {
+          const ks = s < it.stars ? clamp01((t - it.at - 0.25 - s * 0.09) / 0.2) : 0;
+          f.style.transform = `scale(${outBack(ks).toFixed(3)})`;
+        });
+      }
+    }
+    return { draw };
+  }
+
+  function esc(s) {
+    return String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+  }
+  window.IgnixReviews = { create };
+})();

package/src/runtime/blocks/slots.js

@@ -0,0 +1,69 @@
+/*
+ * slots.js — bloque de Ignix Editor: los huecos libres de la agenda (la semana o un día)
+ * en una rejilla que aparece y en la que algunos se van ocupando en directo. Función pura
+ * del tiempo.
+ *
+ * Huecos REALES (get_booking_availability de Ignix): no se inventa disponibilidad. Que
+ * «se ocupen» solo para enseñar cómo funciona la reserva, y dicho como ejemplo.
+ *
+ *   const S = IgnixSlots.create(document.getElementById('slots'), {
+ *     days: [
+ *       { label: 'Thu 9', slots: ['10:00', '12:30', '17:00', '18:30'] },
+ *       { label: 'Fri 10', slots: ['09:30', '11:00', '16:00'] },
+ *     ],
+ *     at: 0.3,                                     // cuándo empieza a aparecer
+ *     taken: [{ day: 0, slot: 2, at: 2.4 }],       // huecos que se ocupan (opcional)
+ *     accent: '#FF5A1F',
+ *   });
+ *   run({ id, duration, fps }, (t) => S.draw(t));
+ */
+(function () {
+  const clamp01 = (x) => Math.min(1, Math.max(0, x));
+  const outBack = (x) => 1 + 2.4 * (x - 1) ** 3 + 1.4 * (x - 1) ** 2;
+
+  function create(box, { days = [], at = 0, step = 0.07, taken = [], accent = '#FF5A1F', ink = '#1F1D1B', bg = '#FFFFFF', fontSize = 40, takenLabel = 'Booked' } = {}) {
+    box.innerHTML = '';
+    Object.assign(box.style, { display: 'grid', gridTemplateColumns: `repeat(${Math.max(1, days.length)}, 1fr)`, gap: `${fontSize * 0.5}px`, alignItems: 'start' });
+    const cells = [];
+    let n = 0;
+    days.forEach((d, di) => {
+      const col = document.createElement('div');
+      Object.assign(col.style, { display: 'flex', flexDirection: 'column', gap: `${fontSize * 0.35}px` });
+      const head = document.createElement('div');
+      head.textContent = d.label;
+      Object.assign(head.style, { fontSize: `${fontSize * 0.8}px`, fontWeight: '800', color: ink, textAlign: 'center', marginBottom: `${fontSize * 0.15}px`, opacity: '0' });
+      col.appendChild(head);
+      cells.push({ el: head, at: at + n++ * step, head: true });
+      d.slots.forEach((s, si) => {
+        const c = document.createElement('div');
+        Object.assign(c.style, {
+          position: 'relative', background: bg, color: accent, border: `${Math.max(3, fontSize * 0.08)}px solid ${accent}`, borderRadius: `${fontSize * 0.45}px`,
+          padding: `${fontSize * 0.35}px 0`, textAlign: 'center', fontSize: `${fontSize}px`, fontWeight: '800', opacity: '0', overflow: 'hidden',
+        });
+        c.innerHTML = `<span class="t">${s}</span><span class="b" style="position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:${ink};color:#fff;font-size:${fontSize * 0.7}px;transform:translateY(100%)">${takenLabel}</span>`;
+        col.appendChild(c);
+        const tk = taken.find((x) => x.day === di && x.slot === si);
+        cells.push({ el: c, at: at + n++ * step, taken: tk?.at, band: c.querySelector('.b'), time: c.querySelector('.t') });
+      });
+      box.appendChild(col);
+    });
+
+    function draw(t) {
+      for (const c of cells) {
+        const k = clamp01((t - c.at) / 0.3);
+        c.el.style.opacity = clamp01(k * 2.5).toFixed(3);
+        c.el.style.transform = `scale(${(0.7 + 0.3 * outBack(k)).toFixed(4)})`;
+        if (c.band) {
+          // La franja «reservado» no existe hasta que entra, y la hora se va mientras
+          // tanto: nunca dos textos uno encima de otro (lo marca `check`).
+          const kb = c.taken != null ? clamp01((t - c.taken) / 0.3) : 0;
+          c.band.style.display = kb > 0 ? 'flex' : 'none';
+          c.band.style.transform = `translateY(${((1 - kb) * 100).toFixed(1)}%)`;
+          c.time.style.opacity = (1 - kb).toFixed(3);
+        }
+      }
+    }
+    return { draw };
+  }
+  window.IgnixSlots = { create };
+})();

package/src/runtime/blocks/steps.js

@@ -0,0 +1,49 @@
+/*
+ * steps.js — bloque de Ignix Editor: paso a paso. Pasos numerados unidos por una línea
+ * que se dibuja; cada paso se enciende en su momento, el actual destaca y los hechos
+ * quedan marcados. Función pura del tiempo.
+ *
+ *   const ST = IgnixSteps.create(document.getElementById('steps'), {
+ *     steps: [
+ *       { title: 'Pick a keyword', text: 'e.g. PRICE', at: 0.4 },
+ *       { title: 'Write the DM', text: 'with your link as a button', at: 1.8 },
+ *       { title: 'Turn it on', at: 3.2 },
+ *     ],
+ *     accent: '#FF5A1F',
+ *   });
+ *   run({ id, duration, fps }, (t) => ST.draw(t));
+ */
+(function () {
+  const clamp01 = (x) => Math.min(1, Math.max(0, x));
+  const outBack = (x) => 1 + 2.4 * (x - 1) ** 3 + 1.4 * (x - 1) ** 2;
+
+  function create(box, { steps = [], accent = '#FF5A1F', ink = '#1F1D1B', muted = '#B9B4AC', fontSize = 46, gap = 70 } = {}) {
+    box.innerHTML = '';
+    Object.assign(box.style, { position: 'relative', display: 'flex', flexDirection: 'column', gap: `${gap}px` });
+    const dot = fontSize * 1.6;
+    const rows = steps.map((s, i) => {
+      const r = document.createElement('div');
+      Object.assign(r.style, { position: 'relative', display: 'flex', alignItems: 'flex-start', gap: `${fontSize * 0.6}px`, opacity: '0.25' });
+      r.innerHTML =
+        (i < steps.length - 1 ? `<div class="ln" style="position:absolute;left:${dot / 2 - 4}px;top:${dot}px;width:8px;height:calc(100% + ${gap - 4}px);background:${muted};border-radius:4px;overflow:hidden"><div class="lf" style="width:100%;height:100%;background:${accent};transform-origin:50% 0;transform:scaleY(0)"></div></div>` : '') +
+        `<div class="n" style="position:relative;flex:0 0 auto;width:${dot}px;height:${dot}px;border-radius:50%;background:${muted};color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:${fontSize * 0.85}px">${i + 1}</div>` +
+        `<div style="padding-top:${(dot - fontSize * 1.15) / 2}px"><div style="font-size:${fontSize}px;font-weight:900;color:${ink};line-height:1.15">${s.title}</div>${s.text ? `<div style="font-size:${fontSize * 0.68}px;font-weight:600;color:${ink};opacity:.65;margin-top:6px">${s.text}</div>` : ''}</div>`;
+      box.appendChild(r);
+      return { el: r, n: r.querySelector('.n'), lf: r.querySelector('.lf'), at: s.at, next: steps[i + 1]?.at, num: i + 1 };
+    });
+    return {
+      draw(t) {
+        rows.forEach((r) => {
+          const k = clamp01((t - r.at) / 0.3);
+          const done = r.next != null && t >= r.next;
+          r.el.style.opacity = (0.25 + 0.75 * k).toFixed(3);
+          r.n.style.background = k > 0 ? accent : muted;
+          r.n.style.transform = `scale(${(1 + 0.18 * (outBack(k) - 1) + (done ? 0 : 0.08 * k)).toFixed(4)})`;
+          r.n.textContent = done ? '✓' : String(r.num);
+          if (r.lf) r.lf.style.transform = `scaleY(${r.next != null ? clamp01((t - r.at - 0.3) / Math.max(0.2, r.next - r.at - 0.3)).toFixed(4) : 0})`;
+        });
+      },
+    };
+  }
+  window.IgnixSteps = { create };
+})();