primocode 10.17.1 → 10.19.0

package/kits/tunel/elementos/base.ts

@@ -0,0 +1,97 @@
+// Base do kit tunel: cores, fontes, curvas e medidas. Todo número visual sai daqui.
+// Os elementos importam só este arquivo, 'react' e 'remotion'. Nada de fora da pasta do kit.
+import {continueRender, delayRender} from 'remotion';
+import fonteA from '../assets/fontes/syncopate-latin.woff2';
+import fonteB from '../assets/fontes/chakra-latin.woff2';
+
+// ---------- tela ----------
+export const LARGURA = 1080, ALTURA = 1920, FPS = 30;
+// área segura (Reels/TikTok): o que se lê fica entre estas linhas
+export const SEGURA = {topo: 168, base: 1330, lado: 96};
+export const LARGURA_UTIL = LARGURA - SEGURA.lado * 2; // 888 px
+
+// ---------- cor ----------
+export const COR = {
+  creme: '#F1E9DA',
+  tinta: '#111111',
+  vermelho: '#FF4A1C',
+  mostarda: '#FFB400',
+  verde: '#00A6A6',
+  osso: '#E3D7C0',
+};
+
+export const CORES_FAIXA = [COR.vermelho, COR.creme, COR.tinta, COR.mostarda, COR.osso, COR.verde];
+/** vértices de um polígono regular de `n` lados com apótema `a` (lado "reto" pra cima), centro (cx, cy), giro `rot` em rad */
+export const poligono = (n: number, a: number, cx: number, cy: number, rot = 0) => {
+  const R = a / Math.cos(Math.PI / n);
+  return Array.from({length: n}, (_, k) => `${(cx + Math.cos(rot + (2 * Math.PI * k) / n + Math.PI / n - Math.PI / 2) * R).toFixed(1)},${(cy + Math.sin(rot + (2 * Math.PI * k) / n + Math.PI / n - Math.PI / 2) * R).toFixed(1)}`).join(' ');
+};
+export const CENTRO_Y = 760;
+
+// ---------- fonte ----------
+// Famílias com o prefixo do kit, pra não colidir com outro kit no mesmo estúdio.
+export const FAM_A = 'TN Syncopate';
+export const FONTE_A = '"TN Syncopate", Impact, sans-serif';
+export const FAM_B = 'TN Chakra Petch';
+export const FONTE_B = '"TN Chakra Petch", system-ui, sans-serif';
+
+// As medidas de texto (caber) só valem depois das fontes: a Montagem espera `esperarFontes()` antes de desenhar.
+const TOTAL_FONTES = 2;
+let nProntas = 0;
+const aguardando: (() => void)[] = [];
+const marcarFonte = () => {nProntas++; if (nProntas >= TOTAL_FONTES) aguardando.splice(0).forEach((r) => r());};
+export const fontesProntas = () => nProntas >= TOTAL_FONTES || typeof document === 'undefined';
+export const esperarFontes = () => new Promise<void>((res) => {if (fontesProntas()) res(); else aguardando.push(res);});
+if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__tnA) {
+  (globalThis as Record<string, unknown>).__tnA = true;
+  const hA = delayRender('tunel: TN Syncopate');
+  new FontFace('TN Syncopate', `url(${fonteA}) format('woff2')`, {weight: '700', style: 'normal'}).load()
+    .then((ff) => {document.fonts.add(ff); marcarFonte(); continueRender(hA);})
+    .catch(() => {marcarFonte(); continueRender(hA);});
+}
+if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__tnB) {
+  (globalThis as Record<string, unknown>).__tnB = true;
+  const hB = delayRender('tunel: TN Chakra Petch');
+  new FontFace('TN Chakra Petch', `url(${fonteB}) format('woff2')`, {weight: '600', style: 'normal'}).load()
+    .then((ff) => {document.fonts.add(ff); marcarFonte(); continueRender(hB);})
+    .catch(() => {marcarFonte(); continueRender(hB);});
+}
+
+// ---------- tempo e curva ----------
+export const c01 = (t: number) => Math.max(0, Math.min(1, t));
+/** progresso 0..1 de f entre a e b */
+export const seg = (f: number, a: number, b: number) => c01((f - a) / (b - a));
+/** saída rápida e pouso longo, ≈ cubic-bezier(.2,.8,.2,1) */
+export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
+/** saída com overshoot (passa de 1 e volta): toda entrada do kit usa esta ou a e5 */
+export const ob = (t: number, s = 1.7) => {const x = c01(t) - 1; return 1 + (s + 1) * x * x * x + s * x * x;};
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+/** pseudo-aleatório estável (0..1) a partir de um inteiro */
+export const rnd = (n: number) => {const x = Math.sin(n * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x);};
+/** uma batida da trilha do kit em quadros */
+export const BATIDA = 14.0625;
+
+// ---------- medida de texto ----------
+let canvas: HTMLCanvasElement | null = null;
+const cache = new Map<string, number>();
+export const larguraTexto = (texto: string, tamanho: number, fam: string, peso = 800, trackingEm = 0): number => {
+  const chave = `${texto}|${tamanho}|${fam}|${peso}|${trackingEm}`;
+  const c = cache.get(chave); if (c !== undefined) return c;
+  if (typeof document === 'undefined') return texto.length * tamanho * 0.58;
+  canvas = canvas || document.createElement('canvas');
+  const ctx = canvas.getContext('2d'); if (!ctx) return texto.length * tamanho * 0.58;
+  const fonte = `${peso} ${tamanho}px "${fam}"`;
+  ctx.font = fonte;
+  const w = ctx.measureText(texto).width + texto.length * trackingEm * tamanho;
+  if (fontesProntas() && document.fonts.check(fonte)) cache.set(chave, w);
+  return w;
+};
+/** o maior tamanho até `tamanho` em que o texto cabe em `largura` (nunca palavra cortada) */
+export const caber = (texto: string, tamanho: number, fam: string, largura = LARGURA_UTIL, peso = 800, trackingEm = 0) => {
+  const w = larguraTexto(texto, tamanho, fam, peso, trackingEm);
+  return w > largura ? Math.floor(tamanho * (largura / w)) : tamanho;
+};
+/** tira os asteriscos de destaque: "Usar *IA*" -> "Usar IA" */
+export const textoLimpo = (t: string) => t.replace(/\*/g, '');
+/** corta "a *b* c" em [{t:'a ', d:false}, {t:'b', d:true}, {t:' c', d:false}] */
+export const partes = (t: string) => t.split('*').map((p, i) => ({t: p, d: i % 2 === 1})).filter((p) => p.t.length > 0);

package/kits/tunel/elementos/index.ts

@@ -0,0 +1,15 @@
+// Tudo que o kit tunel oferece. A IA monta o vídeo combinando isto (ou escrevendo um plano pra Montagem).
+export * from './base';
+export {Fundo} from './Fundo';
+export {Camera, posCamera} from './Camera';
+export {Cena, useDuracaoCena, SOBREPOE} from './Cena';
+export {TunelDeFormas} from './TunelDeFormas';
+export {TituloTunel} from './TituloTunel';
+export {NumeroGigante} from './NumeroGigante';
+export {PlacaVoadora} from './PlacaVoadora';
+export {LinhasDeVelocidade} from './LinhasDeVelocidade';
+export {AssinaturaMarca} from './AssinaturaMarca';
+export {Efeito, Trilha, SONS} from './Som';
+export type {NomeSom} from './Som';
+export {Montagem, ELEMENTOS} from './Montagem';
+export type {Plano, CenaPlano, Camada} from './Montagem';

package/kits/tunel/exemplos/logo-rota21.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect width="200" height="200" rx="36" fill="#FF4A1C"/><rect x="40" y="40" width="120" height="120" rx="20" fill="#F1E9DA"/><rect x="72" y="72" width="56" height="56" rx="10" fill="#111"/></svg>

package/kits/tunel/exemplos/plano.json

@@ -0,0 +1,51 @@
+{
+  "kit": "tunel",
+  "roteiro": "exemplos/roteiro.md",
+  "duracao": 240,
+  "trilha": {"volume": 0.55},
+  "cenas": [
+    {"batida": "gancho", "de": 0, "ate": 42, "entrada": "nenhuma",
+     "camadas": [
+       {"elemento": "TunelDeFormas", "props": {"forma": "quadrado", "abertura": 400}},
+       {"elemento": "NumeroGigante", "props": {"texto": "21", "legenda": "quilômetros", "inicio": 4, "tamanho": 380, "y": 700}}
+     ],
+     "socos": [20],
+     "sons": [{"som": "whoosh", "em": 2}, {"som": "impacto", "em": 18}, {"som": "clique", "em": 28}]},
+    {"batida": "virada", "de": 42, "ate": 84, "entrada": "zoom",
+     "camadas": [
+       {"elemento": "TunelDeFormas", "props": {"forma": "circulo", "abertura": 400, "torcao": 1.4}},
+       {"elemento": "TituloTunel", "props": {"linhas": ["ROTA", "21"], "inicio": 4, "intervalo": 7, "tamanho": 170, "destaque": 1}},
+       {"elemento": "LinhasDeVelocidade", "props": {"inicio": 0, "duracao": 10}}
+     ],
+     "socos": [4, 22],
+     "sons": [{"som": "tick", "em": 0}, {"som": "whoosh", "em": 3}, {"som": "impacto", "em": 20}]},
+    {"batida": "prova", "de": 84, "ate": 126, "entrada": "direita",
+     "camadas": [
+       {"elemento": "TunelDeFormas", "props": {"forma": "hexagono", "abertura": 400}},
+       {"elemento": "PlacaVoadora", "props": {"linhas": ["MEIA", "MARATONA"], "cor": "#FFB400", "inicio": 4, "fim": 30, "tamanho": 96}}
+     ],
+     "socos": [4, 30],
+     "sons": [{"som": "whoosh", "em": 3}, {"som": "passa", "em": 29}]},
+    {"batida": "prova", "de": 126, "ate": 162, "entrada": "zoom",
+     "camadas": [
+       {"elemento": "TunelDeFormas", "props": {"forma": "triangulo", "abertura": 410, "torcao": 1.6}},
+       {"elemento": "PlacaVoadora", "props": {"linhas": ["5 MIL", "CORREDORES"], "cor": "#00A6A6", "corTexto": "#F1E9DA", "inicio": 4, "fim": 26, "tamanho": 90, "rot": 4}}
+     ],
+     "socos": [4, 26],
+     "sons": [{"som": "whoosh", "em": 3}, {"som": "passa", "em": 25}]},
+    {"batida": "data", "de": 162, "ate": 204, "entrada": "zoom",
+     "camadas": [
+       {"elemento": "TunelDeFormas", "props": {"forma": "octogono", "abertura": 400}},
+       {"elemento": "NumeroGigante", "props": {"texto": "22/03", "legenda": "domingo · 6h", "inicio": 4, "tamanho": 280, "y": 700}}
+     ],
+     "socos": [20],
+     "sons": [{"som": "subida", "em": -4}, {"som": "impacto", "em": 19}, {"som": "clique", "em": 30}]},
+    {"batida": "marca", "de": 204, "ate": 240, "entrada": "zoom",
+     "camadas": [
+       {"elemento": "TunelDeFormas", "props": {"forma": "quadrado", "abertura": 400, "desacelera": 36}},
+       {"elemento": "AssinaturaMarca", "props": {"logo": "logo-rota21.svg", "nome": "rota 21", "endereco": "rota21.exemplo", "inicio": 2}}
+     ],
+     "socos": [4],
+     "sons": [{"som": "assinatura", "em": 4}, {"som": "clique", "em": 26}]}
+  ]
+}

package/kits/tunel/exemplos/roteiro.md

@@ -0,0 +1,20 @@
+# Roteiro de demonstração · "Rota 21" (corrida fictícia)
+
+Pedido: *"um reels de 8 s anunciando a Rota 21, meia maratona urbana, 5 mil corredores, domingo 22 de março às 6h no Parque Aurora. Estilo túnel."*
+
+Sem narração: os cortes seguem a trilha (1 batida = 14.0625 quadros).
+
+| # | batida | tempo (quadros) | na tela | elemento | som |
+|---|---|---|---|---|---|
+| 1 | gancho | 0–42 | número "21" na janela, túnel de quadrados | TunelDeFormas + NumeroGigante | whoosh, impacto |
+| 2 | virada | 42–84 | "ROTA 21" chega do fundo; túnel de círculos | TunelDeFormas + TituloTunel | tick, whoosh, impacto |
+| 3 | prova | 84–126 | placa "meia maratona" atravessa; túnel de hexágonos | TunelDeFormas + PlacaVoadora | whoosh, passa |
+| 4 | prova | 126–162 | placa "5 mil corredores"; túnel de triângulos | TunelDeFormas + PlacaVoadora | whoosh, passa |
+| 5 | data | 162–204 | "22/03" + "domingo · 6h" | TunelDeFormas + NumeroGigante | subida, impacto |
+| 6 | marca | 204–240 | logo + "rota 21" + "rota21.exemplo" | TunelDeFormas + AssinaturaMarca | assinatura, clique |
+
+Como a IA chegou nisso:
+1. Cortou o pedido em: número, nome, dois benefícios, data.
+2. Pegou as batidas obrigatórias e trocou a forma do túnel em cada corte (quadrado, círculo, hexágono, triângulo).
+3. Deu a cada texto uma chegada, uma parada para leitura e uma travessia.
+4. Escreveu `plano.json`; o `preview.tsx` passa o plano para `Montagem`.

package/kits/tunel/preview.tsx

@@ -0,0 +1,12 @@
+// Preview do kit: o vídeo de demonstração (8 s) montado SÓ com os elementos do kit, a partir de exemplos/plano.json.
+// O estúdio registra isto como `Kit-tunel`.
+import React from 'react';
+import {Montagem, Plano} from './elementos';
+import plano from './exemplos/plano.json';
+import l0 from './exemplos/logo-rota21.svg';
+
+const arquivos: Record<string, string> = {'logo-rota21.svg': l0};
+
+const Preview: React.FC = () => <Montagem plano={plano as Plano} arquivos={arquivos} />;
+
+export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 70, Componente: Preview};

package/kits/tunel/receita.json

@@ -0,0 +1,153 @@
+{
+  "kit": "tunel",
+  "fps": 30,
+  "batida_trilha_quadros": 14.0625,
+  "duracao_video_s": [
+    6,
+    45
+  ],
+  "ordem_sugerida": [
+    "gancho",
+    "virada",
+    "prova",
+    "data",
+    "marca"
+  ],
+  "batidas": [
+    {
+      "nome": "gancho",
+      "obrigatoria": true,
+      "duracao": [
+        36,
+        54
+      ],
+      "elementos": [
+        "TunelDeFormas",
+        "NumeroGigante"
+      ],
+      "entrada": [
+        "nenhuma"
+      ],
+      "sons": [
+        "whoosh",
+        "impacto"
+      ],
+      "nota": "túnel de quadrados + um número gigante na janela."
+    },
+    {
+      "nome": "virada",
+      "obrigatoria": true,
+      "duracao": [
+        39,
+        60
+      ],
+      "elementos": [
+        "TunelDeFormas",
+        "TituloTunel",
+        "LinhasDeVelocidade"
+      ],
+      "entrada": [
+        "zoom"
+      ],
+      "sons": [
+        "tick",
+        "whoosh",
+        "impacto"
+      ],
+      "nota": "o túnel troca de forma; o nome do produto/evento chega do fundo."
+    },
+    {
+      "nome": "prova",
+      "obrigatoria": true,
+      "duracao": [
+        33,
+        48
+      ],
+      "elementos": [
+        "TunelDeFormas",
+        "PlacaVoadora",
+        "LinhasDeVelocidade"
+      ],
+      "entrada": [
+        "direita",
+        "zoom"
+      ],
+      "sons": [
+        "whoosh",
+        "passa"
+      ],
+      "nota": "uma placa com o benefício; pode repetir 2 vezes."
+    },
+    {
+      "nome": "data",
+      "obrigatoria": false,
+      "duracao": [
+        36,
+        54
+      ],
+      "elementos": [
+        "TunelDeFormas",
+        "NumeroGigante"
+      ],
+      "entrada": [
+        "zoom"
+      ],
+      "sons": [
+        "subida",
+        "impacto"
+      ],
+      "nota": "data em número gigante + dia e hora na legenda."
+    },
+    {
+      "nome": "marca",
+      "obrigatoria": true,
+      "duracao": [
+        48,
+        90
+      ],
+      "elementos": [
+        "TunelDeFormas",
+        "AssinaturaMarca"
+      ],
+      "entrada": [
+        "zoom"
+      ],
+      "sons": [
+        "assinatura",
+        "clique"
+      ],
+      "nota": "sempre a última. O túnel desacelera e a janela mostra a marca."
+    }
+  ],
+  "transicoes": [
+    {
+      "nome": "zoom",
+      "quadros": 12,
+      "como": "entra de 1,9x para 1 com desfoque 8 px; a anterior sai crescendo"
+    },
+    {
+      "nome": "direita",
+      "quadros": 12,
+      "como": "entra 800 px da direita"
+    },
+    {
+      "nome": "subir",
+      "quadros": 12,
+      "como": "entra 300 px de baixo"
+    },
+    {
+      "nome": "nenhuma",
+      "quadros": 0,
+      "como": "só a primeira cena"
+    }
+  ],
+  "camera": {
+    "deriva": "sempre, com rolagem de ±0,6°",
+    "socos": "chegada do texto e a data"
+  },
+  "trilha": {
+    "arquivo": "assets/trilha/tech-128bpm.mp3",
+    "volume": 0.55,
+    "com_narracao": 0.28
+  }
+}

package/kits/tunel/regras/area-segura.md

@@ -0,0 +1,18 @@
+# Área segura (9:16, 1080×1920)
+
+- Tudo que se lê fica entre **y = 168** e **y = 1330** e entre **x = 96** e **x = 984** (888 px úteis).
+- Embaixo de 1330 px ficam a legenda e os botões do Reels/TikTok: ali só fundo e o que sangra.
+- Respiro: 35–45% do quadro livre, 1 herói + no máximo 1 apoio por cena, nada encostando na borda, pausa de 15–24 quadros depois de cada impacto.
+- Posições de referência (centro da linha, em px):
+
+| uso | y |
+|---|---|
+| centro da janela | 760 |
+| título de 2 linhas (centro do bloco) | 760 |
+| número gigante | 740 |
+| legenda sob o número | 1010 |
+| logo na assinatura | 560 |
+| nome | 940 |
+| endereço | 1130 |
+
+- O túnel e as linhas de velocidade sangram a tela; o texto fica na janela central.

package/kits/tunel/regras/cor.md

@@ -0,0 +1,21 @@
+# Cor
+
+| token | hex | uso |
+|---|---|---|
+| `creme` | #F1E9DA | janela e chão |
+| `tinta` | #111111 | texto e anel preto |
+| `vermelho` | #FF4A1C | faixa 1 e destaque |
+| `mostarda` | #FFB400 | faixa 2 |
+| `verde` | #00A6A6 | faixa 3 |
+| `osso` | #E3D7C0 | faixa clara |
+
+## Degradês e sombras
+
+- Sequência das faixas (de fora pra dentro, repete): vermelho, creme, preto, mostarda, osso, verde.
+- Janela: `#F1E9DA` chapada, mesma forma do túnel.
+- Texto na janela: `#111111`; destaque em `#FF4A1C`.
+- Sem sombra e sem degradê em lugar nenhum.
+
+## O que o cliente pode trocar
+
+As 4 cores de faixa (vermelho, mostarda, verde, osso) podem ser as da marca; preto e creme ficam.

package/kits/tunel/regras/movimento.md

@@ -0,0 +1,17 @@
+# Movimento
+
+Curva padrão: `ob(t, 1,7)` na chegada do texto; o túnel usa crescimento exponencial `r = 30 · (1500/30)^t` (t = 0..1 do anel).
+
+| movimento | duração | valores |
+|---|---|---|
+| avanço do túnel | contínuo | 0,0143 volta de anel por quadro (0,43/s); 14 anéis |
+| torção | contínuo | cada anel gira (1 − t) · 70° + 0,25°/quadro |
+| curva | contínuo | anéis distantes se deslocam até 120 px, `sin(0,05·f)` |
+| texto chega | 16 quadros | escala 0,08 → 1 do ponto de fuga com overshoot 1,7 |
+| texto atravessa | 12 quadros | escala 1 → 6, opacidade 1 → 0, desfoque 10 px |
+| linhas de velocidade | 10 quadros | 44 riscos de 120 a 700 px saindo do centro |
+| entrada de cena | 12 quadros | `zoom` 1,9× · `subir` 300 px · `direita` 800 px |
+| câmera (sempre) | contínuo | zoom 1,015 + 0,0002/quadro ± 0,01, giro ±0,57°; soco +0,03 |
+
+- Pausa de 15–24 quadros com o texto parado na janela antes de ele atravessar.
+- Troca de forma (quadrado → círculo → hexágono) só no corte de cena.

package/kits/tunel/regras/ritmo.md

@@ -0,0 +1,14 @@
+# Ritmo
+
+- 30 fps. Uma batida da trilha = **14.0625 quadros** (128 bpm). Cortes em múltiplos de 14 quadros: 0, 14, 28, 42, 56, 70, 84, 98, 112, 126, 140, 154, 168, 182, 196, 210, 224.
+
+| batida | duração (s) | quadros |
+|---|---|---|
+| gancho | 1,2–1,8 | 36–54 |
+| virada | 1,3–2,0 | 39–60 |
+| prova (cada) | 1,1–1,6 | 33–48 |
+| data | 1,2–1,8 | 36–54 |
+| marca | 1,6–3,0 | 48–90 |
+
+- Preview do kit: 8 s, 6 cenas.
+- Leitura: um texto precisa de **≥ 24 quadros** parado na janela antes de atravessar.

package/kits/tunel/regras/som.md

@@ -0,0 +1,20 @@
+# Som
+
+- Trilha: `assets/trilha/tech-128bpm.mp3` (8,6 s, 128 bpm), volume **0.55**, fade de saída nos últimos **20 quadros**. Vídeo maior que 8,6 s: gere uma trilha nova no MotionCraft (`music make`, preset `tech-bright`, 128 bpm, tom C), não faça loop deste trecho.
+- Com narração: trilha a **0.28** e efeitos a 70% do volume da tabela.
+- Efeitos (todos sintetizados) e volume padrão:
+
+| som | volume | quando |
+|---|---|---|
+| `whoosh` | 0.9 | entrada de cena / texto que chega do fundo |
+| `passa` | 0.85 | texto que atravessa a tela |
+| `impacto` | 0.85 | a palavra principal assentando |
+| `tick` | 0.7 | troca de forma do túnel |
+| `varre` | 0.7 | linhas de velocidade |
+| `subida` | 0.6 | antes da data |
+| `clique` | 0.8 | detalhe / endereço |
+| `assinatura` | 0.9 | revelação da marca |
+
+- Um som por movimento que importa; no máximo **3 sons por segundo**; nunca o mesmo arquivo duas vezes seguidas.
+- Som entra **1 a 2 quadros antes** do visual.
+- O render nivela o mix em **−14 LUFS**, pico −1,5 dBTP.

package/kits/tunel/regras/tipografia.md

@@ -0,0 +1,15 @@
+# Tipografia
+
+Duas fontes: **Syncopate 700** (larguíssima, caixa-alta) para tudo que é grande e **Chakra Petch 600** para detalhe.
+
+| papel | fonte | peso | tamanho (px) | máx. caracteres |
+|---|---|---|---|---|
+| título / palavra (hero) | Syncopate | 700 | 110–160 | 8 |
+| número gigante | Syncopate | 700 | 260–340 | 5 |
+| placa voadora | Syncopate | 700 | 70–96 | 14 |
+| detalhe / endereço | Chakra Petch | 600 | 48–58 | 28 |
+
+- Tracking: 0 em Syncopate (já é larga); 0,04 em no Chakra.
+- Line-height: 1,1.
+- Caixa: caixa-alta no Syncopate; frase normal no Chakra.
+- Texto que cresce encolhe sozinho (`caber()` em `base.ts`) até caber em 920 px; nunca palavra cortada.

package/kits/tutorial-tela/SKILL.md

@@ -0,0 +1,55 @@
+---
+slug: tutorial-tela
+nome: Tutorial de tela
+descricao: tour de produto com cara de gravação profissional: zooms grandes no controle exato, cursor grande que clica e causa o próximo estado, passos numerados, rampa de velocidade
+familia: Redes sociais
+versao: 2
+quando:
+  - "tutorial de como usar meu app ou site em 3 passos"
+  - "vídeo de tela gravada com zoom e cursor mostrando um fluxo"
+  - "reels de dica rápida de produtividade com atalho de teclado"
+  - "demonstrar uma funcionalidade nova passo a passo"
+nao_serve:
+  - "vídeo sem interface nenhuma (use tipografia ou minimal)"
+  - "tela real do cliente com dados sensíveis (o kit desenha uma tela demo; com tela real, mande o vídeo gravado e use só os elementos de fora)"
+---
+
+# Tutorial de tela
+
+Um **tour de produto com acabamento de Apple/Linear**: uma janela de app nítida num chão limpo (cinza-azulado com
+grade de pontos que deriva) e uma **câmera de gravação** que nunca para: começa na janela inteira (zoom 0,62),
+**mergulha no controle exato** (zoom 2–2,3), **atravessa** a interface até o próximo controle e recua no fim. Todo
+deslocamento tem **rampa de velocidade** (easeInOutQuint: arranca, voa, freia longo) e **desfoque de movimento** na
+direção do voo. O **cursor é grande**, anda em arco e cada **clique causa o próximo estado** (o botão afunda, o modal
+abre, o texto é digitado, a linha nova entra destacada), com **onda laranja** no ponto do clique. Um **anel de foco**
+com holofote marca o controle da vez, e a **legenda do passo** (número laranja + "PASSO 1 DE 3" + frase) sobe num
+cartão branco. Fecha com **teclas de atalho** de verdade sendo apertadas. Um acento só: laranja `#FF5B14`.
+
+## Como montar um vídeo com este kit
+
+1. **Corte o fluxo** em 2–4 passos. Cada passo = um controle + uma frase de até 24 caracteres.
+2. **Escreva a gravação** no plano: `janela` (os textos do app e os tempos de clique/digitação), `camera`
+   ({em, x, y, zoom}: chegue no controle ~8 quadros antes do clique e segure ≥ 8 depois), `cursor` (chaves e
+   cliques nos MESMOS quadros dos `tempos`) e `destaques` (o retângulo do controle). Pontos úteis: `ALVOS` em JanelaApp.
+3. **Escreva as cenas de cima**: título no começo, um `PassoChamada` por passo, `TeclaAtalho` no fim.
+4. **Renderize** e confira: o controle da vez sempre perto do centro (540, 820), legenda em y 1180, nada parado.
+
+## Elementos
+
+| elemento | o que faz | batidas |
+|---|---|---|
+| `CameraTela` | câmera da gravação: zoom/pan por chaves, rampa de velocidade, desfoque de movimento, janela entra e sai | toda a gravação |
+| `JanelaApp` | app de lista nítido que muda de estado por quadros (botão, modal, digitação, salvar, linha nova) | toda a gravação |
+| `Cursor` | ponteiro grande em arco, afunda no clique, onda laranja | passos |
+| `DestaqueCaixa` | anel de foco que pulsa + holofote | passos |
+| `PassoChamada` | legenda do passo com número, "PASSO N DE M" e frase | passos |
+| `TituloTela` | título grande com marca-texto laranja | gancho |
+| `TeclaAtalho` | teclas em relevo apertadas em sequência + legenda | atalho, cta |
+
+## Proibido
+
+- Janela parada: a câmera sempre está indo pra um controle ou segurando ≤ 20 quadros.
+- Clique sem consequência (todo clique muda o estado da tela).
+- Corte seco entre passos: o passo seguinte chega pela câmera.
+- Mais de 1 legenda na tela; texto da legenda com mais de 24 caracteres.
+- Cor fora da paleta; tela real do cliente com dado sensível.

package/kits/tutorial-tela/assets/ASSETS.md

@@ -0,0 +1,20 @@
+# Assets do kit tutorial-tela
+
+| arquivo | o que é | origem | licença |
+|---|---|---|---|
+| `fontes/jakarta.woff2` | Plus Jakarta Sans variável 500–800, subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500..800`), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-PlusJakartaSans.txt` |
+| `fontes/jbmono.woff2` | JetBrains Mono variável 500–700, subset latino | Google Fonts (`fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500..700`), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-JetBrainsMono.txt` |
+| `sons/whoosh-entra.mp3` | whoosh de entrada | sintetizado: MotionCraft `sfx make`, tipo `whoosh_in`, pacote `organic-wood` | sem samples; síntese própria, uso livre (CC0) |
+| `sons/whoosh-sai.mp3` | whoosh de saída | sintetizado: MotionCraft `sfx make`, tipo `whoosh_out`, pacote `organic-wood` | sem samples; síntese própria, uso livre (CC0) |
+| `sons/swoosh.mp3` | swoosh lateral | sintetizado: MotionCraft `sfx make`, tipo `swoosh`, pacote `organic-wood` | sem samples; síntese própria, uso livre (CC0) |
+| `sons/pop-palavra.mp3` | pop curto de palavra | sintetizado: MotionCraft `sfx make`, tipo `word_pop`, pacote `organic-wood` | sem samples; síntese própria, uso livre (CC0) |
+| `sons/pop-cartao.mp3` | pop de cartão/selo que pousa | sintetizado: MotionCraft `sfx make`, tipo `icon_pop`, pacote `organic-wood` | sem samples; síntese própria, uso livre (CC0) |
+| `sons/clique.mp3` | clique de botão | sintetizado: MotionCraft `sfx make`, tipo `button`, pacote `organic-wood` | sem samples; síntese própria, uso livre (CC0) |
+| `sons/impacto.mp3` | impacto grave | sintetizado: MotionCraft `sfx make`, tipo `impact`, pacote `organic-wood` | sem samples; síntese própria, uso livre (CC0) |
+| `sons/subida.mp3` | riser de 1,2 s | sintetizado: MotionCraft `sfx make`, tipo `riser`, pacote `organic-wood` | sem samples; síntese própria, uso livre (CC0) |
+| `sons/assinatura.mp3` | acorde da marca | sintetizado: MotionCraft `sfx make`, tipo `logo_sting`, pacote `organic-wood` | sem samples; síntese própria, uso livre (CC0) |
+| `sons/digitar.mp3` | tecla digitada | sintetizado: MotionCraft `sfx make`, tipo `type`, pacote `organic-wood` | sem samples; síntese própria, uso livre (CC0) |
+| `sons/sucesso.mp3` | acorde de tarefa concluída | sintetizado: MotionCraft `sfx make`, tipo `success`, pacote `organic-wood` | sem samples; síntese própria, uso livre (CC0) |
+| `trilha/passo-108bpm.mp3` | 8.6 s de trilha, preset calm-punch, 108 bpm, tom F | MotionCraft `music make --preset calm-punch --bpm 108 --key F --duration 10 --force`, cortada em 8,6 s com fade | sem samples; síntese própria (CC0). MotionCraft é MIT |
+
+A demo não usa foto nem arquivo externo: tudo é desenhado pelos elementos do kit.

package/kits/tutorial-tela/assets/fontes/OFL-JetBrainsMono.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The JetBrains Mono Project Authors (https://fonts.google.com/specimen/JetBrains+Mono)
+
+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.