primocode 10.17.1 → 10.19.0

package/kits/cartaz-cinetico/elementos/CartazPalavra.tsx

@@ -0,0 +1,40 @@
+// CartazPalavra: UMA palavra Anton que enche a largura (ou a altura, se `girar`). Bate de longe (scale 2,4 → 1 com sobra)
+// sobre um bloco de cor que abre em círculo. Some seco no quadro `fim`, quando a próxima palavra assume.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, caber, e5, eb, seg} from './base';
+
+type Cor = 'papel' | 'preto' | 'vermelho' | 'azul';
+export type CartazPalavraProps = {
+  palavra: string;
+  /** cor do texto */
+  cor?: Cor;
+  /** cor do bloco de fundo (abre em círculo); sem isso, fica o papel */
+  fundo?: Cor;
+  inicio?: number;
+  /** quadro em que a palavra some (opcional) */
+  fim?: number;
+  y?: number;
+  /** tamanho máximo; a palavra estica até caber */
+  tamanho?: number;
+  /** gira 90° para encher a altura */
+  girar?: boolean;
+  contorno?: boolean;
+};
+
+export const CartazPalavra: React.FC<CartazPalavraProps> = ({palavra, cor = 'preto', fundo, inicio = 0, fim, y = 760, tamanho = 700, girar = false, contorno = false}) => {
+  const f = useCurrentFrame();
+  if (f < inicio || (fim !== undefined && f >= fim)) return null;
+  const t = f - inicio;
+  const txt = palavra.toUpperCase();
+  const alvo = girar ? 1160 : 920;
+  const tam = caber(txt, tamanho, alvo, 400, -0.005);
+  const p = eb(t / 9, 1.9);
+  const esc = 2.4 - 1.4 * p + t * 0.0015;
+  const raio = e5(t / 8) * 1700;
+  const estilo: React.CSSProperties = {fontFamily: FONTE.titulo, fontSize: tam, lineHeight: `${tam * 0.95}px`, letterSpacing: '-0.005em', whiteSpace: 'nowrap', color: contorno ? 'transparent' : COR[cor], WebkitTextStroke: contorno ? `6px ${COR[cor]}` : undefined};
+  return <div style={{position: 'absolute', inset: 0}}>
+    {fundo && <div style={{position: 'absolute', inset: 0, background: COR[fundo], clipPath: `circle(${raio}px at 50% ${y}px)`}} />}
+    <div style={{position: 'absolute', left: 540, top: y, transform: `translate(-50%, -50%) ${girar ? 'rotate(-90deg)' : ''} scale(${Math.max(0.01, esc)})`, ...estilo}}>{txt}</div>
+  </div>;
+};

package/kits/cartaz-cinetico/elementos/Cena.tsx

@@ -0,0 +1,41 @@
+// Cena: janela de tempo de um plano. Entra com movimento (nunca corte seco) e sai deslizando,
+// sobrepondo 6 quadros com a próxima. Dentro dela, useCurrentFrame() começa em 0.
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {e5, eb, seg} from './base';
+
+export type Entrada = 'subir' | 'zoom' | 'direita' | 'esquerda' | 'girar' | 'cortar' | 'nenhuma';
+export const SOBREPOE = 6; // quadros em que a saída desta cena cruza a entrada da próxima
+
+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; ultima?: boolean; children: React.ReactNode};
+
+const Janela: React.FC<{duracao: number; entrada: Entrada; ultima: boolean; children: React.ReactNode}> = ({duracao, entrada, ultima, children}) => {
+  const f = useCurrentFrame();
+  const q = 8; // quadros da entrada
+  const en = entrada === 'nenhuma' ? 0 : 1 - (entrada === 'cortar' ? eb(seg(f, 0, q)) : e5(seg(f, 0, q)));
+  const xo = ultima ? 0 : e5(seg(f, duracao, duracao + SOBREPOE));
+  let tf = '';
+  if (entrada === 'subir') tf += `translateY(${en * 160}px) `;
+  if (entrada === 'zoom') tf += `scale(${1 + en * 0.9}) `;
+  if (entrada === 'direita') tf += `translateX(${en * 464}px) `;
+  if (entrada === 'esquerda') tf += `translateX(${-en * 464}px) `;
+  if (entrada === 'girar') tf += `rotate(${en * -14}deg) scale(${1 + en * 0.5}) `;
+  if (entrada === 'cortar') tf += `scale(${1 + en * 0.14}) `;
+  tf += `scale(${1 + xo * 0.2}) rotate(${xo * 4}deg)`;
+  const blur = (entrada === 'cortar' ? 0 : en * 6) + xo * 6;
+  const op = entrada === 'cortar' ? 1 - xo : (1 - en * 0.3) * (1 - xo);
+  return <AbsoluteFill style={{transform: tf, opacity: op, filter: blur > 0.3 ? `blur(${blur}px)` : undefined}}>{children}</AbsoluteFill>;
+};
+
+export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'subir', 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} ultima={ultima}>{children}</Janela>
+    </CenaCtx.Provider>
+  </Sequence>;
+};

package/kits/cartaz-cinetico/elementos/CirculoPoster.tsx

@@ -0,0 +1,22 @@
+// CirculoPoster: círculo vermelho de 860 px que cresce do ponto (scale 0 → 1 com sobra), com linhas de texto em Anton
+// dentro; no quadro `morfar` o raio vai de 50% a 6% e ele gira 90°, virando um quadrado de cartaz.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, caber, e5, eb, seg} from './base';
+
+type Cor = 'papel' | 'preto' | 'vermelho' | 'azul';
+export type CirculoPosterProps = {linhas: string[]; cor?: Cor; texto?: Cor; inicio?: number; morfar?: number; x?: number; y?: number; diametro?: number};
+
+export const CirculoPoster: React.FC<CirculoPosterProps> = ({linhas, cor = 'vermelho', texto = 'papel', inicio = 0, morfar, x = 540, y = 740, diametro = 860}) => {
+  const f = useCurrentFrame();
+  if (f < inicio) return null;
+  const t = f - inicio;
+  const m = e5(seg(f, morfar ?? inicio + 22, (morfar ?? inicio + 22) + 14));
+  const p = eb(t / 12, 1.5);
+  const tams = linhas.map((l) => caber(l.toUpperCase(), 520, diametro * 0.72, 400, -0.005));
+  return <div style={{position: 'absolute', left: x - diametro / 2, top: y - diametro / 2, width: diametro, height: diametro, background: COR[cor], borderRadius: `${50 - 44 * m}%`, transform: `scale(${Math.max(0.001, p)}) rotate(${m * 90}deg)`, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
+    <div style={{transform: `rotate(${-m * 90}deg)`, display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
+      {linhas.map((l, i) => <div key={i} style={{fontFamily: FONTE.titulo, fontSize: tams[i], lineHeight: `${tams[i] * 0.95}px`, color: COR[texto], whiteSpace: 'nowrap'}}>{l.toUpperCase()}</div>)}
+    </div>
+  </div>;
+};

package/kits/cartaz-cinetico/elementos/EcoPalavra.tsx

@@ -0,0 +1,27 @@
+// EcoPalavra: a palavra repetida em degraus (5 cópias, passo de 62% do tamanho). Cópias pares são cheias, ímpares só
+// contorno de 6 px; entram de lados alternados, 3 quadros uma depois da outra. Cores ciclam vermelho, preto, azul.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, caber, eb} from './base';
+
+type Cor = 'papel' | 'preto' | 'vermelho' | 'azul';
+export type EcoPalavraProps = {palavra: string; copias?: number; cores?: Cor[]; fundo?: Cor; inicio?: number; fim?: number; y?: number; tamanho?: number};
+
+export const EcoPalavra: React.FC<EcoPalavraProps> = ({palavra, copias = 5, cores = ['vermelho', 'preto', 'azul'], fundo, inicio = 0, fim, y = 740, tamanho = 340}) => {
+  const f = useCurrentFrame();
+  if (f < inicio || (fim !== undefined && f >= fim)) return null;
+  const txt = palavra.toUpperCase();
+  const tam = caber(txt, tamanho, 920, 400, -0.005);
+  const passo = tam * 0.62;
+  return <div style={{position: 'absolute', inset: 0}}>
+    {fundo && <div style={{position: 'absolute', inset: 0, background: COR[fundo]}} />}
+    {Array.from({length: copias}, (_, k) => {
+      const t = f - (inicio + k * 3);
+      const p = eb(t / 10, 1.6);
+      const dir = k % 2 === 0 ? -1 : 1;
+      const cheia = k % 2 === 0;
+      const c = COR[cores[k % cores.length]];
+      return <div key={k} style={{position: 'absolute', left: 540, top: y + (k - (copias - 1) / 2) * passo, transform: `translate(-50%, -50%) translateX(${(1 - p) * 1300 * dir}px)`, fontFamily: FONTE.titulo, fontSize: tam, lineHeight: `${tam}px`, whiteSpace: 'nowrap', color: cheia ? c : 'transparent', WebkitTextStroke: cheia ? undefined : `6px ${c}`, opacity: t < 0 ? 0 : 1}}>{txt}</div>;
+    })}
+  </div>;
+};

package/kits/cartaz-cinetico/elementos/Fundo.tsx

@@ -0,0 +1,16 @@
+// Fundo: papel de cartaz com retícula de pontos (6% de preto), marcas de registro e cruzes de corte nos 4 cantos.
+// Fica FORA da Camera, parado; quem se mexe é o que está em cima.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {COR} from './base';
+
+const Cruz: React.FC<{x: number; y: number}> = ({x, y}) => <div style={{position: 'absolute', left: x - 24, top: y - 24, width: 48, height: 48}}>
+  <div style={{position: 'absolute', left: 23, top: 0, width: 2, height: 48, background: COR.preto}} />
+  <div style={{position: 'absolute', left: 0, top: 23, width: 48, height: 2, background: COR.preto}} />
+  <div style={{position: 'absolute', left: 10, top: 10, width: 28, height: 28, borderRadius: '50%', border: `2px solid ${COR.preto}`, boxSizing: 'border-box'}} />
+</div>;
+
+export const Fundo: React.FC = () => <AbsoluteFill style={{background: COR.papel}}>
+  <AbsoluteFill style={{backgroundImage: 'radial-gradient(rgba(17,17,17,0.14) 2px, transparent 2.5px)', backgroundSize: '28px 28px'}} />
+  <Cruz x={44} y={44} /><Cruz x={1036} y={44} /><Cruz x={44} y={1876} /><Cruz x={1036} y={1876} />
+</AbsoluteFill>;

package/kits/cartaz-cinetico/elementos/Montagem.tsx

@@ -0,0 +1,59 @@
+// 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 {Fundo} from './Fundo';
+import {Camera} from './Camera';
+import {Cena, Entrada} from './Cena';
+import {Efeito, NomeSom, Trilha} from './Som';
+import {CartazPalavra} from './CartazPalavra';
+import {PilhaCartaz} from './PilhaCartaz';
+import {RoletaPalavras} from './RoletaPalavras';
+import {EcoPalavra} from './EcoPalavra';
+import {CirculoPoster} from './CirculoPoster';
+import {Selo} from './Selo';
+import {AssinaturaMarca} from './AssinaturaMarca';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {
+  CartazPalavra, PilhaCartaz, RoletaPalavras, EcoPalavra, CirculoPoster, Selo, AssinaturaMarca,
+};
+
+export type Camada = {elemento: string; props: Record<string, unknown>};
+export type CenaPlano = {
+  batida: string; de: number; ate: number; entrada?: Entrada;
+  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; 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: '#EFE6D2'}}>
+    <Fundo />
+    <Camera batidas={socos}>
+      {plano.cenas.map((c, i) => <Cena key={i} de={c.de} ate={c.ate} entrada={c.entrada} ultima={i === ultima}>
+        {c.camadas.map((k, j) => {
+          const El = ELEMENTOS[k.elemento];
+          if (!El) throw new Error(`cartaz-cinetico: 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/cartaz-cinetico/elementos/PilhaCartaz.tsx

@@ -0,0 +1,40 @@
+// PilhaCartaz: linhas empilhadas, cada uma esticada até a largura útil (palavra curta fica enorme). Cada linha
+// estica da esquerda (scaleX 0 → 1 com sobra), 7 quadros depois da anterior. Cores alternam preto, vermelho e azul.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, SEGURA, caber, eb} from './base';
+
+type Cor = 'papel' | 'preto' | 'vermelho' | 'azul';
+export type PilhaCartazProps = {
+  linhas: string[];
+  /** uma cor por linha; padrão: preto, vermelho, azul, ... */
+  cores?: Cor[];
+  /** bloco de fundo da pilha (cor chapada); padrão: sem bloco */
+  fundo?: Cor;
+  inicio?: number;
+  intervalo?: number;
+  y?: number;
+  tamanho?: number;
+  fim?: number;
+};
+
+export const PilhaCartaz: React.FC<PilhaCartazProps> = ({linhas, cores, fundo, inicio = 0, intervalo = 7, y = 720, tamanho = 520, fim}) => {
+  const f = useCurrentFrame();
+  if (fim !== undefined && f >= fim) return null;
+  const cs = cores ?? (['preto', 'vermelho', 'azul'] as Cor[]);
+  const tams = linhas.map((l) => caber(l.toUpperCase(), tamanho, 920, 400, -0.005));
+  const alts = tams.map((t) => t * 0.92);
+  const total = alts.reduce((a, b) => a + b, 0);
+  let topo = y - total / 2;
+  return <div style={{position: 'absolute', inset: 0}}>
+    {fundo && <div style={{position: 'absolute', inset: 0, background: COR[fundo]}} />}
+    {linhas.map((l, i) => {
+      const top = topo; topo += alts[i];
+      const t = f - (inicio + i * intervalo);
+      const p = eb(t / 12, 1.7);
+      const corTexto = cs[i % cs.length];
+      const sobreEscuro = fundo && fundo !== 'papel';
+      return <div key={i} style={{position: 'absolute', left: SEGURA.lado, top, height: alts[i], width: 920, lineHeight: `${alts[i]}px`, fontFamily: FONTE.titulo, fontSize: tams[i], letterSpacing: '-0.005em', whiteSpace: 'nowrap', color: sobreEscuro && corTexto === 'preto' ? COR.papel : COR[corTexto], transformOrigin: '0 50%', transform: `scaleX(${Math.max(0.001, p)})`, opacity: t < 0 ? 0 : 1}}>{l.toUpperCase()}</div>;
+    })}
+  </div>;
+};

package/kits/cartaz-cinetico/elementos/RoletaPalavras.tsx

@@ -0,0 +1,30 @@
+// RoletaPalavras: janela de caça-níquel (920 × 560) que gira as palavras para cima, cada uma enchendo a janela, e
+// para na última passando 20% e voltando. Rótulo fixo acima da janela. O bloco da janela é azul (padrão).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, SEGURA, caber, eb, seg} from './base';
+
+type Cor = 'papel' | 'preto' | 'vermelho' | 'azul';
+export type RoletaPalavrasProps = {palavras: string[]; rotulo?: string; cor?: Cor; fundo?: Cor; inicio?: number; intervalo?: number; y?: number; altura?: number; fim?: number};
+
+export const RoletaPalavras: React.FC<RoletaPalavrasProps> = ({palavras, rotulo, cor = 'papel', fundo = 'azul', inicio = 0, intervalo = 5, y = 740, altura = 560, fim}) => {
+  const f = useCurrentFrame();
+  if (f < inicio || (fim !== undefined && f >= fim)) return null;
+  const n = palavras.length;
+  const dur = (n - 1) * intervalo + 9;
+  const pos = (n - 1) * eb(seg(f, inicio + 4, inicio + 4 + dur), 1.2);
+  const entra = eb((f - inicio) / 8, 1.4);
+  const idx = Math.min(n - 1, Math.round(pos));
+  return <div style={{position: 'absolute', inset: 0}}>
+    {rotulo && <div style={{position: 'absolute', left: SEGURA.lado, top: y - altura / 2 - 92, fontFamily: FONTE.apoio, fontWeight: 800, fontSize: 56, letterSpacing: '0.06em', color: COR.preto, textTransform: 'uppercase', transform: `translateX(${(1 - entra) * -600}px)`}}>{rotulo}</div>}
+    <div style={{position: 'absolute', left: SEGURA.lado, top: y - altura / 2, width: 920, height: altura, overflow: 'hidden', background: COR[fundo], border: `12px solid ${COR.preto}`, boxSizing: 'border-box', transform: `scale(${Math.max(0.001, entra)})`}}>
+      <div style={{position: 'absolute', left: 0, top: -pos * altura, width: '100%'}}>
+        {palavras.map((w, i) => {
+          const tam = caber(w.toUpperCase(), 480, 840, 400, -0.005);
+          return <div key={i} style={{height: altura, width: '100%', textAlign: 'center', lineHeight: `${altura}px`, fontFamily: FONTE.titulo, fontSize: tam, color: COR[cor], whiteSpace: 'nowrap', textTransform: 'uppercase'}}>{w}</div>;
+        })}
+      </div>
+      <div style={{position: 'absolute', inset: 0, boxShadow: `inset 0 ${idx >= 0 ? 0 : 0}px 0 ${COR.preto}`}} />
+    </div>
+  </div>;
+};

package/kits/cartaz-cinetico/elementos/Selo.tsx

@@ -0,0 +1,25 @@
+// Selo: selo circular com texto no anel (Archivo 800) que gira 3,2° por quadro e uma palavra no centro (Anton).
+// Entra com scale 0 → 1 e sobra. Serve de apoio ao círculo da data ou à oferta.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, eb} from './base';
+
+type Cor = 'papel' | 'preto' | 'vermelho' | 'azul';
+export type SeloProps = {anel: string; centro?: string; x?: number; y?: number; tamanho?: number; cor?: Cor; texto?: Cor; inicio?: number; id?: string};
+
+export const Selo: React.FC<SeloProps> = ({anel, centro = '', x = 820, y = 420, tamanho = 360, cor = 'preto', texto = 'papel', inicio = 0, id = 'selo'}) => {
+  const f = useCurrentFrame();
+  if (f < inicio) return null;
+  const t = f - inicio;
+  const p = eb(t / 12, 1.8);
+  const r = 150;
+  const repetido = `${anel.toUpperCase()} · `.repeat(Math.max(1, Math.round(40 / (anel.length + 3))));
+  return <svg viewBox="0 0 400 400" style={{position: 'absolute', left: x - tamanho / 2, top: y - tamanho / 2, width: tamanho, height: tamanho, transform: `scale(${Math.max(0.001, p)})`, overflow: 'visible'}}>
+    <circle cx="200" cy="200" r="198" fill={COR[cor]} />
+    <g transform={`rotate(${t * 3.2} 200 200)`}>
+      <path id={id} d={`M 200 200 m -${r} 0 a ${r} ${r} 0 1 1 ${r * 2} 0 a ${r} ${r} 0 1 1 -${r * 2} 0`} fill="none" />
+      <text fontFamily={FONTE.apoio} fontWeight={800} fontSize="36" letterSpacing="3" fill={COR[texto]}><textPath href={`#${id}`} textLength={2 * Math.PI * r - 6} lengthAdjust="spacing">{repetido}</textPath></text>
+    </g>
+    {centro && <text x="200" y="232" textAnchor="middle" fontFamily={FONTE.titulo} fontSize="110" fill={COR[texto]}>{centro.toUpperCase()}</text>}
+  </svg>;
+};

package/kits/cartaz-cinetico/elementos/Som.tsx

@@ -0,0 +1,38 @@
+// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`, pacote soft-pop); trilha de 9 s, 124 bpm, com bateria no ponto.
+// 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 whooshEntra from '../assets/sons/whoosh-entra.mp3';
+import whooshSai from '../assets/sons/whoosh-sai.mp3';
+import swoosh from '../assets/sons/swoosh.mp3';
+import popPalavra from '../assets/sons/pop-palavra.mp3';
+import popCartao from '../assets/sons/pop-cartao.mp3';
+import clique from '../assets/sons/clique.mp3';
+import impacto from '../assets/sons/impacto.mp3';
+import subida from '../assets/sons/subida.mp3';
+import assinatura from '../assets/sons/assinatura.mp3';
+import trilha from '../assets/trilha/cartaz-124bpm.mp3';
+
+export const SONS = {
+  'whoosh-entra': whooshEntra, 'whoosh-sai': whooshSai, swoosh, 'pop-palavra': popPalavra, 'pop-cartao': popCartao, clique, impacto, subida, assinatura,
+} as const;
+export type NomeSom = keyof typeof SONS;
+
+// volume de cada efeito (0..1) já calibrado contra a trilha a 0.55
+const VOLUME: Record<NomeSom, number> = {
+  'whoosh-entra': 0.9, 'whoosh-sai': 0.8, swoosh: 1, 'pop-palavra': 1, 'pop-cartao': 0.9, clique: 0.8, impacto: 0.95, subida: 0.7, 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.55, 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/cartaz-cinetico/elementos/base.ts

@@ -0,0 +1,72 @@
+// Base do kit cartaz-cinetico: cores, fontes, curvas e medidas. Todo número visual sai daqui.
+// Os elementos importam só este arquivo, 'react' e 'remotion'. Nada de fora da pasta do kit.
+import {continueRender, delayRender} from 'remotion';
+import fonte0 from '../assets/fontes/anton.woff2';
+import fonte1 from '../assets/fontes/archivo.woff2';
+
+// ---------- tela ----------
+export const LARGURA = 1080, ALTURA = 1920, FPS = 30;
+// área segura (Reels/TikTok): o que se lê fica entre estas linhas
+export const SEGURA = {topo: 168, base: 1330, lado: 80};
+export const LARGURA_UTIL = LARGURA - SEGURA.lado * 2; // 920 px
+
+// ---------- cor ----------
+export const COR = {
+  papel: '#EFE6D2',
+  preto: '#111111',
+  vermelho: '#E8381F',
+  azul: '#2438E8'
+};
+
+// ---------- fonte ----------
+// Nome de família com o prefixo do kit ("CC ..."), pra não colidir com outro kit no mesmo estúdio.
+export const FONTE = {
+  titulo: '"CC Anton", Impact, Haettenschweiler, sans-serif',
+  apoio: '"CC Archivo", Arial, sans-serif',
+};
+type G = {__kit_cartaz_cinetico?: boolean};
+if (typeof document !== 'undefined' && !(globalThis as G).__kit_cartaz_cinetico) {
+  (globalThis as G).__kit_cartaz_cinetico = true;
+  const h = delayRender('cartaz-cinetico: fontes');
+  Promise.all([
+    new FontFace('CC Anton', `url(${fonte0}) format('woff2')`, {weight: '400', style: 'normal'}).load(),
+    new FontFace('CC Archivo', `url(${fonte1}) format('woff2')`, {weight: '500 800', style: 'normal'}).load(),
+  ]).then((fs) => {fs.forEach((ff) => document.fonts.add(ff)); continueRender(h);}).catch(() => continueRender(h));
+}
+
+// ---------- tempo e curva ----------
+export const c01 = (t: number) => Math.max(0, Math.min(1, t));
+/** progresso 0..1 de f entre a e b */
+export const seg = (f: number, a: number, b: number) => c01((f - a) / (b - a));
+/** saída rápida e pouso longo, parecida com cubic-bezier(.2,.8,.2,1) */
+export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
+/** easeOutBack: passa do destino em ~10% e volta (toda entrada tem overshoot) */
+export const eb = (t: number, s = 1.70158) => {const x = c01(t) - 1; return 1 + (s + 1) * x * x * x + s * x * x;};
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+/** uma batida da trilha do kit (124 bpm) em quadros */
+export const BATIDA = 14.52;
+
+// ---------- medida de texto ----------
+let canvas: HTMLCanvasElement | null = null;
+const cache = new Map<string, number>();
+export const larguraTexto = (texto: string, tamanho: number, peso = 400, trackingEm = -0.005, familia = 'CC Anton'): number => {
+  const chave = `${texto}|${tamanho}|${peso}|${trackingEm}|${familia}`;
+  const c = cache.get(chave); if (c !== undefined) return c;
+  if (typeof document === 'undefined') return texto.length * tamanho * 0.58;
+  canvas = canvas || document.createElement('canvas');
+  const ctx = canvas.getContext('2d'); if (!ctx) return texto.length * tamanho * 0.58;
+  const fonte = `${peso} ${tamanho}px "${familia}"`;
+  ctx.font = fonte;
+  const w = ctx.measureText(texto).width + texto.length * trackingEm * tamanho;
+  if (document.fonts.check(fonte)) cache.set(chave, w);
+  return w;
+};
+/** o maior tamanho até `tamanho` em que o texto cabe em `largura` (nunca palavra cortada) */
+export const caber = (texto: string, tamanho: number, largura = LARGURA_UTIL, peso = 400, trackingEm = -0.005, familia = 'CC Anton') => {
+  const w = larguraTexto(texto, tamanho, peso, trackingEm, familia);
+  return w > largura ? Math.floor(tamanho * (largura / w)) : tamanho;
+};
+/** tira os asteriscos de destaque: "Usar *IA*" -> "Usar IA" */
+export const textoLimpo = (t: string) => t.replace(/\*/g, '');
+/** quebra "a *b* c" em pedaços {t, d}: d = true quando estava entre asteriscos */
+export const pedacos = (t: string) => t.split(/(\*[^*]+\*)/).filter(Boolean).map((p) => p.startsWith('*') ? {t: p.slice(1, -1), d: true} : {t: p, d: false});

package/kits/cartaz-cinetico/elementos/index.ts

@@ -0,0 +1,16 @@
+// Tudo que o kit cartaz-cinetico oferece. A IA monta o vídeo combinando isto (ou escrevendo um plano pra Montagem).
+export * from './base';
+export {Fundo} from './Fundo';
+export {Camera, posCamera} from './Camera';
+export {Cena, useDuracaoCena, SOBREPOE} from './Cena';
+export {CartazPalavra} from './CartazPalavra';
+export {PilhaCartaz} from './PilhaCartaz';
+export {RoletaPalavras} from './RoletaPalavras';
+export {EcoPalavra} from './EcoPalavra';
+export {CirculoPoster} from './CirculoPoster';
+export {Selo} from './Selo';
+export {AssinaturaMarca} from './AssinaturaMarca';
+export {Efeito, Trilha, SONS} from './Som';
+export type {NomeSom} from './Som';
+export {Montagem, ELEMENTOS} from './Montagem';
+export type {Plano, CenaPlano, Camada} from './Montagem';

package/kits/cartaz-cinetico/exemplos/logo-feira.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><circle cx="60" cy="60" r="60" fill="#E8381F"/><rect x="30" y="30" width="60" height="60" fill="#EFE6D2" transform="rotate(45 60 60)"/></svg>

package/kits/cartaz-cinetico/exemplos/plano.json

@@ -0,0 +1,55 @@
+{
+  "kit": "cartaz-cinetico",
+  "roteiro": "exemplos/roteiro.md",
+  "duracao": 240,
+  "trilha": {"volume": 0.55},
+  "cenas": [
+    {
+      "batida": "gancho", "de": 0, "ate": 44, "entrada": "nenhuma",
+      "camadas": [
+        {"elemento": "CartazPalavra", "props": {"palavra": "a rua", "cor": "preto", "fundo": "vermelho", "inicio": 0, "fim": 15}},
+        {"elemento": "CartazPalavra", "props": {"palavra": "vai", "cor": "vermelho", "fundo": "preto", "inicio": 15, "fim": 29, "tamanho": 760}},
+        {"elemento": "CartazPalavra", "props": {"palavra": "virar", "cor": "papel", "fundo": "azul", "inicio": 29, "girar": true}}
+      ],
+      "socos": [15, 29],
+      "sons": [{"som": "impacto", "em": 0}, {"som": "impacto", "em": 15}, {"som": "swoosh", "em": 27}, {"som": "impacto", "em": 29}]
+    },
+    {
+      "batida": "virada", "de": 44, "ate": 89, "entrada": "cortar",
+      "camadas": [
+        {"elemento": "PilhaCartaz", "props": {"linhas": ["feira", "viva", "na rua"], "inicio": 2, "intervalo": 7, "y": 740}}
+      ],
+      "socos": [9, 16],
+      "sons": [{"som": "whoosh-entra", "em": -1}, {"som": "pop-palavra", "em": 2}, {"som": "pop-palavra", "em": 9}, {"som": "impacto", "em": 16}]
+    },
+    {
+      "batida": "prova", "de": 89, "ate": 135, "entrada": "cortar",
+      "camadas": [
+        {"elemento": "RoletaPalavras", "props": {"palavras": ["música", "comida", "arte", "circo", "festa"], "rotulo": "tem", "fundo": "azul", "cor": "papel", "inicio": 0, "y": 760, "altura": 600}}
+      ],
+      "sons": [{"som": "whoosh-entra", "em": -1}, {"som": "clique", "em": 8}, {"som": "clique", "em": 13}, {"som": "clique", "em": 18}, {"som": "clique", "em": 23}, {"som": "impacto", "em": 32}]
+    },
+    {
+      "batida": "lista", "de": 135, "ate": 168, "entrada": "cortar",
+      "camadas": [
+        {"elemento": "EcoPalavra", "props": {"palavra": "vem", "fundo": "papel", "cores": ["vermelho", "preto", "azul"], "inicio": 0, "y": 740, "tamanho": 380}}
+      ],
+      "sons": [{"som": "whoosh-entra", "em": -1}, {"som": "pop-palavra", "em": 0}, {"som": "pop-palavra", "em": 6}, {"som": "pop-palavra", "em": 12}, {"som": "impacto", "em": 15}]
+    },
+    {
+      "batida": "data", "de": 168, "ate": 204, "entrada": "girar",
+      "camadas": [
+        {"elemento": "CirculoPoster", "props": {"linhas": ["08.08", "sábado"], "cor": "vermelho", "texto": "papel", "inicio": 0, "morfar": 14, "y": 760}},
+        {"elemento": "Selo", "props": {"anel": "entrada grátis", "centro": "grátis", "x": 840, "y": 380, "tamanho": 360, "cor": "preto", "texto": "papel", "inicio": 10}}
+      ],
+      "sons": [{"som": "whoosh-entra", "em": -1}, {"som": "impacto", "em": 2}, {"som": "pop-cartao", "em": 12}, {"som": "impacto", "em": 14}]
+    },
+    {
+      "batida": "marca", "de": 204, "ate": 240, "entrada": "cortar",
+      "camadas": [
+        {"elemento": "AssinaturaMarca", "props": {"nome": "feira|viva", "icone": "logo-feira.svg", "detalhe": "rua do mercado · 10h às 22h", "endereco": "feiraviva.exemplo", "inicio": 0, "y": 700}}
+      ],
+      "sons": [{"som": "impacto", "em": 0}, {"som": "assinatura", "em": 8}, {"som": "pop-palavra", "em": 22}]
+    }
+  ]
+}

package/kits/cartaz-cinetico/exemplos/roteiro.md

@@ -0,0 +1,20 @@
+# Roteiro de demonstração · "Feira Viva" (evento fictício)
+
+Pedido: *"um reels de 8 s da Feira Viva, festival de rua, sábado 8 de agosto, Rua do Mercado, entrada grátis. Cartaz cinético."*
+
+Sem narração: os cortes seguem a trilha (124 bpm, 1 batida = 14,5 quadros).
+
+| # | batida | tempo (quadros) | na tela | elemento | som |
+|---|---|---|---|---|---|
+| 1 | gancho | 0–44 | "A RUA" (vermelho) → "VAI" (preto) → "VIRAR" girada (azul) | CartazPalavra ×3 | impactos, swoosh |
+| 2 | virada | 44–89 | "FEIRA / VIVA / NA RUA" esticadas | PilhaCartaz | whoosh, pops, impacto |
+| 3 | prova | 89–135 | "TEM" + roleta MÚSICA · COMIDA · ARTE · CIRCO · FESTA | RoletaPalavras | cliques, impacto |
+| 4 | lista | 135–168 | "VEM" repetido em degraus | EcoPalavra | pops, impacto |
+| 5 | data | 168–204 | círculo "08.08 / SÁBADO" vira quadrado + selo "ENTRADA GRÁTIS" | CirculoPoster + Selo | impacto, pop de cartão |
+| 6 | marca | 204–240 | "FEIRA / VIVA" + rua do mercado + endereço | AssinaturaMarca | impacto, assinatura |
+
+Como a IA chegou nisso:
+1. Cortou o pedido em uma palavra por batida e escolheu um bloco de cor diferente para cada corte.
+2. Pegou as batidas obrigatórias (gancho, virada, data, marca) e usou a roleta como prova (atrações) e o eco como convite.
+3. Encaixou os cortes nas batidas da trilha e escreveu `plano.json`.
+4. O `preview.tsx` passa esse plano para `Montagem`, que só usa os elementos do kit.

package/kits/cartaz-cinetico/preview.tsx

@@ -0,0 +1,16 @@
+// Preview do kit: o vídeo de demonstração (8 s) montado SÓ com os elementos do kit, a partir de exemplos/plano.json.
+// O estúdio registra isto como `Kit-cartaz-cinetico`.
+import React from 'react';
+import {Montagem, Plano} from './elementos';
+import plano from './exemplos/plano.json';
+
+import logo from './exemplos/logo-feira.svg';
+
+const arquivos: Record<string, string> = {
+  
+  'logo-feira.svg': logo,
+};
+
+const Preview: React.FC = () => <Montagem plano={plano as Plano} arquivos={arquivos} />;
+
+export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 76, Componente: Preview};