primocode 10.17.1 → 11.0.0

package/kits/saas-linear/elementos/Monitor.tsx

@@ -0,0 +1,28 @@
+// Monitor: o aparelho que segura a tela do produto. Borda fina escura, pé e base, sombra macia na parede.
+// A tela (1500 x 940) é creme, com uma luz que cai do canto de cima. As cenas vivem dentro dela.
+// `semAparelho`: só a tela, sem borda nem pé (pra quem não quer o monitor).
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {CENTRO_VIDEO, COR, TELA} from './base';
+
+export type MonitorProps = {semAparelho?: boolean; borda?: number; children?: React.ReactNode};
+
+export const Monitor: React.FC<MonitorProps> = ({semAparelho = false, borda = 20, children}) => {
+  const x0 = CENTRO_VIDEO.x - TELA.w / 2, y0 = CENTRO_VIDEO.y - TELA.h / 2;
+  const b = semAparelho ? 0 : borda;
+  return <AbsoluteFill>
+    {!semAparelho && <>
+      <div style={{position: 'absolute', left: CENTRO_VIDEO.x - 34, top: y0 + TELA.h + b - 10, width: 68, height: 300,
+        background: 'linear-gradient(90deg, #110F0E, #24211E 45%, #110F0E)'}} />
+      <div style={{position: 'absolute', left: CENTRO_VIDEO.x - 260, top: y0 + TELA.h + b + 280, width: 520, height: 46, borderRadius: 14,
+        background: 'linear-gradient(180deg, #3A3530, #161412)', boxShadow: '0 30px 60px rgba(0,0,0,0.6)'}} />
+      <div style={{position: 'absolute', left: x0 - b, top: y0 - b, width: TELA.w + b * 2, height: TELA.h + b * 2, borderRadius: 18,
+        background: COR.moldura, boxShadow: '0 60px 140px rgba(0,0,0,0.55), 0 0 0 2px #2A2724, inset 0 1px 0 rgba(255,255,255,0.08)'}} />
+    </>}
+    <div style={{position: 'absolute', left: x0, top: y0, width: TELA.w, height: TELA.h, overflow: 'hidden', background: COR.tela,
+      borderRadius: semAparelho ? 0 : 4}}>
+      {children}
+      <AbsoluteFill style={{pointerEvents: 'none', background: 'linear-gradient(165deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 35%, rgba(60,40,20,0.07) 100%)'}} />
+    </div>
+  </AbsoluteFill>;
+};

package/kits/saas-linear/elementos/Montagem.tsx

@@ -0,0 +1,67 @@
+// 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(chaves do plano) + Monitor + Cenas (dentro da tela) + sons.
+// Formato: exemplos/plano.json. `camera`: [{em, z, x?, y?}] absolutos. `moldura: false` = só a tela, sem monitor.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {COR} from './base';
+import {Fundo} from './Fundo';
+import {Camera, ChaveCamera} from './Camera';
+import {Monitor} from './Monitor';
+import {Cena, Entrada} from './Cena';
+import {Efeito, NomeSom, Trilha} from './Som';
+import {Agenda} from './Agenda';
+import {CaixaPrompt} from './CaixaPrompt';
+import {CartoesIntegracao} from './CartoesIntegracao';
+import {Cursor} from './Cursor';
+import {FraseSerifa} from './FraseSerifa';
+import {Marca} from './Marca';
+import {MarcaFinal} from './MarcaFinal';
+import {Menu} from './Menu';
+import {Saudacao} from './Saudacao';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {
+  Agenda, CaixaPrompt, CartoesIntegracao, Cursor, FraseSerifa, Marca, MarcaFinal, Menu, Saudacao,
+};
+
+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}[];
+};
+export type Plano = {
+  kit: string; duracao: number; trilha?: {volume?: number} | false;
+  camera?: ChaveCamera[]; moldura?: {semAparelho?: boolean} | false;
+  cenas: CenaPlano[];
+};
+
+/** troca nomes de arquivo ("logo.svg") 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, resolver(x, arquivos)]));
+  return v;
+};
+
+export const Montagem: React.FC<{plano: Plano; arquivos?: Record<string, string>}> = ({plano, arquivos = {}}) => {
+  const ultima = plano.cenas.length - 1;
+  const semAparelho = plano.moldura === false || !!(plano.moldura && plano.moldura.semAparelho);
+  return <AbsoluteFill style={{background: semAparelho ? COR.tela : COR.parede}}>
+    <Fundo claro={semAparelho} />
+    <Camera chaves={semAparelho ? [{em: 0, z: 1}] : plano.camera}>
+      <Monitor semAparelho={semAparelho}>
+        {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(`saas-linear: elemento "${k.elemento}" não existe no kit`);
+            return <El key={j} {...(resolver(k.props, arquivos) as object)} />;
+          })}
+        </Cena>)}
+      </Monitor>
+    </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/saas-linear/elementos/Saudacao.tsx

@@ -0,0 +1,27 @@
+// Saudacao: "✿ Bom dia, Marina" em serifa calma. A flor abre primeiro; as palavras entram uma a uma
+// (desfoque 8 px -> 0, cinza -> tinta, sobe 14 px). Centrada em `x`, linha de base perto de `y` (px da tela).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_S, TELA, caber, e4, seg} from './base';
+import {Marca} from './Marca';
+
+export type SaudacaoProps = {texto: string; x?: number; y?: number; tamanho?: number; inicio?: number; intervalo?: number; marca?: boolean; marcaSrc?: string};
+
+export const Saudacao: React.FC<SaudacaoProps> = ({texto, x = TELA.cx, y = 300, tamanho = 96, inicio = 0, intervalo = 5, marca = true, marcaSrc}) => {
+  const f = useCurrentFrame();
+  const larg = TELA.util.x1 - TELA.util.x0 - (marca ? tamanho : 0);
+  const t = caber(texto, tamanho, larg);
+  const palavras = texto.split(' ');
+  const t0 = inicio + (marca ? 8 : 0);
+  return <div style={{position: 'absolute', left: x, top: y, transform: 'translate(-50%, -50%)', display: 'flex', alignItems: 'center', gap: t * 0.32, whiteSpace: 'nowrap'}}>
+    {marca && <Marca tamanho={t * 0.62} inicio={inicio} src={marcaSrc} />}
+    <div style={{fontFamily: FONTE_S, fontSize: t, color: COR.tinta, letterSpacing: '-0.01em', lineHeight: 1.1}}>
+      {palavras.map((p, i) => {
+        const q = e4(seg(f, t0 + i * intervalo, t0 + i * intervalo + 16));
+        return <span key={i} style={{display: 'inline-block', marginRight: i < palavras.length - 1 ? '0.25em' : 0, opacity: q,
+          filter: q < 0.98 ? `blur(${(1 - q) * 8}px)` : undefined, transform: `translateY(${(1 - q) * 14}px)`,
+          color: q < 1 ? `color-mix(in srgb, ${COR.tinta} ${Math.round(40 + q * 60)}%, ${COR.mute})` : COR.tinta}}>{p}</span>;
+      })}
+    </div>
+  </div>;
+};

package/kits/saas-linear/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/saas-linear/elementos/base.ts

@@ -0,0 +1,84 @@
+// Base do kit saas-linear (v2, "SaaS · produto em ação"): cores, fontes, curvas e medidas.
+// Os elementos importam só este arquivo, 'react' e 'remotion'. Nada de fora da pasta do kit.
+import {continueRender, delayRender} from 'remotion';
+import serifaUrl from '../assets/fontes/newsreader-400.woff2';
+import ui400Url from '../assets/fontes/inter-400.woff2';
+import ui600Url from '../assets/fontes/inter-600.woff2';
+
+// ---------- tela do vídeo ----------
+export const LARGURA = 1080, ALTURA = 1920, FPS = 30;
+export const SEGURA = {topo: 168, base: 1330, lado: 80};
+
+// ---------- a tela do produto (o "monitor") ----------
+// Todo elemento de cena se posiciona em coordenadas da TELA (0..1500 x 0..940), não do vídeo.
+// No plano fechado (zoom 1) a tela aparece 1:1, centrada em x 540 / y 860 do vídeo:
+// o que fica entre x 290 e 1210 da tela cabe na área útil do vídeo (80..1000).
+export const TELA = {w: 1500, h: 940, cx: 750, cy: 470, util: {x0: 290, x1: 1210}};
+export const CENTRO_VIDEO = {x: 540, y: 860};
+
+// ---------- cor ----------
+export const COR = {
+  parede: '#3B1E19',      // fundo atrás do monitor (sala quente, pouca luz)
+  parede2: '#6A3426',     // a luz quente que bate na parede
+  mesa: '#1E1512',
+  moldura: '#141312',     // borda do monitor
+  tela: '#F4F1EA',        // creme da interface
+  cartao: '#FFFFFF',
+  linha: '#E7E2D8',
+  tinta: '#29261F',       // texto principal
+  mute: '#8C877C',        // texto de apoio, placeholder
+  acento: '#D46F4D',      // a marca (flor coral): só na marca e no botão de enviar
+  azul: '#3D7BF0',        // toggle ligado, "Conectado"
+  agenda: ['#E7655A', '#F0A63A', '#3FA86C', '#4B83E6', '#E08A6C'],
+};
+export const SOMBRA = {
+  cartao: '0 2px 4px rgba(41,38,31,0.05), 0 18px 40px rgba(41,38,31,0.10)',
+  menu: '0 4px 10px rgba(41,38,31,0.08), 0 30px 70px rgba(41,38,31,0.16)',
+};
+
+// ---------- fonte ----------
+export const FONTE_S = '"SL Newsreader", Georgia, serif';
+export const FONTE_U = '"SL Inter", system-ui, sans-serif';
+const LISTA = [
+  {fam: 'SL Newsreader', url: serifaUrl, peso: '400', estilo: 'normal'},
+  {fam: 'SL Inter', url: ui400Url, peso: '400', estilo: 'normal'},
+  {fam: 'SL Inter', url: ui600Url, peso: '600', estilo: 'normal'},
+];
+if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__kit_SL2) {
+  (globalThis as Record<string, unknown>).__kit_SL2 = true;
+  for (const f of LISTA) {
+    const h = delayRender('saas-linear: ' + f.fam + ' ' + f.peso);
+    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));
+/** curva padrão do kit: cubic-bezier(.22,1,.36,1) aproximada (saída rápida, pouso longo e preciso) */
+export const e4 = (t: number) => 1 - Math.pow(1 - c01(t), 4);
+/** entra e sai suave (câmera, cursor) */
+export const e3 = (t: number) => {const x = c01(t); return x * x * (3 - 2 * x);};
+/** overshoot pequeno, ~4% (cartões, blocos da agenda) */
+export const eb = (t: number) => {const x = c01(t) - 1, c = 1.4; return 1 + (c + 1) * x * x * x + c * x * x;};
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+/** uma batida da trilha (100 bpm) em quadros */
+export const BATIDA = 18;
+
+// ---------- texto ----------
+let canvas: HTMLCanvasElement | null = null;
+export const larguraTexto = (texto: string, tamanho: number, familia = FONTE_S, peso = 400): number => {
+  if (typeof document === 'undefined') return texto.length * tamanho * 0.5;
+  canvas = canvas || document.createElement('canvas');
+  const ctx = canvas.getContext('2d'); if (!ctx) return texto.length * tamanho * 0.5;
+  ctx.font = `${peso} ${tamanho}px ${familia}`;
+  return ctx.measureText(texto).width;
+};
+/** o maior tamanho até `tamanho` em que o texto cabe em `largura`. Nunca palavra cortada. */
+export const caber = (texto: string, tamanho: number, largura: number, familia = FONTE_S, peso = 400) => {
+  const w = larguraTexto(texto, tamanho, familia, peso);
+  return w > largura ? Math.floor(tamanho * (largura / w)) : tamanho;
+};

package/kits/saas-linear/elementos/index.ts

@@ -0,0 +1,21 @@
+// Tudo que o kit saas-linear (v2, "SaaS · produto em ação") 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 type {ChaveCamera} from './Camera';
+export {Monitor} from './Monitor';
+export {Cena, useDuracaoCena, SOBREPOE} from './Cena';
+export {Agenda} from './Agenda';
+export {CaixaPrompt} from './CaixaPrompt';
+export {CartoesIntegracao} from './CartoesIntegracao';
+export {Cursor} from './Cursor';
+export {FraseSerifa} from './FraseSerifa';
+export {Marca} from './Marca';
+export {MarcaFinal} from './MarcaFinal';
+export {Menu} from './Menu';
+export {Saudacao} from './Saudacao';
+export {Efeito, Trilha, SONS} from './Som';
+export type {NomeSom} from './Som';
+export {Montagem, ELEMENTOS} from './Montagem';
+export type {Plano, CenaPlano, Camada} from './Montagem';