primocode 10.17.1 → 10.19.0

package/kits/tiktok-energia/elementos/base.ts

@@ -0,0 +1,92 @@
+// Base do kit tiktok-energia: 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/anton-latin.woff2';
+import fonteB from '../assets/fontes/rubik-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 = {
+  preto: '#0B0B0F',
+  branco: '#FFFFFF',
+  lima: '#D4FF1F',
+  magenta: '#FF2D75',
+  azul: '#2E5BFF',
+};
+
+export const BLOCOS = [COR.lima, COR.preto, COR.magenta, COR.azul];
+/** cor do texto que lê bem sobre o bloco */
+export const sobre = (bloco: string) => (bloco === COR.lima || bloco === COR.branco ? COR.preto : COR.branco);
+
+// ---------- fonte ----------
+// Famílias com o prefixo do kit, pra não colidir com outro kit no mesmo estúdio.
+export const FAM_A = 'TK Anton';
+export const FONTE_A = '"TK Anton", Impact, sans-serif';
+export const FAM_B = 'TK Rubik';
+export const FONTE_B = '"TK Rubik", 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>).__tkA) {
+  (globalThis as Record<string, unknown>).__tkA = true;
+  const hA = delayRender('tiktok-energia: TK Anton');
+  new FontFace('TK Anton', `url(${fonteA}) format('woff2')`, {weight: '400', 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>).__tkB) {
+  (globalThis as Record<string, unknown>).__tkB = true;
+  const hB = delayRender('tiktok-energia: TK Rubik');
+  new FontFace('TK Rubik', `url(${fonteB}) format('woff2')`, {weight: '600 900', 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.9) => {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/tiktok-energia/elementos/index.ts

@@ -0,0 +1,15 @@
+// Tudo que o kit tiktok-energia 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 {CorteDeCor} from './CorteDeCor';
+export {PalavraSoco} from './PalavraSoco';
+export {TextoCaixa} from './TextoCaixa';
+export {FotoSoco} from './FotoSoco';
+export {EmojiSticker} from './EmojiSticker';
+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/tiktok-energia/exemplos/logo-pulo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect width="200" height="200" fill="#0B0B0F"/><path d="M40 150L100 40l60 110z" fill="#D4FF1F"/><path d="M70 150l30-56 30 56z" fill="#FF2D75"/></svg>

package/kits/tiktok-energia/exemplos/plano.json

@@ -0,0 +1,66 @@
+{
+  "kit": "tiktok-energia",
+  "roteiro": "exemplos/roteiro.md",
+  "duracao": 240,
+  "trilha": {"volume": 0.6},
+  "cenas": [
+    {"batida": "gancho", "de": 0, "ate": 30, "entrada": "nenhuma",
+     "camadas": [
+       {"elemento": "CorteDeCor", "props": {"cor": "#D4FF1F", "de": "esquerda"}},
+       {"elemento": "PalavraSoco", "props": {"palavras": ["PARA!"], "y": 700, "tamanho": 420, "cor": "#0B0B0F", "inicio": 3}},
+       {"elemento": "EmojiSticker", "props": {"emoji": "👀", "x": 540, "y": 1090, "tamanho": 250, "inicio": 14}}
+     ],
+     "socos": [3, 14],
+     "sons": [{"som": "corte", "em": 0}, {"som": "soco", "em": 3}, {"som": "pop", "em": 14}]},
+    {"batida": "virada", "de": 30, "ate": 62, "entrada": "nenhuma",
+     "camadas": [
+       {"elemento": "CorteDeCor", "props": {"cor": "#0B0B0F", "de": "direita"}},
+       {"elemento": "PalavraSoco", "props": {"palavras": ["TEM", "DROP"], "intervalo": 15, "y": 720, "tamanho": 460, "cor": "#D4FF1F", "divisao": ["#FF2D75", "#2E5BFF"], "inicio": 3}}
+     ],
+     "socos": [3, 18],
+     "sons": [{"som": "corte", "em": 0}, {"som": "soco", "em": 3}, {"som": "palavra", "em": 17}, {"som": "soco", "em": 18}]},
+    {"batida": "prova", "de": 62, "ate": 98, "entrada": "nenhuma",
+     "camadas": [
+       {"elemento": "CorteDeCor", "props": {"cor": "#2E5BFF", "de": "baixo"}},
+       {"elemento": "FotoSoco", "props": {"src": "fotos/foto-03.jpg", "x": 540, "y": 640, "largura": 700, "altura": 860, "rot": -3, "inicio": 4}},
+       {"elemento": "TextoCaixa", "props": {"texto": "tênis Pulo", "x": 540, "y": 1150, "tamanho": 96, "rot": 4, "estilo": "lima", "inicio": 14}}
+     ],
+     "socos": [4, 14],
+     "sons": [{"som": "corte", "em": 0}, {"som": "whoosh", "em": 3}, {"som": "pop", "em": 14}]},
+    {"batida": "prova", "de": 98, "ate": 128, "entrada": "nenhuma",
+     "camadas": [
+       {"elemento": "CorteDeCor", "props": {"cor": "#FF2D75", "de": "cima"}},
+       {"elemento": "PalavraSoco", "props": {"palavras": ["50%"], "y": 720, "tamanho": 520, "cor": "#FFFFFF", "divisao": ["#0B0B0F", "#2E5BFF"], "inicio": 3}}
+     ],
+     "socos": [3],
+     "sons": [{"som": "corte", "em": 0}, {"som": "subida", "em": -2}, {"som": "soco", "em": 3}]},
+    {"batida": "prova", "de": 128, "ate": 158, "entrada": "nenhuma",
+     "camadas": [
+       {"elemento": "CorteDeCor", "props": {"cor": "#0B0B0F", "de": "esquerda"}},
+       {"elemento": "PalavraSoco", "props": {"palavras": ["SÓ 100"], "y": 720, "tamanho": 440, "cor": "#FFFFFF", "divisao": ["#D4FF1F", "#FF2D75"], "inicio": 3}}
+     ],
+     "socos": [3],
+     "sons": [{"som": "corte", "em": 0}, {"som": "soco", "em": 3}]},
+    {"batida": "data", "de": 158, "ate": 190, "entrada": "nenhuma",
+     "camadas": [
+       {"elemento": "CorteDeCor", "props": {"cor": "#D4FF1F", "de": "direita"}},
+       {"elemento": "PalavraSoco", "props": {"palavras": ["DIA 20"], "y": 700, "tamanho": 430, "cor": "#0B0B0F", "inicio": 3}},
+       {"elemento": "EmojiSticker", "props": {"emoji": "⏰", "x": 540, "y": 1090, "tamanho": 250, "rot": -8, "inicio": 14}}
+     ],
+     "socos": [3, 14],
+     "sons": [{"som": "corte", "em": 0}, {"som": "soco", "em": 3}, {"som": "pop", "em": 14}]},
+    {"batida": "cta", "de": 190, "ate": 212, "entrada": "nenhuma",
+     "camadas": [
+       {"elemento": "CorteDeCor", "props": {"cor": "#2E5BFF", "de": "baixo"}},
+       {"elemento": "PalavraSoco", "props": {"palavras": ["CORRE!"], "y": 720, "tamanho": 420, "cor": "#FFFFFF", "divisao": ["#FF2D75", "#0B0B0F"], "inicio": 3}}
+     ],
+     "socos": [3],
+     "sons": [{"som": "corte", "em": 0}, {"som": "soco", "em": 3}]},
+    {"batida": "marca", "de": 212, "ate": 240, "entrada": "nenhuma",
+     "camadas": [
+       {"elemento": "AssinaturaMarca", "props": {"logo": "logo-pulo.svg", "nome": "pulo", "endereco": "pulo.exemplo", "inicio": 0}}
+     ],
+     "socos": [4, 10],
+     "sons": [{"som": "corte", "em": 0}, {"som": "assinatura", "em": 4}, {"som": "zap", "em": 16}]}
+  ]
+}

package/kits/tiktok-energia/exemplos/roteiro.md

@@ -0,0 +1,22 @@
+# Roteiro de demonstração · "Pulo" (tênis fictício)
+
+Pedido: *"um reels de 8 s anunciando o drop do tênis Pulo, 50% off para as 100 primeiras pessoas, dia 20. Estilo TikTok com muita energia."*
+
+Sem narração: os cortes seguem a trilha (1 batida = 14.0625 quadros).
+
+| # | batida | tempo (quadros) | na tela | elemento | som |
+|---|---|---|---|---|---|
+| 1 | gancho | 0–30 | "PARA!" no lima + 👀 | CorteDeCor + PalavraSoco + EmojiSticker | corte, soco, pop |
+| 2 | virada | 30–60 | "TEM / DROP" no preto | CorteDeCor + PalavraSoco | corte, soco, palavra, soco |
+| 3 | prova | 60–96 | foto do tênis bate + caixa "tênis Pulo" | CorteDeCor + FotoSoco + TextoCaixa | corte, whoosh, pop |
+| 4 | prova | 96–126 | "50%" no azul | CorteDeCor + PalavraSoco | corte, subida, soco |
+| 5 | prova | 126–156 | "SÓ 100" no magenta | CorteDeCor + PalavraSoco | corte, soco |
+| 6 | data | 156–188 | "DIA 20" no lima + ⏰ | CorteDeCor + PalavraSoco + EmojiSticker | corte, soco, pop |
+| 7 | cta | 188–210 | "CORRE!" no preto | CorteDeCor + PalavraSoco | corte, soco |
+| 8 | marca | 210–240 | logo + "pulo" + "pulo.exemplo" | AssinaturaMarca | corte, assinatura, zap |
+
+Como a IA chegou nisso:
+1. Cortou o pedido em palavras de 1–2 sílabas: ordem, nome, foto, número, quantidade, data, ação.
+2. Pegou as batidas obrigatórias e deu a cada cena um bloco de cor diferente, sem repetir a cor do vizinho.
+3. Deixou só um apoio por cena e uma pausa de 15 quadros depois de cada soco.
+4. Escreveu `plano.json`; o `preview.tsx` passa o plano para `Montagem`.

package/kits/tiktok-energia/preview.tsx

@@ -0,0 +1,13 @@
+// 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-tiktok-energia`.
+import React from 'react';
+import {Montagem, Plano} from './elementos';
+import plano from './exemplos/plano.json';
+import f0 from './exemplos/fotos/foto-03.jpg';
+import l0 from './exemplos/logo-pulo.svg';
+
+const arquivos: Record<string, string> = {'fotos/foto-03.jpg': f0, 'logo-pulo.svg': l0};
+
+const Preview: React.FC = () => <Montagem plano={plano as Plano} arquivos={arquivos} />;
+
+export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 40, Componente: Preview};

package/kits/tiktok-energia/receita.json

@@ -0,0 +1,166 @@
+{
+  "kit": "tiktok-energia",
+  "fps": 30,
+  "batida_trilha_quadros": 14.0625,
+  "duracao_video_s": [
+    6,
+    45
+  ],
+  "ordem_sugerida": [
+    "gancho",
+    "virada",
+    "prova",
+    "data",
+    "cta",
+    "marca"
+  ],
+  "batidas": [
+    {
+      "nome": "gancho",
+      "obrigatoria": true,
+      "duracao": [
+        28,
+        36
+      ],
+      "elementos": [
+        "CorteDeCor",
+        "PalavraSoco",
+        "EmojiSticker"
+      ],
+      "entrada": [
+        "nenhuma"
+      ],
+      "sons": [
+        "corte",
+        "soco",
+        "pop"
+      ],
+      "nota": "uma palavra de ordem (\"PARA!\") + um emoji."
+    },
+    {
+      "nome": "virada",
+      "obrigatoria": true,
+      "duracao": [
+        28,
+        42
+      ],
+      "elementos": [
+        "CorteDeCor",
+        "PalavraSoco"
+      ],
+      "entrada": [
+        "nenhuma"
+      ],
+      "sons": [
+        "corte",
+        "soco",
+        "palavra",
+        "soco"
+      ],
+      "nota": "duas palavras em sequência: o nome do produto/evento."
+    },
+    {
+      "nome": "prova",
+      "obrigatoria": true,
+      "duracao": [
+        28,
+        40
+      ],
+      "elementos": [
+        "CorteDeCor",
+        "FotoSoco",
+        "TextoCaixa",
+        "PalavraSoco"
+      ],
+      "entrada": [
+        "nenhuma"
+      ],
+      "sons": [
+        "corte",
+        "whoosh",
+        "pop"
+      ],
+      "nota": "foto que bate + uma caixa de texto, ou número gigante."
+    },
+    {
+      "nome": "data",
+      "obrigatoria": false,
+      "duracao": [
+        28,
+        40
+      ],
+      "elementos": [
+        "CorteDeCor",
+        "PalavraSoco",
+        "EmojiSticker"
+      ],
+      "entrada": [
+        "nenhuma"
+      ],
+      "sons": [
+        "corte",
+        "subida",
+        "soco"
+      ],
+      "nota": "data ou prazo em palavra gigante + emoji."
+    },
+    {
+      "nome": "cta",
+      "obrigatoria": false,
+      "duracao": [
+        22,
+        30
+      ],
+      "elementos": [
+        "CorteDeCor",
+        "PalavraSoco",
+        "EmojiSticker"
+      ],
+      "entrada": [
+        "nenhuma"
+      ],
+      "sons": [
+        "corte",
+        "soco",
+        "pop"
+      ],
+      "nota": "verbo de ação em palavra gigante + emoji."
+    },
+    {
+      "nome": "marca",
+      "obrigatoria": true,
+      "duracao": [
+        30,
+        60
+      ],
+      "elementos": [
+        "AssinaturaMarca"
+      ],
+      "entrada": [
+        "nenhuma"
+      ],
+      "sons": [
+        "corte",
+        "assinatura",
+        "zap"
+      ],
+      "nota": "sempre a última. Bloco lima, logo, nome e endereço."
+    }
+  ],
+  "transicoes": [
+    {
+      "nome": "nenhuma",
+      "quadros": 6,
+      "como": "o bloco de cor corta em diagonal e vira o fundo (feito pelo CorteDeCor, não pela Cena)"
+    }
+  ],
+  "camera": {
+    "deriva": "sempre, push de 7% no vídeo",
+    "socos": "cada palavra que bate, cada foto e o logo"
+  },
+  "trilha": {
+    "arquivo": "assets/trilha/tech-128bpm.mp3",
+    "volume": 0.6,
+    "com_narracao": 0.3
+  }
+}

package/kits/tiktok-energia/regras/area-segura.md

@@ -0,0 +1,19 @@
+# Á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 |
+|---|---|
+| palavra que bate (centro) | 700–760 |
+| número gigante (centro) | 720 |
+| foto (centro) | 700 |
+| caixa de apoio | 1100–1180 |
+| emoji de apoio | 1090 |
+| logo na assinatura | 520 |
+| nome | 880 |
+| endereço | 1090 |
+
+- Só o bloco de cor sangra; palavra, caixa e foto ficam dentro das margens de 96 px.

package/kits/tiktok-energia/regras/cor.md

@@ -0,0 +1,20 @@
+# Cor
+
+| token | hex | uso |
+|---|---|---|
+| `preto` | #0B0B0F | bloco escuro, texto sobre cor clara |
+| `branco` | #FFFFFF | caixa branca, texto sobre bloco escuro |
+| `lima` | #D4FF1F | bloco 1, caixa, sombra da foto |
+| `magenta` | #FF2D75 | bloco 2, divisão de cor |
+| `azul` | #2E5BFF | bloco 3, divisão de cor |
+
+## Degradês e sombras
+
+- Divisão RGB da palavra: `text-shadow: -16px 0 #FF2D75, 16px 0 #2E5BFF` no impacto, fechando para `±3px` em 6 quadros.
+- Texto sobre lima/branco: `#0B0B0F`; sobre preto/magenta/azul: `#FFFFFF`; palavra sobre magenta: branca com divisão azul e preta.
+- Sombra da foto: `24px 24px 0 #D4FF1F` (sólida, sem desfoque).
+- Contorno do emoji: 4 `drop-shadow` brancos de 8 px (cima, baixo, esquerda, direita).
+
+## O que o cliente pode trocar
+
+As 3 cores de bloco (lima, magenta, azul) podem ser as da marca; preto e branco ficam.

package/kits/tiktok-energia/regras/movimento.md

@@ -0,0 +1,17 @@
+# Movimento
+
+Curva do soco: escala `1 + 2,4·(1 − e5(t))` em 4 quadros; tremida `sin(3,1·q)·exp(−q/6)·14 px`. Entradas de apoio usam `ob(t, 1,9)`.
+
+| movimento | duração | valores |
+|---|---|---|
+| bloco de cor corta | 6 quadros | polígono diagonal varre de um lado ao outro e fica |
+| palavra bate | 4 + 6 quadros | escala 3,4 → 1; tremida 14 px decaindo; divisão RGB 16 → 3 px |
+| troca de palavra | a cada 14–16 quadros | cada nova palavra bate de novo, girando ±3° |
+| caixa de adesivo | 10 quadros | escala 0,3 → 1 com overshoot 1,9; gira 3–6° |
+| foto bate | 5 quadros | escala 2,2 → 1, sombra sólida 24 px; zoom interno 1,0 → 1,25 em 30 quadros |
+| emoji | 8 quadros + contínuo | bate e depois quica ±12 px (período 14 quadros) |
+| entrada de cena | 6 quadros | o próprio bloco de cor cortando; a cena anterior encolhe 15% |
+| câmera (sempre) | contínuo | zoom 1,02 + 0,0003/quadro; soco +0,05 em ~5 quadros, tremor 14 px |
+
+- Pausa de 15–18 quadros depois de cada soco: só a tremida decai.
+- Máximo de 3 palavras por frase; a segunda palavra bate 14 quadros depois da primeira.

package/kits/tiktok-energia/regras/ritmo.md

@@ -0,0 +1,15 @@
+# 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 | 0,9–1,2 | 28–36 |
+| virada | 0,9–1,4 | 28–42 |
+| prova (cada) | 0,9–1,3 | 28–40 |
+| data / oferta | 0,9–1,3 | 28–40 |
+| cta | 0,7–1,0 | 22–30 |
+| marca | 1,0–2,0 | 30–60 |
+
+- Preview do kit: 8 s, 8 cenas.
+- Leitura: uma palavra precisa de **≥ 15 quadros** parada depois do soco; uma caixa de texto, **≥ 24 quadros**.

package/kits/tiktok-energia/regras/som.md

@@ -0,0 +1,20 @@
+# Som
+
+- Trilha: `assets/trilha/tech-128bpm.mp3` (8,6 s, 128 bpm), volume **0.6**, 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 G), não faça loop deste trecho.
+- Com narração: trilha a **0.3** e efeitos a 70% do volume da tabela.
+- Efeitos (todos sintetizados) e volume padrão:
+
+| som | volume | quando |
+|---|---|---|
+| `soco` | 1.0 | cada palavra que bate |
+| `corte` | 0.8 | cada bloco de cor que corta |
+| `whoosh` | 0.8 | foto ou caixa que entra |
+| `pop` | 0.85 | emoji ou caixa de texto |
+| `zap` | 0.8 | botão / endereço |
+| `subida` | 0.6 | antes do número ou da data |
+| `palavra` | 0.85 | segunda palavra da sequência |
+| `assinatura` | 0.9 | revelação da marca |
+
+- Um som por movimento que importa; no máximo **4 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/tiktok-energia/regras/tipografia.md

@@ -0,0 +1,15 @@
+# Tipografia
+
+Duas fontes: **Anton** (condensada, caixa-alta) para a palavra que bate e **Rubik 800** para texto de adesivo.
+
+| papel | fonte | peso | tamanho (px) | máx. caracteres |
+|---|---|---|---|---|
+| palavra que bate (hero) | Anton | 400 | 300–420 | 6 |
+| número gigante | Anton | 400 | 420–520 | 4 |
+| caixa de texto (adesivo) | Rubik | 800 | 64–80 | 22 |
+| detalhe / endereço | Rubik | 700 | 52–60 | 28 |
+
+- Tracking: 0,01 em no Anton; 0 no Rubik.
+- Line-height: 1,0 no Anton; 1,15 na caixa.
+- Caixa: caixa-alta no Anton; frase normal no Rubik.
+- Texto que cresce encolhe sozinho (`caber()` em `base.ts`) até caber em 920 px; nunca palavra cortada.

package/kits/tunel/SKILL.md

@@ -0,0 +1,51 @@
+---
+slug: tunel
+nome: Túnel 3D
+descricao: creme chapado com túnel de formas em cores chapadas (vermelho, mostarda, verde-azulado, preto) vindo na direção da câmera, texto numa janela limpa no centro
+familia: 3D e abstrato
+versao: 1
+quando:
+  - "convite de corrida, maratona, festival ou evento esportivo"
+  - "anúncio de data, contagem regressiva ou "vem aí""
+  - "reels de movimento, velocidade, mobilidade ou esporte"
+  - "vídeo gráfico, estilo Bauhaus/Op-art, sem foto"
+  - "abertura de canal ou série com sensação de entrar em algo"
+nao_serve:
+  - "vídeo sereno ou delicado (use aurora ou aquarela)"
+  - "texto longo (a janela comporta 1 a 2 linhas curtas)"
+---
+
+# Túnel 3D
+
+Um **túnel de formas chapadas** (quadrados, círculos, hexágonos ou triângulos) vem na direção da câmera: 14 anéis crescem em perspectiva exponencial, alternam **vermelho, creme, mostarda, verde-azulado e preto**, giram em torção e fazem uma curva suave. No centro fica uma **janela limpa** (formato igual ao do túnel, 800 px) onde mora o texto: nada sobre as faixas. O texto voa até a câmera: nasce no ponto de fuga a 8% do tamanho, cresce com overshoot, fica parado para ler e **atravessa a tela** na saída. Linhas de velocidade riscam a tela nos cortes. Tudo é cor chapada, sem degradê.
+
+## Como montar um vídeo com este kit
+
+1. **Leia o pedido e o roteiro.** Corte cada fala em frases curtas. Uma frase = uma cena.
+2. **Escolha as batidas** em `receita.json` (gancho → virada → prova → data → marca). Cada batida diz quanto dura e quais elementos servem.
+3. **Escreva o plano de cenas** (`plano.json`, mesmo formato de `exemplos/plano.json`): para cada cena, `de`/`ate` em quadros, a `entrada`, as `camadas` (elemento + props) e os `sons`. Os cortes seguem a voz (se houver) ou a batida da trilha: 1 batida = 14.0625 quadros.
+4. **Renderize** com `<Montagem plano={...} arquivos={...} />` ou escreva o TSX direto combinando `Fundo`, `Camera`, `Cena` e os elementos (tudo sai de `elementos/index.ts`).
+5. **Confira** os quadros (um por cena) contra `regras/`: área segura, nada cortado, um herói por cena, nenhum quadro parado.
+
+## Elementos
+
+| elemento | o que faz | batidas |
+|---|---|---|
+| `TunelDeFormas` | túnel de anéis chapados que vem na direção da câmera, com janela limpa no centro | todas |
+| `TituloTunel` | título de 1–2 linhas que voa do ponto de fuga até a janela e atravessa a tela | gancho, virada |
+| `NumeroGigante` | número ou data enorme em Syncopate que chega do fundo, com legenda | data, prova |
+| `PlacaVoadora` | placa colorida com 1–2 linhas que chega, para e atravessa | prova |
+| `LinhasDeVelocidade` | riscos que saem do centro nos cortes | virada, prova |
+| `AssinaturaMarca` | logo + nome + endereço na janela | marca |
+| `Fundo`, `Camera`, `Cena` | creme chapado (a janela e o chão do túnel) | todas |
+| `Efeito`, `Trilha` | sons e trilha do kit | todas |
+
+## Proibido
+
+- Degradê, glow, sombra ou textura em qualquer faixa do túnel: só cor chapada.
+- Texto sobre as faixas: o texto mora só na janela central (800 px).
+- Mais de 4 cores de faixa na mesma cena; as do `regras/cor.md`.
+- Túnel parado: a câmera avança 0,43 anel/s o tempo todo.
+- Mais de 1 herói + 1 apoio por cena; texto com margem menor que 96 px.
+- Fundo escuro com herói pequeno: a janela tem 800 px.
+- Texto fora da área segura (168–1330 px na vertical, 96 px nas laterais).

package/kits/tunel/assets/ASSETS.md

@@ -0,0 +1,21 @@
+# Assets do kit tunel
+
+| arquivo | o que é | origem | licença |
+|---|---|---|---|
+| `fontes/syncopate-latin.woff2` | Syncopate (700), subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Syncopate`), baixado em 26/10/2026 | SIL OFL 1.1, texto em `fontes/OFL-Syncopate.txt` |
+| `fontes/chakra-latin.woff2` | Chakra Petch (600), subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Chakra+Petch`), baixado em 26/10/2026 | SIL OFL 1.1, texto em `fontes/OFL-ChakraPetch.txt` |
+| `sons/whoosh.mp3` | entrada de cena / texto que chega do fundo | sintetizado: MotionCraft `sfx make`, tipo `whoosh_in`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
+| `sons/passa.mp3` | texto que atravessa a tela | sintetizado: MotionCraft `sfx make`, tipo `whoosh_out`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
+| `sons/impacto.mp3` | a palavra principal assentando | sintetizado: MotionCraft `sfx make`, tipo `impact`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
+| `sons/tick.mp3` | troca de forma do túnel | sintetizado: MotionCraft `sfx make`, tipo `slot_tick`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
+| `sons/varre.mp3` | linhas de velocidade | sintetizado: MotionCraft `sfx make`, tipo `swoosh`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
+| `sons/subida.mp3` | antes da data | sintetizado: MotionCraft `sfx make`, tipo `riser`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
+| `sons/clique.mp3` | detalhe / endereço | sintetizado: MotionCraft `sfx make`, tipo `button`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
+| `sons/assinatura.mp3` | revelação da marca | sintetizado: MotionCraft `sfx make`, tipo `logo_sting`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
+| `trilha/tech-128bpm.mp3` | 8,6 s a partir de 1.875 s da trilha gerada | MotionCraft `music make` (preset `tech-bright`, 128 bpm, tom C) | 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/logo-rota21.svg` | logo fictício desenhado para a demo | próprio |