primocode 10.17.1 → 10.19.0

package/kits/pontos-3d/elementos/NuvemDePontos.tsx

@@ -0,0 +1,84 @@
+// NuvemDePontos: 900 pontos brancos em 3D (perspectiva real) que giram sem parar e trocam de forma:
+// grade ondulando, esfera, cubo, anel ou piso de onda. Cada ponto sai da forma A para a B com atraso próprio.
+import React, {useMemo} from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FOCAL, ALTURA, LARGURA, c01, e5, lerp, ob, rnd, seg} from './base';
+
+export type FormaPontos = 'grade' | 'esfera' | 'cubo' | 'anel' | 'onda';
+export type NuvemDePontosProps = {
+  /** formas em sequência, ex.: ["grade", "esfera"] */
+  formas: FormaPontos[];
+  /** quadros (da cena) em que começa cada troca; tem formas.length − 1 itens */
+  trocas?: number[];
+  duracaoTroca?: number;
+  quantidade?: number;
+  x?: number;
+  y?: number;
+  /** raio da forma em px */
+  raio?: number;
+  inicio?: number;
+  /** graus por quadro */
+  giro?: number;
+  inclinacao?: number;
+  cor?: string;
+  destaque?: string;
+  /** tamanho base do ponto, em px */
+  ponto?: number;
+};
+
+type V3 = [number, number, number];
+const posicao = (forma: FormaPontos, i: number, n: number, R: number, f: number): V3 => {
+  const lado = Math.ceil(Math.sqrt(n));
+  if (forma === 'grade') {
+    const u = (i % lado) / (lado - 1) - 0.5, v = Math.floor(i / lado) / (lado - 1) - 0.5;
+    return [u * 2 * R, v * 2 * R, Math.sin(u * 9 + f * 0.12) * 60 + Math.cos(v * 7 + f * 0.09) * 40];
+  }
+  if (forma === 'onda') {
+    const u = (i % lado) / (lado - 1) - 0.5, v = Math.floor(i / lado) / (lado - 1) - 0.5;
+    return [u * 2.2 * R, Math.sin(u * 8 + v * 6 + f * 0.14) * R * 0.22, v * 2.2 * R];
+  }
+  if (forma === 'esfera') {
+    const y = 1 - (2 * (i + 0.5)) / n, r = Math.sqrt(1 - y * y), phi = i * 2.399963;
+    return [Math.cos(phi) * r * R, y * R, Math.sin(phi) * r * R];
+  }
+  if (forma === 'anel') {
+    const a = i * 2.399963, b = (i / n) * Math.PI * 2 * 23, R1 = R * 0.78, r = R * 0.3;
+    return [(R1 + r * Math.cos(b)) * Math.cos(a), r * Math.sin(b), (R1 + r * Math.cos(b)) * Math.sin(a)];
+  }
+  // cubo: 6 faces
+  const face = i % 6, k = Math.floor(i / 6), per = Math.ceil(Math.sqrt(n / 6));
+  const u = ((k % per) / (per - 1) - 0.5) * 2, v = (Math.floor(k / per) / (per - 1) - 0.5) * 2, s = R * 0.78;
+  const p: V3[] = [[u, v, 1], [u, v, -1], [1, u, v], [-1, u, v], [u, 1, v], [u, -1, v]];
+  return [p[face][0] * s, p[face][1] * s, p[face][2] * s];
+};
+
+export const NuvemDePontos: React.FC<NuvemDePontosProps> = ({formas, trocas = [], duracaoTroca = 24, quantidade = 900, x = 540, y = 700, raio = 330, inicio = 0, giro = 1.1, inclinacao = 18, cor = COR.branco, destaque = COR.laranja, ponto = 10}) => {
+  const f = useCurrentFrame();
+  const n = quantidade;
+  const atraso = useMemo(() => Array.from({length: n}, (_, i) => rnd(i + 3) * 0.4), [n]);
+  if (f < inicio) return null;
+  const q = f - inicio, entra = ob(seg(f, inicio, inicio + 16), 1.7);
+  const ang = (q * giro * Math.PI) / 180, tilt = (inclinacao * Math.PI) / 180;
+  const ca = Math.cos(ang), sa = Math.sin(ang), ct = Math.cos(tilt), st = Math.sin(tilt);
+  const pts: {sx: number; sy: number; r: number; o: number; d: boolean}[] = [];
+  // troca em andamento (a última que já começou)
+  let k = -1;
+  for (let m = 0; m < trocas.length; m++) if (f >= trocas[m]) k = m;
+  const p0 = k >= 0 ? (f - trocas[k]) / duracaoTroca : 0;
+  for (let i = 0; i < n; i++) {
+    let a: V3;
+    if (k < 0) a = posicao(formas[0], i, n, raio, q);
+    else if (p0 >= 1.4) a = posicao(formas[k + 1], i, n, raio, q);
+    else {
+      const pr = e5(c01((p0 - atraso[i]) / 1)), A = posicao(formas[k], i, n, raio, q), B = posicao(formas[k + 1], i, n, raio, q);
+      a = [lerp(A[0], B[0], pr), lerp(A[1], B[1], pr), lerp(A[2], B[2], pr)];
+    }
+    // gira em Y e inclina em X
+    const X = a[0] * ca + a[2] * sa, Z0 = -a[0] * sa + a[2] * ca, Y = a[1] * ct - Z0 * st, Z = a[1] * st + Z0 * ct;
+    const esc = FOCAL / (FOCAL - Z), d = i % 12 === 0;
+    pts.push({sx: x + X * esc * entra, sy: y + Y * esc * entra, r: ponto * esc * (d ? 1.35 : 1) * entra, o: c01(0.35 + 0.65 * (Z / raio + 1) / 2), d});
+  }
+  return <svg width={LARGURA} height={ALTURA} viewBox={`0 0 ${LARGURA} ${ALTURA}`} style={{position: 'absolute', inset: 0, overflow: 'visible'}}>
+    {pts.map((p, i) => <circle key={i} cx={p.sx} cy={p.sy} r={Math.max(0.5, p.r)} fill={p.d ? destaque : cor} opacity={p.o} />)}
+  </svg>;
+};

package/kits/pontos-3d/elementos/RotuloPonto.tsx

@@ -0,0 +1,32 @@
+// RotuloPonto: etiqueta técnica em JetBrains Mono, com moldura fina, uma linha que se desenha até um ponto-alvo
+// e um anel laranja que pulsa em volta do ponto a cada 24 quadros.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FAM_B, FONTE_B, ALTURA, LARGURA, caber, larguraTexto, e5, ob, seg} from './base';
+
+export type RotuloPontoProps = {
+  texto: string;
+  /** centro da etiqueta */
+  x?: number;
+  y?: number;
+  /** ponto que a linha aponta */
+  alvo?: [number, number];
+  tamanho?: number;
+  inicio?: number;
+};
+
+export const RotuloPonto: React.FC<RotuloPontoProps> = ({texto, x = 540, y = 1150, alvo = [540, 900], tamanho = 52, inicio = 0}) => {
+  const f = useCurrentFrame() - inicio;
+  if (f < -1) return null;
+  const t = caber(texto, tamanho, FAM_B, 760, 700), w = larguraTexto(texto, t, FAM_B, 700) + t * 1.4, h = t * 2;
+  const p = ob(seg(f, 0, 12), 1.6), l = e5(seg(f, 6, 18)), pulso = (f % 24) / 24;
+  const y0 = alvo[1] < y ? y - h / 2 : y + h / 2;
+  return <>
+    <svg width={LARGURA} height={ALTURA} viewBox={`0 0 ${LARGURA} ${ALTURA}`} style={{position: 'absolute', inset: 0, overflow: 'visible'}}>
+      <line x1={x} y1={y0} x2={x + (alvo[0] - x) * l} y2={y0 + (alvo[1] - y0) * l} stroke={COR.gelo} strokeWidth={2.5} />
+      <circle cx={alvo[0]} cy={alvo[1]} r={9 * l} fill={COR.laranja} />
+      <circle cx={alvo[0]} cy={alvo[1]} r={14 + pulso * 34} fill="none" stroke={COR.laranja} strokeWidth={3} opacity={l * (1 - pulso)} />
+    </svg>
+    <div style={{position: 'absolute', left: x - w / 2, top: y - h / 2, width: w, height: h, border: `3px solid ${COR.gelo}`, borderRadius: 10, background: COR.azulEscuro, color: COR.branco, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FONTE_B, fontWeight: 700, fontSize: t, whiteSpace: 'nowrap', transform: `scale(${p})`}}>{texto}</div>
+  </>;
+};

package/kits/pontos-3d/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 tick from '../assets/sons/tick.mp3';
+import pop from '../assets/sons/pop.mp3';
+import whoosh from '../assets/sons/whoosh.mp3';
+import varre from '../assets/sons/varre.mp3';
+import impacto from '../assets/sons/impacto.mp3';
+import subida from '../assets/sons/subida.mp3';
+import clique from '../assets/sons/clique.mp3';
+import assinatura from '../assets/sons/assinatura.mp3';
+import trilha from '../assets/trilha/tech-120bpm.mp3';
+
+export const SONS = {'tick': tick, 'pop': pop, 'whoosh': whoosh, 'varre': varre, 'impacto': impacto, 'subida': subida, 'clique': clique, '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> = {'tick': 0.7, 'pop': 0.8, 'whoosh': 0.85, 'varre': 0.7, 'impacto': 0.8, 'subida': 0.6, 'clique': 0.8, '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/pontos-3d/elementos/TextoDePontos.tsx

@@ -0,0 +1,55 @@
+// TextoDePontos: uma palavra feita de pontos. Os pontos começam numa nuvem solta e voam até as letras
+// (atraso por posição X de até 10 quadros); depois tremem de leve e uma onda de brilho passa pelo texto.
+import React, {useMemo} from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FAM_A, LARGURA, ALTURA, FONTE_A, caber, e5, ob, rnd, seg} from './base';
+
+export type TextoDePontosProps = {
+  texto: string;
+  /** centro vertical */
+  y?: number;
+  /** tamanho da fonte usada pra amostrar (a palavra encolhe sozinha pra caber em 888 px) */
+  tamanho?: number;
+  /** distância entre pontos, em px */
+  passo?: number;
+  inicio?: number;
+  cor?: string;
+  destaque?: string;
+  /** raio do ponto */
+  ponto?: number;
+};
+
+type Pt = {x: number; y: number};
+
+export const TextoDePontos: React.FC<TextoDePontosProps> = ({texto, y = 700, tamanho = 260, passo = 12, inicio = 0, cor = COR.branco, destaque = COR.laranja, ponto = 6.4}) => {
+  const f = useCurrentFrame();
+  const tam = caber(texto, tamanho, FAM_A, 888, 800, -0.03);
+  const pts = useMemo<Pt[]>(() => {
+    if (typeof document === 'undefined') return [];
+    const c = document.createElement('canvas');
+    c.width = LARGURA; c.height = Math.ceil(tam * 1.4);
+    const ctx = c.getContext('2d');
+    if (!ctx) return [];
+    ctx.fillStyle = '#000';
+    ctx.font = `800 ${tam}px "${FAM_A}"`;
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText(texto, LARGURA / 2, c.height / 2);
+    const dados = ctx.getImageData(0, 0, c.width, c.height).data;
+    const r: Pt[] = [];
+    for (let py = 0; py < c.height; py += passo) for (let px = 0; px < c.width; px += passo) if (dados[(py * c.width + px) * 4 + 3] > 128) r.push({x: px, y: py - c.height / 2 + y});
+    return r;
+  }, [texto, tam, passo, y]);
+  void FONTE_A; void ALTURA;
+  if (f < inicio) return null;
+  const q = f - inicio;
+  return <svg width={LARGURA} height={ALTURA} viewBox={`0 0 ${LARGURA} ${ALTURA}`} style={{position: 'absolute', inset: 0, overflow: 'visible'}}>
+    {pts.map((p, i) => {
+      const atraso = (p.x / LARGURA) * 10 + rnd(i) * 4, t = e5(seg(q, atraso, atraso + 20));
+      const ox = 540 + (rnd(i * 3 + 1) - 0.5) * 1400, oy = y + (rnd(i * 5 + 2) - 0.5) * 1300;
+      const treme = t >= 1 ? Math.sin(q / 6 + i) * 1.8 : 0;
+      const onda = Math.max(0, 1 - Math.abs((q * 22 - 200 - p.x * 1) % 1400 - p.x) / 120);
+      const r = ponto * (0.3 + 0.7 * ob(seg(q, atraso, atraso + 16), 1.7)) * (1 + onda * 0.5);
+      return <circle key={i} cx={ox + (p.x - ox) * t + treme} cy={oy + (p.y - oy) * t + treme} r={r} fill={i % 12 === 0 ? destaque : cor} opacity={0.4 + 0.6 * t} />;
+    })}
+  </svg>;
+};

package/kits/pontos-3d/elementos/TituloSora.tsx

@@ -0,0 +1,36 @@
+// TituloSora: linhas em Sora 800 que sobem de uma máscara com overshoot e desfoque; um cursor laranja
+// quadrado pisca ao lado da última linha.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FAM_A, FONTE_A, LARGURA_UTIL, caber, e5, lerp, ob, seg} from './base';
+
+export type TituloSoraProps = {
+  linhas: string[];
+  y?: number;
+  tamanho?: number;
+  inicio?: number;
+  intervalo?: number;
+  cor?: string;
+  /** mostra o cursor laranja na última linha */
+  cursor?: boolean;
+  fim?: number;
+};
+
+export const TituloSora: React.FC<TituloSoraProps> = ({linhas, y = 700, tamanho = 190, inicio = 0, intervalo = 9, cor = COR.branco, cursor = true, fim}) => {
+  const f = useCurrentFrame();
+  const sai = fim === undefined ? 0 : e5(seg(f, fim, fim + 10));
+  if (sai >= 1) return null;
+  const tam = Math.min(...linhas.map((l) => caber(l, tamanho, FAM_A, LARGURA_UTIL - (cursor ? tamanho * 0.3 : 0), 800, -0.03)));
+  const passo = tam * 1.08, topo = y - ((linhas.length - 1) * passo) / 2;
+  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai}}>
+    {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 ultima = i === linhas.length - 1, pisca = Math.floor(f / 8) % 2 === 0 || f < em + 24;
+      return <div key={i} style={{position: 'absolute', left: 0, width: 1080, top: topo + i * passo - tam * 0.6, height: tam * 1.2, overflow: 'hidden', textAlign: 'center'}}>
+        <div style={{transform: `translateY(${(1 - p) * 110}%)`, filter: q < 1 ? `blur(${(1 - q) * 10}px)` : undefined, fontFamily: FONTE_A, fontWeight: 800, fontSize: tam, lineHeight: 1.2, letterSpacing: `${lerp(0.06, -0.03, q)}em`, color: cor, whiteSpace: 'nowrap'}}>
+          {l}{cursor && ultima && <span style={{display: 'inline-block', width: tam * 0.16, height: tam * 0.7, marginLeft: tam * 0.08, background: COR.laranja, verticalAlign: 'baseline', opacity: pisca ? 1 : 0}} />}
+        </div>
+      </div>;
+    })}
+  </div>;
+};

package/kits/pontos-3d/elementos/base.ts

@@ -0,0 +1,92 @@
+// Base do kit pontos-3d: 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/sora-latin.woff2';
+import fonteB from '../assets/fontes/jetbrains-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 = {
+  azul: '#1237FF',
+  azulEscuro: '#0A1FB8',
+  azulClaro: '#3F5CFF',
+  branco: '#FFFFFF',
+  laranja: '#FF5A36',
+  gelo: '#DDE4FF',
+};
+
+/** caixa do herói em perspectiva: distância focal da câmera dos pontos */
+export const FOCAL = 1400;
+
+// ---------- fonte ----------
+// Famílias com o prefixo do kit, pra não colidir com outro kit no mesmo estúdio.
+export const FAM_A = 'PT Sora';
+export const FONTE_A = '"PT Sora", system-ui, sans-serif';
+export const FAM_B = 'PT JetBrains Mono';
+export const FONTE_B = '"PT JetBrains Mono", ui-monospace, monospace';
+
+// 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>).__ptA) {
+  (globalThis as Record<string, unknown>).__ptA = true;
+  const hA = delayRender('pontos-3d: PT Sora');
+  new FontFace('PT Sora', `url(${fonteA}) format('woff2')`, {weight: '500 800', 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>).__ptB) {
+  (globalThis as Record<string, unknown>).__ptB = true;
+  const hB = delayRender('pontos-3d: PT JetBrains Mono');
+  new FontFace('PT JetBrains Mono', `url(${fonteB}) format('woff2')`, {weight: '500 800', 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;
+
+// ---------- 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/pontos-3d/elementos/index.ts

@@ -0,0 +1,15 @@
+// Tudo que o kit pontos-3d 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 {NuvemDePontos} from './NuvemDePontos';
+export {TextoDePontos} from './TextoDePontos';
+export {TituloSora} from './TituloSora';
+export {Contador} from './Contador';
+export {RotuloPonto} from './RotuloPonto';
+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/pontos-3d/exemplos/logo-malha.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="100" cy="100" r="92" fill="#fff"/><g fill="#1237FF"><circle cx="60" cy="60" r="9"/><circle cx="100" cy="60" r="9"/><circle cx="140" cy="60" r="9"/><circle cx="60" cy="100" r="9"/><circle cx="100" cy="100" r="9"/><circle cx="140" cy="100" r="9"/><circle cx="60" cy="140" r="9"/><circle cx="100" cy="140" r="9"/></g><circle cx="140" cy="140" r="11" fill="#FF5A36"/></svg>

package/kits/pontos-3d/exemplos/plano.json

@@ -0,0 +1,46 @@
+{
+  "kit": "pontos-3d",
+  "roteiro": "exemplos/roteiro.md",
+  "duracao": 240,
+  "trilha": {"volume": 0.55},
+  "cenas": [
+    {"batida": "gancho", "de": 0, "ate": 40, "entrada": "nenhuma",
+     "camadas": [
+       {"elemento": "NuvemDePontos", "props": {"formas": ["grade", "esfera"], "trocas": [16], "duracaoTroca": 22, "x": 540, "y": 700, "raio": 340, "inicio": 0}}
+     ],
+     "socos": [26],
+     "sons": [{"som": "whoosh", "em": 0}, {"som": "varre", "em": 15}, {"som": "impacto", "em": 28}]},
+    {"batida": "virada", "de": 40, "ate": 80, "entrada": "zoom",
+     "camadas": [
+       {"elemento": "TextoDePontos", "props": {"texto": "MALHA", "y": 680, "tamanho": 300, "inicio": 2, "passo": 12}},
+       {"elemento": "RotuloPonto", "props": {"texto": "dados ao vivo", "x": 540, "y": 1130, "alvo": [540, 880], "inicio": 26}}
+     ],
+     "socos": [26],
+     "sons": [{"som": "tick", "em": 2}, {"som": "impacto", "em": 24}, {"som": "pop", "em": 27}]},
+    {"batida": "prova", "de": 80, "ate": 115, "entrada": "subir",
+     "camadas": [
+       {"elemento": "Contador", "props": {"valor": 12480, "legenda": "pontos por segundo", "y": 640, "tamanho": 260, "inicio": 0, "duracao": 24}}
+     ],
+     "socos": [24],
+     "sons": [{"som": "subida", "em": 0}, {"som": "impacto", "em": 24}]},
+    {"batida": "prova", "de": 115, "ate": 155, "entrada": "direita",
+     "camadas": [
+       {"elemento": "NuvemDePontos", "props": {"formas": ["esfera", "cubo"], "trocas": [10], "duracaoTroca": 22, "x": 540, "y": 640, "raio": 330, "inicio": 0}},
+       {"elemento": "TituloSora", "props": {"linhas": ["em qualquer tela"], "y": 1140, "tamanho": 100, "inicio": 20, "cursor": false}}
+     ],
+     "socos": [12],
+     "sons": [{"som": "whoosh", "em": 0}, {"som": "varre", "em": 9}, {"som": "pop", "em": 20}]},
+    {"batida": "data", "de": 155, "ate": 190, "entrada": "zoom",
+     "camadas": [
+       {"elemento": "TituloSora", "props": {"linhas": ["5 de", "dezembro"], "y": 700, "tamanho": 200, "inicio": 2, "intervalo": 9}}
+     ],
+     "socos": [3, 12],
+     "sons": [{"som": "whoosh", "em": -1}, {"som": "impacto", "em": 12}]},
+    {"batida": "marca", "de": 190, "ate": 240, "entrada": "zoom",
+     "camadas": [
+       {"elemento": "AssinaturaMarca", "props": {"logo": "logo-malha.svg", "nome": "malha", "endereco": "malha.exemplo", "inicio": 0}}
+     ],
+     "socos": [8, 32],
+     "sons": [{"som": "assinatura", "em": 4}, {"som": "tick", "em": 10}, {"som": "clique", "em": 42}]}
+  ]
+}

package/kits/pontos-3d/exemplos/roteiro.md

@@ -0,0 +1,20 @@
+# Roteiro de demonstração · "Malha" (painel de dados fictício)
+
+Pedido: *"um reels de 8 s anunciando o Malha, painel de dados em tempo real, 12.480 pontos por segundo, lançamento dia 5 de dezembro. Estilo campo de pontos."*
+
+Sem narração: os cortes seguem a trilha (1 batida = 15 quadros).
+
+| # | batida | tempo (quadros) | na tela | elemento | som |
+|---|---|---|---|---|---|
+| 1 | gancho | 0–40 | a nuvem vira de grade em esfera | NuvemDePontos | whoosh, varre, impacto |
+| 2 | virada | 40–80 | "MALHA" em pontos + rótulo "dados ao vivo" | TextoDePontos + RotuloPonto | tick, impacto, pop |
+| 3 | prova | 80–115 | contador 12.480 "pontos por segundo" | Contador | subida, impacto |
+| 4 | prova | 115–155 | esfera vira cubo + "em qualquer tela" | NuvemDePontos + TituloSora | whoosh, varre |
+| 5 | data | 155–190 | "5 de / dezembro" | TituloSora | whoosh, impacto |
+| 6 | marca | 190–240 | logo + "malha" em pontos + "malha.exemplo" | AssinaturaMarca | assinatura, tick, clique |
+
+Como a IA chegou nisso:
+1. Cortou o pedido em: forma, nome, número, segunda forma, data.
+2. Pegou as batidas obrigatórias e deu um herói de pontos diferente a cada uma (nuvem, texto, contador, nuvem).
+3. Deixou só um apoio por cena e uma pausa depois de cada troca.
+4. Escreveu `plano.json`; o `preview.tsx` passa o plano para `Montagem`.

package/kits/pontos-3d/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-pontos-3d`.
+import React from 'react';
+import {Montagem, Plano} from './elementos';
+import plano from './exemplos/plano.json';
+import l0 from './exemplos/logo-malha.svg';
+
+const arquivos: Record<string, string> = {'logo-malha.svg': l0};
+
+const Preview: React.FC = () => <Montagem plano={plano as Plano} arquivos={arquivos} />;
+
+export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 100, Componente: Preview};

package/kits/pontos-3d/receita.json

@@ -0,0 +1,153 @@
+{
+  "kit": "pontos-3d",
+  "fps": 30,
+  "batida_trilha_quadros": 15,
+  "duracao_video_s": [
+    6,
+    45
+  ],
+  "ordem_sugerida": [
+    "gancho",
+    "virada",
+    "prova",
+    "data",
+    "marca"
+  ],
+  "batidas": [
+    {
+      "nome": "gancho",
+      "obrigatoria": true,
+      "duracao": [
+        40,
+        60
+      ],
+      "elementos": [
+        "NuvemDePontos"
+      ],
+      "entrada": [
+        "nenhuma"
+      ],
+      "sons": [
+        "whoosh",
+        "varre",
+        "impacto"
+      ],
+      "nota": "herói: a nuvem vira de grade em esfera no meio da cena."
+    },
+    {
+      "nome": "virada",
+      "obrigatoria": true,
+      "duracao": [
+        40,
+        60
+      ],
+      "elementos": [
+        "TextoDePontos",
+        "RotuloPonto"
+      ],
+      "entrada": [
+        "zoom"
+      ],
+      "sons": [
+        "tick",
+        "impacto",
+        "pop"
+      ],
+      "nota": "o nome do produto se monta em pontos; um rótulo de apoio."
+    },
+    {
+      "nome": "prova",
+      "obrigatoria": true,
+      "duracao": [
+        33,
+        54
+      ],
+      "elementos": [
+        "Contador",
+        "NuvemDePontos",
+        "TituloSora",
+        "RotuloPonto"
+      ],
+      "entrada": [
+        "subir",
+        "direita"
+      ],
+      "sons": [
+        "subida",
+        "impacto",
+        "whoosh"
+      ],
+      "nota": "um número que conta, ou a nuvem em outra forma + uma linha de título."
+    },
+    {
+      "nome": "data",
+      "obrigatoria": false,
+      "duracao": [
+        30,
+        48
+      ],
+      "elementos": [
+        "TituloSora"
+      ],
+      "entrada": [
+        "zoom"
+      ],
+      "sons": [
+        "whoosh",
+        "impacto"
+      ],
+      "nota": "data em 2 linhas, sozinha."
+    },
+    {
+      "nome": "marca",
+      "obrigatoria": true,
+      "duracao": [
+        48,
+        90
+      ],
+      "elementos": [
+        "AssinaturaMarca"
+      ],
+      "entrada": [
+        "zoom"
+      ],
+      "sons": [
+        "assinatura",
+        "tick",
+        "clique"
+      ],
+      "nota": "sempre a última. Logo + nome em pontos + endereço."
+    }
+  ],
+  "transicoes": [
+    {
+      "nome": "zoom",
+      "quadros": 14,
+      "como": "entra de 1,9x para 1 com desfoque 10 px"
+    },
+    {
+      "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 de 6% no vídeo",
+    "socos": "troca de forma e fim da contagem"
+  },
+  "trilha": {
+    "arquivo": "assets/trilha/tech-120bpm.mp3",
+    "volume": 0.55,
+    "com_narracao": 0.28
+  }
+}

package/kits/pontos-3d/regras/area-segura.md

@@ -0,0 +1,17 @@
+# Á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) | 620–740 |
+| título de 1–2 linhas | 660–720 |
+| apoio (título ou rótulo) | 1100–1200 |
+| logo na assinatura | 540 |
+| nome em pontos | 900 |
+| endereço | 1130 |
+
+- Só o azul e as cruzes do fundo sangram; a nuvem fica dentro das margens de 96 px.

package/kits/pontos-3d/regras/cor.md

@@ -0,0 +1,21 @@
+# Cor
+
+| token | hex | uso |
+|---|---|---|
+| `azul` | #1237FF | chão |
+| `azulEscuro` | #0A1FB8 | cantos e vinheta |
+| `azulClaro` | #3F5CFF | cruzes do fundo e pontos distantes |
+| `branco` | #FFFFFF | pontos e texto |
+| `laranja` | #FF5A36 | ponto de destaque, cursor, anel do rótulo |
+| `gelo` | #DDE4FF | texto secundário e rótulos |
+
+## Degradês e sombras
+
+- Fundo: `radial-gradient(90% 55% at 50% 40%, #2A4BFF 0%, #1237FF 55%, #0A1FB8 100%)`.
+- Cruzes: `+` de 14 px a 10% de branco, passo de 90 px, andando 0,35 px/quadro.
+- Ponto: branco; profundidade = raio × (1400 / (1400 − z)) e opacidade 0,35–1.
+- Ponto de destaque: a cada 12 pontos, `#FF5A36`, 1,35× maior.
+
+## O que o cliente pode trocar
+
+O azul-elétrico pode ser a cor da marca (um tom saturado e escuro); o laranja vira a cor de apoio. Branco e a regra "só ponto" não mudam.

package/kits/pontos-3d/regras/movimento.md

@@ -0,0 +1,19 @@
+# Movimento
+
+Curva padrão: `ob(t, 1,7)` para entradas, `e5(t) = 1 − (1 − t)^5` para trocas de forma. Cada ponto tem atraso próprio de até 40% da troca.
+
+| movimento | duração | valores |
+|---|---|---|
+| troca de forma | 24 quadros | cada ponto vai da posição A à B com `e5`, atraso 0–40% por ponto |
+| giro da nuvem | contínuo | rotateY 1,1°/quadro, inclinação 18° |
+| onda da grade | contínuo | amplitude 60 px, comprimento 380 px, 0,12 rad/quadro |
+| nuvem entra | 16 quadros | escala 0,3 → 1 com overshoot 1,7 |
+| texto de pontos | 28 quadros | cada ponto voa de uma nuvem solta até a letra; atraso por posição X até 10 quadros |
+| contador | 40 quadros | valor 0 → alvo com `e5`, dígitos mono tabulares |
+| rótulo | 12 + 10 quadros | linha desenha em 12, anel pulsa depois a cada 24 |
+| título | 18 quadros | sobe de máscara com overshoot 1,5 |
+| entrada de cena | 14 quadros | `zoom` 1,9× · `subir` 300 px · `direita` 800 px |
+| câmera (sempre) | contínuo | zoom 1,02 + 0,0003/quadro ± 0,012; soco +0,025 |
+
+- Pausa de 15–24 quadros depois de cada troca de forma e do fim da contagem.
+- A nuvem tem 900 pontos (cubo: 6 faces de 150).