primocode 10.17.1 → 11.0.0

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

@@ -0,0 +1,21 @@
+# 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/SKILL.md

@@ -0,0 +1,52 @@
+---
+slug: aquarela
+nome: Aquarela
+descricao: papel cru com grão, manchas de tinta que florescem e escorrem, pincelada, anotação à mão e papel rasgado com fita
+familia: Feito à mão
+versao: 1
+quando:
+  - "vídeo de oficina, curso de arte ou ateliê"
+  - "convite de evento artesanal, feira ou exposição"
+  - "reels de marca criativa, gentil, feita à mão"
+  - "anúncio com cara de caderno de artista, sem cara de template"
+  - "lançamento de produto autoral (cerâmica, papelaria, café, cosmético)"
+nao_serve:
+  - "vídeo de tecnologia, SaaS ou dado (use um kit de interface)"
+  - "estilo frio, metálico, neon ou 3D (use outro kit)"
+---
+
+# Aquarela
+
+Um caderno de artista em movimento: o chão é papel cru com grão e fibra, e **toda cena nasce de uma mancha de tinta** (coral, turquesa, ouro, violeta) que floresce com borda irregular e escorre devagar. Em cima, títulos em Fraunces 700 gigantes onde a palavra-chave ganha uma lavagem de cor atrás; pinceladas de cerda seca riscam a tela; anotações em Caveat se escrevem sozinhas com seta ou círculo desenhados; cartões de papel rasgado com fita washi caem na tela. Pingos de tinta batem no papel e espirram. A câmera balança como uma mão sobre a mesa. Nada é liso: tudo tem borda tremida.
+
+## Como montar um vídeo com este kit
+
+1. **Leia o pedido e o roteiro.** Corte cada fala em frases curtas. Uma frase = uma cena.
+2. **Escolha as batidas** em `receita.json` (gancho → problema → virada → prova → lista → data → marca). Cada batida diz quanto dura e quais elementos servem.
+3. **Escreva o plano de cenas** (`plano.json`, mesmo formato de `exemplos/plano.json`): para cada cena, `de`/`ate` em quadros, a `entrada`, as `camadas` (elemento + props) e os `sons`. Os cortes seguem a voz (se houver) ou a batida da trilha: 1 batida = 16.667 quadros.
+4. **Renderize** com `<Montagem plano={...} arquivos={...} />` ou escreva o TSX direto combinando `Fundo`, `Camera`, `Cena` e os elementos (tudo sai de `elementos/index.ts`).
+5. **Confira** os quadros (um por cena) contra `regras/`: área segura, nada cortado, um herói por cena, nenhum quadro parado.
+
+## Elementos
+
+| elemento | o que faz | batidas |
+|---|---|---|
+| `ManchaTinta` | manchas de tinta que florescem com borda tremida e escorrem; a base de toda cena | todas |
+| `TituloPincel` | título gigante em Fraunces, a palavra `*destaque*` ganha lavagem de cor atrás | gancho, virada, oferta |
+| `Pincelada` | traço de pincel de cerdas secas atravessando a tela (sublinhado ou fundo) | virada, prova |
+| `AnotacaoManual` | texto em Caveat que se escreve, com seta, círculo ou sublinhado desenhado | virada, prova, lista |
+| `PapelRasgado` | cartão de papel com borda rasgada e fita washi que cai e pousa; título, linhas ou foto | prova, lista, data |
+| `Pingos` | gotas de tinta que caem e espirram no papel | gancho, problema |
+| `AssinaturaMarca` | mancha + logo + nome + detalhe + endereço, sempre a última cena | marca |
+| `Fundo`, `Camera`, `Cena` | papel cru com grão e fibra, vinheta marrom e lavagens claras à deriva | todas |
+| `Efeito`, `Trilha` | sons e trilha do kit | todas |
+
+## Proibido
+
+- Fundo liso, degradê digital ou borda perfeita: toda forma passa pelo filtro de água (`aq-agua`).
+- Mais de 4 cores de tinta numa mesma cena; as 4 do `regras/cor.md` e mais nada.
+- Sombra preta, glow, brilho ou neon; a única sombra é a do papel (marrom a 28%).
+- Texto de corpo em Fraunces com menos de 56 px; texto de mão (Caveat) só para anotação de 1 a 5 palavras.
+- Cena parada: ou uma mancha cresce, ou uma pincelada anda, ou um pingo cai; a câmera sempre balança.
+- Foto com cara de banco; se houver foto real, entra só dentro de `PapelRasgado`.
+- Texto fora da área segura (168–1330 px na vertical, 80 px nas laterais).

package/kits/aquarela/assets/ASSETS.md

@@ -0,0 +1,21 @@
+# 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/assets/fontes/OFL-Caveat.txt

@@ -0,0 +1,92 @@
+Copyright (c) Caveat Project Authors (Google Fonts)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/kits/aquarela/assets/fontes/OFL-Fraunces.txt

@@ -0,0 +1,92 @@
+Copyright (c) Fraunces Project Authors (Google Fonts)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/kits/aquarela/elementos/AnotacaoManual.tsx

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

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

@@ -0,0 +1,22 @@
+// Camera: deriva constante por baixo de tudo (zoom, deslize e giro) e um soco em cada batida.
+// O quadro nunca fica parado. `batidas` são quadros absolutos do vídeo.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+
+export type CameraProps = {batidas?: number[]; forca?: number; children: React.ReactNode};
+
+export const posCamera = (f: number, batidas: number[], forca = 1) => {
+  let z = 1.03 + 0.014 * Math.sin(f / 110) + f * 0.00012, dx = Math.sin(f / 37) * 20, dy = Math.cos(f / 51) * 14;
+  let rot = Math.sin(f / 83) * 0.009;
+  for (const h of batidas) if (f >= h) {
+    const d = Math.exp(-(f - h) / 8) * forca;
+    z += 0.035 * d; dx += 7 * d * Math.sin((f - h) * 2.7 + h); dy += 7 * d * Math.cos((f - h) * 3.3 + h);
+    rot += 0.004 * d * Math.sin((f - h) * 1.9 + h);
+  }
+  return {z, dx, dy, rot};
+};
+
+export const Camera: React.FC<CameraProps> = ({batidas = [], forca = 1, children}) => {
+  const c = posCamera(useCurrentFrame(), batidas, forca);
+  return <AbsoluteFill style={{transform: `translate(${c.dx}px, ${c.dy}px) rotate(${c.rot}rad) scale(${c.z})`, transformOrigin: '50% 46%'}}>{children}</AbsoluteFill>;
+};

package/kits/aquarela/elementos/Cena.tsx

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

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

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

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