primocode 10.17.0 → 10.19.0

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

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