primocode 10.19.0 → 11.1.0

package/kits/tutorial-tela/elementos/JanelaApp.tsx

@@ -1,81 +0,0 @@
-// JanelaApp: a "gravação": um app de lista nítido (janela 1400 × 940 com barra, lateral e lista) que
-// MUDA DE ESTADO por quadros, sempre causado pelo clique do cursor: o botão afunda, o modal abre,
-// o texto é digitado com cursor de texto, o Salvar afunda, o modal fecha e a linha nova entra no topo
-// com fundo de destaque. Pontos úteis pra câmera e cursor: veja ALVOS (coordenadas da janela).
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FONTE, JANELA, MONO, e5, lerp, mola, seg} from './base';
-
-export const ALVOS = {botao: [1230, 124], campo: [850, 440], salvar: [1060, 568], novaLinha: [850, 242]} as const;
-
-export type JanelaAppProps = {
-  endereco?: string;
-  lateral?: string[];
-  titulo: string;
-  /** "{n} tarefas": {n} vira o número de itens */
-  subtitulo?: string;
-  botao: string;
-  itens: {texto: string; tag?: string}[];
-  modal: {titulo: string; placeholder: string; texto: string; botao: string; tag?: string};
-  /** quadros (relativos à gravação): clique no botão, digitação [de, até], clique em salvar */
-  tempos: {abre: number; digita: [number, number]; salva: number};
-};
-
-const Linha: React.FC<{texto: string; tag?: string; y: number; h?: number; destaque?: number; check?: number}> = ({texto, tag, y, h = 84, destaque = 0, check = 0}) =>
-  <div style={{position: 'absolute', left: JANELA.lateral + 40, right: 40, top: y, height: h, overflow: 'hidden', borderRadius: 14, background: destaque > 0 ? `rgba(255,91,20,${0.14 * destaque})` : undefined, boxShadow: destaque > 0 ? `inset 0 0 0 2px rgba(255,91,20,${0.5 * destaque})` : undefined}}>
-    <div style={{position: 'absolute', left: 24, top: 26, width: 32, height: 32, borderRadius: 16, border: `3px solid ${check > 0 ? COR.ok : '#C7CCD4'}`, boxSizing: 'border-box', background: check > 0.5 ? COR.ok : undefined, transform: `scale(${check > 0 ? mola(check) : 1})`}} />
-    <div style={{position: 'absolute', left: 78, top: 22, fontFamily: FONTE, fontWeight: 600, fontSize: 30, color: COR.tinta}}>{texto}</div>
-    {tag && <div style={{position: 'absolute', right: 24, top: 24, padding: '6px 14px', borderRadius: 999, background: '#F0F2F5', fontFamily: MONO, fontSize: 20, color: COR.apagado}}>{tag}</div>}
-    <div style={{position: 'absolute', left: 24, right: 24, bottom: 0, height: 1, background: COR.linha}} />
-  </div>;
-
-export const JanelaApp: React.FC<JanelaAppProps> = ({endereco = 'pauta.app', lateral = ['Hoje', 'Próximos', 'Projetos', 'Arquivo'], titulo, subtitulo = '{n} tarefas', botao, itens, modal, tempos}) => {
-  const f = useCurrentFrame();
-  const apertaB = f >= tempos.abre && f < tempos.abre + 4 ? 0.94 : 1;
-  const abre = e5(seg(f, tempos.abre + 1, tempos.abre + 9)), fecha = seg(f, tempos.salva + 2, tempos.salva + 8);
-  const mod = abre * (1 - fecha);
-  const [d0, d1] = tempos.digita;
-  const n = Math.round(lerp(0, modal.texto.length, seg(f, d0, d1)));
-  const caret = f < d0 + 1 || n < modal.texto.length || Math.floor(f / 8) % 2 === 0;
-  const apertaS = f >= tempos.salva && f < tempos.salva + 4 ? 0.92 : 1;
-  const entra = e5(seg(f, tempos.salva + 6, tempos.salva + 16));
-  const brilho = 1 - seg(f, tempos.salva + 30, tempos.salva + 60);
-  const total = itens.length + (entra > 0 ? 1 : 0);
-  const Y0 = 210;
-  return <div style={{position: 'absolute', inset: 0, width: JANELA.l, height: JANELA.a, borderRadius: 22, overflow: 'hidden', background: COR.tela,
-    boxShadow: '0 60px 120px rgba(20,22,26,.22), 0 12px 30px rgba(20,22,26,.12), 0 0 0 1px rgba(20,22,26,.08)'}}>
-    {/* barra */}
-    <div style={{position: 'absolute', left: 0, right: 0, top: 0, height: JANELA.barra, background: '#FAFAFB', borderBottom: `1px solid ${COR.linha}`}}>
-      {['#FF5F57', '#FEBC2E', '#28C840'].map((c, i) => <div key={i} style={{position: 'absolute', left: 24 + i * 26, top: 20, width: 16, height: 16, borderRadius: 8, background: c}} />)}
-      <div style={{position: 'absolute', left: 0, right: 0, top: 14, textAlign: 'center', fontFamily: MONO, fontSize: 20, color: COR.apagado}}>{endereco}</div>
-    </div>
-    {/* lateral */}
-    <div style={{position: 'absolute', left: 0, top: JANELA.barra, bottom: 0, width: JANELA.lateral, background: COR.lateral, borderRight: `1px solid ${COR.linha}`}}>
-      {lateral.map((l, i) => <div key={i} style={{position: 'absolute', left: 20, right: 20, top: 30 + i * 62, height: 50, borderRadius: 10, background: i === 0 ? '#E9ECF1' : undefined,
-        fontFamily: FONTE, fontWeight: i === 0 ? 700 : 500, fontSize: 26, color: i === 0 ? COR.tinta : COR.apagado, lineHeight: '50px', paddingLeft: 18}}>{l}</div>)}
-    </div>
-    {/* cabeçalho */}
-    <div style={{position: 'absolute', left: JANELA.lateral + 60, top: 88, fontFamily: FONTE, fontWeight: 800, fontSize: 54, color: COR.tinta, letterSpacing: '-0.02em'}}>{titulo}</div>
-    <div style={{position: 'absolute', left: JANELA.lateral + 62, top: 154, fontFamily: FONTE, fontWeight: 500, fontSize: 22, color: COR.apagado}}>{subtitulo.replace('{n}', String(total))}</div>
-    <div style={{position: 'absolute', left: 1120, top: 96, width: 220, height: 56, borderRadius: 14, background: COR.acento, color: '#fff', fontFamily: FONTE, fontWeight: 700, fontSize: 24,
-      display: 'flex', alignItems: 'center', justifyContent: 'center', transform: `scale(${apertaB})`, boxShadow: '0 6px 16px rgba(255,91,20,.35)'}}>{botao}</div>
-    {/* lista */}
-    {entra > 0 && <Linha texto={modal.texto} tag={modal.tag} y={Y0} h={84 * entra} destaque={brilho} />}
-    {itens.map((it, i) => <Linha key={i} texto={it.texto} tag={it.tag} y={Y0 + (i + entra) * 84} />)}
-    {/* modal */}
-    {mod > 0.01 && <>
-      <div style={{position: 'absolute', inset: 0, background: `rgba(20,22,26,${0.28 * mod})`}} />
-      <div style={{position: 'absolute', left: 530, top: 300, width: 640, height: 330, borderRadius: 20, background: COR.tela, opacity: mod, transform: `scale(${0.94 + 0.06 * mod}) translateY(${(1 - mod) * 20}px)`,
-        boxShadow: '0 30px 80px rgba(20,22,26,.3)'}}>
-        <div style={{position: 'absolute', left: 40, top: 34, fontFamily: FONTE, fontWeight: 800, fontSize: 34, color: COR.tinta}}>{modal.titulo}</div>
-        <div style={{position: 'absolute', left: 40, top: 100, width: 560, height: 80, borderRadius: 14, border: `3px solid ${f >= d0 - 4 ? COR.acento : COR.linha}`, boxSizing: 'border-box',
-          boxShadow: f >= d0 - 4 ? `0 0 0 6px ${COR.acentoClaro}` : undefined, fontFamily: FONTE, fontWeight: 600, fontSize: 30, lineHeight: '74px', paddingLeft: 22, color: n ? COR.tinta : '#A3A9B3', whiteSpace: 'nowrap'}}>
-          {n ? modal.texto.slice(0, n) : f >= d0 - 4 ? '' : modal.placeholder}
-          {f >= d0 - 4 && caret && <span style={{display: 'inline-block', width: 3, height: 36, background: COR.acento, verticalAlign: 'middle', marginLeft: 2}} />}
-        </div>
-        <div style={{position: 'absolute', left: 460, top: 240, width: 140, height: 56, borderRadius: 14, background: COR.acento, color: '#fff', fontFamily: FONTE, fontWeight: 700, fontSize: 24,
-          display: 'flex', alignItems: 'center', justifyContent: 'center', transform: `scale(${apertaS})`}}>{modal.botao}</div>
-      </div>
-    </>}
-  </div>;
-};

package/kits/tutorial-tela/elementos/Montagem.tsx

@@ -1,49 +0,0 @@
-// Montagem: monta o tutorial a partir do plano. A GRAVAÇÃO (janela + câmera + cursor + destaques) é um
-// plano contínuo, como uma gravação de tela de verdade; as cenas são as camadas da tela por cima
-// (título, passos, atalho). A Montagem não decide estética.
-import React from 'react';
-import {AbsoluteFill, Sequence} from 'remotion';
-import {Fundo} from './Fundo';
-import {CameraTela, ChaveTela} from './CameraTela';
-import {JanelaApp, JanelaAppProps} from './JanelaApp';
-import {Cursor, CursorProps} from './Cursor';
-import {DestaqueCaixa, DestaqueCaixaProps} from './DestaqueCaixa';
-import {Efeito, NomeSom, Trilha} from './Som';
-import {TituloTela} from './TituloTela';
-import {PassoChamada} from './PassoChamada';
-import {TeclaAtalho} from './TeclaAtalho';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const ELEMENTOS: Record<string, React.FC<any>> = {TituloTela, PassoChamada, TeclaAtalho};
-
-export type Camada = {elemento: string; props: Record<string, unknown>};
-export type CenaPlano = {batida: string; de: number; ate: number; camadas: Camada[]; sons?: {som: NomeSom; em: number; volume?: number}[]};
-export type Plano = {
-  kit: string; duracao: number; trilha?: {volume?: number} | false;
-  /** a gravação: quadros absolutos de/até; dentro dela os tempos são relativos a `de` */
-  gravacao: {de: number; ate: number; entra?: number; sai?: number; camera: ChaveTela[]; janela: JanelaAppProps; cursor: CursorProps; destaques?: DestaqueCaixaProps[]};
-  cenas: CenaPlano[];
-};
-
-export const Montagem: React.FC<{plano: Plano}> = ({plano}) => {
-  const g = plano.gravacao;
-  return <AbsoluteFill>
-    <Fundo />
-    <Sequence from={g.de} durationInFrames={g.ate - g.de} layout="none">
-      <CameraTela chaves={g.camera} entra={g.entra} sai={g.sai}>
-        <JanelaApp {...g.janela} />
-        {(g.destaques ?? []).map((d, i) => <DestaqueCaixa key={i} {...d} />)}
-        <Cursor {...g.cursor} />
-      </CameraTela>
-    </Sequence>
-    {plano.cenas.map((c, i) => <Sequence key={i} from={c.de} durationInFrames={c.ate - c.de} layout="none">
-      {c.camadas.map((k, j) => {
-        const El = ELEMENTOS[k.elemento];
-        if (!El) throw new Error(`tutorial-tela: elemento "${k.elemento}" não existe no kit`);
-        return <El key={j} {...k.props} />;
-      })}
-    </Sequence>)}
-    {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/tutorial-tela/elementos/PassoChamada.tsx

@@ -1,22 +0,0 @@
-// PassoChamada: a legenda do passo, na TELA (não na janela). Cartão branco de 28 px de raio com sombra,
-// o número do passo num círculo laranja de 84 px e o texto em 46 px. Sobe 60 px com mola e sai descendo.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FONTE, MONO, entradaSaida} from './base';
-
-export type PassoChamadaProps = {numero: number; total?: number; texto: string; y?: number; inicio: number; fim: number};
-
-export const PassoChamada: React.FC<PassoChamadaProps> = ({numero, total = 3, texto, y = 1180, inicio, fim}) => {
-  const f = useCurrentFrame();
-  const {t, op} = entradaSaida(f, inicio, fim);
-  if (op <= 0) return null;
-  return <div style={{position: 'absolute', left: 0, right: 0, top: y, display: 'flex', justifyContent: 'center', opacity: op, transform: `translateY(${(1 - t) * 60}px)`}}>
-    <div style={{display: 'flex', alignItems: 'center', gap: 26, padding: '22px 40px 22px 22px', borderRadius: 28, background: COR.tela, boxShadow: '0 24px 60px rgba(20,22,26,.22), 0 0 0 1px rgba(20,22,26,.06)'}}>
-      <div style={{width: 84, height: 84, borderRadius: 42, background: COR.acento, color: '#fff', fontFamily: FONTE, fontWeight: 800, fontSize: 46, display: 'flex', alignItems: 'center', justifyContent: 'center', transform: `scale(${0.6 + 0.4 * t})`}}>{numero}</div>
-      <div>
-        <div style={{fontFamily: MONO, fontSize: 22, color: COR.apagado, letterSpacing: '0.08em'}}>PASSO {numero} DE {total}</div>
-        <div style={{fontFamily: FONTE, fontWeight: 800, fontSize: 46, color: COR.tinta, letterSpacing: '-0.01em', whiteSpace: 'nowrap'}}>{texto}</div>
-      </div>
-    </div>
-  </div>;
-};

package/kits/tutorial-tela/elementos/Som.tsx

@@ -1,41 +0,0 @@
-// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`, pacote organic-wood); trilha de 8.6 s
-// (MotionCraft `music make`, preset calm-punch, 108 bpm, tom F). 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 digitar from '../assets/sons/digitar.mp3';
-import sucesso from '../assets/sons/sucesso.mp3';
-import trilha from '../assets/trilha/passo-108bpm.mp3';
-
-export const SONS = {
-  'whoosh-entra': whooshEntra, 'whoosh-sai': whooshSai, swoosh, 'pop-palavra': popPalavra, 'pop-cartao': popCartao, clique, impacto, subida, assinatura, digitar, sucesso,
-} as const;
-export type NomeSom = keyof typeof SONS;
-
-// volume de cada efeito (0..1) já calibrado contra a trilha a 0.42
-const VOLUME: Record<NomeSom, number> = {
-  'whoosh-entra': 0.8, 'whoosh-sai': 0.65, swoosh: 0.85, 'pop-palavra': 0.9, 'pop-cartao': 0.9, clique: 0.9, impacto: 0.85, subida: 0.65, assinatura: 0.85, digitar: 0.6, sucesso: 0.8,
-};
-
-export type EfeitoProps = {som: NomeSom; em: number; volume?: number};
-/** um efeito no quadro `em` (relativo à Cena se estiver dentro de uma, absoluto no resto) */
-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.42, 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/tutorial-tela/elementos/TeclaAtalho.tsx

@@ -1,29 +0,0 @@
-// TeclaAtalho: teclas de verdade (190 px, brancas, com a borda de baixo de 14 px) que entram com mola e
-// são APERTADAS em sequência (descem 10 px, a borda some, a letra fica laranja). Legenda embaixo.
-// "cmd" desenha o símbolo de comando em SVG (não depende da fonte).
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FONTE, e5, mola, seg} from './base';
-
-export type TeclaAtalhoProps = {teclas: string[]; legenda?: string; y?: number; inicio?: number; aperta?: number};
-
-const Cmd: React.FC<{cor: string}> = ({cor}) => <svg width={92} height={92} viewBox="0 0 24 24" fill="none" stroke={cor} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round">
-  <path d="M9 6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3z" /></svg>;
-
-export const TeclaAtalho: React.FC<TeclaAtalhoProps> = ({teclas, legenda, y = 760, inicio = 0, aperta}) => {
-  const f = useCurrentFrame();
-  const ap = aperta ?? inicio + 16;
-  return <div style={{position: 'absolute', left: 0, right: 0, top: y}}>
-    <div style={{display: 'flex', justifyContent: 'center', gap: 40}}>
-      {teclas.map((k, i) => {
-        const t = mola(seg(f, inicio + i * 4, inicio + i * 4 + 12));
-        const baixo = f >= ap + i * 3 && f < ap + i * 3 + 30 ? 1 : 0;
-        const c = baixo ? COR.acento : COR.tinta;
-        return <div key={i} style={{width: 190, height: 190, borderRadius: 36, background: COR.tela, transform: `translateY(${(1 - t) * 300 + baixo * 10}px) scale(${Math.max(0, t)})`,
-          boxShadow: baixo ? '0 4px 0 #C9CED6, 0 10px 20px rgba(20,22,26,.12)' : '0 14px 0 #C9CED6, 0 30px 40px rgba(20,22,26,.18)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-          fontFamily: FONTE, fontWeight: 800, fontSize: 100, color: c}}>{k === 'cmd' ? <Cmd cor={c} /> : k}</div>;
-      })}
-    </div>
-    {legenda && <div style={{marginTop: 70, textAlign: 'center', fontFamily: FONTE, fontWeight: 800, fontSize: 64, letterSpacing: '-0.02em', color: COR.tinta, opacity: e5(seg(f, inicio + 10, inicio + 20)), transform: `translateY(${(1 - e5(seg(f, inicio + 10, inicio + 20))) * 30}px)`}}>{legenda}</div>}
-  </div>;
-};

package/kits/tutorial-tela/elementos/TituloTela.tsx

@@ -1,30 +0,0 @@
-// TituloTela: o título do tutorial, grande (96 px, peso 800, −0,03 em), alinhado à esquerda em x 88.
-// Palavras sobem 40 px uma a uma (3 quadros entre elas); a parte entre *asteriscos* ganha um marca-texto
-// laranja que corre da esquerda (10 quadros). Sai subindo e sumindo.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FONTE, SEGURA, e5, entradaSaida, seg} from './base';
-
-export type TituloTelaProps = {linhas: string[]; y?: number; tamanho?: number; inicio?: number; fim?: number; alinhar?: 'esquerda' | 'centro'};
-
-export const TituloTela: React.FC<TituloTelaProps> = ({linhas, y = 300, tamanho = 96, inicio = 0, fim = -1, alinhar = 'esquerda'}) => {
-  const f = useCurrentFrame();
-  const {s} = entradaSaida(f, inicio, fim);
-  let k = 0;
-  return <div style={{position: 'absolute', left: SEGURA.lado, right: SEGURA.lado, top: y, opacity: 1 - s, transform: `translateY(${-s * 80}px)`, textAlign: alinhar === 'centro' ? 'center' : 'left'}}>
-    {linhas.map((l, i) => <div key={i} style={{fontFamily: FONTE, fontWeight: 800, fontSize: tamanho, lineHeight: 1.08, letterSpacing: '-0.03em', color: COR.tinta}}>
-      {l.split(/(\*[^*]+\*)/).filter(Boolean).map((p, j) => {
-        const marca = p.startsWith('*');
-        return p.replace(/\*/g, '').split(' ').filter(Boolean).map((w, wi) => {
-          const em = inicio + (k++) * 3;
-          const t = e5(seg(f, em, em + 12));
-          const m = e5(seg(f, em + 6, em + 16));
-          return <span key={`${j}-${wi}`} style={{display: 'inline-block', marginRight: '0.24em', opacity: t, transform: `translateY(${(1 - t) * 40}px)`, position: 'relative', color: marca ? '#fff' : undefined}}>
-            {marca && <span style={{position: 'absolute', left: '-0.08em', right: '-0.08em', top: '0.1em', bottom: '0.02em', background: COR.acento, borderRadius: 10, transform: `scaleX(${m})`, transformOrigin: '0 50%', zIndex: -1}} />}
-            <span style={{position: 'relative'}}>{w}</span>
-          </span>;
-        });
-      })}
-    </div>)}
-  </div>;
-};

package/kits/tutorial-tela/elementos/base.ts

@@ -1,65 +0,0 @@
-// Base do kit tutorial-tela (v2): tour de produto com cara de gravação de tela profissional.
-// Cores, fontes, curvas (rampa de velocidade), medidas da janela. Todo número visual sai daqui.
-import {continueRender, delayRender} from 'remotion';
-import jakarta from '../assets/fontes/jakarta.woff2';
-import jbmono from '../assets/fontes/jbmono.woff2';
-
-export const LARGURA = 1080, ALTURA = 1920, FPS = 30;
-export const SEGURA = {topo: 168, base: 1330, lado: 88};
-/** onde a câmera põe o alvo na tela (o centro óptico do tutorial) */
-export const CENTRO: [number, number] = [540, 820];
-/** a janela do app, em unidades dela (a câmera escala) */
-export const JANELA = {l: 1400, a: 940, barra: 56, lateral: 300};
-
-// ---------- cor (ver regras/cor.md) ----------
-export const COR = {
-  chao: '#ECEEF2',
-  chaoFundo: '#DCE0E7',
-  tela: '#FFFFFF',
-  lateral: '#F6F7F9',
-  linha: '#E4E7EC',
-  tinta: '#14161A',
-  apagado: '#6B7280',
-  /** o único acento: o controle da vez, o cursor clicando, o número do passo */
-  acento: '#FF5B14',
-  acentoClaro: '#FFE4D6',
-  ok: '#17A05D',
-};
-
-// ---------- fonte ----------
-export const FONTE = '"TS Jakarta", system-ui, sans-serif';
-export const MONO = '"TS JetBrains Mono", ui-monospace, monospace';
-if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__k_tutorial2) {
-  (globalThis as Record<string, unknown>).__k_tutorial2 = true;
-  const h = delayRender('tutorial-tela: fontes');
-  Promise.all([['TS Jakarta', jakarta, '500 800'], ['TS JetBrains Mono', jbmono, '500 700']].map(([nome, url, peso]) =>
-    new FontFace(nome, `url(${url}) format('woff2')`, {weight: peso, style: 'normal'}).load().then((ff) => {document.fonts.add(ff);}).catch(() => undefined)))
-    .then(() => continueRender(h));
-}
-
-// ---------- tempo e curva ----------
-export const c01 = (t: number) => Math.max(0, Math.min(1, t));
-export const seg = (f: number, a: number, b: number) => (b <= a ? (f >= b ? 1 : 0) : c01((f - a) / (b - a)));
-export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
-/** rampa de velocidade: arranca devagar, voa no meio, freia longo (easeInOutQuint) */
-export const rampa = (t: number) => {const x = c01(t); return x < 0.5 ? 16 * x ** 5 : 1 - (-2 * x + 2) ** 5 / 2;};
-export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
-export const mola = (t: number, s = 1.7) => {const x = c01(t) - 1; return x * x * ((s + 1) * x + s) + 1;};
-/** batida da trilha (108 bpm) em quadros */
-export const BATIDA = 16.7;
-
-/** chaves {em, ...valores} → valor interpolado com a rampa */
-export const chave = <K extends string>(f: number, ks: ({em: number} & Partial<Record<K, number>>)[], k: K, padrao: number): number => {
-  const v = ks.filter((c) => c[k] !== undefined) as ({em: number} & Record<K, number>)[];
-  if (!v.length) return padrao;
-  if (f <= v[0].em) return v[0][k];
-  for (let i = 1; i < v.length; i++) if (f <= v[i].em) return lerp(v[i - 1][k], v[i][k], rampa(seg(f, v[i - 1].em, v[i].em)));
-  return v[v.length - 1][k];
-};
-
-/** entrada com mola em 12 quadros a partir de `inicio`, saída em 8 a partir de `fim` (−1 = fica) */
-export const entradaSaida = (f: number, inicio: number, fim: number) => {
-  const t = mola(seg(f, inicio, inicio + 12));
-  const s = fim < 0 ? 0 : seg(f, fim, fim + 8);
-  return {t, s, op: f < inicio ? 0 : Math.min(1, seg(f, inicio, inicio + 5) * 1) * (1 - s)};
-};

package/kits/tutorial-tela/elementos/index.ts

@@ -1,12 +0,0 @@
-// Tudo que o kit tutorial-tela oferece.
-export * from './base';
-export * from './Fundo';
-export * from './CameraTela';
-export * from './JanelaApp';
-export * from './Cursor';
-export * from './DestaqueCaixa';
-export * from './PassoChamada';
-export * from './TituloTela';
-export * from './TeclaAtalho';
-export * from './Som';
-export * from './Montagem';

package/kits/tutorial-tela/exemplos/plano.json

@@ -1,41 +0,0 @@
-{
-  "kit": "tutorial-tela",
-  "duracao": 240,
-  "trilha": {"volume": 0.42},
-  "gravacao": {
-    "de": 0, "ate": 240, "entra": 10, "sai": 192,
-    "camera": [
-      {"em": 0, "x": 700, "y": 300, "zoom": 0.62}, {"em": 44, "x": 700, "y": 300, "zoom": 0.62},
-      {"em": 62, "x": 1170, "y": 150, "zoom": 2.0}, {"em": 80, "x": 1170, "y": 150, "zoom": 2.0},
-      {"em": 96, "x": 850, "y": 440, "zoom": 1.6}, {"em": 138, "x": 850, "y": 440, "zoom": 1.6},
-      {"em": 150, "x": 1030, "y": 560, "zoom": 2.3}, {"em": 162, "x": 1030, "y": 560, "zoom": 2.3},
-      {"em": 178, "x": 850, "y": 360, "zoom": 1.0}],
-    "janela": {
-      "endereco": "pauta.app", "titulo": "Hoje", "subtitulo": "{n} tarefas", "botao": "+ Nova tarefa",
-      "itens": [{"texto": "Enviar proposta", "tag": "trabalho"}, {"texto": "Comprar café", "tag": "casa"}, {"texto": "Ligar pro Davi", "tag": "pessoal"}, {"texto": "Pagar o aluguel", "tag": "casa"}],
-      "modal": {"titulo": "Nova tarefa", "placeholder": "O que precisa ser feito?", "texto": "Revisar contrato", "botao": "Salvar", "tag": "trabalho"},
-      "tempos": {"abre": 70, "digita": [104, 132], "salva": 156}},
-    "cursor": {"aparece": 20, "chaves": [{"em": 20, "x": 1250, "y": 860}, {"em": 44, "x": 1000, "y": 620}, {"em": 64, "x": 1236, "y": 130}, {"em": 84, "x": 1236, "y": 130}, {"em": 98, "x": 860, "y": 452}, {"em": 136, "x": 900, "y": 520}, {"em": 150, "x": 1066, "y": 574}, {"em": 172, "x": 1150, "y": 420}], "cliques": [70, 100, 156]},
-    "destaques": [
-      {"x": 1120, "y": 96, "largura": 220, "altura": 56, "de": 60, "ate": 72},
-      {"x": 570, "y": 400, "largura": 560, "altura": 80, "de": 96, "ate": 134, "holofote": false},
-      {"x": 990, "y": 540, "largura": 140, "altura": 56, "de": 148, "ate": 158}]
-  },
-  "cenas": [
-    {"batida": "gancho", "de": 0, "ate": 44,
-     "camadas": [{"elemento": "TituloTela", "props": {"linhas": ["Tarefa nova", "em *3 passos*"], "y": 250, "inicio": 2, "fim": 36}}],
-     "sons": [{"som": "pop-palavra", "em": 2}, {"som": "whoosh-entra", "em": 10}]},
-    {"batida": "passo", "de": 44, "ate": 84,
-     "camadas": [{"elemento": "PassoChamada", "props": {"numero": 1, "texto": "Toque em Nova tarefa", "inicio": 8, "fim": 34}}],
-     "sons": [{"som": "swoosh", "em": 0}, {"som": "clique", "em": 26}, {"som": "pop-cartao", "em": 28, "volume": 0.6}]},
-    {"batida": "passo", "de": 84, "ate": 140,
-     "camadas": [{"elemento": "PassoChamada", "props": {"numero": 2, "texto": "Escreva o que precisa", "inicio": 6, "fim": 48}}],
-     "sons": [{"som": "swoosh", "em": 0}, {"som": "clique", "em": 16}, {"som": "digitar", "em": 20}]},
-    {"batida": "passo", "de": 140, "ate": 192,
-     "camadas": [{"elemento": "PassoChamada", "props": {"numero": 3, "texto": "Salve. Pronto.", "inicio": 4, "fim": 44}}],
-     "sons": [{"som": "swoosh", "em": 0}, {"som": "clique", "em": 16}, {"som": "sucesso", "em": 22}]},
-    {"batida": "atalho", "de": 192, "ate": 240,
-     "camadas": [{"elemento": "TeclaAtalho", "props": {"teclas": ["cmd", "N"], "legenda": "Ou use o atalho.", "y": 680, "inicio": 12, "aperta": 26}}],
-     "sons": [{"som": "whoosh-sai", "em": 0}, {"som": "pop-cartao", "em": 12}, {"som": "clique", "em": 26}, {"som": "assinatura", "em": 30, "volume": 0.6}]}
-  ]
-}

package/kits/tutorial-tela/exemplos/roteiro.md

@@ -1,14 +0,0 @@
-# Roteiro da demo: Pauta (app de tarefas fictício)
-
-Pedido: "Tutorial rápido de como criar uma tarefa no nosso app, com cara profissional."
-
-| quadros | batida | na tela | elemento | som |
-|---|---|---|---|---|
-| 0–44 | gancho | "Tarefa nova em 3 passos" · janela sobe (zoom 0,62) | TituloTela, CameraTela, JanelaApp | pop-palavra, whoosh |
-| 44–84 | passo 1 | câmera mergulha no botão (zoom 2,0) · cursor clica · modal abre | Cursor, DestaqueCaixa, PassoChamada | swoosh, clique, pop |
-| 84–140 | passo 2 | câmera atravessa até o campo (1,6) · clique · "Revisar contrato" digitado | Cursor, DestaqueCaixa, PassoChamada | swoosh, clique, digitar |
-| 140–192 | passo 3 + prova | zoom no Salvar (2,3) · clique · modal fecha · recua: linha nova destacada | Cursor, DestaqueCaixa, PassoChamada | swoosh, clique, sucesso |
-| 192–240 | atalho | janela cai · teclas ⌘ N apertadas · "Ou use o atalho." | TeclaAtalho | whoosh-sai, pop, clique, assinatura |
-
-Como a IA chegou nisso: um tutorial bom é UMA gravação contínua; a câmera faz o papel do dedo apontando. Cada
-clique é a causa da tela seguinte, então o espectador entende sem ler. Pauta é fictício.

package/kits/tutorial-tela/preview.tsx

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

package/kits/tutorial-tela/receita.json

@@ -1,15 +0,0 @@
-{
-  "kit": "tutorial-tela", "fps": 30, "batida_trilha_quadros": 16.7,
-  "batidas": [
-    {"nome": "gancho", "obrigatoria": true, "duracao": [36, 48], "elementos": ["TituloTela", "CameraTela", "JanelaApp"], "entrada": ["janela sobe"], "sons": ["pop-palavra", "whoosh-entra"], "nota": "título com marca-texto; a janela sobe inteira (zoom 0,62)"},
-    {"nome": "passo", "obrigatoria": true, "duracao": [40, 56], "elementos": ["CameraTela", "Cursor", "DestaqueCaixa", "PassoChamada", "JanelaApp"], "entrada": ["camera"], "sons": ["swoosh", "clique", "pop-cartao", "digitar", "sucesso"], "nota": "câmera mergulha no controle, cursor clica, a tela muda; repita 2–4 vezes"},
-    {"nome": "prova", "obrigatoria": false, "duracao": [24, 36], "elementos": ["CameraTela", "JanelaApp"], "entrada": ["camera"], "sons": ["sucesso"], "nota": "recua pra mostrar o resultado (linha nova destacada)"},
-    {"nome": "atalho", "obrigatoria": false, "duracao": [36, 48], "elementos": ["TeclaAtalho"], "entrada": ["janela sai"], "sons": ["whoosh-sai", "pop-cartao", "clique"], "nota": "teclas apertadas + legenda"},
-    {"nome": "cta", "obrigatoria": false, "duracao": [36, 48], "elementos": ["TituloTela", "TeclaAtalho"], "entrada": ["janela sai"], "sons": ["assinatura"], "nota": "frase final grande"}
-  ],
-  "transicoes": [
-    {"nome": "camera", "quadros": 12, "como": "o passo seguinte chega pela câmera (rampa + desfoque de movimento)"},
-    {"nome": "janela sobe", "quadros": 18, "como": "a janela entra de baixo inclinada"},
-    {"nome": "janela sai", "quadros": 14, "como": "a janela cai pra trás e some"}
-  ]
-}

package/kits/tutorial-tela/regras/area-segura.md

@@ -1,13 +0,0 @@
-# Área segura
-
-Tela 1080×1920. Texto lido entre y 168 e 1330, x 88 a 992.
-
-| elemento | y de referência |
-|---|---|
-| centro óptico da câmera (o controle da vez) | (540, 820) |
-| título | 250–470 (janela abaixo, de 634 a 1217 no zoom 0,62) |
-| legenda do passo | 1180 |
-| teclas de atalho | 680–870, legenda 940 |
-
-- No zoom do controle, a legenda cobre a janela: tudo bem, ela tem cartão branco e sombra.
-- Campo largo (560 de largura): zoom ≤ 1,7 pra caber em 1000 px.

package/kits/tutorial-tela/regras/cor.md

@@ -1,17 +0,0 @@
-# Cor
-
-| token | hex | uso |
-|---|---|---|
-| chao | #ECEEF2 → #DCE0E7 | chão (radial do centro à borda) |
-| tela | #FFFFFF | janela, cartões, teclas |
-| lateral | #F6F7F9 | lateral do app |
-| linha | #E4E7EC | divisórias |
-| tinta | #14161A | texto |
-| apagado | #6B7280 | texto secundário |
-| acento | #FF5B14 | botão, cursor clicando, anel, número do passo, marca-texto |
-| acentoClaro | #FFE4D6 | foco do campo, linha nova |
-| ok | #17A05D | check |
-
-- Grade de pontos: tinta a 7%, 2 px a cada 32 px.
-- Sombra da janela: 0 60 120 tinta 22% + 0 12 30 tinta 12%. Holofote: tinta 22% fora do anel.
-- Linha nova: acento 14% + contorno 50%, some em 30 quadros.

package/kits/tutorial-tela/regras/movimento.md

@@ -1,20 +0,0 @@
-# Movimento
-
-Curva da câmera e do cursor: `rampa` = easeInOutQuint. Entradas de cartão: `mola` (s = 1,7).
-
-| movimento | quadros | valores |
-|---|---|---|
-| janela entra | 18 | sobe 900 px, rotateX 22° → 0 |
-| janela sai | 14 | desce 300 px, rotateX 30°, escala 0,8, some |
-| câmera vai ao controle | 12–18 | zoom 0,62 → 2,0–2,3; segura ≥ 8 depois do clique |
-| câmera atravessa | 12–16 | pan entre controles, zoom 1,6–2,3 |
-| desfoque de movimento | durante o voo | até 7 px na direção (0,05 × px/quadro) |
-| cursor | 14–20 por trecho | arco de 12% da distância |
-| clique | 4 | cursor 82%, botão 92–94% |
-| onda do clique | 14 | r 0 → 54, opacidade 1 → 0 |
-| modal | 8 abre · 6 fecha | escala 0,94 → 1, sobe 20 px, fundo 28% |
-| digitação | 28 por 16 letras | cursor de texto pisca 8/8 |
-| linha nova | 10 | altura 0 → 84 |
-| anel de foco | 8 entra · 8 sai | 1,25 → 1, pulso 3% |
-| legenda do passo | 12 entra · 8 sai | sobe 60 px |
-| teclas | 12 entram · aperta 3 entre teclas | descem 10 px, borda 14 → 4 |

package/kits/tutorial-tela/regras/ritmo.md

@@ -1,24 +0,0 @@
-# Ritmo
-
-- 108 bpm: **1 batida = 16,7 quadros** (0,56 s). A cena da tela dura ~7,5 batidas (126 quadros); as outras 2–2,5 batidas.
-- Vídeo de 8 s = 240 quadros = 4 cenas.
-
-| batida | duração s | quadros |
-|---|---|---|
-| titulo | 1,0–1,4 | 30–42 |
-| tela | 3,6–5,0 | 110–150 (um passo a cada 30–45 quadros) |
-| atalho | 1,2–1,6 | 36–48 |
-| fim | 1,2–1,6 | 36–48 |
-
-- Leitura mínima: cada legenda de passo fica ≥ 26 quadros; a tarefa nova fica ≥ 10 quadros visível antes do zoom sair.
-- Evento novo (zoom, clique, modal, letra) a cada ≤ 0,7 s dentro da cena da tela; 12–20 quadros de pausa depois do clique final.
-
-## v2
-
-| batida | quadros |
-|---|---|
-| gancho (título + janela entra) | 36–48 |
-| passo (câmera chega + clique + respiro) | 40–56 |
-| atalho | 36–48 |
-
-- Clique ≥ 6 quadros depois que a câmera chega; respiro ≥ 8 depois do clique.

package/kits/tutorial-tela/regras/som.md

@@ -1,21 +0,0 @@
-# Som
-
-- Trilha: `assets/trilha/passo-108bpm.mp3` (8,6 s, 108 bpm, calm-punch, tom F), volume **0,42**, fade nos últimos **20 quadros**. Vídeo maior: gere outra (`music make --preset calm-punch --bpm 108 --key F --force`), sem loop.
-- Com narração: trilha a **0,2** e efeitos a 70%.
-
-| som | volume | quando |
-|---|---|---|
-| `clique` | 0,9 | cada clique do cursor, aperto da tecla |
-| `digitar` | 0,6 | a rajada de teclas no início da digitação |
-| `pop-cartao` | 0,9 | modal abre, tecla pousa |
-| `pop-palavra` | 0,9 | palavra do título, rótulo do atalho |
-| `sucesso` | 0,8 | o último clique deu certo (linha nova entra) |
-| `swoosh` | 0,85 | a câmera voa até o próximo controle |
-| `whoosh-entra` | 0,8 | entrada de cena sem lado (−1 quadro) |
-| `impacto` | 0,85 | opcional, no título |
-| `subida` | 0,65 | opcional, antes do fim |
-| `assinatura` | 0,85 | fecho |
-| `whoosh-sai` | 0,65 | saída grande (opcional) |
-
-- No máximo **3 sons por segundo**; nunca o mesmo arquivo duas vezes seguidas (clique, pop, clique é ok). Som entra 1 a 2 quadros antes do visual.
-- Alvo −14 LUFS, pico −1,5 dBTP.

package/kits/tutorial-tela/regras/tipografia.md

@@ -1,15 +0,0 @@
-# Tipografia
-
-- **Plus Jakarta Sans 500–800** (títulos, UI do app, passos) · **JetBrains Mono 500–700** (rótulos pequenos: "passo 1 de 3", etiquetas, endereço). Registradas como `"TS Jakarta"` e `"TS JetBrains Mono"`.
-- Títulos em caixa normal, tracking −0,03 a −0,04 em, `line-height` 1,1–1,18.
-
-| papel | fonte | tamanho px | máx. caracteres |
-|---|---|---|---|
-| título de abertura | Jakarta 800 | 96, tracking −0,03 em | 14 por linha |
-| frase do passo | Jakarta 800 | 46 | 24 |
-| "PASSO N DE M" | Mono 500 | 22, tracking 0,08 em | 14 |
-| número do passo | Jakarta 800 | 46 num círculo de 84 | 1 |
-| tecla com letra | Jakarta 800 | 100 numa tecla de 190 | 1 |
-| legenda do atalho | Jakarta 800 | 64 | 22 |
-| UI: título / linha / botão | Jakarta 800 / 600 / 700 | 54 / 30 / 24 (na janela 1400 × 940) | 12 / 28 / 14 |
-| UI: endereço, etiqueta | Mono 500 | 20 | 16 |

package/kits/ugc-reels/assets/ASSETS.md

@@ -1,22 +0,0 @@
-# Assets do kit ugc-reels
-
-| arquivo | o que é | origem | licença |
-|---|---|---|---|
-| `fontes/montserrat-latin.woff2` | Montserrat (700 900), subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Montserrat`), baixado em 26/10/2026 | SIL OFL 1.1, texto em `fontes/OFL-Montserrat.txt` |
-| `fontes/caveat-latin.woff2` | Caveat (600 700), subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Caveat`), baixado em 26/10/2026 | SIL OFL 1.1, texto em `fontes/OFL-Caveat.txt` |
-| `sons/corte.mp3` | cada corte seco entre imagens | sintetizado: MotionCraft `sfx make`, tipo `slot_tick`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
-| `sons/palavra.mp3` | início de cada frase da legenda | sintetizado: MotionCraft `sfx make`, tipo `word_pop`, pacote `soft-pop` | sem samples; síntese própria (CC0) |
-| `sons/pop.mp3` | emoji, avatar ou adereço que entra | sintetizado: MotionCraft `sfx make`, tipo `icon_pop`, pacote `soft-pop` | sem samples; síntese própria (CC0) |
-| `sons/notificacao.mp3` | bolha de comentário | sintetizado: MotionCraft `sfx make`, tipo `success`, pacote `soft-pop` | sem samples; síntese própria (CC0) |
-| `sons/whoosh.mp3` | nota ou botão que entra | sintetizado: MotionCraft `sfx make`, tipo `whoosh_in`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
-| `sons/toque.mp3` | botão LINK NA BIO | sintetizado: MotionCraft `sfx make`, tipo `button`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
-| `sons/impacto.mp3` | a frase da virada | sintetizado: MotionCraft `sfx make`, tipo `impact`, pacote `soft-pop` | sem samples; síntese própria (CC0) |
-| `sons/assinatura.mp3` | cartão final | sintetizado: MotionCraft `sfx make`, tipo `logo_sting`, pacote `soft-pop` | sem samples; síntese própria (CC0) |
-| `trilha/pop-120bpm.mp3` | 8,6 s a partir de 2.0 s da trilha gerada | MotionCraft `music make` (preset `warm-major`, 120 bpm, tom D) | sem samples; síntese própria (CC0). MotionCraft é MIT |
-
-Conteúdo de demonstração (não faz parte do estilo, fica em `exemplos/`):
-
-| arquivo | origem | licença |
-|---|---|---|
-| `exemplos/fotos/foto-02.jpg`, `foto-03.jpg`, `foto-04.jpg`, `foto-06.jpg` | cópias de `kits/apple-tipografico/exemplos/fotos/` (Unsplash, picsum ids 2, 3, 4, 20), recorte 720×960 | Unsplash License |
-| `exemplos/logo-rotina.svg` | logo fictício desenhado para a demo | próprio |

package/kits/ugc-reels/elementos/AssinaturaMarca.tsx

@@ -1,28 +0,0 @@
-// AssinaturaMarca: cartão final. A imagem fica borrada (24 px) e escurecida; o avatar com anel de story cai com overshoot,
-// o @usuário aparece e o botão Seguir / site fecham. Sem logo gigante: o clima é de perfil, não de comercial.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FAM_A, FONTE_A, caber, ob, seg} from './base';
-
-export type AssinaturaMarcaProps = {
-  /** imagem de fundo (borrada) */
-  fundo: string;
-  logo: string;
-  usuario: string;
-  endereco?: string;
-  inicio?: number;
-};
-
-export const AssinaturaMarca: React.FC<AssinaturaMarcaProps> = ({fundo, logo, usuario, endereco, inicio = 0}) => {
-  const f = useCurrentFrame() - inicio;
-  const av = ob(seg(f, 0, 12), 1.9), us = ob(seg(f, 8, 20), 1.9), bt = ob(seg(f, 16, 28), 1.9);
-  const tu = caber(usuario, 70, FAM_A, 800, 900, -0.01), te = caber(endereco ?? '', 46, FAM_A, 800, 700, 0);
-  return <>
-    <img src={fundo} style={{position: 'absolute', inset: 0, width: 1080, height: 1920, objectFit: 'cover', filter: 'blur(24px) brightness(0.45) saturate(1.1)', transform: `scale(${1.2 + f * 0.001})`}} />
-    <div style={{position: 'absolute', left: 540 - 190, top: 540 - 190, width: 380, height: 380, borderRadius: '50%', background: `conic-gradient(${COR.amarelo}, ${COR.vermelho}, ${COR.amarelo})`, padding: 14, boxSizing: 'border-box', transform: `scale(${av})`, opacity: Math.min(1, av * 2)}}>
-      <img src={logo} style={{width: '100%', height: '100%', borderRadius: '50%', border: '10px solid #0E0E10', boxSizing: 'border-box', objectFit: 'cover'}} />
-    </div>
-    <div style={{position: 'absolute', left: 0, width: 1080, top: 800, textAlign: 'center', fontFamily: FONTE_A, fontWeight: 900, fontSize: tu, letterSpacing: '-0.01em', color: COR.branco, transform: `scale(${us})`, opacity: Math.min(1, us * 2)}}>{usuario}</div>
-    {endereco && <div style={{position: 'absolute', left: 540 - 300, top: 940, width: 600, height: 110, borderRadius: 55, background: COR.amarelo, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FONTE_A, fontWeight: 900, fontSize: te, color: COR.preto, transform: `scale(${bt})`, opacity: Math.min(1, bt * 2)}}>{endereco}</div>}
-  </>;
-};