primocode 10.17.1 → 10.19.0

package/kits/memphis/elementos/base.ts

@@ -0,0 +1,78 @@
+// Base do kit memphis: cores, fontes, curvas, passo e medidas. Todo número visual sai daqui.
+// Os elementos importam só este arquivo, 'react' e 'remotion'.
+import {continueRender, delayRender, useCurrentFrame} from 'remotion';
+import fonte0 from '../assets/fontes/bowlby-one.woff2';
+import fonte1 from '../assets/fontes/dm-sans-800.woff2';
+
+// ---------- tela ----------
+export const LARGURA = 1080, ALTURA = 1920, FPS = 30;
+export const SEGURA = {topo: 168, base: 1330, lado: 80};
+export const LARGURA_UTIL = LARGURA - SEGURA.lado * 2; // 920 px
+
+// ---------- cor ----------
+export const COR = {
+  "amarelo": "#FFE45E",
+  "amareloEscuro": "#F2C800",
+  "rosa": "#FF4FA3",
+  "turquesa": "#19D3C5",
+  "roxo": "#6C2BD9",
+  "azul": "#2D5BFF",
+  "laranja": "#FF7A1A",
+  "preto": "#111111",
+  "branco": "#FFFFFF"
+};
+
+// ---------- fonte ----------
+export const FONTE_TITULO = '"MP Bowlby One", Impact, sans-serif';
+export const FONTE_TEXTO = '"MP DM Sans", system-ui, sans-serif';
+const FONTES: [string, string, string][] = [['MP Bowlby One', fonte0, '400'], ['MP DM Sans', fonte1, '800']];
+if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__k_memphis) {
+  (globalThis as Record<string, unknown>).__k_memphis = true;
+  const h = delayRender('memphis: fontes');
+  Promise.all(FONTES.map(([nome, url, peso]) => new FontFace(nome, `url(${url}) format('woff2')`, {weight: peso, style: 'normal'}).load().then((ff) => {document.fonts.add(ff);}).catch(() => undefined)))
+    .then(() => continueRender(h));
+}
+
+// ---------- tempo e curva ----------
+/** passo da animação: 1 = liso, 2 ou 3 = movimento em passos (stop-motion / 8 bits) */
+export const PASSO = 1;
+export const q = (f: number) => Math.floor(f / PASSO) * PASSO;
+/** quadro atual da cena, já em passos */
+export const useF = () => q(useCurrentFrame());
+export const c01 = (t: number) => Math.max(0, Math.min(1, t));
+/** progresso 0..1 de f entre a e b */
+export const seg = (f: number, a: number, b: number) => c01((f - a) / (b - a));
+/** saída rápida e pouso longo */
+export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
+/** passa do alvo e volta (overshoot ~2.6) */
+export const mola = (t: number, s = 2.6) => { const x = c01(t) - 1; return x * x * ((s + 1) * x + s) + 1; };
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+/** ruído determinístico 0..1 */
+export const ruido = (n: number) => { const x = Math.sin(n * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x); };
+/** uma batida da trilha do kit (124 bpm) em quadros */
+export const BATIDA = 14.52;
+
+// ---------- medida de texto ----------
+let canvas: HTMLCanvasElement | null = null;
+const cache = new Map<string, number>();
+export const larguraTexto = (texto: string, tamanho: number, familia = FONTE_TITULO, peso = 400, trackingEm = 0): number => {
+  const chave = `${texto}|${tamanho}|${familia}|${peso}|${trackingEm}`;
+  const c = cache.get(chave); if (c !== undefined) return c;
+  if (typeof document === 'undefined') return texto.length * tamanho * 0.6;
+  canvas = canvas || document.createElement('canvas');
+  const ctx = canvas.getContext('2d'); if (!ctx) return texto.length * tamanho * 0.6;
+  const fonte = `${peso} ${tamanho}px ${familia}`;
+  ctx.font = fonte;
+  const w = ctx.measureText(texto).width + texto.length * trackingEm * tamanho;
+  if (document.fonts.check(fonte)) cache.set(chave, w);
+  return w;
+};
+/** o maior tamanho até `tamanho` em que o texto cabe em `largura` */
+export const caber = (texto: string, tamanho: number, largura = LARGURA_UTIL, familia = FONTE_TITULO, peso = 400, trackingEm = 0) => {
+  const w = larguraTexto(texto, tamanho, familia, peso, trackingEm);
+  return w > largura ? Math.floor(tamanho * (largura / w)) : tamanho;
+};
+/** tira os asteriscos de destaque: "Usar *IA*" -> "Usar IA" */
+export const textoLimpo = (t: string) => t.replace(/\*/g, '');
+/** divide "Usar *IA* já" em [{t:'Usar ',d:false},{t:'IA',d:true},{t:' já',d:false}] */
+export const comDestaque = (t: string) => t.split('*').map((p, i) => ({t: p, d: i % 2 === 1})).filter((p) => p.t !== '');

package/kits/memphis/elementos/index.ts

@@ -0,0 +1,17 @@
+// Tudo que o kit memphis oferece.
+export * from './base';
+export {Fundo} from './Fundo';
+export {Overlay} from './Overlay';
+export {Camera, posCamera} from './Camera';
+export {Cena, useDuracaoCena, SOBREPOE} from './Cena';
+export {AssinaturaMarca} from './AssinaturaMarca';
+export {CartaoMemphis} from './CartaoMemphis';
+export {FitaMarquee} from './FitaMarquee';
+export {FormasMemphis} from './FormasMemphis';
+export {ListaPilulas} from './ListaPilulas';
+export {NumeroGigante} from './NumeroGigante';
+export {TituloMemphis} from './TituloMemphis';
+export {Efeito, Trilha, SONS} from './Som';
+export type {NomeSom} from './Som';
+export {Montagem, ELEMENTOS} from './Montagem';
+export type {Plano, CenaPlano, Camada} from './Montagem';

package/kits/memphis/exemplos/plano.json

@@ -0,0 +1,314 @@
+{
+  "kit": "memphis",
+  "roteiro": "exemplos/roteiro.md",
+  "duracao": 240,
+  "trilha": {
+    "volume": 0.5
+  },
+  "cenas": [
+    {
+      "batida": "gancho",
+      "de": 0,
+      "ate": 46,
+      "entrada": "nenhuma",
+      "naTela": "\"VEM / PRA / FESTA!\" em placas + formas",
+      "camadas": [
+        {
+          "elemento": "FormasMemphis",
+          "props": {
+            "preset": "cantos"
+          }
+        },
+        {
+          "elemento": "TituloMemphis",
+          "props": {
+            "linhas": [
+              "VEM",
+              "PRA",
+              "FESTA!"
+            ],
+            "inicio": 2,
+            "intervalo": 6,
+            "y": 760,
+            "tamanho": 250
+          }
+        }
+      ],
+      "socos": [
+        20
+      ],
+      "sons": [
+        {
+          "som": "whoosh-entra",
+          "em": 0
+        },
+        {
+          "som": "pop-palavra",
+          "em": 3
+        },
+        {
+          "som": "pop-palavra",
+          "em": 9
+        },
+        {
+          "som": "impacto",
+          "em": 15
+        }
+      ]
+    },
+    {
+      "batida": "prova",
+      "de": 46,
+      "ate": 88,
+      "entrada": "zoom",
+      "naTela": "\"50+\" contando + rótulo \"ATRAÇÕES\"",
+      "camadas": [
+        {
+          "elemento": "FormasMemphis",
+          "props": {
+            "preset": "chuva"
+          }
+        },
+        {
+          "elemento": "NumeroGigante",
+          "props": {
+            "valor": 50,
+            "sufixo": "+",
+            "rotulo": "ATRAÇÕES",
+            "fundo": "#FF4FA3",
+            "y": 720,
+            "diametro": 880
+          }
+        }
+      ],
+      "sons": [
+        {
+          "som": "whoosh-entra",
+          "em": -1
+        },
+        {
+          "som": "pop-cartao",
+          "em": 4
+        },
+        {
+          "som": "impacto",
+          "em": 22
+        },
+        {
+          "som": "pop-palavra",
+          "em": 20
+        }
+      ]
+    },
+    {
+      "batida": "virada",
+      "de": 88,
+      "ate": 130,
+      "entrada": "direita",
+      "naTela": "faixas \"SHOWS / ARTE / COMIDA\" + placa \"ZEBRA FEST\"",
+      "camadas": [
+        {
+          "elemento": "FitaMarquee",
+          "props": {
+            "faixas": [
+              {
+                "palavras": [
+                  "SHOWS",
+                  "ARTE",
+                  "COMIDA"
+                ],
+                "y": 380,
+                "rot": -9,
+                "fundo": "#111111",
+                "cor": "#FFE45E"
+              },
+              {
+                "palavras": [
+                  "FESTA",
+                  "COR",
+                  "ENERGIA"
+                ],
+                "y": 1120,
+                "rot": 7,
+                "fundo": "#2D5BFF",
+                "cor": "#FFFFFF",
+                "sentido": -1
+              }
+            ]
+          }
+        },
+        {
+          "elemento": "TituloMemphis",
+          "props": {
+            "linhas": [
+              "ZEBRA",
+              "FEST"
+            ],
+            "inicio": 6,
+            "intervalo": 6,
+            "y": 760,
+            "tamanho": 270,
+            "fundos": [
+              "#19D3C5",
+              "#FF4FA3"
+            ]
+          }
+        }
+      ],
+      "sons": [
+        {
+          "som": "swoosh",
+          "em": -1
+        },
+        {
+          "som": "pop-palavra",
+          "em": 8
+        },
+        {
+          "som": "pop-palavra",
+          "em": 14
+        }
+      ]
+    },
+    {
+      "batida": "lista",
+      "de": 130,
+      "ate": 168,
+      "entrada": "esquerda",
+      "naTela": "pílulas MÚSICA / COMIDA / ARTE / BALADA",
+      "camadas": [
+        {
+          "elemento": "FormasMemphis",
+          "props": {
+            "formas": [
+              {
+                "tipo": "zigue",
+                "x": 880,
+                "y": 230,
+                "tam": 260,
+                "cor": "#6C2BD9",
+                "rot": 10
+              },
+              {
+                "tipo": "circulo",
+                "x": 170,
+                "y": 1250,
+                "tam": 230,
+                "cor": "#FF7A1A"
+              },
+              {
+                "tipo": "mais",
+                "x": 920,
+                "y": 1250,
+                "tam": 140,
+                "cor": "#111111"
+              }
+            ]
+          }
+        },
+        {
+          "elemento": "ListaPilulas",
+          "props": {
+            "itens": [
+              "MÚSICA",
+              "COMIDA",
+              "ARTE",
+              "BALADA"
+            ],
+            "intervalo": 6,
+            "y": 760,
+            "tamanho": 130
+          }
+        }
+      ],
+      "sons": [
+        {
+          "som": "whoosh-entra",
+          "em": -1
+        },
+        {
+          "som": "pop-cartao",
+          "em": 2
+        },
+        {
+          "som": "pop-cartao",
+          "em": 8
+        },
+        {
+          "som": "pop-cartao",
+          "em": 14
+        }
+      ]
+    },
+    {
+      "batida": "data",
+      "de": 168,
+      "ate": 206,
+      "entrada": "zoom",
+      "naTela": "cartão \"21 NOV\" + adesivo GRÁTIS + SÃO PAULO",
+      "camadas": [
+        {
+          "elemento": "FormasMemphis",
+          "props": {
+            "preset": "cantos"
+          }
+        },
+        {
+          "elemento": "CartaoMemphis",
+          "props": {
+            "texto": "21\nNOV",
+            "sub": "SÃO PAULO",
+            "adesivo": "GRÁTIS",
+            "fundo": "#2D5BFF",
+            "y": 740,
+            "tamanho": 300,
+            "altura": 820
+          }
+        }
+      ],
+      "sons": [
+        {
+          "som": "subida",
+          "em": -10,
+          "volume": 0.55
+        },
+        {
+          "som": "impacto",
+          "em": 3
+        },
+        {
+          "som": "pop-cartao",
+          "em": 11
+        }
+      ]
+    },
+    {
+      "batida": "marca",
+      "de": 206,
+      "ate": 240,
+      "entrada": "subir",
+      "naTela": "logo de formas + placa \"ZEBRA\" + 21 de novembro + zebrafest.exemplo",
+      "camadas": [
+        {
+          "elemento": "AssinaturaMarca",
+          "props": {
+            "nome": "ZEBRA",
+            "detalhe": "FEST · 21 DE NOVEMBRO",
+            "endereco": "zebrafest.exemplo",
+            "inicio": 0
+          }
+        }
+      ],
+      "sons": [
+        {
+          "som": "assinatura",
+          "em": 2
+        },
+        {
+          "som": "clique",
+          "em": 24
+        }
+      ]
+    }
+  ]
+}

package/kits/memphis/exemplos/roteiro.md

@@ -0,0 +1,20 @@
+# Roteiro de demonstração · "Zebra Fest" (fictício)
+
+Pedido: *"um reels de 8 s anunciando o Zebra Fest, festival de música e arte, dia 21 de novembro, entrada grátis. Estilo Memphis colorido."*
+
+Sem narração: os cortes seguem a trilha (1 batida = 14.52 quadros).
+
+| # | batida | quadros | na tela | elemento | som |
+|---|---|---|---|---|---|
+| 1 | gancho | 0–46 | "VEM / PRA / FESTA!" em placas + formas | FormasMemphis + TituloMemphis | whoosh-entra, pop-palavra, impacto |
+| 2 | prova | 46–88 | "50+" contando + rótulo "ATRAÇÕES" | FormasMemphis + NumeroGigante | whoosh-entra, pop-cartao, impacto, pop-palavra |
+| 3 | virada | 88–130 | faixas "SHOWS / ARTE / COMIDA" + placa "ZEBRA FEST" | FitaMarquee + TituloMemphis | swoosh, pop-palavra |
+| 4 | lista | 130–168 | pílulas MÚSICA / COMIDA / ARTE / BALADA | FormasMemphis + ListaPilulas | whoosh-entra, pop-cartao |
+| 5 | data | 168–206 | cartão "21 NOV" + adesivo GRÁTIS + SÃO PAULO | FormasMemphis + CartaoMemphis | subida, impacto, pop-cartao |
+| 6 | marca | 206–240 | logo de formas + placa "ZEBRA" + 21 de novembro + zebrafest.exemplo | AssinaturaMarca | assinatura, clique |
+
+Como a IA chegou nisso:
+1. Cortou em frases curtas ("Vem pra festa!", "50+ atrações", "Zebra Fest", "21 nov").
+2. Pegou as obrigatórias (gancho, virada, marca) e as do pedido (prova com número, lista, data).
+3. Encaixou os cortes nas batidas de 124 bpm (14,5 quadros) e alternou o lado de entrada de cada placa.
+4. Escreveu `plano.json`; `preview.tsx` passa para `Montagem`.

package/kits/memphis/preview.tsx

@@ -0,0 +1,12 @@
+// Preview do kit: demo de 8 s montada SÓ com os elementos do kit, a partir de exemplos/plano.json.
+// O estúdio registra isto como `Kit-memphis`.
+import React from 'react';
+import {Montagem, Plano} from './elementos';
+import plano from './exemplos/plano.json';
+
+
+const arquivos: Record<string, string> = {};
+
+const Preview: React.FC = () => <Montagem plano={plano as Plano} arquivos={arquivos} />;
+
+export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 40, Componente: Preview};

package/kits/memphis/receita.json

@@ -0,0 +1,174 @@
+{
+  "kit": "memphis",
+  "fps": 30,
+  "batida_trilha_quadros": 14.52,
+  "duracao_video_s": [
+    6,
+    60
+  ],
+  "ordem_sugerida": [
+    "gancho",
+    "prova",
+    "virada",
+    "lista",
+    "data",
+    "marca"
+  ],
+  "batidas": [
+    {
+      "nome": "gancho",
+      "obrigatoria": true,
+      "duracao": [
+        40,
+        75
+      ],
+      "elementos": [
+        "TituloMemphis",
+        "FormasMemphis"
+      ],
+      "entrada": [
+        "nenhuma"
+      ],
+      "sons": [
+        "whoosh-entra",
+        "pop-palavra",
+        "impacto"
+      ],
+      "nota": "2–3 placas que estouram de lados opostos; formas nos cantos."
+    },
+    {
+      "nome": "prova",
+      "obrigatoria": false,
+      "duracao": [
+        36,
+        90
+      ],
+      "elementos": [
+        "NumeroGigante",
+        "FormasMemphis"
+      ],
+      "entrada": [
+        "zoom"
+      ],
+      "sons": [
+        "pop-cartao",
+        "impacto"
+      ],
+      "nota": "um número que sobe contando e um rótulo."
+    },
+    {
+      "nome": "virada",
+      "obrigatoria": true,
+      "duracao": [
+        40,
+        90
+      ],
+      "elementos": [
+        "FitaMarquee",
+        "TituloMemphis"
+      ],
+      "entrada": [
+        "direita"
+      ],
+      "sons": [
+        "swoosh",
+        "pop-palavra"
+      ],
+      "nota": "nome do produto/evento sobre faixas cruzadas."
+    },
+    {
+      "nome": "lista",
+      "obrigatoria": false,
+      "duracao": [
+        36,
+        80
+      ],
+      "elementos": [
+        "ListaPilulas"
+      ],
+      "entrada": [
+        "esquerda"
+      ],
+      "sons": [
+        "pop-cartao"
+      ],
+      "nota": "3–5 pílulas em fila."
+    },
+    {
+      "nome": "data",
+      "obrigatoria": false,
+      "duracao": [
+        30,
+        70
+      ],
+      "elementos": [
+        "CartaoMemphis",
+        "FormasMemphis"
+      ],
+      "entrada": [
+        "zoom"
+      ],
+      "sons": [
+        "subida",
+        "impacto",
+        "pop-cartao"
+      ],
+      "nota": "o cartão grande de dia e mês, com adesivo."
+    },
+    {
+      "nome": "marca",
+      "obrigatoria": true,
+      "duracao": [
+        40,
+        120
+      ],
+      "elementos": [
+        "AssinaturaMarca"
+      ],
+      "entrada": [
+        "subir"
+      ],
+      "sons": [
+        "assinatura",
+        "clique"
+      ],
+      "nota": "sempre a última: logo de formas + nome em placa amarela."
+    }
+  ],
+  "transicoes": [
+    {
+      "nome": "subir",
+      "quadros": 12,
+      "como": "entra 260 px de baixo com overshoot; a anterior sai 500 px para a esquerda girando 8°"
+    },
+    {
+      "nome": "zoom",
+      "quadros": 12,
+      "como": "entra de 1,9x para 1"
+    },
+    {
+      "nome": "direita",
+      "quadros": 12,
+      "como": "entra 780 px da direita"
+    },
+    {
+      "nome": "esquerda",
+      "quadros": 12,
+      "como": "entra 780 px da esquerda"
+    },
+    {
+      "nome": "nenhuma",
+      "quadros": 0,
+      "como": "os elementos entram sozinhos (gancho)"
+    }
+  ],
+  "camera": {
+    "deriva": "sempre",
+    "socos": "início de cada cena + palavra grande"
+  },
+  "trilha": {
+    "arquivo": "assets/trilha/trilha.mp3",
+    "volume": 0.5,
+    "com_narracao": 0.25
+  }
+}

package/kits/memphis/regras/area-segura.md

@@ -0,0 +1,14 @@
+# Área segura (9:16, 1080×1920)
+
+- Tudo que se lê fica entre **y = 168** e **y = 1330** e entre **x = 80** e **x = 1000** (920 px úteis). Abaixo de 1330 só fundo e o que sangra.
+- Herói com 40% ou mais da altura ou da largura; no máximo 2 apoios por cena.
+
+| uso | y de referência (px) |
+|---|---|
+| título de 3 placas (centro) | 700 |
+| número gigante (centro do círculo) | 720 |
+| faixas marquee | 420 / 760 / 1100 |
+| lista de pílulas (centro) | 740 |
+| cartão de data (centro) | 740 |
+| placa do nome na assinatura (topo) | 520 |
+| endereço | 1180–1250 |

package/kits/memphis/regras/cor.md

@@ -0,0 +1,17 @@
+# Cor
+
+| token | hex | uso |
+|---|---|---|
+| `amarelo` | #FFE45E | chão |
+| `amareloEscuro` | #F2C800 | pontos do chão |
+| `rosa` | #FF4FA3 | placa, círculo, adesivo |
+| `turquesa` | #19D3C5 | placa, triângulo, rótulo |
+| `roxo` | #6C2BD9 | placa, onda |
+| `azul` | #2D5BFF | cartão, zigue |
+| `laranja` | #FF7A1A | placa, meia-lua |
+| `preto` | #111111 | contorno 8–12 px, sombra dura, faixas |
+| `branco` | #FFFFFF | texto sobre rosa/roxo/azul |
+
+- Contorno: `border: 8px solid #111`. Sombra dura: `box-shadow: 14px 14px 0 #111` (cartão grande: 22–24 px). Nada de blur.
+- Texto claro (branco) só sobre rosa, roxo, azul e laranja; texto preto sobre amarelo e turquesa.
+- O cliente pode trocar: a lista de cores de destaque (`rosa`, `turquesa`, `roxo`, `azul`, `laranja`) e o `amarelo` do chão.

package/kits/memphis/regras/movimento.md

@@ -0,0 +1,18 @@
+# Movimento
+
+- Tela 1080×1920, 30 fps. Curva padrão: `mola(t) com overshoot 2,6 (easeOutBack forte) em 11–12 quadros`.
+- Passo de animação: **1 quadro(s)** por posição (liso).
+- Câmera: zoom base 1.025, deriva ±18 px × ±14 px, giro ±0.012 rad, soco de 0.04 em cada batida (decai em 7 quadros).
+- Toda entrada passa do alvo e volta (overshoot de 2,6). Nenhum quadro parado.
+
+| movimento | quadros | valores |
+|---|---|---|
+| placa estoura | 11 | entra 900 px do lado (alterna), escala 0,4 → 1 com mola 2,6, gira de ±15° a ±3° |
+| forma estoura | 12 | escala 0 → 1 com mola 3, gira 120° até a posição; depois flutua ±14 px |
+| cartão | 12 | escala 0 → 1 com mola 2,4, rotação inicial 14° a mais; adesivo 10 quadros depois |
+| pílula | 11 + 6 entre itens | entra 1000 px do lado com giro de 20° |
+| faixa | 12 | escala X 0 → 1; texto corre 22 px/quadro |
+| número | 22 | sobe contando; círculo gira −60° → 0 |
+| câmera | contínuo | zoom 1,025 ± 0,015, giro ±0,012 rad, soco 0,04 |
+
+- Cena entra em 12 quadros e sobrepõe 10 com a próxima; cortes a cada 18–45 quadros.

package/kits/memphis/regras/ritmo.md

@@ -0,0 +1,15 @@
+# Ritmo
+
+- Trilha a **124 bpm**: 1 batida = **14.52 quadros** (0.48 s). Corte em múltiplos de batida (7, 15, 29 quadros).
+
+| batida | duração s | quadros |
+|---|---|---|
+| gancho | 1.3–2.5 | 40–75 |
+| prova | 1.2–3.0 | 36–90 |
+| virada | 1.3–3.0 | 40–90 |
+| lista | 1.2–2.7 | 36–80 |
+| data | 1.0–2.3 | 30–70 |
+| marca | 1.3–4.0 | 40–120 |
+
+- Tempo mínimo de leitura: 1 palavra = 8 quadros, frase de 3 palavras = 24 quadros.
+- Troca de cena a cada 0,6–1,5 s (18–45 quadros). Vídeo de 6–60 s.