primocode 10.17.1 → 11.0.0

package/kits/aquarela/elementos/PapelRasgado.tsx

@@ -0,0 +1,50 @@
+// PapelRasgado: cartão de papel com borda de baixo rasgada e fita washi no topo. Cai de cima girando e pousa (overshoot).
+// Tem título, até 4 linhas curtas e, opcional, uma foto no topo. A sombra é a do papel.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_A, FONTE_B, ob, rnd, seg} from './base';
+
+export type PapelRasgadoProps = {
+  x?: number;
+  /** centro vertical */
+  y?: number;
+  largura?: number;
+  altura?: number;
+  /** rotação final em graus */
+  rot?: number;
+  inicio?: number;
+  titulo: string;
+  tituloTamanho?: number;
+  linhas?: string[];
+  linhaTamanho?: number;
+  foto?: string;
+  /** cor da fita */
+  fita?: string;
+  papel?: string;
+  cor?: string;
+  /** de onde cai: 'cima' | 'direita' */
+  de?: 'cima' | 'direita';
+};
+
+const rasgo = (seed: number) => {
+  const pts = ['0% 0%', '100% 0%'];
+  for (let i = 0; i <= 20; i++) pts.push(`${100 - i * 5}% ${94 + rnd(seed + i) * 6}%`);
+  return `polygon(${pts.join(', ')})`;
+};
+
+export const PapelRasgado: React.FC<PapelRasgadoProps> = ({x = 540, y = 740, largura = 800, altura = 760, rot = -3, inicio = 0, titulo, tituloTamanho = 128, linhas = [], linhaTamanho = 104, foto, fita = COR.ouro, papel = '#FFFBF2', cor = COR.tinta, de = 'cima'}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1) return null;
+  const q = ob(seg(f, inicio, inicio + 22), 1.6);
+  const dx = de === 'direita' ? (1 - q) * 900 : 0, dy = de === 'cima' ? (1 - q) * -1000 : 0;
+  return <div style={{position: 'absolute', left: x - largura / 2, top: y - altura / 2, width: largura, height: altura, transform: `translate(${dx}px, ${dy}px) rotate(${rot + (1 - q) * -14}deg)`, filter: 'drop-shadow(0 18px 24px rgba(42, 30, 20, 0.28))'}}>
+    <div style={{position: 'absolute', inset: 0, background: papel, clipPath: rasgo(Math.round(x + largura)), overflow: 'hidden'}}>
+      {foto && <img src={foto} style={{position: 'absolute', left: 0, top: 0, width: '100%', height: '52%', objectFit: 'cover', transform: `scale(${1.08 + 0.00055 * (f - inicio)})`}} />}
+      <div style={{position: 'absolute', left: 48, right: 48, top: foto ? '56%' : 72, color: cor, textAlign: 'center'}}>
+        <div style={{fontFamily: FONTE_A, fontWeight: 700, fontSize: tituloTamanho, lineHeight: 1.02, letterSpacing: '-0.02em'}}>{titulo}</div>
+        {linhas.map((l, i) => <div key={i} style={{fontFamily: FONTE_B, fontWeight: 700, fontSize: linhaTamanho, lineHeight: 1.22, marginTop: i === 0 ? 28 : 0, opacity: seg(f, inicio + 12 + i * 5, inicio + 18 + i * 5), transform: `translateX(${(1 - seg(f, inicio + 12 + i * 5, inicio + 22 + i * 5)) * 60}px)`}}>{l}</div>)}
+      </div>
+    </div>
+    <div style={{position: 'absolute', left: largura / 2 - 130, top: -30, width: 260, height: 70, background: fita, opacity: 0.82, transform: 'rotate(-4deg)', backgroundImage: 'repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 6px, transparent 6px 14px)', clipPath: 'polygon(0 8%, 4% 0, 8% 10%, 12% 0, 92% 0, 96% 10%, 100% 0, 100% 100%, 96% 90%, 92% 100%, 8% 100%, 4% 92%, 0 100%)'}} />
+  </div>;
+};

package/kits/aquarela/elementos/Pincelada.tsx

@@ -0,0 +1,43 @@
+// Pincelada: um traço de pincel de cerdas secas (7 fios de tamanhos e comprimentos diferentes) que atravessa a tela
+// ou sublinha um título. Revelado de ponta a ponta; as bordas passam pelo filtro de água.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, ALTURA, LARGURA, e5, rnd, seg} from './base';
+
+export type PinceladaProps = {
+  de: [number, number];
+  para: [number, number];
+  /** espessura total do traço, em px */
+  espessura?: number;
+  cor?: string;
+  inicio?: number;
+  /** quadros para riscar */
+  duracao?: number;
+  /** quanto o traço curva no meio (px) */
+  curva?: number;
+  opacidade?: number;
+};
+
+export const Pincelada: React.FC<PinceladaProps> = ({de, para, espessura = 120, cor = COR.ouro, inicio = 0, duracao = 14, curva = 24, opacidade = 0.9}) => {
+  const f = useCurrentFrame();
+  const p = e5(seg(f, inicio, inicio + duracao));
+  if (p <= 0) return null;
+  const dx = para[0] - de[0], dy = para[1] - de[1], len = Math.hypot(dx, dy) || 1;
+  const nx = -dy / len, ny = dx / len, n = 7;
+  return <svg width={LARGURA} height={ALTURA} viewBox={`0 0 ${LARGURA} ${ALTURA}`} style={{position: 'absolute', inset: 0, overflow: 'visible', mixBlendMode: 'multiply'}}>
+    <defs>
+      <filter id="aq-seca" filterUnits="userSpaceOnUse" x={-100} y={-100} width={LARGURA + 200} height={ALTURA + 200}>
+        <feTurbulence type="fractalNoise" baseFrequency="0.03 0.012" numOctaves="2" seed="3" result="r" />
+        <feDisplacementMap in="SourceGraphic" in2="r" scale="16" />
+      </filter>
+    </defs>
+    <g filter="url(#aq-seca)" opacity={opacidade}>
+      {Array.from({length: n}, (_, i) => {
+        const off = ((i - (n - 1) / 2) / n) * espessura, mx = (de[0] + para[0]) / 2 + nx * (off + curva), my = (de[1] + para[1]) / 2 + ny * (off + curva);
+        const cerda = 0.82 + 0.18 * rnd(i + 11), ini = 0.04 * rnd(i + 3);
+        const x2 = de[0] + dx * cerda, y2 = de[1] + dy * cerda;
+        return <path key={i} d={`M ${de[0] + dx * ini + nx * off} ${de[1] + dy * ini + ny * off} Q ${mx} ${my} ${x2 + nx * off} ${y2 + ny * off}`} fill="none" stroke={cor} strokeWidth={(espessura / n) * (1.05 + 0.5 * rnd(i + 20))} strokeLinecap="round" pathLength={1} strokeDasharray="1 1.2" strokeDashoffset={1 - p} opacity={0.65 + 0.35 * rnd(i + 5)} />;
+      })}
+    </g>
+  </svg>;
+};

package/kits/aquarela/elementos/Pingos.tsx

@@ -0,0 +1,31 @@
+// Pingos: gotas de tinta que caem do topo com aceleração, batem no papel (soco de câmera é do plano) e espirram:
+// uma mancha chata no ponto de impacto e 8 satélites que voam e somem.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {ALTURA, COR, LARGURA, blobPath, c01, ob, rnd, seg} from './base';
+
+export type Pingo = {x: number; y: number; cor?: string; tamanho?: number; /** quadro em que começa a cair */ em?: number};
+export type PingosProps = {pingos: Pingo[]; /** quadros de queda */ queda?: number};
+
+export const Pingos: React.FC<PingosProps> = ({pingos, queda = 10}) => {
+  const f = useCurrentFrame();
+  return <svg width={LARGURA} height={ALTURA} viewBox={`0 0 ${LARGURA} ${ALTURA}`} style={{position: 'absolute', inset: 0, overflow: 'visible', mixBlendMode: 'multiply'}}>
+    {pingos.map((p, i) => {
+      const em = p.em ?? 0, t = f - em, tam = p.tamanho ?? 46, cor = p.cor ?? COR.coral;
+      if (t < 0) return null;
+      if (t < queda) {
+        const k = (t / queda) ** 2, yy = -80 + (p.y + 80) * k;
+        return <g key={i} transform={`translate(${p.x} ${yy})`}><path d="M0 -70 C 18 -30 28 -10 28 8 A28 28 0 0 1 -28 8 C -28 -10 -18 -30 0 -70Z" fill={cor} transform={`scale(${tam / 38})`} opacity={0.9} /></g>;
+      }
+      const s = t - queda, a = ob(seg(s, 0, 8), 1.8), fade = 1 - seg(s, 60, 110) * 0.15;
+      return <g key={i} transform={`translate(${p.x} ${p.y})`} opacity={fade}>
+        <path d={blobPath(tam * 1.5, i + 60, 0.35, 10)} transform={`scale(${a} ${a * 0.8})`} fill={cor} opacity={0.7} />
+        <path d={blobPath(tam * 0.8, i + 80, 0.3, 8)} transform={`scale(${a})`} fill={cor} opacity={0.5} />
+        {Array.from({length: 8}, (_, k) => {
+          const ang = (k / 8) * Math.PI * 2 + rnd(i * 9 + k) * 0.6, d = (60 + rnd(k + i * 3) * 90) * ob(seg(s, 0, 12), 0.6);
+          return <circle key={k} cx={Math.cos(ang) * d} cy={Math.sin(ang) * d * 0.7} r={(5 + rnd(k + 5) * 12) * (1 - c01(seg(s, 10, 40)) * 0.3)} fill={cor} opacity={0.75} />;
+        })}
+      </g>;
+    })}
+  </svg>;
+};

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
+  }
+}