primocode 11.0.0 → 11.2.0

package/kits/apple-tipografico/regras/cor.md

@@ -1,24 +0,0 @@
-# Cor
-
-Medido no filme de referência (AirPods Pro 3, filmado da tela de um MacBook com celular, então os
-valores brutos vêm ~15% mais quentes e escuros; os tokens abaixo são os corrigidos).
-
-| token | hex | uso | medido no filme (bruto) |
-|---|---|---|---|
-| estúdio (chão) | `#EAE4DA` | fundo de toda cena de produto, sem emenda | `#CBB497` no centro, `#C0AC94` embaixo |
-| estúdio luz | `#F3EFE8` | centro do radial de luz, 0% (em 50% x, 44% y) | — |
-| estúdio borda | `#DAD2C5` | cantos, 100% (7% mais escuro que o meio) | `#918170` no canto (vinheta da câmera) |
-| produto (cetim) | `#EEEBE5` | corpo do produto; o sombreado o leva a ~`#B8B3AA` no lado escuro | — |
-| ponteira | `#E2DED6` | silicone, um tom abaixo do corpo | — |
-| grafite | `#2A2A2D` | telas de som, sulcos, luz de status | — |
-| metal | `#C8C5BF` | anéis, dobradiça (reflete o estúdio) | — |
-| sombra | `#3A3026` | sombra de contato, opacidade 0,35–0,55 | — |
-| tinta | `#1D1D1F` | todo texto sobre o estúdio | `#3A3836` |
-| acento | `#7CE23A` | **só** o brilho do detalhe tocável, 1 vez por vídeo | verde-limão do "Touch control" |
-| preto | `#000000` | fim (logo) e abertura | `#1C2027` (preto de tela) |
-| logo / rodapé | `#F5F5F7` / `#86868B` | logo no preto / linha legal | — |
-
-- **Cartão radial** (título, uma vez): `radial-gradient(circle at 50% 900px, #F7E7C4 0, #F2DDAE 20%, #9FE3B4 38%, #46BFD9 55%, #2366D6 74%, #173E9C 92%, #000 112%)`, raio final 1500 px. Medido: centro `#C7AE81`, anel `#8AB992`, borda `#1A4A96`/`#22468B`.
-- Luz do produto (fixa no mundo, não gira com a câmera): softbox em cima à esquerda (−0,55; 0,75; 0,52), recorte à direita (0,85; 0,27; 0,36), céu branco; ambiente mínimo 0,12.
-- Sombra de contato: 50% da sombra suave (luz quase vertical, k = 3,2) + 60% da oclusão do chão; o canvas é transparente, então ela multiplica qualquer Fundo.
-- O cliente pode trocar: cor do produto (`cor`), acento (`acento`), cores do radial (`cores`). O estúdio só troca se a marca pedir (`Fundo cor`), e nunca para cor saturada.

package/kits/apple-tipografico/regras/movimento.md

@@ -1,29 +0,0 @@
-# Movimento
-
-Câmera lenta e cara: tudo começa e termina devagar. Nenhum tremor, nenhum soco, nenhum zoom rápido.
-
-Curvas (`base.ts`): `suave` = `cubic-bezier(.45,0,.2,1)` (câmera, peças, tampa) · `saida` = `cubic-bezier(.16,1,.3,1)` (texto e peça que pousa) · `entrada` = `cubic-bezier(.7,0,.84,0)` (texto que sai).
-
-| movimento | quadros | valores (medidos/derivados do filme) |
-|---|---|---|
-| órbita da câmera 3D | o plano todo (40–55) | 15–20° por plano (≈ 10°/s), elevação cai 3–5° |
-| aproximação (push-in) 3D | o plano todo | distância −8% a −20% (ex.: 11,5 → 9,6) |
-| giro do produto | o plano todo | 15–20° em Y (`giro [[0,−32],[50,−14]]`) |
-| flutuação | contínua | 0,025 unidade, período 3,2 s (quase invisível) |
-| tampa abre | 20 | −105° em X na dobradiça |
-| peças sobem/saem | 20–26 | 0,7–1,5 unidade, curva `suave` |
-| peças se enfileiram | 20 cada, 4 de intervalo | da posição de origem até a fila, todas na mesma altura |
-| close extremo | 38 | distância 3,0 → 2,6, órbita 22° → 6°, lente 26° |
-| brilho do detalhe | 10 | 0 → 1, depois fica |
-| empurrão 2D (texto) | o plano todo | escala 1 → 1,03–1,06 (`Camera`) |
-| cartão radial abre | 20 | raio 60 → 1500 px a partir do centro; título entra 8–22 |
-| logo no preto | 18 | opacidade 0 → 1, escala 0,94 → 1, desfoque 6 → 0 px |
-
-Transições (`Cena`):
-
-| transição | quadros | como |
-|---|---|---|
-| `corte` | 0 | troca seca (o filme corta no texto e no logo) |
-| `dissolver` | 10 | fusão linear (radial → estúdio com o produto) |
-| `borrao` | 8 | chicote: sai −160 px com desfoque horizontal até 60 px; entra de +220 px |
-| `escuro` | 12 | nasce do preto (abertura) |

package/kits/apple-tipografico/regras/ritmo.md

@@ -1,29 +0,0 @@
-# Ritmo
-
-Medido no filme (11,5 s de filme + 1,5 s de logo): **um plano a cada 1,0–1,6 s**, nunca mais de 2 s
-parado no mesmo enquadramento.
-
-| trecho do filme | s | o que acontece |
-|---|---|---|
-| 0,0–1,3 | 1,3 | preto |
-| 1,3–2,9 | 1,6 | cartão radial "All new / AirPods Pro 3" abre, segura, recolhe |
-| 3,2–5,0 | 1,8 | o estojo nasce no centro do radial, que vira estúdio; gira, abre, fones sobem |
-| 5,0–6,0 | 1,0 | só texto: "Rebuilt from the ground up" palavra a palavra, sai borrando |
-| 6,0–8,3 | 2,3 | chicote → par de fones girando → ponteiras saem e se enfileiram + "Fit, finally figured out." |
-| 8,5–10,0 | 1,5 | close extremo da haste, "Touch control", brilho verde no sulco |
-| 10,0–11,5 | 1,5 | fones caem no estojo, tampa fecha |
-| 11,5–13,0 | 1,5 | corte pro preto, logo |
-
-30 fps. Duração de cada batida (`receita.json`):
-
-| batida | s | quadros |
-|---|---|---|
-| gancho (cartão radial) | 1,1–1,7 | 34–50 |
-| virada (produto aparece) | 1,4–2,0 | 42–60 |
-| prova (texto só) | 0,9–1,2 | 26–36 |
-| prova (peças / função) | 1,5–2,3 | 45–70 |
-| detalhe (close) | 1,1–1,7 | 34–50 |
-| marca (logo no preto) | 1,1–1,6 | 34–48 |
-
-- Preview: 8 s, 6 planos. Vídeo de 15 s: 9–10 planos. Leitura: a linha precisa de **≥ 18 quadros** inteira na tela.
-- Sem narração, o corte segue a trilha (125 bpm = 14,4 quadros por batida) arredondando pro quadro.

package/kits/apple-tipografico/regras/som.md

@@ -1,20 +0,0 @@
-# Som
-
-O filme é música + respiros: quase nenhum efeito. O som só marca o que se MEXE no produto.
-
-- Trilha: `assets/trilha/tech-claro-125bpm.mp3` (8,64 s, 125 bpm), volume **0,5**, fade de saída de **20 quadros**.
-  Vídeo maior que 8,6 s: gere uma nova no MotionCraft (`music make`, preset `tech-bright`); não faça loop.
-- Com narração: trilha a **0,25**, efeitos a 70%.
-
-| som | volume | quando |
-|---|---|---|
-| `whoosh-entra` | 0,9 | o cartão radial abre (quadro 0) |
-| `swoosh` | 1,0 | transição `borrao` (chicote) |
-| `clique` | 0,8 | tampa abre / detalhe acende |
-| `whoosh-sai` | 0,5 | peças sobem |
-| `pop-cartao` | 0,45 | peças pousam na fila (no máx. 2 por fila) |
-| `assinatura` | 0,9 | logo no preto |
-| `pop-palavra`, `impacto`, `subida` | — | **não use** neste estilo (ficam pra outros kits) |
-
-- No máximo **2 efeitos por segundo**; texto entra em silêncio.
-- Som 1–2 quadros antes do visual. O render nivela em **−14 LUFS**, pico −1,5 dBTP.

package/kits/apple-tipografico/regras/tipografia.md

@@ -1,21 +0,0 @@
-# Tipografia
-
-O texto do filme é **pequeno, calmo e escuro**: o herói é o produto, não a letra. Medido no filme:
-legenda ≈ 4% da altura do quadro, título ≈ 7%, "All new" ≈ 3%.
-
-- Fonte única: **Inter** (pesos 500–600 aqui), carregada como `"AT Inter"` de `assets/fontes/` (no lugar da SF Pro).
-- Cor `#1D1D1F` sobre o estúdio; no radial o título vai a 92% de opacidade e o sobretítulo a 82%.
-- **Uma linha curta por plano.** Nada de título de várias linhas, nada de palavra em degradê.
-
-| papel | tamanho (px, 1080×1920) | peso | tracking | máx. caracteres |
-|---|---|---|---|---|
-| legenda (`LegendaCurta`) | 50 | 600 | −0,012em | 28 |
-| título do cartão radial | 92 | 600 | −0,022em | 16 |
-| sobretítulo ("Todo novo") | 34 | 500 | −0,005em | 14 |
-| marca escrita (sem logo) | 0,62 × altura do logo | 600 | −0,03em | 12 |
-| rodapé legal | 19 | 500 | 0 | 90 |
-
-- Entrada: **palavra por palavra**, 4–5 quadros entre palavras, cada uma vem 26 px da direita com desfoque 9 → 0 px em 10 quadros (curva `saida`).
-- Saída: a linha inteira borra **na horizontal** (0 → 26 px), anda −70 px e some em 8 quadros (curva `entrada`).
-- Caixa de frase, ponto final no fim ("Refeito do zero."). Nunca tudo maiúsculo.
-- Toda linha encolhe sozinha (`caber()`) para a largura útil; se encolheu mais de 20%, a frase está longa demais: corte palavras.

package/kits/aquarela/assets/ASSETS.md

@@ -1,21 +0,0 @@
-# Assets do kit aquarela
-
-| arquivo | o que é | origem | licença |
-|---|---|---|---|
-| `fontes/fraunces-latin.woff2` | Fraunces (500 800), subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Fraunces`), baixado em 26/10/2026 | SIL OFL 1.1, texto em `fontes/OFL-Fraunces.txt` |
-| `fontes/caveat-latin.woff2` | Caveat (600 700), subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Caveat`), baixado em 26/10/2026 | SIL OFL 1.1, texto em `fontes/OFL-Caveat.txt` |
-| `sons/whoosh-pincel.mp3` | pincelada que atravessa a tela (−1 quadro) | sintetizado: MotionCraft `sfx make`, tipo `swoosh`, pacote `paper` | sem samples; síntese própria (CC0) |
-| `sons/pop-mancha.mp3` | mancha de tinta que floresce | sintetizado: MotionCraft `sfx make`, tipo `bubble`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
-| `sons/gota.mp3` | pingo que bate no papel | sintetizado: MotionCraft `sfx make`, tipo `icon_pop`, pacote `glass` | sem samples; síntese própria (CC0) |
-| `sons/papel-cai.mp3` | cartão de papel rasgado que cai | sintetizado: MotionCraft `sfx make`, tipo `whoosh_in`, pacote `paper` | sem samples; síntese própria (CC0) |
-| `sons/palavra.mp3` | palavra do título que cai | sintetizado: MotionCraft `sfx make`, tipo `word_pop`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
-| `sons/risco.mp3` | anotação à mão que se escreve | sintetizado: MotionCraft `sfx make`, tipo `letter_tick`, pacote `paper` | sem samples; síntese própria (CC0) |
-| `sons/impacto.mp3` | a palavra final da virada e a data | sintetizado: MotionCraft `sfx make`, tipo `impact`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
-| `sons/assinatura.mp3` | revelação da marca | sintetizado: MotionCraft `sfx make`, tipo `logo_sting`, pacote `glass` | sem samples; síntese própria (CC0) |
-| `trilha/calma-com-punch-108bpm.mp3` | 8,6 s a partir de 2.2222 s da trilha gerada | MotionCraft `music make` (preset `calm-punch`, 108 bpm, tom F) | sem samples; síntese própria (CC0). MotionCraft é MIT |
-
-Conteúdo de demonstração (não faz parte do estilo, fica em `exemplos/`):
-
-| arquivo | origem | licença |
-|---|---|---|
-| `exemplos/logo-mare.svg` | logo fictício desenhado para a demo | próprio |

package/kits/aquarela/elementos/AnotacaoManual.tsx

@@ -1,40 +0,0 @@
-// AnotacaoManual: texto em Caveat que se escreve da esquerda pra direita, e depois um risco desenhado à mão:
-// círculo em volta, sublinhado ondulado ou seta curva até um alvo.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FAM_B, FONTE_B, caber, e5, larguraTexto, seg} from './base';
-
-export type AnotacaoManualProps = {
-  texto: string;
-  x: number;
-  y: number;
-  tamanho?: number;
-  /** graus */
-  rot?: number;
-  cor?: string;
-  inicio?: number;
-  forma?: 'circulo' | 'sublinhado' | 'seta' | 'nenhuma';
-  /** ponto que a seta aponta */
-  alvo?: [number, number];
-};
-
-export const AnotacaoManual: React.FC<AnotacaoManualProps> = ({texto, x, y, tamanho = 100, rot = -4, cor = COR.violeta, inicio = 0, forma = 'sublinhado', alvo = [x + 260, y + 260]}) => {
-  const f = useCurrentFrame();
-  const tam = caber(texto, tamanho, FAM_B, 880, 700);
-  const w = larguraTexto(texto, tam, FAM_B, 700), h = tam * 1.1;
-  const pe = e5(seg(f, inicio, inicio + 16)), pr = e5(seg(f, inicio + 14, inicio + 28));
-  if (f < inicio) return null;
-  const tr = `translate(${x}px, ${y}px) rotate(${rot}deg)`;
-  const risco = {fill: 'none', stroke: cor, strokeWidth: 7, strokeLinecap: 'round' as const, pathLength: 1, strokeDasharray: '1 1.1', strokeDashoffset: 1 - pr};
-  return <div style={{position: 'absolute', left: 0, top: 0, transform: tr, transformOrigin: '0 0'}}>
-    <div style={{position: 'absolute', left: -w / 2, top: -h / 2, width: w + 20, height: h, fontFamily: FONTE_B, fontWeight: 700, fontSize: tam, lineHeight: `${h}px`, color: cor, whiteSpace: 'nowrap', clipPath: `inset(-20% ${(1 - pe) * 100}% -20% -5%)`}}>{texto}</div>
-    <svg width={1} height={1} style={{position: 'absolute', left: 0, top: 0, overflow: 'visible'}}>
-      {forma === 'circulo' && <ellipse cx={0} cy={0} rx={w / 2 + 50} ry={h / 2 + 22} transform="rotate(-3)" {...risco} />}
-      {forma === 'sublinhado' && <path d={`M ${-w / 2} ${h / 2 + 4} q ${w * 0.12} -16 ${w * 0.25} 0 t ${w * 0.25} 0 t ${w * 0.25} 0 t ${w * 0.25} 0`} {...risco} />}
-      {forma === 'seta' && <g {...risco}>
-        <path d={`M ${w / 2 + 10} 0 Q ${(w / 2 + alvo[0] - x) / 2 + 80} ${(alvo[1] - y) / 2 - 90} ${alvo[0] - x} ${alvo[1] - y}`} />
-        <path d={`M ${alvo[0] - x - 42} ${alvo[1] - y - 14} L ${alvo[0] - x} ${alvo[1] - y} L ${alvo[0] - x - 8} ${alvo[1] - y - 52}`} strokeDashoffset={1 - seg(f, inicio + 24, inicio + 32)} />
-      </g>}
-    </svg>
-  </div>;
-};

package/kits/aquarela/elementos/AssinaturaMarca.tsx

@@ -1,33 +0,0 @@
-// AssinaturaMarca: a última cena. Duas manchas florescem, o logo salta (overshoot), o nome cai em Fraunces,
-// o detalhe se escreve em Caveat e o endereço recebe uma pincelada por baixo.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FAM_A, FAM_B, FONTE_A, FONTE_B, caber, ob, seg} from './base';
-import {ManchaTinta} from './ManchaTinta';
-import {Pincelada} from './Pincelada';
-
-export type AssinaturaMarcaProps = {
-  /** URL do logo (SVG ou PNG) */
-  logo: string;
-  nome: string;
-  detalhe?: string;
-  endereco?: string;
-  cores?: [string, string];
-  inicio?: number;
-};
-
-export const AssinaturaMarca: React.FC<AssinaturaMarcaProps> = ({logo, nome, detalhe, endereco, cores = [COR.turquesa, COR.ouro], inicio = 0}) => {
-  const f = useCurrentFrame();
-  const lg = ob(seg(f, inicio + 6, inicio + 24), 2.2), nm = ob(seg(f, inicio + 14, inicio + 30), 1.8), dt = seg(f, inicio + 26, inicio + 40), en = seg(f, inicio + 32, inicio + 44);
-  const tn = caber(nome, 190, FAM_A, 880, 700, -0.02), te = caber(endereco ?? '', 76, FAM_B, 860, 600);
-  return <>
-    <ManchaTinta manchas={[{x: 540, y: 640, raio: 470, cor: cores[0], em: inicio, seed: 2}, {x: 700, y: 520, raio: 320, cor: cores[1], em: inicio + 5, seed: 6}]} />
-    <img src={logo} style={{position: 'absolute', left: 540 - 220, top: 600 - 220, width: 440, height: 440, transform: `scale(${lg}) rotate(${(1 - lg) * -20}deg)`, opacity: Math.min(1, lg * 2)}} />
-    <div style={{position: 'absolute', left: 0, width: 1080, top: 935 - tn * 0.62, textAlign: 'center', fontFamily: FONTE_A, fontWeight: 700, fontSize: tn, lineHeight: 1.24, letterSpacing: '-0.02em', color: COR.tinta, transform: `translateY(${(1 - nm) * -200}px) scale(${1 + (1 - nm) * 0.3})`, opacity: Math.min(1, nm * 3)}}>{nome}</div>
-    {detalhe && <div style={{position: 'absolute', left: 0, width: 1080, top: 1040, textAlign: 'center', fontFamily: FONTE_B, fontWeight: 700, fontSize: 104, color: COR.violeta, transform: 'rotate(-3deg)', clipPath: `inset(-20% ${(1 - dt) * 100}% -20% 0)`}}>{detalhe}</div>}
-    {endereco && <>
-      <Pincelada de={[160, 1215]} para={[920, 1215]} espessura={70} cor={COR.ouro} inicio={inicio + 30} duracao={12} curva={8} opacidade={0.8} />
-      <div style={{position: 'absolute', left: 0, width: 1080, top: 1178, textAlign: 'center', fontFamily: FONTE_B, fontWeight: 600, fontSize: te, color: COR.tinta, opacity: en, transform: `translateY(${(1 - en) * 30}px)`}}>{endereco}</div>
-    </>}
-  </>;
-};

package/kits/aquarela/elementos/Cena.tsx

@@ -1,48 +0,0 @@
-// Cena: janela de tempo de um plano. Entra com movimento (nunca corte seco) e a saída cruza 10 quadros
-// com a entrada da próxima. Dentro dela, useCurrentFrame() começa em 0.
-import React, {createContext, useContext} from 'react';
-import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
-import {c01, e5, ob, seg} from './base';
-
-export type Entrada = 'subir' | 'zoom' | 'direita' | 'esquerda' | 'giro' | 'queda' | 'circulo' | 'nenhuma';
-export type Saida = 'sobe' | 'esquerda' | 'zoom' | 'gira' | 'encolhe';
-export const SOBREPOE = 10; // quadros em que a saída desta cena cruza a entrada da próxima
-export const QUADROS_ENTRADA = 14;
-
-const CenaCtx = createContext({duracao: 60});
-/** duração da cena atual em quadros (sem a sobreposição) */
-export const useDuracaoCena = () => useContext(CenaCtx).duracao;
-
-export type CenaProps = {de: number; ate: number; entrada?: Entrada; saida?: Saida; ultima?: boolean; children: React.ReactNode};
-
-const Janela: React.FC<{duracao: number; entrada: Entrada; saida: Saida; ultima: boolean; children: React.ReactNode}> = ({duracao, entrada, saida, ultima, children}) => {
-  const f = useCurrentFrame();
-  const p = seg(f, 0, QUADROS_ENTRADA);
-  const en = entrada === 'nenhuma' ? 0 : 1 - ob(p, 1.4);
-  const xo = ultima ? 0 : e5(seg(f, duracao, duracao + SOBREPOE));
-  let tf = '';
-  let clip: string | undefined;
-  if (entrada === 'subir') tf += `translateY(${en * 300}px) `;
-  if (entrada === 'queda') tf += `translateY(${-en * 520}px) `;
-  if (entrada === 'zoom') tf += `scale(${1 + en * 0.9}) `;
-  if (entrada === 'direita') tf += `translateX(${en * 800}px) `;
-  if (entrada === 'esquerda') tf += `translateX(${-en * 800}px) `;
-  if (entrada === 'giro') tf += `rotate(${-en * 16}deg) scale(${1 + en * 0.6}) `;
-  if (entrada === 'circulo') clip = `circle(${e5(p) * 1700 + 4}px at 50% 52%)`;
-  if (saida === 'sobe') tf += `translateY(${-xo * 240}px) scale(${1 + xo * 0.08})`;
-  if (saida === 'esquerda') tf += `translateX(${-xo * 820}px) rotate(${-xo * 4}deg)`;
-  if (saida === 'zoom') tf += `scale(${1 + xo * 0.9})`;
-  if (saida === 'gira') tf += `rotate(${xo * 12}deg) scale(${1 - xo * 0.25}) translateY(${xo * 300}px)`;
-  if (saida === 'encolhe') tf += `scale(${1 - xo * 0.35})`;
-  const blur = c01(en) * 10 + xo * 10;
-  return <AbsoluteFill style={{transform: tf, clipPath: clip, opacity: (1 - c01(en) * 0.85) * (1 - xo), filter: blur > 0.3 ? `blur(${blur}px)` : undefined}}>{children}</AbsoluteFill>;
-};
-
-export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'subir', saida = 'sobe', ultima = false, children}) => {
-  const duracao = ate - de;
-  return <Sequence from={de} durationInFrames={duracao + (ultima ? 0 : SOBREPOE)} layout="none">
-    <CenaCtx.Provider value={{duracao}}>
-      <Janela duracao={duracao} entrada={entrada} saida={saida} ultima={ultima}>{children}</Janela>
-    </CenaCtx.Provider>
-  </Sequence>;
-};

package/kits/aquarela/elementos/Fundo.tsx

@@ -1,24 +0,0 @@
-// Fundo: papel cru com grão e fibra (SVG gerado, desenhado uma vez), vinheta marrom e duas lavagens claras que derivam.
-// Fica FORA da Camera; quem balança é o que está em cima.
-import React from 'react';
-import {AbsoluteFill, useCurrentFrame} from 'remotion';
-import {COR} from './base';
-
-const grao = `url("data:image/svg+xml;utf8,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' width='540' height='960'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.28  0 0 0 0 0.2  0 0 0 0.55 -0.12'/></filter><rect width='100%' height='100%' filter='url(#g)'/></svg>`)}")`;
-const fibra = `url("data:image/svg+xml;utf8,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' width='540' height='960'><filter id='f' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.09' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.4  0 0 0 0 0.3  0 0 0 0.9 -0.35'/></filter><rect width='100%' height='100%' filter='url(#f)'/></svg>`)}")`;
-
-export type FundoProps = {
-  /** cor da lavagem 1 e 2 (a 14%) */
-  lavagens?: [string, string];
-  velocidade?: number;
-};
-
-export const Fundo: React.FC<FundoProps> = ({lavagens = [COR.turquesa, COR.coral], velocidade = 1}) => {
-  const t = (useCurrentFrame() / 30) * velocidade;
-  return <AbsoluteFill style={{background: COR.papel}}>
-    <AbsoluteFill style={{background: `radial-gradient(60% 30% at ${30 + Math.sin(t * 0.5) * 22}% ${22 + Math.cos(t * 0.4) * 8}%, ${lavagens[0]}24, transparent 70%), radial-gradient(60% 30% at ${72 + Math.cos(t * 0.45) * 20}% ${76 + Math.sin(t * 0.35) * 8}%, ${lavagens[1]}22, transparent 70%)`}} />
-    <AbsoluteFill style={{backgroundImage: fibra, backgroundSize: '1080px 1920px', opacity: 0.5, mixBlendMode: 'multiply'}} />
-    <AbsoluteFill style={{backgroundImage: grao, backgroundSize: '1080px 1920px', opacity: 0.55, mixBlendMode: 'multiply'}} />
-    <AbsoluteFill style={{background: `radial-gradient(120% 90% at 50% 45%, transparent 55%, ${COR.papelSombra}cc)`}} />
-  </AbsoluteFill>;
-};

package/kits/aquarela/elementos/ManchaTinta.tsx

@@ -1,46 +0,0 @@
-// ManchaTinta: manchas de tinta que florescem (overshoot), com miolo, borda mais escura e contorno tremido
-// (filtro de água). Continuam escorrendo devagar depois de abrir. Mistura com multiply: duas manchas viram uma terceira cor.
-import React from 'react';
-import {AbsoluteFill, useCurrentFrame} from 'remotion';
-import {ALTURA, LARGURA, blobPath, c01, lerp, ob, rnd, seg} from './base';
-
-export type Mancha = {
-  x: number; y: number; raio: number; cor: string;
-  /** quadro (dentro da cena) em que começa a florescer */
-  em?: number; seed?: number; opacidade?: number;
-};
-export type ManchaTintaProps = {
-  manchas: Mancha[];
-  /** quadro em que todas somem (sem isso ficam até o fim) */
-  fim?: number;
-};
-
-export const ManchaTinta: React.FC<ManchaTintaProps> = ({manchas, fim}) => {
-  const f = useCurrentFrame();
-  const sai = fim === undefined ? 0 : seg(f, fim, fim + 10);
-  return <AbsoluteFill style={{opacity: 1 - sai}}>
-    <svg width={LARGURA} height={ALTURA} viewBox={`0 0 ${LARGURA} ${ALTURA}`} style={{position: 'absolute', inset: 0, overflow: 'visible'}}>
-      <defs>
-        <filter id="aq-agua" filterUnits="userSpaceOnUse" x={-200} y={-200} width={LARGURA + 400} height={ALTURA + 400}>
-          <feTurbulence type="fractalNoise" baseFrequency="0.011" numOctaves="3" seed="7" result="r" />
-          <feDisplacementMap in="SourceGraphic" in2="r" scale="46" />
-        </filter>
-      </defs>
-      <g filter="url(#aq-agua)">
-        {manchas.map((m, i) => {
-          const em = m.em ?? 0, seed = m.seed ?? i + 1, q = f - em;
-          if (q < 0) return null;
-          const abre = ob(seg(f, em, em + 20), 1.9), escorre = 1 + 0.08 * seg(f, em + 20, em + 90);
-          const s = abre * escorre, gira = Math.sin((f + seed * 20) / 70) * 3;
-          const o = (m.opacidade ?? 1) * c01(q / 4);
-          return <g key={i} transform={`translate(${m.x + Math.sin((f + seed * 9) / 55) * 10} ${m.y + q * 0.25}) rotate(${gira}) scale(${s})`} style={{mixBlendMode: 'multiply'}} opacity={o}>
-            <path d={blobPath(m.raio, seed)} fill={m.cor} opacity={0.55} />
-            <path d={blobPath(m.raio * 0.7, seed + 40, 0.3)} fill={m.cor} opacity={0.35} />
-            <path d={blobPath(m.raio * 0.97, seed)} fill="none" stroke={m.cor} strokeWidth={10} opacity={0.5} />
-            <circle cx={m.raio * lerp(0.9, 1.15, rnd(seed))} cy={-m.raio * 0.5} r={m.raio * 0.08} fill={m.cor} opacity={0.5} />
-          </g>;
-        })}
-      </g>
-    </svg>
-  </AbsoluteFill>;
-};

package/kits/aquarela/elementos/Montagem.tsx

@@ -1,60 +0,0 @@
-// Montagem: transforma um plano de cenas (JSON escrito pela IA) em vídeo, usando só os elementos do kit.
-// Ela NÃO decide nada de estética: só põe Fundo + Camera + Cenas + sons onde o plano mandou.
-// Formato do plano: ver exemplos/plano.json e KITS.md (seção "plano de cenas").
-import React from 'react';
-import {AbsoluteFill} from 'remotion';
-import {COR} from './base';
-import {Fundo} from './Fundo';
-import {Camera} from './Camera';
-import {Cena, Entrada, Saida} from './Cena';
-import {Efeito, NomeSom, Trilha} from './Som';
-import {ManchaTinta} from './ManchaTinta';
-import {TituloPincel} from './TituloPincel';
-import {Pincelada} from './Pincelada';
-import {AnotacaoManual} from './AnotacaoManual';
-import {PapelRasgado} from './PapelRasgado';
-import {Pingos} from './Pingos';
-import {AssinaturaMarca} from './AssinaturaMarca';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const ELEMENTOS: Record<string, React.FC<any>> = {
-  ManchaTinta, TituloPincel, Pincelada, AnotacaoManual, PapelRasgado, Pingos, AssinaturaMarca,
-};
-
-export type Camada = {elemento: string; props: Record<string, unknown>};
-export type CenaPlano = {
-  batida: string; de: number; ate: number; entrada?: Entrada; saida?: Saida;
-  camadas: Camada[];
-  /** sons relativos ao início da cena */
-  sons?: {som: NomeSom; em: number; volume?: number}[];
-  /** socos de câmera extras, relativos ao início da cena (o início já é um soco) */
-  socos?: number[];
-};
-export type Plano = {kit: string; duracao: number; fundo?: Record<string, unknown>; trilha?: {volume?: number} | false; cenas: CenaPlano[]};
-
-/** troca "fotos/foto-01.jpg" pela URL importada, em qualquer prop (texto, lista ou objeto) */
-const resolver = (v: unknown, arquivos: Record<string, string>): unknown => {
-  if (typeof v === 'string') return arquivos[v] ?? v;
-  if (Array.isArray(v)) return v.map((x) => resolver(x, arquivos));
-  if (v && typeof v === 'object') return Object.fromEntries(Object.entries(v).map(([k, x]) => [k, resolver(x, arquivos)]));
-  return v;
-};
-
-export const Montagem: React.FC<{plano: Plano; arquivos?: Record<string, string>}> = ({plano, arquivos = {}}) => {
-  const socos = plano.cenas.flatMap((c) => [c.de, ...(c.socos ?? []).map((s) => c.de + s)]);
-  const ultima = plano.cenas.length - 1;
-  return <AbsoluteFill style={{background: COR.papel}}>
-    <Fundo {...(plano.fundo ?? {})} />
-    <Camera batidas={socos} forca={1}>
-      {plano.cenas.map((c, i) => <Cena key={i} de={c.de} ate={c.ate} entrada={c.entrada} saida={c.saida} ultima={i === ultima}>
-        {c.camadas.map((k, j) => {
-          const El = ELEMENTOS[k.elemento];
-          if (!El) throw new Error(`aquarela: elemento "${k.elemento}" não existe no kit`);
-          return <El key={j} {...(resolver(k.props, arquivos) as object)} />;
-        })}
-      </Cena>)}
-    </Camera>
-    {plano.cenas.flatMap((c, i) => (c.sons ?? []).map((s, j) => <Efeito key={`${i}-${j}`} som={s.som} em={c.de + s.em} volume={s.volume} />))}
-    {plano.trilha !== false && <Trilha volume={plano.trilha?.volume} />}
-  </AbsoluteFill>;
-};

package/kits/aquarela/elementos/PapelRasgado.tsx

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

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

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

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

@@ -1,51 +0,0 @@
-// 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>;
-};