primocode 9.10.0 → 10.0.0

package/lib/estudio/remotion.js

@@ -98,6 +98,7 @@ import {
   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
@@ -117,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".
@@ -217,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,
@@ -355,6 +363,16 @@ function Elemento({ el, t, dados }) {
     /* 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={{
@@ -516,11 +534,36 @@ export function Cena({ cena, dados, tFixo }) {
     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 (
     /* 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%',
@@ -533,16 +576,13 @@ export function Cena({ cena, dados, tFixo }) {
           objectFit: cena.fundo.ajuste || 'cover',
         }} />
       )}
-      <AbsoluteFill style={{
-        transform: camTransform || undefined,
-        transformOrigin: cena.cameraOrigem || 'center center',
-        // O mundo guarda o 3D dos filhos; a perspectiva vem do pai.
-        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>
   );
@@ -552,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';
 
@@ -560,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 + '%)' };
@@ -572,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>;
 }
 
@@ -591,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 };
 
@@ -632,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} />
@@ -800,6 +834,8 @@ function montar({ pasta, titulo, plano, icones = {} }) {
     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));
@@ -826,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 };