primocode 10.17.0 → 10.19.0

package/kits/antes-depois/elementos/Som.tsx

@@ -0,0 +1,40 @@
+// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`, pacote paper); trilha de 8.6 s
+// (MotionCraft `music make`, preset tech-bright, 118 bpm, tom D). 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 tick from '../assets/sons/tick.mp3';
+import trilha from '../assets/trilha/corte-118bpm.mp3';
+
+export const SONS = {
+  'whoosh-entra': whooshEntra, 'whoosh-sai': whooshSai, swoosh, 'pop-palavra': popPalavra, 'pop-cartao': popCartao, clique, impacto, subida, assinatura, tick,
+} 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.9, clique: 0.8, impacto: 0.95, subida: 0.7, assinatura: 0.8, tick: 0.55,
+};
+
+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/antes-depois/elementos/TelaDividida.tsx

@@ -0,0 +1,68 @@
+// TelaDividida: a janela da comparação. A mesma cena duas vezes: "antes" fosca e cinza à esquerda,
+// "depois" viva à direita, separadas por um DIVISOR que parece arrastável (linha branca de 10 px com
+// contorno preto + puxador redondo com setas). Os rótulos ANTES e DEPOIS moram DENTRO de cada metade,
+// nos cantos de cima, e são recortados junto com ela: nunca se encostam, e o wipe revela/esconde cada um.
+// v2: chaves de `pos` com curva em S (arrastar), puxador que "agarra" (cresce 8%) enquanto anda.
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, FONTE, SOMBRA_DURA, c01, lerp, ov, seg} from './base';
+
+export type TelaDivididaProps = {
+  antes: string;
+  depois: string;
+  /** chaves do divisor: [[quadro, posição 0..1], ...]; 1 = tudo "antes", 0 = tudo "depois" */
+  pos?: number[][];
+  /** centro vertical, px */
+  y: number;
+  /** altura da janela, px (herói: 900–1100) */
+  altura?: number;
+  inicio?: number;
+  fim?: number;
+  rotuloAntes?: string;
+  rotuloDepois?: string;
+  filtroAntes?: string;
+  filtroDepois?: string;
+  foco?: string;
+};
+
+// curva em S (arrastar com a mão: arranca e freia)
+const s3 = (t: number) => {const x = c01(t); return x * x * x * (x * (x * 6 - 15) + 10);};
+const chavesS = (f: number, ks: number[][]) => {
+  if (f <= ks[0][0]) return ks[0][1];
+  for (let i = 1; i < ks.length; i++) if (f <= ks[i][0]) return lerp(ks[i - 1][1], ks[i][1], s3(seg(f, ks[i - 1][0], ks[i][0])));
+  return ks[ks.length - 1][1];
+};
+
+export const TelaDividida: React.FC<TelaDivididaProps> = ({antes, depois, pos = [[0, 1], [14, 1], [40, 0.12], [54, 0.5]], y, altura = 1000, inicio = 0, fim = 1e9,
+  rotuloAntes = 'Antes', rotuloDepois = 'Depois',
+  filtroAntes = 'grayscale(1) contrast(0.72) brightness(0.72) blur(3px)', filtroDepois = 'saturate(1.5) contrast(1.12) brightness(1.08)', foco = '50% 50%'}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1 || f > fim + 14) return null;
+  const t = ov(seg(f, inicio, inicio + 16)), sai = seg(f, fim, fim + 12);
+  const L = 880, rel = f - inicio, p = chavesS(rel, pos), pAntes = chavesS(rel - 1, pos);
+  const andando = Math.min(1, Math.abs(p - pAntes) * 40);
+  const zoom = lerp(1.12, 1.03, seg(f, inicio, inicio + 90));
+  const foto = (src: string, filtro: string) => <Img src={src} style={{position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: foco, transform: `scale(${zoom})`, filter: filtro}} />;
+  // o rótulo só aparece quando a metade dele já mostra o rótulo inteiro (nunca uma fatia de letra)
+  const largRotulo = (texto: string) => texto.length * 52 * 0.86 + 56;
+  const rotulo = (texto: string, lado: 'antes' | 'depois') => <div style={{position: 'absolute', top: 34, [lado === 'antes' ? 'left' : 'right']: 34,
+    opacity: lado === 'antes' ? c01((xDiv - 34 - largRotulo(texto)) / 50) : c01((L - xDiv - 34 - largRotulo(texto)) / 50),
+    background: lado === 'antes' ? COR.concretoEscuro : COR.limao, color: lado === 'antes' ? COR.papel : COR.tinta, border: `6px solid ${COR.tinta}`, borderRadius: 20,
+    padding: '8px 22px 4px', fontFamily: FONTE, fontSize: 52, lineHeight: 1.1, textTransform: 'uppercase', whiteSpace: 'nowrap', boxShadow: SOMBRA_DURA(7)}}>{texto}</div>;
+  const xDiv = p * L;
+  return <div style={{position: 'absolute', left: 100, top: y - altura / 2, width: L, height: altura, transform: `translateY(${(1 - t) * 900 - sai * 900}px) rotate(${(1 - t) * 5}deg) scale(${0.92 + 0.08 * t})`}}>
+    <div style={{position: 'absolute', inset: 0, borderRadius: 40, overflow: 'hidden', border: `9px solid ${COR.tinta}`, boxShadow: SOMBRA_DURA(16), boxSizing: 'border-box', background: COR.papel}}>
+      {/* depois: a foto inteira por baixo, com o rótulo no canto direito */}
+      <div style={{position: 'absolute', inset: 0, clipPath: `inset(0 0 0 ${xDiv - 9}px)`}}>{foto(depois, filtroDepois)}{rotulo(rotuloDepois, 'depois')}</div>
+      {/* antes: recortada até o divisor, com o rótulo no canto esquerdo */}
+      <div style={{position: 'absolute', inset: 0, clipPath: `inset(0 ${L - xDiv - 9}px 0 0)`}}>{foto(antes, filtroAntes)}{rotulo(rotuloAntes, 'antes')}</div>
+      {/* o divisor: linha branca com contorno */}
+      <div style={{position: 'absolute', left: xDiv - 9 - 7, top: 0, width: 14, height: '100%', background: COR.papel, borderLeft: `4px solid ${COR.tinta}`, borderRight: `4px solid ${COR.tinta}`, boxSizing: 'content-box'}} />
+    </div>
+    {/* o puxador */}
+    <div style={{position: 'absolute', left: xDiv - 9 - 66, top: altura / 2 - 66, width: 132, height: 132, borderRadius: 66, background: COR.papel, border: `8px solid ${COR.tinta}`, boxSizing: 'border-box',
+      display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: SOMBRA_DURA(8), transform: `scale(${(1 + 0.08 * andando) * Math.min(1, ov(seg(f, inicio + 6, inicio + 16)))})`}}>
+      <svg width={76} height={44} viewBox="0 0 84 50"><path d="M30 6 L8 25 L30 44 M54 6 L76 25 L54 44" stroke={COR.tinta} strokeWidth={9} fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
+    </div>
+  </div>;
+};

package/kits/antes-depois/elementos/base.ts

@@ -0,0 +1,82 @@
+// Base do kit antes-depois: 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/archivoblack.woff2';
+import fonte1Url from '../assets/fontes/manrope.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 = {
+  concreto: '#8F8C86',
+  concretoEscuro: '#6F6C66',
+  cinza: '#B9B6AF',
+  limao: '#C8FF2E',
+  tinta: '#0F0F0D',
+  papel: '#F4F2EC'
+};
+
+
+// ---------- fonte ----------
+// Nome de família com o prefixo do kit, pra não colidir com outro kit no mesmo estúdio.
+export const FONTE = "\"AD Archivo Black\", Impact, sans-serif";
+export const TEXTO = "\"AD Manrope\", system-ui, sans-serif";
+const fontes = [
+  {nome: 'AD Archivo Black', url: fonte0Url, peso: '400', estilo: 'normal'},
+  {nome: 'AD Manrope', url: fonte1Url, peso: '500 800', estilo: 'normal'},
+];
+if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__antesdepois) {
+  (globalThis as Record<string, unknown>).__antesdepois = true;
+  for (const f of fontes) {
+    const h = delayRender('antes-depois: ' + 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 (118 bpm) em quadros */
+export const BATIDA = 15.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 = 400, trackingEm = -0.01, familia = 'AD Archivo Black'): 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 = 400, trackingEm = -0.01, familia = 'AD Archivo Black') => {
+  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_DURA = (px = 14) => `${px}px ${px}px 0 ${COR.tinta}`;
+/** valor de uma lista de chaves [[quadro, valor], ...] no quadro f, com pouso suave entre as chaves */
+export const chaves = (f: number, ks: number[][]) => { if (f <= ks[0][0]) return ks[0][1]; for (let i = 1; i < ks.length; i++) if (f <= ks[i][0]) return lerp(ks[i - 1][1], ks[i][1], e5(seg(f, ks[i - 1][0], ks[i][0]))); return ks[ks.length - 1][1]; };

package/kits/antes-depois/elementos/index.ts

@@ -0,0 +1,15 @@
+// Tudo que o kit antes-depois 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 {TelaDividida} from './TelaDividida';
+export {RotuloAntesDepois} from './RotuloAntesDepois';
+export {BarraMedidor} from './BarraMedidor';
+export {NumeroDelta} from './NumeroDelta';
+export {ListaMudancas} from './ListaMudancas';
+export {FaixaMarquee} from './FaixaMarquee';
+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/antes-depois/exemplos/plano.json

@@ -0,0 +1,276 @@
+{
+ "kit": "antes-depois",
+ "roteiro": "exemplos/roteiro.md",
+ "duracao": 240,
+ "trilha": {
+  "volume": 0.5
+ },
+ "cenas": [
+  {
+   "batida": "comparacao",
+   "de": 0,
+   "ate": 60,
+   "entrada": "nenhuma",
+   "camadas": [
+    {
+     "elemento": "TelaDividida",
+     "props": {
+      "antes": "fotos/foto-07.jpg",
+      "depois": "fotos/foto-07.jpg",
+      "pos": [
+       [
+        0,
+        1
+       ],
+       [
+        12,
+        1
+       ],
+       [
+        36,
+        0.1
+       ],
+       [
+        44,
+        0.1
+       ],
+       [
+        50,
+        0.5
+       ]
+      ],
+      "y": 760,
+      "altura": 1040,
+      "inicio": 0
+     }
+    }
+   ],
+   "socos": [
+    36
+   ],
+   "sons": [
+    {
+     "som": "whoosh-entra",
+     "em": 0
+    },
+    {
+     "som": "clique",
+     "em": 11
+    },
+    {
+     "som": "swoosh",
+     "em": 14
+    },
+    {
+     "som": "pop-cartao",
+     "em": 36
+    }
+   ]
+  },
+  {
+   "batida": "resultado",
+   "de": 60,
+   "ate": 100,
+   "entrada": "cortina",
+   "camadas": [
+    {
+     "elemento": "NumeroDelta",
+     "props": {
+      "valor": 87,
+      "sinal": "−",
+      "sufixo": "%",
+      "rotulo": "de retrabalho nas fotos",
+      "seta": "baixo",
+      "inicio": 2,
+      "y": 760
+     }
+    }
+   ],
+   "socos": [
+    22
+   ],
+   "sons": [
+    {
+     "som": "swoosh",
+     "em": -1
+    },
+    {
+     "som": "tick",
+     "em": 6
+    },
+    {
+     "som": "impacto",
+     "em": 20
+    }
+   ]
+  },
+  {
+   "batida": "medidor",
+   "de": 100,
+   "ate": 142,
+   "entrada": "baixo",
+   "camadas": [
+    {
+     "elemento": "BarraMedidor",
+     "props": {
+      "titulo": "Prazo de entrega",
+      "unidade": "h",
+      "antes": {
+       "valor": 48,
+       "rotulo": "Antes"
+      },
+      "depois": {
+       "valor": 6,
+       "rotulo": "Depois"
+      },
+      "inicio": 2,
+      "y": 860
+     }
+    }
+   ],
+   "socos": [
+    14,
+    26
+   ],
+   "sons": [
+    {
+     "som": "whoosh-entra",
+     "em": -1
+    },
+    {
+     "som": "pop-cartao",
+     "em": 8
+    },
+    {
+     "som": "pop-palavra",
+     "em": 20
+    },
+    {
+     "som": "clique",
+     "em": 34
+    }
+   ]
+  },
+  {
+   "batida": "lista",
+   "de": 142,
+   "ate": 188,
+   "entrada": "flip",
+   "camadas": [
+    {
+     "elemento": "ListaMudancas",
+     "props": {
+      "linhas": [
+       {
+        "antes": "Foto escura",
+        "depois": "Luz de estúdio"
+       },
+       {
+        "antes": "Fundo bagunçado",
+        "depois": "Fundo limpo"
+       },
+       {
+        "antes": "Cor errada",
+        "depois": "Cor fiel"
+       }
+      ],
+      "inicio": 4,
+      "intervalo": 11,
+      "y": 740
+     }
+    }
+   ],
+   "socos": [
+    16,
+    27
+   ],
+   "sons": [
+    {
+     "som": "swoosh",
+     "em": -1
+    },
+    {
+     "som": "pop-cartao",
+     "em": 6
+    },
+    {
+     "som": "clique",
+     "em": 17
+    },
+    {
+     "som": "pop-palavra",
+     "em": 28
+    }
+   ]
+  },
+  {
+   "batida": "cta",
+   "de": 188,
+   "ate": 240,
+   "entrada": "circulo",
+   "camadas": [
+    {
+     "elemento": "TelaDividida",
+     "props": {
+      "antes": "fotos/foto-08.jpg",
+      "depois": "fotos/foto-08.jpg",
+      "pos": [
+       [
+        0,
+        0.92
+       ],
+       [
+        8,
+        0.92
+       ],
+       [
+        30,
+        0.08
+       ],
+       [
+        40,
+        0.5
+       ]
+      ],
+      "y": 620,
+      "altura": 820,
+      "inicio": 0
+     }
+    },
+    {
+     "elemento": "FaixaMarquee",
+     "props": {
+      "texto": "Veja o seu •",
+      "y": 1215,
+      "rot": -3,
+      "altura": 170,
+      "cor": "tinta",
+      "velocidade": 5,
+      "inicio": 16
+     }
+    }
+   ],
+   "socos": [
+    14
+   ],
+   "sons": [
+    {
+     "som": "whoosh-entra",
+     "em": -1
+    },
+    {
+     "som": "swoosh",
+     "em": 9
+    },
+    {
+     "som": "impacto",
+     "em": 15
+    },
+    {
+     "som": "assinatura",
+     "em": 22
+    }
+   ]
+  }
+ ]
+}

package/kits/antes-depois/exemplos/roteiro.md

@@ -0,0 +1,19 @@
+# Roteiro de demonstração · "Estúdio Lumo" (edição de foto de produto, fictício)
+
+Pedido: *"um reels de 8 s do Estúdio Lumo mostrando uma foto antes e depois do tratamento, que o retrabalho caiu 87% e o prazo foi de 48 h para 6 h."*
+
+Sem narração: os cortes seguem a trilha (1 batida = 15,3 quadros).
+
+| # | batida | quadros | na tela | elemento | som |
+|---|---|---|---|---|---|
+| 1 | comparacao | 0–50 | foto fosca à esquerda, viva à direita, divisor varrendo; um adesivo por vez, ANTES e depois DEPOIS | TelaDividida, RotuloAntesDepois ×2 | whoosh, swoosh, pops |
+| 2 | resultado | 50–92 | "−87%" contando + "de retrabalho nas fotos" | NumeroDelta | swoosh, tick, impacto |
+| 3 | medidor | 92–138 | "Prazo de entrega": 48 h (cinza, comprida) × 6 h (limão, curta) | BarraMedidor | whoosh, pops, clique |
+| 4 | lista | 138–188 | Foto escura→Luz de estúdio · Fundo bagunçado→Fundo limpo · Cor errada→Cor fiel | ListaMudancas | swoosh, pop, cliques |
+| 5 | cta | 188–240 | segunda comparação + faixas "VEJA O SEU •" e "ANTES • DEPOIS •" | TelaDividida, FaixaMarquee ×2 | whoosh, swoosh, impacto, assinatura |
+
+Como a IA chegou nisso:
+1. Abriu com a comparação (é a promessa do estilo), depois deu o número, depois o porquê (medidor), depois o detalhe (lista).
+2. Usou a mesma foto nos dois lados: o filtro faz o "antes" (cinza, escuro, desfocado) e o "depois" (vivo).
+3. Variou a entrada de cada cena (nenhuma, cortina, baixo, flip, círculo) e cortou na batida da trilha (0, 50, 92, 138, 188).
+4. O `preview.tsx` passa o plano e as fotos para `Montagem`, que só usa os elementos do kit.

package/kits/antes-depois/preview.tsx

@@ -0,0 +1,13 @@
+// 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-antes-depois`.
+import React from 'react';
+import {Montagem, Plano} from './elementos';
+import plano from './exemplos/plano.json';
+import f7 from './exemplos/fotos/foto-07.jpg';
+import f8 from './exemplos/fotos/foto-08.jpg';
+
+const arquivos: Record<string, string> = {'fotos/foto-07.jpg': f7, 'fotos/foto-08.jpg': f8};
+
+const Preview: React.FC = () => <Montagem plano={plano as Plano} arquivos={arquivos} />;
+
+export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 50, Componente: Preview};

package/kits/antes-depois/receita.json

@@ -0,0 +1,21 @@
+{
+  "kit": "antes-depois", "fps": 30, "batida_trilha_quadros": 15.3,
+  "duracao_video_s": [6, 40],
+  "ordem_sugerida": ["comparacao", "resultado", "medidor", "lista", "cta"],
+  "batidas": [
+    {"nome": "comparacao", "obrigatoria": true, "duracao": [42, 60], "elementos": ["TelaDividida", "RotuloAntesDepois"], "entrada": ["nenhuma"], "sons": ["whoosh-entra", "swoosh", "pop-cartao", "pop-palavra"], "nota": "o herói. Divisor 0,5 → 0,07 → 0,93 → 0,5; ANTES aparece quando o divisor passa à esquerda, DEPOIS quando passa à direita."},
+    {"nome": "resultado", "obrigatoria": true, "duracao": [36, 48], "elementos": ["NumeroDelta"], "entrada": ["cortina"], "sons": ["swoosh", "tick", "impacto"], "nota": "o ganho em um número só. Mostre o número que o cliente mediu."},
+    {"nome": "medidor", "obrigatoria": false, "duracao": [42, 54], "elementos": ["BarraMedidor"], "entrada": ["baixo"], "sons": ["whoosh-entra", "pop-cartao", "pop-palavra", "clique"], "nota": "dois valores na mesma unidade; a barra do depois tem que ser visivelmente menor ou maior."},
+    {"nome": "lista", "obrigatoria": false, "duracao": [42, 60], "elementos": ["ListaMudancas"], "entrada": ["flip"], "sons": ["swoosh", "pop-cartao", "clique"], "nota": "3 linhas de 2–3 palavras cada lado."},
+    {"nome": "cta", "obrigatoria": true, "duracao": [48, 72], "elementos": ["TelaDividida", "FaixaMarquee"], "entrada": ["circulo"], "sons": ["whoosh-entra", "swoosh", "impacto", "assinatura"], "nota": "sempre a última: outra comparação menor + uma faixa contida com a chamada."}
+  ],
+  "transicoes": [
+    {"nome": "cortina", "quadros": 14, "como": "faixa diagonal que varre da esquerda revelando a cena nova"},
+    {"nome": "baixo", "quadros": 14, "como": "revela de baixo pra cima"},
+    {"nome": "circulo", "quadros": 14, "como": "círculo que cresce de 0 a 150% a partir de (50%, 55%)"},
+    {"nome": "flip", "quadros": 14, "como": "gira em X de −80° a 0° pelo topo"},
+    {"nome": "nenhuma", "quadros": 0, "como": "só no gancho"}
+  ],
+  "camera": {"deriva": "sempre", "socos": "início de cada cena + cada passagem do divisor + impacto do número"},
+  "trilha": {"arquivo": "assets/trilha/corte-118bpm.mp3", "volume": 0.5, "com_narracao": 0.25}
+}

package/kits/antes-depois/regras/area-segura.md

@@ -0,0 +1,21 @@
+# Área segura (9:16, 1080×1920)
+
+- Todo texto lido: **y 168–1330**, **x 80–1000**. O chão partido sangra à vontade.
+- Janela da comparação: x 100–980 (margem 100 px), altura 760–1020.
+
+| elemento | y de referência (centro) |
+|---|---|
+| TelaDividida (herói) | 800 (altura 1020 → 290–1310) |
+| TelaDividida (apoio) | 620 (altura 760) |
+| adesivo ANTES/DEPOIS (um por vez, mesmo lugar) | 300 (x 330) |
+| bloco do ganho (920×760) | 830 |
+| medidor (título + 2 barras) | 800 |
+| lista (3 linhas de 230) | 760 |
+| faixa (contida, x 100–980) | 1230 (altura 230) |
+
+- Faixas inclinadas e a borda da janela podem encostar em 1340; o texto da faixa roda dentro de y 1050–1330.
+
+## Respiro (regra do dono)
+
+- 35–45% de cada quadro é espaço vazio; 1 herói + no máximo 1 apoio por plano; margem ≥ 96 px (aqui 100); nada encosta na borda do quadro.
+- Depois de cada impacto grande (número do ganho, faixa batendo), segure 15–24 quadros (0,5–0,8 s) sem evento novo.

package/kits/antes-depois/regras/cor.md

@@ -0,0 +1,15 @@
+# Cor
+
+| token | hex | uso |
+|---|---|---|
+| `concreto` | `#8F8C86` | metade "antes" do chão |
+| `concretoEscuro` | `#6F6C66` | adesivo ANTES, texto riscado |
+| `cinza` | `#B9B6AF` | barra e metade "antes" dos cartões |
+| `limao` | `#C8FF2E` | metade "depois" do chão, bloco do ganho, barra e metade "depois" |
+| `tinta` | `#0F0F0D` | texto, bordas, divisor, sombra dura |
+| `papel` | `#F4F2EC` | letra do adesivo ANTES, fundo da janela |
+
+- Chão: concreto da esquerda até a emenda (50% ± 4,5%), limão da emenda até a direita; emenda preta de 16 px; hachura diagonal `rgba(15,15,13,.045)` a cada 22 px.
+- Filtro do antes: `grayscale(1) contrast(.78) brightness(.8) blur(2.5px)`. Filtro do depois: `saturate(1.4) contrast(1.1) brightness(1.04)`.
+- Borda: 8–10 px `tinta`. Sombra dura: `10–20px 10–20px 0 tinta`, nunca blur.
+- O cliente pode trocar `limao` por outra cor viva (laranja `#FF7A1A`, ciano `#19E3D3`); manter `tinta` e o concreto. Proibido: degradê.

package/kits/antes-depois/regras/movimento.md

@@ -0,0 +1,23 @@
+# Movimento
+
+Curvas: `e5(t) = 1 − (1 − t)^5` e `ov(t)` = pouso com overshoot (`1 + 3,2x³ + 2,2x²`). **Toda entrada usa `ov`.**
+
+| movimento | duração | valores |
+|---|---|---|
+| janela entra | 18 quadros | sobe 900 px, gira 6° → −1,2°, escala 0,9 → 1 |
+| divisor varre | chaves de 14–16 quadros por trecho | 0,5 → 0,07 → 0,93 → 0,5 com pouso `e5` |
+| foto empurra | 90 quadros | zoom 1,14 → 1,02 |
+| puxador pulsa | contínuo | escala 1 ± 0,06 (`sin(f/4)`) |
+| adesivo | 14 quadros | escala 0 → 1 com overshoot, gira ±30° → −7° / +6°, oscila ±1,2° |
+| bloco do ganho | 18 quadros | sobe 1000 px, gira +12° → −4° |
+| número conta | 20 quadros | 0 → valor, pulsa 4% |
+| barra enche | 20 quadros, 10 de defasagem | 0 → largura proporcional, valor conta em 24 |
+| linha da lista | 14 quadros, 11 de intervalo | metades entram de ±700 px e se encontram; risco corre em 10 quadros |
+| faixa | 16 quadros | varre 1500 px de lado, gira 14° → inclinação; texto corre 12–16 px/quadro |
+| troca de cena | 7 + 14 quadros | a cena sai sozinha nos últimos 7 (encolhe 6%, sobe 40 px, some); a próxima entra em 14 com `cortina`, `baixo`, `circulo` ou `flip`. Sem sobreposição |
+| divisor | 24 quadros por varrida | curva em S (6t⁵−15t⁴+10t³), segura 8 quadros em cada ponta; puxador 132 px cresce 8% andando |
+| câmera (sempre) | contínuo | zoom 1,018 ± 0,012 (+0,00012/quadro), deriva ±12/±8 px, giro ±0,23° |
+| soco de câmera | decai em ~7 quadros | +0,035 de zoom, tremor 10 px |
+| emenda do chão | contínuo | 50% ± 4,5% (`sin(f/26)`) |
+
+- Nada fica parado: cena com mais de 45 quadros sem evento ganha um soco ou um divisor novo.

package/kits/antes-depois/regras/ritmo.md

@@ -0,0 +1,15 @@
+# Ritmo
+
+- 118 bpm: **1 batida = 15,3 quadros** (0,51 s). Cortes caem a cada 3 batidas (≈ 46 quadros) ou 2 (≈ 31).
+- Vídeo de 8 s = 240 quadros = 5 cenas.
+
+| batida | duração s | quadros |
+|---|---|---|
+| comparacao | 1,4–2,0 | 42–60 |
+| resultado | 1,2–1,6 | 36–48 |
+| medidor | 1,4–1,8 | 42–54 |
+| lista | 1,4–2,0 | 42–60 (11 quadros por linha) |
+| cta | 1,6–2,4 | 48–72 |
+
+- Leitura mínima: número do ganho parado por ≥ 20 quadros; cada linha da lista ≥ 25 quadros na tela.
+- O divisor faz 3 trechos por comparação (esquerda, direita, meio); nunca para antes do quadro 40.

package/kits/antes-depois/regras/som.md

@@ -0,0 +1,20 @@
+# Som
+
+- Trilha: `assets/trilha/corte-118bpm.mp3` (8,6 s, 118 bpm, tech-bright, tom D), volume **0,5**, fade nos últimos **20 quadros**. Vídeo maior: gere outra (`music make --preset tech-bright --bpm 118 --key D --force`), sem loop.
+- Com narração: trilha a **0,25** e efeitos a 70%.
+
+| som | volume | quando |
+|---|---|---|
+| `whoosh-entra` | 0,85 | entrada de cena sem lado (−1 quadro) |
+| `swoosh` | 0,9 | divisor que varre, faixa que cruza |
+| `pop-cartao` | 0,9 | janela, adesivo, barra que pousa |
+| `pop-palavra` | 0,9 | adesivo DEPOIS, valor que fecha |
+| `tick` | 0,55 | número começando a contar |
+| `clique` | 0,8 | linha da lista fecha |
+| `impacto` | 0,95 | número do ganho assenta, faixa bate |
+| `subida` | 0,7 | 1,2 s antes do impacto final (opcional) |
+| `assinatura` | 0,8 | CTA final |
+| `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.