primocode 10.17.0 → 10.19.0

package/kits/depoimento/elementos/PilhaCartoes.tsx

@@ -0,0 +1,37 @@
+// PilhaCartoes: um monte de depoimentos. O de cima voa pra direita girando e o próximo sobe pro lugar, a cada `intervalo`.
+// O último fica. Cada cartão mostra foto, nome, estrelas e frase (usa FaceCartao).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {e5, ov, seg} from './base';
+import {FaceCartao, FaceCartaoProps} from './CartaoDepoimento';
+
+export type PilhaCartoesProps = {
+  cartoes: Omit<FaceCartaoProps, 'acesas' | 'largura' | 'altura'>[];
+  inicio?: number;
+  /** quadros entre um cartão sair e o próximo sair */
+  intervalo?: number;
+  /** centro vertical, px */
+  y: number;
+  altura?: number;
+  fim?: number;
+};
+
+export const PilhaCartoes: React.FC<PilhaCartoesProps> = ({cartoes, inicio = 0, intervalo = 16, y, altura = 740, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1 || f > fim + 14) return null;
+  const n = cartoes.length;
+  const sai = seg(f, fim, fim + 12);
+  const saidaDe = (i: number) => inicio + 16 + intervalo * (i + 1);
+  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai}}>
+    {cartoes.map((c, i) => {
+      const nasce = ov(seg(f, inicio + (n - 1 - i) * 3, inicio + (n - 1 - i) * 3 + 16));
+      let depth = i;
+      for (let j = 0; j < i; j++) depth -= e5(seg(f, saidaDe(j) - 4, saidaDe(j) + 10));
+      const vai = i < n - 1 ? e5(seg(f, saidaDe(i) - 4, saidaDe(i) + 10)) : 0;
+      const rot = (i % 2 ? 3.5 : -3.5) * (1 - 0.3 * Math.min(depth, 1)) + vai * 22;
+      return <div key={i} style={{position: 'absolute', left: 100, top: y - altura / 2, zIndex: n - i, transform: `translate(${vai * 1300}px, ${(1 - nasce) * 1200 - depth * 52 - vai * 160}px) rotate(${rot}deg) scale(${1 - depth * 0.05})`, opacity: depth > 2.6 ? 0 : 1}}>
+        <FaceCartao {...c} altura={altura} acesas={5} />
+      </div>;
+    })}
+  </div>;
+};

package/kits/depoimento/elementos/SeloVerificado.tsx

@@ -0,0 +1,29 @@
+// SeloVerificado: pílula verde-menta com um check que se desenha, inclinada, que estoura na tela com overshoot.
+// Garante que o depoimento é de cliente de verdade. Use grande (escala 1,2+) numa cena de fechamento.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, ov, seg} from './base';
+
+export type SeloVerificadoProps = {
+  texto?: string;
+  inicio?: number;
+  /** centro, px */
+  x?: number;
+  y: number;
+  escala?: number;
+  fim?: number;
+};
+
+export const SeloVerificado: React.FC<SeloVerificadoProps> = ({texto = 'Cliente verificado', inicio = 0, x = 540, y, escala = 1.2, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1 || f > fim + 12) return null;
+  const t = ov(seg(f, inicio, inicio + 16)), sai = seg(f, fim, fim + 10);
+  const risco = seg(f, inicio + 8, inicio + 22);
+  return <div style={{position: 'absolute', left: x - 330, top: y - 80, width: 660, height: 160, borderRadius: 80, background: COR.menta, boxShadow: '0 30px 60px rgba(53,16,31,.28)', display: 'flex', alignItems: 'center', gap: 28, padding: '0 38px', boxSizing: 'border-box', transform: `scale(${Math.max(0, t) * escala * (1 - sai)}) rotate(${-7 + (1 - t) * 40}deg)`}}>
+    <svg width={96} height={96} viewBox="0 0 40 40" style={{flex: 'none'}}>
+      <circle cx={20} cy={20} r={20} fill={COR.creme} />
+      <path d="M11 21 L18 28 L30 13" stroke={COR.menta} strokeWidth={5} fill="none" strokeLinecap="round" strokeLinejoin="round" strokeDasharray={34} strokeDashoffset={34 * (1 - risco)} />
+    </svg>
+    <div style={{fontFamily: FONTE, fontWeight: 700, fontSize: 56, color: COR.creme, whiteSpace: 'nowrap', letterSpacing: '-0.02em'}}>{texto}</div>
+  </div>;
+};

package/kits/depoimento/elementos/Som.tsx

@@ -0,0 +1,41 @@
+// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`, pacote glass); trilha de 8.6 s
+// (MotionCraft `music make`, preset warm-major, 104 bpm, tom G). Ver assets/ASSETS.md.
+// Regra: um som por movimento que importa, 1 a 2 quadros ANTES do visual.
+import React from 'react';
+import {Audio, Sequence, interpolate, useVideoConfig} from 'remotion';
+import whooshEntra from '../assets/sons/whoosh-entra.mp3';
+import whooshSai from '../assets/sons/whoosh-sai.mp3';
+import swoosh from '../assets/sons/swoosh.mp3';
+import popPalavra from '../assets/sons/pop-palavra.mp3';
+import popCartao from '../assets/sons/pop-cartao.mp3';
+import clique from '../assets/sons/clique.mp3';
+import impacto from '../assets/sons/impacto.mp3';
+import subida from '../assets/sons/subida.mp3';
+import assinatura from '../assets/sons/assinatura.mp3';
+import estrela from '../assets/sons/estrela.mp3';
+import verificado from '../assets/sons/verificado.mp3';
+import trilha from '../assets/trilha/calor-104bpm.mp3';
+
+export const SONS = {
+  'whoosh-entra': whooshEntra, 'whoosh-sai': whooshSai, swoosh, 'pop-palavra': popPalavra, 'pop-cartao': popCartao, clique, impacto, subida, assinatura, estrela, verificado,
+} as const;
+export type NomeSom = keyof typeof SONS;
+
+// volume de cada efeito (0..1) já calibrado contra a trilha a 0.5
+const VOLUME: Record<NomeSom, number> = {
+  'whoosh-entra': 0.85, 'whoosh-sai': 0.7, swoosh: 0.9, 'pop-palavra': 0.9, 'pop-cartao': 0.95, clique: 0.75, impacto: 0.85, subida: 0.65, assinatura: 0.85, estrela: 0.7, verificado: 0.8,
+};
+
+export type EfeitoProps = {som: NomeSom; em: number; volume?: number};
+/** um efeito no quadro `em` (relativo à Cena se estiver dentro de uma, absoluto no resto) */
+export const Efeito: React.FC<EfeitoProps> = ({som, em, volume}) =>
+  <Sequence from={Math.max(0, Math.round(em))} durationInFrames={90} layout="none">
+    <Audio src={SONS[som]} volume={volume ?? VOLUME[som]} />
+  </Sequence>;
+
+export type TrilhaProps = {volume?: number; /** quadros de fade no fim */ saida?: number};
+/** a trilha do kit, do quadro 0 ao fim, com fade de saída */
+export const Trilha: React.FC<TrilhaProps> = ({volume = 0.5, saida = 20}) => {
+  const {durationInFrames} = useVideoConfig();
+  return <Audio src={trilha} volume={(f) => volume * interpolate(f, [durationInFrames - saida, durationInFrames], [1, 0], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'})} />;
+};

package/kits/depoimento/elementos/base.ts

@@ -0,0 +1,83 @@
+// 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

@@ -0,0 +1,16 @@
+// 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

@@ -0,0 +1,57 @@
+{
+  "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

@@ -0,0 +1,19 @@
+# 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

@@ -0,0 +1,9 @@
+// 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

@@ -0,0 +1,21 @@
+{
+  "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

@@ -0,0 +1,17 @@
+# Á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

@@ -0,0 +1,16 @@
+# 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

@@ -0,0 +1,20 @@
+# 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

@@ -0,0 +1,15 @@
+# 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

@@ -0,0 +1,21 @@
+# 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

@@ -0,0 +1,17 @@
+# 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/estudio/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "primocode-kits-estudio",
+  "private": true,
+  "type": "module",
+  "description": "O Remotion dos kits de estilo do PrimoCode. Instalado uma vez em ~/.primocode/kits-estudio (lib/kits.js).",
+  "dependencies": {
+    "@remotion/bundler": "4.0.529",
+    "@remotion/renderer": "4.0.529",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "remotion": "4.0.529"
+  }
+}

package/kits/estudio/render.mjs

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+// O render de um vídeo feito com um kit de estilo. lib/kits.js copia este arquivo pra pasta do vídeo
+// (motion/<nome>/), ao lado do node_modules do estúdio dos kits, e roda:
+//   node render.mjs <entrada.tsx> <saida.mp4> [--escala 1] [--quadros 30,90,150] [--capa 88]
+// Cada linha da saída é um JSON: {passo}, {progresso}, e no fim {ok, video, quadros, segundos}.
+import {bundle} from '@remotion/bundler';
+import {renderMedia, renderStill, selectComposition} from '@remotion/renderer';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+
+const [entrada, saida, ...resto] = process.argv.slice(2);
+const opt = (n, pad) => {const i = resto.indexOf('--' + n); return i >= 0 ? resto[i + 1] : pad;};
+const dizer = (o) => console.log(JSON.stringify(o));
+if (!entrada || !saida) {dizer({ok: false, error: 'uso: node render.mjs <entrada.tsx> <saida.mp4>'}); process.exit(1);}
+
+const t0 = Date.now();
+const escala = Number(opt('escala', 1)) || 1;
+const concurrency = Number(process.env.KIT_CONCORRENCIA || Math.max(2, Math.min(8, os.cpus().length - 1)));
+try {
+  dizer({passo: 'empacotando o kit'});
+  const raiz = path.dirname(path.resolve(entrada));
+  const serveUrl = await bundle({entryPoint: path.resolve(entrada), outDir: path.join(raiz, '.bundle'), enableCaching: true});
+  const composition = await selectComposition({serveUrl, id: 'Video', inputProps: {}});
+  dizer({passo: `renderizando ${composition.durationInFrames} quadros`});
+  fs.mkdirSync(path.dirname(path.resolve(saida)), {recursive: true});
+  let ultimo = -1;
+  await renderMedia({
+    composition, serveUrl, codec: 'h264', outputLocation: path.resolve(saida), scale: escala, crf: 20,
+    audioCodec: 'aac', audioBitrate: '192k', concurrency, imageFormat: 'jpeg', jpegQuality: 92,
+    onProgress: ({progress}) => {const p = Math.floor(progress * 10); if (p !== ultimo) {ultimo = p; dizer({progresso: p * 10});}},
+  });
+  // os quadros pra conferir (a IA e a pessoa olham antes de dar por pronto)
+  const pedidos = String(opt('quadros', '')).split(',').filter((x) => x.trim() !== '').map(Number).filter((n) => Number.isFinite(n) && n >= 0);
+  const lista = pedidos.length ? pedidos : [0.15, 0.45, 0.8].map((f) => Math.round(composition.durationInFrames * f));
+  const pastaQ = path.join(path.dirname(path.resolve(saida)), 'quadros');
+  fs.mkdirSync(pastaQ, {recursive: true});
+  const quadros = [];
+  for (const q of lista.map((n) => Math.min(n, composition.durationInFrames - 1))) {
+    const arq = path.join(pastaQ, `quadro-${String(q).padStart(4, '0')}.jpg`);
+    await renderStill({composition, serveUrl, output: arq, frame: q, scale: 0.5, imageFormat: 'jpeg', jpegQuality: 88});
+    quadros.push(arq);
+  }
+  dizer({ok: true, video: path.resolve(saida), quadros, segundos: +(composition.durationInFrames / composition.fps).toFixed(2), levou: Math.round((Date.now() - t0) / 1000)});
+} catch (e) {
+  dizer({ok: false, error: String(e && e.message || e).split('\n').slice(0, 6).join('\n')});
+  process.exit(1);
+}

package/kits/infografico/SKILL.md

@@ -0,0 +1,54 @@
+---
+slug: infografico
+nome: Infográfico
+descricao: papel verde-menta quadriculado, discos chapados com contorno azul-marinho grosso, ícones de traço que se desenham, setas à mão e legenda manuscrita
+familia: Marca e evento
+versao: 1
+quando:
+  - "explicar um processo em 3 passos com ícones e setas"
+  - "mostrar um dado ou estatística com gráfico de barras"
+  - "reels educativo: como funciona, por que, quanto"
+  - "resumo visual de um serviço ou método"
+nao_serve:
+  - "vídeo emocional, luxo ou sem dado nenhum (use luxo ou minimal)"
+  - "tutorial de tela com cursor (use tutorial-tela)"
+---
+
+# Infográfico
+
+Uma explicação desenhada em papel de prancheta. O chão é **verde-menta** (`#E9F5EE`) com **quadriculado fino**
+deslizando e **marcas de esquadro nos cantos**. Tudo é **chapado, com contorno azul-marinho de 8–10 px**: discos
+**coral, sol e teal**, barras grossas, ícones de traço que se **desenham sozinhos**. Os números são **Outfit 800
+gigantes** (520 px) com contorno; as legendas e anotações são **à mão (Caveat)**, com rabisco sublinhado e seta
+torta. Cada cena tem **um herói** (número, cadeia de passos, gráfico ou disco) e, no máximo, uma anotação de apoio.
+Um passo da explicação por cena, com pausa depois do impacto.
+
+## Como montar um vídeo com este kit
+
+1. **Ache a história**: um número que prende, 3 passos (verbo curto, até 9 caracteres), um dado que muda no tempo (3–5 barras).
+2. **Escolha as batidas** em `receita.json` (numero → processo → grafico → no → fecho). Pule as que o assunto não tem.
+3. **Escreva o plano** (`plano.json`, formato de `exemplos/plano.json`). Ícones: `folha ciclo broto grafico check relogio pessoa engrenagem`.
+4. **Renderize** com `<Montagem plano={...} />`.
+5. **Confira** contra `regras/`: um herói por plano, margens ≥ 96 px, texto de passo fora do disco, 35–45% do quadro vazio.
+
+## Elementos
+
+| elemento | o que faz | batidas |
+|---|---|---|
+| `NumeroDestaque` | número de 520 px que conta, contorno marinho, rabisco e legenda manuscrita | numero, fecho |
+| `CadeiaPassos` | 3 discos em zigue-zague ligados por setas que se desenham | processo |
+| `GraficoBarras` | barras grossas que crescem com valor contando; a última é teal | grafico |
+| `NoProcesso` | um passo como herói: disco de 560 px, ícone desenhado, selo de número | no |
+| `Anotacao` | bilhete à mão que se escreve + setinha (o único apoio) | no, numero |
+| `SetaCurva` | seta desenhada à mão entre dois pontos da tela | qualquer |
+| `Icone` | 8 ícones de traço que se desenham | dentro dos outros ou solto |
+| `Fundo`, `Camera`, `Cena` | prancheta quadriculada, câmera, troca por revelação | todas |
+| `Efeito`, `Trilha` | sons e trilha do kit | todas |
+
+## Proibido
+
+- Mais de um herói por plano ou dois apoios; texto dentro de disco pequeno; margem < 96 px.
+- Degradê, sombra com blur, brilho em letra, roxo-azul, fundo escuro, foto de banco.
+- Dado inventado em uso real: o número do infográfico tem que ter fonte.
+- Ícone sem contorno ou traço fino (< 7 px); seta que não se desenha.
+- Texto fora da área segura (168–1330 px na vertical).

package/kits/infografico/assets/ASSETS.md

@@ -0,0 +1,19 @@
+# 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.