primocode 9.9.0 → 10.0.0

package/lib/estudio/remotion.js

@@ -97,6 +97,8 @@ import {
   AbsoluteFill, Img, Video, Audio, Sequence, useCurrentFrame,
   useVideoConfig, interpolate, staticFile, continueRender, delayRender,
 } from 'remotion';
+import { morfar, ehCor, misturarCor } from './morfar';
+import { KIT, CURVAS_KIT, Filtros } from './kit';
 
 /* ── SUAVIZAÇÃO ──────────────────────────────────────────────────────────
  * Cada curva é uma função de 0..1 em 0..1. "suave" é o padrão porque
@@ -116,6 +118,8 @@ const CURVAS = {
     if (t < 2.5 / d) return n * (t -= 2.25 / d) * t + 0.9375;
     return n * (t -= 2.625 / d) * t + 0.984375;
   },
+  // editorial, camera, arrasto, acelera (kit/base.jsx): a curva certa do guia VOX.
+  ...CURVAS_KIT,
 };
 
 /* O valor de uma propriedade animada no segundo "t".
@@ -133,7 +137,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 +164,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(' ');
 }
 
@@ -204,7 +220,12 @@ function Elemento({ el, t, dados }) {
 
   const tLocal = t - (el.de || 0);
   const a = animado(el.anima, tLocal);
-  const base = posicao(el);
+  /* A PEÇA DO KIT desenha nas coordenadas da cena (x, y dela são o lugar do
+     assunto, não o canto de uma caixa): a caixa dela é o quadro inteiro, e o
+     "anima" do elemento move o conjunto. */
+  const base = el.tipo === 'kit'
+    ? { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%' }
+    : posicao(el);
   const move = transformDe(a, {});
   const estilo = {
     ...base,
@@ -222,7 +243,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 +319,78 @@ 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 'kit': {
+      const Peca = KIT[el.peca];
+      if (!Peca) return null;
+      return (
+        <div style={{ ...estilo, transformOrigin: el.origem || ((el.x || 0) + 'px ' + (el.y || 0) + 'px') }}>
+          <Peca el={el} t={tLocal} fps={dados.fps} />
+        </div>
+      );
+    }
+
+    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 +526,44 @@ 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(' ');
 
+  /* A CÂMERA EM CAMADAS (o parallax do guia VOX): "camadas" são planos de
+     profundidade, e o que está longe anda menos que o que está perto. O
+     parallax é CONSEQUÊNCIA da câmera, não um efeito à parte: o plano do
+     assunto ("sujeito") recebe a câmera exata, os outros na proporção da
+     profundidade deles — e cada um com o desfoque da lente naquela distância.
+     Cada elemento diz a camada dele ("camada": índice); sem, é a do sujeito. */
+  const camadas = Array.isArray(cena.camadas) && cena.camadas.length ? cena.camadas : null;
+  const iSujeito = camadas ? Math.max(0, camadas.findIndex((c) => c.sujeito)) : 0;
+  const mundo = (els, f, desfoque) => (
+    <AbsoluteFill style={{
+      transform: f == null ? (camTransform || undefined) : [
+        'translate(' + (-(cam.x || 0) * f + tx) + 'px,' + (-(cam.y || 0) * f + ty) + 'px)',
+        'scale(' + ((1 + ((cam.zoom ?? 1) - 1) * f) * soco) + ')',
+        'rotate(' + ((cam.rotacao || 0) * f + tr) + 'deg)',
+      ].join(' '),
+      transformOrigin: cena.cameraOrigem || 'center center',
+      // O mundo guarda o 3D dos filhos; a perspectiva vem do pai.
+      transformStyle: cena.perspectiva ? 'preserve-3d' : undefined,
+      filter: desfoque ? 'blur(' + desfoque + 'px)' : undefined,
+    }}>
+      {els.map((el, i) => <Elemento key={i} el={el} t={t} dados={dados} />)}
+    </AbsoluteFill>
+  );
+
   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 }}>
+      <Filtros />
       {cena.fundo && cena.fundo.tipo === 'imagem' && (
         <Img src={staticFile(cena.fundo.src)} style={{
           position: 'absolute', inset: 0, width: '100%', height: '100%',
@@ -461,18 +576,13 @@ export function Cena({ cena, dados, tFixo }) {
           objectFit: cena.fundo.ajuste || 'cover',
         }} />
       )}
-      <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,
-        transformStyle: cena.perspectiva ? 'preserve-3d' : undefined,
-      }}>
-        {(cena.elementos || []).map((el, i) => (
-          <Elemento key={i} el={el} t={t} dados={dados} />
-        ))}
-      </AbsoluteFill>
+      {camadas
+        ? camadas.map((c, ci) => (
+          <React.Fragment key={ci}>
+            {mundo((cena.elementos || []).filter((el) => (el.camada ?? iSujeito) === ci), (c.p || 1) / (camadas[iSujeito].p || 1), c.desfoque)}
+          </React.Fragment>
+        ))
+        : mundo(cena.elementos || [], null, 0)}
       {flash > 0.01 && <AbsoluteFill style={{ backgroundColor: cena.corFlash || '#fff', opacity: flash * 0.85 }} />}
     </AbsoluteFill>
   );
@@ -482,6 +592,7 @@ export function Cena({ cena, dados, tFixo }) {
 const RAIZ_JSX = String.raw`import React from 'react';
 import { AbsoluteFill, Audio, Sequence, staticFile, useCurrentFrame, useVideoConfig, interpolate } from 'remotion';
 import { Cena } from './Cena';
+import { Acabamento, Hud, bolhaCaminho } from './kit';
 import plano from './plano.json';
 import icones from './icones.json';
 
@@ -490,6 +601,7 @@ import icones from './icones.json';
  * o "piscar" de fundo que denuncia corte mal feito. */
 function Transicao({ tipo, progresso, children }) {
   const p = progresso;
+  const { width: W, height: H } = useVideoConfig();
   let estilo = {};
   if (tipo === 'esmaecer') estilo = { opacity: p };
   else if (tipo === 'deslizar') estilo = { transform: 'translateX(' + (1 - p) * 100 + '%)' };
@@ -502,6 +614,12 @@ function Transicao({ tipo, progresso, children }) {
   // O SOCO: a cena entra grande e bate no lugar.
   else if (tipo === 'soco') estilo = { transform: 'scale(' + (1.35 - 0.35 * p) + ')', opacity: Math.min(1, p * 3) };
   else if (tipo === 'flash') estilo = { opacity: Math.min(1, p * 2), filter: 'brightness(' + (1 + (1 - p) * 3) + ')' };
+  /* O LÍQUIDO: a cena nova entra como uma mancha que cresce de um canto e
+     engole a anterior, com a borda viva (os lóbulos respiram enquanto crescem). */
+  else if (tipo === 'liquido' && p < 1) {
+    const k = p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2;
+    estilo = { clipPath: "path('" + bolhaCaminho(W * 0.78, H * 0.62, Math.hypot(W, H) * 0.95 * k, p * 3, 2) + "')" };
+  }
   return <AbsoluteFill style={estilo}>{children}</AbsoluteFill>;
 }
 
@@ -521,7 +639,7 @@ export const Paginas = () => {
 };
 
 export const Video = () => {
-  const { fps } = useVideoConfig();
+  const { fps, width: largura, height: altura } = useVideoConfig();
   const frame = useCurrentFrame();
   const dados = { fps, icones };
 
@@ -562,31 +680,17 @@ export const Video = () => {
         );
       })}
 
-      {/* O ACABAMENTO: granulação de filme, vinheta e a luz da marca passando.
-          É o que tira a cara de apresentação e dá a cara de peça de 2026. */}
-      {plano.acabamento && plano.acabamento.luz && (
-        <AbsoluteFill style={{ pointerEvents: 'none', mixBlendMode: 'screen', opacity: plano.acabamento.luzForca ?? 0.22,
-          background: 'radial-gradient(circle at ' + (50 + 40 * Math.sin(frame / 38)) + '% ' + (30 + 25 * Math.cos(frame / 51)) + '%, '
-            + plano.acabamento.luz[0] + ' 0%, transparent 45%), radial-gradient(circle at ' + (50 - 40 * Math.sin(frame / 44)) + '% '
-            + (75 - 20 * Math.sin(frame / 33)) + '%, ' + (plano.acabamento.luz[1] || plano.acabamento.luz[0]) + ' 0%, transparent 40%)' }} />
-      )}
-      {plano.acabamento && plano.acabamento.grade && (
-        <AbsoluteFill style={{ pointerEvents: 'none', opacity: plano.acabamento.grade,
-          backgroundImage: 'linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)',
-          backgroundSize: (plano.acabamento.passoGrade || 120) + 'px ' + (plano.acabamento.passoGrade || 120) + 'px',
-          backgroundPosition: (frame * 0.2) + 'px ' + (frame * 0.1) + 'px' }} />
-      )}
-      {plano.acabamento && plano.acabamento.vinheta && (
-        <AbsoluteFill style={{ pointerEvents: 'none', background: 'radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,' + plano.acabamento.vinheta + ') 100%)' }} />
-      )}
-      {plano.acabamento && plano.acabamento.grao && (
-        <AbsoluteFill style={{ pointerEvents: 'none', opacity: plano.acabamento.grao, mixBlendMode: 'overlay' }}>
-          <svg width="100%" height="100%">
-            <filter id="grao"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" seed={frame % 60} /></filter>
-            <rect width="100%" height="100%" filter="url(#grao)" />
-          </svg>
-        </AbsoluteFill>
-      )}
+      {/* O ACABAMENTO: granulação de filme, vinheta e a luz da marca passando
+          (kit/base.jsx). É o que tira a cara de apresentação. */}
+      <Acabamento ac={plano.acabamento} frame={frame} />
+      {/* O HUD do motion designer: cantos, timecode, fps e a seção da cena. */}
+      {plano.hud && (() => {
+        const atual = pedacos.filter((q) => frame >= q.de).pop() || pedacos[0];
+        const total = pedacos.length ? pedacos[pedacos.length - 1].de + pedacos[pedacos.length - 1].dur : 1;
+        // A cena diz se é escura (o HUD claro) ou clara (o HUD escuro).
+        const escuro = !(atual && atual.cena.escuro === false);
+        return <Hud hud={plano.hud} frame={frame} fps={fps} total={total} W={largura} H={altura} secao={atual && atual.cena.secao} escuro={escuro} />;
+      })()}
 
       {plano.audio && plano.audio.narracao && (
         <Audio src={staticFile(plano.audio.narracao)} volume={plano.audio.volumeNarracao ?? 1} />
@@ -729,6 +833,9 @@ 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());
+    // O kit de motion (kit.js): as peças que o elemento {"tipo":"kit"} monta.
+    for (const f of require('./kit.js').arquivos()) escrever(path.join(src, f.nome), f.conteudo);
     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));
@@ -755,16 +862,24 @@ function montar({ pasta, titulo, plano, icones = {} }) {
    do usuário e roda com rede disponível no `npm install`; o Chromium do
    Remotion baixa a fonte no primeiro quadro e o Remotion espera por ela. */
 function fontesCSS(plano) {
+    /* Toda chave que começa com "fonte" (fonte, fonteMono, fonteDef…), em
+       qualquer profundidade: dentro de grupo, na legenda, nas peças do kit e
+       no HUD. Fonte que o plano usa e o CSS não declara sai em Times. */
     const usadas = new Set();
-    for (const cena of plano.cenas || []) {
-        for (const el of cena.elementos || []) {
-            if (el.fonte) usadas.add(el.fonte);
-            if (el.estilo && el.estilo.fonte) usadas.add(el.estilo.fonte);
+    const andar = (o) => {
+        if (!o || typeof o !== 'object') return;
+        if (Array.isArray(o)) return o.forEach(andar);
+        for (const [k, v] of Object.entries(o)) {
+            if (/^fonte/.test(k) && typeof v === 'string' && v.trim()) usadas.add(v.trim());
+            else if (v && typeof v === 'object') andar(v);
         }
-    }
+    };
+    for (const cena of plano.cenas || []) andar(cena.elementos || []);
+    andar(plano.hud);
     if (!usadas.size) return '/* nenhuma fonte externa neste vídeo */\n';
     const familias = [...usadas]
-        .map((f) => 'family=' + encodeURIComponent(f).replace(/%20/g, '+') + ':wght@300;400;500;600;700;800;900')
+        // O Google devolve o que a família tem e ignora o resto: pedir todos os pesos e o itálico não quebra.
+        .map((f) => 'family=' + encodeURIComponent(f).replace(/%20/g, '+') + ':ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600')
         .join('&');
     return `@import url('https://fonts.googleapis.com/css2?${familias}&display=block');\n`;
 }

package/lib/estudio/ritmo.js

@@ -0,0 +1,77 @@
+/**
+ * ritmo.js — o tempo de um vídeo feito de partes: onde cada uma corta, quando
+ * cada coisa entra, e a música que abaixa quando a voz fala.
+ *
+ *   "O áudio comanda o quadro." — guia MOTION VOX STYLE
+ *
+ * Os estilos de cena por parte (vox.js, lancamento.js) dividem isto: o corte
+ * cai no beat (um pouco antes da primeira palavra da parte), cada elemento
+ * entra no instante em que a palavra dele é dita, e o volume da trilha segue
+ * a narração. Puro: tempos entram, números saem.
+ */
+
+'use strict';
+
+const { quando } = require('./cinema.js');
+
+const r2 = (n) => Math.round(n * 100) / 100;
+
+/**
+ * Onde cada parte começa e quanto dura.
+ *
+ * Com voz, a parte começa `antes` segundos antes da primeira palavra (o corte
+ * seco no beat) e vai até a próxima; a última ganha `cauda` de respiro. Sem
+ * voz, cada parte dura o que se leva para ler o que ela mostra.
+ *
+ * @returns {{ini:number[], dur:number[], total:number, temVoz:boolean}}
+ */
+function tempoDasPartes(partes, tempos = [], { semVoz = () => 2.6, antes = 0.12, cauda = 1.1, minimo = 1.1 } = {}) {
+    const temVoz = tempos.length === partes.length && tempos.every((t) => t && t.ate > t.de);
+    const ini = [];
+    if (temVoz) partes.forEach((_, i) => ini.push(i === 0 ? 0 : r2(Math.max(ini[i - 1] + minimo, tempos[i].de - antes))));
+    else partes.forEach((p, i) => ini.push(i === 0 ? 0 : r2(ini[i - 1] + Math.max(minimo, semVoz(partes[i - 1])))));
+    const total = r2(temVoz ? Math.max(ini[ini.length - 1] + minimo, tempos[tempos.length - 1].ate + cauda) : ini[ini.length - 1] + Math.max(minimo, semVoz(partes[partes.length - 1])) + 0.4);
+    const dur = ini.map((t, i) => r2((i < ini.length - 1 ? ini[i + 1] : total) - t));
+    return { ini, dur, total, temVoz };
+}
+
+/**
+ * Quando cada texto entra, no tempo DA CENA: o instante em que a primeira
+ * palavra forte dele é dita. Sem voz (ou sem achar), espalha os textos pelo
+ * começo da cena, respeitando a ordem.
+ */
+function gatilhos(textos, tempo, inicio, dur, { t0 = 0.3, ate = 0.62 } = {}) {
+    const palavras = (tempo && tempo.palavras) || [];
+    const fim = Math.max(t0 + 0.2, dur * ate);
+    if (!palavras.length) return textos.map((_, i) => r2(t0 + (fim - t0) * (i / Math.max(1, textos.length))));
+    const abs = quando(textos, palavras, inicio + fim, inicio + t0);
+    // Nunca antes do corte, nunca tarde demais para ser lido, sempre em ordem.
+    let antes = 0;
+    return abs.map((t) => {
+        const rel = Math.min(Math.max(0.08, t - inicio), Math.max(0.1, dur - 0.9));
+        antes = Math.max(antes + 0.1, rel);
+        return r2(antes);
+    });
+}
+
+/** As palavras faladas numa parte, no tempo da cena: [{texto, t}]. */
+function palavrasNaCena(tempo, inicio) {
+    return ((tempo && tempo.palavras) || []).map((w) => ({ texto: w.texto, t: r2(Math.max(0.05, w.de - inicio)) }));
+}
+
+/** O volume da trilha no tempo: cheia no respiro, baixa quando a voz fala, some no fim. */
+function volumesDaTrilha(tempos, total, { alto = 0.22, baixo = 0.11 } = {}) {
+    const k = (t, v) => ({ t: r2(t), v });
+    const vs = [k(0, 0.05), k(0.4, alto)];
+    // Um quadro-chave de cada vez, sempre depois do anterior: fala colada na outra não volta no tempo.
+    const poe = (t, v) => vs.push(k(Math.max(vs[vs.length - 1].t + 0.01, t), v));
+    for (const tp of tempos || []) {
+        if (!tp || !(tp.ate > tp.de)) continue;
+        poe(tp.de - 0.15, alto); poe(tp.de, baixo); poe(tp.ate, baixo); poe(tp.ate + 0.35, alto);
+    }
+    poe(total - 0.6, alto * 0.9);
+    poe(total, 0);
+    return vs;
+}
+
+module.exports = { tempoDasPartes, gatilhos, palavrasNaCena, volumesDaTrilha, r2 };

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 };