primocode 9.9.0 → 9.10.0

package/README.md

@@ -1,4 +1,4 @@
-# PrimoCode v9.9.0
+# PrimoCode v9.10.0
 
 Agente de engenharia brasileiro para o terminal, no estilo Claude Code.
 Cria arquivos de verdade, roda comandos, **controla o navegador e o desktop** —
@@ -9,7 +9,7 @@ OpenRouter, e cada apelido (`top`/`main`/`fast`) é uma **corrente**: se um mode
 está no limite de pedidos, o próximo atende. Você não vê o erro, e não paga nada.
 
 ```
- ▐▛███▜▌   Primo Code v9.9.0
+ ▐▛███▜▌   Primo Code v9.10.0
 ▝▜█████▛▘  Bem-vindo de volta, Joel
   ▘▘ ▝▝    ~/primocode  · /dir <pasta> muda
 ```

package/lib/estudio/ende.js

@@ -38,6 +38,8 @@ const CLIMAS = {
     viral: ['upbeat', 'beat', 'energetic', 'pop', 'electronic'],
     impacto: ['epic', 'drums', 'trailer', 'energetic', 'beat'],
     neutro: ['background', 'corporate', 'chilled', 'calm', 'ambient'],
+    // Produto e tecnologia: pulso de sintetizador, limpo, com impulso.
+    tecnologia: ['arpeggiator', 'analog synths', 'clockwork', 'rhythm', 'commercial', 'clean mix', 'crisp'],
 };
 
 const limpar = (s) => String(s || '').replace(/<[^>]*>/g, '').replace(/&amp;/g, '&').replace(/&#0?39;/g, "'").replace(/\s+/g, ' ').trim();

package/lib/estudio/index.js

@@ -45,6 +45,9 @@ const composicao = require('./composicao.js');
 const acervoSite = require('./acervo-site.js');
 const impacto = require('./impacto.js');
 const cinema = require('./cinema.js');
+const motion = require('./motion.js');
+const sonsLeves = require('./sons-leves.js');
+const ende = require('./ende.js');
 
 const PY = path.join(__dirname, '..', '..', 'studio');
 
@@ -242,6 +245,8 @@ async function garantirAcervo(p) {
 /* O ROTEIRISTA do servidor: quando o modelo não manda um roteiro que preste
    (nenhum, ou texto corrido), o pedido e os fatos da marca viram o roteiro
    numa chamada só, com uma tarefa só. */
+const PEDE_MOTION = /\bmotion\b|anima[çc][ãa]o|animad[oa]/i;
+
 async function roteiroDoServidor(p, args) {
     const cfg = require('../config').loadConfig();
     const api = require('../api');
@@ -254,7 +259,8 @@ async function roteiroDoServidor(p, args) {
         fotos: (acervo.fotos || []).length ? `${acervo.fotos.length} fotos reais` : '',
         site: acervo.site ? new URL(acervo.site).hostname.replace(/^www\./, '') : '',
         rascunho: typeof args.roteiro === 'string' ? args.roteiro : '',
-        estilo: args.estilo || (/an[uú]nci|reels?|divulg|promo|lan[çc]a|vend|campanha|convite|inscri/i.test(pedido) ? 'impacto' : undefined),
+        // Pedido de motion nunca vira impacto, nem sendo anúncio.
+        estilo: args.estilo || (!PEDE_MOTION.test(pedido) && /an[uú]nci|reels?|divulg|promo|lan[çc]a|vend|campanha|convite|inscri/i.test(pedido) ? 'impacto' : undefined),
     }, cfg.token);
     if (!r || !r.ok) return { ok: false, error: (r && r.erro) || 'o roteirista não respondeu.' };
     return { ok: true, roteiro: { ...r.roteiro, marca: (args.roteiro && args.roteiro.marca) || p.marca || undefined } };
@@ -916,11 +922,20 @@ async function prepararRoteiro(p, args) {
         if (roteiro.marca.logo && !existe(roteiro.marca.logo)) roteiro.marca.logo = (p.marca && existe(p.marca.logo)) ? p.marca.logo : undefined;
     } else if (p.marca) roteiro.marca = p.marca;
     const partes = roteiro.partes || [];
-    /* O ESTILO: "impacto" (anúncio, corte a cada batida) ou "limpo" (uma cena
-       por parte). Pedido de anúncio, reels, divulgação ou venda já vem em
-       impacto — é o que se espera de uma peça dessas em 2026. */
-    const estilo = args.estilo || roteiro.estilo
-        || (/an[uú]nci|reels?|divulg|promo|lan[çc]a|vend|campanha|convite|inscri/i.test(`${p.pedido || ''} ${args.pedido || ''}`) ? 'impacto' : 'limpo');
+    /* O ESTILO. O padrão é MOTION (motion.js): um plano contínuo em 3D, com
+       um protagonista que se deforma de parte em parte — "isso sim é motion"
+       (Joel, 28/09). "limpo" era o nome antigo do padrão e vira motion
+       também. Anúncio, reels e venda vão para o "impacto" (corte a cada
+       batida), a menos que o pedido diga motion ou animação. A composição
+       antiga, uma cena por parte, só com estilo: "composicao". */
+    const pedidoTxt = `${p.pedido || ''} ${args.pedido || ''}`;
+    // O estilo que o AGENTE pediu vale; o que o roteirista pôs no roteiro não
+    // passa por cima de um pedido de motion.
+    const pedido0 = args.estilo || (PEDE_MOTION.test(pedidoTxt) ? null : roteiro.estilo);
+    const estilo = pedido0 === 'limpo' ? 'motion' : (pedido0
+        || (PEDE_MOTION.test(pedidoTxt) ? 'motion'
+            : /an[uú]nci|reels?|divulg|promo|lan[çc]a|vend|campanha|convite|inscri/i.test(pedidoTxt) ? 'impacto' : 'motion'));
+    const ehMotion = estilo === 'motion';
     const modo = (args.modo || roteiro.modo || (p.formato === 'slides' || p.formato === 'arte' ? 'slides' : 'video'));
     const [largura, altura] = PROPORCOES[roteiro.proporcao || args.proporcao] || (modo === 'slides' ? PROPORCOES['16:9'] : PROPORCOES['16:9']);
 
@@ -1131,8 +1146,17 @@ async function prepararRoteiro(p, args) {
         tempos = v.partes;
         narracao = path.relative(p.pasta, mp3).replace(/\\/g, '/');
         projeto.anotar(p.id, 'narracao', `${v.segundos}s em ${partes.length} partes, voz ${v.voz}`);
-        sons = await edicao.prepararSons(p.pasta, video);
-        try {
+        // O motion usa os efeitos leves; os estilos de corte, os cheios.
+        sons = ehMotion ? sonsLeves.preparar(p.pasta) : await edicao.prepararSons(p.pasta, video);
+        // A trilha do motion: ende.app (CC BY 4.0, sem Content ID), clima tecnologia.
+        if (ehMotion) {
+            try {
+                const segundos = tempos.length ? tempos[tempos.length - 1].ate + 2 : 20;
+                const m = await ende.provedor({ pasta: path.join(p.pasta, 'midia') }).gerar({ clima: roteiro.clima || 'tecnologia', segundos });
+                if (m) { trilha = path.relative(p.pasta, m.src).replace(/\\/g, '/'); projeto.anotar(p.id, 'trilha', m.credito); }
+            } catch { /* cai na busca de sempre */ }
+        }
+        if (!trilha) try {
             const b = await assets.procurarMusica(roteiro.musica || args.trilha || (estilo === 'impacto' ? 'epic energetic' : 'inspiring corporate'), { quantas: 6, duracaoMin: 45 });
             for (const item of (b.ok ? b.sons : [])) {
                 const d = await assets.baixar(item, { pasta: p.pasta, nome: 'trilha' });
@@ -1156,6 +1180,11 @@ async function prepararRoteiro(p, args) {
         if (r.ok) projeto.anotar(p.id, 'plano', `estilo impacto: ${r.resumo.cenas} batidas`);
         return r;
     }
+    if (ehMotion && modo === 'video') {
+        const r = motion.montarMotion({ roteiro, largura, altura, tempos, narracao, sons, trilha, imagens });
+        if (r.ok) projeto.anotar(p.id, 'plano', `estilo motion: ${r.resumo.segundos}s contínuos, ${r.resumo.partes} partes, ${r.resumo.fps} fps`);
+        return r;
+    }
     return composicao.comporRoteiro({ roteiro, modo, largura, altura, tempos, narracao, sons, trilha, imagens, iconesOk, fundos });
 }
 
@@ -1435,5 +1464,5 @@ async function ferramentaSite(args) {
 module.exports = {
     ferramentaProjeto, ferramentaPlano, ferramentaMidia, ferramentaNarrar,
     ferramentaVideo, ferramentaRender, ferramentaSite,
-    projeto, plano, remotion, assets, video, identidade, slides, python, rodarPython, alinharPartes,
+    projeto, plano, remotion, assets, video, identidade, slides, python, rodarPython, alinharPartes, prepararRoteiro,
 };

package/lib/estudio/morfar.js

@@ -0,0 +1,191 @@
+/**
+ * morfar.js — uma forma que vira outra, sem corte.
+ *
+ *   "Uma bolinha viaja, aparece um fogo atrás, ela vai se deformando e se
+ *    transforma no foguete." — Joel, sobre o que separa motion de slide
+ *    (28/09/2026)
+ *
+ * O "morph" antigo era uma transição entre cenas (esmaece e desfoca). Isto é
+ * a deformação DE VERDADE: a `forma: "traco"` tem um `caminho` (o `d` de um
+ * SVG), e o `caminho` anima por quadro-chave como qualquer número. Entre dois
+ * caminhos, cada contorno é reamostrado no mesmo número de pontos, alinhado
+ * (mesmo sentido, mesmo ponto de partida) e interpolado ponto a ponto.
+ *
+ * O alinhamento é o que faz a bolinha "esticar" em foguete em vez de girar e
+ * se embolar no meio: sem ele, o ponto 0 de uma forma vai para o outro lado da
+ * outra.
+ *
+ * Aceita M, L, H, V, C, S, Q, T e Z (maiúsculo e minúsculo). Arco (A) não:
+ * escreva a curva com C. Só o primeiro contorno do caminho conta.
+ *
+ * Puro e sem dependência. O MESMO código vai para o projeto Remotion
+ * (fonteEsm), então o teste do Node prova o que o render desenha.
+ */
+
+'use strict';
+
+// ── embutido: daqui até o fim do bloco vai para src/morfar.js do Remotion ──
+const PONTOS_PADRAO = 120;
+const PASSOS_CURVA = 24;
+const _memo = new Map();
+
+function lerComandos(d) {
+    const partes = String(d || '').match(/[a-df-z]|-?(?:\d+\.?\d*|\.\d+)(?:e-?\d+)?/gi) || [];
+    const cmds = [];
+    let atual = null;
+    for (const p of partes) {
+        if (/[a-z]/i.test(p) && !/^e/i.test(p)) {
+            if (/a/i.test(p)) throw new Error('arco (A) não é aceito no caminho: desenhe a curva com C');
+            atual = { c: p, n: [] };
+            cmds.push(atual);
+        } else if (atual) atual.n.push(Number(p));
+    }
+    return cmds;
+}
+
+/** O primeiro contorno do caminho, como uma linha de pontos. */
+function contorno(d) {
+    const cmds = lerComandos(d);
+    const pts = [];
+    let x = 0, y = 0, x0 = 0, y0 = 0, cx = null, cy = null, qx = null, qy = null;
+    const curvaC = (x1, y1, x2, y2, x3, y3) => {
+        for (let i = 1; i <= PASSOS_CURVA; i++) {
+            const t = i / PASSOS_CURVA, u = 1 - t;
+            pts.push([u * u * u * x + 3 * u * u * t * x1 + 3 * u * t * t * x2 + t * t * t * x3,
+                u * u * u * y + 3 * u * u * t * y1 + 3 * u * t * t * y2 + t * t * t * y3]);
+        }
+        cx = x2; cy = y2; x = x3; y = y3;
+    };
+    const curvaQ = (x1, y1, x2, y2) => {
+        for (let i = 1; i <= PASSOS_CURVA; i++) {
+            const t = i / PASSOS_CURVA, u = 1 - t;
+            pts.push([u * u * x + 2 * u * t * x1 + t * t * x2, u * u * y + 2 * u * t * y1 + t * t * y2]);
+        }
+        qx = x1; qy = y1; x = x2; y = y2;
+    };
+    let fechou = false;
+    for (const { c, n } of cmds) {
+        if (fechou) break;
+        const rel = c === c.toLowerCase();
+        const C = c.toUpperCase();
+        const ox = () => (rel ? x : 0), oy = () => (rel ? y : 0);
+        if (C !== 'C' && C !== 'S') { cx = null; cy = null; }
+        if (C !== 'Q' && C !== 'T') { qx = null; qy = null; }
+        if (C === 'Z') { fechou = pts.length > 0; x = x0; y = y0; continue; }
+        const passo = { M: 2, L: 2, H: 1, V: 1, C: 6, S: 4, Q: 4, T: 2 }[C];
+        if (!passo) continue;
+        for (let i = 0; i + passo <= n.length; i += passo) {
+            const a = n.slice(i, i + passo);
+            if (C === 'M') {
+                if (i === 0 && pts.length) { fechou = true; break; }
+                x = a[0] + ox(); y = a[1] + oy();
+                if (i === 0) { x0 = x; y0 = y; }
+                pts.push([x, y]);
+            } else if (C === 'L') { x = a[0] + ox(); y = a[1] + oy(); pts.push([x, y]); }
+            else if (C === 'H') { x = a[0] + (rel ? x : 0); pts.push([x, y]); }
+            else if (C === 'V') { y = a[0] + (rel ? y : 0); pts.push([x, y]); }
+            else if (C === 'C') { const [bx, by] = [ox(), oy()]; curvaC(a[0] + bx, a[1] + by, a[2] + bx, a[3] + by, a[4] + bx, a[5] + by); }
+            else if (C === 'S') {
+                const [bx, by] = [ox(), oy()];
+                const x1 = cx == null ? x : 2 * x - cx, y1 = cy == null ? y : 2 * y - cy;
+                curvaC(x1, y1, a[0] + bx, a[1] + by, a[2] + bx, a[3] + by);
+            } else if (C === 'Q') { const [bx, by] = [ox(), oy()]; curvaQ(a[0] + bx, a[1] + by, a[2] + bx, a[3] + by); }
+            else if (C === 'T') {
+                const x1 = qx == null ? x : 2 * x - qx, y1 = qy == null ? y : 2 * y - qy;
+                curvaQ(x1, y1, a[0] + ox(), a[1] + oy());
+            }
+        }
+    }
+    if (pts.length < 2) throw new Error('o caminho precisa de pelo menos dois pontos');
+    return pts;
+}
+
+/** `n` pontos igualmente espaçados ao longo do contorno fechado. */
+function reamostrar(pts, n) {
+    const fechado = [...pts, pts[0]];
+    const acum = [0];
+    for (let i = 1; i < fechado.length; i++) {
+        acum.push(acum[i - 1] + Math.hypot(fechado[i][0] - fechado[i - 1][0], fechado[i][1] - fechado[i - 1][1]));
+    }
+    const total = acum[acum.length - 1] || 1;
+    const saida = [];
+    let j = 0;
+    for (let k = 0; k < n; k++) {
+        const alvo = (k / n) * total;
+        while (j < acum.length - 2 && acum[j + 1] < alvo) j++;
+        const seg = acum[j + 1] - acum[j] || 1;
+        const t = (alvo - acum[j]) / seg;
+        saida.push([fechado[j][0] + (fechado[j + 1][0] - fechado[j][0]) * t, fechado[j][1] + (fechado[j + 1][1] - fechado[j][1]) * t]);
+    }
+    return saida;
+}
+
+function area(pts) {
+    let s = 0;
+    for (let i = 0; i < pts.length; i++) { const a = pts[i], b = pts[(i + 1) % pts.length]; s += a[0] * b[1] - b[0] * a[1]; }
+    return s / 2;
+}
+
+function pontos(d, n = PONTOS_PADRAO) {
+    const chave = n + '|' + d;
+    if (!_memo.has(chave)) _memo.set(chave, reamostrar(contorno(d), n));
+    return _memo.get(chave);
+}
+
+/** Os dois contornos no mesmo sentido e com o ponto de partida que menos anda. */
+function alinhados(dA, dB, n = PONTOS_PADRAO) {
+    const chave = 'al|' + n + '|' + dA + '|' + dB;
+    if (_memo.has(chave)) return _memo.get(chave);
+    const a = pontos(dA, n);
+    let b = pontos(dB, n);
+    if (Math.sign(area(a)) !== Math.sign(area(b))) b = [...b].reverse();
+    let melhor = 0, menor = Infinity;
+    for (let s = 0; s < n; s++) {
+        let soma = 0;
+        for (let i = 0; i < n && soma < menor; i++) {
+            const p = a[i], q = b[(i + s) % n];
+            soma += (p[0] - q[0]) ** 2 + (p[1] - q[1]) ** 2;
+        }
+        if (soma < menor) { menor = soma; melhor = s; }
+    }
+    const r = { a, b: b.map((_, i) => b[(i + melhor) % n]) };
+    _memo.set(chave, r);
+    return r;
+}
+
+const f2 = (v) => String(Math.round(v * 100) / 100);
+function caminhoDe(pts) {
+    return 'M ' + pts.map(([x, y]) => f2(x) + ' ' + f2(y)).join(' L ') + ' Z';
+}
+
+/** O caminho no instante `k` (0 = dA, 1 = dB). */
+function morfar(dA, dB, k, n = PONTOS_PADRAO) {
+    const { a, b } = alinhados(dA, dB, n);
+    const t = Math.max(0, Math.min(1, k));
+    return caminhoDe(a.map((p, i) => [p[0] + (b[i][0] - p[0]) * t, p[1] + (b[i][1] - p[1]) * t]));
+}
+
+const ehCor = (v) => typeof v === 'string' && /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(v.trim());
+function rgb(h) {
+    let s = h.trim().slice(1);
+    if (s.length === 3) s = s.split('').map((c) => c + c).join('');
+    return [0, 2, 4].map((i) => parseInt(s.slice(i, i + 2), 16));
+}
+function misturarCor(a, b, k) {
+    const x = rgb(a), y = rgb(b);
+    // A curva elástica passa de 1: a cor não pode passar de 255.
+    return '#' + x.map((v, i) => Math.max(0, Math.min(255, Math.round(v + (y[i] - v) * k))).toString(16).padStart(2, '0')).join('');
+}
+// ── fim do embutido ──
+
+/** Este mesmo código como ES module, para o src/morfar.js do projeto Remotion. */
+function fonteEsm() {
+    const src = require('fs').readFileSync(__filename, 'utf-8');
+    const ini = src.indexOf('// ── embutido');
+    const fim = src.indexOf('// ── fim do embutido');
+    return '/* Gerado de lib/estudio/morfar.js do PrimoCode — não edite aqui. */\n'
+        + src.slice(ini, fim)
+        + 'export { pontos, alinhados, caminhoDe, morfar, ehCor, misturarCor };\n';
+}
+
+module.exports = { pontos, alinhados, caminhoDe, morfar, ehCor, misturarCor, fonteEsm, PONTOS_PADRAO };

package/lib/estudio/motion.js

@@ -0,0 +1,336 @@
+/**
+ * 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 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 = [k(0, 0.05), k(0.4, 0.22)];
+    if (temVoz) {
+        for (const tp of tempos) volumes.push(k(r2(Math.max(0.41, tp.de - 0.15)), 0.22), k(r2(tp.de), 0.11), k(r2(tp.ate), 0.11), k(r2(tp.ate + 0.35), 0.22));
+    }
+    volumes.push(k(r2(DUR - 0.6), 0.2), k(DUR, 0));
+    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,8 +47,9 @@
 
 const fs = require('fs');
 const path = require('path');
+const morfar = require('./morfar.js');
 
-const TIPOS = new Set(['texto', 'forma', 'imagem', 'video', 'icone', 'legenda', 'componente']);
+const TIPOS = new Set(['texto', 'forma', 'imagem', 'video', 'icone', 'legenda', 'componente', 'grupo']);
 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']);
@@ -61,7 +62,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,7 +75,8 @@ 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']);
 
@@ -92,7 +98,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 +110,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 +136,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 +203,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);

package/lib/estudio/remotion.js

@@ -97,6 +97,7 @@ import {
   AbsoluteFill, Img, Video, Audio, Sequence, useCurrentFrame,
   useVideoConfig, interpolate, staticFile, continueRender, delayRender,
 } from 'remotion';
+import { morfar, ehCor, misturarCor } from './morfar';
 
 /* ── SUAVIZAÇÃO ──────────────────────────────────────────────────────────
  * Cada curva é uma função de 0..1 em 0..1. "suave" é o padrão porque
@@ -133,7 +134,14 @@ function valorEm(trilha, t, padrao) {
     if (t >= a.t && t <= b.t) {
       const bruto = b.t === a.t ? 1 : (t - a.t) / (b.t - a.t);
       const curva = CURVAS[b.e || a.e || 'suave'] || CURVAS.suave;
-      return a.v + (b.v - a.v) * curva(bruto);
+      const k = curva(bruto);
+      /* Texto no lugar do número: é COR ("#ff6a00") ou CAMINHO (o "d" de um
+         SVG). A cor mistura; o caminho se deforma (morfar.js): a bolinha
+         vira foguete sem corte. */
+      if (typeof a.v === 'string' || typeof b.v === 'string') {
+        return ehCor(a.v) && ehCor(b.v) ? misturarCor(a.v, b.v, k) : morfar(a.v, b.v, k);
+      }
+      return a.v + (b.v - a.v) * k;
     }
   }
   return padrao;
@@ -153,12 +161,17 @@ function transformDe(a, base) {
   if (x != null || y != null || z != null) {
     partes.push('translate3d(' + (x || 0) + 'px,' + (y || 0) + 'px,' + (z || 0) + 'px)');
   }
-  if (a.escala != null) partes.push('scale(' + a.escala + ')');
-  if (a.escalaX != null) partes.push('scaleX(' + a.escalaX + ')');
-  if (a.escalaY != null) partes.push('scaleY(' + a.escalaY + ')');
+  /* GIRA DEPOIS DE ENCOLHER. No CSS o último da lista age primeiro, então a
+     escala vai por último: o elemento encolhe e só então gira. Na ordem
+     inversa, uma janela de 1920 px girava no tamanho cheio e só depois
+     encolhia em X e Y — a profundidade não encolhe, e sobrava um risco de
+     1920 px atravessando a tela. */
   if (a.rotacao != null) partes.push('rotate(' + a.rotacao + 'deg)');
   if (a.rotacaoX != null) partes.push('rotateX(' + a.rotacaoX + 'deg)');
   if (a.rotacaoY != null) partes.push('rotateY(' + a.rotacaoY + 'deg)');
+  if (a.escala != null) partes.push('scale(' + a.escala + ')');
+  if (a.escalaX != null) partes.push('scaleX(' + a.escalaX + ')');
+  if (a.escalaY != null) partes.push('scaleY(' + a.escalaY + ')');
   return partes.join(' ');
 }
 
@@ -222,7 +235,7 @@ function Elemento({ el, t, dados }) {
     estilo.backgroundColor = el.vidro.cor || 'rgba(255,255,255,0.12)';
     estilo.border = el.vidro.borda || '1px solid rgba(255,255,255,0.22)';
   }
-  if (el.raio != null) estilo.borderRadius = medida(a.raio ?? el.raio);
+  if (el.raio != null || a.raio != null) estilo.borderRadius = medida(a.raio ?? el.raio);
   if (el.sombra) estilo.boxShadow = el.sombra;
   if (el.mascara) {
     estilo.WebkitMaskImage = el.mascara;
@@ -298,18 +311,68 @@ function Elemento({ el, t, dados }) {
 
     case 'forma': {
       const forma = el.forma || 'retangulo';
+      /* O TRAÇO: qualquer forma, desenhada por um caminho SVG na caixa
+         "vista" (0 0 100 100 por padrão). "caminho" e "cor" animam, e é
+         isso que deixa uma forma virar outra no mesmo plano. */
+      if (forma === 'traco') {
+        const g = el.fundo && typeof el.fundo === 'object' && el.fundo.tipo === 'gradiente' ? el.fundo : null;
+        const gid = 'g' + String(el.id || JSON.stringify(g || '')).replace(/[^a-z0-9]/gi, '').slice(0, 24);
+        const ang = ((g && g.angulo) ?? 180) * Math.PI / 180;
+        /* Volume: o degradê RADIAL com o centro fora do meio é a luz batendo de
+           um lado (a bola vira esfera), e a sombra segue o CONTORNO da forma
+           (drop-shadow), não a caixa dela. */
+        const paradas = g ? g.cores.map((c, i) => <stop key={i} offset={i / Math.max(1, g.cores.length - 1)} stopColor={c} />) : null;
+        const sombra = el.sombra ? 'drop-shadow(' + el.sombra + ')' : '';
+        return (
+          <div style={{ ...estilo, width: medida(el.largura, '200px'), height: medida(el.altura, '200px'),
+            filter: [estilo.filter, sombra].filter(Boolean).join(' ') || undefined, boxShadow: undefined }}>
+            <svg viewBox={el.vista || '0 0 100 100'} width="100%" height="100%" style={{ overflow: 'visible', display: 'block' }}>
+              {g && (
+                <defs>
+                  {g.radial
+                    ? <radialGradient id={gid} cx={(g.centro && g.centro[0]) ?? 0.35} cy={(g.centro && g.centro[1]) ?? 0.3} r={g.raio ?? 0.75}>{paradas}</radialGradient>
+                    : <linearGradient id={gid} x1={0.5 - Math.sin(ang) / 2} y1={0.5 + Math.cos(ang) / 2} x2={0.5 + Math.sin(ang) / 2} y2={0.5 - Math.cos(ang) / 2}>{paradas}</linearGradient>}
+                </defs>
+              )}
+              <path d={a.caminho ?? el.caminho} fill={el.vazado ? 'none' : (g ? 'url(#' + gid + ')' : (a.cor ?? el.cor ?? '#fff'))}
+                stroke={el.linha || undefined} strokeWidth={el.espessura || undefined} strokeLinejoin="round" strokeLinecap="round" />
+            </svg>
+          </div>
+        );
+      }
       return (
         <div style={{
           ...estilo,
           width: medida(el.largura, '200px'),
           height: forma === 'linha' ? medida(el.espessura, '4px') : medida(el.altura, '200px'),
-          ...(el.fundo && typeof el.fundo === 'object' ? fundoCSS(el.fundo) : { background: el.fundo || el.cor || '#fff' }),
+          ...(el.fundo && typeof el.fundo === 'object' ? fundoCSS(el.fundo) : { background: a.cor ?? el.fundo ?? el.cor ?? '#fff' }),
           borderRadius: forma === 'circulo' ? '50%' : medida(a.raio ?? el.raio, '0px'),
           border: el.contorno || undefined,
         }} />
       );
     }
 
+    /* O GRUPO: uma tela dentro da tela. Os filhos vivem no tempo e no espaço
+       dele; com "recorte" o que passa da borda some (a tela do celular). O
+       grupo anima como qualquer elemento: cresce, sai do celular, cobre tudo. */
+    case 'grupo':
+      return (
+        <div style={{
+          ...estilo,
+          width: medida(el.largura, '100%'), height: medida(el.altura, '100%'),
+          overflow: el.recorte ? 'hidden' : 'visible',
+          /* 3D: sem recorte, o grupo deixa os filhos no espaço da cena
+             (preserve-3d). Com recorte ele vira uma superfície plana, e a
+             "perspectiva" dele dá profundidade ao que está dentro. */
+          transformStyle: el.recorte ? undefined : 'preserve-3d',
+          perspective: el.perspectiva ? el.perspectiva + 'px' : undefined,
+          ...(el.fundo ? (typeof el.fundo === 'object' ? fundoCSS(el.fundo) : { background: el.fundo }) : {}),
+          border: el.contorno || undefined,
+        }}>
+          {(el.elementos || []).map((f, i) => <Elemento key={i} el={f} t={tLocal} dados={dados} />)}
+        </div>
+      );
+
     case 'imagem':
       return (
         <div style={{ ...estilo, overflow: 'hidden' }}>
@@ -445,10 +508,19 @@ export function Cena({ cena, dados, tFixo }) {
     tx || ty ? 'translate(' + tx + 'px,' + ty + 'px)' : '',
     cam.zoom != null || soco !== 1 ? 'scale(' + ((cam.zoom ?? 1) * soco) + ')' : '',
     cam.rotacao != null || tr ? 'rotate(' + ((cam.rotacao || 0) + tr) + 'deg)' : '',
+    /* A CÂMERA 3D: ela gira em volta do mundo (rotacaoX/rotacaoY) e avança
+       nele (z). O que está mais perto anda mais que o que está longe — é a
+       profundidade de verdade, não um zoom. */
+    cam.z != null ? 'translateZ(' + cam.z + 'px)' : '',
+    cam.rotacaoX != null ? 'rotateX(' + cam.rotacaoX + 'deg)' : '',
+    cam.rotacaoY != null ? 'rotateY(' + cam.rotacaoY + 'deg)' : '',
   ].filter(Boolean).join(' ');
 
   return (
-    <AbsoluteFill style={{ ...fundoCSS(cena.fundo), overflow: 'hidden' }}>
+    /* A perspectiva mora AQUI, um nível acima do mundo: se ficasse no mesmo
+       elemento da câmera, girar a câmera sairia achatado. */
+    <AbsoluteFill style={{ ...fundoCSS(cena.fundo), overflow: 'hidden',
+      perspective: cena.perspectiva ? cena.perspectiva + 'px' : undefined }}>
       {cena.fundo && cena.fundo.tipo === 'imagem' && (
         <Img src={staticFile(cena.fundo.src)} style={{
           position: 'absolute', inset: 0, width: '100%', height: '100%',
@@ -464,9 +536,7 @@ export function Cena({ cena, dados, tFixo }) {
       <AbsoluteFill style={{
         transform: camTransform || undefined,
         transformOrigin: cena.cameraOrigem || 'center center',
-        // A perspectiva é o que transforma rotateX/rotateY em 3D de verdade;
-        // sem ela, girar em X só achata o elemento.
-        perspective: cena.perspectiva ? cena.perspectiva + 'px' : undefined,
+        // O mundo guarda o 3D dos filhos; a perspectiva vem do pai.
         transformStyle: cena.perspectiva ? 'preserve-3d' : undefined,
       }}>
         {(cena.elementos || []).map((el, i) => (
@@ -729,6 +799,7 @@ function montar({ pasta, titulo, plano, icones = {} }) {
     escrever(path.join(src, 'Root.jsx'), rootJsx(plano));
     escrever(path.join(src, 'Video.jsx'), RAIZ_JSX);
     escrever(path.join(src, 'Cena.jsx'), CENA_JSX);
+    escrever(path.join(src, 'morfar.js'), require('./morfar.js').fonteEsm());
     escrever(path.join(src, 'plano.json'), JSON.stringify(plano, null, 2));
     escrever(path.join(src, 'icones.json'), JSON.stringify(icones, null, 2));
     escrever(path.join(src, 'fontes.css'), fontesCSS(plano));

package/lib/estudio/sons-leves.js

@@ -0,0 +1,62 @@
+/**
+ * sons-leves.js — os efeitos do motion: leves, limpos, sintetizados.
+ *
+ *   "Animações suaves, leves e limpas, coloca música, narração e efeitos
+ *    sonoros." — Joel (28/09/2026)
+ *
+ * Os efeitos da edição (edicao.js SONS) são de corte de reels: whoosh cheio,
+ * estalo seco, impacto grave. Para o motion contínuo eles pesam. Estes são a
+ * versão leve: sopro em vez de whoosh, bolha em vez de estalo, um sino para o
+ * que nasce, um toque grave e macio para o que chega.
+ *
+ * Tudo sai do ffmpeg na hora (nada baixado, nada com licença de terceiros),
+ * uma vez por projeto.
+ */
+
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const EFEITOS = {
+    // Sopro: ruído rosa filtrado, entra e sai devagar. É o ar da passagem.
+    sopro: ['-f', 'lavfi', '-i', 'anoisesrc=d=0.9:c=pink:a=0.5', '-af',
+        'highpass=f=300,lowpass=f=2600,afade=t=in:st=0:d=0.45:curve=qsin,afade=t=out:st=0.45:d=0.45:curve=qsin,volume=0.7'],
+    // Bolha: um seno curto que sobe, sem ataque seco.
+    bolha: ['-f', 'lavfi', '-i', "aevalsrc='0.6*sin(2*PI*(520+900*t)*t)*exp(-26*t)*(1-exp(-400*t))':s=44100:d=0.22"],
+    // Clique: o tique limpo de um trackpad.
+    clique: ['-f', 'lavfi', '-i', "aevalsrc='0.5*sin(2*PI*2400*t)*exp(-90*t)+0.15*(random(0)*2-1)*exp(-160*t)':s=44100:d=0.08"],
+    // Brilho: dois sinos em quinta, decaindo — o que nasce.
+    brilho: ['-f', 'lavfi', '-i', "aevalsrc='0.32*sin(2*PI*880*t)*exp(-3.2*t)+0.22*sin(2*PI*1320*t)*exp(-4*t)+0.12*sin(2*PI*1760*t)*exp(-5*t)':s=44100:d=1.4"],
+    // Subida: um seno que cresce devagar — anuncia a transformação.
+    subida: ['-f', 'lavfi', '-i', "aevalsrc='0.28*sin(2*PI*(180+260*t*t)*t)*(t/1.4)':s=44100:d=1.4", '-af', 'afade=t=out:st=1.2:d=0.2'],
+    // Toque grave e macio: o que chega e assenta.
+    toque: ['-f', 'lavfi', '-i', "aevalsrc='0.7*sin(2*PI*(110-50*t)*t)*exp(-7*t)':s=44100:d=0.6", '-af', 'lowpass=f=900'],
+};
+
+/**
+ * Gera os efeitos na pasta do projeto (midia/sfx-<nome>.mp3) e devolve
+ * { nome: caminho relativo }. O que já existe não é refeito; o que o ffmpeg
+ * não conseguiu gerar fica de fora (o vídeo sai sem aquele som, não quebra).
+ *
+ * `rodar(args)` é injetável: o padrão chama o ffmpeg por spawn síncrono.
+ */
+function preparar(pasta, { rodar = null } = {}) {
+    const exec = rodar || ((args) => {
+        try { require('child_process').execFileSync('ffmpeg', args, { stdio: 'ignore', timeout: 30000 }); return true; }
+        catch { return false; }
+    });
+    const sons = {};
+    for (const [nome, args] of Object.entries(EFEITOS)) {
+        const rel = `midia/sfx-${nome}.mp3`;
+        const cheio = path.join(pasta, rel);
+        if (!fs.existsSync(cheio)) {
+            fs.mkdirSync(path.dirname(cheio), { recursive: true });
+            if (!exec(['-y', '-loglevel', 'error', ...args, '-q:a', '3', cheio])) continue;
+        }
+        sons[nome] = rel;
+    }
+    return sons;
+}
+
+module.exports = { EFEITOS, preparar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "primocode",
-  "version": "9.9.0",
+  "version": "9.10.0",
   "description": "PrimoCode — agente de engenharia com IA e cursor próprio. Requer conta Conecta Primo AI (Premium ou Super). Cria arquivos, roda comandos, controla navegador e desktop: abre apps, clica em botões e ícones pelo nome, digita e usa atalhos.",
   "main": "bin/primocode.js",
   "bin": {
@@ -8,7 +8,7 @@
   },
   "scripts": {
     "start": "node bin/primocode.js",
-    "test": "node test/tools.test.js && node test/ui.test.js && node test/entrada.test.js && node test/transparencia.test.js && node test/permissao.test.js && node test/compatibilidade.test.js && node test/skills.test.js && node test/skills-de-fora.test.js && node test/skills-novas.test.js && node test/comandos.test.js && node test/estudio.test.js && node test/voz.test.js && node test/voz-conversa.test.js && node test/modo.test.js && node test/pasta.test.js && node test/projeto.test.js && node test/nome-projeto.test.js && node test/api-propria.test.js && node test/claude-engine.test.js && node test/codex.test.js && node test/conferir.test.js && node test/catalogo.test.js && node test/desktop.test.js && node test/seta.test.js && node test/effort.test.js && node test/regressao.test.js && node test/memoria-conversa.test.js && node test/repeticao.test.js && node test/autonomia.test.js && node test/desfazer.test.js && node test/desfazer-git.test.js && node test/referencia.test.js && node test/parar.test.js && node test/continuar.test.js && node test/pipeline.test.js && node test/app.test.js && node test/app-janela.test.js && node test/aplicativo.test.js && node test/conta.test.mjs && node test/nuvem.test.js && node test/prazo.test.js && node test/primeira-vez.test.js && node test/janela.test.js && node test/fala.test.js && node test/especialistas.test.js && node test/empurrao.test.js && node test/terminal-novo.test.js && node test/markdown.test.js && node test/coerencia.test.js && node test/contexto.test.js && node test/perigo.test.js && node test/rapidez.test.js && node test/mascotes.test.js && node test/comandos-extra.test.js && node test/offline.test.js && node test/edicao.test.js && node test/composicao.test.js && node test/acervo-site.test.js && node test/impacto.test.js && node test/cinema.test.js && node test/producao.test.js && node test/ende.test.js && node test/capa.test.js && node test/broll.test.js"
+    "test": "node test/tools.test.js && node test/ui.test.js && node test/entrada.test.js && node test/transparencia.test.js && node test/permissao.test.js && node test/compatibilidade.test.js && node test/skills.test.js && node test/skills-de-fora.test.js && node test/skills-novas.test.js && node test/comandos.test.js && node test/estudio.test.js && node test/voz.test.js && node test/voz-conversa.test.js && node test/modo.test.js && node test/pasta.test.js && node test/projeto.test.js && node test/nome-projeto.test.js && node test/api-propria.test.js && node test/claude-engine.test.js && node test/codex.test.js && node test/conferir.test.js && node test/catalogo.test.js && node test/desktop.test.js && node test/seta.test.js && node test/effort.test.js && node test/regressao.test.js && node test/memoria-conversa.test.js && node test/repeticao.test.js && node test/autonomia.test.js && node test/desfazer.test.js && node test/desfazer-git.test.js && node test/referencia.test.js && node test/parar.test.js && node test/continuar.test.js && node test/pipeline.test.js && node test/app.test.js && node test/app-janela.test.js && node test/aplicativo.test.js && node test/conta.test.mjs && node test/nuvem.test.js && node test/prazo.test.js && node test/primeira-vez.test.js && node test/janela.test.js && node test/fala.test.js && node test/especialistas.test.js && node test/empurrao.test.js && node test/terminal-novo.test.js && node test/markdown.test.js && node test/coerencia.test.js && node test/contexto.test.js && node test/perigo.test.js && node test/rapidez.test.js && node test/mascotes.test.js && node test/comandos-extra.test.js && node test/offline.test.js && node test/edicao.test.js && node test/composicao.test.js && node test/acervo-site.test.js && node test/impacto.test.js && node test/cinema.test.js && node test/producao.test.js && node test/ende.test.js && node test/capa.test.js && node test/broll.test.js && node test/morfar.test.js && node test/motion.test.js && node test/motion-roteiro.test.js"
   },
   "engines": {
     "node": ">=18.17.0"

package/skills/motion-de-primeira/SKILL.md

@@ -42,6 +42,27 @@ a 4s. Fecho: 2s. Variar a duração é o que cria ritmo; repetir cria sono.
 **Silêncio visual.** Um quadro com uma frase e mais nada vale mais que um com
 seis elementos. Espaço vazio é composição, não desperdício.
 
+## Motion é contínuo, não uma tela por ideia
+
+Slide troca de tela. Motion é UM plano onde o mesmo objeto VIRA o próximo: a
+bolinha acende um fogo, se deforma em foguete, mergulha no celular e vira o
+ícone; o cursor gira e clica; o ícone salta e cobre a tela com o app dentro.
+
+Em vídeo de produto, anúncio e vinheta, escreva **uma cena de 8 a 15 s** no
+`estudio_plano`, não uma cena por frase:
+
+- **`forma: "traco"`**: forma livre por `caminho` (`d` de SVG, caixa 0 0 100
+  100, M/L/C/Q/Z). `caminho` e `cor` animam:
+  `"caminho": [{"t":1.6,"v":BOLA},{"t":2.5,"v":FOGUETE,"e":"elastico"}]`.
+- **`tipo: "grupo"`**: elementos que andam juntos, ou a tela dentro da tela
+  (`"recorte": true`). Filhos contam tempo e posição a partir do grupo.
+- **A troca é no mesmo lugar e instante**: o foguete some onde o ícone nasce; o
+  app nasce do tamanho e da COR do ícone.
+
+Espreme ao quicar e deixe a câmera andar até o fim.
+
+Vídeo por roteiro já sai assim (estilo padrão `motion`); escreva à mão só o que o roteiro não descreve.
+
 ## Cor e tipo
 
 Escolha a paleta a partir do ASSUNTO, e escreva os valores. Três a cinco