primocode 10.17.0 → 10.19.0

package/kits/aquarela/elementos/Som.tsx

@@ -0,0 +1,33 @@
+// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`), trilha de `music make`.
+// 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 whoosh_pincel from '../assets/sons/whoosh-pincel.mp3';
+import pop_mancha from '../assets/sons/pop-mancha.mp3';
+import gota from '../assets/sons/gota.mp3';
+import papel_cai from '../assets/sons/papel-cai.mp3';
+import palavra from '../assets/sons/palavra.mp3';
+import risco from '../assets/sons/risco.mp3';
+import impacto from '../assets/sons/impacto.mp3';
+import assinatura from '../assets/sons/assinatura.mp3';
+import trilha from '../assets/trilha/calma-com-punch-108bpm.mp3';
+
+export const SONS = {'whoosh-pincel': whoosh_pincel, 'pop-mancha': pop_mancha, 'gota': gota, 'papel-cai': papel_cai, 'palavra': palavra, 'risco': risco, 'impacto': impacto, 'assinatura': assinatura} as const;
+export type NomeSom = keyof typeof SONS;
+
+// volume de cada efeito (0..1) já calibrado contra a trilha
+const VOLUME: Record<NomeSom, number> = {'whoosh-pincel': 0.9, 'pop-mancha': 0.9, 'gota': 0.85, 'papel-cai': 0.9, 'palavra': 1.0, 'risco': 0.7, 'impacto': 0.8, 'assinatura': 0.9};
+
+export type EfeitoProps = {som: NomeSom; em: number; volume?: number};
+/** um efeito no quadro `em` (absoluto, ou relativo à Cena se estiver dentro de uma) */
+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/aquarela/elementos/TituloPincel.tsx

@@ -0,0 +1,51 @@
+// TituloPincel: linhas de título em Fraunces 700 enormes. Cada palavra cai girando e assenta (overshoot);
+// a palavra entre asteriscos ganha uma lavagem de cor (mancha de pincel) que cresce por trás.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FAM_A, FONTE_A, blobPath, c01, caber, e5, lerp, ob, seg, textoLimpo} from './base';
+
+export type TituloPincelProps = {
+  /** "Nunca *pintou?*": a palavra entre asteriscos recebe a lavagem */
+  linhas: string[];
+  /** quadro da primeira palavra */
+  inicio?: number;
+  /** quadros entre uma palavra e a próxima */
+  intervalo?: number;
+  /** centro vertical do bloco */
+  y?: number;
+  tamanho?: number;
+  cor?: string;
+  /** cor da lavagem atrás da palavra em destaque */
+  lavagem?: string;
+  /** quadro em que tudo sai (sem isso fica até o fim da cena) */
+  fim?: number;
+};
+
+export const TituloPincel: React.FC<TituloPincelProps> = ({linhas, inicio = 0, intervalo = 7, y = 720, tamanho = 220, cor = COR.tinta, lavagem = COR.coral, fim}) => {
+  const f = useCurrentFrame();
+  const sai = fim === undefined ? 0 : e5(seg(f, fim, fim + 10));
+  if (sai >= 1) return null;
+  let n = 0;
+  const passo = tamanho * 1.04, topo = y - (linhas.length * passo) / 2;
+  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `translateY(${-sai * 120}px)`}}>
+    {linhas.map((l, li) => {
+      const size = caber(textoLimpo(l), tamanho, FAM_A, 920, 700, -0.02);
+      const palavras = l.split(' ');
+      const cx = topo + li * passo + passo / 2;
+      return <div key={li} style={{position: 'absolute', left: 0, width: 1080, top: cx - size * 0.62, height: size * 1.24, display: 'flex', justifyContent: 'center', gap: size * 0.22, whiteSpace: 'nowrap'}}>
+        {palavras.map((p, pi) => {
+          const destaque = p.includes('*'), txt = p.replace(/\*/g, '');
+          const em = inicio + n++ * intervalo;
+          const q = ob(seg(f, em, em + 16), 2.1), v = c01((f - em + 1) / 3);
+          const w = seg(f, em + 4, em + 18);
+          return <span key={pi} style={{position: 'relative', display: 'inline-block', transform: `translateY(${(1 - q) * -260}px) rotate(${(1 - q) * 8}deg) scale(${lerp(1, 1.4, 1 - q)})`, opacity: v, fontFamily: FONTE_A, fontWeight: 700, fontSize: size, lineHeight: 1.24, letterSpacing: '-0.02em', color: cor}}>
+            {destaque && <svg viewBox="-100 -60 200 120" preserveAspectRatio="none" style={{position: 'absolute', left: '-12%', width: '124%', top: '12%', height: '86%', zIndex: -1, mixBlendMode: 'multiply', transform: `scaleX(${e5(w)})`, transformOrigin: '0 50%', overflow: 'visible'}}>
+              <path d={blobPath(70, pi + li * 5 + 3, 0.28, 12)} transform="scale(1.35 0.8)" fill={lavagem} opacity={0.75} />
+            </svg>}
+            {txt}
+          </span>;
+        })}
+      </div>;
+    })}
+  </div>;
+};

package/kits/aquarela/elementos/base.ts

@@ -0,0 +1,97 @@
+// Base do kit aquarela: 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 fonteA from '../assets/fontes/fraunces-latin.woff2';
+import fonteB from '../assets/fontes/caveat-latin.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 = {
+  papel: '#F3EBDD',
+  papelSombra: '#E3D6BE',
+  tinta: '#2A2833',
+  coral: '#F0604A',
+  turquesa: '#1FA5A0',
+  ouro: '#F4B63F',
+  violeta: '#7B5BC9',
+  rosa: '#F59AB4',
+};
+
+/** contorno irregular de mancha: n pontos em volta de (0,0), raio r, ruído irr (0..0.5) */
+export const blobPath = (r: number, seed: number, irr = 0.24, n = 14) => {
+  const p = Array.from({length: n}, (_, i) => {
+    const a = (Math.PI * 2 * i) / n, k = r * (1 - irr / 2 + irr * rnd(seed * 13 + i));
+    return [Math.cos(a) * k, Math.sin(a) * k];
+  });
+  let d = `M ${p[0][0].toFixed(1)} ${p[0][1].toFixed(1)}`;
+  for (let i = 0; i < n; i++) {
+    const p0 = p[(i - 1 + n) % n], p1 = p[i], p2 = p[(i + 1) % n], p3 = p[(i + 2) % n];
+    d += ` C ${(p1[0] + (p2[0] - p0[0]) / 6).toFixed(1)} ${(p1[1] + (p2[1] - p0[1]) / 6).toFixed(1)}, ${(p2[0] - (p3[0] - p1[0]) / 6).toFixed(1)} ${(p2[1] - (p3[1] - p1[1]) / 6).toFixed(1)}, ${p2[0].toFixed(1)} ${p2[1].toFixed(1)}`;
+  }
+  return d + ' Z';
+};
+
+// ---------- fonte ----------
+// Famílias com o prefixo do kit, pra não colidir com outro kit no mesmo estúdio.
+export const FAM_A = 'AQ Fraunces';
+export const FONTE_A = '"AQ Fraunces", Georgia, serif';
+export const FAM_B = 'AQ Caveat';
+export const FONTE_B = '"AQ Caveat", "Comic Sans MS", cursive';
+if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__aqA) {
+  (globalThis as Record<string, unknown>).__aqA = true;
+  const hA = delayRender('aquarela: AQ Fraunces');
+  new FontFace('AQ Fraunces', `url(${fonteA}) format('woff2')`, {weight: '500 800', style: 'normal'}).load()
+    .then((ff) => {document.fonts.add(ff); continueRender(hA);})
+    .catch(() => continueRender(hA));
+}
+if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__aqB) {
+  (globalThis as Record<string, unknown>).__aqB = true;
+  const hB = delayRender('aquarela: AQ Caveat');
+  new FontFace('AQ Caveat', `url(${fonteB}) format('woff2')`, {weight: '600 700', style: 'normal'}).load()
+    .then((ff) => {document.fonts.add(ff); continueRender(hB);})
+    .catch(() => continueRender(hB));
+}
+
+// ---------- 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, ≈ cubic-bezier(.2,.8,.2,1) */
+export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
+/** saída com overshoot (passa de 1 e volta): toda entrada do kit usa esta ou a e5 */
+export const ob = (t: number, s = 1.9) => {const x = c01(t) - 1; return 1 + (s + 1) * x * x * x + s * x * x;};
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+/** pseudo-aleatório estável (0..1) a partir de um inteiro */
+export const rnd = (n: number) => {const x = Math.sin(n * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x);};
+/** uma batida da trilha do kit em quadros */
+export const BATIDA = 16.667;
+
+// ---------- medida de texto ----------
+let canvas: HTMLCanvasElement | null = null;
+const cache = new Map<string, number>();
+export const larguraTexto = (texto: string, tamanho: number, fam: string, peso = 800, trackingEm = 0): number => {
+  const chave = `${texto}|${tamanho}|${fam}|${peso}|${trackingEm}`;
+  const c = cache.get(chave); if (c !== undefined) return c;
+  if (typeof document === 'undefined') return texto.length * tamanho * 0.58;
+  canvas = canvas || document.createElement('canvas');
+  const ctx = canvas.getContext('2d'); if (!ctx) return texto.length * tamanho * 0.58;
+  const fonte = `${peso} ${tamanho}px "${fam}"`;
+  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` (nunca palavra cortada) */
+export const caber = (texto: string, tamanho: number, fam: string, largura = LARGURA_UTIL, peso = 800, trackingEm = 0) => {
+  const w = larguraTexto(texto, tamanho, fam, peso, trackingEm);
+  return w > largura ? Math.floor(tamanho * (largura / w)) : tamanho;
+};
+/** tira os asteriscos de destaque: "Usar *IA*" -> "Usar IA" */
+export const textoLimpo = (t: string) => t.replace(/\*/g, '');
+/** corta "a *b* c" em [{t:'a ', d:false}, {t:'b', d:true}, {t:' c', d:false}] */
+export const partes = (t: string) => t.split('*').map((p, i) => ({t: p, d: i % 2 === 1})).filter((p) => p.t.length > 0);

package/kits/aquarela/elementos/index.ts

@@ -0,0 +1,16 @@
+// Tudo que o kit aquarela 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 {ManchaTinta} from './ManchaTinta';
+export {TituloPincel} from './TituloPincel';
+export {Pincelada} from './Pincelada';
+export {AnotacaoManual} from './AnotacaoManual';
+export {PapelRasgado} from './PapelRasgado';
+export {Pingos} from './Pingos';
+export {AssinaturaMarca} from './AssinaturaMarca';
+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/aquarela/exemplos/logo-mare.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 14C150 20 188 60 184 108 180 156 140 188 96 184 50 180 14 142 18 96 22 50 56 10 100 14Z" fill="#1FA5A0"/><path d="M30 118c20-24 38-24 58 0s38 24 58 0 24-14 30-8" fill="none" stroke="#F3EBDD" stroke-width="12" stroke-linecap="round"/><circle cx="132" cy="64" r="14" fill="#F4B63F"/></svg>

package/kits/aquarela/exemplos/plano.json

@@ -0,0 +1,62 @@
+{
+  "kit": "aquarela",
+  "roteiro": "exemplos/roteiro.md",
+  "duracao": 240,
+  "trilha": {"volume": 0.5},
+  "cenas": [
+    {"batida": "gancho", "de": 0, "ate": 33, "entrada": "nenhuma",
+     "camadas": [
+       {"elemento": "ManchaTinta", "props": {"manchas": [{"x": 540, "y": 760, "raio": 520, "cor": "#F0604A", "em": 0, "seed": 3}, {"x": 300, "y": 420, "raio": 260, "cor": "#F4B63F", "em": 6, "seed": 8}]}},
+       {"elemento": "TituloPincel", "props": {"linhas": ["Nunca", "*pintou?*"], "inicio": 2, "intervalo": 6, "y": 740, "tamanho": 250, "lavagem": "#F4B63F"}},
+       {"elemento": "Pingos", "props": {"pingos": [{"x": 170, "y": 1150, "cor": "#F0604A", "em": 6}, {"x": 890, "y": 1230, "cor": "#1FA5A0", "em": 12, "tamanho": 56}]}}
+     ],
+     "socos": [18, 24],
+     "sons": [{"som": "pop-mancha", "em": 0}, {"som": "palavra", "em": 3}, {"som": "palavra", "em": 9}, {"som": "gota", "em": 16}]},
+    {"batida": "gancho", "de": 33, "ate": 67, "entrada": "giro",
+     "camadas": [
+       {"elemento": "ManchaTinta", "props": {"manchas": [{"x": 520, "y": 740, "raio": 500, "cor": "#1FA5A0", "em": 0, "seed": 5}, {"x": 800, "y": 1000, "raio": 300, "cor": "#7B5BC9", "em": 5, "seed": 9}]}},
+       {"elemento": "TituloPincel", "props": {"linhas": ["Sem", "*medo.*"], "inicio": 3, "intervalo": 7, "y": 740, "tamanho": 320, "lavagem": "#7B5BC9"}},
+       {"elemento": "Pingos", "props": {"pingos": [{"x": 900, "y": 340, "cor": "#F0604A", "em": 10, "tamanho": 52}]}}
+     ],
+     "socos": [21],
+     "sons": [{"som": "pop-mancha", "em": -1}, {"som": "palavra", "em": 3}, {"som": "palavra", "em": 10}, {"som": "gota", "em": 19}]},
+    {"batida": "virada", "de": 67, "ate": 100, "entrada": "zoom",
+     "camadas": [
+       {"elemento": "ManchaTinta", "props": {"manchas": [{"x": 540, "y": 700, "raio": 480, "cor": "#F4B63F", "em": 0, "seed": 11}]}},
+       {"elemento": "TituloPincel", "props": {"linhas": ["Aprenda", "*aquarela*"], "inicio": 2, "intervalo": 6, "y": 620, "tamanho": 200, "lavagem": "#F0604A"}},
+       {"elemento": "Pincelada", "props": {"de": [110, 930], "para": [970, 905], "espessura": 120, "cor": "#1FA5A0", "inicio": 8, "duracao": 12}},
+       {"elemento": "AnotacaoManual", "props": {"texto": "em 3 tardes", "x": 540, "y": 1130, "tamanho": 130, "rot": -4, "cor": "#7B5BC9", "inicio": 14, "forma": "sublinhado"}}
+     ],
+     "socos": [8],
+     "sons": [{"som": "whoosh-pincel", "em": -1}, {"som": "palavra", "em": 2}, {"som": "whoosh-pincel", "em": 7}, {"som": "risco", "em": 14}]},
+    {"batida": "prova", "de": 100, "ate": 133, "entrada": "circulo",
+     "camadas": [
+       {"elemento": "ManchaTinta", "props": {"manchas": [{"x": 330, "y": 640, "raio": 440, "cor": "#F0604A", "em": 0, "seed": 14}, {"x": 740, "y": 760, "raio": 430, "cor": "#1FA5A0", "em": 4, "seed": 16}, {"x": 540, "y": 1010, "raio": 380, "cor": "#F4B63F", "em": 8, "seed": 18}]}},
+       {"elemento": "AnotacaoManual", "props": {"texto": "cor que escorre", "x": 540, "y": 790, "tamanho": 160, "rot": -5, "cor": "#2A2833", "inicio": 8, "forma": "circulo"}}
+     ],
+     "socos": [8],
+     "sons": [{"som": "pop-mancha", "em": 0}, {"som": "pop-mancha", "em": 5}, {"som": "risco", "em": 9}]},
+    {"batida": "lista", "de": 133, "ate": 167, "entrada": "direita",
+     "camadas": [
+       {"elemento": "ManchaTinta", "props": {"manchas": [{"x": 380, "y": 600, "raio": 420, "cor": "#F4B63F", "em": 0, "seed": 21}, {"x": 760, "y": 1040, "raio": 320, "cor": "#F59AB4", "em": 3, "seed": 23}]}},
+       {"elemento": "PapelRasgado", "props": {"x": 540, "y": 740, "largura": 820, "altura": 800, "rot": -3, "inicio": 2, "titulo": "Material incluso", "tituloTamanho": 132, "linhas": ["pincéis", "papel de 300 g", "tintas"], "fita": "#1FA5A0", "de": "direita"}},
+       {"elemento": "AnotacaoManual", "props": {"texto": "tudo pronto!", "x": 700, "y": 1230, "tamanho": 110, "rot": -6, "cor": "#F0604A", "inicio": 16, "forma": "nenhuma"}}
+     ],
+     "socos": [8],
+     "sons": [{"som": "papel-cai", "em": -1}, {"som": "risco", "em": 16}]},
+    {"batida": "data", "de": 167, "ate": 200, "entrada": "queda",
+     "camadas": [
+       {"elemento": "ManchaTinta", "props": {"manchas": [{"x": 540, "y": 740, "raio": 520, "cor": "#7B5BC9", "em": 0, "seed": 31}, {"x": 250, "y": 1100, "raio": 260, "cor": "#F0604A", "em": 5, "seed": 33}]}},
+       {"elemento": "PapelRasgado", "props": {"x": 540, "y": 740, "largura": 840, "altura": 960, "rot": 2, "inicio": 1, "titulo": "14", "tituloTamanho": 430, "linhas": ["novembro", "sábado · 14h"], "fita": "#F0604A"}},
+       {"elemento": "Pingos", "props": {"pingos": [{"x": 130, "y": 330, "cor": "#1FA5A0", "em": 14, "tamanho": 52}, {"x": 940, "y": 1240, "cor": "#F4B63F", "em": 20, "tamanho": 56}]}}
+     ],
+     "socos": [14, 25],
+     "sons": [{"som": "papel-cai", "em": -1}, {"som": "impacto", "em": 13}, {"som": "gota", "em": 24}]},
+    {"batida": "marca", "de": 200, "ate": 240, "entrada": "zoom",
+     "camadas": [
+       {"elemento": "AssinaturaMarca", "props": {"logo": "logo-mare.svg", "nome": "maré viva", "detalhe": "oficina de aquarela", "endereco": "Ateliê Pinga · Recife · mareviva.exemplo", "inicio": 0}}
+     ],
+     "socos": [8],
+     "sons": [{"som": "assinatura", "em": 4}, {"som": "gota", "em": 30}]}
+  ]
+}

package/kits/aquarela/exemplos/roteiro.md

@@ -0,0 +1,21 @@
+# Roteiro de demonstração · "Maré Viva" (oficina fictícia)
+
+Pedido: *"um reels de 8 s anunciando a oficina de aquarela Maré Viva, sábado 14 de novembro, no Ateliê Pinga. Estilo feito à mão."*
+
+Sem narração: os cortes seguem a trilha (1 batida = 16.667 quadros).
+
+| # | batida | tempo (quadros) | na tela | elemento | som |
+|---|---|---|---|---|---|
+| 1 | gancho | 0–33 | "Nunca *pintou?*" | ManchaTinta + TituloPincel + Pingos | pop-mancha, palavra, gota |
+| 2 | gancho | 33–67 | "Sem *medo.*" | ManchaTinta + TituloPincel | pop-mancha, palavra |
+| 3 | virada | 67–100 | "Aprenda *aquarela*" + pincelada + "em 3 tardes" | TituloPincel + Pincelada + AnotacaoManual | whoosh-pincel, palavra, risco |
+| 4 | prova | 100–133 | "cor que escorre" + círculo à mão | ManchaTinta + AnotacaoManual | pop-mancha, risco |
+| 5 | lista | 133–167 | papel: "Material incluso" + 3 linhas | PapelRasgado + AnotacaoManual | papel-cai, risco |
+| 6 | data | 167–200 | "14" gigante · "novembro · sábado, 14h" | PapelRasgado + Pingos | papel-cai, impacto |
+| 7 | marca | 200–240 | logo "maré viva" + "Ateliê Pinga · Recife" | AssinaturaMarca | assinatura, gota |
+
+Como a IA chegou nisso:
+1. Cortou o pedido em frases de 1–3 palavras e escolheu a palavra-chave de cada uma para a lavagem de cor.
+2. Pegou as batidas obrigatórias (gancho, virada, prova, marca) e as de apoio do pedido (lista, data).
+3. Encaixou os cortes nas batidas da trilha (0, 33, 67, 100, 133, 167, 200) e deu uma tinta diferente a cada cena.
+4. Escreveu `plano.json`; o `preview.tsx` passa o plano para `Montagem`, que só usa os elementos do kit.

package/kits/aquarela/preview.tsx

@@ -0,0 +1,12 @@
+// 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-aquarela`.
+import React from 'react';
+import {Montagem, Plano} from './elementos';
+import plano from './exemplos/plano.json';
+import l0 from './exemplos/logo-mare.svg';
+
+const arquivos: Record<string, string> = {'logo-mare.svg': l0};
+
+const Preview: React.FC = () => <Montagem plano={plano as Plano} arquivos={arquivos} />;
+
+export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 92, Componente: Preview};

package/kits/aquarela/receita.json

@@ -0,0 +1,213 @@
+{
+  "kit": "aquarela",
+  "fps": 30,
+  "batida_trilha_quadros": 16.667,
+  "duracao_video_s": [
+    6,
+    45
+  ],
+  "ordem_sugerida": [
+    "gancho",
+    "problema",
+    "virada",
+    "prova",
+    "lista",
+    "data",
+    "marca"
+  ],
+  "batidas": [
+    {
+      "nome": "gancho",
+      "obrigatoria": true,
+      "duracao": [
+        36,
+        66
+      ],
+      "elementos": [
+        "ManchaTinta",
+        "TituloPincel",
+        "Pingos"
+      ],
+      "entrada": [
+        "circulo"
+      ],
+      "sons": [
+        "pop-mancha",
+        "palavra",
+        "gota"
+      ],
+      "nota": "pergunta curta com a palavra-chave em lavagem + pingos batendo; segunda frase corta na metade."
+    },
+    {
+      "nome": "problema",
+      "obrigatoria": false,
+      "duracao": [
+        36,
+        75
+      ],
+      "elementos": [
+        "TituloPincel",
+        "Pingos",
+        "ManchaTinta"
+      ],
+      "entrada": [
+        "subir"
+      ],
+      "sons": [
+        "palavra",
+        "gota"
+      ],
+      "nota": "a dor em 2 linhas; mancha cinza-violeta atrás."
+    },
+    {
+      "nome": "virada",
+      "obrigatoria": true,
+      "duracao": [
+        42,
+        66
+      ],
+      "elementos": [
+        "ManchaTinta",
+        "TituloPincel",
+        "Pincelada",
+        "AnotacaoManual"
+      ],
+      "entrada": [
+        "giro"
+      ],
+      "sons": [
+        "whoosh-pincel",
+        "palavra",
+        "risco",
+        "impacto"
+      ],
+      "nota": "o nome do produto/evento aparece aqui como texto; a pincelada risca embaixo."
+    },
+    {
+      "nome": "prova",
+      "obrigatoria": true,
+      "duracao": [
+        27,
+        54
+      ],
+      "elementos": [
+        "ManchaTinta",
+        "AnotacaoManual",
+        "PapelRasgado",
+        "Pincelada"
+      ],
+      "entrada": [
+        "circulo",
+        "subir"
+      ],
+      "sons": [
+        "pop-mancha",
+        "risco",
+        "papel-cai"
+      ],
+      "nota": "mancha gigante de 2–3 cores + anotação com círculo, ou papel com foto."
+    },
+    {
+      "nome": "lista",
+      "obrigatoria": false,
+      "duracao": [
+        36,
+        66
+      ],
+      "elementos": [
+        "PapelRasgado",
+        "AnotacaoManual"
+      ],
+      "entrada": [
+        "direita"
+      ],
+      "sons": [
+        "papel-cai",
+        "risco"
+      ],
+      "nota": "cartão com 3 linhas curtas (materiais, etapas, benefícios)."
+    },
+    {
+      "nome": "data",
+      "obrigatoria": false,
+      "duracao": [
+        33,
+        54
+      ],
+      "elementos": [
+        "PapelRasgado",
+        "ManchaTinta",
+        "Pingos"
+      ],
+      "entrada": [
+        "queda"
+      ],
+      "sons": [
+        "papel-cai",
+        "impacto",
+        "gota"
+      ],
+      "nota": "o único cartão com número gigante: dia em 330 px."
+    },
+    {
+      "nome": "marca",
+      "obrigatoria": true,
+      "duracao": [
+        48,
+        90
+      ],
+      "elementos": [
+        "AssinaturaMarca"
+      ],
+      "entrada": [
+        "zoom"
+      ],
+      "sons": [
+        "assinatura",
+        "gota"
+      ],
+      "nota": "sempre a última. Mancha + logo + nome + detalhe + endereço."
+    }
+  ],
+  "transicoes": [
+    {
+      "nome": "circulo",
+      "quadros": 14,
+      "como": "a cena abre como mancha de tinta: círculo de 4 a 1600 px a partir do centro"
+    },
+    {
+      "nome": "subir",
+      "quadros": 14,
+      "como": "entra 300 px de baixo com overshoot e desfoque 10 px"
+    },
+    {
+      "nome": "giro",
+      "quadros": 14,
+      "como": "entra girando 16° com escala 1,6 → 1"
+    },
+    {
+      "nome": "direita",
+      "quadros": 14,
+      "como": "entra 800 px da direita"
+    },
+    {
+      "nome": "queda",
+      "quadros": 14,
+      "como": "cai 520 px de cima, como papel solto"
+    },
+    {
+      "nome": "zoom",
+      "quadros": 14,
+      "como": "entra de 1,9x para 1"
+    }
+  ],
+  "camera": {
+    "deriva": "sempre, como mão sobre a mesa",
+    "socos": "início de cada cena, pingo que bate, papel que pousa"
+  },
+  "trilha": {
+    "arquivo": "assets/trilha/calma-com-punch-108bpm.mp3",
+    "volume": 0.5,
+    "com_narracao": 0.25
+  }
+}

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

@@ -0,0 +1,17 @@
+# Área segura (9:16, 1080×1920)
+
+- Tudo que se lê fica entre **y = 168** e **y = 1330** e entre **x = 80** e **x = 1000** (920 px úteis).
+- Embaixo de 1330 px ficam a legenda e os botões do Reels/TikTok: ali só fundo e o que sangra.
+- Posições de referência (centro da linha, em px):
+
+| uso | y |
+|---|---|
+| anotação de apoio (topo) | 300 |
+| título de 2 linhas (centro do bloco) | 700–760 |
+| palavra gigante isolada | 749 |
+| papel rasgado (centro) | 740 |
+| anotação com seta (embaixo do título) | 1080–1180 |
+| logo na assinatura | 560–620 |
+| endereço | 1160–1200 |
+
+- Manchas, pingos e o papel sangram a tela; texto nunca.

package/kits/aquarela/regras/cor.md

@@ -0,0 +1,23 @@
+# Cor
+
+| token | hex | uso |
+|---|---|---|
+| `papel` | #F3EBDD | chão (papel cru) |
+| `papelSombra` | #E3D6BE | cantos e vinheta do papel |
+| `tinta` | #2A2833 | texto principal |
+| `coral` | #F0604A | tinta 1, destaque quente |
+| `turquesa` | #1FA5A0 | tinta 2, destaque frio |
+| `ouro` | #F4B63F | tinta 3, luz e fita |
+| `violeta` | #7B5BC9 | tinta 4, anotação à mão |
+| `rosa` | #F59AB4 | mistura suave (só em manchas) |
+
+## Degradês e sombras
+
+- Mancha: preenchimento a 55% + miolo a 35% (raio 70%) + borda da mesma cor a 50%, 10 px, `mix-blend-mode: multiply`.
+- Sombra do papel: `drop-shadow(0 18px 24px rgba(42, 30, 20, 0.28))`.
+- Fita washi: cor da tinta a 80% com listras `repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 6px, transparent 6px 14px)`.
+- Vinheta: `radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(227,214,190,.8))`.
+
+## O que o cliente pode trocar
+
+As 4 tintas (coral, turquesa, ouro, violeta) podem ser trocadas pelas cores da marca do cliente, mantendo o papel e a tinta de texto. Papel e grão não mudam.

package/kits/aquarela/regras/movimento.md

@@ -0,0 +1,19 @@
+# Movimento
+
+Curva padrão: `ob(t) = 1 + 2,9·(t−1)³ + 1,9·(t−1)²` (overshoot de ~9%, assenta em 8 quadros) e `e5(t) = 1 − (1 − t)^5` para saídas.
+
+| movimento | duração | valores |
+|---|---|---|
+| mancha floresce | 20 quadros | escala 0 → 1,09 → 1 com overshoot; continua crescendo +8% em 70 quadros |
+| palavra cai | 16 quadros | cai 260 px, gira 8° → 0, escala 1,4 → 1 |
+| lavagem atrás da palavra | 14 quadros | escala X 0 → 1 a partir de 4 quadros depois da palavra |
+| pincelada | 14–22 quadros | traço revelado de ponta a ponta, 7 cerdas, bordas deslocadas 14 px |
+| anotação | 16 quadros + 14 do desenho | texto revelado da esquerda; seta/círculo desenhados depois |
+| papel cai | 22 quadros | cai 900 px, gira ±14° → rotação final, overshoot 1,6 |
+| pingo | 10 quadros de queda + 12 de espirro | cai com aceleração t²; 8 satélites a 60–140 px |
+| entrada de cena | 14 quadros | `circulo` abre a 1600 px · `subir` 300 px · `giro` 16°; desfoque 10 px |
+| saída de cena | 10 quadros | sobe 240 px, escala 1,08, desfoque 10 px |
+| câmera (sempre) | contínuo | zoom 1,03 ± 0,014, deriva ±20/±14 px, giro ±0,5°; soco +0,035 em ~8 quadros |
+
+- Nada fica parado: se uma cena passa de 40 quadros sem elemento novo, ponha um pingo, uma pincelada ou uma anotação.
+- Escalonamento entre palavras: 6–9 quadros.

package/kits/aquarela/regras/ritmo.md

@@ -0,0 +1,17 @@
+# Ritmo
+
+- 30 fps. Uma batida da trilha = **16.667 quadros** (108 bpm). Cortes em múltiplos de 16,7 (arredonde): 0, 17, 33, 50, 67, 83, 100, 117, 133, 150, 167, 183, 200, 217, 233.
+
+| batida | duração (s) | quadros |
+|---|---|---|
+| gancho | 1,2–2,2 | 36–66 |
+| problema | 1,2–2,5 | 36–75 |
+| virada | 1,4–2,2 | 42–66 |
+| prova (cada) | 0,9–1,8 | 27–54 |
+| lista | 1,2–2,2 | 36–66 |
+| data | 1,1–1,8 | 33–54 |
+| oferta | 1,2–2,0 | 36–60 |
+| marca | 1,6–3,0 | 48–90 |
+
+- Preview do kit: 8 s, 7 cenas.
+- Leitura: uma anotação precisa de **≥ 24 quadros** na tela depois de escrita; um título de 2 linhas, **≥ 36**.

package/kits/aquarela/regras/som.md

@@ -0,0 +1,20 @@
+# Som
+
+- Trilha: `assets/trilha/calma-com-punch-108bpm.mp3` (8,6 s, 108 bpm), volume **0.5**, fade de saída nos últimos **20 quadros**. Vídeo maior que 8,6 s: gere uma trilha nova no MotionCraft (`music make`, preset `calm-punch`, 108 bpm, tom F), não faça loop deste trecho.
+- Com narração: trilha a **0.25** e efeitos a 70% do volume da tabela.
+- Efeitos (todos sintetizados) e volume padrão:
+
+| som | volume | quando |
+|---|---|---|
+| `whoosh-pincel` | 0.9 | pincelada que atravessa a tela (−1 quadro) |
+| `pop-mancha` | 0.9 | mancha de tinta que floresce |
+| `gota` | 0.85 | pingo que bate no papel |
+| `papel-cai` | 0.9 | cartão de papel rasgado que cai |
+| `palavra` | 1.0 | palavra do título que cai |
+| `risco` | 0.7 | anotação à mão que se escreve |
+| `impacto` | 0.8 | a palavra final da virada e a data |
+| `assinatura` | 0.9 | revelação da marca |
+
+- Um som por movimento que importa; no máximo **3 sons por segundo**; nunca o mesmo arquivo duas vezes seguidas.
+- Som entra **1 a 2 quadros antes** do visual.
+- O render nivela o mix em **−14 LUFS**, pico −1,5 dBTP.

package/kits/aquarela/regras/tipografia.md

@@ -0,0 +1,16 @@
+# Tipografia
+
+Duas fontes: **Fraunces** (serifada macia) para título e **Caveat** (letra de mão) para anotação.
+
+| papel | fonte | peso | tamanho (px) | máx. caracteres |
+|---|---|---|---|---|
+| título gigante | Fraunces | 700 | 190–260 | 14 |
+| título de apoio | Fraunces | 700 | 120–150 | 22 |
+| texto de cartão | Fraunces | 500 | 56–72 | 28 |
+| anotação à mão | Caveat | 700 | 84–120 | 18 |
+| endereço / detalhe | Caveat | 600 | 64–76 | 30 |
+
+- Tracking: −0,02 em no título, 0 no resto.
+- Line-height: 1,02 no título; 1,25 no cartão.
+- Caixa: frase normal (maiúscula só na primeira letra); nada em caixa-alta.
+- Texto que cresce encolhe sozinho (`caber()` em `base.ts`) até caber em 920 px; nunca palavra cortada.