primocode 10.17.0 → 10.19.0

package/kits/metal-liquido/elementos/PilulaCromo.tsx

@@ -0,0 +1,23 @@
+// PilulaCromo: pílula espelhada (ou verde-ácido) com uma linha. Cresce com overshoot, um brilho cruza uma vez
+// e depois ela flutua ±6 px. Serve pra data, preço, benefício e chamada.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, CROMO, FAM_A, FONTE_A, caber, larguraTexto, c01, ob, seg} from './base';
+
+export type PilulaCromoProps = {
+  texto: string;
+  x?: number;
+  y?: number;
+  tamanho?: number;
+  /** 'cromo' (espelhada, letra escura) ou 'lima' (verde-ácido, letra escura) */
+  tipo?: 'cromo' | 'lima';
+  inicio?: number;
+};
+
+export const PilulaCromo: React.FC<PilulaCromoProps> = ({texto, x = 540, y = 1120, tamanho = 64, tipo = 'cromo', inicio = 0}) => {
+  const f = useCurrentFrame() - inicio;
+  if (f < -1) return null;
+  const t = caber(texto.toUpperCase(), tamanho, FAM_A, 780, 800, 0.04), w = larguraTexto(texto.toUpperCase(), t, FAM_A, 800, 0.04) + t * 1.8, h = t * 2.3;
+  const p = ob(seg(f, 0, 14), 1.8), brilho = seg(f, 10, 34) * 150 - 25;
+  return <div style={{position: 'absolute', left: x - w / 2, top: y - h / 2 + Math.sin(f / 18) * 6, width: w, height: h, borderRadius: h, transform: `scale(${p})`, opacity: c01((f + 1) / 3), backgroundImage: tipo === 'lima' ? `linear-gradient(105deg, transparent ${brilho - 10}%, rgba(255,255,255,0.8) ${brilho}%, transparent ${brilho + 10}%), linear-gradient(180deg, #E6FF8F, ${COR.lima} 50%, #8FC21A)` : `linear-gradient(105deg, transparent ${brilho - 10}%, rgba(255,255,255,0.95) ${brilho}%, transparent ${brilho + 10}%), ${CROMO}`, boxShadow: 'inset 0 -6px 12px rgba(0,0,0,0.25), inset 0 4px 8px rgba(255,255,255,0.6)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FONTE_A, fontWeight: 800, fontSize: t, letterSpacing: '0.04em', color: COR.grafite, whiteSpace: 'nowrap'}}>{texto.toUpperCase()}</div>;
+};

package/kits/metal-liquido/elementos/Som.tsx

@@ -0,0 +1,33 @@
+// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`), trilha de `music make`.
+// Ver assets/ASSETS.md. 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 liquido from '../assets/sons/liquido.mp3';
+import cromo from '../assets/sons/cromo.mp3';
+import quique from '../assets/sons/quique.mp3';
+import whoosh from '../assets/sons/whoosh.mp3';
+import varre from '../assets/sons/varre.mp3';
+import clique from '../assets/sons/clique.mp3';
+import subida from '../assets/sons/subida.mp3';
+import assinatura from '../assets/sons/assinatura.mp3';
+import trilha from '../assets/trilha/sombrio-114bpm.mp3';
+
+export const SONS = {'liquido': liquido, 'cromo': cromo, 'quique': quique, 'whoosh': whoosh, 'varre': varre, 'clique': clique, 'subida': subida, 'assinatura': assinatura} as const;
+export type NomeSom = keyof typeof SONS;
+
+// volume de cada efeito (0..1) já calibrado contra a trilha
+const VOLUME: Record<NomeSom, number> = {'liquido': 0.9, 'cromo': 0.85, 'quique': 0.85, 'whoosh': 0.85, 'varre': 0.7, 'clique': 0.8, 'subida': 0.6, '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/metal-liquido/elementos/TituloCromo.tsx

@@ -0,0 +1,32 @@
+// TituloCromo: linhas em Unbounded 900 pintadas com o horizonte do cromo (céu claro, linha escura, chão claro).
+// Cada linha sobe com desfoque e tracking que fecha; um brilho branco varre as letras a cada 56 quadros.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {CROMO, FAM_A, FONTE_A, caber, c01, e5, lerp, ob, seg, LARGURA_UTIL} from './base';
+
+export type TituloCromoProps = {
+  linhas: string[];
+  /** centro vertical do bloco */
+  y?: number;
+  tamanho?: number;
+  inicio?: number;
+  intervalo?: number;
+  /** quadro em que sai (sem isso fica até o fim da cena) */
+  fim?: number;
+};
+
+export const TituloCromo: React.FC<TituloCromoProps> = ({linhas, y = 700, tamanho = 190, inicio = 0, intervalo = 9, fim}) => {
+  const f = useCurrentFrame();
+  const sai = fim === undefined ? 0 : e5(seg(f, fim, fim + 12));
+  if (sai >= 1) return null;
+  const tam = Math.min(...linhas.map((l) => caber(l, tamanho, FAM_A, LARGURA_UTIL, 900, -0.02)));
+  const passo = tam * 1.12, topo = y - ((linhas.length - 1) * passo) / 2;
+  const ciclo = ((f - inicio) % 56) / 40; // 0..1.4: a varredura dura 40 dos 56 quadros
+  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `scale(${1 + sai * 0.2})`, transformOrigin: `50% ${y}px`}}>
+    {linhas.map((l, i) => {
+      const em = inicio + i * intervalo, p = ob(seg(f, em, em + 18), 1.5), q = e5(seg(f, em, em + 18));
+      const varre = c01(ciclo) * 160 - 30;
+      return <div key={i} style={{position: 'absolute', left: 0, width: 1080, top: topo + i * passo - tam * 0.6, height: tam * 1.2, textAlign: 'center', whiteSpace: 'nowrap', fontFamily: FONTE_A, fontWeight: 900, fontSize: tam, lineHeight: 1.2, letterSpacing: `${lerp(0.12, -0.02, q)}em`, transform: `translateY(${(1 - p) * 140}px)`, opacity: c01((f - em + 1) / 4), filter: q < 1 ? `blur(${(1 - q) * 14}px)` : undefined, backgroundImage: `linear-gradient(105deg, transparent ${varre - 10}%, rgba(255,255,255,0.95) ${varre}%, transparent ${varre + 10}%), ${CROMO}`, WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent', WebkitTextFillColor: 'transparent'}}>{l}</div>;
+    })}
+  </div>;
+};

package/kits/metal-liquido/elementos/base.ts

@@ -0,0 +1,94 @@
+// Base do kit metal-liquido: 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 fonteA from '../assets/fontes/unbounded-latin.woff2';
+import fonteB from '../assets/fontes/grotesk-latin.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 = {
+  grafite: '#0C0D12',
+  grafiteClaro: '#1A1D27',
+  cromo1: '#F4F7FC',
+  cromo2: '#C9D0DE',
+  cromo3: '#727A8E',
+  cromo4: '#12141B',
+  lima: '#C8FF3D',
+  gelo: '#8FD3FF',
+};
+
+/** fundo do cromo: horizonte (céu claro, linha escura, chão claro) */
+export const CROMO = `linear-gradient(180deg, ${'#F4F7FC'} 0%, ${'#C9D0DE'} 24%, ${'#727A8E'} 46%, ${'#12141B'} 50%, ${'#8E96AA'} 64%, ${'#F4F7FC'} 100%)`;
+
+// ---------- fonte ----------
+// Famílias com o prefixo do kit, pra não colidir com outro kit no mesmo estúdio.
+export const FAM_A = 'ML Unbounded';
+export const FONTE_A = '"ML Unbounded", Impact, sans-serif';
+export const FAM_B = 'ML Space Grotesk';
+export const FONTE_B = '"ML Space Grotesk", system-ui, sans-serif';
+
+// As medidas de texto (caber) só valem depois das fontes: a Montagem espera `esperarFontes()` antes de desenhar.
+const TOTAL_FONTES = 2;
+let nProntas = 0;
+const aguardando: (() => void)[] = [];
+const marcarFonte = () => {nProntas++; if (nProntas >= TOTAL_FONTES) aguardando.splice(0).forEach((r) => r());};
+export const fontesProntas = () => nProntas >= TOTAL_FONTES || typeof document === 'undefined';
+export const esperarFontes = () => new Promise<void>((res) => {if (fontesProntas()) res(); else aguardando.push(res);});
+if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__mlA) {
+  (globalThis as Record<string, unknown>).__mlA = true;
+  const hA = delayRender('metal-liquido: ML Unbounded');
+  new FontFace('ML Unbounded', `url(${fonteA}) format('woff2')`, {weight: '600 900', style: 'normal'}).load()
+    .then((ff) => {document.fonts.add(ff); marcarFonte(); continueRender(hA);})
+    .catch(() => {marcarFonte(); continueRender(hA);});
+}
+if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__mlB) {
+  (globalThis as Record<string, unknown>).__mlB = true;
+  const hB = delayRender('metal-liquido: ML Space Grotesk');
+  new FontFace('ML Space Grotesk', `url(${fonteB}) format('woff2')`, {weight: '500 700', style: 'normal'}).load()
+    .then((ff) => {document.fonts.add(ff); marcarFonte(); continueRender(hB);})
+    .catch(() => {marcarFonte(); continueRender(hB);});
+}
+
+// ---------- 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, ≈ cubic-bezier(.2,.8,.2,1) */
+export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
+/** saída com overshoot (passa de 1 e volta): toda entrada do kit usa esta ou a e5 */
+export const ob = (t: number, s = 1.7) => {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;
+/** pseudo-aleatório estável (0..1) a partir de um inteiro */
+export const rnd = (n: number) => {const x = Math.sin(n * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x);};
+/** uma batida da trilha do kit em quadros */
+export const BATIDA = 15.789;
+
+// ---------- medida de texto ----------
+let canvas: HTMLCanvasElement | null = null;
+const cache = new Map<string, number>();
+export const larguraTexto = (texto: string, tamanho: number, fam: string, peso = 800, trackingEm = 0): number => {
+  const chave = `${texto}|${tamanho}|${fam}|${peso}|${trackingEm}`;
+  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 "${fam}"`;
+  ctx.font = fonte;
+  const w = ctx.measureText(texto).width + texto.length * trackingEm * tamanho;
+  if (fontesProntas() && 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, fam: string, largura = LARGURA_UTIL, peso = 800, trackingEm = 0) => {
+  const w = larguraTexto(texto, tamanho, fam, peso, trackingEm);
+  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, '');
+/** corta "a *b* c" em [{t:'a ', d:false}, {t:'b', d:true}, {t:' c', d:false}] */
+export const partes = (t: string) => t.split('*').map((p, i) => ({t: p, d: i % 2 === 1})).filter((p) => p.t.length > 0);

package/kits/metal-liquido/elementos/index.ts

@@ -0,0 +1,15 @@
+// Tudo que o kit metal-liquido 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 {BolhasCromadas} from './BolhasCromadas';
+export {TituloCromo} from './TituloCromo';
+export {EsferaCromo} from './EsferaCromo';
+export {AnelCromo} from './AnelCromo';
+export {PilulaCromo} from './PilulaCromo';
+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/metal-liquido/exemplos/logo-mercurio.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#F4F7FC"/><stop offset=".46" stop-color="#727A8E"/><stop offset=".5" stop-color="#12141B"/><stop offset="1" stop-color="#F4F7FC"/></linearGradient></defs><circle cx="100" cy="100" r="88" fill="#0C0D12" stroke="url(#g)" stroke-width="10"/><path d="M58 138V66l42 46 42-46v72" fill="none" stroke="url(#g)" stroke-width="14" stroke-linejoin="round" stroke-linecap="round"/></svg>

package/kits/metal-liquido/exemplos/plano.json

@@ -0,0 +1,48 @@
+{
+  "kit": "metal-liquido",
+  "roteiro": "exemplos/roteiro.md",
+  "duracao": 240,
+  "trilha": {"volume": 0.55},
+  "cenas": [
+    {"batida": "gancho", "de": 0, "ate": 44, "entrada": "nenhuma",
+     "camadas": [
+       {"elemento": "BolhasCromadas", "props": {"x": 540, "y": 700, "raio": 340, "quantidade": 5, "inicio": 0, "fusao": 28}},
+       {"elemento": "PilulaCromo", "props": {"texto": "novo", "x": 540, "y": 1180, "tamanho": 80, "tipo": "lima", "inicio": 32}}
+     ],
+     "socos": [32],
+     "sons": [{"som": "subida", "em": 0}, {"som": "liquido", "em": 30}, {"som": "clique", "em": 32}]},
+    {"batida": "virada", "de": 44, "ate": 88, "entrada": "zoom",
+     "camadas": [
+       {"elemento": "TituloCromo", "props": {"linhas": ["MERCÚRIO", "ONE"], "y": 700, "tamanho": 200, "inicio": 2, "intervalo": 9}}
+     ],
+     "socos": [3, 12],
+     "sons": [{"som": "whoosh", "em": -1}, {"som": "cromo", "em": 3}, {"som": "cromo", "em": 12}, {"som": "varre", "em": 28}]},
+    {"batida": "prova", "de": 88, "ate": 126, "entrada": "subir",
+     "camadas": [
+       {"elemento": "EsferaCromo", "props": {"x": 540, "y": 640, "diametro": 620, "inicio": 0, "queda": 10}},
+       {"elemento": "PilulaCromo", "props": {"texto": "40 h de bateria", "x": 540, "y": 1150, "tamanho": 76, "inicio": 24}}
+     ],
+     "socos": [10, 22],
+     "sons": [{"som": "quique", "em": 10}, {"som": "clique", "em": 24}]},
+    {"batida": "prova", "de": 126, "ate": 160, "entrada": "direita",
+     "camadas": [
+       {"elemento": "AnelCromo", "props": {"x": 540, "y": 640, "diametro": 780, "espessura": 210, "inicio": 0}},
+       {"elemento": "PilulaCromo", "props": {"texto": "à prova d'água", "x": 540, "y": 1150, "tamanho": 76, "inicio": 14}}
+     ],
+     "socos": [3],
+     "sons": [{"som": "varre", "em": 0}, {"som": "clique", "em": 14}]},
+    {"batida": "data", "de": 160, "ate": 204, "entrada": "zoom",
+     "camadas": [
+       {"elemento": "TituloCromo", "props": {"linhas": ["12 NOV"], "y": 640, "tamanho": 240, "inicio": 2}},
+       {"elemento": "PilulaCromo", "props": {"texto": "pré-venda", "x": 540, "y": 960, "tamanho": 70, "tipo": "lima", "inicio": 24}}
+     ],
+     "socos": [3, 25],
+     "sons": [{"som": "subida", "em": -4}, {"som": "cromo", "em": 3}, {"som": "clique", "em": 24}]},
+    {"batida": "marca", "de": 204, "ate": 240, "entrada": "zoom",
+     "camadas": [
+       {"elemento": "AssinaturaMarca", "props": {"logo": "logo-mercurio.svg", "nome": "mercúrio", "endereco": "mercurio.exemplo", "inicio": 0}}
+     ],
+     "socos": [16],
+     "sons": [{"som": "liquido", "em": 4}, {"som": "assinatura", "em": 16}]}
+  ]
+}

package/kits/metal-liquido/exemplos/roteiro.md

@@ -0,0 +1,20 @@
+# Roteiro de demonstração · "Mercúrio One" (fone fictício)
+
+Pedido: *"um reels de 8 s anunciando o fone Mercúrio One, 40 h de bateria, pré-venda dia 12 de novembro. Estilo metal líquido."*
+
+Sem narração: os cortes seguem a trilha (1 batida = 15.789 quadros).
+
+| # | batida | tempo (quadros) | na tela | elemento | som |
+|---|---|---|---|---|---|
+| 1 | gancho | 0–44 | bolhas se fundem + pílula "novo" | BolhasCromadas + PilulaCromo | subida, liquido |
+| 2 | virada | 44–88 | "MERCÚRIO / ONE" | TituloCromo | whoosh, cromo, varre |
+| 3 | prova | 88–126 | esfera que quica + "40 h de bateria" | EsferaCromo + PilulaCromo | quique, clique |
+| 4 | prova | 126–160 | anel girando + "à prova d'água" | AnelCromo + PilulaCromo | varre, clique |
+| 5 | data | 160–204 | "12 NOV" + pílula verde "pré-venda" | TituloCromo + PilulaCromo | subida, cromo, clique |
+| 6 | marca | 204–240 | logo + "mercúrio" + "mercurio.exemplo" | AssinaturaMarca | assinatura, liquido |
+
+Como a IA chegou nisso:
+1. Cortou o pedido em palavras-chave: novo, nome, bateria, água, data.
+2. Pegou as batidas obrigatórias e deu a cada cena um herói de cromo diferente (bolhas, letras, esfera, anel).
+3. Deixou só um apoio por cena e uma pausa depois de cada impacto.
+4. Escreveu `plano.json`; o `preview.tsx` passa o plano para `Montagem`.

package/kits/metal-liquido/preview.tsx

@@ -0,0 +1,12 @@
+// 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-metal-liquido`.
+import React from 'react';
+import {Montagem, Plano} from './elementos';
+import plano from './exemplos/plano.json';
+import l0 from './exemplos/logo-mercurio.svg';
+
+const arquivos: Record<string, string> = {'logo-mercurio.svg': l0};
+
+const Preview: React.FC = () => <Montagem plano={plano as Plano} arquivos={arquivos} />;
+
+export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 112, Componente: Preview};

package/kits/metal-liquido/receita.json

@@ -0,0 +1,173 @@
+{
+  "kit": "metal-liquido",
+  "fps": 30,
+  "batida_trilha_quadros": 15.789,
+  "duracao_video_s": [
+    6,
+    45
+  ],
+  "ordem_sugerida": [
+    "gancho",
+    "virada",
+    "prova",
+    "data",
+    "cta",
+    "marca"
+  ],
+  "batidas": [
+    {
+      "nome": "gancho",
+      "obrigatoria": true,
+      "duracao": [
+        38,
+        60
+      ],
+      "elementos": [
+        "BolhasCromadas",
+        "PilulaCromo"
+      ],
+      "entrada": [
+        "nenhuma"
+      ],
+      "sons": [
+        "subida",
+        "liquido"
+      ],
+      "nota": "herói: bolhas se fundindo; apoio: uma pílula com uma palavra."
+    },
+    {
+      "nome": "virada",
+      "obrigatoria": true,
+      "duracao": [
+        42,
+        66
+      ],
+      "elementos": [
+        "TituloCromo"
+      ],
+      "entrada": [
+        "zoom"
+      ],
+      "sons": [
+        "whoosh",
+        "cromo",
+        "varre"
+      ],
+      "nota": "o nome do produto em 2 linhas de cromo, sozinho no quadro."
+    },
+    {
+      "nome": "prova",
+      "obrigatoria": true,
+      "duracao": [
+        36,
+        54
+      ],
+      "elementos": [
+        "EsferaCromo",
+        "AnelCromo",
+        "PilulaCromo"
+      ],
+      "entrada": [
+        "subir",
+        "direita"
+      ],
+      "sons": [
+        "quique",
+        "varre",
+        "clique"
+      ],
+      "nota": "um objeto de cromo gigante + uma pílula com o benefício."
+    },
+    {
+      "nome": "data",
+      "obrigatoria": false,
+      "duracao": [
+        36,
+        54
+      ],
+      "elementos": [
+        "TituloCromo",
+        "PilulaCromo"
+      ],
+      "entrada": [
+        "zoom"
+      ],
+      "sons": [
+        "subida",
+        "cromo",
+        "clique"
+      ],
+      "nota": "data em cromo + pílula verde-ácido com o evento."
+    },
+    {
+      "nome": "cta",
+      "obrigatoria": false,
+      "duracao": [
+        30,
+        48
+      ],
+      "elementos": [
+        "PilulaCromo",
+        "BolhasCromadas"
+      ],
+      "entrada": [
+        "subir"
+      ],
+      "sons": [
+        "clique",
+        "liquido"
+      ],
+      "nota": "pílula verde-ácido grande com a ação."
+    },
+    {
+      "nome": "marca",
+      "obrigatoria": true,
+      "duracao": [
+        48,
+        90
+      ],
+      "elementos": [
+        "AssinaturaMarca"
+      ],
+      "entrada": [
+        "zoom"
+      ],
+      "sons": [
+        "assinatura",
+        "liquido"
+      ],
+      "nota": "sempre a última. As bolhas fundem no logo."
+    }
+  ],
+  "transicoes": [
+    {
+      "nome": "zoom",
+      "quadros": 14,
+      "como": "entra de 1,9x para 1 com desfoque 10 px; a anterior sai crescendo"
+    },
+    {
+      "nome": "subir",
+      "quadros": 14,
+      "como": "entra 300 px de baixo"
+    },
+    {
+      "nome": "direita",
+      "quadros": 14,
+      "como": "entra 800 px da direita"
+    },
+    {
+      "nome": "nenhuma",
+      "quadros": 0,
+      "como": "só a primeira cena"
+    }
+  ],
+  "camera": {
+    "deriva": "sempre, push lento de 4% no vídeo",
+    "socos": "fusão das bolhas, quique da esfera, impacto da data"
+  },
+  "trilha": {
+    "arquivo": "assets/trilha/sombrio-114bpm.mp3",
+    "volume": 0.55,
+    "com_narracao": 0.28
+  }
+}

package/kits/metal-liquido/regras/area-segura.md

@@ -0,0 +1,16 @@
+# Á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).
+- Embaixo de 1330 px ficam a legenda e os botões do Reels/TikTok: ali só fundo e o que sangra.
+- Respiro: 35–45% do quadro livre, 1 herói + no máximo 1 apoio por cena, nada encostando na borda, pausa de 15–24 quadros depois de cada impacto.
+- Posições de referência (centro da linha, em px):
+
+| uso | y |
+|---|---|
+| herói (centro) | 640–760 |
+| título de 2 linhas (centro) | 700 |
+| apoio em pílula | 1120–1180 |
+| logo na assinatura | 600 |
+| endereço | 1130 |
+
+- Só o brilho de estúdio do fundo sangra; o herói fica dentro das margens de 96 px.

package/kits/metal-liquido/regras/cor.md

@@ -0,0 +1,23 @@
+# Cor
+
+| token | hex | uso |
+|---|---|---|
+| `grafite` | #0C0D12 | chão |
+| `grafiteClaro` | #1A1D27 | luz de estúdio no fundo |
+| `cromo1` | #F4F7FC | cromo: céu claro e realce |
+| `cromo2` | #C9D0DE | cromo: meio-tom |
+| `cromo3` | #727A8E | cromo: sombra suave |
+| `cromo4` | #12141B | cromo: linha do horizonte |
+| `lima` | #C8FF3D | único acento (pílula, detalhe) |
+| `gelo` | #8FD3FF | reflexo azulado dentro do metal |
+
+## Degradês e sombras
+
+- Horizonte do cromo: `linear-gradient(180deg, #F4F7FC 0%, #C9D0DE 24%, #727A8E 46%, #12141B 50%, #8E96AA 64%, #F4F7FC 100%)`.
+- Brilho que varre a letra: `linear-gradient(105deg, transparent 42%, rgba(255,255,255,.95) 50%, transparent 58%)`, 40 quadros por passada.
+- Luz de estúdio: `radial-gradient(70% 40% at 25% 18%, rgba(120,140,190,.28), transparent)` e `radial-gradient(60% 30% at 80% 85%, rgba(200,255,61,.08), transparent)`.
+- Sombra: nenhuma em elemento; o chão tem um reflexo fraco (espelho a 12%).
+
+## O que o cliente pode trocar
+
+O verde-ácido pode virar a cor da marca (um acento só). O grafite pode ir a qualquer escuro neutro. O horizonte do cromo não muda.

package/kits/metal-liquido/regras/movimento.md

@@ -0,0 +1,18 @@
+# Movimento
+
+Curva padrão: `ob(t, 1,7)` (overshoot ~7%) para entradas e `e5(t) = 1 − (1 − t)^5` para fusão e saídas.
+
+| movimento | duração | valores |
+|---|---|---|
+| fusão das bolhas | 30 quadros | distância entre bolhas 420 → 70 px, com `e5`; depois orbitam ±14 px |
+| título de cromo entra | 18 quadros | sobe 140 px, desfoque 14 → 0, tracking 0,12 → −0,02 em |
+| brilho que varre | 40 quadros por passada | faixa de 16% cruza a letra da esquerda pra direita, a cada 56 quadros |
+| esfera quica | 3 batidas | cai de −900 px, bate, sobe 22% e 7%, achata Y −14% no impacto; o céu do espelho gira |
+| anel gira | contínuo | rotateX 68°, rotateZ 3,2°/quadro |
+| pílula | 14 quadros | cresce de 0 com overshoot, brilho cruza uma vez |
+| entrada de cena | 14 quadros | `zoom` 1,9× · `subir` 300 px · `direita` 800 px; desfoque 10 px |
+| saída de cena | 10 quadros | escala 1 → 1,9, desfoque 10 px |
+| câmera (sempre) | contínuo | zoom 1,02 + 0,00018/quadro ± 0,014, deriva ±14/±10 px; soco +0,03 |
+
+- Pausa de 15–24 quadros depois de cada impacto (fusão, quique, data): só a deriva e o brilho se mexem.
+- Uma coisa nova por vez: nada entra enquanto o herói ainda está assentando.

package/kits/metal-liquido/regras/ritmo.md

@@ -0,0 +1,14 @@
+# Ritmo
+
+- 30 fps. Uma batida da trilha = **15.789 quadros** (114 bpm). Cortes em múltiplos de 15,8 (arredonde): 0, 16, 32, 47, 63, 79, 95, 110, 126, 142, 158, 174, 190, 205, 221.
+
+| batida | duração (s) | quadros |
+|---|---|---|
+| gancho | 1,3–2,0 | 38–60 |
+| virada | 1,4–2,2 | 42–66 |
+| prova (cada) | 1,2–1,8 | 36–54 |
+| data / oferta | 1,2–1,8 | 36–54 |
+| marca | 1,6–3,0 | 48–90 |
+
+- Preview do kit: 8 s, 6 cenas.
+- Leitura: um título de cromo precisa de **≥ 30 quadros** parado na tela; uma pílula, **≥ 24**.

package/kits/metal-liquido/regras/som.md

@@ -0,0 +1,20 @@
+# Som
+
+- Trilha: `assets/trilha/sombrio-114bpm.mp3` (8,6 s, 114 bpm), volume **0.55**, fade de saída nos últimos **20 quadros**. Vídeo maior que 8,6 s: gere uma trilha nova no MotionCraft (`music make`, preset `dark-minimal`, 114 bpm, tom F), não faça loop deste trecho.
+- Com narração: trilha a **0.28** e efeitos a 70% do volume da tabela.
+- Efeitos (todos sintetizados) e volume padrão:
+
+| som | volume | quando |
+|---|---|---|
+| `liquido` | 0.9 | bolhas que se fundem |
+| `cromo` | 0.85 | letra ou pílula de cromo que entra |
+| `quique` | 0.85 | esfera que bate no chão |
+| `whoosh` | 0.85 | entrada de cena |
+| `varre` | 0.7 | brilho que varre / anel que gira |
+| `clique` | 0.8 | pílula que aparece |
+| `subida` | 0.6 | antes da fusão e da data |
+| `assinatura` | 0.9 | revelação da marca |
+
+- 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/metal-liquido/regras/tipografia.md

@@ -0,0 +1,15 @@
+# Tipografia
+
+Duas fontes: **Unbounded 900** (larga, redonda) para tudo que é cromo e **Space Grotesk** para detalhe.
+
+| papel | fonte | peso | tamanho (px) | máx. caracteres |
+|---|---|---|---|---|
+| título de cromo (hero) | Unbounded | 900 | 130–200 | 9 |
+| número / data em pílula | Unbounded | 900 | 96–130 | 8 |
+| apoio em pílula | Unbounded | 700 | 48–60 | 20 |
+| detalhe / endereço | Space Grotesk | 700 | 44–52 | 36 |
+
+- Tracking: −0,02 em no título; 0,04 em na pílula.
+- Line-height: 1,0 no título; 1,2 no detalhe.
+- Caixa: caixa-alta em título e pílula; detalhe em frase normal.
+- Texto que cresce encolhe sozinho (`caber()` em `base.ts`) até caber em 920 px; nunca palavra cortada.

package/kits/minimal/SKILL.md

@@ -0,0 +1,54 @@
+---
+slug: minimal
+nome: Minimalista
+descricao: osso liso, uma única cor (cobalto), uma forma grande por cena, Hanken leve alinhado à esquerda e muito espaço em branco
+familia: Marca e evento
+versao: 1
+quando:
+  - "vídeo minimalista de marca ou produto com uma frase só"
+  - "anúncio limpo, com muito espaço e uma cor"
+  - "apresentar um conceito simples: uma ideia, um número, uma forma"
+  - "fechamento elegante com nome e endereço da marca"
+nao_serve:
+  - "vídeo cheio de informação, preços, listas ou fotos (o estilo é o oposto)"
+  - "visual quente, dourado ou de luxo (use luxo)"
+---
+
+# Minimalista
+
+Uma cor, um elemento, muito ar. O chão é **osso liso** (`#F7F6F2`), sem textura, com **quatro cruzes de registro**
+a 96 px das bordas. A **única cor viva é o cobalto `#2B4BFF`**, usada em **uma forma por cena**: um círculo de 580 px
+que nasce de um ponto, uma bola que vai e volta numa trilha esticando e achatando, um anel, um quadradinho. O texto
+é **Hanken Grotesk leve (200–300)**, **alinhado à margem de 120 px**, uma frase só, ou um **número finíssimo de 640
+px**; rótulos em **Spline Sans Mono**. A troca de cena é por **círculo que abre**, e a forma é o fio de continuidade.
+A regra é cortar tudo o que não é herói: **50% ou mais do quadro fica vazio**, e só existe **um apoio** (um fio, um
+rótulo, um rodapé).
+
+## Como montar um vídeo com este kit
+
+1. **Reduza a mensagem a uma frase de até 14 caracteres por linha (2 linhas), um número ou uma forma**, e ao nome e endereço da marca.
+2. **Escolha as batidas** em `receita.json` (forma → frase → ponto → numero → marca). Use só as que ajudam; menos cenas é melhor.
+3. **Escreva o plano** (`plano.json`, formato de `exemplos/plano.json`). Em `FormaMorph`, `formas` lista as transformações com `de` (quadro) e `tipo`.
+4. **Renderize** com `<Montagem plano={...} />`.
+5. **Confira** contra `regras/`: uma cor só, um herói, margens ≥ 120 px à esquerda e à direita, 50%+ vazio.
+
+## Elementos
+
+| elemento | o que faz | batidas |
+|---|---|---|
+| `FormaMorph` | a forma cobalto de 560 px: círculo, quadrado, pílula, anel, meia-lua, transformando-se | forma, marca |
+| `FraseUnica` | frase leve de 130–170 px à esquerda, linha a linha; `*palavra*` em cobalto | frase |
+| `NumeroSolo` | número finíssimo de 640 px + quadradinho cobalto + rótulo mono | numero |
+| `PontoMovel` | bola de 240 px que vai e volta com squash e stretch | ponto |
+| `LinhaFina` | fio de 3 px que se desenha com um ponto no fim (trilha, régua) | ponto |
+| `RodapeMinimal` | fio + nome da marca e endereço em mono (a assinatura) | marca |
+| `Fundo`, `Camera`, `Cena` | osso com cruzes de registro, câmera quase parada, troca por círculo | todas |
+| `Efeito`, `Trilha` | sons e trilha do kit | todas |
+
+## Proibido
+
+- Qualquer segunda cor viva, degradê, sombra, brilho, textura, foto, ícone, emoji.
+- Mais de um herói por plano ou mais de um apoio; forma menor que 40% da largura (432 px) como herói.
+- Texto centralizado (aqui é alinhado à margem esquerda), texto em negrito pesado (> 500), caixa alta fora do mono.
+- Margem lateral menor que 120 px; texto fora da área segura (168–1330 px na vertical).
+- Quadro parado: a forma boia, a câmera deriva e as cruzes ficam, mas nada pisca.