primocode 10.17.1 → 11.0.0

package/kits/saas-linear/assets/fontes/OFL-Inter.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/kits/saas-linear/assets/fontes/OFL-Newsreader.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Newsreader Project Authors (https://github.com/productiontype/Newsreader)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

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

@@ -0,0 +1,46 @@
+// Agenda: um painel de semana que se enche sozinho. Cabeçalho, dias, linhas de hora; os blocos coloridos
+// crescem da esquerda (overshoot pequeno) a cada `intervalo` quadros. `marcarEm` põe o check verde no bloco `marcar`.
+// Bloco: {dia (0..), hora (0.. a partir de `horaInicial`), dur (em horas), texto, cor?}.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_U, SOMBRA, TELA, e4, eb, seg} from './base';
+
+export type Bloco = {dia: number; hora: number; dur?: number; texto: string; cor?: string};
+export type AgendaProps = {
+  titulo: string; subtitulo?: string; dias: string[]; horaInicial?: number; horas?: number; blocos: Bloco[];
+  x?: number; y?: number; largura?: number; altura?: number; inicio?: number; intervalo?: number; marcar?: number; marcarEm?: number;
+};
+
+export const Agenda: React.FC<AgendaProps> = ({titulo, subtitulo, dias, horaInicial = 8, horas = 7, blocos, x = TELA.cx, y = 130, largura = 940, altura = 700, inicio = 0, intervalo = 3, marcar, marcarEm}) => {
+  const f = useCurrentFrame();
+  const p = e4(seg(f, inicio, inicio + 16));
+  const topo = 128, colH = 78, col = (largura - colH - 30) / dias.length, lin = (altura - topo - 24) / horas;
+  return <div style={{position: 'absolute', left: x - largura / 2, top: y, width: largura, height: altura, background: COR.cartao, borderRadius: 24,
+    boxShadow: SOMBRA.menu, border: `1.5px solid ${COR.linha}`, fontFamily: FONTE_U, opacity: p, transform: `translateY(${(1 - p) * 36}px) scale(${0.97 + 0.03 * p})`, overflow: 'hidden'}}>
+    <div style={{position: 'absolute', left: 30, top: 26, display: 'flex', alignItems: 'baseline', gap: 16}}>
+      <span style={{fontSize: 28, fontWeight: 600, color: COR.tinta}}>{titulo}</span>
+      {subtitulo && <span style={{fontSize: 20, color: COR.mute}}>{subtitulo}</span>}
+    </div>
+    {dias.map((d, i) => <div key={i} style={{position: 'absolute', top: 80, left: colH + i * col, width: col, textAlign: 'center', fontSize: 19, color: COR.mute,
+      opacity: seg(f, inicio + 4 + i, inicio + 10 + i)}}>{d}</div>)}
+    {Array.from({length: horas}).map((_, h) => <div key={h} style={{position: 'absolute', left: 0, right: 0, top: topo + h * lin}}>
+      <div style={{position: 'absolute', left: 22, top: -10, fontSize: 16, color: '#B4AEA2'}}>{String(horaInicial + h).padStart(2, '0')}:00</div>
+      <div style={{position: 'absolute', left: colH, right: 30, height: 1.5, background: '#F0ECE4', transform: `scaleX(${e4(seg(f, inicio + 2 + h, inicio + 16 + h))})`, transformOrigin: 'left'}} />
+    </div>)}
+    {blocos.map((b, i) => {
+      const t0 = inicio + 8 + i * intervalo;
+      const q = eb(seg(f, t0, t0 + 12));
+      const cor = b.cor ?? COR.agenda[i % COR.agenda.length];
+      const ok = marcar === i && marcarEm !== undefined ? eb(seg(f, marcarEm, marcarEm + 10)) : 0;
+      return <div key={i} style={{position: 'absolute', left: colH + b.dia * col + 6, top: topo + b.hora * lin + 5, width: col - 12, height: (b.dur ?? 1) * lin - 10,
+        background: cor, borderRadius: 10, opacity: seg(f, t0, t0 + 4), transform: `scaleX(${Math.max(0, q)})`, transformOrigin: 'left center',
+        boxShadow: `0 6px 14px color-mix(in srgb, ${cor} 35%, transparent)`, padding: '8px 12px', color: '#fff', fontSize: 17, fontWeight: 600, overflow: 'visible', whiteSpace: 'nowrap'}}>
+        <span style={{opacity: seg(f, t0 + 6, t0 + 12)}}>{b.texto}</span>
+        {ok > 0 && <div style={{position: 'absolute', right: -12, top: -12, width: 32, height: 32, borderRadius: 16, background: '#2E9E5B', border: '3px solid #fff',
+          transform: `scale(${ok})`, display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+          <svg width="16" height="16" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5" stroke="#fff" strokeWidth="3.4" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
+        </div>}
+      </div>;
+    })}
+  </div>;
+};

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

@@ -0,0 +1,41 @@
+// CaixaPrompt: a caixa de pedido do produto. Branca, cantos 28 px, sombra macia. Placeholder cinza, botão "+"
+// embaixo à esquerda (afunda no quadro `apertarMais`), botão de enviar coral à direita, atalhos em pílula embaixo.
+// `digitar` + `digitarEm`: o texto entra letra a letra (1,4 quadro por letra) e troca o placeholder.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_U, SOMBRA, TELA, e4, eb, seg} from './base';
+
+export type CaixaPromptProps = {
+  placeholder: string; digitar?: string; digitarEm?: number; atalhos?: string[];
+  x?: number; y?: number; largura?: number; inicio?: number; apertarMais?: number;
+};
+
+export const CaixaPrompt: React.FC<CaixaPromptProps> = ({placeholder, digitar, digitarEm = 0, atalhos = [], x = TELA.cx, y = 470, largura = 880, inicio = 0, apertarMais}) => {
+  const f = useCurrentFrame();
+  const p = e4(seg(f, inicio, inicio + 18));
+  const n = digitar ? Math.floor(Math.max(0, f - digitarEm) / 1.4) : 0;
+  const texto = digitar && n > 0 ? digitar.slice(0, n) : '';
+  const aperto = apertarMais !== undefined ? 1 - 0.12 * Math.sin(Math.PI * seg(f, apertarMais, apertarMais + 8)) : 1;
+  const realce = apertarMais !== undefined ? seg(f, apertarMais, apertarMais + 4) : 0;
+  return <div style={{position: 'absolute', left: x - largura / 2, top: y, width: largura, opacity: p, transform: `translateY(${(1 - p) * 30}px)`, fontFamily: FONTE_U}}>
+    <div style={{background: COR.cartao, borderRadius: 28, boxShadow: SOMBRA.cartao, border: `1.5px solid ${COR.linha}`, padding: '30px 34px 24px', height: 190, position: 'relative'}}>
+      <div style={{fontSize: 30, color: texto ? COR.tinta : COR.mute, letterSpacing: '-0.005em'}}>
+        {texto || placeholder}{texto && texto.length < (digitar?.length ?? 0) && <span style={{display: 'inline-block', width: 2, height: 32, background: COR.tinta, marginLeft: 3, verticalAlign: -5}} />}
+      </div>
+      <div style={{position: 'absolute', left: 26, bottom: 22, width: 52, height: 52, borderRadius: 14, border: `1.5px solid ${COR.linha}`,
+        background: realce ? `rgba(41,38,31,${0.06 * realce})` : COR.cartao, display: 'flex', alignItems: 'center', justifyContent: 'center',
+        transform: `scale(${aperto})`, fontSize: 34, color: COR.tinta, lineHeight: 1}}>+</div>
+      <div style={{position: 'absolute', right: 26, bottom: 22, width: 52, height: 52, borderRadius: 14, background: COR.acento,
+        opacity: 0.35 + 0.65 * (texto ? 1 : 0), display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+        <svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 19V5M5 12l7-7 7 7" stroke="#fff" strokeWidth="2.6" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
+      </div>
+    </div>
+    {atalhos.length > 0 && <div style={{display: 'flex', gap: 14, justifyContent: 'center', marginTop: 26}}>
+      {atalhos.map((a, i) => {
+        const q = eb(seg(f, inicio + 12 + i * 3, inicio + 26 + i * 3));
+        return <div key={i} style={{fontSize: 22, color: COR.mute, padding: '10px 20px', borderRadius: 999, border: `1.5px solid ${COR.linha}`,
+          background: 'rgba(255,255,255,0.6)', opacity: seg(f, inicio + 12 + i * 3, inicio + 18 + i * 3), transform: `scale(${0.9 + 0.1 * q})`}}>{a}</div>;
+      })}
+    </div>}
+  </div>;
+};

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

@@ -0,0 +1,38 @@
+// Camera: leva o monitor do plano aberto (z 0: o aparelho inteiro, em 3/4) ao plano fechado (z 1: a tela
+// ocupa o vídeo). Entre as chaves a câmera anda devagar e com precisão; por baixo, uma deriva que não para.
+// z acima de 1 aproxima de verdade (1.3 = tela 30% maior), pra mirar num pedaço da interface.
+// `chaves`: [{em, z, x?, y?}] em quadros absolutos; x/y deslocam o foco em px da tela (positivo = olhar pra direita/baixo).
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {CENTRO_VIDEO, e3, lerp} from './base';
+
+export type ChaveCamera = {em: number; z: number; x?: number; y?: number};
+export type CameraProps = {chaves?: ChaveCamera[]; children: React.ReactNode};
+
+export const posCamera = (f: number, chaves: ChaveCamera[]) => {
+  const ks = chaves.length ? [...chaves].sort((a, b) => a.em - b.em) : [{em: 0, z: 1}];
+  let z = ks[0].z, x = ks[0].x ?? 0, y = ks[0].y ?? 0;
+  for (let i = 0; i < ks.length - 1; i++) {
+    const a = ks[i], b = ks[i + 1];
+    if (f >= a.em) {
+      const t = e3((f - a.em) / Math.max(1, b.em - a.em));
+      z = lerp(a.z, b.z, t); x = lerp(a.x ?? 0, b.x ?? 0, t); y = lerp(a.y ?? 0, b.y ?? 0, t);
+    }
+  }
+  const zc = Math.min(1, z);
+  const escala = (z <= 1 ? lerp(0.58, 1, z) : z) * (1 + 0.035 * Math.sin(f / 110) + 0.00018 * f);
+  const rotY = lerp(-20, -9, zc) + 1.6 * Math.sin(f / 95);
+  const rotX = lerp(6, 2.5, zc) + 0.8 * Math.cos(f / 120);
+  const dx = Math.sin(f / 80) * 10 - x * escala, dy = Math.cos(f / 100) * 8 - y * escala + lerp(-40, 0, zc);
+  return {escala, rotY, rotX, dx, dy};
+};
+
+export const Camera: React.FC<CameraProps> = ({chaves = [], children}) => {
+  const c = posCamera(useCurrentFrame(), chaves);
+  return <AbsoluteFill style={{perspective: 2600, perspectiveOrigin: `${CENTRO_VIDEO.x}px ${CENTRO_VIDEO.y}px`}}>
+    <AbsoluteFill style={{transformOrigin: `${CENTRO_VIDEO.x}px ${CENTRO_VIDEO.y}px`,
+      transform: `translate(${c.dx}px, ${c.dy}px) rotateX(${c.rotX}deg) rotateY(${c.rotY}deg) scale(${c.escala})`}}>
+      {children}
+    </AbsoluteFill>
+  </AbsoluteFill>;
+};

package/kits/saas-linear/elementos/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/kits/saas-linear/elementos/Cena.tsx

@@ -0,0 +1,38 @@
+// Cena: janela de tempo de um plano, DENTRO da tela do monitor. As trocas são as de interface:
+// 'suave' (desfoque + escala 0.97 -> 1, 14 quadros), 'subir' (sobe 40 px), 'corte' e 'nenhuma'.
+// A saída de 'suave'/'subir' cruza SOBREPOE quadros com a próxima cena (desfoca e some).
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {e4, seg} from './base';
+
+export type Entrada = 'suave' | 'subir' | 'corte' | 'nenhuma';
+export const SOBREPOE = 10;
+const COM_SAIDA: Entrada[] = ['suave', 'subir'];
+
+const CenaCtx = createContext({duracao: 60});
+/** duração da cena atual em quadros (sem a sobreposição) */
+export const useDuracaoCena = () => useContext(CenaCtx).duracao;
+
+export type CenaProps = {de: number; ate: number; entrada?: Entrada; ultima?: boolean; children: React.ReactNode};
+
+const Janela: React.FC<{duracao: number; entrada: Entrada; ultima: boolean; children: React.ReactNode}> = ({duracao, entrada, ultima, children}) => {
+  const f = useCurrentFrame();
+  const en = entrada === 'nenhuma' || entrada === 'corte' ? 0 : 1 - e4(seg(f, 0, 14));
+  const sai = !ultima && COM_SAIDA.includes(entrada);
+  const xo = sai ? e4(seg(f, duracao, duracao + SOBREPOE)) : 0;
+  const tf = entrada === 'subir' ? `translateY(${en * 40 - xo * 24}px)` : `scale(${1 - en * 0.03 + xo * 0.02})`;
+  const blur = en * 10 + xo * 10;
+  return <AbsoluteFill style={{transform: tf, opacity: (1 - en) * (1 - xo), filter: blur > 0.3 ? `blur(${blur}px)` : undefined}}>
+    {children}
+  </AbsoluteFill>;
+};
+
+export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'suave', ultima = false, children}) => {
+  const duracao = ate - de;
+  const extra = !ultima && COM_SAIDA.includes(entrada) ? SOBREPOE : 0;
+  return <Sequence from={de} durationInFrames={duracao + extra} layout="none">
+    <CenaCtx.Provider value={{duracao}}>
+      <Janela duracao={duracao} entrada={entrada} ultima={ultima}>{children}</Janela>
+    </CenaCtx.Provider>
+  </Sequence>;
+};

package/kits/saas-linear/elementos/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/kits/saas-linear/elementos/FraseSerifa.tsx

@@ -0,0 +1,25 @@
+// FraseSerifa: a frase que explica, em serifa calma, sozinha no creme. Palavra a palavra, da esquerda pra
+// direita: cada uma nasce cinza e desfocada e assenta em tinta (16 quadros). Quebra linha sozinha em `largura`.
+// `*palavra*` sai em acento coral. Centrada em `x`/`y` (px da tela).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_S, TELA, e4, seg} from './base';
+
+export type FraseSerifaProps = {texto: string; x?: number; y?: number; tamanho?: number; largura?: number; inicio?: number; intervalo?: number; sair?: number};
+
+export const FraseSerifa: React.FC<FraseSerifaProps> = ({texto, x = TELA.cx, y = TELA.cy, tamanho = 72, largura = 900, inicio = 0, intervalo = 4, sair}) => {
+  const f = useCurrentFrame();
+  const palavras = texto.split(' ');
+  const s = sair !== undefined ? e4(seg(f, sair, sair + 10)) : 0;
+  return <div style={{position: 'absolute', left: x - largura / 2, top: y, width: largura, transform: 'translateY(-50%)', textAlign: 'center',
+    fontFamily: FONTE_S, fontSize: tamanho, lineHeight: 1.18, letterSpacing: '-0.01em', color: COR.tinta, opacity: 1 - s, filter: s > 0.02 ? `blur(${s * 8}px)` : undefined}}>
+    {palavras.map((p, i) => {
+      const d = p.startsWith('*') && p.replace(/[.,!?]$/, '').endsWith('*');
+      const limpa = p.replace(/\*/g, '');
+      const q = e4(seg(f, inicio + i * intervalo, inicio + i * intervalo + 16));
+      const cor = d ? COR.acento : COR.tinta;
+      return <span key={i} style={{display: 'inline-block', marginRight: '0.24em', opacity: 0.15 + 0.85 * q, filter: q < 0.98 ? `blur(${(1 - q) * 7}px)` : undefined,
+        color: q < 1 ? `color-mix(in srgb, ${cor} ${Math.round(q * 100)}%, #CFC9BD)` : cor}}>{limpa}</span>;
+    })}
+  </div>;
+};

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

@@ -0,0 +1,18 @@
+// Fundo: a sala atrás do monitor. Parede quente com uma luz lateral que respira devagar e a mesa embaixo.
+// Com `claro`, vira o creme da interface (vídeo sem monitor: a tela ocupa tudo).
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {COR} from './base';
+
+export type FundoProps = {claro?: boolean};
+
+export const Fundo: React.FC<FundoProps> = ({claro = false}) => {
+  const f = useCurrentFrame();
+  if (claro) return <AbsoluteFill style={{background: COR.tela}} />;
+  const luz = 0.75 + 0.08 * Math.sin(f / 70);
+  return <AbsoluteFill style={{background: COR.parede}}>
+    <AbsoluteFill style={{background: `radial-gradient(ellipse 70% 55% at ${88 + Math.sin(f / 90) * 3}% 18%, ${COR.parede2} 0%, rgba(0,0,0,0) 70%)`, opacity: luz}} />
+    <div style={{position: 'absolute', left: 0, right: 0, top: 1420, bottom: 0, background: `linear-gradient(180deg, ${COR.mesa} 0%, #110C0A 100%)`}} />
+    <AbsoluteFill style={{background: 'radial-gradient(ellipse 120% 90% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%)'}} />
+  </AbsoluteFill>;
+};

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

@@ -0,0 +1,20 @@
+// Marca: a flor de quatro pétalas, o pequeno sinal de acento do kit. Gira e abre de 0 a 1 em 16 quadros.
+// Fica ao lado da saudação e no cartão final. Cor padrão: COR.acento. Pode receber `src` (logo do cliente).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, e4, eb, seg} from './base';
+
+export type MarcaProps = {tamanho?: number; cor?: string; inicio?: number; src?: string; girar?: boolean; style?: React.CSSProperties};
+
+export const Marca: React.FC<MarcaProps> = ({tamanho = 64, cor = COR.acento, inicio = 0, src, girar = true, style}) => {
+  const f = useCurrentFrame();
+  const p = eb(seg(f, inicio, inicio + 16));
+  const rot = (1 - e4(seg(f, inicio, inicio + 24))) * -90 + (girar ? (f - inicio) * 0.25 : 0);
+  const base: React.CSSProperties = {width: tamanho, height: tamanho, display: 'inline-block', transform: `rotate(${rot}deg) scale(${p})`, opacity: seg(f, inicio, inicio + 6), ...style};
+  if (src) return <img src={src} style={{...base, objectFit: 'contain'}} />;
+  const petala = 'M50 50 C 38 32, 40 10, 50 4 C 60 10, 62 32, 50 50 Z';
+  return <svg viewBox="0 0 100 100" style={base}>
+    {[0, 90, 180, 270].map((a) => <path key={a} d={petala} fill={cor} transform={`rotate(${a} 50 50)`} />)}
+    {[45, 135, 225, 315].map((a) => <path key={a} d={petala} fill={cor} opacity={0.55} transform={`rotate(${a} 50 50) scale(0.62) translate(30.6 30.6)`} />)}
+  </svg>;
+};

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

@@ -0,0 +1,22 @@
+// MarcaFinal: o fecho. A flor gira e abre; o nome se revela da esquerda pra direita atrás de uma máscara
+// (o "Lu" antes do "me"), em serifa. Uma linha de apoio opcional (sans, cinza) aparece depois. Centro em `x`/`y`.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_S, FONTE_U, TELA, e4, seg} from './base';
+import {Marca} from './Marca';
+
+export type MarcaFinalProps = {nome: string; apoio?: string; x?: number; y?: number; tamanho?: number; inicio?: number; marcaSrc?: string};
+
+export const MarcaFinal: React.FC<MarcaFinalProps> = ({nome, apoio, x = TELA.cx, y = TELA.cy, tamanho = 150, inicio = 0, marcaSrc}) => {
+  const f = useCurrentFrame();
+  const r = e4(seg(f, inicio + 8, inicio + 30));
+  const a = e4(seg(f, inicio + 26, inicio + 40));
+  return <div style={{position: 'absolute', left: x, top: y, transform: 'translate(-50%, -50%)', display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
+    <div style={{display: 'flex', alignItems: 'center', gap: tamanho * 0.22}}>
+      <Marca tamanho={tamanho * 0.78} inicio={inicio} src={marcaSrc} />
+      <div style={{fontFamily: FONTE_S, fontSize: tamanho, color: COR.tinta, letterSpacing: '-0.015em', lineHeight: 1,
+        clipPath: `inset(-20% ${(1 - r) * 100}% -20% 0)`, transform: `translateX(${(1 - r) * -18}px)`, whiteSpace: 'nowrap'}}>{nome}</div>
+    </div>
+    {apoio && <div style={{fontFamily: FONTE_U, fontSize: 32, color: COR.mute, marginTop: tamanho * 0.32, opacity: a, transform: `translateY(${(1 - a) * 12}px)`, whiteSpace: 'nowrap'}}>{apoio}</div>}
+  </div>;
+};

package/kits/saas-linear/elementos/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>;
+};