primocode 8.38.0 → 8.39.0

package/studio/web/js/player.js

@@ -188,10 +188,18 @@
        "click" | "nenhum") e ganha do automático por transição. */
     if (sfx && tocando && ehVideo && atual !== anterior && doc.sfx !== false) {
       var cenaNova = cenas[atual] || {};
-      if (cenaNova.sfx !== "nenhum") {
-        if (cenaNova.sfx && sfx[cenaNova.sfx]) sfx[cenaNova.sfx]();
+      var somDaCena = cenaNova.som != null ? cenaNova.som : cenaNova.sfx;
+      if (somDaCena !== "nenhum") {
+        if (somDaCena) sfx.tocar(somDaCena);
         else sfx.transicao(cenaNova.transicao, atual);
       }
+      /* SOM POR ELEMENTO: `som` num elemento toca quando ELE entra — no
+         mesmo instante da animação de entrada (o mesmo atraso da cascata
+         que o render.js dá ao --atraso). Um número que faz "ding" ao
+         aparecer, um ícone que faz "pop", a barra que sobe com o riser: é
+         o que separa motion de slide animado. Nome da biblioteca ou
+         {arquivo, volume} — o arquivo entra no grafo e vai para o MP4. */
+      agendarSonsDosElementos(cenaNova);
     }
     narrar();
     pintarApresentador();
@@ -507,6 +515,26 @@
 
   var sfx = null;
 
+  /* Os sons dos ELEMENTOS da cena que acabou de entrar. O atraso é o mesmo
+     que o render.js dá à animação de entrada (cascata: i × 0,09 s + 0,1 s, ou
+     o `anim.atraso` declarado), então o som cai no instante em que o
+     elemento aparece. Trocar de cena antes cancela o que ainda não tocou —
+     senão o "ding" da cena 3 tocava em cima da cena 4. */
+  var sonsAgendados = [];
+  function agendarSonsDosElementos(cena) {
+    sonsAgendados.forEach(clearTimeout);
+    sonsAgendados = [];
+    if (!sfx || !cena || !Array.isArray(cena.elementos)) return;
+    cena.elementos.forEach(function (e, i) {
+      if (!e || !e.som) return;
+      var atraso = (e.anim && typeof e.anim === "object" && e.anim.atraso != null)
+        ? +e.anim.atraso
+        : (e.chaves && e.chaves.length > 1 ? 0 : i * 0.09 + 0.1);
+      if (typeof e.som === "object" && e.som.em != null) atraso = +e.som.em;   // segundos na cena, explícito
+      sonsAgendados.push(setTimeout(function () { sfx.tocar(e.som); }, Math.max(0, atraso) * 1000));
+    });
+  }
+
   function prepararTrilha() {
     if (typeof criarTrilha !== "function") return;
     var cfg = doc.trilha;

package/studio/web/js/render.js

@@ -279,8 +279,14 @@ function aplicarChaves(no, e, ctx) {
   // espera: "o que eu não toquei, fica como estava". O primeiro valor de
   // cada campo, quando nem a primeira chave o declara, é o neutro (escala e
   // opacidade em 1, deslocamento e giro em 0) — nunca zero para escala.
-  var NEUTRO = { x: 0, y: 0, escala: 1, giro: 0, opacidade: 1, desfoque: 0 };
-  var CAMPOS = ["x", "y", "escala", "giro", "opacidade", "desfoque"];
+  // giroX/giroY/prof são o 3D: viram rotateX/rotateY/translateZ com uma
+  // perspectiva na frente. É o que faz um cartão virar de verdade em vez de
+  // só encolher — pedido do dono: "quero que a IA faça coisas 3D, mexa com
+  // keyframes". escalaX/escalaY esticam num eixo só (a "gota" que se
+  // achata ao pousar). `prof`, não `z`: `z` no elemento já é a ordem das
+  // camadas (zIndex), e o mesmo nome com dois sentidos é armadilha.
+  var NEUTRO = { x: 0, y: 0, escala: 1, escalaX: 1, escalaY: 1, giro: 0, giroX: 0, giroY: 0, prof: 0, opacidade: 1, desfoque: 0 };
+  var CAMPOS = ["x", "y", "escala", "escalaX", "escalaY", "giro", "giroX", "giroY", "prof", "opacidade", "desfoque"];
   var herdado = {};
   CAMPOS.forEach(function (c) {
     // semente: primeiro valor declarado em qualquer chave, senão o neutro.
@@ -301,8 +307,17 @@ function aplicarChaves(no, e, ctx) {
     // Assim a chave continua valendo se a pessoa arrastar o elemento no
     // palco depois — o contrário obrigaria a refazer todas as chaves.
     var dx = herdado.x, dy = herdado.y;
+    var tem3d = herdado.giroX || herdado.giroY || herdado.prof;
+    // A perspectiva vai NA transformação, não no pai: o pai é a cena, e uma
+    // perspectiva lá mudaria todos os elementos. Constante em todas as
+    // chaves, para o navegador interpolar só o que muda.
+    if (tem3d) mov.push("perspective(1200px)");
     if (dx || dy) mov.push("translate(" + dx + "px," + dy + "px)");
+    if (herdado.prof) mov.push("translateZ(" + herdado.prof + "px)");
     if (herdado.escala !== 1) mov.push("scale(" + herdado.escala + ")");
+    if (herdado.escalaX !== 1 || herdado.escalaY !== 1) mov.push("scale(" + herdado.escalaX + "," + herdado.escalaY + ")");
+    if (herdado.giroX) mov.push("rotateX(" + herdado.giroX + "deg)");
+    if (herdado.giroY) mov.push("rotateY(" + herdado.giroY + "deg)");
     if (herdado.giro) mov.push("rotate(" + herdado.giro + "deg)");
 
     var linhas = ["transform:" + (mov.length ? mov.join(" ") : "none")];
@@ -328,9 +343,38 @@ function aplicarChaves(no, e, ctx) {
   var dur = _numero(ctx.duracao, 4);
   no.style.animationName = nome;
   no.style.animationDuration = dur + "s";
-  no.style.animationTimingFunction = e.suavizar === false ? "linear" : "cubic-bezier(.4,0,.2,1)";
+  no.style.animationTimingFunction = curvaDe(e.suavizar);
   no.style.animationFillMode = "both";
   no.style.animationIterationCount = e.repetir ? "infinite" : "1";
+  if (e.repetir && e.vaiEVolta) no.style.animationDirection = "alternate";
+  if (tem3dEm(chaves)) no.style.transformStyle = "preserve-3d";
+}
+
+function tem3dEm(chaves) {
+  for (var i = 0; i < chaves.length; i++) {
+    if (chaves[i].giroX || chaves[i].giroY || chaves[i].prof) return true;
+  }
+  return false;
+}
+
+/* As curvas com NOME. `suavizar: false` continua sendo linear; o padrão
+   continua sendo a curva suave. Os nomes existem porque "elástico" e "salto"
+   são o que separa motion de slide animado, e pedir cubic-bezier a quem
+   escreve JSON é pedir chute. */
+var CURVAS = {
+  suave:    "cubic-bezier(.4,0,.2,1)",
+  linear:   "linear",
+  entrada:  "cubic-bezier(.4,0,1,1)",       // acelera: sai devagar, chega rápido
+  saida:    "cubic-bezier(0,0,.2,1)",       // freia: chega devagar
+  elastico: "cubic-bezier(.34,1.56,.64,1)", // passa do ponto e volta
+  salto:    "cubic-bezier(.68,-.55,.27,1.55)", // recua, dispara, passa e assenta
+  degrau:   "steps(6, end)",                // quadro a quadro, para o "stop motion"
+};
+function curvaDe(suavizar) {
+  if (suavizar === false) return CURVAS.linear;
+  if (typeof suavizar === "string" && CURVAS[suavizar]) return CURVAS[suavizar];
+  if (typeof suavizar === "string" && /^(cubic-bezier|steps)\(/.test(suavizar)) return suavizar;
+  return CURVAS.suave;
 }
 
 /* ── identidade da marca ─────────────────────────────────────────────────
@@ -527,6 +571,14 @@ function renderElemento(e, ctx) {
   if (e.opacidade != null) no.style.opacity = e.opacidade;
   if (e.sombra) no.style.boxShadow = e.sombra === true ? "0 30px 70px -25px rgba(0,0,0,.6)" : e.sombra;
   if (e.z != null) no.style.zIndex = e.z;
+  /* MATERIAL: "vidro" é o liquid glass — translúcido, desfocando o que está
+     atrás, com bisel de luz em cima e o reflexo diagonal. Vale em QUALQUER
+     elemento (texto, forma, ícone, imagem, lista, cartões), por isso mora
+     aqui e não num tipo. O CSS faz o resto por `data-material`. */
+  if (e.material) {
+    no.dataset.material = e.material;
+    if (e.raio != null) no.style.borderRadius = _px(e.raio);
+  }
 
   /* animação */
   var an = e.anim || ctx.animPadrao;
@@ -882,7 +934,14 @@ function renderElemento(e, ctx) {
 
     case "forma": {
       var f = e.forma || "retangulo";
-      no.style.background = e.preenchimento || "var(--c-tom)";
+      // Forma de vidro: o `preenchimento` vira a TINTA sob o vidro (fraca),
+      // e o vidro em si é do CSS. Pintar o fundo inteiro aqui cobriria o
+      // desfoque — e um vidro opaco é um retângulo.
+      if (e.material === "vidro") {
+        if (e.preenchimento) no.style.setProperty("--tinta", e.preenchimento);
+      } else {
+        no.style.background = e.preenchimento || "var(--c-tom)";
+      }
       if (e.borda) no.style.border = (e.borda.largura || 2) + "px solid " + (e.borda.cor || "var(--c-linha)");
       if (f === "circulo") no.style.borderRadius = "999px";
       else no.style.borderRadius = _px(e.raio != null ? e.raio : 0);
@@ -1182,6 +1241,17 @@ function renderElemento(e, ctx) {
       no.style.width = _px(e.l || t);
       no.style.height = _px(e.a || t);
       no.style.color = e.cor || "var(--c-tom)";
+      /* ÍCONE COMO OBJETO: `estilo: "app"` é o azulejo de aplicativo —
+         gradiente da cor, brilho em cima, sombra embaixo, o traço branco —
+         e `estilo: "vidro"` é o mesmo azulejo em liquid glass. Pedido do
+         dono ("icon, liquid glass, bem motion"): um ícone de traço sozinho
+         é sinal; num azulejo vira coisa. `fundo` pinta o azulejo; sem ele, a
+         cor do tema. */
+      if (e.estilo === "app" || e.estilo === "vidro") {
+        no.dataset.estilo = e.estilo;
+        no.style.setProperty("--azulejo", e.fundo || e.cor || "var(--c-tom)");
+        if (e.estilo === "app") no.style.color = e.corTraco || "#fff";
+      }
       // `caminho`: o ícone desenhado pelo modelo (path SVG 24×24) — ver
       // icones.js. Sem ele, um da lista pelo nome.
       no.innerHTML = e.caminho

package/studio/web/js/sfx.js

@@ -85,6 +85,110 @@ function criarSfx(ctx, destino) {
     o.start(agora); o.stop(agora + 0.07);
   }
 
+  /* ── A biblioteca cresceu porque três sons não fazem motion ───────────
+     Pedido do dono: "efeitos sonoros… bem motion mesmo". Whoosh, impacto e
+     click cobrem a transição; o que entra num elemento — um número que
+     aparece, um ícone que pousa, uma barra que sobe — pedia mais. Todos
+     sintetizados, sem arquivo e sem licença, calibrados para ficar SOB a
+     narração. */
+
+  /* Bolha estourando: um seno que sobe rápido e some. Entrada de item. */
+  function pop() {
+    var agora = ctx.currentTime;
+    var o = ctx.createOscillator(), g = ctx.createGain();
+    o.type = "sine";
+    o.frequency.setValueAtTime(380, agora);
+    o.frequency.exponentialRampToValueAtTime(900, agora + 0.06);
+    g.gain.setValueAtTime(0.0001, agora);
+    g.gain.exponentialRampToValueAtTime(0.16, agora + 0.012);
+    g.gain.exponentialRampToValueAtTime(0.0001, agora + 0.14);
+    o.connect(g); g.connect(saida);
+    o.start(agora); o.stop(agora + 0.16);
+  }
+
+  /* Sino de notificação: dois parciais (fundamental + quinta acima), cauda
+     longa. Confirmação, número final, "pronto". */
+  function ding() {
+    var agora = ctx.currentTime;
+    [[1320, 0.11], [1980, 0.05], [2640, 0.025]].forEach(function (p, i) {
+      var o = ctx.createOscillator(), g = ctx.createGain();
+      o.type = "sine";
+      o.frequency.value = p[0];
+      g.gain.setValueAtTime(0.0001, agora);
+      g.gain.exponentialRampToValueAtTime(p[1], agora + 0.008);
+      g.gain.exponentialRampToValueAtTime(0.0001, agora + 0.9 - i * 0.15);
+      o.connect(g); g.connect(saida);
+      o.start(agora); o.stop(agora + 1.0);
+    });
+  }
+
+  /* Subida (riser): ruído filtrado que sobe por um segundo e meio e para
+     seco — a tensão antes do número grande ou da assinatura. */
+  function subida() {
+    var agora = ctx.currentTime;
+    var s = ctx.createBufferSource(), g = ctx.createGain(), f = ctx.createBiquadFilter();
+    s.buffer = bufferRuido();
+    s.loop = true;
+    f.type = "bandpass"; f.Q.value = 2.2;
+    f.frequency.setValueAtTime(180, agora);
+    f.frequency.exponentialRampToValueAtTime(3800, agora + 1.5);
+    g.gain.setValueAtTime(0.0001, agora);
+    g.gain.exponentialRampToValueAtTime(0.13, agora + 1.4);
+    g.gain.setValueAtTime(0.0001, agora + 1.52);
+    s.connect(f); f.connect(g); g.connect(saida);
+    s.start(agora); s.stop(agora + 1.6);
+  }
+
+  /* Tique de relógio/teclado: madeira seca. Passo de lista, contagem. */
+  function tique() {
+    var agora = ctx.currentTime;
+    var s = ctx.createBufferSource(), g = ctx.createGain(), f = ctx.createBiquadFilter();
+    s.buffer = bufferRuido();
+    f.type = "highpass"; f.frequency.value = 2600;
+    g.gain.setValueAtTime(0.14, agora);
+    g.gain.exponentialRampToValueAtTime(0.0001, agora + 0.04);
+    s.connect(f); f.connect(g); g.connect(saida);
+    s.start(agora); s.stop(agora + 0.05);
+  }
+
+  /* Brilho: arpejo rápido e agudo, o "sparkle" de um destaque ou de uma
+     estrela acendendo. */
+  function brilho() {
+    var agora = ctx.currentTime;
+    [1568, 2093, 2637, 3136].forEach(function (hz, i) {
+      var o = ctx.createOscillator(), g = ctx.createGain();
+      o.type = "triangle";
+      o.frequency.value = hz;
+      var t = agora + i * 0.045;
+      g.gain.setValueAtTime(0.0001, t);
+      g.gain.exponentialRampToValueAtTime(0.06, t + 0.01);
+      g.gain.exponentialRampToValueAtTime(0.0001, t + 0.35);
+      o.connect(g); g.connect(saida);
+      o.start(t); o.stop(t + 0.4);
+    });
+  }
+
+  /* Um ARQUIVO de som (o efeito baixado da internet pelo agente, ou o do
+     usuário), tocado dentro do MESMO grafo — é o que faz ele entrar no MP4
+     exportado junto da trilha. Decodificado uma vez por URL. */
+  var cacheArquivos = {};
+  function arquivo(url, volume) {
+    if (!url) return;
+    var pronto = cacheArquivos[url] || (cacheArquivos[url] = fetch(url)
+      .then(function (r) { return r.arrayBuffer(); })
+      .then(function (b) { return ctx.decodeAudioData(b); })
+      .catch(function () { return null; }));
+    pronto.then(function (buffer) {
+      if (!buffer) return;
+      var s = ctx.createBufferSource(), g = ctx.createGain();
+      s.buffer = buffer;
+      g.gain.value = volume == null ? 0.7 : Math.max(0, Math.min(1, volume));
+      s.connect(g); g.connect(saida);
+      s.start(ctx.currentTime);
+    });
+    return pronto;
+  }
+
   /* O efeito certo para a ENTRADA de uma cena, pela transição dela.
      flash e zoom pedem peso; corte seco não pede nada. */
   function transicao(tipo, indice) {
@@ -93,15 +197,37 @@ function criarSfx(ctx, destino) {
     whoosh(((indice || 0) * 0.37) % 1);
   }
 
-  return {
+  /* Toca pelo NOME ou por {arquivo, volume}. É o que o player chama para o
+     `som` de um elemento ou de uma cena. Nome desconhecido não toca nada —
+     e não quebra. */
+  function tocar(som) {
+    if (!som) return;
+    if (typeof som === "string") { if (typeof api[som] === "function" && som !== "tocar") api[som](); return; }
+    if (som.arquivo) return arquivo(som.arquivo, som.volume);
+    if (som.nome && typeof api[som.nome] === "function") api[som.nome]();
+  }
+
+  var api = {
     whoosh: whoosh,
     impacto: impacto,
     click: click,
+    pop: pop,
+    ding: ding,
+    subida: subida,
+    tique: tique,
+    brilho: brilho,
+    arquivo: arquivo,
+    tocar: tocar,
     transicao: transicao,
     volume: function (v) { saida.gain.value = v; },
   };
+  return api;
 }
 
+/* Os nomes que o documento pode usar em `som`/`sfx` — lidos pela spec e pelo
+   servidor, para recusar nome inventado com a lista certa. */
+var SONS = ["whoosh", "impacto", "click", "pop", "ding", "subida", "tique", "brilho"];
+
 if (typeof module !== "undefined" && module.exports) {
-  module.exports = { criarSfx: criarSfx };
+  module.exports = { criarSfx: criarSfx, SONS: SONS };
 }

package/studio/web/render.css

@@ -423,6 +423,101 @@
     0 18px 44px rgba(0, 0, 0, .34);
 }
 
+/* ── MATERIAL: vidro (liquid glass) ─────────────────────────────────────
+   Pedido do dono: "liquid glass, icon, bem motion". O que faz o vidro ser
+   vidro, e não um retângulo translúcido:
+     · DESFOCA o que está atrás (backdrop-filter) e SATURA — o fundo fica
+       vivo através dele, como numa lente;
+     · o BISEL: uma linha clara em cima (onde a luz bate) e uma escura
+       embaixo, dentro da própria caixa;
+     · o REFLEXO diagonal (::before), que no vídeo atravessa devagar — é o
+       "líquido" do nome;
+     · a TINTA opcional (--tinta), fraca, para o vidro ter cor sem ficar opaco.
+   Vale em qualquer elemento: texto vira pílula de vidro, forma vira painel,
+   ícone vira azulejo, imagem ganha moldura. ─────────────────────────────── */
+.el[data-material="vidro"] {
+  position: absolute;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .07) 38%,
+                    rgba(255, 255, 255, .02) 60%, rgba(255, 255, 255, .14)),
+    color-mix(in srgb, var(--tinta, transparent) 28%, transparent);
+  -webkit-backdrop-filter: blur(22px) saturate(1.65);
+  backdrop-filter: blur(22px) saturate(1.65);
+  border: 1px solid rgba(255, 255, 255, .30);
+  border-radius: 28px;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .60),
+    inset 0 -1px 0 rgba(0, 0, 0, .20),
+    inset 0 0 0 1px rgba(255, 255, 255, .05),
+    0 26px 60px -22px rgba(0, 0, 0, .60);
+  overflow: hidden;
+}
+.el[data-material="vidro"]::before {
+  content: ""; position: absolute; inset: -40% -30%; pointer-events: none;
+  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .30) 47%,
+                              rgba(255, 255, 255, .07) 53%, transparent 60%);
+  transform: translateX(-28%);
+}
+.cena.animar .el[data-material="vidro"]::before { animation: brilhoVidro 7s cubic-bezier(.4, 0, .2, 1) infinite; }
+@keyframes brilhoVidro {
+  0%, 100% { transform: translateX(-28%); }
+  50%      { transform: translateX(28%); }
+}
+.el.txt[data-material="vidro"] { padding: .42em .85em; }
+.el.forma[data-material="vidro"] { background-color: transparent; }
+.el.imagem[data-material="vidro"] { padding: 14px; }
+.el.imagem[data-material="vidro"] img { border-radius: calc(28px - 12px); }
+.el.lista[data-material="vidro"], .el.cartoes[data-material="vidro"], .el.numeros[data-material="vidro"] { padding: 4% 5%; }
+/* Tema claro: o vidro escurece um pouco, senão some no branco. */
+[data-tema="claro"] .el[data-material="vidro"], .tema-claro .el[data-material="vidro"] {
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .30) 40%, rgba(255, 255, 255, .55)),
+    color-mix(in srgb, var(--tinta, transparent) 22%, transparent);
+  border-color: rgba(0, 0, 0, .10);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(0, 0, 0, .06), 0 26px 60px -24px rgba(0, 0, 0, .28);
+}
+
+/* ── ÍCONE COMO OBJETO: o azulejo de aplicativo ──────────────────────────
+   `estilo: "app"`: a cor em gradiente com duas luzes, o brilho na metade de
+   cima, a sombra colorida embaixo e o traço branco com sombra própria — é a
+   gramática de ícone de app, e o olho lê "produto" em vez de "sinal".
+   `estilo: "vidro"`: o mesmo azulejo em liquid glass. ─────────────────── */
+.el.icone[data-estilo="app"], .el.icone[data-estilo="vidro"] {
+  position: absolute; border-radius: 23.5%; overflow: hidden;
+}
+/* O traço ocupa 58% do azulejo. NÃO por padding em %: padding em
+   porcentagem é relativo à LARGURA DO PAI (a cena, 1920px), e 21% virava
+   400px de padding num ícone de 220 — o azulejo engolia o canto da tela e
+   o traço sumia. Medido na primeira captura. */
+.el.icone[data-estilo="app"] svg, .el.icone[data-estilo="vidro"] svg { width: 58%; height: 58%; }
+.el.icone[data-estilo="app"] {
+  --az: var(--azulejo, var(--c-tom));
+  background:
+    radial-gradient(130% 110% at 18% 8%, rgba(255, 255, 255, .55), transparent 52%),
+    linear-gradient(160deg, color-mix(in srgb, var(--az) 78%, #fff), var(--az) 52%,
+                    color-mix(in srgb, var(--az) 68%, #000));
+  box-shadow:
+    inset 0 2px 0 rgba(255, 255, 255, .55),
+    inset 0 -3px 0 rgba(0, 0, 0, .28),
+    0 22px 44px -16px color-mix(in srgb, var(--az) 70%, #000);
+}
+.el.icone[data-estilo="app"]::after {
+  content: ""; position: absolute; left: 5%; right: 5%; top: 3%; height: 47%; pointer-events: none;
+  border-radius: 22% 22% 48% 48% / 30% 30% 60% 60%;
+  background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .02));
+}
+.el.icone[data-estilo="app"] svg { position: relative; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); }
+.el.icone[data-estilo="vidro"] {
+  --tinta: var(--azulejo, var(--c-tom));
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .07) 40%, rgba(255, 255, 255, .16)),
+    color-mix(in srgb, var(--tinta) 30%, transparent);
+  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
+  border: 1px solid rgba(255, 255, 255, .32);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .2), 0 24px 50px -20px rgba(0, 0, 0, .55);
+}
+.el.icone[data-estilo="vidro"] svg { position: relative; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .3)); }
+
 /* ── selo ──────────────────────────────────────────────────────────────── */
 .el.selo {
   display: inline-flex; align-items: center; gap: .5em;