primocode 11.0.0 → 11.1.0

package/kits/depoimento/elementos/base.ts

@@ -1,83 +0,0 @@
-// Base do kit depoimento: cores, fontes, curvas e medidas. Todo número visual sai daqui.
-// Os elementos importam só este arquivo, 'react' e 'remotion'. Nada de fora da pasta do kit.
-import {continueRender, delayRender} from 'remotion';
-import fonte0Url from '../assets/fontes/spacegrotesk.woff2';
-import fonte1Url from '../assets/fontes/newsreader-i.woff2';
-
-// ---------- tela ----------
-export const LARGURA = 1080, ALTURA = 1920, FPS = 30;
-// área segura (Reels/TikTok): o que se lê fica entre estas linhas
-export const SEGURA = {topo: 168, base: 1330, lado: 80};
-export const LARGURA_UTIL = LARGURA - SEGURA.lado * 2; // 920 px
-
-// ---------- cor ----------
-export const COR = {
-  chao: '#F7A8C0',
-  chaoFundo: '#EE86A8',
-  vinho: '#35101F',
-  creme: '#FFF8EE',
-  estrela: '#FFB800',
-  menta: '#2BB88A',
-  rosaClaro: '#FFD3E0'
-};
-
-
-// ---------- fonte ----------
-// Nome de família com o prefixo do kit, pra não colidir com outro kit no mesmo estúdio.
-export const FONTE = "\"DP Space Grotesk\", system-ui, sans-serif";
-export const SERIFA = "\"DP Newsreader\", Georgia, serif";
-const fontes = [
-  {nome: 'DP Space Grotesk', url: fonte0Url, peso: '500 700', estilo: 'normal'},
-  {nome: 'DP Newsreader', url: fonte1Url, peso: '400 600', estilo: 'italic'},
-];
-if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__depoimento) {
-  (globalThis as Record<string, unknown>).__depoimento = true;
-  for (const f of fontes) {
-    const h = delayRender('depoimento: ' + f.nome);
-    new FontFace(f.nome, `url(${f.url}) format('woff2')`, {weight: f.peso, style: f.estilo}).load()
-      .then((ff) => {document.fonts.add(ff); continueRender(h);})
-      .catch(() => continueRender(h));
-  }
-}
-
-// ---------- tempo e curva ----------
-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, parecida com cubic-bezier(.2,.8,.2,1) */
-export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
-/** pouso com overshoot (passa 1.1x e volta), toda entrada usa esta */
-export const ov = (t: number) => { const x = c01(t) - 1; const k = 2.2; return 1 + (k + 1) * x * x * x + k * x * x; };
-export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
-/** uma batida da trilha do kit (104 bpm) em quadros */
-export const BATIDA = 17.3;
-
-// ---------- medida de texto ----------
-// Mede com canvas (só guarda no cache depois que a fonte carregou) pra encolher a linha que passaria
-// da largura útil. Nunca deixa palavra cortada.
-let canvas: HTMLCanvasElement | null = null;
-const cache = new Map<string, number>();
-export const larguraTexto = (texto: string, tamanho: number, peso = 700, trackingEm = -0.03, familia = 'DP Space Grotesk'): number => {
-  const chave = `${texto}|${tamanho}|${peso}|${trackingEm}|${familia}`;
-  const c = cache.get(chave); if (c !== undefined) return c;
-  if (typeof document === 'undefined') return texto.length * tamanho * 0.56;
-  canvas = canvas || document.createElement('canvas');
-  const ctx = canvas.getContext('2d'); if (!ctx) return texto.length * tamanho * 0.56;
-  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, peso = 700, trackingEm = -0.03, familia = 'DP Space Grotesk') => {
-  const w = larguraTexto(texto, tamanho, peso, trackingEm, familia);
-  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, '');
-/** quebra "a *b* c" em partes {t, d}: d = destaque */
-export const partes = (t: string) => t.split(/(\*[^*]+\*)/).filter(Boolean).map((s) => s.startsWith('*') ? {t: s.slice(1, -1), d: true} : {t: s, d: false});
-export const SOMBRA_CARTAO = '0 50px 90px rgba(53,16,31,.30), 0 12px 28px rgba(53,16,31,.16)';
-/** estrela de 5 pontas centrada em 0,0 com raio r (pontos do polígono) */
-export const pontosEstrela = (r: number) => Array.from({length: 10}, (_, i) => { const a = -Math.PI / 2 + (i * Math.PI) / 5, k = i % 2 ? 0.46 : 1; return `${(Math.cos(a) * r * k).toFixed(1)},${(Math.sin(a) * r * k).toFixed(1)}`; }).join(' ');

package/kits/depoimento/elementos/index.ts

@@ -1,16 +0,0 @@
-// Tudo que o kit depoimento oferece. A IA monta o vídeo combinando isto (ou escrevendo um plano pra Montagem).
-export * from './base';
-export {Fundo} from './Fundo';
-export {Camera, posCamera} from './Camera';
-export {Cena, useDuracaoCena, SOBREPOE} from './Cena';
-export {CartaoDepoimento} from './CartaoDepoimento';
-export {Estrelas} from './Estrelas';
-export {PilhaCartoes} from './PilhaCartoes';
-export {NotaGigante} from './NotaGigante';
-export {FaixaAvatares} from './FaixaAvatares';
-export {SeloVerificado} from './SeloVerificado';
-export {Avatar} from './Avatar';
-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/depoimento/exemplos/plano.json

@@ -1,57 +0,0 @@
-{
-  "kit": "depoimento",
-  "roteiro": "exemplos/roteiro.md",
-  "duracao": 240,
-  "trilha": {"volume": 0.5},
-  "cenas": [
-    {
-      "batida": "gancho", "de": 0, "ate": 42, "entrada": "nenhuma",
-      "camadas": [
-        {"elemento": "NotaGigante", "props": {"valor": 4.9, "tamanho": 520, "total": 2318, "rotulo": "de {total} avaliações", "inicio": 0, "y": 760}}
-      ],
-      "socos": [22],
-      "sons": [{"som": "whoosh-entra", "em": 0}, {"som": "pop-palavra", "em": 6}, {"som": "estrela", "em": 18}, {"som": "impacto", "em": 22}]
-    },
-    {
-      "batida": "depoimento", "de": 42, "ate": 90, "entrada": "cortina",
-      "camadas": [
-        {"elemento": "CartaoDepoimento", "props": {"nome": "Ana Paula", "cargo": "dona de padaria", "texto": "Em duas semanas, o atendimento *ficou outro.*", "avatar": {"estilo": "longo", "pele": "#C98B63", "cabelo": "#2B1B17", "camisa": "#35101F", "fundo": "#FFD3E0"}, "inicio": 2, "y": 860, "rot": -3}}
-      ],
-      "socos": [14],
-      "sons": [{"som": "swoosh", "em": -1}, {"som": "pop-cartao", "em": 10}, {"som": "estrela", "em": 22}]
-    },
-    {
-      "batida": "pilha", "de": 90, "ate": 138, "entrada": "circulo",
-      "camadas": [
-        {"elemento": "PilhaCartoes", "props": {"cartoes": [
-          {"nome": "Carla Mendes", "cargo": "designer", "texto": "Simples de usar e *lindo.*", "avatar": {"estilo": "coque", "pele": "#F0C7A5", "cabelo": "#B5532A", "camisa": "#FF6F91", "fundo": "#CFEFE2"}},
-          {"nome": "Rafael Lima", "cargo": "professor", "texto": "Meus alunos *adoraram.*", "avatar": {"estilo": "curto", "pele": "#8D5A3B", "cabelo": "#1A1210", "camisa": "#2BB88A", "fundo": "#FFE08A"}},
-          {"nome": "Mateus Rocha", "cargo": "contador", "texto": "Economizei *horas* toda semana.", "avatar": {"estilo": "careca", "pele": "#E8B48C", "camisa": "#E8A33D", "fundo": "#FFD3E0"}}
-        ], "inicio": 0, "intervalo": 14, "y": 860}}
-      ],
-      "socos": [30, 44],
-      "sons": [{"som": "whoosh-entra", "em": -1}, {"som": "pop-cartao", "em": 6}, {"som": "swoosh", "em": 26}, {"som": "clique", "em": 40}]
-    },
-    {
-      "batida": "depoimento", "de": 138, "ate": 188, "entrada": "baixo",
-      "camadas": [
-        {"elemento": "CartaoDepoimento", "props": {"nome": "Mateus Rocha", "cargo": "contador", "texto": "Voltei a dormir. *Recomendo* de olhos fechados.", "avatar": {"estilo": "careca", "pele": "#E8B48C", "camisa": "#E8A33D", "fundo": "#FFE08A"}, "inicio": 2, "y": 860, "rot": 3, "de": "direita"}}
-      ],
-      "socos": [14],
-      "sons": [{"som": "swoosh", "em": -1}, {"som": "pop-cartao", "em": 10}, {"som": "estrela", "em": 22}, {"som": "pop-palavra", "em": 36}]
-    },
-    {
-      "batida": "prova", "de": 188, "ate": 240, "entrada": "cortina",
-      "camadas": [
-        {"elemento": "FaixaAvatares", "props": {"avatares": [
-          {"estilo": "longo", "pele": "#C98B63", "cabelo": "#2B1B17", "camisa": "#35101F", "fundo": "#FFD3E0"},
-          {"estilo": "curto", "pele": "#8D5A3B", "cabelo": "#1A1210", "camisa": "#2BB88A", "fundo": "#FFE08A"},
-          {"estilo": "coque", "pele": "#F0C7A5", "cabelo": "#B5532A", "camisa": "#FF6F91", "fundo": "#CFEFE2"}
-        ], "milhares": 12, "rotulo": "clientes felizes", "inicio": 2, "y": 700, "tamanho": 260}},
-        {"elemento": "SeloVerificado", "props": {"texto": "Cliente verificado", "inicio": 20, "y": 1130, "escala": 1.3}}
-      ],
-      "socos": [20],
-      "sons": [{"som": "whoosh-entra", "em": -1}, {"som": "pop-cartao", "em": 8}, {"som": "pop-palavra", "em": 16}, {"som": "verificado", "em": 26}, {"som": "assinatura", "em": 28}]
-    }
-  ]
-}

package/kits/depoimento/exemplos/roteiro.md

@@ -1,19 +0,0 @@
-# Roteiro de demonstração · "Doce Rota" (padaria fictícia)
-
-Pedido: *"um reels de 8 s com a nota 4,9 da Doce Rota, três depoimentos de clientes e '12 mil clientes felizes'."*
-
-Sem narração: os cortes seguem a trilha (1 batida = 17,3 quadros).
-
-| # | batida | quadros | na tela | elemento | som |
-|---|---|---|---|---|---|
-| 1 | gancho | 0–42 | "4,9" contando + 5 estrelas + "de 2.318 avaliações" | NotaGigante | whoosh, pop, estrela, impacto |
-| 2 | depoimento | 42–90 | Ana Paula: "Em duas semanas, o atendimento *ficou outro.*" | CartaoDepoimento | swoosh, pop, estrela |
-| 3 | pilha | 90–138 | Carla, Rafael e Mateus em 3 frases curtas, o de cima voando | PilhaCartoes | whoosh, pop, swoosh, clique |
-| 4 | depoimento | 138–188 | Mateus: "Voltei a dormir. *Recomendo* de olhos fechados." (vem da direita, +3°) | CartaoDepoimento | swoosh, pop, estrela, pop |
-| 5 | prova | 188–240 | 3 rostos + "+12 mil" + "clientes felizes" + selo "Cliente verificado" | FaixaAvatares, SeloVerificado | whoosh, pops, verificado, assinatura |
-
-Como a IA chegou nisso:
-1. Pôs a nota no gancho (é o que prende) e fechou com o volume (12 mil), que é a prova de escala.
-2. Usou 1 cartão grande de frase longa, 1 pilha de frases curtas e 1 cartão de volta, alternando inclinação (−3°, +3°) e origem (baixo, direita).
-3. Marcou uma palavra por frase com `*asteriscos*` (marca-texto) e cortou nas batidas da trilha (0, 42, 90, 138, 188).
-4. O `preview.tsx` passa o plano para `Montagem`, que só usa os elementos do kit.

package/kits/depoimento/preview.tsx

@@ -1,9 +0,0 @@
-// Preview do kit: o vídeo de demonstração (8 s) montado SÓ com os elementos do kit, a partir de exemplos/plano.json.
-// O estúdio registra isto como `Kit-depoimento`.
-import React from 'react';
-import {Montagem, Plano} from './elementos';
-import plano from './exemplos/plano.json';
-
-const Preview: React.FC = () => <Montagem plano={plano as Plano} />;
-
-export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 84, Componente: Preview};

package/kits/depoimento/receita.json

@@ -1,21 +0,0 @@
-{
-  "kit": "depoimento", "fps": 30, "batida_trilha_quadros": 17.3,
-  "duracao_video_s": [6, 40],
-  "ordem_sugerida": ["gancho", "depoimento", "pilha", "depoimento", "prova"],
-  "batidas": [
-    {"nome": "gancho", "obrigatoria": true, "duracao": [36, 48], "elementos": ["NotaGigante", "Estrelas"], "entrada": ["nenhuma"], "sons": ["whoosh-entra", "pop-palavra", "estrela", "impacto"], "nota": "a nota (4,9) conta e assenta; estrelas e total de avaliações embaixo. Sem nota, use Estrelas sozinha com raio 90."},
-    {"nome": "depoimento", "obrigatoria": true, "duracao": [42, 60], "elementos": ["CartaoDepoimento"], "entrada": ["cortina", "baixo", "circulo"], "sons": ["swoosh", "pop-cartao", "estrela", "pop-palavra"], "nota": "um cartão por cena, inclinação alternando −3° e +3°, vindo de baixo ou de lado. Pode repetir 2–3 vezes."},
-    {"nome": "pilha", "obrigatoria": false, "duracao": [42, 60], "elementos": ["PilhaCartoes"], "entrada": ["circulo", "flip"], "sons": ["whoosh-entra", "pop-cartao", "swoosh", "clique"], "nota": "3 depoimentos de até 35 caracteres; o de cima voa a cada 14–16 quadros."},
-    {"nome": "prova", "obrigatoria": true, "duracao": [48, 72], "elementos": ["FaixaAvatares", "SeloVerificado", "Estrelas", "Avatar"], "entrada": ["cortina", "baixo"], "sons": ["whoosh-entra", "pop-cartao", "verificado", "assinatura"], "nota": "rostos + contador + selo. Sempre a última."},
-    {"nome": "marca", "obrigatoria": false, "duracao": [36, 60], "elementos": ["Estrelas", "SeloVerificado"], "entrada": ["baixo"], "sons": ["assinatura"], "nota": "fecho opcional com o nome do produto em texto grande (use Estrelas raio 90 + o rótulo de FaixaAvatares)."}
-  ],
-  "transicoes": [
-    {"nome": "cortina", "quadros": 14, "como": "a cena nova aparece por uma faixa diagonal que varre da esquerda; a anterior encolhe 5%"},
-    {"nome": "baixo", "quadros": 14, "como": "revela de baixo pra cima (inset)"},
-    {"nome": "circulo", "quadros": 14, "como": "círculo que cresce de 0 a 150% a partir do centro (50%, 55%)"},
-    {"nome": "flip", "quadros": 14, "como": "gira em X de −80° a 0° pelo topo"},
-    {"nome": "nenhuma", "quadros": 0, "como": "sem janela; só no gancho"}
-  ],
-  "camera": {"deriva": "sempre", "socos": "início de cada cena + número assentando + cartão da pilha saindo"},
-  "trilha": {"arquivo": "assets/trilha/calor-104bpm.mp3", "volume": 0.5, "com_narracao": 0.25}
-}

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

@@ -1,17 +0,0 @@
-# Área segura (9:16, 1080×1920)
-
-- Todo texto lido: **y 168–1330**, **x 80–1000**. As estrelas de fundo sangram (são gráfico, não texto).
-- Cartão: x 100–980, altura 740–780, centro y 860 (ocupa 470–1250).
-
-| elemento | y de referência (centro) |
-|---|---|
-| nota gigante (480–520 px) | 760 |
-| estrelas da nota | 1080 |
-| rótulo da nota | ≈ 1260 (topo) |
-| cartão de depoimento | 860 |
-| pilha de cartões | 860 |
-| fileira de rostos (260 px) | 700 |
-| rótulo "clientes felizes" | ≈ 920 |
-| selo verificado | 1130 |
-
-- Cartão inclinado ±3° ainda cabe: sobram 20 px de cada lado.

package/kits/depoimento/regras/cor.md

@@ -1,16 +0,0 @@
-# Cor
-
-| token | hex | uso |
-|---|---|---|
-| `chao` | `#F7A8C0` | topo do chão (`linear-gradient(180deg, chao, chaoFundo)`) |
-| `chaoFundo` | `#EE86A8` | base do chão |
-| `vinho` | `#35101F` | texto, nota gigante, bolinha "+N mil" |
-| `creme` | `#FFF8EE` | cartões, contorno das estrelas de fundo (42%), borda dos rostos |
-| `estrela` | `#FFB800` | estrelas acesas, brilho |
-| `menta` | `#2BB88A` | selo e "cliente verificado" |
-| `rosaClaro` | `#FFD3E0` | fundo padrão do avatar, aspas do cartão (`chao`) |
-
-- Sombra do cartão: `0 50px 90px rgba(53,16,31,.30), 0 12px 28px rgba(53,16,31,.16)`. Sombra do selo/rostos: `0 20–30px 40–60px rgba(53,16,31,.25)`.
-- Estrela apagada: `rgba(53,16,31,.14)`.
-- Luz de fundo: mancha branca a 45% no alto + mancha amarela a 12% embaixo.
-- O cliente pode trocar `chao`/`chaoFundo` por outra cor quente de marca; manter `vinho`, `creme`, `estrela`. Proibido: roxo, azul, preto no chão.

package/kits/depoimento/regras/movimento.md

@@ -1,20 +0,0 @@
-# Movimento
-
-Curvas: `e5(t) = 1 − (1 − t)^5` e `ov(t)` = pouso com overshoot (`1 + 3,2x³ + 2,2x²`, passa ≈ 1,1× e volta). **Toda entrada usa `ov`.**
-
-| movimento | duração | valores |
-|---|---|---|
-| cartão entra | 18 quadros | sobe 1300 px (ou vem de ±1400 px em x), gira ±14° → inclinação final (±3°), escala 0,88 → 1 |
-| cartão boia | contínuo | y ±10 px (`sin(f/18)`), giro ±0,7° (`sin(f/30)`) |
-| cartão sai | 12 quadros | sobe 1100 px |
-| estrela acende | 12 quadros, 3–4 de intervalo | escala 0 → 1 com overshoot, gira −50° → 0, anel de brilho decai em 6 quadros |
-| pilha | cartão de cima sai em 14 quadros | x +1300 px, y −160 px, giro +22°; os de baixo sobem 52 px e crescem 5% |
-| nota gigante | 20 quadros | número conta 0 → 4,9, sobe 260 px, escala 0,7 → 1 |
-| rostos | 14 quadros, 4 de intervalo | sobem 420 px, escala 0,6 → 1 |
-| selo | 16 quadros | gira +40° → −7°, escala 0 → 1,3, check se desenha em 14 quadros |
-| troca de cena | 14 quadros | `cortina` (diagonal), `circulo` (a partir de 50%, 55%), `baixo`, `flip`; a anterior encolhe 5% e some 60% |
-| câmera (sempre) | contínuo | zoom 1,02 ± 0,012 (+0,00012/quadro), deriva ±10/±12 px, giro ±0,32° |
-| soco de câmera | decai em ~7 quadros | +0,03 de zoom, tremor 7 px |
-| estrelas de fundo | contínuo | giro 0,5°/quadro, sentidos opostos |
-
-- Nada fica parado: cena com mais de 45 quadros sem evento ganha um soco ou uma estrela acendendo.

package/kits/depoimento/regras/ritmo.md

@@ -1,15 +0,0 @@
-# Ritmo
-
-- 104 bpm: **1 batida = 17,3 quadros** (0,58 s). Cortes caem numa batida (17), 2 batidas (35) ou 3 (52).
-- Vídeo de 8 s = 240 quadros = 5 cenas.
-
-| batida | duração s | quadros |
-|---|---|---|
-| gancho | 1,2–1,6 | 36–48 |
-| depoimento | 1,4–2,0 | 42–60 |
-| pilha | 1,4–2,0 | 42–60 (cada cartão fica 14–16 quadros de saída a saída) |
-| prova | 1,6–2,4 | 48–72 |
-
-- Leitura mínima: **3 palavras por segundo** para a frase; o cartão fica ≥ 25 quadros depois de pousar.
-- A frase de um cartão: até 85 caracteres. Na pilha: até 35 (cada um fica ~0,5 s).
-- Cena nova a cada 1,2–2,0 s; dentro da cena, evento novo (estrela, cartão, número) a cada ≤ 0,7 s.

package/kits/depoimento/regras/som.md

@@ -1,21 +0,0 @@
-# Som
-
-- Trilha: `assets/trilha/calor-104bpm.mp3` (8,6 s, 104 bpm, pacote warm-major, tom G), volume **0,5**, fade de saída nos últimos **20 quadros**. Vídeo maior: gere outra (`music make --preset warm-major --bpm 104 --key G --force`), sem loop.
-- Com narração: trilha a **0,25** e efeitos a 70%.
-
-| som | volume | quando |
-|---|---|---|
-| `whoosh-entra` | 0,85 | cena que entra sem lado (−1 quadro) |
-| `swoosh` | 0,9 | cartão que entra/sai de lado |
-| `pop-palavra` | 0,9 | número que pousa, palavra-chave |
-| `pop-cartao` | 0,95 | cartão ou rosto que pousa |
-| `estrela` | 0,7 | a fileira de estrelas começa a acender (um só, não um por estrela) |
-| `verificado` | 0,8 | check do selo |
-| `clique` | 0,75 | cartão da pilha vira |
-| `impacto` | 0,85 | número gigante assenta |
-| `subida` | 0,65 | 1,2 s antes de um impacto grande (opcional) |
-| `assinatura` | 0,85 | fechamento |
-| `whoosh-sai` | 0,7 | saída grande (opcional) |
-
-- No máximo **3 sons por segundo**; nunca o mesmo arquivo duas vezes seguidas. Som entra 1 a 2 quadros antes do visual.
-- Alvo −14 LUFS, pico −1,5 dBTP.

package/kits/depoimento/regras/tipografia.md

@@ -1,17 +0,0 @@
-# Tipografia
-
-- **Space Grotesk 500–700** (nomes, números, rótulos) · **Newsreader itálico 400–600** (a frase do depoimento). Registradas como `"DP Space Grotesk"` e `"DP Newsreader"`.
-- Frases em caixa normal, nunca caixa alta. Números com `tabular-nums` (não pulam quando contam).
-
-| papel | fonte | tamanho px | máx. caracteres |
-|---|---|---|---|
-| nota gigante | Space Grotesk 700, tracking −0,05 em | 480–520 | 3 ("4,9") |
-| frase do depoimento | Newsreader itálico 500 | 74 (≤ 55 car.) · 64 (≤ 85) · 54 (> 85) | 85 |
-| nome | Space Grotesk 700 | 54 | 20 |
-| cargo | Space Grotesk 500 | 33 | 26 |
-| rótulo de apoio | Space Grotesk 600 | 52 | 28 |
-| rótulo de prova (FaixaAvatares) | Space Grotesk 700 | 84 | 18 |
-| selo | Space Grotesk 700 | 56 | 20 |
-
-- Marca-texto da palavra-chave: faixa amarela `#FFD84D` de 58% a 92% da altura da linha, peso 600.
-- `line-height` da frase 1,16; do nome 1,05.

package/kits/infografico/assets/ASSETS.md

@@ -1,19 +0,0 @@
-# Assets do kit infografico
-
-| arquivo | o que é | origem | licença |
-|---|---|---|---|
-| `fontes/outfit.woff2` | Outfit variável 500–800, subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Outfit:wght@500..800`), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-Outfit.txt` |
-| `fontes/caveat.woff2` | Caveat 600, subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Caveat:wght@600`), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-Caveat.txt` |
-| `sons/whoosh-entra.mp3` | whoosh de entrada | sintetizado: MotionCraft `sfx make`, tipo `whoosh_in`, pacote `soft-pop` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/whoosh-sai.mp3` | whoosh de saída | sintetizado: MotionCraft `sfx make`, tipo `whoosh_out`, pacote `soft-pop` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/swoosh.mp3` | swoosh lateral | sintetizado: MotionCraft `sfx make`, tipo `swoosh`, pacote `soft-pop` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/pop-palavra.mp3` | pop curto de palavra | sintetizado: MotionCraft `sfx make`, tipo `word_pop`, pacote `soft-pop` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/pop-cartao.mp3` | pop de cartão/selo que pousa | sintetizado: MotionCraft `sfx make`, tipo `icon_pop`, pacote `soft-pop` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/clique.mp3` | clique de botão | sintetizado: MotionCraft `sfx make`, tipo `button`, pacote `soft-pop` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/impacto.mp3` | impacto grave | sintetizado: MotionCraft `sfx make`, tipo `impact`, pacote `soft-pop` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/subida.mp3` | riser de 1,2 s | sintetizado: MotionCraft `sfx make`, tipo `riser`, pacote `soft-pop` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/assinatura.mp3` | acorde da marca | sintetizado: MotionCraft `sfx make`, tipo `logo_sting`, pacote `soft-pop` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/traco.mp3` | traço de seta sendo desenhada (swoosh curto) | sintetizado: MotionCraft `sfx make`, tipo `swoosh`, pacote `soft-pop` | sem samples; síntese própria, uso livre (CC0) |
-| `trilha/explica-100bpm.mp3` | 8.6 s de trilha, preset warm-major, 100 bpm, tom C | MotionCraft `music make --preset warm-major --bpm 100 --key C --duration 10 --force`, cortada em 8,6 s com fade | sem samples; síntese própria (CC0). MotionCraft é MIT |
-
-A demo não usa foto nem arquivo externo: tudo é desenhado pelos elementos do kit.

package/kits/infografico/elementos/Anotacao.tsx

@@ -1,34 +0,0 @@
-// Anotacao: bilhete escrito à mão (Caveat 600) que aparece como se fosse escrito, da esquerda pra direita, com uma setinha
-// torta apontando para `seta`. É o único apoio permitido ao lado de um herói: use curto (até 18 caracteres).
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, MANUAL, e5, seg} from './base';
-
-export type AnotacaoProps = {
-  texto: string;
-  /** canto superior esquerdo do texto, px */
-  x: number;
-  y: number;
-  /** vetor (dx, dy) da setinha a partir do fim do texto; omita para não ter seta */
-  seta?: [number, number];
-  tamanho?: number;
-  rot?: number;
-  cor?: string;
-  inicio?: number;
-  fim?: number;
-};
-
-export const Anotacao: React.FC<AnotacaoProps> = ({texto, x, y, seta, tamanho = 96, rot = -5, cor = COR.coral, inicio = 0, fim = 1e9}) => {
-  const f = useCurrentFrame();
-  if (f < inicio - 1 || f > fim + 10) return null;
-  const escreve = e5(seg(f, inicio, inicio + Math.max(10, texto.length * 1.4))), sai = 1 - seg(f, fim, fim + 8);
-  const larg = texto.length * tamanho * 0.42, fimX = x + larg;
-  const p = e5(seg(f, inicio + texto.length * 1.4, inicio + texto.length * 1.4 + 12));
-  return <div style={{position: 'absolute', inset: 0, opacity: sai}}>
-    <div style={{position: 'absolute', left: x, top: y, width: larg + 40, overflow: 'hidden', transform: `rotate(${rot}deg)`, transformOrigin: '0 50%', clipPath: `inset(0 ${(1 - escreve) * 100}% 0 0)`, fontFamily: MANUAL, fontWeight: 600, fontSize: tamanho, lineHeight: 1.1, color: cor, whiteSpace: 'nowrap'}}>{texto}</div>
-    {seta && <svg width={1080} height={1920} style={{position: 'absolute', inset: 0, overflow: 'visible'}}>
-      <path d={`M${fimX + 20} ${y + tamanho * 0.5} q${seta[0] * 0.5} ${-30} ${seta[0]} ${seta[1]}`} pathLength={1} fill="none" stroke={cor} strokeWidth={9} strokeLinecap="round" strokeDasharray={1} strokeDashoffset={1 - p} />
-      {p > 0.98 && <path d={`M${fimX + 20 + seta[0] - 24} ${y + tamanho * 0.5 + seta[1] - 6} L${fimX + 20 + seta[0]} ${y + tamanho * 0.5 + seta[1]} L${fimX + 20 + seta[0] + 6} ${y + tamanho * 0.5 + seta[1] - 28}`} fill="none" stroke={cor} strokeWidth={9} strokeLinecap="round" strokeLinejoin="round" />}
-    </svg>}
-  </div>;
-};

package/kits/infografico/elementos/CadeiaPassos.tsx

@@ -1,49 +0,0 @@
-// CadeiaPassos: o processo inteiro de uma vez, em zigue-zague: 3 discos de 280 px (coral, sol, teal) ligados por setas que se
-// desenham uma após a outra, cada passo com o título do lado de fora. Herói da batida de processo; texto sempre fora do disco.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, CORES_NO, FONTE, caber, e5, ov, seg} from './base';
-import {Icone, NomeIcone} from './Icone';
-
-export type CadeiaPassosProps = {
-  passos: {icone: NomeIcone; titulo: string}[];
-  inicio?: number;
-  /** quadros entre um passo e o próximo */
-  intervalo?: number;
-  /** centro vertical do conjunto, px */
-  y: number;
-  fim?: number;
-};
-
-const ORDEM: ('coral' | 'sol' | 'teal')[] = ['coral', 'sol', 'teal'];
-
-export const CadeiaPassos: React.FC<CadeiaPassosProps> = ({passos, inicio = 0, intervalo = 16, y, fim = 1e9}) => {
-  const f = useCurrentFrame();
-  if (f < inicio - 1 || f > fim + 12) return null;
-  const D = 280, gapY = 400, sai = e5(seg(f, fim, fim + 10));
-  const topo = y - ((passos.length - 1) * gapY) / 2;
-  const pos = passos.map((_, i) => ({x: i % 2 === 0 ? 100 + D / 2 : 980 - D / 2, y: topo + i * gapY}));
-  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `translateY(${-sai * 160}px)`}}>
-    <svg width={1080} height={1920} style={{position: 'absolute', inset: 0, overflow: 'visible'}}>
-      {pos.slice(0, -1).map((a, i) => {
-        const b = pos[i + 1], p = e5(seg(f, inicio + i * intervalo + 12, inicio + i * intervalo + 12 + 16));
-        const sx = a.x, sy = a.y + D / 2 + 16, ex = b.x, ey = b.y - D / 2 - 18, cx = (a.x < b.x ? 1 : -1) * 0 + 540, cy = (sy + ey) / 2;
-        return <g key={i}>
-          <path d={`M${sx} ${sy} Q${cx + (a.x < b.x ? -120 : 120)} ${cy} ${ex} ${ey}`} pathLength={1} fill="none" stroke={COR.tinta} strokeWidth={10} strokeLinecap="round" strokeDasharray="1" strokeDashoffset={1 - p} />
-          {p > 0.98 && <path d={`M${ex + (a.x < b.x ? -44 : 44)} ${ey - 34} L${ex} ${ey} L${ex + (a.x < b.x ? 8 : -8)} ${ey - 46}`} fill="none" stroke={COR.tinta} strokeWidth={10} strokeLinecap="round" strokeLinejoin="round" />}
-        </g>;
-      })}
-    </svg>
-    {passos.map((s, i) => {
-      const t = ov(seg(f, inicio + i * intervalo, inicio + i * intervalo + 16)), desenho = e5(seg(f, inicio + i * intervalo + 6, inicio + i * intervalo + 22));
-      const esq = i % 2 === 0, tam = caber(s.titulo, 84, 480, 800, -0.03, 'IG Outfit');
-      return <React.Fragment key={i}>
-        <div style={{position: 'absolute', left: pos[i].x - D / 2, top: pos[i].y - D / 2, width: D, height: D, borderRadius: '50%', background: CORES_NO[ORDEM[i % 3]], border: `9px solid ${COR.tinta}`, boxSizing: 'border-box', display: 'flex', alignItems: 'center', justifyContent: 'center', transform: `scale(${Math.max(0, t)}) rotate(${(1 - t) * -50}deg)`}}>
-          <Icone nome={s.icone} tamanho={D * 0.56} desenho={desenho} />
-          <div style={{position: 'absolute', right: -6, top: -6, width: 84, height: 84, borderRadius: 42, background: COR.tinta, color: COR.creme, fontFamily: FONTE, fontWeight: 800, fontSize: 52, display: 'flex', alignItems: 'center', justifyContent: 'center'}}>{i + 1}</div>
-        </div>
-        <div style={{position: 'absolute', left: esq ? pos[i].x + D / 2 + 40 : 100, width: 480, top: pos[i].y - 50, height: 100, textAlign: esq ? 'left' : 'right', fontFamily: FONTE, fontWeight: 800, fontSize: tam, lineHeight: '100px', color: COR.tinta, letterSpacing: '-0.03em', whiteSpace: 'nowrap', opacity: seg(f, inicio + i * intervalo + 8, inicio + i * intervalo + 16), transform: `translateX(${(1 - ov(seg(f, inicio + i * intervalo + 8, inicio + i * intervalo + 24))) * (esq ? 80 : -80)}px)`}}>{s.titulo}</div>
-      </React.Fragment>;
-    })}
-  </div>;
-};

package/kits/infografico/elementos/Cena.tsx

@@ -1,39 +0,0 @@
-// Cena: janela de tempo de um plano (troca "revelar"). Dentro dela, useCurrentFrame() começa em 0.
-// A saída da cena cruza 14 quadros com a entrada da próxima.
-import React, {createContext, useContext} from 'react';
-import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
-import {e5, seg} from './base';
-
-export type Entrada = 'cortina' | 'baixo' | 'circulo' | 'flip' | 'nenhuma';
-export const SOBREPOE = 14; // quadros em que a saída desta cena cruza a entrada da próxima
-
-const CenaCtx = createContext({duracao: 60});
-/** duração da cena atual em quadros (sem a sobreposição) */
-export const useDuracaoCena = () => useContext(CenaCtx).duracao;
-
-export type CenaProps = {de: number; ate: number; entrada?: Entrada; ultima?: boolean; children: React.ReactNode};
-
-const estilo = (f: number, duracao: number, entrada: Entrada, ultima: boolean): React.CSSProperties => {
-  const p = entrada === 'nenhuma' ? 1 : e5(seg(f, 0, 14));
-  const xo = ultima ? 0 : e5(seg(f, duracao, duracao + SOBREPOE));
-  const base = {transform: `scale(${1 - xo * 0.05})`, opacity: 1 - xo * 0.6} as React.CSSProperties;
-  if (p >= 1) return base;
-  if (entrada === 'cortina') return {...base, clipPath: `polygon(0 0, ${p * 140 - 20}% 0, ${p * 140 - 40}% 100%, 0 100%)`};
-  if (entrada === 'baixo') return {...base, clipPath: `inset(${(1 - p) * 100}% 0 0 0)`};
-  if (entrada === 'circulo') return {...base, clipPath: `circle(${p * 150}% at 50% 55%)`};
-  return {...base, transform: `perspective(1800px) rotateX(${(1 - p) * -80}deg) scale(${1 - xo * 0.05})`, transformOrigin: '50% 0%', opacity: 0.3 + 0.7 * p};
-};
-
-const Janela: React.FC<{duracao: number; entrada: Entrada; ultima: boolean; children: React.ReactNode}> = ({duracao, entrada, ultima, children}) => {
-  const f = useCurrentFrame();
-  return <AbsoluteFill style={estilo(f, duracao, entrada, ultima)}>{children}</AbsoluteFill>;
-};
-
-export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'cortina', ultima = false, children}) => {
-  const duracao = ate - de;
-  return <Sequence from={de} durationInFrames={duracao + (ultima ? 0 : SOBREPOE)} layout="none">
-    <CenaCtx.Provider value={{duracao}}>
-      <Janela duracao={duracao} entrada={entrada} ultima={ultima}>{children}</Janela>
-    </CenaCtx.Provider>
-  </Sequence>;
-};

package/kits/infografico/elementos/Fundo.tsx

@@ -1,23 +0,0 @@
-// Fundo: papel verde-menta com quadriculado fino de prancheta que desliza devagar e cantos marcados (traços de esquadro).
-// Fica FORA da Camera; quem se mexe é o que está em cima.
-import React from 'react';
-import {AbsoluteFill, useCurrentFrame} from 'remotion';
-import {COR} from './base';
-
-export type FundoProps = {
-  /** cor do papel */
-  cor?: string;
-  /** velocidade do quadriculado (1 = a do preview) */
-  velocidade?: number;
-};
-
-export const Fundo: React.FC<FundoProps> = ({cor = COR.papel, velocidade = 1}) => {
-  const f = useCurrentFrame() * velocidade;
-  return <AbsoluteFill style={{background: cor}}>
-    <AbsoluteFill style={{backgroundImage: `linear-gradient(rgba(18,34,63,0.07) 2px, transparent 2px), linear-gradient(90deg, rgba(18,34,63,0.07) 2px, transparent 2px)`, backgroundSize: '72px 72px', backgroundPosition: `${f * 0.6}px ${f * 0.9}px`}} />
-    <svg width={1080} height={1920} style={{position: 'absolute', inset: 0}}>
-      {[[60, 120, 1, 1], [1020, 120, -1, 1], [60, 1800, 1, -1], [1020, 1800, -1, -1]].map(([x, y, dx, dy], i) =>
-        <path key={i} d={`M${x} ${y + dy * 70} V${y} H${x + dx * 70}`} fill="none" stroke={COR.tinta} strokeWidth={6} strokeOpacity={0.35} strokeLinecap="round" />)}
-    </svg>
-  </AbsoluteFill>;
-};

package/kits/infografico/elementos/GraficoBarras.tsx

@@ -1,41 +0,0 @@
-// GraficoBarras: barras grossas (contorno azul-marinho de 8 px) que crescem com overshoot, uma de cada vez, com o valor
-// contando em cima e o rótulo embaixo; a última barra é teal (o resultado) e as outras alternam coral e sol. Herói.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FONTE, MANUAL, e5, lerp, ov, seg} from './base';
-
-export type GraficoBarrasProps = {
-  titulo: string;
-  barras: {rotulo: string; valor: number}[];
-  unidade?: string;
-  inicio?: number;
-  /** quadros entre barras */
-  intervalo?: number;
-  /** base do gráfico (linha do chão), px */
-  y: number;
-  /** altura da maior barra, px */
-  altura?: number;
-  fim?: number;
-};
-
-export const GraficoBarras: React.FC<GraficoBarrasProps> = ({titulo, barras, unidade = '', inicio = 0, intervalo = 7, y, altura = 620, fim = 1e9}) => {
-  const f = useCurrentFrame();
-  if (f < inicio - 1 || f > fim + 12) return null;
-  const max = Math.max(...barras.map((b) => b.valor)), sai = e5(seg(f, fim, fim + 10));
-  const n = barras.length, gap = 28, larg = (880 - gap * (n - 1)) / n;
-  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `translateY(${-sai * 160}px)`}}>
-    <div style={{position: 'absolute', left: 100, width: 880, top: y - altura - 230, fontFamily: FONTE, fontWeight: 800, fontSize: 84, lineHeight: 1.05, color: COR.tinta, letterSpacing: '-0.03em', opacity: seg(f, inicio, inicio + 8), transform: `translateX(${(1 - ov(seg(f, inicio, inicio + 16))) * -700}px)`}}>{titulo}</div>
-    {barras.map((b, i) => {
-      const p = ov(seg(f, inicio + 6 + i * intervalo, inicio + 6 + i * intervalo + 16));
-      const h = (altura * b.valor) / max * Math.max(0, p);
-      const cor = i === n - 1 ? COR.teal : i % 2 ? COR.sol : COR.coral;
-      const v = Math.round(lerp(0, b.valor, e5(seg(f, inicio + 8 + i * intervalo, inicio + 8 + i * intervalo + 18))));
-      return <React.Fragment key={i}>
-        <div style={{position: 'absolute', left: 100 + i * (larg + gap), top: y - h, width: larg, height: h, background: cor, border: `8px solid ${COR.tinta}`, borderBottom: 'none', borderRadius: '28px 28px 0 0', boxSizing: 'border-box'}} />
-        <div style={{position: 'absolute', left: 100 + i * (larg + gap), width: larg, top: y - h - 76, textAlign: 'center', fontFamily: FONTE, fontWeight: 800, fontSize: 60, color: COR.tinta, fontVariantNumeric: 'tabular-nums', opacity: Math.min(1, p * 2)}}>{v}<span style={{fontSize: 36}}>{unidade}</span></div>
-        <div style={{position: 'absolute', left: 100 + i * (larg + gap), width: larg, top: y + 24, textAlign: 'center', fontFamily: MANUAL, fontWeight: 600, fontSize: 64, color: COR.tinta, opacity: seg(f, inicio + 6 + i * intervalo, inicio + 14 + i * intervalo)}}>{b.rotulo}</div>
-      </React.Fragment>;
-    })}
-    <div style={{position: 'absolute', left: 80, top: y - 4, width: 920 * e5(seg(f, inicio, inicio + 14)), height: 8, background: COR.tinta, borderRadius: 4}} />
-  </div>;
-};

package/kits/infografico/elementos/Icone.tsx

@@ -1,35 +0,0 @@
-// Icone: ícones de traço grosso desenhados em SVG (folha, ciclo, broto, grafico, check, relogio, pessoa, engrenagem).
-// O traço se desenha sozinho (`desenho` 0..1). Usado dentro de NoProcesso e CadeiaPassos; também funciona solto com x/y.
-import React from 'react';
-import {COR} from './base';
-
-export type NomeIcone = 'folha' | 'ciclo' | 'broto' | 'grafico' | 'check' | 'relogio' | 'pessoa' | 'engrenagem';
-
-const CAMINHOS: Record<NomeIcone, string[]> = {
-  folha: ['M18 82 C16 40 48 14 86 14 C88 54 60 86 18 82 Z', 'M18 82 L62 38'],
-  ciclo: ['M82 50 A32 32 0 1 1 64 21', 'M60 6 L66 22 L82 18', 'M18 50 A32 32 0 0 0 36 79'],
-  broto: ['M50 88 V48', 'M50 58 C28 58 18 42 18 28 C38 28 50 40 50 58', 'M50 46 C50 30 62 18 82 18 C82 36 68 46 50 46'],
-  grafico: ['M20 82 V54', 'M46 82 V32', 'M72 82 V16', 'M8 88 H92'],
-  check: ['M20 52 L42 74 L82 26'],
-  relogio: ['M50 14 A36 36 0 1 0 50 86 A36 36 0 1 0 50 14 Z', 'M50 30 V52 L66 62'],
-  pessoa: ['M50 16 A16 16 0 1 0 50 48 A16 16 0 1 0 50 16 Z', 'M16 88 C16 62 34 54 50 54 C66 54 84 62 84 88'],
-  engrenagem: ['M50 34 A16 16 0 1 0 50 66 A16 16 0 1 0 50 34 Z', 'M50 10 V24 M50 76 V90 M10 50 H24 M76 50 H90 M22 22 L32 32 M68 68 L78 78 M78 22 L68 32 M32 68 L22 78'],
-};
-
-export type IconeProps = {
-  nome: NomeIcone;
-  tamanho?: number;
-  cor?: string;
-  /** 0..1: quanto do traço já foi desenhado */
-  desenho?: number;
-  /** centro na tela, px (omita para usar dentro de outro elemento) */
-  x?: number;
-  y?: number;
-};
-
-export const Icone: React.FC<IconeProps> = ({nome, tamanho = 200, cor = COR.tinta, desenho = 1, x, y}) => {
-  const pos: React.CSSProperties = x !== undefined && y !== undefined ? {position: 'absolute', left: x - tamanho / 2, top: y - tamanho / 2} : {};
-  return <svg width={tamanho} height={tamanho} viewBox="0 0 100 100" style={{overflow: 'visible', ...pos}}>
-    {CAMINHOS[nome].map((d, i) => <path key={i} d={d} pathLength={1} fill="none" stroke={cor} strokeWidth={7} strokeLinecap="round" strokeLinejoin="round" strokeDasharray={1} strokeDashoffset={1 - Math.max(0, Math.min(1, desenho))} />)}
-  </svg>;
-};