primocode 9.9.0 → 10.0.0

package/lib/estudio/motion.js

@@ -0,0 +1,333 @@
+/**
+ * motion.js — o roteiro vira UM plano contínuo, em 3D. Não slide.
+ *
+ *   "Isso aí tá muito bom. Eu quero agora que os motion saiam desse estilo,
+ *    as animações assim, motion assim mesmo. Isso sim é motion." — Joel,
+ *    depois do exemplo da bolinha (28/09/2026)
+ *
+ * A composição (composicao.js) faz uma cena por parte: título, corta, lista,
+ * corta. Isso é slide, por mais que cada cena se mexa. Aqui existe um
+ * PROTAGONISTA — uma forma na cor da marca — que vive o vídeo inteiro e se
+ * deforma no que cada parte pede:
+ *
+ *   abertura  esfera que chega do fundo do espaço
+ *   titulo    pílula que carrega o título
+ *   numero    disco com o número contando
+ *   lista     pílula do título, e os itens saem dela em leque 3D
+ *   passos    idem, numerados
+ *   contraste o "não" riscado cai, o "sim" sobe no lugar
+ *   citacao   cartão com a frase
+ *   imagem    moldura, e a foto aparece dentro dela
+ *   cta       o botão; o cursor entra girando e clica
+ *
+ * Uma cena só, 60 quadros por segundo. Cada parte entra antes de a anterior
+ * sair, a câmera orbita o mundo o tempo todo, partículas em três
+ * profundidades dão o espaço, e o protagonista tem espessura (uma cópia mais
+ * escura atrás). É a mesma gramática do exemplo docs/exemplos/motion-bolinha.
+ *
+ * Puro: recebe tempos, narração, trilha e sons já prontos; devolve o plano.
+ */
+
+'use strict';
+
+const { caber, falaDe } = require('./composicao.js');
+const { misturarCor, ehCor } = require('./morfar.js');
+const { volumesDaTrilha } = require('./ritmo.js');
+
+const k = (t, v, e) => (e ? { t, v, e } : { t, v });
+const r2 = (n) => Math.round(n * 100) / 100;
+const FPS = 60;
+
+// ── o protagonista: caixa de 1400 px, formas em 0..100 ───────────────────
+const CAIXA = 1400;
+const U = CAIXA / 100;                 // px por unidade
+const KAPPA = 0.5523;
+/** Retângulo de cantos redondos em unidades (é também círculo e pílula). */
+function forma(w, h, r = Math.min(w, h) / 2) {
+    const x0 = 50 - w / 2, y0 = 50 - h / 2, x1 = 50 + w / 2, y1 = 50 + h / 2;
+    const rr = Math.min(r, w / 2, h / 2), c = rr * KAPPA;
+    const f = (n) => r2(n);
+    return [
+        `M ${f(x0 + rr)} ${f(y0)}`, `L ${f(x1 - rr)} ${f(y0)}`,
+        `C ${f(x1 - rr + c)} ${f(y0)} ${f(x1)} ${f(y0 + rr - c)} ${f(x1)} ${f(y0 + rr)}`,
+        `L ${f(x1)} ${f(y1 - rr)}`,
+        `C ${f(x1)} ${f(y1 - rr + c)} ${f(x1 - rr + c)} ${f(y1)} ${f(x1 - rr)} ${f(y1)}`,
+        `L ${f(x0 + rr)} ${f(y1)}`,
+        `C ${f(x0 + rr - c)} ${f(y1)} ${f(x0)} ${f(y1 - rr + c)} ${f(x0)} ${f(y1 - rr)}`,
+        `L ${f(x0)} ${f(y0 + rr)}`,
+        `C ${f(x0)} ${f(y0 + rr - c)} ${f(x0 + rr - c)} ${f(y0)} ${f(x0 + rr)} ${f(y0)}`, 'Z',
+    ].join(' ');
+}
+const px = (n) => n / U;               // px → unidades da caixa
+
+const numeroDe = (v) => {
+    const m = String(v == null ? '' : v).match(/^(\D*)([\d.,]+)(.*)$/);
+    if (!m) return null;
+    const n = Number(m[2].replace(/\./g, '').replace(',', '.'));
+    return Number.isFinite(n) ? { antes: m[1], ate: n, depois: m[3], casas: /,\d/.test(m[2]) ? 1 : 0 } : null;
+};
+const itensDe = (p) => (p.itens || []).map((i) => (typeof i === 'string' ? i : i.texto || i.titulo || '')).filter(Boolean);
+
+/**
+ * @param {object} op
+ * @param {object} op.roteiro   { marca, partes: [{tipo, titulo, sub, itens, valor, rotulo, sim, nao, link, autor, src}] }
+ * @param {Array}  op.tempos    [{de, ate, palavras}] por parte (da narração); sem ela, 2,4 s por parte
+ * @param {string} op.narracao  o mp3 da narração inteira
+ * @param {object} op.sons      { sopro, bolha, clique, brilho, subida, toque } (sons-leves.js)
+ * @param {string} op.trilha    a música
+ * @param {object} op.imagens   { indiceDaParte: {src, tipo} }
+ */
+function montarMotion({ roteiro, largura = 1920, altura = 1080, tempos = [], narracao = null, sons = {}, trilha = null, imagens = {} }) {
+    const partes = (roteiro && roteiro.partes) || [];
+    if (!partes.length) return { ok: false, error: 'o roteiro veio sem partes.' };
+    const W = largura, H = altura, deitado = W >= H;
+    const base = Math.min(W, H) / 1080;
+
+    // ── a marca ──────────────────────────────────────────────────────────
+    const marca = roteiro.marca || {};
+    const cores = marca.cores || {};
+    const DEST = ehCor(cores.destaque) ? cores.destaque : (marca.gradiente && ehCor(marca.gradiente[1]) ? marca.gradiente[1] : '#7c5cff');
+    const DEST2 = marca.gradiente && ehCor(marca.gradiente[0]) ? marca.gradiente[0] : misturarCor(DEST, '#ffffff', 0.35);
+    const FUNDO = ehCor(cores.fundo) ? cores.fundo : '#0a0a12';
+    const TINTA = ehCor(cores.tinta) ? cores.tinta : '#ffffff';
+    const F = { titulo: (marca.fontes && marca.fontes.titulo) || 'Plus Jakarta Sans', texto: (marca.fontes && marca.fontes.texto) || 'Plus Jakarta Sans' };
+    const LUZ = { tipo: 'gradiente', radial: true, centro: [0.32, 0.26], raio: 0.9, cores: [misturarCor(DEST, '#ffffff', 0.55), DEST, misturarCor(DEST, '#000000', 0.45)] };
+    const LADO = { tipo: 'gradiente', radial: true, centro: [0.32, 0.26], raio: 0.9, cores: [misturarCor(DEST, '#000000', 0.35), misturarCor(DEST, '#000000', 0.6)] };
+
+    // ── o tempo de cada parte (a narração manda) ────────────────────────
+    const temVoz = tempos.length === partes.length && tempos.every((t) => t && t.ate > t.de);
+    const ini = partes.map((_, i) => (temVoz ? (i === 0 ? 0 : Math.max(0, tempos[i].de - 0.25)) : i * 2.4));
+    const DUR = r2(temVoz ? tempos[tempos.length - 1].ate + 1.3 : partes.length * 2.4 + 1.0);
+    const fim = partes.map((_, i) => (i < partes.length - 1 ? ini[i + 1] : DUR));
+
+    const elementos = [];
+    const efeitos = [];
+    const som = (t, nome, volume) => { if (sons[nome]) efeitos.push({ t: r2(Math.max(0, t)), src: sons[nome], volume }); };
+
+    // Trilhas do protagonista, construídas parte a parte.
+    const trilhaForma = [], trilhaX = [], trilhaY = [], trilhaRot = [], trilhaEsc = [];
+
+    // Uma peça de conteúdo: entra do 3D (z, giro em X), sai recuando e desfocando.
+    const peca = (el, de, ate, { atraso = 0 } = {}) => {
+        const d0 = r2(de + atraso), vida = r2(Math.max(0.5, ate - d0));
+        const a = el.anima || {};
+        return {
+            ...el, de: d0, ate: r2(d0 + vida),
+            anima: {
+                ...a,
+                opacidade: [k(0, 0), k(0.3, 1, 'saida'), k(Math.max(0.35, vida - 0.3), 1), k(vida, 0, 'suave')],
+                // 70 px à frente do protagonista: quando ele gira, a lateral
+                // dele avança em z e, mais perto que isso, cobria o texto.
+                z: [k(0, 260), k(0.5, 70, 'saida'), k(Math.max(0.55, vida - 0.3), 70), k(vida, -260, 'suave')],
+                rotacaoX: a.rotacaoX || [k(0, 28), k(0.5, 0, 'saida')],
+                desfoque: [k(Math.max(0.35, vida - 0.3), 0), k(vida, 6, 'suave')],
+            },
+        };
+    };
+    // Texto que se revela palavra a palavra.
+    const texto = (t, x, y, { tamanho, peso = 800, cor = TINTA, fonte = F.titulo, alinhamento = 'center', largura: lg, ...resto }) => ({
+        tipo: 'texto', texto: t, x, y, ancora: 'centro', tamanho: Math.round(tamanho), peso, cor, fonte, alinhamento,
+        largura: lg, entrelinha: 1.08, revelar: String(t).split(' ').map((_, i) => r2(0.08 + i * 0.07)), ...resto,
+    });
+    const caixaTexto = (t, maxLarg, linhas, max) => {
+        const fit = caber(t, { largura: maxLarg, linhas, max: max * base, min: 22 * base, fonte: F.titulo });
+        const chars = String(t).length / Math.max(1, fit.linhas);
+        const larg = Math.min(maxLarg, chars * fit.tamanho * 0.56);
+        return { ...fit, larg, alt: fit.linhas * fit.tamanho * 1.1 };
+    };
+
+    const CX = W / 2, CY = H / 2;
+    let lado = 0;
+    partes.forEach((p, i) => {
+        const t0 = ini[i], t1 = fim[i];
+        const d = t1 - t0;
+        const oscila = (lado++ % 2 === 0 ? -1 : 1);
+        // O protagonista VIAJA: cada parte fica num lugar diferente da tela.
+        const ox = CX + oscila * (deitado ? 200 : 40) * base, oy = CY + (i % 3 - 1) * 60 * base;
+        const titulo = p.titulo || p.texto || '';
+        let fx, fy, fr, x = ox, y = oy;       // forma do protagonista (unidades) e onde ele fica
+        // A saída da parte vai até 0,45 s depois do fim, e a primeira peça da
+        // próxima entra em 0,2 s: as duas se cruzam no ar.
+        const add = (el, atraso) => elementos.push(peca(el, t0, t1 + 0.45, { atraso }));
+
+        // Imagem sem mídia vira título: moldura vazia é pior que nenhuma.
+        const semMidia = p.tipo === 'imagem' && !(imagens[i] || p.src);
+        switch (semMidia ? 'titulo' : p.tipo) {
+            case 'abertura': {
+                fx = fy = px(170 * base); fr = fx / 2; y = oy - 90 * base;
+                const tt = caixaTexto(titulo, W * 0.8, 2, 120);
+                add(texto(titulo, CX, y + 230 * base, { tamanho: tt.tamanho, largura: W * 0.84 }), 0.35);
+                if (p.sub) add(texto(p.sub, CX, y + 230 * base + tt.alt / 2 + 70 * base, { tamanho: 40 * base, peso: 500, fonte: F.texto, cor: misturarCor(TINTA, FUNDO, 0.3) }), 0.6);
+                break;
+            }
+            case 'numero': {
+                const r = 230 * base;
+                fx = fy = px(r * 2); fr = fx / 2;
+                const n = numeroDe(p.valor);
+                const v = String(p.valor || '');
+                add({ ...texto(v, x, y, { tamanho: Math.min(170, 900 / Math.max(2, v.length)) * base }), revelar: undefined,
+                    ...(n ? { contar: { ate: n.ate, antes: n.antes, depois: n.depois, casas: n.casas, dur: Math.min(1.4, d * 0.5) } } : {}) }, 0.2);
+                if (p.rotulo || titulo) add(texto(p.rotulo || titulo, x, y + r + 80 * base, { tamanho: 48 * base, peso: 600, fonte: F.texto }), 0.5);
+                som(t0 + 0.2, 'brilho', 0.3);
+                break;
+            }
+            case 'lista': case 'passos': case 'grafico': {
+                const itens = itensDe(p).slice(0, 6);
+                const tt = caixaTexto(titulo || ' ', W * 0.62, 1, 76);
+                fx = px(tt.larg + 120 * base); fy = px(tt.alt + 70 * base); fr = fy / 2;
+                y = CY - (itens.length > 3 ? 250 : 190) * base;
+                if (titulo) add(texto(titulo, x, y, { tamanho: tt.tamanho, largura: tt.larg + 40 }), 0.2);
+                const porLinha = deitado ? Math.min(3, itens.length) : 1;
+                const cw = deitado ? Math.min(520, (W * 0.84) / porLinha - 30) * 1 : W * 0.8;
+                const ch = 150 * base;
+                itens.forEach((it, j) => {
+                    const col = j % porLinha, lin = Math.floor(j / porLinha);
+                    const n = Math.min(porLinha, itens.length - lin * porLinha);
+                    const cx = CX + (col - (n - 1) / 2) * (cw + 30), cy = y + 190 * base + lin * (ch + 26 * base) + ch / 2;
+                    const fit = caber(it, { largura: cw - 70, linhas: 2, max: 40 * base, min: 20 * base, fonte: F.texto });
+                    const at = r2(0.55 + j * Math.min(0.22, (d - 1.2) / Math.max(1, itens.length)));
+                    add({
+                        tipo: 'grupo', x: cx, y: cy, largura: cw, altura: ch, ancora: 'centro', raio: 30,
+                        fundo: misturarCor(FUNDO, '#ffffff', 0.08), contorno: `1px solid ${misturarCor(FUNDO, '#ffffff', 0.18)}`,
+                        sombra: '0 24px 50px rgba(0,0,0,0.35)',
+                        // Sai de dentro do protagonista e gira no eixo Y até o lugar.
+                        anima: { x: [k(0, x - cx), k(0.55, 0, 'saida')], y: [k(0, y - cy), k(0.55, 0, 'saida')], rotacaoY: [k(0, (col - 1) * 55 || 40), k(0.6, 0, 'saida')],
+                                 escala: [k(0, 0.4), k(0.55, 1, 'saida')] },
+                        elementos: [
+                            ...(p.tipo === 'passos' ? [{ tipo: 'texto', texto: String(j + 1), x: 46, y: ch / 2, ancora: 'centro', tamanho: 52 * base, peso: 800, fonte: F.titulo, cor: DEST }] : []),
+                            { tipo: 'texto', texto: it, x: p.tipo === 'passos' ? 88 : cw / 2, y: ch / 2, ancora: p.tipo === 'passos' ? 'centro-y' : 'centro',
+                              largura: cw - (p.tipo === 'passos' ? 120 : 70), tamanho: fit.tamanho, peso: 600, fonte: F.texto, cor: TINTA,
+                              alinhamento: p.tipo === 'passos' ? 'left' : 'center', entrelinha: 1.12 },
+                        ],
+                    }, at);
+                    som(t0 + at, 'bolha', 0.22);
+                });
+                break;
+            }
+            case 'contraste': {
+                const a = p.nao || '', b = p.sim || titulo;
+                const ta = caixaTexto(a || ' ', W * 0.7, 2, 90), tb = caixaTexto(b || ' ', W * 0.7, 2, 96);
+                fx = px(Math.max(ta.larg, tb.larg) + 150 * base); fy = px(Math.max(ta.alt, tb.alt) + 80 * base); fr = Math.min(fy / 2, px(60));
+                const meio = r2(d * 0.45);
+                if (a) elementos.push(peca(texto(a, x, y, { tamanho: ta.tamanho, riscado: true, opacidade: 0.75, largura: ta.larg + 60 }), t0, t0 + meio + 0.3, { atraso: 0.2 }));
+                if (b) elementos.push(peca(texto(b, x, y, { tamanho: tb.tamanho, largura: tb.larg + 60 }), t0 + meio, t1 + 0.45, { atraso: 0.1 }));
+                som(t0 + meio, 'sopro', 0.25);
+                break;
+            }
+            case 'citacao': {
+                const tt = caixaTexto(`“${titulo}”`, W * 0.66, 3, 70);
+                fx = px(tt.larg + 180 * base); fy = px(tt.alt + 150 * base); fr = px(56);
+                add(texto(`“${titulo}”`, x, y - (p.autor ? 22 : 0), { tamanho: tt.tamanho, italico: true, peso: 600, largura: tt.larg + 60 }), 0.2);
+                if (p.autor) add(texto(`— ${p.autor}`, x, y + tt.alt / 2 + 20 * base, { tamanho: 34 * base, peso: 500, fonte: F.texto, cor: misturarCor(TINTA, DEST, 0.4) }), 0.7);
+                break;
+            }
+            case 'imagem': {
+                const iw = deitado ? W * 0.56 : W * 0.84, ih = iw * 9 / 16;
+                fx = px(iw); fy = px(ih); fr = px(40);
+                y = oy - (titulo ? 40 * base : 0);
+                const m = imagens[i] || (p.src ? { src: p.src, tipo: 'imagem' } : null);
+                if (m) {
+                    add({ tipo: 'grupo', x, y, largura: iw, altura: ih, ancora: 'centro', raio: 40, recorte: true,
+                        elementos: [{ tipo: m.tipo === 'video' ? 'video' : 'imagem', src: m.src, x: 0, y: 0, largura: '100%', altura: '100%', ajuste: 'cover',
+                            ...(m.tipo === 'video' ? { volume: 0 } : {}), anima: { escala: [k(0, 1.12), k(d + 0.4, 1.0, 'suave')] } }] }, 0.2);
+                }
+                if (titulo) add(texto(titulo, x, y + ih / 2 + 70 * base, { tamanho: 50 * base, peso: 700, largura: iw }), 0.6);
+                break;
+            }
+            case 'cta': {
+                const tt = caixaTexto(titulo || ' ', W * 0.6, 1, 64);
+                fx = px(tt.larg + 160 * base); fy = px(tt.alt + 70 * base); fr = fy / 2;
+                y = oy + 40 * base;
+                if (marca.logo) add({ tipo: 'imagem', src: marca.logo, x, y: y - 230 * base, largura: 140 * base, altura: 140 * base, ancora: 'centro', ajuste: 'contain' }, 0.2);
+                if (titulo) add(texto(titulo, x, y, { tamanho: tt.tamanho, largura: tt.larg + 40 }), 0.2);
+                if (p.link) add(texto(p.link, x, y + fy * U / 2 + 60 * base, { tamanho: 36 * base, peso: 600, fonte: F.texto, cor: misturarCor(TINTA, DEST, 0.35) }), 0.6);
+                // O cursor entra girando e clica no botão.
+                const clique = r2(Math.min(d - 0.4, 1.5));
+                elementos.push({
+                    tipo: 'forma', forma: 'traco', caminho: 'M 10 4 L 10 84 L 31 64 L 45 94 L 58 88 L 44 59 L 74 59 Z', x: 0, y: 0, largura: 56 * base, altura: 56 * base,
+                    cor: '#ffffff', linha: '#14151c', espessura: 4, sombra: '0 10px 12px rgba(0,0,0,0.4)', origem: '10% 4%', de: r2(t0 + 0.4), ate: r2(t1),
+                    anima: {
+                        x: [k(0, W * 0.92), k(clique - 0.4, x + fx * U * 0.22, 'saida')], y: [k(0, H * 0.95), k(clique - 0.4, y + 6, 'saida')],
+                        z: [k(0, 300), k(clique - 0.4, 40, 'saida')], rotacao: [k(0, 150), k(clique - 0.4, 0, 'saida')],
+                        escala: [k(clique - 0.45, 1), k(clique - 0.4 + 0.08, 0.84, 'suave'), k(clique - 0.4 + 0.26, 1, 'suave')],
+                        opacidade: [k(0, 0), k(0.2, 1)],
+                    },
+                });
+                som(t0 + clique, 'clique', 0.55);
+                break;
+            }
+            default: {   // titulo e o que mais vier
+                const tt = caixaTexto(titulo || ' ', W * 0.7, 2, 104);
+                fx = px(tt.larg + 150 * base); fy = px(tt.alt + 80 * base); fr = Math.min(fy / 2, px(90));
+                add(texto(titulo, x, y, { tamanho: tt.tamanho, largura: tt.larg + 60 }), 0.2);
+                if (p.sub) add(texto(p.sub, x, y + fy * U / 2 + 58 * base, { tamanho: 38 * base, peso: 500, fonte: F.texto, cor: misturarCor(TINTA, FUNDO, 0.3) }), 0.55);
+            }
+        }
+
+        // O protagonista: deforma no começo da parte, anda até o lugar dela.
+        const alvo = forma(Math.min(96, fx), Math.min(96, fy), fr);
+        const tIni = r2(Math.max(0, t0 - 0.05)), tFim = r2(t0 + 0.55);
+        if (i === 0) trilhaForma.push(k(0, alvo)); else trilhaForma.push(k(tIni, trilhaForma[trilhaForma.length - 1].v), k(tFim, alvo, 'suave'));
+        if (i === 0) { trilhaX.push(k(0, x)); trilhaY.push(k(0, y)); } else { trilhaX.push(k(tIni, trilhaX[trilhaX.length - 1].v), k(tFim, x, 'suave')); trilhaY.push(k(tIni, trilhaY[trilhaY.length - 1].v), k(tFim, y, 'suave')); }
+        trilhaRot.push(k(r2(t0 + d * 0.5), oscila * 3, 'suave'));
+        trilhaEsc.push(k(tIni, 1), k(r2(t0 + 0.3), 1.04, 'suave'), k(tFim, 1, 'suave'));
+        if (i > 0) { som(t0, 'sopro', 0.28); som(t0 + 0.05, 'subida', 0.14); }
+    });
+
+    // ── o protagonista, com espessura ────────────────────────────────────
+    const protagonista = (fundo, z, extra = {}) => ({
+        tipo: 'forma', forma: 'traco', caminho: trilhaForma[0].v, x: 0, y: 0, largura: CAIXA, altura: CAIXA, ancora: 'centro', fundo, ...extra,
+        anima: {
+            caminho: trilhaForma, x: trilhaX, y: trilhaY, rotacaoY: [k(0, 40), k(0.9, 0, 'saida'), ...trilhaRot.filter((q) => q.t > 0.9)],
+            escala: [k(0, 0.2), k(0.8, 1, 'saida'), ...trilhaEsc.filter((q) => q.t > 0.8)],
+            z: [k(0, -1400 + z), k(0.8, z, 'saida')],
+        },
+    });
+    const corpo = [protagonista(LADO, -18), protagonista(LUZ, 0, { sombra: '0 30px 40px rgba(0,0,0,0.45)' })];
+
+    // ── o espaço: partículas em três profundidades ──────────────────────
+    const particulas = [];
+    for (let i = 0; i < 40; i++) {
+        const z = [-1600, -900, -400][i % 3];
+        const s = [6, 5, 4][i % 3];
+        particulas.push({ tipo: 'forma', forma: 'circulo', x: -900 + (i * 541) % (W + 1800), y: -600 + (i * 313) % (H + 1200), largura: s, altura: s,
+            cor: i % 4 === 0 ? DEST : '#ffffff', opacidade: 0.18 + (i % 4) * 0.1,
+            anima: { z: [k(0, z)], y: [k(0, 0), k(DUR, -40 - (i % 3) * 30, 'linear')] } });
+    }
+
+    // ── a câmera orbita: um giro por parte, e nunca para ────────────────
+    const cam = { rotacaoY: [k(0, -14)], rotacaoX: [k(0, 7)], z: [k(0, -120)] };
+    partes.forEach((_, i) => {
+        const meio = r2((ini[i] + fim[i]) / 2);
+        cam.rotacaoY.push(k(meio, i % 2 ? 7 : -7, 'suave'));
+        cam.rotacaoX.push(k(meio, i % 2 ? -3 : 3, 'suave'));
+        cam.z.push(k(meio, 60, 'suave'), k(r2(fim[i]), 0, 'suave'));
+    });
+    cam.rotacaoY.push(k(DUR, 0, 'suave'));
+    cam.rotacaoX.push(k(DUR, 0, 'suave'));
+
+    // ── o som: a música abaixa quando a voz fala ─────────────────────────
+    const volumes = volumesDaTrilha(temVoz ? tempos : [], DUR);
+    som(0.05, 'sopro', 0.3);
+    som(DUR - 1.2, 'brilho', 0.35);
+
+    const plano = {
+        formato: { largura: W, altura: H, fps: FPS },
+        fundoGeral: FUNDO,
+        cenas: [{
+            duracao: DUR,
+            perspectiva: 1300,
+            fundo: { tipo: 'gradiente', radial: true, centro: '38% 42%', cores: [misturarCor(FUNDO, DEST, 0.18), FUNDO] },
+            camera: cam,
+            elementos: [...particulas, ...corpo, ...elementos],
+        }],
+        audio: {
+            ...(narracao ? { narracao } : {}),
+            ...(trilha ? { trilha: { src: trilha, volumes, loop: true } } : {}),
+            efeitos,
+        },
+    };
+    return { ok: true, plano, resumo: { cenas: 1, segundos: DUR, partes: partes.length, fps: FPS } };
+}
+
+module.exports = { montarMotion, forma, CAIXA };

package/lib/estudio/plano.js

@@ -47,11 +47,14 @@
 
 const fs = require('fs');
 const path = require('path');
+const morfar = require('./morfar.js');
+const kit = require('./kit.js');
 
-const TIPOS = new Set(['texto', 'forma', 'imagem', 'video', 'icone', 'legenda', 'componente']);
+// "kit": uma peça pronta do kit de motion (kit.js), pelo nome — ver kit/*.jsx.
+const TIPOS = new Set(['texto', 'forma', 'imagem', 'video', 'icone', 'legenda', 'componente', 'grupo', 'kit']);
 const FORMAS = new Set(['retangulo', 'circulo', 'linha', 'poligono', 'traco']);
 const AJUSTES = new Set(['cover', 'contain', 'preencher']);
-const TRANSICOES = new Set(['corte', 'esmaecer', 'deslizar', 'zoom', 'giro', 'mascara', 'morph', 'chicote', 'soco', 'flash']);
+const TRANSICOES = new Set(['corte', 'esmaecer', 'deslizar', 'zoom', 'giro', 'mascara', 'morph', 'chicote', 'soco', 'flash', 'liquido']);
 
 /* As propriedades que a animação por quadro-chave alcança. Cada uma é um
    número no tempo; a curva entre dois quadros é a suavização declarada.
@@ -61,7 +64,11 @@ const ANIMAVEIS = new Set([
     'opacidade', 'x', 'y', 'z', 'escala', 'escalaX', 'escalaY',
     'rotacao', 'rotacaoX', 'rotacaoY', 'desfoque', 'brilho', 'saturacao',
     'corte', 'raio', 'espacamento',
+    // Estes dois não são número: "cor" é "#rrggbb" e "caminho" é o "d" de um
+    // SVG. É o que deixa a bolinha virar foguete no mesmo plano (morfar.js).
+    'cor', 'caminho',
 ]);
+const TEXTUAIS = new Set(['cor', 'caminho']);
 
 /* A CÂMERA tem vocabulário próprio, e é de propósito.
  *
@@ -70,9 +77,12 @@ const ANIMAVEIS = new Set([
  * agente escrever zoom de câmera dentro de um elemento — o que dá quase o
  * mesmo resultado na cena de uma coisa só, e nenhum resultado na cena com
  * cinco. Vocabulários separados tornam o erro impossível em vez de sutil. */
-const ANIMAVEIS_CAMERA = new Set(['zoom', 'x', 'y', 'rotacao']);
+// rotacaoX/rotacaoY/z: a câmera gira em volta do mundo e avança nele (precisa de `perspectiva` na cena).
+const ANIMAVEIS_CAMERA = new Set(['zoom', 'x', 'y', 'rotacao', 'rotacaoX', 'rotacaoY', 'z']);
 
-const SUAVIZACOES = new Set(['linear', 'suave', 'entrada', 'saida', 'elastico', 'salto']);
+/* editorial (ataque rápido, freio forte), camera (bezier longa), arrasto (a
+   mão que desenha) e acelera (a câmera antes do corte) vêm do guia VOX. */
+const SUAVIZACOES = new Set(['linear', 'suave', 'entrada', 'saida', 'elastico', 'salto', 'editorial', 'camera', 'arrasto', 'acelera']);
 
 const COR = /^(#[0-9a-f]{3,8}|rgba?\([^)]+\)|hsla?\([^)]+\)|transparent|currentColor)$/i;
 
@@ -92,7 +102,7 @@ function medida(v) {
  * maior faz o elemento voltar no tempo, e o que se vê é um tremor que
  * ninguém consegue explicar olhando o resultado.
  */
-function conferirTrilha(caminho, trilha, problemas) {
+function conferirTrilha(caminho, trilha, problemas, prop) {
     if (!Array.isArray(trilha)) {
         problemas.push(erro(caminho, 'a animação de uma propriedade é uma lista de quadros-chave'));
         return;
@@ -104,7 +114,11 @@ function conferirTrilha(caminho, trilha, problemas) {
         if (typeof q.t !== 'number' || !Number.isFinite(q.t) || q.t < 0) {
             problemas.push(erro(onde, 't é o tempo em segundos dentro da cena, a partir de 0'));
         }
-        if (typeof q.v !== 'number' || !Number.isFinite(q.v)) {
+        if (prop === 'cor') {
+            if (!morfar.ehCor(q.v)) problemas.push(erro(onde, 'v da cor é "#rrggbb" (ou "#rgb")'));
+        } else if (prop === 'caminho') {
+            try { morfar.pontos(q.v, 16); } catch (e) { problemas.push(erro(onde, `caminho inválido: ${e.message}`)); }
+        } else if (typeof q.v !== 'number' || !Number.isFinite(q.v)) {
             problemas.push(erro(onde, 'v é o valor numérico da propriedade nesse instante'));
         }
         if (q.e && !SUAVIZACOES.has(q.e)) {
@@ -126,7 +140,7 @@ function conferirAnima(caminho, anima, problemas, permitidas = ANIMAVEIS) {
                 `não dá para animar "${prop}" aqui. Dá para: ${[...permitidas].join(', ')}`));
             continue;
         }
-        conferirTrilha(`${caminho}.${prop}`, trilha, problemas);
+        conferirTrilha(`${caminho}.${prop}`, trilha, problemas, prop);
     }
 }
 
@@ -193,7 +207,19 @@ function conferirElemento(caminho, el, pasta, problemas, duracao) {
             if (el.forma && !FORMAS.has(el.forma)) {
                 problemas.push(erro(`${caminho}.forma`, `forma "${el.forma}" não existe — ${[...FORMAS].join(', ')}`));
             }
+            if (el.forma === 'traco') {
+                const d = el.caminho || (el.anima && el.anima.caminho && el.anima.caminho[0] && el.anima.caminho[0].v);
+                if (!d) problemas.push(erro(`${caminho}.caminho`, 'o traço precisa de "caminho": o "d" de um SVG, na caixa 0 0 100 100'));
+                else { try { morfar.pontos(d, 16); } catch (e) { problemas.push(erro(`${caminho}.caminho`, e.message)); } }
+            }
+            break;
+        case 'grupo': {
+            // Os filhos vivem no tempo do grupo: o 0 deles é o "de" do grupo.
+            if (!Array.isArray(el.elementos)) { problemas.push(erro(`${caminho}.elementos`, 'o grupo precisa da lista de elementos dele')); break; }
+            const vida = el.ate != null ? Number(el.ate) - Number(el.de || 0) : duracao - Number(el.de || 0);
+            el.elementos.forEach((f, k) => conferirElemento(`${caminho}.elementos[${k}]`, f, pasta, problemas, vida));
             break;
+        }
         case 'imagem':
         case 'video':
             conferirArquivo(`${caminho}.src`, el.src, pasta, problemas);
@@ -218,6 +244,11 @@ function conferirElemento(caminho, el, pasta, problemas, duracao) {
             // A válvula de escape: um arquivo React escrito pela própria IA.
             conferirArquivo(`${caminho}.src`, el.src, pasta, problemas);
             break;
+        case 'kit':
+            for (const oque of kit.conferirPeca(el)) problemas.push(erro(`${caminho}.peca`, oque));
+            // A logo de uma peça é arquivo da pasta, como a imagem.
+            if (el.logo) conferirArquivo(`${caminho}.logo`, el.logo, pasta, problemas);
+            break;
     }
 }
 
@@ -276,6 +307,22 @@ function conferir(plano, { pasta = null } = {}) {
         conferirFundo(`${onde}.fundo`, cena.fundo, pasta, problemas);
         conferirAnima(`${onde}.camera`, cena.camera, problemas, ANIMAVEIS_CAMERA);
 
+        /* As CAMADAS de profundidade: [{p, desfoque, sujeito}]. "p" é a
+           profundidade (0,12 longe … 1,25 perto), e o elemento diz a dele por
+           índice. Índice fora da lista põe o elemento em lugar nenhum. */
+        const nCamadas = Array.isArray(cena.camadas) ? cena.camadas.length : 0;
+        if (cena.camadas != null) {
+            if (!nCamadas) problemas.push(erro(`${onde}.camadas`, 'camadas é uma lista de {p, desfoque, sujeito}'));
+            else cena.camadas.forEach((c, k) => {
+                if (!c || typeof c.p !== 'number' || !(c.p > 0)) problemas.push(erro(`${onde}.camadas[${k}].p`, 'p é a profundidade, um número maior que 0'));
+            });
+        }
+        for (const [k, el] of (Array.isArray(cena.elementos) ? cena.elementos : []).entries()) {
+            if (el && el.camada != null && !(Number.isInteger(el.camada) && el.camada >= 0 && el.camada < nCamadas)) {
+                problemas.push(erro(`${onde}.elementos[${k}].camada`, nCamadas ? `camada vai de 0 a ${nCamadas - 1}` : 'a cena não declara "camadas"'));
+            }
+        }
+
         if (cena.transicao) {
             const t = cena.transicao.tipo || cena.transicao;
             if (!TRANSICOES.has(t)) {