primocode 10.17.1 → 10.19.0

package/kits/vercel-mono/elementos/FaixaOutline.tsx

@@ -0,0 +1,25 @@
+// FaixaOutline: faixas de uma palavra gigante só no contorno (traço de 4 px, sem preenchimento) correndo para lados opostos.
+// A cada `intervalo` quadros UMA faixa se enche de cor por inteiro (corte seco) e a anterior esvazia.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_D} from './base';
+import {inverso} from './Quadro';
+
+export type FaixaOutlineProps = {textos: string[]; cor?: string; inicio?: number; y?: number; altura?: number; /** px por quadro */ velocidade?: number; /** quadros entre trocas de faixa cheia */ intervalo?: number};
+
+export const FaixaOutline: React.FC<FaixaOutlineProps> = ({textos, cor = COR.branco, inicio = 0, y = 740, altura = 260, velocidade = 26, intervalo = 6}) => {
+  const f = useCurrentFrame();
+  const fundo = inverso(cor), topo = y - (textos.length * altura) / 2;
+  const cheia = f >= inicio ? Math.floor((f - inicio) / intervalo) % textos.length : -1;
+  if (f < inicio) return null;
+  return <div style={{position: 'absolute', inset: 0}}>
+    {textos.map((t, i) => {
+      const dir = i % 2 ? -1 : 1, unid = `${t.toUpperCase()}  `, w = unid.length * altura * 0.62;
+      const off = (((f - inicio) * velocidade * dir) % w + w) % w;
+      const on = i === cheia;
+      return <div key={i} style={{position: 'absolute', left: 96, width: 888, top: topo + i * altura, height: altura, overflow: 'hidden', background: on ? cor : 'transparent', borderTop: `4px solid ${cor}`, borderBottom: i === textos.length - 1 ? `4px solid ${cor}` : undefined, boxSizing: 'border-box'}}>
+        <div style={{position: 'absolute', left: off - w, top: 0, height: altura, display: 'flex', alignItems: 'center', fontFamily: FONTE_D, fontWeight: 800, fontSize: altura * 0.78, letterSpacing: '-0.04em', whiteSpace: 'pre', color: on ? fundo : 'transparent', WebkitTextStroke: `4px ${on ? fundo : cor}`}}>{unid.repeat(5)}</div>
+      </div>;
+    })}
+  </div>;
+};

package/kits/vercel-mono/elementos/Fundo.tsx

@@ -0,0 +1,6 @@
+// Fundo: preto puro. Cada cena traz o próprio `Quadro` (preto ou branco) por cima; isto só garante que nunca há buraco colorido.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {COR} from './base';
+
+export const Fundo: React.FC = () => <AbsoluteFill style={{background: COR.preto}} />;

package/kits/vercel-mono/elementos/GradeDeNumeros.tsx

@@ -0,0 +1,27 @@
+// GradeDeNumeros: uma tabela de células de borda fina (2 × 2 ou 2 × 3) com um número gigante em cada uma. Cada célula entra por corte:
+// aparece invertida por 3 quadros e assenta, enquanto o número conta de 0 ao valor em 10 quadros.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_D, FONTE_T, c01, caber, e5, seg} from './base';
+import {inverso} from './Quadro';
+
+export type Celula = {valor: number; casas?: number; sufixo?: string; rotulo: string};
+export type GradeDeNumerosProps = {celulas: Celula[]; cor?: string; inicio?: number; intervalo?: number; y?: number};
+
+export const GradeDeNumeros: React.FC<GradeDeNumerosProps> = ({celulas, cor = COR.preto, inicio = 0, intervalo = 5, y = 740}) => {
+  const f = useCurrentFrame();
+  const fundo = inverso(cor), W = 448, H = 380, linhas = Math.ceil(celulas.length / 2);
+  const topo = y - (linhas * H) / 2;
+  return <div style={{position: 'absolute', inset: 0}}>
+    {celulas.map((c, i) => {
+      const t0 = inicio + i * intervalo, vis = f >= t0, inv = f >= t0 && f < t0 + 3, n = e5(seg(f, t0 + 1, t0 + 12));
+      const col = i % 2, lin = Math.floor(i / 2);
+      const txt = (c.valor * n).toFixed(c.casas ?? 0).replace('.', ',') + (c.sufixo ?? '');
+      const tam = caber(txt, 150, W - 60, 800, -0.05);
+      return <div key={i} style={{position: 'absolute', left: 96 + col * (W - 4), top: topo + lin * (H - 4), width: W, height: H, boxSizing: 'border-box', border: `4px solid ${cor}`, background: inv ? cor : fundo, color: inv ? fundo : cor, opacity: vis ? 1 : 0, padding: 30}}>
+        <div style={{fontFamily: FONTE_T, fontWeight: 500, fontSize: 26, letterSpacing: '0.1em', textTransform: 'uppercase'}}>{String(i + 1).padStart(2, '0')} / {c.rotulo}</div>
+        <div style={{position: 'absolute', left: 30, bottom: 34, fontFamily: FONTE_D, fontWeight: 800, fontSize: tam, letterSpacing: '-0.05em', lineHeight: 1}}>{txt}</div>
+      </div>;
+    })}
+  </div>;
+};

package/kits/vercel-mono/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 estética: põe Fundo + Camera + Cenas + sons onde o plano mandou. Formato: exemplos/plano.json.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {COR} from './base';
+import {Fundo} from './Fundo';
+import {Camera} from './Camera';
+import {Cena, Entrada} from './Cena';
+import {Efeito, NomeSom, Trilha} from './Som';
+import {AssinaturaMarca} from './AssinaturaMarca';
+import {FaixaOutline} from './FaixaOutline';
+import {GradeDeNumeros} from './GradeDeNumeros';
+import {PalavraMono} from './PalavraMono';
+import {Quadro} from './Quadro';
+import {TerminalComando} from './TerminalComando';
+import {TrianguloGigante} from './TrianguloGigante';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {
+  AssinaturaMarca, FaixaOutline, GradeDeNumeros, PalavraMono, Quadro, TerminalComando, TrianguloGigante,
+};
+
+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[]};
+
+/** props de cor aceitam o nome do token ("vermelho") ou um hex */
+const CHAVES_COR = ['cor', 'corAnel', 'ponto', 'tinta'];
+/** troca nomes de arquivo ("fotos/a.jpg") pela URL importada, em qualquer prop */
+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, CHAVES_COR.includes(k) && typeof x === 'string' && x in COR ? COR[x as keyof typeof COR] : resolver(x, arquivos)]));
+  return v;
+};
+
+export const Montagem: React.FC<{plano: Plano; arquivos?: Record<string, string>}> = ({plano, arquivos = {}}) => {
+  const socos = plano.cenas.flatMap((c) => [c.de, ...(c.socos ?? []).map((s) => c.de + s)]);
+  const ultima = plano.cenas.length - 1;
+  return <AbsoluteFill style={{background: COR.fundo}}>
+    <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(`vercel-mono: 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/vercel-mono/elementos/PalavraMono.tsx

@@ -0,0 +1,31 @@
+// PalavraMono: palavra enorme em Inter 800 que NÃO sobe nem desliza: cada letra aparece de uma vez (corte seco), uma por quadro,
+// e o cursor `_` pisca no fim. `*palavra*` vira bloco invertido (fundo da cor do texto, letra da cor do campo).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_D, caber, partes, seg} from './base';
+import {inverso} from './Quadro';
+
+export type PalavraMonoProps = {linhas: string[]; cor?: string; inicio?: number; /** quadros por letra */ ritmo?: number; y?: number; tamanho?: number; cursor?: boolean; /** quadro em que tudo some de uma vez */ fim?: number};
+
+export const PalavraMono: React.FC<PalavraMonoProps> = ({linhas, cor = COR.branco, inicio = 0, ritmo = 1, y = 720, tamanho = 280, cursor = true, fim}) => {
+  const f = useCurrentFrame();
+  const fundo = inverso(cor);
+  const tams = linhas.map((l) => caber(l, tamanho, 888, 800, -0.06));
+  const passo = tams.map((t) => t * 1.02), total = passo.reduce((a, b) => a + b, 0);
+  const gasto = (f - inicio) / ritmo;
+  let n = 0;
+  if (fim !== undefined && f >= fim) return null;
+  const totalLetras = linhas.reduce((a, l) => a + l.replace(/\*/g, '').length, 0);
+  return <div style={{position: 'absolute', inset: 0}}>
+    {linhas.map((l, i) => {
+      const top = y - total / 2 + passo.slice(0, i).reduce((a, b) => a + b, 0);
+      const ultima = i === linhas.length - 1;
+      return <div key={i} style={{position: 'absolute', left: 96, width: 888, top, height: passo[i], display: 'flex', alignItems: 'center', fontFamily: FONTE_D, fontWeight: 800, fontSize: tams[i], letterSpacing: '-0.06em', lineHeight: 1, whiteSpace: 'pre'}}>
+        {partes(l).map((p, j) => <span key={j} style={{background: p.d ? cor : 'transparent', color: p.d ? fundo : cor, padding: p.d ? '0 0.08em' : 0}}>
+          {p.t.split('').map((ch, k) => <span key={k} style={{opacity: gasto >= n++ ? 1 : 0}}>{ch}</span>)}
+        </span>)}
+        {cursor && ultima && <span style={{display: 'inline-block', width: tams[i] * 0.42, height: tams[i] * 0.1, background: cor, marginLeft: tams[i] * 0.06, alignSelf: 'flex-end', marginBottom: tams[i] * 0.14, opacity: gasto < totalLetras ? 1 : (Math.floor(f / 6) % 2 ? 0 : 1)}} />}
+      </div>;
+    })}
+  </div>;
+};

package/kits/vercel-mono/elementos/Quadro.tsx

@@ -0,0 +1,28 @@
+// Quadro: o campo preto ou branco de uma cena, com a grade fina e as cruzes de mira nas interseções (que derivam devagar)
+// e os rótulos em mono nos cantos. É a camada de baixo de TODA cena; o resto entra por cima. Trocar de cena = inverter o quadro.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_T} from './base';
+
+/** o contrário de uma cor do kit: branco ↔ preto */
+export const inverso = (cor: string) => (cor === COR.branco ? COR.preto : COR.branco);
+
+export type QuadroProps = {modo?: 'preto' | 'branco'; /** rótulo do canto de cima à esquerda */ legenda?: string; semGrade?: boolean};
+
+export const Quadro: React.FC<QuadroProps> = ({modo = 'preto', legenda = '', semGrade = false}) => {
+  const f = useCurrentFrame();
+  const fundo = modo === 'preto' ? COR.preto : COR.branco, tinta = inverso(fundo);
+  const linha = modo === 'preto' ? 'rgba(255,255,255,0.20)' : 'rgba(0,0,0,0.20)';
+  const id = `vm-g-${modo}`;
+  return <div style={{position: 'absolute', inset: 0, background: fundo}}>
+    {!semGrade && <svg width={1080} height={1920} style={{position: 'absolute', inset: 0}}>
+      <defs><pattern id={id} width="135" height="135" patternUnits="userSpaceOnUse" patternTransform={`translate(${(f * 0.9) % 135} ${(f * 0.6) % 135})`}>
+        <path d="M0 0H135M0 0V135" stroke={linha} strokeWidth="2" fill="none" />
+        <path d="M-12 0H12M0 -12V12" stroke={tinta} strokeWidth="3" fill="none" />
+      </pattern></defs>
+      <rect width="1080" height="1920" fill={`url(#${id})`} />
+    </svg>}
+    <div style={{position: 'absolute', left: 96, top: 196, fontFamily: FONTE_T, fontWeight: 500, fontSize: 26, letterSpacing: '0.08em', color: tinta, textTransform: 'uppercase'}}>{legenda}</div>
+    <div style={{position: 'absolute', right: 96, top: 196, fontFamily: FONTE_T, fontWeight: 500, fontSize: 26, letterSpacing: '0.08em', color: tinta}}>F-{String(f).padStart(4, '0')}</div>
+  </div>;
+};

package/kits/vercel-mono/elementos/Som.tsx

@@ -0,0 +1,39 @@
+// Som: efeitos e trilha do kit, sintetizados no MotionCraft (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 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/trilha.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.85, 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/vercel-mono/elementos/TerminalComando.tsx

@@ -0,0 +1,33 @@
+// TerminalComando: uma janela de terminal de borda branca de 3 px. O comando é digitado letra a letra, depois as linhas de resposta
+// aparecem de uma vez (corte seco), cada uma com ✓, e a última linha fica invertida (bloco branco).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_T, c01, seg} from './base';
+import {inverso} from './Quadro';
+
+export type TerminalComandoProps = {comando: string; saidas: string[]; cor?: string; inicio?: number; y?: number; /** letras por quadro */ ritmo?: number; /** quadros entre linhas de saída */ intervalo?: number};
+
+export const TerminalComando: React.FC<TerminalComandoProps> = ({comando, saidas, cor = COR.branco, inicio = 0, y = 700, ritmo = 1.4, intervalo = 7}) => {
+  const f = useCurrentFrame();
+  const fundo = inverso(cor), LH = 96;
+  const letras = Math.min(comando.length, Math.max(0, Math.floor((f - inicio - 4) * ritmo)));
+  const t1 = inicio + 4 + comando.length / ritmo + 4;
+  const H = 150 + (saidas.length + 1) * LH + 50;
+  const visivel = f >= inicio;
+  if (!visivel) return null;
+  return <div style={{position: 'absolute', left: 96, width: 888, top: y - H / 2, height: H, border: `4px solid ${cor}`, background: fundo, boxSizing: 'border-box'}}>
+    <div style={{height: 76, borderBottom: `4px solid ${cor}`, display: 'flex', alignItems: 'center', gap: 16, padding: '0 28px'}}>
+      {[0, 1, 2].map((i) => <div key={i} style={{width: 22, height: 22, borderRadius: 11, border: `3px solid ${cor}`}} />)}
+      <div style={{marginLeft: 20, fontFamily: FONTE_T, fontSize: 26, color: cor, letterSpacing: '0.08em'}}>~/projeto</div>
+    </div>
+    <div style={{padding: '34px 40px', fontFamily: FONTE_T, fontWeight: 500, fontSize: 42, color: cor, whiteSpace: 'pre'}}>
+      <div style={{height: LH}}>$ {comando.slice(0, letras)}<span style={{display: 'inline-block', width: 26, height: 50, background: cor, verticalAlign: 'middle', marginLeft: 4, opacity: Math.floor(f / 6) % 2 && letras >= comando.length ? 0 : 1}} /></div>
+      {saidas.map((s, i) => {
+        const on = f >= t1 + i * intervalo, ultima = i === saidas.length - 1;
+        return <div key={i} style={{height: LH, display: 'flex', alignItems: 'center', opacity: on ? 1 : 0}}>
+          <span style={{background: ultima ? cor : 'transparent', color: ultima ? fundo : cor, padding: ultima ? '2px 18px' : 0, fontWeight: ultima ? 700 : 500}}>{ultima ? '▲ ' : '✓ '}{s}</span>
+        </div>;
+      })}
+    </div>
+  </div>;
+};

package/kits/vercel-mono/elementos/TrianguloGigante.tsx

@@ -0,0 +1,27 @@
+// TrianguloGigante: um túnel de triângulos aninhados que se aproximam sem parar. Anéis alternam preenchido/vazado, com traço de 4 px.
+// O herói do gancho: 860 px de largura, nunca parado.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, c01, eb, seg} from './base';
+
+export type TrianguloGiganteProps = {cor?: string; inicio?: number; y?: number; /** velocidade do túnel (anéis por segundo) */ velocidade?: number};
+
+export const TrianguloGigante: React.FC<TrianguloGiganteProps> = ({cor = COR.branco, inicio = 0, y = 800, velocidade = 3}) => {
+  const f = useCurrentFrame();
+  const en = eb(seg(f, inicio, inicio + 12));
+  const N = 9, fase = ((f - inicio) / 30) * velocidade, base = Math.floor(fase), frac = fase - base;
+  const fundo = cor === COR.branco ? COR.preto : COR.branco;
+  const aneis = Array.from({length: N + 1}, (_, k) => {
+    const t = (k + 1 - frac) / N; // 0 (longe, pequeno) .. 1 (perto, grande)
+    return {t, idx: base + (N - k), r: Math.pow(c01(t), 2.1) * 380};
+  }).filter((a) => a.t > 0).sort((a, b) => b.r - a.r);
+  return <svg width={1080} height={1100} viewBox="-540 -600 1080 1100" style={{position: 'absolute', left: 0, top: y - 600, overflow: 'visible'}}>
+    <g transform={`scale(${en})`}>
+      {aneis.map((a, i) => {
+        const h = a.r, w = a.r * 1.1547;
+        const pts = `0,${-h} ${w},${h * 0.5} ${-w},${h * 0.5}`;
+        return <polygon key={a.idx} points={pts} fill={a.idx % 2 ? cor : fundo} stroke={cor} strokeWidth="4" strokeLinejoin="miter" transform={`rotate(${(i % 2 ? 1 : -1) * (1 - a.t) * 14})`} />;
+      })}
+    </g>
+  </svg>;
+};

package/kits/vercel-mono/elementos/base.ts

@@ -0,0 +1,82 @@
+// Base do kit vercel-mono: 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 f0Url from '../assets/fontes/inter.woff2';
+import f1Url from '../assets/fontes/jetbrains-mono.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 = {
+  fundo: '#000000',
+  preto: '#000000',
+  branco: '#FFFFFF',
+  cinza: '#8A8A8A',
+  linha: '#3A3A3A',
+  destaque: '#FFFFFF',
+  cortina: '#FFFFFF',
+};
+
+// ---------- fonte ----------
+// Famílias com o prefixo do kit (VM), pra não colidir com outro kit no mesmo estúdio.
+export const FONTE_D = '"VM Inter", "Inter", system-ui, sans-serif';
+export const FONTE_T = '"VM JetBrains Mono", "JetBrains Mono", ui-monospace, monospace';
+export const FONTE_S = '"VM JetBrains Mono", "JetBrains Mono", ui-monospace, monospace';
+const LISTA = [
+  {fam: 'VM Inter', url: f0Url, peso: '500 800', estilo: 'normal'},
+  {fam: 'VM JetBrains Mono', url: f1Url, peso: '500 800', estilo: 'normal'},
+];
+if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__kit_VM) {
+  (globalThis as Record<string, unknown>).__kit_VM = true;
+  for (const f of LISTA) {
+    const h = delayRender('vercel-mono: ' + f.fam);
+    new FontFace(f.fam, `url(${f.url}) format('woff2')`, {weight: f.peso, style: f.estilo}).load()
+      .then((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: cubic-bezier(.2,.8,.2,1) aproximado */
+export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
+/** entrada com overshoot de ~10% (easeOutBack, c1 = 2.2) */
+export const eb = (t: number) => {const x = c01(t) - 1, c = 2.2; return 1 + (c + 1) * x * x * x + c * x * x;};
+/** entra e sai suave */
+export const e3 = (t: number) => {const x = c01(t); return x * x * (3 - 2 * x);};
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+/** uma batida da trilha do kit em quadros */
+export const BATIDA = 15.0;
+
+// ---------- texto ----------
+/** "Usar *IA* já" -> [{t:'Usar ', d:false}, {t:'IA', d:true}, {t:' já', d:false}] */
+export const partes = (texto: string) => texto.split('*').map((t, i) => ({t, d: i % 2 === 1})).filter((p) => p.t.length > 0);
+export const textoLimpo = (t: string) => t.replace(/\*/g, '');
+let canvas: HTMLCanvasElement | null = null;
+const cache = new Map<string, number>();
+export const larguraTexto = (texto: string, tamanho: number, peso = 800, trackingEm = -0.03, familia = FONTE_D): 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.56;
+  canvas = canvas || document.createElement('canvas');
+  const ctx = canvas.getContext('2d'); if (!ctx) return texto.length * tamanho * 0.56;
+  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 = 800, trackingEm = -0.03, familia = FONTE_D) => {
+  const w = larguraTexto(textoLimpo(texto), tamanho, peso, trackingEm, familia);
+  return w > largura ? Math.floor(tamanho * (largura / w)) : tamanho;
+};
+
+// ---------- câmera ----------
+export const CAMERA = {"z": 1.02, "zOsc": 0.008, "push": 0.0003, "dx": 8, "dy": 6, "rot": 0.003, "soco": 0.04};

package/kits/vercel-mono/elementos/index.ts

@@ -0,0 +1,16 @@
+// Tudo que o kit vercel-mono 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 {AssinaturaMarca} from './AssinaturaMarca';
+export {FaixaOutline} from './FaixaOutline';
+export {GradeDeNumeros} from './GradeDeNumeros';
+export {PalavraMono} from './PalavraMono';
+export {Quadro} from './Quadro';
+export {TerminalComando} from './TerminalComando';
+export {TrianguloGigante} from './TrianguloGigante';
+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/vercel-mono/exemplos/logo-vetor.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><rect x="6" y="6" width="288" height="288" fill="#000" stroke="#fff" stroke-width="12"/><path d="M60 240 L240 60" stroke="#fff" stroke-width="28"/><rect x="60" y="60" width="70" height="70" fill="#fff"/></svg>