primocode 10.17.1 → 11.0.0

package/kits/retro-70/elementos/RaiosDeSol.tsx

@@ -0,0 +1,27 @@
+// RaiosDeSol: 24 raios alternados (mostarda e laranja) dentro de um círculo de 900 px que gira 0,4° por quadro, com um disco de
+// centro tijolo (aro mostarda) que pode levar texto em Shrikhand. Entra com giro de 90° e scale 0 → 1 com sobra.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, caber, eb} from './base';
+
+export type RaiosDeSolProps = {diametro?: number; x?: number; y?: number; texto?: string; inicio?: number; fim?: number};
+
+export const RaiosDeSol: React.FC<RaiosDeSolProps> = ({diametro = 900, x = 540, y = 720, texto, inicio = 0, fim}) => {
+  const f = useCurrentFrame();
+  const t = f - inicio;
+  if (t < 0 || (fim !== undefined && f >= fim)) return null;
+  const p = eb(t / 16, 1.5);
+  const N = 24;
+  const raios = Array.from({length: N}, (_, i) => {
+    const a0 = (i / N) * 2 * Math.PI, a1 = ((i + 1) / N) * 2 * Math.PI;
+    return <path key={i} d={`M0 0 L${50 * Math.cos(a0)} ${50 * Math.sin(a0)} A50 50 0 0 1 ${50 * Math.cos(a1)} ${50 * Math.sin(a1)} Z`} fill={i % 2 ? COR.laranja : COR.mostarda} />;
+  });
+  const tam = texto ? caber(texto, 120, diametro * 0.3, 400, 0) : 0;
+  return <div style={{position: 'absolute', left: x - diametro / 2, top: y - diametro / 2, width: diametro, height: diametro, transform: `scale(${Math.max(0.001, p)}) rotate(${(1 - Math.min(p, 1)) * 90}deg)`}}>
+    <svg viewBox="-50 -50 100 100" style={{width: '100%', height: '100%', overflow: 'visible'}}>
+      <g transform={`rotate(${t * 0.4})`}>{raios}</g>
+      <circle r="21" fill={COR.mostarda} /><circle r="18" fill={COR.tijolo} />
+    </svg>
+    {texto && <div style={{position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FONTE.titulo, fontSize: tam, color: COR.creme, transform: `rotate(${-(1 - Math.min(p, 1)) * 90}deg)`}}>{texto}</div>}
+  </div>;
+};

package/kits/retro-70/elementos/Som.tsx

@@ -0,0 +1,38 @@
+// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`, pacote organic-wood: madeira e marimba); trilha de 9 s, 104 bpm, quente e balançada.
+// 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/solar-104bpm.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/retro-70/elementos/TituloGordo.tsx

@@ -0,0 +1,28 @@
+// TituloGordo: título Shrikhand marrom com 3 sombras duras em camadas (`6px 6px` tijolo, `12px 12px` laranja, `18px 18px` mostarda).
+// Cada linha cai de −500 px com sobra e amassa como borracha (scaleY 1,35 → 0,88 → 1, scaleX inversa), 9 quadros uma da outra.
+// `*palavra*` vai em tijolo.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, caber, eb, pedacos, textoLimpo} from './base';
+
+export const SOMBRAS = `6px 6px 0 ${COR.tijolo}, 12px 12px 0 ${COR.laranja}, 18px 18px 0 ${COR.mostarda}`;
+export type TituloGordoProps = {linhas: string[]; inicio?: number; intervalo?: number; y?: number; tamanho?: number; fim?: number};
+
+export const TituloGordo: React.FC<TituloGordoProps> = ({linhas, inicio = 0, intervalo = 9, y = 700, tamanho = 230, fim}) => {
+  const f = useCurrentFrame();
+  if (fim !== undefined && f >= fim) return null;
+  const tam = Math.min(...linhas.map((l) => caber(textoLimpo(l), tamanho, LARGURA_UTIL - 40, 400, 0)));
+  const alt = tam * 1.12;
+  const topo = y - (linhas.length * alt) / 2;
+  return <div style={{position: 'absolute', inset: 0}}>
+    {linhas.map((l, i) => {
+      const t = f - (inicio + i * intervalo);
+      if (t < 0) return null;
+      const p = eb(t / 14, 2.2);
+      const sy = 1.35 - 0.35 * p, sx = 1 / Math.sqrt(Math.max(0.5, sy));
+      return <div key={i} style={{position: 'absolute', left: SEGURA.lado, width: LARGURA_UTIL, top: topo + i * alt, height: alt, lineHeight: `${alt}px`, textAlign: 'center', fontFamily: FONTE.titulo, fontSize: tam, whiteSpace: 'nowrap', color: COR.marrom, textShadow: SOMBRAS, transformOrigin: '50% 100%', transform: `translateY(${(1 - Math.min(p, 1)) * -500}px) scale(${sx}, ${sy})`}}>
+        {pedacos(l).map((s, j) => <span key={j} style={{color: s.d ? COR.tijolo : COR.marrom}}>{s.t}</span>)}
+      </div>;
+    })}
+  </div>;
+};

package/kits/retro-70/elementos/base.ts

@@ -0,0 +1,73 @@
+// Base do kit retro-70: 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/shrikhand.woff2';
+import fonte1 from '../assets/fontes/fredoka.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: 96};
+export const LARGURA_UTIL = LARGURA - SEGURA.lado * 2; // 888 px
+
+// ---------- cor ----------
+export const COR = {
+  creme: '#F6E3B8',
+  laranja: '#E8601C',
+  mostarda: '#F2A900',
+  tijolo: '#B8341B',
+  marrom: '#4A2511'
+};
+
+// ---------- fonte ----------
+// Nome de família com o prefixo do kit ("R7 ..."), pra não colidir com outro kit no mesmo estúdio.
+export const FONTE = {
+  titulo: '"R7 Shrikhand", Georgia, serif',
+  apoio: '"R7 Fredoka", Arial Rounded MT Bold, Arial, sans-serif',
+};
+type G = {__kit_retro_70?: boolean};
+if (typeof document !== 'undefined' && !(globalThis as G).__kit_retro_70) {
+  (globalThis as G).__kit_retro_70 = true;
+  const h = delayRender('retro-70: fontes');
+  Promise.all([
+    new FontFace('R7 Shrikhand', `url(${fonte0}) format('woff2')`, {weight: '400', style: 'normal'}).load(),
+    new FontFace('R7 Fredoka', `url(${fonte1}) format('woff2')`, {weight: '500 700', 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 (104 bpm) em quadros */
+export const BATIDA = 17.31;
+
+// ---------- 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, familia = 'R7 Shrikhand'): 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, familia = 'R7 Shrikhand') => {
+  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/retro-70/elementos/index.ts

@@ -0,0 +1,17 @@
+// Tudo que o kit retro-70 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 {TituloGordo} from './TituloGordo';
+export {ArcoListras} from './ArcoListras';
+export {RaiosDeSol} from './RaiosDeSol';
+export {FotoArredondada} from './FotoArredondada';
+export {CartaoData} from './CartaoData';
+export {Flor70} from './Flor70';
+export {FaixaOnda} from './FaixaOnda';
+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/retro-70/exemplos/logo-girassol.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path d="M10 110V60a50 50 0 0 1 100 0v50z" fill="#B8341B"/><path d="M30 110V60a30 30 0 0 1 60 0v50z" fill="#E8601C"/><path d="M48 110V62a12 12 0 0 1 24 0v48z" fill="#F2A900"/></svg>

package/kits/retro-70/exemplos/plano.json

@@ -0,0 +1,50 @@
+{
+  "kit": "retro-70",
+  "roteiro": "exemplos/roteiro.md",
+  "duracao": 240,
+  "trilha": {"volume": 0.5},
+  "cenas": [
+    {
+      "batida": "gancho", "de": 0, "ate": 50, "entrada": "nenhuma",
+      "camadas": [
+        {"elemento": "Flor70", "props": {"pontos": [{"x": 190, "y": 330, "d": 150, "cor": "mostarda"}, {"x": 880, "y": 1130, "d": 130, "cor": "laranja"}], "inicio": 16}},
+        {"elemento": "TituloGordo", "props": {"linhas": ["bora", "*curtir*"], "inicio": 2, "intervalo": 9, "y": 700, "tamanho": 260}}
+      ],
+      "socos": [11],
+      "sons": [{"som": "whoosh-entra", "em": 0}, {"som": "pop-palavra", "em": 4}, {"som": "impacto", "em": 13}, {"som": "clique", "em": 18}]
+    },
+    {
+      "batida": "virada", "de": 50, "ate": 98, "entrada": "subir",
+      "camadas": [
+        {"elemento": "ArcoListras", "props": {"texto": "verão", "chao": 1180, "altura": 900, "inicio": 2}},
+        {"elemento": "FaixaOnda", "props": {"y": 1240, "inicio": 20}}
+      ],
+      "sons": [{"som": "whoosh-entra", "em": -1}, {"som": "pop-cartao", "em": 4}, {"som": "pop-cartao", "em": 12}, {"som": "swoosh", "em": 20}]
+    },
+    {
+      "batida": "prova", "de": 98, "ate": 146, "entrada": "direita",
+      "camadas": [
+        {"elemento": "FotoArredondada", "props": {"src": "fotos/foto-02.jpg", "forma": "arco", "largura": 640, "altura": 860, "x": 500, "y": 700, "inicio": 2, "foco": "50% 50%"}},
+        {"elemento": "FaixaOnda", "props": {"y": 1240, "inicio": 14}}
+      ],
+      "sons": [{"som": "swoosh", "em": -1}, {"som": "pop-cartao", "em": 8}, {"som": "clique", "em": 16}]
+    },
+    {
+      "batida": "data", "de": 146, "ate": 192, "entrada": "zoom",
+      "camadas": [
+        {"elemento": "RaiosDeSol", "props": {"diametro": 1000, "y": 720, "inicio": 0}},
+        {"elemento": "CartaoData", "props": {"dia": "14", "mes": "dez", "local": "Parque do Lago", "hora": "a partir das 11h", "y": 740, "inicio": 6}}
+      ],
+      "socos": [8],
+      "sons": [{"som": "swoosh", "em": -1}, {"som": "impacto", "em": 10}, {"som": "pop-cartao", "em": 16}]
+    },
+    {
+      "batida": "marca", "de": 192, "ate": 240, "entrada": "subir",
+      "camadas": [
+        {"elemento": "AssinaturaMarca", "props": {"nome": "Girassol", "icone": "logo-girassol.svg", "detalhe": "festival de verão", "endereco": "girassol.exemplo", "inicio": 2, "y": 700}},
+        {"elemento": "Flor70", "props": {"pontos": [{"x": 180, "y": 350, "d": 140, "cor": "laranja"}, {"x": 900, "y": 1180, "d": 150, "cor": "mostarda"}], "inicio": 18}}
+      ],
+      "sons": [{"som": "whoosh-entra", "em": -1}, {"som": "pop-palavra", "em": 8}, {"som": "assinatura", "em": 10}, {"som": "clique", "em": 34}]
+    }
+  ]
+}

package/kits/retro-70/exemplos/roteiro.md

@@ -0,0 +1,19 @@
+# Roteiro de demonstração · "Girassol" (festival fictício)
+
+Pedido: *"um reels de 8 s do festival Girassol, 14 de dezembro, no Parque do Lago, a partir das 11h. Estilo anos 70, caloroso."*
+
+Sem narração: os cortes seguem a trilha (104 bpm, 1 batida = 17,3 quadros), com pausa depois de cada golpe.
+
+| # | batida | tempo (quadros) | na tela | elemento | som |
+|---|---|---|---|---|---|
+| 1 | gancho | 0–50 | "BORA / *CURTIR*" cai amassando + 2 margaridas | TituloGordo + Flor70 | whoosh, pop, impacto |
+| 2 | virada | 50–98 | arcos de listras sobem, "verão" no miolo + onda de listras | ArcoListras + FaixaOnda | pops de cartão, swoosh |
+| 3 | prova | 98–146 | foto em arco com moldura e sombras + onda | FotoArredondada + FaixaOnda | swoosh, pop, clique |
+| 4 | data | 146–192 | raios de sol girando + cartão "14 / DEZ / Parque do Lago" | RaiosDeSol + CartaoData | swoosh, impacto, pop |
+| 5 | marca | 192–240 | ícone de arcos + "Girassol" + "festival de verão" + endereço + 2 margaridas | AssinaturaMarca + Flor70 | pop, assinatura, clique |
+
+Como a IA chegou nisso:
+1. Cortou o pedido em frases de conversa ("bora curtir") e deu um herói por plano, com margaridas ou onda como único apoio.
+2. Usou os arcos como virada (o nome do verão no miolo), a foto em arco como prova e o cartão marrom para a data.
+3. Deixou creme vazio em volta de cada herói e meio segundo de pausa depois de cada queda.
+4. O `preview.tsx` passa esse plano para `Montagem`, que só usa os elementos do kit.

package/kits/retro-70/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-retro-70`.
+import React from 'react';
+import {Montagem, Plano} from './elementos';
+import plano from './exemplos/plano.json';
+import f2 from './exemplos/fotos/foto-02.jpg';
+import f3 from './exemplos/fotos/foto-03.jpg';
+import logo from './exemplos/logo-girassol.svg';
+
+const arquivos: Record<string, string> = {
+  'fotos/foto-02.jpg': f2, 'fotos/foto-03.jpg': f3,
+  'logo-girassol.svg': logo,
+};
+
+const Preview: React.FC = () => <Montagem plano={plano as Plano} arquivos={arquivos} />;
+
+export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 40, Componente: Preview};

package/kits/retro-70/receita.json

@@ -0,0 +1,172 @@
+{
+  "kit": "retro-70",
+  "fps": 30,
+  "batida_trilha_quadros": 17.31,
+  "duracao_video_s": [
+    6,
+    45
+  ],
+  "ordem_sugerida": [
+    "gancho",
+    "virada",
+    "prova",
+    "data",
+    "oferta",
+    "marca"
+  ],
+  "batidas": [
+    {
+      "nome": "gancho",
+      "obrigatoria": true,
+      "duracao": [
+        40,
+        75
+      ],
+      "elementos": [
+        "TituloGordo",
+        "Flor70"
+      ],
+      "entrada": [
+        "nenhuma"
+      ],
+      "sons": [
+        "whoosh-entra",
+        "pop-palavra",
+        "impacto"
+      ],
+      "nota": "frase amigável em 2 linhas que caem amassando; a segunda em tijolo."
+    },
+    {
+      "nome": "virada",
+      "obrigatoria": true,
+      "duracao": [
+        45,
+        75
+      ],
+      "elementos": [
+        "ArcoListras",
+        "FaixaOnda"
+      ],
+      "entrada": [
+        "subir"
+      ],
+      "sons": [
+        "pop-cartao",
+        "swoosh"
+      ],
+      "nota": "os arcos sobem e o nome do evento/produto fica no miolo."
+    },
+    {
+      "nome": "prova",
+      "obrigatoria": true,
+      "duracao": [
+        45,
+        75
+      ],
+      "elementos": [
+        "FotoArredondada",
+        "FaixaOnda",
+        "Flor70"
+      ],
+      "entrada": [
+        "direita"
+      ],
+      "sons": [
+        "pop-cartao",
+        "clique"
+      ],
+      "nota": "foto em arco com onda de listras embaixo."
+    },
+    {
+      "nome": "data",
+      "obrigatoria": true,
+      "duracao": [
+        45,
+        75
+      ],
+      "elementos": [
+        "CartaoData",
+        "RaiosDeSol"
+      ],
+      "entrada": [
+        "zoom"
+      ],
+      "sons": [
+        "swoosh",
+        "impacto"
+      ],
+      "nota": "dia gigante no cartão, raios de sol girando atrás."
+    },
+    {
+      "nome": "oferta",
+      "obrigatoria": false,
+      "duracao": [
+        36,
+        66
+      ],
+      "elementos": [
+        "TituloGordo",
+        "RaiosDeSol"
+      ],
+      "entrada": [
+        "zoom"
+      ],
+      "sons": [
+        "subida",
+        "impacto"
+      ],
+      "nota": "GRÁTIS / 2 POR 1 no título gordo."
+    },
+    {
+      "nome": "marca",
+      "obrigatoria": true,
+      "duracao": [
+        48,
+        90
+      ],
+      "elementos": [
+        "AssinaturaMarca",
+        "Flor70"
+      ],
+      "entrada": [
+        "subir"
+      ],
+      "sons": [
+        "assinatura",
+        "clique"
+      ],
+      "nota": "sempre a última: ícone de arcos, nome gordo, tagline, endereço."
+    }
+  ],
+  "transicoes": [
+    {
+      "nome": "subir",
+      "quadros": 12,
+      "como": "entra 140 px de baixo com desfoque 5 px; a anterior sobe 140 px e some"
+    },
+    {
+      "nome": "zoom",
+      "quadros": 12,
+      "como": "entra de 1,9x para 1"
+    },
+    {
+      "nome": "direita",
+      "quadros": 12,
+      "como": "entra 406 px da direita"
+    },
+    {
+      "nome": "nenhuma",
+      "quadros": 0,
+      "como": "sem movimento de janela (gancho)"
+    }
+  ],
+  "camera": {
+    "deriva": "sempre",
+    "socos": "cada título que cai e cada cartão"
+  },
+  "trilha": {
+    "arquivo": "assets/trilha/solar-104bpm.mp3",
+    "volume": 0.5,
+    "com_narracao": 0.25
+  }
+}

package/kits/retro-70/regras/area-segura.md

@@ -0,0 +1,20 @@
+# Área segura (9:16, 1080×1920)
+
+- Tudo que se lê fica entre **y = 168** e **y = 1330** e entre **x = 96** e **x = 984** (888 px úteis, margem de 8,9%).
+- 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 |
+|---|---|
+| título gordo (centro do bloco) | 700 |
+| arcos de listras (base do chão) | 1180 |
+| texto no arco | 1000 |
+| raios de sol (centro) | 720 |
+| foto em arco (centro) | 700 |
+| cartão de data (centro) | 720 |
+| onda de listras | 1260 |
+| margaridas | 260–1250, fora do herói |
+| marca (nome) | 700 |
+
+- Margem de 96 px também para os apoios; o creme vazio é parte do estilo.
+- Respiro: 35–45% do quadro vazio, 1 herói + no máximo 1 apoio por plano, nada encostando na borda, e uma pausa de 15 a 24 quadros depois de cada golpe grande.

package/kits/retro-70/regras/cor.md

@@ -0,0 +1,14 @@
+# Cor
+
+| token | hex | uso |
+|---|---|---|
+| `creme` | `#F6E3B8` | chão e texto sobre escuro |
+| `laranja` | `#E8601C` | arco, sombra do meio, raios |
+| `mostarda` | `#F2A900` | arco, sombra de trás, pétalas, botão |
+| `tijolo` | `#B8341B` | arco de fora, 1ª sombra, destaque |
+| `marrom` | `#4A2511` | texto principal, cartão, centro da flor |
+
+- Sombras do tipo: `6px 6px 0 #B8341B, 12px 12px 0 #E8601C, 18px 18px 0 #F2A900` (duras, sem desfoque).
+- Foto: `sepia(0.55) saturate(1.35) hue-rotate(-12deg) contrast(1.05)` + véu laranja multiply a 22%.
+- Nada de preto, branco puro, azul ou degradê. Cantos sempre redondos (raio ≥ 40 px).
+- O cliente pode trocar `laranja` e `mostarda`; `marrom` e `creme` ficam.

package/kits/retro-70/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,02 ± 0,014 (período 110 quadros), deslize ±10 × ±12 px, giro ±0,29°; soco de +2,5% que cai em 8 quadros a cada corte.
+- Entrada de cena: 12 quadros; saída sobrepõe 10 quadros com a próxima. Corte ou troca a cada 0,6–1,5 s (18–45 quadros).
+
+| movimento | quadros | valores |
+|---|---|---|
+| título cai amassando | 14 | translateY −500 → 0 com `eb`; scaleY 1,35 → 0,88 → 1 (borracha); 9 quadros entre linhas |
+| arcos sobem | 16 | cada faixa cresce do chão (scaleY 0 → 1 com `eb`), 4 quadros entre faixas, de fora para dentro |
+| raios giram | contínuo | 0,4° por quadro; entra com giro de 90° e scale 0 → 1 com `eb` |
+| foto em arco | 16 | scale 0,8 → 1 e giro −5° → 2° com `eb`; depois balança ±1,5° |
+| cartão de data | 16 | sobe 600 px com `eb`, amassa 1,3 → 0,9 → 1 e gira −3° |
+| margaridas | contínuo | giram 1,2° por quadro e pulsam 0,9 → 1,1 (período 36 quadros) |
+| onda de listras | 20 | revela da esquerda (`e5`); a fase da onda corre 0,08 rad por quadro |
+| saída de cena | 10 | sobe 140 px e some, sobrepondo 10 quadros |

package/kits/retro-70/regras/ritmo.md

@@ -0,0 +1,15 @@
+# Ritmo
+
+- 104 bpm → 1 batida = **17.31 quadros** (0.577 s). Cortes caem nas batidas; o título cai no tempo forte e assenta por 0,5 s.
+- Tempo mínimo de leitura: **40** quadros por frase (≈ 0,45 s por palavra curta).
+
+| batida | duração (s) | quadros |
+|---|---|---|
+| gancho | 1.3–2.5 | 40–75 |
+| virada | 1.5–2.5 | 45–75 |
+| prova | 1.5–2.5 | 45–75 |
+| data | 1.5–2.5 | 45–75 |
+| oferta | 1.2–2.2 | 36–66 |
+| marca | 1.6–3.0 | 48–90 |
+
+- Vídeo de demo: 8 s = 240 quadros (13.9 batidas).

package/kits/retro-70/regras/som.md

@@ -0,0 +1,21 @@
+# Som
+
+- Trilha: `assets/trilha/solar-104bpm.mp3` (9 s, 104 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 warm-major, 104 bpm, tom C, progressão warm-lift, lead marimba, bateria soft, comp offbeat) — 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 organic-wood: madeira e marimba); trilha de 9 s, 104 bpm, quente e balançada.
+
+| som | volume | quando |
+|---|---|---|
+| `pop-palavra` | 1 | linha do título que cai |
+| `pop-cartao` | 0.9 | arco, foto ou cartão que chega |
+| `clique` | 0.8 | margarida e onda de listras |
+| `impacto` | 0.9 | a palavra em tijolo e o cartão de data |
+| `whoosh-entra` | 0.9 | entrada de cena (−1 quadro) |
+| `swoosh` | 1 | raios de sol e onda |
+| `subida` | 0.7 | 1,3 s antes do golpe 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/retro-70/regras/tipografia.md

@@ -0,0 +1,17 @@
+# Tipografia
+
+Shrikhand (400, única espessura) para tudo que é título; Fredoka 600 para rótulos, mês, local e endereço.
+
+| papel | tamanho (px) | máx. caracteres | peso · tracking · caixa |
+|---|---|---|---|
+| título gordo (linha) | 230 (encolhe até 110) | 10 por linha | Shrikhand · marrom · 3 sombras em camadas |
+| dia no cartão | 380 | 2 dígitos | Shrikhand · mostarda |
+| mês / rótulo | 90 | 10 | Fredoka 700 · 0,2 em · MAIÚSCULAS |
+| local / tagline | 54 | 30 | Fredoka 600 |
+| texto no arco | 130 (encolhe) | 8 | Shrikhand · marrom |
+| endereço | 52 | 22 | Fredoka 600 · marrom em pílula mostarda |
+| nome na marca | 190 (encolhe) | 10 | Shrikhand · marrom · 3 sombras |
+
+- Texto que passa da largura útil (888 px) **encolhe sozinho** (`caber()` em `elementos/base.ts`). Nunca palavra cortada.
+- Destaque `*palavra*` = tijolo no lugar do marrom.
+- Margem lateral de 96 px; o tipo nunca passa de 888 px com as sombras.

package/kits/revista/SKILL.md

@@ -0,0 +1,52 @@
+---
+slug: revista
+nome: Revista
+descricao: páginas duplas que viram, foto grande, serifa Cormorant elegante em romano e itálico, vinho sobre creme, muito respiro
+familia: Tipografia em movimento
+versao: 1
+quando:
+  - "lançamento de coleção, produto de moda, decoração ou beleza"
+  - "matéria editorial, convite elegante ou anúncio premium com foto grande"
+  - "vídeo calmo e sofisticado com uma citação ou frase de efeito"
+  - "quero cara de revista, páginas duplas, serifa elegante"
+nao_serve:
+  - "vídeo rápido, barulhento ou divertido"
+  - "fundo escuro, neon ou tipo gigante em caixa alta"
+---
+
+# Revista
+
+Editorial de revista em movimento. Creme (`#F6F1E9`) com **muito respiro**: um herói e no máximo um apoio por plano, margens de 96 px, o quadro nunca lotado. Título em **Cormorant Garamond 700 romano + itálico em vinho** que fecha o espaçamento entre letras; foto grande que **abre por cortina**; **página dupla que vira em 3D** (a página da direita gira sobre a lombada revelando a próxima); citação em itálico palavra por palavra; folio pequeno com número de página e seção. A câmera respira devagar e só dá um toque suave em cada corte. Cada golpe tem uma pausa de 0,5 a 0,8 s para o olho descansar.
+
+## Como montar um vídeo com este kit
+
+1. **Leia o pedido e o roteiro.** Corte cada fala em frases de uma frase de 2 a 5 palavras (título) ou uma citação de até 8 palavras. Uma frase = um plano (cabe em 45 a 60 quadros, mais a pausa).
+2. **Escolha as batidas** em `receita.json` (gancho → virada → prova → depoimento → oferta → 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 = 18.0 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, metade do quadro vazia, um herói por plano, nenhum quadro parado.
+
+## Elementos
+
+| elemento | o que faz | batidas |
+|---|---|---|
+| TituloEditorial | linhas Cormorant com a palavra em itálico vinho; o espaçamento fecha | gancho, virada, oferta |
+| FotoSangrando | foto grande revelada por cortina, com push-in, legenda e rótulo | prova, virada |
+| PaginaDupla | página dupla (foto + texto) cuja página da direita vira e revela a próxima | prova, lista |
+| CitacaoGrande | aspas vinho + citação em itálico palavra por palavra + autor | depoimento |
+| ColagemFotos | 3 fotos sobrepostas com giros pequenos e deriva | prova, volume |
+| Folio | número de página, seção e filete finos | apoio de qualquer cena |
+| AssinaturaMarca | nome em caixa alta espaçada entre filetes vinho + frase em itálico + endereço | marca (sempre a última) |
+| Fundo | creme com luz suave que passeia | todas |
+| Camera | deriva suave + toque | todas |
+| Cena | janela de cada plano | todas |
+| Efeito, Trilha | sons e trilha do kit | todas |
+
+## Proibido
+
+- Mais de 1 herói + 1 apoio por plano; quadro lotado (o vazio é de 35 a 45%).
+- Fonte sem serifa fora dos rótulos Jost; caixa alta em título (só no nome da marca).
+- Elemento encostando na borda ou margem menor que 96 px.
+- Brilho, neon, glitch, tremor, corte seco ou som alto: tudo é calmo.
+- Foto saturada ou com filtro pesado.
+- Texto fora da área segura (168–1330 px na vertical).