primocode 8.41.0 → 8.42.0

package/README.md

@@ -1,4 +1,4 @@
-# PrimoCode v8.41.0
+# PrimoCode v8.42.0
 
 Agente de engenharia brasileiro para o terminal, no estilo Claude Code.
 Cria arquivos de verdade, roda comandos, **controla o navegador e o desktop** —
@@ -11,7 +11,7 @@ do Claude ou do GPT escolhe isso na abertura, com as setinhas, e passa a usar a
 assinatura dele.
 
 ```
- ▐▛███▜▌   Primo Code v8.41.0
+ ▐▛███▜▌   Primo Code v8.42.0
 ▝▜█████▛▘  Bem-vindo de volta, Joel
   ▘▘ ▝▝    ~/primocode  · /dir <pasta> muda
 ```
@@ -50,6 +50,12 @@ crédito; a identidade de uma empresa — logo, cor, paleta, fontes e frase —
 arquivo, e os créditos saem prontos para a cena final. Recorte de fundo com
 `rembg`, quando instalado.
 
+O quadro também se move: cada cena aceita uma **câmera** (`aproximar`,
+`empurrar`, `pan-direita`, `balanco`…) e cada elemento uma **profundidade**, e
+aí as camadas andam em velocidades diferentes — é o que separa motion de slide
+animado. Junto com as chaves em 3D, as curvas com nome e o som por elemento,
+dá para montar no navegador o que antes pedia After Effects.
+
 O motor não é gosto: vídeo curto sai pelo estúdio, em segundos, sem instalar
 nada; vídeo longo, canal alfa, ProRes ou fps alto viram projeto **Remotion** na
 sua pasta — e a resposta sempre diz por que escolheu.

package/lib/act.js

@@ -460,6 +460,31 @@ async function runAct(userPrompt, opts) {
             if (m && m.role && m.content) messages.push({ role: m.role, content: m.content });
         }
     }
+    /* ── O GATILHO DO DIRETOR ────────────────────────────────────────────
+     *
+     *   "A IA identifica que precisa criar vídeo, ativa o agente, esse agente
+     *    faz a estrutura e manda pra IA, e depois ela só faz o vídeo."
+     *
+     * Deixar isso só escrito no catálogo não basta: com um pedido curto
+     * ("faz um vídeo do produto") o modelo pula direto para o studio_criar,
+     * porque criar é o que ele sabe fazer. Quem reconhece o pedido é uma
+     * regra (diretor.precisaDeProducao), e ela entra como ORDEM na conversa —
+     * não como conselho no meio de cinquenta ferramentas.
+     *
+     * Num subagente não entra: ele já está fazendo uma parte de um plano, e
+     * um diretor dentro do diretor é uma volta a mais para o mesmo lugar. */
+    if (!subagent && profundidade === 0) {
+        const producao = require('./diretor.js').precisaDeProducao(userPrompt);
+        if (producao.producao) {
+            messages.push({ role: 'system', content:
+                'ESTE PEDIDO É DE PRODUÇÃO AUDIOVISUAL. Antes de criar qualquer peça, chame '
+                + `planejar_producao com o pedido do usuário (formato "${producao.formato}"). `
+                + 'Ele devolve a pauta — roteiro, narração falada, voz, câmera e a mídia a buscar — '
+                + 'e é ela que você produz, cena a cena. Não comece pelo studio_criar: o roteiro '
+                + 'escrito no meio do JSON da cena vira legenda de slide, que é o que se quer evitar.' });
+        }
+    }
+
     messages.push({ role: 'user', content: userPrompt });
 
     let finalText = '';

package/lib/diretor.js

@@ -116,7 +116,7 @@ function ritmoPara(segundos) {
 // ── 3. o plano ───────────────────────────────────────────────────────────
 
 const CAMPOS_CENA = ['titulo', 'narracao', 'duracao', 'layout', 'fundo', 'transicao',
-    'elementos', 'midia', 'chaves', 'notas'];
+    'elementos', 'midia', 'camera', 'chaves', 'notas'];
 
 /**
  * Normaliza o que o diretor devolveu e aponta o que ficou faltando.
@@ -206,6 +206,7 @@ Devolva SÓ um bloco \`\`\`json com este formato, sem texto antes nem depois:
       "fundo": "malha | aurora | raios | ondas | nevoa | vinheta, uma cor, ou {\\"imagem\\":\\"<da lista midia>\\"}",
       "transicao": "corte | fade | deslizar | subir | zoom | limpar | persiana | flash",
       "midia": [ { "busca": "o que procurar", "tipo": "imagem | logo", "papel": "fundo | destaque | selo", "semFundo": false } ],
+      "camera": "aproximar | afastar | pan-direita | pan-esquerda | subir | descer | empurrar | balanco | nenhuma",
       "chaves": "descreva em uma frase o movimento principal desta cena (o que entra, o que atravessa, o que cresce)",
       "notas": "o que o produtor precisa saber e não está acima"
     }
@@ -219,7 +220,8 @@ REGRAS QUE SEPARAM UM VÍDEO BOM DE UM GENÉRICO:
 4. NÚMERO É CONCRETO. Nada de "muitos clientes": ou tem o número, ou a frase muda.
 5. RITMO VARIADO. Cenas de durações diferentes e transições diferentes. Tudo em fade parece slide.
 6. MÍDIA COM PROPÓSITO. Só peça imagem ou logo quando ela PROVA algo. Diga o termo de busca de verdade ("painel solar em telhado residencial", não "imagem legal").
-7. MOVIMENTO. Em cada cena diga em "chaves" o movimento principal — é ele que tira a cara de apresentação parada.`;
+7. MOVIMENTO. Em cada cena diga em "chaves" o movimento principal — é ele que tira a cara de apresentação parada.
+8. CÂMERA COM PARCIMÔNIA. Movimento de quadro em UMA cena a cada duas ou três ("camera": "nenhuma" nas outras): o que dá ritmo é alternar cena parada e cena que se move. Em cena com foto de fundo, prefira "aproximar" ou "empurrar".`;
 };
 
 const REVISAO = (defeitos) => `O plano voltou com defeitos de FORMA. Corrija SÓ o que está listado e devolva o JSON inteiro de novo, no mesmo formato:
@@ -288,6 +290,7 @@ function pauta(plano) {
         linhas.push(`CENA ${i + 1} — ${c.duracao}s · layout ${c.layout || 'titulo'} · entra em ${c.transicao}`);
         if (c.titulo) linhas.push(`  na tela: ${c.titulo}`);
         linhas.push(`  narração: ${c.narracao}`);
+        if (c.camera && c.camera !== 'nenhuma') linhas.push(`  câmera: ${c.camera}`);
         if (c.chaves) linhas.push(`  movimento: ${c.chaves}`);
         (c.midia || []).forEach((m) => linhas.push(
             `  mídia: ${m.tipo || 'imagem'} "${m.busca}" como ${m.papel || 'destaque'}${m.semFundo ? ' (sem fundo)' : ''}`));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "primocode",
-  "version": "8.41.0",
+  "version": "8.42.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/modo.test.js && node test/pasta.test.js && node test/catalogo.test.js && node test/desktop.test.js && node test/effort.test.js && node test/claude-engine.test.js && node test/regressao.test.js && node test/memoria-conversa.test.js && node test/repeticao.test.js && node test/referencia.test.js && node test/parar.test.js && node test/continuar.test.js && node test/studio-spec.test.js && node test/studio-versoes.test.js && node test/voz.test.js && node test/editor.test.js && node test/estudio-projeto.test.js && node test/vocabulario.test.js && node test/video-export.test.js && node test/monotonia.test.js && node test/clipe.test.js && node test/midia-envio.test.js && node test/pausas.test.js && node test/fala-repetida.test.js && node test/trilha.test.js && node test/anuncio.test.js && node test/pipeline.test.js && node test/app.test.js && node test/elementos.test.js && node test/remotion.test.js && node test/aplicativo.test.js && node test/conta.test.mjs && node test/nuvem.test.js && node test/codex.test.js && node test/chaves.test.js && node test/prazo.test.js && node test/primeira-vez.test.js && node test/janela.test.js && node test/pareamento.test.js && node test/fala.test.js && node test/especialistas.test.js && node test/icone.test.js && node test/exportar.test.js && node test/ate-o-fim.test.js && node test/motion.test.js && node test/audio-marca.test.js && node test/diretor.test.js"
+    "test": "node test/tools.test.js && node test/ui.test.js && node test/modo.test.js && node test/pasta.test.js && node test/catalogo.test.js && node test/desktop.test.js && node test/effort.test.js && node test/claude-engine.test.js && node test/regressao.test.js && node test/memoria-conversa.test.js && node test/repeticao.test.js && node test/referencia.test.js && node test/parar.test.js && node test/continuar.test.js && node test/studio-spec.test.js && node test/studio-versoes.test.js && node test/voz.test.js && node test/editor.test.js && node test/estudio-projeto.test.js && node test/vocabulario.test.js && node test/video-export.test.js && node test/monotonia.test.js && node test/clipe.test.js && node test/midia-envio.test.js && node test/pausas.test.js && node test/fala-repetida.test.js && node test/trilha.test.js && node test/anuncio.test.js && node test/pipeline.test.js && node test/app.test.js && node test/elementos.test.js && node test/remotion.test.js && node test/aplicativo.test.js && node test/conta.test.mjs && node test/nuvem.test.js && node test/codex.test.js && node test/chaves.test.js && node test/prazo.test.js && node test/primeira-vez.test.js && node test/janela.test.js && node test/pareamento.test.js && node test/fala.test.js && node test/especialistas.test.js && node test/icone.test.js && node test/exportar.test.js && node test/ate-o-fim.test.js && node test/motion.test.js && node test/audio-marca.test.js && node test/diretor.test.js && node test/camera.test.js"
   },
   "engines": {
     "node": ">=18.17.0"

package/studio/arquivos/corte-teste-de-camera-fb823.json

@@ -0,0 +1,57 @@
+{
+  "id": "corte-teste-de-camera-fb823",
+  "ferramenta": "corte",
+  "titulo": "Teste de câmera",
+  "doc": {
+    "tema": "meia-noite",
+    "largura": 1920,
+    "altura": 1080,
+    "acabamento": "grao",
+    "cenas": [
+      {
+        "layout": "capa",
+        "duracao": 4,
+        "fundo": "aurora",
+        "transicao": "fade",
+        "camera": "empurrar",
+        "elementos": [
+          {
+            "tipo": "texto",
+            "papel": "chapeu",
+            "texto": "Câmera",
+            "paralaxe": 1.3
+          },
+          {
+            "tipo": "texto",
+            "papel": "titulo",
+            "texto": "O quadro se move"
+          },
+          {
+            "tipo": "texto",
+            "papel": "apoio",
+            "texto": "e as camadas andam em velocidades diferentes.",
+            "paralaxe": 0.5
+          }
+        ]
+      },
+      {
+        "layout": "numeros",
+        "duracao": 3.5,
+        "fundo": "malha",
+        "transicao": "zoom",
+        "camera": "aproximar",
+        "elementos": [
+          {
+            "tipo": "numeros",
+            "itens": [
+              "+38% | em 12 meses"
+            ],
+            "contar": true,
+            "som": "ding"
+          }
+        ]
+      }
+    ]
+  },
+  "atualizado": "2026-09-11T18:39:36+00:00"
+}

package/studio/ferramentas/corte.md

@@ -796,6 +796,48 @@ Duas chaves já bastam. Quem tem `chaves` ignora `anim` — as duas disputariam
 mesmo movimento, e a chave é mais específica. Use em **um ou dois** elementos
 por vídeo: tudo se mexendo ao mesmo tempo cansa e esconde a mensagem.
 
+## Câmera da cena — o quadro também se move
+
+`chaves` move um elemento. `camera` move o **quadro inteiro**: é o que separa
+motion de slide animado. Na cena:
+
+```json
+{ "layout": "capa", "duracao": 4, "camera": "aproximar" }
+```
+
+Movimentos com nome: `aproximar` · `afastar` · `pan-direita` · `pan-esquerda` ·
+`subir` · `descer` · `empurrar` (zoom com um grau de giro — a mão humana) ·
+`balanco`.
+
+Para um movimento seu, as mesmas chaves dos elementos:
+
+```json
+"camera": { "chaves": [ { "t": 0, "escala": 1.15, "x": -40 },
+                        { "t": 1, "escala": 1, "x": 0 } ], "suavizar": "saida" }
+```
+
+O **fundo não anda junto** — é assim de propósito: o quadro passa sobre o
+fundo, e é daí que vem a sensação de profundidade sem custo nenhum.
+
+### Paralaxe — as camadas andam em velocidades diferentes
+
+No elemento, `paralaxe` diz o quanto ele acompanha a câmera: `1` é o padrão
+(anda com o quadro), acima de 1 vem à frente e anda **mais**, abaixo de 1 fica
+ao fundo e anda **menos**.
+
+```json
+{ "tipo": "imagem", "src": "/midia/cidade.jpg", "paralaxe": 0.4 }
+{ "tipo": "texto", "papel": "titulo", "texto": "São Paulo", "paralaxe": 1.25 }
+```
+
+Duas ou três camadas bastam: fundo em 0,3–0,5, conteúdo em 1, o que está na
+frente em 1,2–1,4. Um elemento que já tem `chaves` próprias e está no fluxo
+ignora a paralaxe — a animação dele é mais específica, e embrulhar mudaria o
+espaçamento da cena.
+
+**Um movimento de câmera por cena, e não em todas.** Câmera em tudo embrulha o
+olho; o que dá ritmo é alternar cena parada e cena com movimento.
+
 ## Acabamento
 
 Textura por cima da cena inteira — é o que tira a cara de template:

package/studio/studio.log

@@ -0,0 +1,57 @@
+[studio] 2026-09-11T18:38:32+00:00 — iniciando na porta 7777
+
+  ██  PrimoCode Studio
+  ────────────────────────────────────────────────────────
+  Estúdio          http://localhost:7777
+  Manual da IA     http://localhost:7777/api/manual
+  Ferramentas      Prisma, Tela, Prosa, Grade, Corte, Traço
+  ────────────────────────────────────────────────────────
+  Ctrl+C para parar
+
+  GET /api/ferramentas
+  GET /api/ferramentas
+  GET /api/arquivos
+  GET /api/ferramentas
+  GET /api/arquivos
+  GET /api/ferramentas
+  GET /api/arquivos
+  POST /api/arquivos
+  GET /api/arquivos/corte-teste-de-camera-fb823
+  GET /api/voz/status
+  GET /api/voz/status
+  GET /api/arquivos/corte-teste-de-camera-fb823
+  GET /api/voz/status
+  GET /api/arquivos/corte-teste-de-camera-fb823
+  GET /api/voz/status
+[studio] 2026-09-11T18:40:34+00:00 — iniciando na porta 7777
+
+  ██  PrimoCode Studio
+  ────────────────────────────────────────────────────────
+  Estúdio          http://localhost:7777
+  Manual da IA     http://localhost:7777/api/manual
+  Ferramentas      Prisma, Tela, Prosa, Grade, Corte, Traço
+  ────────────────────────────────────────────────────────
+  Ctrl+C para parar
+
+  GET /api/arquivos/corte-teste-de-camera-fb823
+  GET /api/voz/status
+  GET /api/voz/status
+  GET /api/voz/status
+  GET /api/voz/status
+  GET /api/arquivos/corte-teste-de-camera-fb823
+  GET /api/voz/status
+  GET /api/voz/status
+  GET /api/arquivos/corte-teste-de-camera-fb823
+  GET /api/voz/status
+  GET /api/voz/status
+  GET /api/arquivos/corte-teste-de-camera-fb823
+  GET /api/voz/status
+  GET /api/voz/status
+  GET /api/arquivos/corte-teste-de-camera-fb823
+  GET /api/voz/status
+  GET /api/voz/status
+  GET /api/arquivos/corte-teste-de-camera-fb823
+  GET /api/voz/status
+  GET /api/ferramentas
+  GET /api/versao
+  POST /api/sair

package/studio/web/core.css

@@ -987,3 +987,181 @@ body {
   font: 400 11.5px/1.2 var(--sans);
   color: var(--fraco);
 }
+
+/* ==========================================================================
+   REDESENHO DA CAPA — o estúdio se apresentando
+   --------------------------------------------------------------------------
+   O que estava aqui era uma página de lista: título, cartões, lista de
+   arquivos. Funcionava e não dizia nada — quem abria pela primeira vez não
+   descobria que o vídeo sai com narração, câmera e keyframes, nem que dá para
+   pedir tudo por texto ao agente.
+
+   Este bloco vem DEPOIS do núcleo de propósito: ele acrescenta a capa, os
+   poderes e o acabamento dos cartões sem reescrever a primitiva (.btn, .campo,
+   .topo) que o editor usa — mudar aquilo mexeria em cinco telas de uma vez.
+   ========================================================================== */
+
+.home { max-width: 1140px; padding-top: 34px; }
+
+.busca-topo { width: 220px; background: var(--sup2); }
+.busca-topo::placeholder { color: var(--fraco2); }
+@media (max-width: 720px) { .busca-topo { display: none; } }
+
+/* ------------------------------------------------------------------ capa -- */
+
+.capa {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
+  gap: 30px;
+  align-items: center;
+  padding: 46px 40px;
+  margin-bottom: 54px;
+  border: 1px solid var(--linha);
+  border-radius: 22px;
+  background: linear-gradient(180deg, var(--sup) 0%, #101014 100%);
+  overflow: hidden;
+}
+/* A luz é a única coisa que se move na capa, e devagar: movimento na página
+   inteira briga com o vídeo que a pessoa veio fazer. */
+.capa-luz {
+  position: absolute;
+  inset: -40% -10% auto -20%;
+  height: 520px;
+  background:
+    radial-gradient(420px 240px at 20% 40%, rgba(255, 90, 54, .22), transparent 70%),
+    radial-gradient(360px 220px at 70% 30%, rgba(139, 92, 246, .18), transparent 72%);
+  filter: blur(6px);
+  animation: capaLuz 18s ease-in-out infinite alternate;
+  pointer-events: none;
+}
+@keyframes capaLuz { from { transform: translate3d(-3%, 0, 0); } to { transform: translate3d(6%, 3%, 0); } }
+
+.capa-texto { position: relative; z-index: 1; }
+.capa h1 {
+  font-size: 40px;
+  line-height: 1.12;
+  font-weight: 680;
+  letter-spacing: -.04em;
+  margin: 14px 0 12px;
+}
+.capa h1 .grad {
+  background: linear-gradient(92deg, var(--primo), #ff9f7a 55%, #8b5cf6);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.capa p { color: var(--fraco); font-size: 14.5px; line-height: 1.7; margin: 0 0 22px; max-width: 560px; }
+.capa-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
+.btn.grande { height: 40px; padding: 0 18px; font-size: 13.5px; border-radius: 12px; }
+
+.selo-vivo { color: var(--fraco); }
+.selo-vivo i {
+  width: 7px; height: 7px; border-radius: 999px; background: #4ade80;
+  box-shadow: 0 0 0 3px rgba(74, 222, 128, .16);
+  animation: pulso 2.4s ease-in-out infinite;
+}
+@keyframes pulso { 50% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); } }
+
+/* A arte da direita é o produto em miniatura: três quadros de cena, com a
+   mesma linguagem do render. Nada de screenshot — captura envelhece e mente. */
+.capa-arte { position: relative; height: 250px; }
+.capa-arte .quadro {
+  position: absolute;
+  border: 1px solid var(--linha2);
+  border-radius: 14px;
+  background: linear-gradient(160deg, #16161d, #0c0c11);
+  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
+  animation: flutua 9s ease-in-out infinite alternate;
+}
+.capa-arte .q1 {
+  left: 0; top: 16px; width: 62%; height: 132px; padding: 16px;
+  display: flex; flex-direction: column; gap: 9px; justify-content: center;
+}
+.capa-arte .q1 span { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .16); }
+.capa-arte .q1 span:first-child { width: 42%; background: var(--primo); height: 11px; }
+.capa-arte .q1 span:last-child { width: 68%; }
+.capa-arte .q2 {
+  right: 6px; top: 0; width: 42%; height: 104px;
+  display: grid; place-content: center; text-align: center;
+  animation-delay: -3s;
+}
+.capa-arte .q2 b { font-size: 26px; font-weight: 680; letter-spacing: -.03em; display: block; }
+.capa-arte .q2 i { font-size: 11px; color: var(--fraco2); font-style: normal; }
+.capa-arte .q3 {
+  right: 22px; bottom: 4px; width: 54%; height: 96px; padding: 14px;
+  display: flex; align-items: flex-end; gap: 8px;
+  animation-delay: -6s;
+}
+.capa-arte .q3 u { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--primo), rgba(255, 90, 54, .25)); }
+.capa-arte .q3 u:nth-child(1) { height: 38%; }
+.capa-arte .q3 u:nth-child(2) { height: 72%; }
+.capa-arte .q3 u:nth-child(3) { height: 54%; }
+@keyframes flutua { from { transform: translateY(-5px); } to { transform: translateY(7px); } }
+
+@media (max-width: 880px) {
+  .capa { grid-template-columns: 1fr; padding: 34px 24px; }
+  .capa-arte { display: none; }
+  .capa h1 { font-size: 31px; }
+}
+
+/* ------------------------------------------------------- cartões e listas -- */
+
+/* Seis ferramentas em três colunas fecham duas fileiras cheias; em quatro
+   colunas sobra uma fileira pela metade, e a página parece interrompida. */
+.grade-ferr {
+  gap: 16px;
+  margin-bottom: 52px;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+}
+
+.cartao-ferr { padding: 22px; background: linear-gradient(180deg, var(--sup), #101015); }
+.cartao-ferr .brilho {
+  position: absolute; inset: -1px -1px auto -1px; height: 2px;
+  background: linear-gradient(90deg, transparent, var(--cor, var(--primo)), transparent);
+  opacity: 0; transition: opacity .18s;
+}
+.cartao-ferr:hover .brilho, .cartao-ferr:focus-visible .brilho { opacity: .9; }
+.cartao-ferr:focus-visible { outline: 2px solid var(--cor, var(--primo)); outline-offset: 2px; }
+.cartao-ferr .icone {
+  width: 38px; height: 38px; border-radius: 11px;
+  background: color-mix(in srgb, var(--cor, var(--primo)) 16%, transparent);
+  color: var(--cor, var(--primo));
+  border: 1px solid color-mix(in srgb, var(--cor, var(--primo)) 28%, transparent);
+}
+.cartao-ferr .icone svg { width: 19px; height: 19px; }
+.cartao-ferr:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
+
+.item-arq { border-radius: 12px; }
+.item-arq .tag {
+  background: color-mix(in srgb, var(--cor, var(--primo)) 16%, transparent);
+  color: var(--cor, var(--primo));
+}
+.item-arq:hover { transform: translateX(2px); }
+
+/* ------------------------------------------------------------- poderes --- */
+
+.poderes { margin-bottom: 50px; }
+.grade-poder {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
+  gap: 12px;
+}
+.grade-poder article {
+  border: 1px solid var(--linha);
+  border-radius: var(--r2);
+  background: var(--sup);
+  padding: 16px 18px;
+}
+.grade-poder b { font-size: 13.5px; font-weight: 620; display: block; margin-bottom: 5px; }
+.grade-poder p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--fraco); }
+
+.copiado { font-size: 12px; color: #4ade80; opacity: 0; transition: opacity .2s; }
+.copiado.on { opacity: 1; }
+
+/* Quem pediu menos movimento recebe menos movimento — a capa continua
+   inteira, só para de respirar. */
+@media (prefers-reduced-motion: reduce) {
+  .capa-luz, .capa-arte .quadro, .selo-vivo i { animation: none; }
+  .cartao-ferr:hover, .item-arq:hover { transform: none; }
+}

package/studio/web/home.html

@@ -5,6 +5,7 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>PrimoCode Studio</title>
 <link rel="stylesheet" href="/core.css">
+<link rel="stylesheet" href="/fontes.css">
 </head>
 <body>
 
@@ -27,22 +28,48 @@
 <header class="topo">
   <a class="marca" href="/"><span class="cubo">P</span>PrimoCode <em>Studio</em></a>
   <div class="cresce"></div>
+  <input class="campo busca-topo" id="busca" placeholder="Buscar no estúdio    /" autocomplete="off">
   <button class="btn vazio" id="btn-manual">Manual da IA</button>
   <a class="btn vazio" href="/api/manual" target="_blank">API</a>
 </header>
 
 <div class="home">
 
-  <section class="hero">
-    <h1>O estúdio que a IA opera</h1>
-    <p>Seis ferramentas nativas com um modelo de documento em comum. A IA escreve o
-      documento, o estúdio desenha — apresentação, arte, texto, planilha, vídeo ou diagrama —
-      e você refina à mão no editor. Vídeo sai com narração neural, trilha, efeitos
-      sonoros e download direto em MP4 ou áudio.</p>
+  <section class="capa">
+    <div class="capa-luz" aria-hidden="true"></div>
+    <div class="capa-texto">
+      <span class="pilula selo-vivo"><i></i> o estúdio está no ar em localhost:7777</span>
+      <h1>Seis ferramentas.<br>Um documento só.<br><span class="grad">A IA opera tudo.</span></h1>
+      <p>Apresentação, arte, texto, planilha, vídeo e diagrama nascem do mesmo modelo —
+         a IA escreve o documento, o estúdio desenha, você refina à mão. Vídeo sai com
+         narração neural, trilha, efeito sonoro, câmera e keyframes em 3D, e baixa em MP4.</p>
+      <div class="capa-acoes">
+        <button class="btn primo grande" id="ir-corte">Criar um vídeo</button>
+        <button class="btn grande" id="ir-prisma">Criar uma apresentação</button>
+      </div>
+    </div>
+    <div class="capa-arte" aria-hidden="true">
+      <div class="quadro q1"><span></span><span></span><span></span></div>
+      <div class="quadro q2"><b>+38%</b><i>em 12 meses</i></div>
+      <div class="quadro q3"><u></u><u></u><u></u></div>
+    </div>
   </section>
 
+  <h2 class="secao-tit" id="tit-ferramentas">As ferramentas</h2>
   <section class="grade-ferr" id="ferramentas"></section>
 
+  <section class="poderes">
+    <h2 class="secao-tit">O que a IA consegue fazer aqui</h2>
+    <div class="grade-poder">
+      <article><b>Diretor antes da produção</b><p>Roteiro, narração falada, voz, câmera e a mídia a buscar — decidido antes de a primeira cena existir.</p></article>
+      <article><b>Câmera e paralaxe</b><p>O quadro se aproxima, atravessa e balança; as camadas andam em velocidades diferentes.</p></article>
+      <article><b>Keyframes em 3D</b><p>Giro em profundidade, curvas com nome (elástico, salto) e som no instante em que o elemento entra.</p></article>
+      <article><b>Mídia da internet</b><p>Foto, logo em SVG da marca e música com licença aberta — com o crédito guardado junto do arquivo.</p></article>
+      <article><b>Narração neural</b><p>Voz sintetizada em pt-BR, sincronia automática com a cena e a trilha abaixando sozinha enquanto a voz fala.</p></article>
+      <article><b>MP4 sem clique</b><p>Exporta o arquivo direto, ou vira projeto Remotion quando o vídeo é longo ou precisa de canal alfa.</p></article>
+    </div>
+  </section>
+
   <section class="faixa-ia">
     <h2>Como pedir</h2>
     <p>Fale com seu agente em português normal. Ele lê o manual, escolhe a ferramenta e devolve o link.</p>
@@ -51,7 +78,7 @@ usando o Prisma. Me devolva a URL "ver" da resposta.</pre>
     <div class="acoes">
       <button class="btn primo" id="copiar">Copiar</button>
       <a class="btn" href="/api/manual" target="_blank">Ler o manual</a>
-      <span id="copiado" style="font-size:12px;color:#4ade80;opacity:0;transition:opacity .2s">copiado</span>
+      <span id="copiado" class="copiado">copiado</span>
     </div>
   </section>
 
@@ -70,15 +97,16 @@ usando o Prisma. Me devolva a URL "ver" da resposta.</pre>
 (function () {
   var $ = function (s) { return document.querySelector(s); };
   var FERRS = [];
+  var ARQUIVOS = [];
 
   function fugir(s) { return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;"); }
 
   fetch("/api/ferramentas").then(function (r) { return r.json(); }).then(function (lista) {
     FERRS = lista;
     $("#ferramentas").innerHTML = lista.map(function (f) {
-      return '<div class="cartao-ferr" data-slug="' + f.slug + '">' +
-        '<div class="icone" style="background:' + f.cor + '22;color:' + f.cor + '">' +
-        svgIcone(iconeDe(f.slug)) + "</div>" +
+      return '<div class="cartao-ferr" data-slug="' + f.slug + '" style="--cor:' + f.cor + '" tabindex="0" role="button">' +
+        '<div class="brilho" aria-hidden="true"></div>' +
+        '<div class="icone">' + svgIcone(iconeDe(f.slug)) + "</div>" +
         "<b>" + fugir(f.nome) + "</b>" +
         '<div class="papel">' + fugir(f.papel) + "</div>" +
         "<p>" + fugir(f.resumo) + "</p>" +
@@ -87,6 +115,11 @@ usando o Prisma. Me devolva a URL "ver" da resposta.</pre>
 
     Array.prototype.forEach.call(document.querySelectorAll(".cartao-ferr"), function (c) {
       c.onclick = function () { criar(c.dataset.slug); };
+      // Teclado abre igual ao mouse: o cartão é um botão, e um botão que só
+      // responde a clique deixa de fora quem navega por Tab.
+      c.onkeydown = function (ev) {
+        if (ev.key === "Enter" || ev.key === " ") { ev.preventDefault(); criar(c.dataset.slug); }
+      };
     });
     carregarArquivos();
   });
@@ -110,28 +143,59 @@ usando o Prisma. Me devolva a URL "ver" da resposta.</pre>
     });
   }
 
+  $("#ir-corte").onclick = function () { criar("corte"); };
+  $("#ir-prisma").onclick = function () { criar("prisma"); };
+
   function carregarArquivos() {
     fetch("/api/arquivos").then(function (r) { return r.json(); }).then(function (lista) {
-      if (!lista.length) { $("#vazio").style.display = "block"; return; }
-      $("#arquivos").innerHTML = lista.map(function (a) {
-        var cor = corDe(a.ferramenta);
-        var quando = a.atualizado ? a.atualizado.slice(0, 10).split("-").reverse().join("/") : "";
-        return '<div class="item-arq">' +
-          '<div class="tag" style="background:' + cor + '22;color:' + cor + '">' + svgIcone(iconeDe(a.ferramenta)) + "</div>" +
-          '<div class="cresce"><b>' + fugir(a.titulo) + "</b>" +
-          '<div class="meta">' + fugir(a.ferramenta) + " · " + a.pecas +
-          (a.pecas === 1 ? " peça · " : " peças · ") + quando + "</div></div>" +
-          '<a class="btn" href="/t/' + a.ferramenta + "/" + a.id + '">Editar</a>' +
-          '<a class="btn primo" href="/v/' + a.id + '" target="_blank">Abrir</a></div>';
-      }).join("");
+      ARQUIVOS = lista;
+      desenharArquivos(lista);
     });
   }
 
+  function desenharArquivos(lista) {
+    if (!lista.length) {
+      $("#arquivos").innerHTML = "";
+      $("#vazio").style.display = "block";
+      return;
+    }
+    $("#vazio").style.display = "none";
+    $("#arquivos").innerHTML = lista.map(function (a) {
+      var cor = corDe(a.ferramenta);
+      var quando = a.atualizado ? a.atualizado.slice(0, 10).split("-").reverse().join("/") : "";
+      return '<div class="item-arq" style="--cor:' + cor + '">' +
+        '<div class="tag">' + svgIcone(iconeDe(a.ferramenta)) + "</div>" +
+        '<div class="cresce"><b>' + fugir(a.titulo) + "</b>" +
+        '<div class="meta">' + fugir(a.ferramenta) + " · " + a.pecas +
+        (a.pecas === 1 ? " peça · " : " peças · ") + quando + "</div></div>" +
+        '<a class="btn" href="/t/' + a.ferramenta + "/" + a.id + '">Editar</a>' +
+        '<a class="btn primo" href="/v/' + a.id + '" target="_blank">Abrir</a></div>';
+    }).join("");
+  }
+
+  /* A BUSCA filtra o que já está na tela — ferramentas e arquivos.
+     Sem ida ao servidor: a lista inteira já veio, e um fetch por tecla
+     digitada seria trabalho para devolver o que está na memória. */
+  var busca = $("#busca");
+  busca.oninput = function () {
+    var q = busca.value.trim().toLowerCase();
+    Array.prototype.forEach.call(document.querySelectorAll(".cartao-ferr"), function (c) {
+      c.style.display = !q || c.textContent.toLowerCase().indexOf(q) >= 0 ? "" : "none";
+    });
+    desenharArquivos(!q ? ARQUIVOS : ARQUIVOS.filter(function (a) {
+      return (a.titulo + " " + a.ferramenta).toLowerCase().indexOf(q) >= 0;
+    }));
+  };
+  document.addEventListener("keydown", function (ev) {
+    if (ev.key === "/" && document.activeElement !== busca) { ev.preventDefault(); busca.focus(); }
+    if (ev.key === "Escape" && document.activeElement === busca) { busca.value = ""; busca.oninput(); busca.blur(); }
+  });
+
   $("#copiar").onclick = function () {
     navigator.clipboard.writeText($("#frase").textContent).then(function () {
       var c = $("#copiado");
-      c.style.opacity = 1;
-      setTimeout(function () { c.style.opacity = 0; }, 1500);
+      c.classList.add("on");
+      setTimeout(function () { c.classList.remove("on"); }, 1500);
     });
   };
 
@@ -144,6 +208,9 @@ usando o Prisma. Me devolva a URL "ver" da resposta.</pre>
     }
   };
   folha.onclick = function (e) { if (e.target === folha) folha.classList.remove("on"); };
+  document.addEventListener("keydown", function (e) {
+    if (e.key === "Escape") folha.classList.remove("on");
+  });
 })();
 </script>
 </body>

package/studio/web/js/editor.js

@@ -24,6 +24,12 @@
      Os valores NÃO mudam — são os mesmos que o render.css entende. O que
      muda é só o que a pessoa lê. */
   var OPC = {
+    // A câmera da cena: o quadro que se move. Os valores são os mesmos que o
+    // render.js conhece (CAMERAS); aqui vão só os nomes que se leem.
+    camera: [["", "Parada"], ["aproximar", "Aproximar"], ["afastar", "Afastar"],
+      ["pan-direita", "Atravessar para a direita"], ["pan-esquerda", "Atravessar para a esquerda"],
+      ["subir", "Subir"], ["descer", "Descer"], ["empurrar", "Empurrão (zoom com giro)"],
+      ["balanco", "Balanço"]],
     transicao: [["", "Nenhuma (corte seco)"], ["fade", "Suave"], ["deslizar", "Deslizar para o lado"],
       ["subir", "Subir"], ["zoom", "Aproximar"], ["limpar", "Varrer"],
       ["persiana", "Persiana"], ["flash", "Flash"]],
@@ -1221,6 +1227,12 @@
         g0.appendChild(linha("Duração (s)", inp(c.duracao || 4, function (v) { mudar(function () { c.duracao = v || 4; }); }, "number")));
         g0.appendChild(linha("Como entra", menu(OPC.transicao, c.transicao || "",
           function (v) { mudar(function () { if (v) c.transicao = v; else delete c.transicao; }); })));
+        /* A câmera só aparece onde há tempo (vídeo): num slide parado ela
+           não teria o que animar, e uma caixa que não faz nada é pior que
+           caixa nenhuma. Guardada como string — é o formato que a spec
+           documenta e o que o render.js aceita direto. */
+        g0.appendChild(linha("Câmera", menu(OPC.camera, typeof c.camera === "string" ? c.camera : "",
+          function (v) { mudar(function () { if (v) c.camera = v; else delete c.camera; }); })));
       }
       if (SLUG === "traco") {
         g0.appendChild(linha("Arranjo", selecao(["", "horizontal", "vertical"], c.auto || "",
@@ -1292,6 +1304,11 @@
       gp.appendChild(linha("Opacidade", inp(e.opacidade != null ? e.opacidade : 1, function (v) { edita("opacidade", v); }, "number")));
       gp.appendChild(linha("Como entra", menu(OPC.animacao, e.anim || "",
         function (v) { edita("anim", v); })));
+      /* Profundidade: o quanto este elemento acompanha a câmera. 1 anda com o
+         quadro, acima vem à frente, abaixo fica ao fundo. Sem câmera na cena
+         não faz nada — e é por isso que mora aqui embaixo, e não em destaque. */
+      gp.appendChild(linha("Profundidade", inp(e.paralaxe != null ? e.paralaxe : 1,
+        function (v) { edita("paralaxe", v === 1 || v === "" ? "" : v); }, "number")));
       if (e.tipo === "numeros") {
         gp.appendChild(linha("Contar", selecao(["não", "sim"], e.contar ? "sim" : "não",
           function (v) { edita("contar", v === "sim" ? true : ""); })));

package/studio/web/js/render.js

@@ -590,6 +590,11 @@ function renderElemento(e, ctx) {
      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`. */
+  /* A profundidade do elemento na cena: quanto ele acompanha a câmera.
+     >1 vem à frente (anda mais), <1 fica ao fundo (anda menos). É o que
+     transforma um zoom num plano com camadas. */
+  if (e.paralaxe != null && isFinite(Number(e.paralaxe))) no.dataset.paralaxe = Number(e.paralaxe);
+
   if (e.material) {
     no.dataset.material = e.material;
     if (e.raio != null) no.style.borderRadius = _px(e.raio);
@@ -1467,7 +1472,7 @@ function desenharConectores(cena, elementos, W, H) {
 
 /* ------------------------------------------------------------------ cena  */
 
-function renderCena(cena, doc, op) {
+function renderCenaBase(cena, doc, op) {
   op = op || {};
   cena = cena || {};
   var W = doc.largura || 1920, H = doc.altura || 1080;
@@ -1728,4 +1733,120 @@ function comporCabecaCorpo(fluxo, layout, nCabeca, nCorpo) {
   filhos[filhos.length - 1].classList.add("corpo-fim");
 }
 
-if (typeof module !== "undefined" && module.exports) module.exports = { renderCena: renderCena };
+
+/* ══ A CÂMERA DA CENA ══════════════════════════════════════════════════════
+ *
+ * `chaves` move UM elemento. O que faltava era mover o QUADRO: a cena inteira
+ * se aproximando enquanto o texto entra, a panorâmica que atravessa a arte, o
+ * leve giro que tira a cara de página parada. É a câmera do After Effects, e
+ * sem ela todo movimento nasce preso ao elemento — o vídeo parece um slide com
+ * animação, que é exatamente a reclamação.
+ *
+ * COMO FUNCIONA: o conteúdo da cena vai para dentro de um `.palco`, e a câmera
+ * anima o palco com a mesma máquina de chaves dos elementos (mesma curva,
+ * mesma interpolação, mesma conta de duração). O FUNDO fica onde está, na raiz
+ * da cena: é o que dá profundidade de graça — o quadro anda sobre o fundo em
+ * vez de arrastar tudo junto, que é como um zoom de câmera se comporta.
+ *
+ * PARALAXE: um elemento com `paralaxe` anda MAIS (>1, perto da câmera) ou
+ * MENOS (<1, ao longe) que o palco. Como ele já pode ter as próprias chaves, a
+ * diferença vai num embrulho em volta dele — duas animações no mesmo nó
+ * disputariam a mesma propriedade `transform`, e a segunda ganharia calada.
+ */
+
+// Movimentos com NOME, porque quem escreve o documento não quer pensar em
+// chave: são os quatro que aparecem em toda peça de motion.
+var CAMERAS = {
+  aproximar: [{ t: 0, escala: 1 }, { t: 1, escala: 1.12 }],
+  afastar: [{ t: 0, escala: 1.12 }, { t: 1, escala: 1 }],
+  "pan-direita": [{ t: 0, x: -70 }, { t: 1, x: 70 }],
+  "pan-esquerda": [{ t: 0, x: 70 }, { t: 1, x: -70 }],
+  subir: [{ t: 0, y: 60 }, { t: 1, y: -60 }],
+  descer: [{ t: 0, y: -60 }, { t: 1, y: 60 }],
+  // O "empurrão" é o zoom com um grau de giro: é o que dá mão humana ao quadro.
+  empurrar: [{ t: 0, escala: 1.02, giro: -0.6 }, { t: 1, escala: 1.14, giro: 0.3 }],
+  balanco: [{ t: 0, x: -18, giro: -0.5 }, { t: 0.5, x: 12, giro: 0.4 }, { t: 1, x: -6, giro: -0.2 }],
+};
+
+function chavesDaCamera(camera) {
+  if (!camera) return null;
+  if (typeof camera === "string") return CAMERAS[camera] ? CAMERAS[camera].slice() : null;
+  if (Array.isArray(camera)) return camera.slice();
+  if (camera.chaves && camera.chaves.length) return camera.chaves.slice();
+  if (camera.movimento && CAMERAS[camera.movimento]) return CAMERAS[camera.movimento].slice();
+  return null;
+}
+
+/* A chave do elemento de paralaxe: a da câmera, menos a que o palco já deu.
+   Fator 0 devolve nada (anda com o palco, que é o padrão). */
+function chavesDeParalaxe(chaves, fator) {
+  var f = fator - 1;
+  if (!f) return null;
+  return chaves.map(function (k) {
+    var nova = { t: _numero(k.t, 0) };
+    if (typeof k.x === "number") nova.x = k.x * f;
+    if (typeof k.y === "number") nova.y = k.y * f;
+    if (typeof k.escala === "number") nova.escala = 1 + (k.escala - 1) * f;
+    return nova;
+  });
+}
+
+function aplicarCamera(no, cena, op) {
+  var chaves = chavesDaCamera(cena.camera);
+  if (!chaves || !chaves.length || !op.animar) return no;
+
+  var palco = document.createElement("div");
+  palco.className = "palco";
+  while (no.firstChild) palco.appendChild(no.firstChild);
+  no.appendChild(palco);
+
+  var ctx = { raiz: no, duracao: cena.duracao || 4, animar: true };
+  aplicarChaves(palco, {
+    chaves: chaves,
+    suavizar: (cena.camera && cena.camera.suavizar) || "suave",
+  }, ctx);
+
+  /* PARALAXE — e o cuidado que decide se isto funciona ou quebra o layout.
+     · Elemento SEM animação própria recebe a diferença direto: é o caso
+       comum, e assim nada muda no DOM.
+     · Elemento que JÁ anima (tem chaves suas) precisa de um embrulho —
+       duas animações no mesmo nó disputam `transform` e a segunda ganha
+       calada. Embrulhar só é seguro quando ele está posicionado em
+       absoluto; no fluxo, o embrulho viraria um filho a mais no flex e
+       mudaria o espaçamento da cena. Nesse caso a paralaxe é ignorada, e
+       vale a animação do elemento, que é a mais específica. */
+  var comProfundidade = palco.querySelectorAll("[data-paralaxe]");
+  Array.prototype.forEach.call(comProfundidade, function (el) {
+    var fator = parseFloat(el.getAttribute("data-paralaxe"));
+    if (!isFinite(fator) || fator === 1) return;
+    var extras = chavesDeParalaxe(chaves, fator);
+    if (!extras) return;
+    var suave = (cena.camera && cena.camera.suavizar) || "suave";
+
+    if (!el.style.animationName) {
+      aplicarChaves(el, { chaves: extras, suavizar: suave }, ctx);
+      return;
+    }
+    if (el.style.position !== "absolute") return;
+
+    var capa = document.createElement("div");
+    capa.className = "paralaxe";
+    capa.style.position = "absolute";
+    ["left", "top", "right", "bottom", "width", "height"].forEach(function (k) {
+      capa.style[k] = el.style[k];
+      el.style[k] = "";
+    });
+    el.style.position = "relative";
+    el.parentNode.insertBefore(capa, el);
+    capa.appendChild(el);
+    aplicarChaves(capa, { chaves: extras, suavizar: suave }, ctx);
+  });
+  return no;
+}
+
+function renderCena(cena, doc, op) {
+  var no = renderCenaBase(cena, doc, op);
+  return aplicarCamera(no, cena || {}, op || {});
+}
+
+if (typeof module !== "undefined" && module.exports) module.exports = { renderCena: renderCena, CAMERAS: CAMERAS };

package/studio/web/render.css

@@ -1332,3 +1332,21 @@
   column-gap: calc(var(--u, 19px) * 3);
 }
 .cena .fluxo[data-composicao="cabeca-corpo"] .el.numeros .num b { white-space: nowrap; }
+
+/* ─────────────────────────────────────────────────────────── câmera ────
+   O palco é o conteúdo da cena; a câmera anima ele. O FUNDO fica na raiz
+   de propósito: o quadro anda sobre o fundo, como faz uma câmera, em vez
+   de arrastar tudo junto — é daí que vem a profundidade sem custo.
+
+   `inset: 0` repete a geometria que o `.fluxo` já tinha, para o embrulho
+   não mudar uma única posição de elemento quando a cena não tem câmera. */
+.cena > .palco {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  transform-origin: 50% 50%;
+  will-change: transform;
+}
+/* O embrulho de paralaxe só existe em volta de elemento posicionado, e
+   herda a caixa dele — ver o comentário em render.js. */
+.cena .paralaxe { transform-origin: 50% 50%; will-change: transform; }