primocode 10.17.1 → 11.0.0

package/kits/stripe-ondas/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/stripe-ondas/elementos/TituloLimpo.tsx

@@ -0,0 +1,27 @@
+// TituloLimpo: título centrado em Inter 700 azul-marinho. Cada palavra sobe de uma máscara com desfoque e overshoot;
+// `*palavra*` é pintada com o degradê coral → rosa (só uma por linha).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_D, caber, eb, partes, seg} from './base';
+
+export type TituloLimpoProps = {linhas: string[]; inicio?: number; intervalo?: number; y?: number; tamanho?: number; cor?: string; fim?: number};
+
+export const TituloLimpo: React.FC<TituloLimpoProps> = ({linhas, inicio = 0, intervalo = 3, y = 420, tamanho = 150, cor = COR.tinta, fim}) => {
+  const f = useCurrentFrame();
+  const tams = linhas.map((l) => caber(l, tamanho, 880, 700, -0.04));
+  const passo = tams.map((t) => t * 1.06), total = passo.reduce((a, b) => a + b, 0);
+  const sai = fim === undefined ? 0 : seg(f, fim, fim + 10);
+  let n = 0;
+  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `translateY(${-sai * 100}px)`}}>
+    {linhas.map((l, i) => {
+      const top = y - total / 2 + passo.slice(0, i).reduce((a, b) => a + b, 0);
+      return <div key={i} style={{position: 'absolute', left: 0, right: 0, top, height: passo[i], display: 'flex', justifyContent: 'center', overflow: 'hidden', fontFamily: FONTE_D, fontWeight: 700, fontSize: tams[i], lineHeight: `${passo[i]}px`, letterSpacing: '-0.04em', whiteSpace: 'pre'}}>
+        {partes(l).flatMap((p) => p.t.split(/(\s+)/).filter(Boolean).map((w) => ({w, d: p.d}))).map((p, j) => {
+          const e = /^\s+$/.test(p.w) ? 1 : eb(seg(f, inicio + n++ * intervalo, inicio + n * intervalo + 13));
+          return <span key={j} style={{display: 'inline-block', transform: `translateY(${(1 - e) * 105}%)`, filter: e < 0.95 ? `blur(${(1 - e) * 8}px)` : undefined,
+            ...(p.d ? {backgroundImage: `linear-gradient(100deg, ${COR.coral}, ${COR.rosa})`, WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent'} : {color: cor})}}>{p.w}</span>;
+        })}
+      </div>;
+    })}
+  </div>;
+};

package/kits/stripe-ondas/elementos/base.ts

@@ -0,0 +1,85 @@
+// Base do kit stripe-ondas: 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/dm-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: '#F6F9FC',
+  topo: '#EAF0F7',
+  tinta: '#0A2540',
+  mute: '#6B7C93',
+  coral: '#FF7A59',
+  ambar: '#FFB84D',
+  rosa: '#F25BA6',
+  ciano: '#27C9E0',
+  destaque: '#FF7A59',
+  cortina: '#FF7A59',
+};
+
+// ---------- fonte ----------
+// Famílias com o prefixo do kit (SO), pra não colidir com outro kit no mesmo estúdio.
+export const FONTE_D = '"SO Inter", "Inter", system-ui, sans-serif';
+export const FONTE_T = '"SO DM Mono", "DM Mono", ui-monospace, monospace';
+export const FONTE_S = '"SO DM Mono", "DM Mono", ui-monospace, monospace';
+const LISTA = [
+  {fam: 'SO Inter', url: f0Url, peso: '500 800', estilo: 'normal'},
+  {fam: 'SO DM Mono', url: f1Url, peso: '500', estilo: 'normal'},
+];
+if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__kit_SO) {
+  (globalThis as Record<string, unknown>).__kit_SO = true;
+  for (const f of LISTA) {
+    const h = delayRender('stripe-ondas: ' + 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.03, "zOsc": 0.012, "push": 0.0004, "dx": 14, "dy": 12, "rot": 0.005, "soco": 0.03};

package/kits/stripe-ondas/elementos/index.ts

@@ -0,0 +1,16 @@
+// Tudo que o kit stripe-ondas 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 {CartaoPagamento} from './CartaoPagamento';
+export {FaixaDeOndas} from './FaixaDeOndas';
+export {GraficoOnda} from './GraficoOnda';
+export {PainelCodigo} from './PainelCodigo';
+export {SelosDeMetodo} from './SelosDeMetodo';
+export {TituloLimpo} from './TituloLimpo';
+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/stripe-ondas/exemplos/logo-cais.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FF7A59"/><stop offset="0.6" stop-color="#F25BA6"/><stop offset="1" stop-color="#27C9E0"/></linearGradient></defs><rect width="300" height="300" rx="70" fill="url(#g)"/><path d="M50 170 C90 110 130 230 170 160 S240 120 255 140" fill="none" stroke="#fff" stroke-width="26" stroke-linecap="round"/></svg>

package/kits/stripe-ondas/exemplos/plano.json

@@ -0,0 +1,366 @@
+{
+ "kit": "stripe-ondas",
+ "roteiro": "exemplos/roteiro.md",
+ "duracao": 240,
+ "trilha": {
+  "volume": 0.5
+ },
+ "cenas": [
+  {
+   "batida": "gancho",
+   "de": 0,
+   "ate": 42,
+   "entrada": "nenhuma",
+   "camadas": [
+    {
+     "elemento": "FaixaDeOndas",
+     "props": {
+      "y": 1130,
+      "altura": 900,
+      "inicio": 0,
+      "amplitude": 130
+     }
+    },
+    {
+     "elemento": "TituloLimpo",
+     "props": {
+      "linhas": [
+       "Pagar ficou",
+       "*simples.*"
+      ],
+      "inicio": 2,
+      "y": 460,
+      "tamanho": 170
+     }
+    }
+   ],
+   "socos": [
+    16
+   ],
+   "sons": [
+    {
+     "som": "whoosh-entra",
+     "em": 0
+    },
+    {
+     "som": "pop-palavra",
+     "em": 6
+    },
+    {
+     "som": "impacto",
+     "em": 16
+    }
+   ]
+  },
+  {
+   "batida": "cartao",
+   "de": 42,
+   "ate": 84,
+   "entrada": "subir",
+   "camadas": [
+    {
+     "elemento": "FaixaDeOndas",
+     "props": {
+      "y": 1280,
+      "altura": 520,
+      "inicio": 0,
+      "variacao": "fria",
+      "amplitude": 90,
+      "opacidade": 0.9
+     }
+    },
+    {
+     "elemento": "CartaoPagamento",
+     "props": {
+      "valor": 249.9,
+      "rotulo": "Pagamento · Pedido 1042",
+      "status": "Aprovado",
+      "itens": [
+       {
+        "nome": "Plano anual",
+        "preco": "R$ 229,90"
+       },
+       {
+        "nome": "Taxa",
+        "preco": "R$ 20,00"
+       }
+      ],
+      "inicio": 2,
+      "y": 640
+     }
+    }
+   ],
+   "socos": [
+    20
+   ],
+   "sons": [
+    {
+     "som": "whoosh-entra",
+     "em": -1
+    },
+    {
+     "som": "pop-cartao",
+     "em": 8
+    },
+    {
+     "som": "clique",
+     "em": 26
+    }
+   ]
+  },
+  {
+   "batida": "metodos",
+   "de": 84,
+   "ate": 124,
+   "entrada": "zoom",
+   "camadas": [
+    {
+     "elemento": "SelosDeMetodo",
+     "props": {
+      "itens": [
+       {
+        "nome": "Pix",
+        "tag": "na hora"
+       },
+       {
+        "nome": "Cartão",
+        "tag": "12x"
+       },
+       {
+        "nome": "Boleto",
+        "tag": "3 dias"
+       },
+       {
+        "nome": "Carteira",
+        "tag": "1 toque"
+       }
+      ],
+      "inicio": 0,
+      "y": 700
+     }
+    },
+    {
+     "elemento": "TituloLimpo",
+     "props": {
+      "linhas": [
+       "Todo *método.*"
+      ],
+      "inicio": 14,
+      "y": 1270,
+      "tamanho": 110
+     }
+    }
+   ],
+   "socos": [
+    14,
+    26
+   ],
+   "sons": [
+    {
+     "som": "whoosh-entra",
+     "em": -1
+    },
+    {
+     "som": "pop-cartao",
+     "em": 2
+    },
+    {
+     "som": "pop-cartao",
+     "em": 8
+    },
+    {
+     "som": "pop-cartao",
+     "em": 14
+    }
+   ]
+  },
+  {
+   "batida": "codigo",
+   "de": 124,
+   "ate": 164,
+   "entrada": "direita",
+   "camadas": [
+    {
+     "elemento": "PainelCodigo",
+     "props": {
+      "titulo": "cobrar.js",
+      "inicio": 0,
+      "y": 700,
+      "ritmo": 1.7,
+      "linhas": [
+       [
+        {
+         "t": "cais",
+         "c": "rosa"
+        },
+        {
+         "t": ".cobrar({",
+         "c": "branco"
+        }
+       ],
+       [
+        {
+         "t": "  valor: ",
+         "c": "ciano"
+        },
+        {
+         "t": "249.90",
+         "c": "ambar"
+        },
+        {
+         "t": ",",
+         "c": "mute"
+        }
+       ],
+       [
+        {
+         "t": "  metodo: ",
+         "c": "ciano"
+        },
+        {
+         "t": "\"pix\"",
+         "c": "ambar"
+        },
+        {
+         "t": ",",
+         "c": "mute"
+        }
+       ],
+       [
+        {
+         "t": "  moeda: ",
+         "c": "ciano"
+        },
+        {
+         "t": "\"brl\"",
+         "c": "ambar"
+        }
+       ],
+       [
+        {
+         "t": "})",
+         "c": "branco"
+        }
+       ]
+      ]
+     }
+    },
+    {
+     "elemento": "TituloLimpo",
+     "props": {
+      "linhas": [
+       "Cinco linhas."
+      ],
+      "inicio": 10,
+      "y": 1280,
+      "tamanho": 110
+     }
+    }
+   ],
+   "socos": [
+    16
+   ],
+   "sons": [
+    {
+     "som": "whoosh-entra",
+     "em": -1
+    },
+    {
+     "som": "clique",
+     "em": 8
+    },
+    {
+     "som": "clique",
+     "em": 16
+    },
+    {
+     "som": "clique",
+     "em": 24
+    }
+   ]
+  },
+  {
+   "batida": "prova",
+   "de": 164,
+   "ate": 204,
+   "entrada": "esquerda",
+   "camadas": [
+    {
+     "elemento": "GraficoOnda",
+     "props": {
+      "valor": 38,
+      "prefixo": "+",
+      "sufixo": "%",
+      "rotulo": "receita em 6 meses",
+      "serie": [
+       10,
+       14,
+       13,
+       22,
+       24,
+       31,
+       44
+      ],
+      "inicio": 0,
+      "y": 740
+     }
+    }
+   ],
+   "socos": [
+    18
+   ],
+   "sons": [
+    {
+     "som": "swoosh",
+     "em": -1
+    },
+    {
+     "som": "pop-cartao",
+     "em": 6
+    },
+    {
+     "som": "impacto",
+     "em": 26
+    }
+   ]
+  },
+  {
+   "batida": "marca",
+   "de": 204,
+   "ate": 240,
+   "entrada": "zoom",
+   "camadas": [
+    {
+     "elemento": "FaixaDeOndas",
+     "props": {
+      "y": 1500,
+      "altura": 480,
+      "inicio": 0,
+      "amplitude": 100
+     }
+    },
+    {
+     "elemento": "AssinaturaMarca",
+     "props": {
+      "logo": "logo-cais.svg",
+      "nome": "Cais",
+      "detalhe": "Receba sem atrito.",
+      "endereco": "cais.exemplo",
+      "inicio": 2,
+      "y": 560
+     }
+    }
+   ],
+   "sons": [
+    {
+     "som": "assinatura",
+     "em": 4
+    },
+    {
+     "som": "clique",
+     "em": 22
+    }
+   ]
+  }
+ ]
+}

package/kits/stripe-ondas/exemplos/roteiro.md

@@ -0,0 +1,20 @@
+# Roteiro de demonstração · Cais (produto fictício)
+
+Pedido: *"um reels de 8 s do Cais, plataforma de pagamentos pra lojas online. Ondas de cor, visual limpo."*
+
+Sem narração: os cortes seguem a trilha (1 batida = 15.0 quadros).
+
+| # | batida | quadros | na tela | elemento | som |
+|---|---|---|---|---|---|
+| 1 | gancho | 0–42 | ondas + "Pagar ficou *simples.*" | FaixaDeOndas + TituloLimpo | whoosh-entra, pop-palavra, impacto |
+| 2 | cartao | 42–84 | cartão R$ 249,90 aprovado | FaixaDeOndas + CartaoPagamento | whoosh-entra, pop-cartao, clique |
+| 3 | metodos | 84–124 | pílulas Pix · Cartão · Boleto · Carteira | SelosDeMetodo + TituloLimpo | whoosh-entra, pop-cartao, pop-cartao, pop-cartao |
+| 4 | codigo | 124–164 | código cais.cobrar com 5 linhas | PainelCodigo + TituloLimpo | whoosh-entra, clique, clique, clique |
+| 5 | prova | 164–204 | "+38%" receita em 6 meses | GraficoOnda | swoosh, pop-cartao, impacto |
+| 6 | marca | 204–240 | logo Cais + "Receba sem atrito." | FaixaDeOndas + AssinaturaMarca | assinatura, clique |
+
+Como a IA chegou nisso:
+1. Cortou o pedido em dor, produto, métodos, código, prova e marca.
+2. Usou a faixa de ondas como herói no gancho e como chão nas outras cenas.
+3. Encaixou os cortes nas batidas de 15 quadros.
+4. O `preview.tsx` entrega o plano à `Montagem`.

package/kits/stripe-ondas/preview.tsx

@@ -0,0 +1,12 @@
+// Preview do kit: a demo (8 s) montada SÓ com os elementos do kit, a partir de exemplos/plano.json.
+// O estúdio registra isto como `Kit-stripe-ondas`.
+import React from 'react';
+import {Montagem, Plano} from './elementos';
+import plano from './exemplos/plano.json';
+import logo from './exemplos/logo-cais.svg';
+
+const arquivos: Record<string, string> = {'logo-cais.svg': logo};
+
+const Preview: React.FC = () => <Montagem plano={plano as Plano} arquivos={arquivos} />;
+
+export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 50, Componente: Preview};