primocode 10.17.1 → 10.19.0

package/kits/jornal/elementos/Montagem.tsx

@@ -0,0 +1,61 @@
+// 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, Sobre} from './Fundo';
+import {Camera} from './Camera';
+import {Cena, Entrada} from './Cena';
+import {Efeito, NomeSom, Trilha} from './Som';
+import {Cabecalho} from './Cabecalho';
+import {Manchete} from './Manchete';
+import {FotoMeiaTinta} from './FotoMeiaTinta';
+import {Colunas} from './Colunas';
+import {Carimbo} from './Carimbo';
+import {JornalGirando} from './JornalGirando';
+import {Ticker} from './Ticker';
+import {AssinaturaMarca} from './AssinaturaMarca';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {
+  Cabecalho, Manchete, FotoMeiaTinta, Colunas, Carimbo, JornalGirando, Ticker, 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: '#E8DFC8'}}>
+    <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(`jornal: elemento "${k.elemento}" não existe no kit`);
+          return <El key={j} {...(resolver(k.props, arquivos) as object)} />;
+        })}
+      </Cena>)}
+    </Camera>
+    <Sobre />
+    {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/jornal/elementos/Som.tsx

@@ -0,0 +1,38 @@
+// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`, pacote paper: abafados, de papel); trilha de 9 s, 96 bpm, seca e de redação.
+// 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/redacao-96bpm.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.5
+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.9, 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.5, saida = 20}) => {
+  const {durationInFrames} = useVideoConfig();
+  return <Audio src={trilha} volume={(f) => volume * interpolate(f, [durationInFrames - saida, durationInFrames], [1, 0], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'})} />;
+};

package/kits/jornal/elementos/Ticker.tsx

@@ -0,0 +1,19 @@
+// Ticker: faixa preta de últimas notícias. A tag vermelha fica fixa à esquerda e o texto (itálico, caixa alta) corre
+// 9 px por quadro para a esquerda, repetido. A faixa sobe de baixo em 12 quadros com sobra.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, eb} from './base';
+
+export type TickerProps = {itens: string[]; tag?: string; y?: number; inicio?: number; velocidade?: number};
+
+export const Ticker: React.FC<TickerProps> = ({itens, tag = 'ÚLTIMA HORA', y = 1230, inicio = 0, velocidade = 9}) => {
+  const f = useCurrentFrame();
+  const p = eb((f - inicio) / 12, 1.5);
+  const unidade = itens.map((i) => i.toUpperCase()).join('   ◆   ') + '   ◆   ';
+  const passo = unidade.length * 44 * 0.52;
+  const x = -((Math.max(0, f - inicio) * velocidade) % passo);
+  return <div style={{position: 'absolute', left: 96, width: 888, top: y - 60, height: 120, background: COR.tinta, overflow: 'hidden', transform: `translateY(${(1 - p) * 400}px)`, opacity: f < inicio ? 0 : 1}}>
+    <div style={{position: 'absolute', left: x + 330, top: 0, whiteSpace: 'nowrap', fontFamily: FONTE.italico, fontStyle: 'italic', fontWeight: 700, fontSize: 52, lineHeight: '120px', color: COR.papelClaro}}>{unidade.repeat(4)}</div>
+    <div style={{position: 'absolute', left: 20, top: 0, width: 300, height: 120, background: COR.vermelho, color: COR.papelClaro, fontFamily: FONTE.titulo, fontWeight: 900, fontSize: 36, lineHeight: '120px', letterSpacing: '0.1em', textAlign: 'center'}}>{tag}</div>
+  </div>;
+};

package/kits/jornal/elementos/base.ts

@@ -0,0 +1,76 @@
+// Base do kit jornal: 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/playfair.woff2';
+import fonte1 from '../assets/fontes/playfair-italic.woff2';
+import fonte2 from '../assets/fontes/unifraktur.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: '#E8DFC8',
+  papelClaro: '#F3ECD9',
+  tinta: '#1B1A17',
+  vermelho: '#B3261E',
+  cinza: '#8A8472'
+};
+
+// ---------- fonte ----------
+// Nome de família com o prefixo do kit ("JN ..."), pra não colidir com outro kit no mesmo estúdio.
+export const FONTE = {
+  titulo: '"JN Playfair Display", Georgia, Times New Roman, serif',
+  italico: '"JN Playfair Display", Georgia, Times New Roman, serif',
+  apoio: '"JN UnifrakturMaguntia", Georgia, serif',
+};
+type G = {__kit_jornal?: boolean};
+if (typeof document !== 'undefined' && !(globalThis as G).__kit_jornal) {
+  (globalThis as G).__kit_jornal = true;
+  const h = delayRender('jornal: fontes');
+  Promise.all([
+    new FontFace('JN Playfair Display', `url(${fonte0}) format('woff2')`, {weight: '500 900', style: 'normal'}).load(),
+    new FontFace('JN Playfair Display', `url(${fonte1}) format('woff2')`, {weight: '500 900', style: 'italic'}).load(),
+    new FontFace('JN UnifrakturMaguntia', `url(${fonte2}) format('woff2')`, {weight: '400', 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 (96 bpm) em quadros */
+export const BATIDA = 18.75;
+
+// ---------- medida de texto ----------
+let canvas: HTMLCanvasElement | null = null;
+const cache = new Map<string, number>();
+export const larguraTexto = (texto: string, tamanho: number, peso = 900, trackingEm = -0.01, familia = 'JN Playfair Display'): 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 = 900, trackingEm = -0.01, familia = 'JN Playfair Display') => {
+  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/jornal/elementos/index.ts

@@ -0,0 +1,17 @@
+// Tudo que o kit jornal oferece. A IA monta o vídeo combinando isto (ou escrevendo um plano pra Montagem).
+export * from './base';
+export {Fundo, Sobre} from './Fundo';
+export {Camera, posCamera} from './Camera';
+export {Cena, useDuracaoCena, SOBREPOE} from './Cena';
+export {Cabecalho} from './Cabecalho';
+export {Manchete} from './Manchete';
+export {FotoMeiaTinta} from './FotoMeiaTinta';
+export {Colunas} from './Colunas';
+export {Carimbo} from './Carimbo';
+export {JornalGirando} from './JornalGirando';
+export {Ticker} from './Ticker';
+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/jornal/exemplos/logo-esquina.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><rect width="120" height="120" fill="#1B1A17"/><path d="M30 90V30h16l30 40V30h14v60H74L44 50v40z" fill="#E8DFC8"/></svg>

package/kits/jornal/exemplos/plano.json

@@ -0,0 +1,48 @@
+{
+  "kit": "jornal",
+  "roteiro": "exemplos/roteiro.md",
+  "duracao": 240,
+  "trilha": {"volume": 0.5},
+  "cenas": [
+    {
+      "batida": "gancho", "de": 0, "ate": 50, "entrada": "nenhuma",
+      "camadas": [
+        {"elemento": "JornalGirando", "props": {"nome": "O Diário da Esquina", "manchete": "EXTRA!|EXTRA!", "foto": "fotos/foto-07.jpg", "inicio": 0, "y": 780, "duracao": 24}},
+        {"elemento": "Carimbo", "props": {"texto": "novidade|no bairro", "x": 540, "y": 1010, "largura": 700, "inicio": 28, "tamanho": 120}}
+      ],
+      "socos": [28],
+      "sons": [{"som": "swoosh", "em": 0}, {"som": "pop-cartao", "em": 20}, {"som": "impacto", "em": 28}]
+    },
+    {
+      "batida": "virada", "de": 50, "ate": 100, "entrada": "cortar",
+      "camadas": [
+        {"elemento": "Cabecalho", "props": {"nome": "O Diário da Esquina", "edicao": "Nº 214", "data": "sábado, 8 de agosto", "preco": "R$ 2,00", "inicio": 2, "y": 190}},
+        {"elemento": "Manchete", "props": {"kicker": "extra", "linhas": ["BAIRRO GANHA", "*APP* PRÓPRIO"], "subtitulo": "Esquina junta o aviso do vizinho, a obra e a feira num só lugar.", "inicio": 14, "intervalo": 9, "y": 940, "tamanho": 150}}
+      ],
+      "sons": [{"som": "whoosh-entra", "em": -1}, {"som": "pop-palavra", "em": 18}, {"som": "pop-palavra", "em": 27}, {"som": "impacto", "em": 28}]
+    },
+    {
+      "batida": "prova", "de": 100, "ate": 148, "entrada": "subir",
+      "camadas": [
+        {"elemento": "FotoMeiaTinta", "props": {"src": "fotos/foto-03.jpg", "x": 540, "y": 560, "largura": 800, "altura": 600, "inicio": 2, "legenda": "Moradores testam o app na Rua do Mercado. Foto: Arquivo", "foco": "50% 40%"}},
+        {"elemento": "Colunas", "props": {"colunas": ["Em duas semanas, mais de mil vizinhos já avisam sobre buracos, obras e feiras.", "A notícia chega primeiro a quem mora perto. O app é gratuito."], "inicio": 16, "y": 960, "altura": 300, "velocidade": 2.1}}
+      ],
+      "sons": [{"som": "whoosh-entra", "em": -1}, {"som": "pop-cartao", "em": 8}, {"som": "clique", "em": 16}]
+    },
+    {
+      "batida": "lista", "de": 148, "ate": 196, "entrada": "cortar",
+      "camadas": [
+        {"elemento": "Manchete", "props": {"linhas": ["NOTÍCIA DA RUA,", "*EM TEMPO REAL*"], "inicio": 2, "intervalo": 9, "y": 640, "tamanho": 130}},
+        {"elemento": "Ticker", "props": {"itens": ["buraco na rua do mercado", "feira de sábado confirmada", "obra termina na sexta"], "tag": "AO VIVO", "y": 1250, "inicio": 6}}
+      ],
+      "sons": [{"som": "impacto", "em": 2}, {"som": "pop-palavra", "em": 8}, {"som": "clique", "em": 14}]
+    },
+    {
+      "batida": "marca", "de": 196, "ate": 240, "entrada": "subir",
+      "camadas": [
+        {"elemento": "AssinaturaMarca", "props": {"nome": "Esquina", "icone": "logo-esquina.svg", "detalhe": "o jornal do seu bairro, no celular", "endereco": "esquina.exemplo", "inicio": 2, "y": 700}}
+      ],
+      "sons": [{"som": "whoosh-entra", "em": -1}, {"som": "impacto", "em": 8}, {"som": "assinatura", "em": 10}, {"som": "clique", "em": 30}]
+    }
+  ]
+}

package/kits/jornal/exemplos/roteiro.md

@@ -0,0 +1,19 @@
+# Roteiro de demonstração · "Esquina" (produto fictício)
+
+Pedido: *"um reels de 8 s lançando o Esquina, app gratuito de notícias do bairro, no jeito de primeira página de jornal."*
+
+Sem narração: os cortes seguem a trilha (96 bpm, 1 batida = 18,75 quadros).
+
+| # | batida | tempo (quadros) | na tela | elemento | som |
+|---|---|---|---|---|---|
+| 1 | gancho | 0–50 | o jornal gira e cresce ("EXTRA! EXTRA!") + carimbo "NOVIDADE NO BAIRRO" | JornalGirando + Carimbo | swoosh, pop, impacto |
+| 2 | virada | 50–100 | cabeçalho "O Diário da Esquina" + "EXTRA / BAIRRO GANHA *APP* PRÓPRIO" + subtítulo | Cabecalho + Manchete | whoosh, pops, impacto |
+| 3 | prova | 100–148 | foto em meio-tom + 3 colunas que se escrevem | FotoMeiaTinta + Colunas | pop de cartão, clique |
+| 4 | lista | 148–196 | "NOTÍCIA DA RUA, *EM TEMPO REAL*" + faixa AO VIVO | Manchete + Ticker | impacto, pop, clique |
+| 5 | marca | 196–240 | "Esquina" gótico entre filetes + "esquina.exemplo" | AssinaturaMarca | impacto, assinatura |
+
+Como a IA chegou nisso:
+1. Transformou o lançamento em notícia: abertura com o jornal girando, depois cabeçalho e manchete.
+2. Uma palavra vermelha por manchete (APP, EM TEMPO REAL) e o carimbo para o "de graça".
+3. Colocou a prova como foto em meio-tom e colunas curtas, e a lista de assuntos como faixa de últimas notícias.
+4. O `preview.tsx` passa esse plano para `Montagem`, que só usa os elementos do kit.

package/kits/jornal/preview.tsx

@@ -0,0 +1,17 @@
+// 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-jornal`.
+import React from 'react';
+import {Montagem, Plano} from './elementos';
+import plano from './exemplos/plano.json';
+import f3 from './exemplos/fotos/foto-03.jpg';
+import f7 from './exemplos/fotos/foto-07.jpg';
+import logo from './exemplos/logo-esquina.svg';
+
+const arquivos: Record<string, string> = {
+  'fotos/foto-03.jpg': f3, 'fotos/foto-07.jpg': f7,
+  'logo-esquina.svg': logo,
+};
+
+const Preview: React.FC = () => <Montagem plano={plano as Plano} arquivos={arquivos} />;
+
+export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 118, Componente: Preview};

package/kits/jornal/receita.json

@@ -0,0 +1,170 @@
+{
+  "kit": "jornal",
+  "fps": 30,
+  "batida_trilha_quadros": 18.75,
+  "duracao_video_s": [
+    6,
+    45
+  ],
+  "ordem_sugerida": [
+    "gancho",
+    "virada",
+    "prova",
+    "lista",
+    "oferta",
+    "marca"
+  ],
+  "batidas": [
+    {
+      "nome": "gancho",
+      "obrigatoria": true,
+      "duracao": [
+        45,
+        75
+      ],
+      "elementos": [
+        "JornalGirando",
+        "Carimbo"
+      ],
+      "entrada": [
+        "nenhuma"
+      ],
+      "sons": [
+        "swoosh",
+        "impacto"
+      ],
+      "nota": "o jornal gira e cresce até a tela; o carimbo EXTRA cai por cima."
+    },
+    {
+      "nome": "virada",
+      "obrigatoria": true,
+      "duracao": [
+        40,
+        75
+      ],
+      "elementos": [
+        "Cabecalho",
+        "Manchete"
+      ],
+      "entrada": [
+        "cortar",
+        "subir"
+      ],
+      "sons": [
+        "whoosh-entra",
+        "pop-palavra",
+        "impacto"
+      ],
+      "nota": "cabeçalho cai no topo e a manchete com o nome/novidade bate embaixo."
+    },
+    {
+      "nome": "prova",
+      "obrigatoria": true,
+      "duracao": [
+        40,
+        75
+      ],
+      "elementos": [
+        "FotoMeiaTinta",
+        "Colunas"
+      ],
+      "entrada": [
+        "subir"
+      ],
+      "sons": [
+        "pop-cartao",
+        "clique"
+      ],
+      "nota": "foto em meio-tom + colunas escrevendo (até 280 caracteres)."
+    },
+    {
+      "nome": "lista",
+      "obrigatoria": false,
+      "duracao": [
+        36,
+        66
+      ],
+      "elementos": [
+        "Manchete",
+        "Ticker"
+      ],
+      "entrada": [
+        "cortar"
+      ],
+      "sons": [
+        "pop-palavra",
+        "clique"
+      ],
+      "nota": "segunda manchete + faixa de últimas notícias com 3–4 itens."
+    },
+    {
+      "nome": "oferta",
+      "obrigatoria": false,
+      "duracao": [
+        30,
+        60
+      ],
+      "elementos": [
+        "Carimbo",
+        "Manchete"
+      ],
+      "entrada": [
+        "cortar"
+      ],
+      "sons": [
+        "impacto"
+      ],
+      "nota": "GRÁTIS / DE GRAÇA no carimbo."
+    },
+    {
+      "nome": "marca",
+      "obrigatoria": true,
+      "duracao": [
+        48,
+        90
+      ],
+      "elementos": [
+        "AssinaturaMarca"
+      ],
+      "entrada": [
+        "subir"
+      ],
+      "sons": [
+        "assinatura",
+        "impacto"
+      ],
+      "nota": "sempre a última: nome gótico entre filetes, edição e endereço."
+    }
+  ],
+  "transicoes": [
+    {
+      "nome": "cortar",
+      "quadros": 12,
+      "como": "entra com zoom 1,14 → 1 e sobra; a anterior sobe 140 px e some"
+    },
+    {
+      "nome": "subir",
+      "quadros": 12,
+      "como": "entra 200 px de baixo com desfoque de 5 px"
+    },
+    {
+      "nome": "girar",
+      "quadros": 12,
+      "como": "entra girada −14° e 1,5x"
+    },
+    {
+      "nome": "nenhuma",
+      "quadros": 0,
+      "como": "sem movimento de janela (gancho)"
+    }
+  ],
+  "camera": {
+    "deriva": "sempre",
+    "socos": "cada batida + o carimbo"
+  },
+  "trilha": {
+    "arquivo": "assets/trilha/redacao-96bpm.mp3",
+    "volume": 0.5,
+    "com_narracao": 0.25
+  }
+}

package/kits/jornal/regras/area-segura.md

@@ -0,0 +1,19 @@
+# Área segura (9:16, 1080×1920)
+
+- Tudo que se lê fica entre **y = 168** e **y = 1330** e entre **x = 80** e **x = 1000** (920 px úteis).
+- Embaixo de 1330 px ficam a legenda e os botões do Reels/TikTok: ali só fundo e elementos que sangram.
+- Posições de referência (centro, em px):
+
+| uso | y |
+|---|---|
+| cabeçalho (topo) | 190 |
+| manchete (centro do bloco) | 700–900 |
+| kicker | 300 |
+| foto (centro) | 620 |
+| colunas (topo) | 1000 |
+| faixa de notícias | 1240 |
+| carimbo (centro) | 420–1000 |
+| jornal que gira (centro) | 760 |
+| marca (nome) | 660 |
+
+- O grão e a vinheta cobrem a tela inteira de propósito; texto nunca passa de 168–1330.

package/kits/jornal/regras/cor.md

@@ -0,0 +1,14 @@
+# Cor
+
+| token | hex | uso |
+|---|---|---|
+| `papel` | `#E8DFC8` | chão de todas as cenas (papel de jornal) |
+| `papelClaro` | `#F3ECD9` | folha do jornal que gira, miolo de caixas |
+| `tinta` | `#1B1A17` | texto, filetes, faixa de notícias |
+| `vermelho` | `#B3261E` | carimbo, palavra-chave, kicker |
+| `cinza` | `#8A8472` | legendas, fios finos, texto de apoio |
+
+- Sem degradê. A única sombra é a vinheta quente do Fundo (`rgba(90,60,20,0.28)` nas bordas) e a dobra central.
+- Foto sempre em meio-tom: `grayscale(1) contrast(1.35) sepia(0.3)` + retícula de pontos de 9 px a 55% de preto, mistura multiply.
+- Grão por cima de tudo (`Sobre`): ruído fractal a 22% em multiply, semente nova a cada 2 quadros.
+- O cliente pode trocar o `vermelho` e o nome no cabeçalho.

package/kits/jornal/regras/movimento.md

@@ -0,0 +1,16 @@
+# Movimento
+
+- Tela 1080×1920, **30 fps**. Curva padrão `e5` ≈ cubic-bezier(.2,.8,.2,1); toda entrada com sobra `eb` (easeOutBack, passa ~10% e volta).
+- A câmera nunca para: zoom 1,014 ± 0,012 (período 130 quadros), deslize ±12 × ±10 px, giro ±0,3°; soco de +3% que cai em 8 quadros a cada corte.
+- Entrada de cena: 12 quadros; saída sobrepõe 8 quadros com a próxima. Corte ou troca a cada 0,6–1,5 s (18–45 quadros).
+
+| movimento | quadros | valores |
+|---|---|---|
+| manchete bate | 12 | scale 1,5 → 1 e translateY −90 → 0 com `eb`; intervalo 9 entre linhas |
+| cabeçalho cai | 16 | translateY −420 → 0 com `eb` e giro de 3° que assenta |
+| foto cola | 14 | scale 0,6 → 1 e giro −8° → −2° com `eb` |
+| carimbo cai | 9 | scale 3,2 → 1 com `eb` (sobra 2) e giro fixo de −12° |
+| jornal gira | 24 | rotação 720° → 0 (`e5`) e scale 0,05 → 1 (`eb`) |
+| faixa de notícias | contínuo | texto corre 9 px por quadro; a faixa entra de baixo em 12 quadros |
+| coluna escreve | 1,6 car./quadro | texto aparece por caractere, coluna 1 depois 2 depois 3 |
+| saída de cena | 8 | sobe 140 px e some, sobrepondo 8 quadros |

package/kits/jornal/regras/ritmo.md

@@ -0,0 +1,15 @@
+# Ritmo
+
+- 96 bpm → 1 batida = **18.75 quadros** (0.625 s). Cortes caem nas batidas; o carimbo cai no tempo forte.
+- Tempo mínimo de leitura: **36** quadros por frase (≈ 0,45 s por palavra curta).
+
+| batida | duração (s) | quadros |
+|---|---|---|
+| gancho | 1.5–2.5 | 45–75 |
+| virada | 1.3–2.5 | 40–75 |
+| prova | 1.3–2.5 | 40–75 |
+| lista | 1.2–2.2 | 36–66 |
+| oferta | 1.0–2.0 | 30–60 |
+| marca | 1.6–3.0 | 48–90 |
+
+- Vídeo de demo: 8 s = 240 quadros (12.8 batidas).

package/kits/jornal/regras/som.md

@@ -0,0 +1,21 @@
+# Som
+
+- Trilha: `assets/trilha/redacao-96bpm.mp3` (9 s, 96 bpm), volume **0.5**, fade de saída nos últimos **20 quadros**. Vídeo maior que 9 s: gere outra no MotionCraft (`music make`, preset lofi-desk, 96 bpm, tom C, lead pluck, bateria lofi) — não faça loop.
+- Com narração: trilha a **0,25** e efeitos a 70% do volume da tabela.
+- Efeitos sintetizados (MotionCraft `sfx make`, pacote paper: abafados, de papel); trilha de 9 s, 96 bpm, seca e de redação.
+
+| som | volume | quando |
+|---|---|---|
+| `impacto` | 0.9 | carimbo que cai e manchete que bate |
+| `pop-palavra` | 1 | linha de manchete |
+| `pop-cartao` | 0.9 | foto que cola |
+| `swoosh` | 1 | jornal que gira |
+| `whoosh-entra` | 0.9 | cabeçalho que cai e entrada de cena |
+| `clique` | 0.8 | coluna que começa e faixa de notícias |
+| `subida` | 0.7 | 1,3 s antes do carimbo final |
+| `assinatura` | 0.9 | revelação da marca |
+| `whoosh-sai` | 0.8 | saída grande |
+
+- Um som por movimento que importa; no máximo **3 sons por segundo**; nunca o mesmo arquivo duas vezes seguidas.
+- Som entra **1 a 2 quadros antes** do visual.
+- O render nivela o mix em **−14 LUFS**, pico −1,5 dBTP.

package/kits/jornal/regras/tipografia.md

@@ -0,0 +1,17 @@
+# Tipografia
+
+Playfair Display (900 para manchete, 500 para coluna, itálico para subtítulo e rodapé) e UnifrakturMaguntia só para o cabeçalho e a assinatura.
+
+| papel | tamanho (px) | máx. caracteres | peso · tracking · caixa |
+|---|---|---|---|
+| manchete (linha) | 150 (encolhe até 80) | 14 por linha | Playfair 900 · −0,01 em · MAIÚSCULAS · entrelinha 1,0 |
+| subtítulo | 46 | 50 | Playfair itálico 500 |
+| kicker (EXTRA) | 44 | 10 | Playfair 900 · 0,2 em · MAIÚSCULAS · branco sobre vermelho |
+| cabeçalho (nome) | 170 (encolhe até 90) | 18 | UnifrakturMaguntia 400 |
+| coluna | 34 | entrelinha 1,28 | Playfair 500 · justificado · 3 colunas de 280 px |
+| legenda / data | 30 | 60 | Playfair itálico 500 · cinza |
+| carimbo | 96 | 8 | Playfair 900 · 0,08 em · MAIÚSCULAS · vermelho |
+
+- Texto que passa da largura útil (920 px) **encolhe sozinho** (`caber()` em `elementos/base.ts`). Nunca palavra cortada.
+- Uma palavra em `vermelho` por manchete, entre asteriscos, com sublinhado de 10 px.
+- Colunas escrevem a 1,6 caractere por quadro; nunca mais de 280 caracteres no total.

package/kits/legenda-viva/SKILL.md

@@ -0,0 +1,52 @@
+---
+slug: legenda-viva
+nome: Legenda viva
+descricao: fala com legenda animada palavra por palavra: Montserrat preta com contorno, palavra ativa em amarelo ou caixa verde, onda de voz
+familia: Redes sociais
+versao: 1
+quando:
+  - "corte de podcast, entrevista ou vídeo de pessoa falando para o celular"
+  - "reels de dica rápida com legenda grande que acompanha a fala"
+  - "vídeo com narração que precisa de legenda chamativa palavra por palavra"
+  - "quero legenda estilo Hormozi, karaokê, palavra que pula"
+nao_serve:
+  - "vídeo sem fala nem texto falado"
+  - "estilo editorial calmo ou minimalista (use revista ou apple-tipografico)"
+---
+
+# Legenda viva
+
+Vídeo de pessoa falando com **legenda que acompanha cada palavra**. O vídeo (ou foto) ocupa a tela e a legenda fica no terço de baixo em **Montserrat 900 caixa alta com contorno preto de 12 px**: páginas de 2 a 3 palavras, cada palavra **pula** (scale 0,6 → 1 com sobra) quando é falada, e a palavra ativa fica **amarela** (ou numa **caixa verde** que desliza de palavra em palavra). A palavra mais importante da frase ganha a tela inteira (`PalavraGigante`). Uma **onda de voz** e um chip de tema são os únicos apoios. Cortes de câmera a cada frase e um cartão final com botão SEGUIR.
+
+## Como montar um vídeo com este kit
+
+1. **Leia o pedido e o roteiro.** Corte cada fala em frases de páginas de 2 a 3 palavras, uma palavra a cada 6–9 quadros. Uma frase = um plano (a palavra aparece no quadro em que é falada).
+2. **Escolha as batidas** em `receita.json` (gancho → problema → virada → prova → cta → 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 = 15.3 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, uma palavra ativa por vez, legenda dentro do terço de baixo da área segura, nenhum quadro parado.
+
+## Elementos
+
+| elemento | o que faz | batidas |
+|---|---|---|
+| QuadroFalante | o vídeo (ou foto) da pessoa falando, em tela cheia, com push-in e véu para ler | toda cena |
+| LegendaPalavra | páginas de 2–3 palavras que pulam no tempo da fala; a ativa em amarelo | todas |
+| LegendaCaixa | uma linha com caixa verde que desliza para a palavra ativa | gancho, prova |
+| PalavraGigante | a palavra-chave da frase na tela inteira, com tremor e contorno | virada, oferta |
+| OndaVoz | 19 barras que dançam como a voz | apoio de qualquer cena |
+| ChipTema | pílula com o assunto e um ponto vermelho | gancho |
+| AssinaturaMarca | cartão final: avatar, nome, handle e botão SEGUIR com toque | marca/cta (sempre a última) |
+| Fundo | preto (só aparece se o vídeo falhar) | todas |
+| Camera | deriva + soco | todas |
+| Cena | janela de cada plano | todas |
+| Efeito, Trilha | sons e trilha do kit (trilha baixa) | todas |
+
+## Proibido
+
+- Mais de uma palavra ativa por vez; legenda com mais de 3 palavras por página.
+- Legenda em cima do rosto ou fora do terço de baixo (y 900–1250).
+- Efeito sonoro em toda palavra (só no destaque da página) e trilha acima de 0,25 com voz.
+- Brilho/neon em letra e fonte que não seja Montserrat.
+- Mais de 1 herói + 1 apoio por plano: legenda + (onda OU chip), nunca os dois.
+- Margem lateral menor que 96 px.