primocode 10.19.0 → 11.0.0

package/materiais/saas-linear/formas/CartoesIntegracao.tsx

@@ -0,0 +1,57 @@
+// CartoesIntegracao: uma fileira de cartões de conector (ícone, nome, o que faz, status + chave).
+// Os cartões sobem em sequência com overshoot pequeno. A chave de cada um liga no quadro `ligaEm`
+// (bolinha corre 8 quadros, trilho vira azul, "Desconectado" -> "Conectado", cartão ganha borda quente).
+// Ícones desenhados: 'correio' 'agenda' 'arquivos' 'chat' 'planilha'. Nunca logo de marca real.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_U, SOMBRA, TELA, e3, eb, seg} from '../base';
+
+export type Cartao = {nome: string; desc?: string; icone?: string; cor?: string; ligaEm?: number | 'ja'};
+export type CartoesIntegracaoProps = {cartoes: Cartao[]; x?: number; y?: number; largura?: number; inicio?: number; intervalo?: number; foco?: number};
+
+const Icone: React.FC<{tipo: string; cor: string}> = ({tipo, cor}) => {
+  const s = {stroke: cor, strokeWidth: 2.2, fill: 'none', strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const};
+  return <svg width="34" height="34" viewBox="0 0 24 24">
+    {tipo === 'correio' && <><rect x="3" y="5" width="18" height="14" rx="2" {...s} /><path d="M3.5 6.5l8.5 6.5 8.5-6.5" {...s} /></>}
+    {tipo === 'agenda' && <><rect x="3" y="5" width="18" height="16" rx="2.5" {...s} /><path d="M3 10h18M8 3v4M16 3v4" {...s} /><rect x="7" y="13" width="4" height="4" rx="1" fill={cor} /></>}
+    {tipo === 'arquivos' && <><path d="M3 7h6l2 2h10v10H3z" {...s} /><path d="M3 12h18" {...s} /></>}
+    {tipo === 'chat' && <path d="M4 5h16v11H9l-5 4z" {...s} />}
+    {tipo === 'planilha' && <><rect x="4" y="3" width="16" height="18" rx="2" {...s} /><path d="M4 9h16M4 15h16M10 3v18" {...s} /></>}
+  </svg>;
+};
+
+export const CartoesIntegracao: React.FC<CartoesIntegracaoProps> = ({cartoes, x = TELA.cx, y = 360, largura = 920, inicio = 0, intervalo = 4, foco}) => {
+  const f = useCurrentFrame();
+  const gap = 24, n = cartoes.length;
+  const w = (largura - gap * (n - 1)) / n;
+  return <div style={{position: 'absolute', left: x - largura / 2, top: y, width: largura, display: 'flex', gap, fontFamily: FONTE_U, alignItems: 'center'}}>
+    {cartoes.map((c, i) => {
+      const t0 = inicio + i * intervalo;
+      const p = eb(seg(f, t0, t0 + 16));
+      const liga = c.ligaEm === 'ja' ? 1 : c.ligaEm === undefined ? 0 : e3(seg(f, c.ligaEm, c.ligaEm + 8));
+      const pulso = typeof c.ligaEm === 'number' ? Math.sin(Math.PI * seg(f, c.ligaEm, c.ligaEm + 10)) : 0;
+      const cor = c.cor ?? COR.agenda[i % COR.agenda.length];
+      const dest = foco === i ? 1.04 : 1;
+      return <div key={i} style={{width: w, background: COR.cartao, borderRadius: 22, padding: '24px 24px 20px', boxShadow: SOMBRA.cartao,
+        border: `1.5px solid ${liga > 0.5 ? '#F0D5C8' : COR.linha}`, opacity: seg(f, t0, t0 + 8),
+        transform: `translateY(${(1 - p) * 40}px) scale(${(0.96 + 0.04 * p) * (dest + pulso * 0.02)})`}}>
+        <div style={{display: 'flex', gap: 16, alignItems: 'center'}}>
+          <div style={{width: 58, height: 58, borderRadius: 16, background: `color-mix(in srgb, ${cor} 13%, white)`, display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none'}}>
+            <Icone tipo={c.icone ?? 'correio'} cor={cor} />
+          </div>
+          <div style={{minWidth: 0}}>
+            <div style={{fontSize: 27, fontWeight: 600, color: COR.tinta, whiteSpace: 'nowrap'}}>{c.nome}</div>
+            {c.desc && <div style={{fontSize: 19, color: COR.mute, marginTop: 4, whiteSpace: 'nowrap'}}>{c.desc}</div>}
+          </div>
+        </div>
+        <div style={{height: 1.5, background: COR.linha, margin: '20px 0 16px'}} />
+        <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
+          <span style={{fontSize: 19, color: liga > 0.5 ? COR.azul : COR.mute}}>{liga > 0.5 ? 'Conectado' : 'Desconectado'}</span>
+          <div style={{width: 64, height: 36, borderRadius: 18, background: `color-mix(in srgb, ${COR.azul} ${Math.round(liga * 100)}%, #DAD5CB)`, position: 'relative'}}>
+            <div style={{position: 'absolute', top: 4, left: 4 + liga * 28, width: 28, height: 28, borderRadius: 14, background: '#fff', boxShadow: '0 2px 5px rgba(0,0,0,0.2)'}} />
+          </div>
+        </div>
+      </div>;
+    })}
+  </div>;
+};

package/materiais/saas-linear/formas/Cursor.tsx

@@ -0,0 +1,40 @@
+// Cursor: a mão que faz as coisas acontecerem. Anda entre `pontos` com curva suave (sem pular),
+// e em cada quadro de `cliques` afunda (escala 0.82) e solta um anel que se abre. Todo clique causa algo:
+// ponha o clique 2 quadros antes do efeito no elemento (chave, menu, botão). Coordenadas em px da tela.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, e3, seg} from '../base';
+
+export type PontoCursor = {em: number; x: number; y: number};
+export type CursorProps = {pontos: PontoCursor[]; cliques?: number[]; inicio?: number; fim?: number; mao?: boolean; tamanho?: number};
+
+export const Cursor: React.FC<CursorProps> = ({pontos, cliques = [], inicio, fim, mao = true, tamanho = 46}) => {
+  const f = useCurrentFrame();
+  const ps = [...pontos].sort((a, b) => a.em - b.em);
+  if (!ps.length) return null;
+  const ini = inicio ?? ps[0].em - 6;
+  let x = ps[0].x, y = ps[0].y;
+  for (let i = 0; i < ps.length - 1; i++) if (f >= ps[i].em) {
+    const t = e3(seg(f, ps[i].em, ps[i + 1].em));
+    x = ps[i].x + (ps[i + 1].x - ps[i].x) * t; y = ps[i].y + (ps[i + 1].y - ps[i].y) * t;
+  }
+  const op = seg(f, ini, ini + 6) * (fim !== undefined ? 1 - seg(f, fim, fim + 6) : 1);
+  let aperto = 1;
+  const aneis: React.ReactNode[] = [];
+  cliques.forEach((c, i) => {
+    aperto -= 0.18 * Math.sin(Math.PI * seg(f, c, c + 7));
+    const r = seg(f, c, c + 14);
+    if (r > 0 && r < 1) aneis.push(<div key={i} style={{position: 'absolute', left: -28 - r * 20, top: -28 - r * 20, width: 56 + r * 40, height: 56 + r * 40,
+      borderRadius: '50%', border: `2.5px solid ${COR.azul}`, opacity: (1 - r) * 0.6}} />);
+  });
+  if (op <= 0) return null;
+  return <div style={{position: 'absolute', left: x, top: y, opacity: op, zIndex: 10}}>
+    {aneis}
+    <svg width={tamanho} height={tamanho} viewBox="0 0 32 32" style={{position: 'absolute', left: mao ? -12 : -4, top: -4, transform: `scale(${aperto})`, transformOrigin: '30% 10%',
+      filter: 'drop-shadow(0 3px 4px rgba(0,0,0,0.25))'}}>
+      {mao
+        ? <path d="M12 3.5c1.2 0 2 .9 2 2v8.2l.6-.1V11c0-1.1.8-1.9 1.9-1.9s1.9.8 1.9 1.9v2.5l.5-.1c.2-1 .9-1.6 1.8-1.6 1.1 0 1.9.8 1.9 1.9v1.6l.4-.1c.3-.7.9-1.1 1.7-1.1 1 0 1.8.8 1.8 1.9v5.4c0 4.2-3.1 7.1-7.4 7.1h-1.7c-2.3 0-4.1-1-5.4-2.8L6.6 19.4c-.6-.9-.4-2.1.5-2.7.8-.5 1.9-.4 2.5.4l.4.5V5.5c0-1.1.9-2 2-2z" fill="#fff" stroke="#1E1C19" strokeWidth="1.5" strokeLinejoin="round" />
+        : <path d="M5 3l20 11.5-8.6 1.9L12 25z" fill="#1E1C19" stroke="#fff" strokeWidth="1.8" strokeLinejoin="round" />}
+    </svg>
+  </div>;
+};

package/materiais/saas-linear/formas/Menu.tsx

@@ -0,0 +1,46 @@
+// Menu: o menu que abre do botão "+". Popover branco, cantos 20 px, sombra longa. Abre a partir do canto
+// (escala 0.92 -> 1 + desfoque) e uma faixa de seleção desce pelos itens nos quadros de `passar`.
+// `x`/`y` = canto de cima à esquerda, em px da tela. Ícones: 'clipe' 'pasta' 'luz' 'plug' 'lupa' 'globo' 'pincel'.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_U, SOMBRA, e3, e4, seg} from '../base';
+
+export type ItemMenu = {texto: string; icone?: string; seta?: boolean; apagado?: boolean};
+export type MenuProps = {itens: ItemMenu[]; x?: number; y?: number; largura?: number; inicio?: number; passar?: {em: number; item: number}[]; fechar?: number};
+
+const ICONES: Record<string, string> = {
+  clipe: 'M15 7l-6.5 6.5a2.5 2.5 0 003.5 3.5L18.5 10a4.5 4.5 0 00-6.4-6.4L5.6 10.1a6.5 6.5 0 009.2 9.2L20 14',
+  pasta: 'M3 7h6l2 2h10v10H3z',
+  luz: 'M9 18h6M10 21h4M12 3a6 6 0 00-3.5 10.9V16h7v-2.1A6 6 0 0012 3z',
+  plug: 'M9 3v5M15 3v5M6 8h12v3a6 6 0 01-12 0zM12 17v4',
+  lupa: 'M11 4a7 7 0 100 14 7 7 0 000-14zM20 20l-4-4',
+  globo: 'M12 3a9 9 0 100 18 9 9 0 000-18zM3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18',
+  pincel: 'M4 20c2 0 4-1 4-3a2 2 0 00-4 0M8 15l11-11 1 1-11 11',
+};
+
+export const Menu: React.FC<MenuProps> = ({itens, x = 330, y = 120, largura = 440, inicio = 0, passar = [], fechar}) => {
+  const f = useCurrentFrame();
+  const p = e4(seg(f, inicio, inicio + 12));
+  const sai = fechar !== undefined ? e4(seg(f, fechar, fechar + 8)) : 0;
+  const alturaItem = 62;
+  let sel = -1, ySel = 0;
+  const ps = [...passar].sort((a, b) => a.em - b.em);
+  for (let i = 0; i < ps.length; i++) if (f >= ps[i].em) {
+    const ant = i > 0 ? ps[i - 1].item : ps[i].item;
+    const t = e3(seg(f, ps[i].em, ps[i].em + 6));
+    sel = ps[i].item; ySel = (ant + (ps[i].item - ant) * t) * alturaItem;
+  }
+  return <div style={{position: 'absolute', left: x, top: y, width: largura, background: COR.cartao, borderRadius: 20, boxShadow: SOMBRA.menu,
+    border: `1.5px solid ${COR.linha}`, padding: '12px 10px', fontFamily: FONTE_U, transformOrigin: '10% 100%',
+    opacity: p * (1 - sai), transform: `scale(${0.92 + 0.08 * p - 0.04 * sai})`, filter: p < 0.95 ? `blur(${(1 - p) * 6}px)` : undefined}}>
+    <div style={{position: 'relative'}}>
+      {sel >= 0 && <div style={{position: 'absolute', left: 0, right: 0, top: ySel, height: alturaItem, borderRadius: 12, background: '#F1EEE7'}} />}
+      {itens.map((it, i) => <div key={i} style={{position: 'relative', height: alturaItem, display: 'flex', alignItems: 'center', gap: 18, padding: '0 18px',
+        fontSize: 25, color: it.apagado ? '#C4BFB4' : COR.tinta, opacity: seg(f, inicio + 3 + i * 1.5, inicio + 9 + i * 1.5)}}>
+        <svg width="26" height="26" viewBox="0 0 24 24" style={{flex: 'none'}}><path d={ICONES[it.icone ?? 'clipe'] ?? ICONES.clipe} stroke={it.apagado ? '#C4BFB4' : '#6B665C'} strokeWidth="1.7" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
+        <span style={{flex: 1}}>{it.texto}</span>
+        {it.seta && <span style={{color: COR.mute, fontSize: 22}}>›</span>}
+      </div>)}
+    </div>
+  </div>;
+};

package/materiais/saas-linear/formas/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/materiais/saas-linear/paleta.json

@@ -0,0 +1,18 @@
+{
+  "estilo": "saas-linear",
+  "cor": {
+    "parede": "#3B1E19", "parede2": "#6A3426", "mesa": "#1E1512", "moldura": "#141312",
+    "tela": "#F4F1EA", "cartao": "#FFFFFF", "linha": "#E7E2D8", "tinta": "#29261F", "mute": "#8C877C",
+    "acento": "#D46F4D", "azul": "#3D7BF0",
+    "agenda": ["#E7655A", "#F0A63A", "#3FA86C", "#4B83E6", "#E08A6C"]
+  },
+  "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)"
+  },
+  "video": {"largura": 1080, "altura": 1920, "fps": 30, "segura": {"topo": 168, "base": 1330, "lado": 80}},
+  "tela": {"w": 1500, "h": 940, "util": {"x0": 290, "x1": 1210}},
+  "fontes": {"serifa": "Newsreader 400", "ui": "Inter 400/600"},
+  "easing": {"padrao": "e4 = cubic-bezier(.22,1,.36,1)", "suave": "e3 = smoothstep", "overshoot": "eb ~4%"},
+  "batida": {"bpm": 100, "quadros": 18}
+}