primocode 11.0.0 → 11.2.0

package/kits/minimal/elementos/Som.tsx

@@ -1,40 +0,0 @@
-// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`, pacote paper); trilha de 8.6 s
-// (MotionCraft `music make`, preset dark-minimal, 90 bpm, tom C). 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 toque from '../assets/sons/toque.mp3';
-import trilha from '../assets/trilha/vazio-90bpm.mp3';
-
-export const SONS = {
-  'whoosh-entra': whooshEntra, 'whoosh-sai': whooshSai, swoosh, 'pop-palavra': popPalavra, 'pop-cartao': popCartao, clique, impacto, subida, assinatura, toque,
-} as const;
-export type NomeSom = keyof typeof SONS;
-
-// volume de cada efeito (0..1) já calibrado contra a trilha a 0.4
-const VOLUME: Record<NomeSom, number> = {
-  'whoosh-entra': 0.5, 'whoosh-sai': 0.4, swoosh: 0.55, 'pop-palavra': 0.7, 'pop-cartao': 0.7, clique: 0.6, impacto: 0.6, subida: 0.5, assinatura: 0.7, toque: 0.6,
-};
-
-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.4, 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/minimal/elementos/base.ts

@@ -1,80 +0,0 @@
-// Base do kit minimal: 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 fonte0Url from '../assets/fontes/hanken.woff2';
-import fonte1Url from '../assets/fontes/splinemono.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: 80};
-export const LARGURA_UTIL = LARGURA - SEGURA.lado * 2; // 920 px
-
-// ---------- cor ----------
-export const COR = {
-  osso: '#F7F6F2',
-  tinta: '#161616',
-  cobalto: '#2B4BFF',
-  cinza: '#B9B8B2'
-};
-
-
-// ---------- fonte ----------
-// Nome de família com o prefixo do kit, pra não colidir com outro kit no mesmo estúdio.
-export const FONTE = "\"MN Hanken\", system-ui, sans-serif";
-export const MONO = "\"MN Spline Mono\", ui-monospace, Menlo, monospace";
-const fontes = [
-  {nome: 'MN Hanken', url: fonte0Url, peso: '200 700', estilo: 'normal'},
-  {nome: 'MN Spline Mono', url: fonte1Url, peso: '400', estilo: 'normal'},
-];
-if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__minimal) {
-  (globalThis as Record<string, unknown>).__minimal = true;
-  for (const f of fontes) {
-    const h = delayRender('minimal: ' + f.nome);
-    new FontFace(f.nome, `url(${f.url}) format('woff2')`, {weight: f.peso, style: f.estilo}).load()
-      .then((ff) => {document.fonts.add(ff); continueRender(h);})
-      .catch(() => continueRender(h));
-  }
-}
-
-// ---------- 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, parecida com cubic-bezier(.2,.8,.2,1) */
-export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
-/** pouso com overshoot (passa 1.1x e volta), toda entrada usa esta */
-export const ov = (t: number) => { const x = c01(t) - 1; const k = 1.5; return 1 + (k + 1) * x * x * x + k * x * x; };
-export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
-/** uma batida da trilha do kit (90 bpm) em quadros */
-export const BATIDA = 20.0;
-
-// ---------- medida de texto ----------
-// Mede com canvas (só guarda no cache depois que a fonte carregou) pra encolher a linha que passaria
-// da largura útil. Nunca deixa palavra cortada.
-let canvas: HTMLCanvasElement | null = null;
-const cache = new Map<string, number>();
-export const larguraTexto = (texto: string, tamanho: number, peso = 300, trackingEm = -0.03, familia = 'MN Hanken'): number => {
-  const chave = `${texto}|${tamanho}|${peso}|${trackingEm}|${familia}`;
-  const c = cache.get(chave); if (c !== undefined) return c;
-  if (typeof document === 'undefined') return texto.length * tamanho * 0.56;
-  canvas = canvas || document.createElement('canvas');
-  const ctx = canvas.getContext('2d'); if (!ctx) return texto.length * tamanho * 0.56;
-  const fonte = `${peso} ${tamanho}px "${familia}"`;
-  ctx.font = fonte;
-  const w = ctx.measureText(texto).width + texto.length * trackingEm * tamanho;
-  if (document.fonts.check(fonte)) cache.set(chave, w);
-  return w;
-};
-/** o maior tamanho até `tamanho` em que o texto cabe em `largura` */
-export const caber = (texto: string, tamanho: number, largura = LARGURA_UTIL, peso = 300, trackingEm = -0.03, familia = 'MN Hanken') => {
-  const w = larguraTexto(texto, tamanho, peso, trackingEm, familia);
-  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, '');
-/** quebra "a *b* c" em partes {t, d}: d = destaque */
-export const partes = (t: string) => t.split(/(\*[^*]+\*)/).filter(Boolean).map((s) => s.startsWith('*') ? {t: s.slice(1, -1), d: true} : {t: s, d: false});
-/** valores de uma lista de chaves [[quadro, v1, v2...], ...] no quadro f, com pouso suave entre as chaves */
-export const chavesN = (f: number, ks: number[][]): number[] => { if (f <= ks[0][0]) return ks[0].slice(1); for (let i = 1; i < ks.length; i++) if (f <= ks[i][0]) { const t = e5(seg(f, ks[i - 1][0], ks[i][0])); return ks[i].slice(1).map((v, j) => lerp(ks[i - 1][j + 1] ?? 0, v, t)); } return ks[ks.length - 1].slice(1); };
-export const MARGEM = 120;

package/kits/minimal/elementos/index.ts

@@ -1,15 +0,0 @@
-// Tudo que o kit minimal 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 {FormaMorph} from './FormaMorph';
-export {FraseUnica} from './FraseUnica';
-export {NumeroSolo} from './NumeroSolo';
-export {PontoMovel} from './PontoMovel';
-export {LinhaFina} from './LinhaFina';
-export {RodapeMinimal} from './RodapeMinimal';
-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/minimal/exemplos/plano.json

@@ -1,48 +0,0 @@
-{
-  "kit": "minimal",
-  "roteiro": "exemplos/roteiro.md",
-  "duracao": 240,
-  "trilha": {"volume": 0.4},
-  "cenas": [
-    {
-      "batida": "forma", "de": 0, "ate": 50, "entrada": "nenhuma",
-      "camadas": [
-        {"elemento": "FormaMorph", "props": {"formas": [{"de": 0, "tipo": "circulo"}], "y": 880, "tamanho": 580, "inicio": 2}}
-      ],
-      "socos": [18],
-      "sons": [{"som": "toque", "em": 3}, {"som": "pop-cartao", "em": 17}]
-    },
-    {
-      "batida": "frase", "de": 50, "ate": 104, "entrada": "circulo",
-      "camadas": [
-        {"elemento": "FraseUnica", "props": {"linhas": ["Menos,", "mas *melhor.*"], "inicio": 4, "intervalo": 9, "y": 820, "tamanho": 170}}
-      ],
-      "sons": [{"som": "whoosh-entra", "em": 0}, {"som": "pop-palavra", "em": 14}]
-    },
-    {
-      "batida": "ponto", "de": 104, "ate": 156, "entrada": "baixo",
-      "camadas": [
-        {"elemento": "LinhaFina", "props": {"y": 880, "duracao": 18, "inicio": 0}},
-        {"elemento": "PontoMovel", "props": {"posicoes": [[0, 230], [14, 850], [30, 230], [44, 540]], "y": 880, "diametro": 240, "inicio": 4}}
-      ],
-      "socos": [14, 30],
-      "sons": [{"som": "swoosh", "em": -1}, {"som": "pop-cartao", "em": 14}, {"som": "toque", "em": 30}]
-    },
-    {
-      "batida": "numero", "de": 156, "ate": 202, "entrada": "cortina",
-      "camadas": [
-        {"elemento": "NumeroSolo", "props": {"numero": "01", "rotulo": "uma ideia só", "inicio": 2, "y": 820, "tamanho": 640}}
-      ],
-      "sons": [{"som": "swoosh", "em": -1}, {"som": "pop-palavra", "em": 8}, {"som": "clique", "em": 22}]
-    },
-    {
-      "batida": "marca", "de": 202, "ate": 240, "entrada": "circulo",
-      "camadas": [
-        {"elemento": "FormaMorph", "props": {"formas": [{"de": 0, "tipo": "quadrado", "rot": 0}, {"de": 10, "tipo": "anel", "rot": 90}], "y": 800, "tamanho": 560, "inicio": 0}},
-        {"elemento": "RodapeMinimal", "props": {"nome": "Estúdio Lume", "url": "lume.exemplo", "inicio": 20, "y": 1250}}
-      ],
-      "socos": [10],
-      "sons": [{"som": "whoosh-entra", "em": -1}, {"som": "toque", "em": 10}, {"som": "assinatura", "em": 16}]
-    }
-  ]
-}

package/kits/minimal/exemplos/roteiro.md

@@ -1,19 +0,0 @@
-# Roteiro de demonstração · "Estúdio Lume" (estúdio de design fictício)
-
-Pedido: *"um filme minimalista de 8 s do Estúdio Lume: 'Menos, mas melhor.', uma ideia só, e o nome com o endereço."*
-
-Sem narração: os cortes seguem a trilha (1 batida = 20 quadros).
-
-| # | batida | quadros | na tela | elemento | som |
-|---|---|---|---|---|---|
-| 1 | forma | 0–50 | círculo cobalto de 580 px nasce de um ponto | FormaMorph | toque, pop |
-| 2 | frase | 50–104 | "Menos, / mas *melhor.*" à esquerda | FraseUnica | whoosh, pop |
-| 3 | ponto | 104–156 | bola cobalto indo e vindo numa trilha fina | PontoMovel + LinhaFina | swoosh, pop, toque |
-| 4 | numero | 156–202 | "01" finíssimo + "uma ideia só" | NumeroSolo | swoosh, pop, clique |
-| 5 | marca | 202–240 | quadrado vira anel + "ESTÚDIO LUME · lume.exemplo" | FormaMorph + RodapeMinimal | whoosh, toque, assinatura |
-
-Como a IA chegou nisso:
-1. Cortou o pedido a uma ideia por cena e tirou tudo o que não era herói; cada cena tem 50%+ de vazio.
-2. Usou só uma cor (cobalto) e deixou a forma como fio entre as cenas (círculo → bola → anel).
-3. Trocou por círculo que abre (a forma do estilo) e cortou nas batidas da trilha (0, 50, 104, 156, 202).
-4. O `preview.tsx` passa o plano para `Montagem`, que só usa os elementos do kit.

package/kits/minimal/preview.tsx

@@ -1,9 +0,0 @@
-// 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-minimal`.
-import React from 'react';
-import {Montagem, Plano} from './elementos';
-import plano from './exemplos/plano.json';
-
-const Preview: React.FC = () => <Montagem plano={plano as Plano} />;
-
-export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 40, Componente: Preview};

package/kits/minimal/receita.json

@@ -1,21 +0,0 @@
-{
-  "kit": "minimal", "fps": 30, "batida_trilha_quadros": 20,
-  "duracao_video_s": [6, 24],
-  "ordem_sugerida": ["forma", "frase", "ponto", "numero", "marca"],
-  "batidas": [
-    {"nome": "forma", "obrigatoria": true, "duracao": [42, 54], "elementos": ["FormaMorph"], "entrada": ["nenhuma"], "sons": ["toque", "pop-cartao"], "nota": "o círculo cobalto nasce de um ponto e assenta; é a abertura. Nada mais na tela."},
-    {"nome": "frase", "obrigatoria": true, "duracao": [48, 54], "elementos": ["FraseUnica"], "entrada": ["circulo"], "sons": ["whoosh-entra", "pop-palavra"], "nota": "uma frase em 2 linhas à esquerda, uma palavra em cobalto."},
-    {"nome": "ponto", "obrigatoria": false, "duracao": [48, 54], "elementos": ["PontoMovel", "LinhaFina"], "entrada": ["baixo"], "sons": ["swoosh", "pop-cartao", "toque"], "nota": "a bola vai e volta na trilha, com squash e stretch; a linha é o único apoio."},
-    {"nome": "numero", "obrigatoria": false, "duracao": [42, 48], "elementos": ["NumeroSolo"], "entrada": ["cortina"], "sons": ["swoosh", "pop-palavra", "clique"], "nota": "um número de 1–3 dígitos finíssimo + rótulo curto."},
-    {"nome": "marca", "obrigatoria": true, "duracao": [36, 42], "elementos": ["FormaMorph", "RodapeMinimal"], "entrada": ["circulo"], "sons": ["whoosh-entra", "toque", "assinatura"], "nota": "sempre a última: a forma vira anel e o rodapé com nome e endereço entra por último."}
-  ],
-  "transicoes": [
-    {"nome": "circulo", "quadros": 14, "como": "círculo que cresce de 0 a 150% a partir de (50%, 55%); a anterior encolhe 5% e some 60%"},
-    {"nome": "cortina", "quadros": 14, "como": "faixa diagonal que varre da esquerda"},
-    {"nome": "baixo", "quadros": 14, "como": "revela de baixo pra cima"},
-    {"nome": "flip", "quadros": 14, "como": "gira em X de −80° a 0° pelo topo"},
-    {"nome": "nenhuma", "quadros": 0, "como": "só na primeira cena"}
-  ],
-  "camera": {"deriva": "sempre, quase imperceptível", "socos": "só quando a forma muda"},
-  "trilha": {"arquivo": "assets/trilha/vazio-90bpm.mp3", "volume": 0.4, "com_narracao": 0.18}
-}

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

@@ -1,15 +0,0 @@
-# Área segura (9:16, 1080×1920)
-
-- Todo texto lido: **y 168–1330**, **x 120–960** (margem de 120 px dos dois lados). As cruzes de registro (96 px) são o único traço fora.
-- Respiro (regra do dono): **50%+ do quadro vazio**; 1 herói + no máximo 1 apoio; nada encosta nas bordas.
-
-| elemento | y de referência (centro) |
-|---|---|
-| forma (580 px) | 800–880 (centrada em x 540) |
-| frase (2 linhas, 170 px) | 820 (alinhada em x 120) |
-| número (640 px) | 820 |
-| rótulo do número | ≈ 1230 (topo) |
-| trilha + ponto (240 px) | 880 (ponto entre x 230 e 850) |
-| rodapé | 1250 (fio em x 120–960) |
-
-- A forma pode ser pílula de 840 px (largura máxima); nunca passa de x 120–960.

package/kits/minimal/regras/cor.md

@@ -1,12 +0,0 @@
-# Cor
-
-| token | hex | uso |
-|---|---|---|
-| `osso` | `#F7F6F2` | chão |
-| `tinta` | `#161616` | texto, fios (40%), cruzes de registro (35%) |
-| `cobalto` | `#2B4BFF` | a única cor viva: a forma, o destaque, o ponto, o quadradinho |
-| `cinza` | `#B9B8B2` | reserva (sombra de apoio, nunca em texto) |
-
-- Chão chapado, sem degradê, sem textura, sem sombra, sem brilho. Cruzes de registro: traço de 3 px, braço de 16 px, a 96 px das bordas.
-- **Uma cor viva por vídeo.** Contraste cobalto sobre osso ≥ 6:1.
-- O cliente pode trocar `cobalto` por qualquer cor de marca saturada (vermelho `#E5251B`, verde `#00A86B`, preto `#161616`); só uma. Proibido: duas cores vivas, degradê.

package/kits/minimal/regras/movimento.md

@@ -1,20 +0,0 @@
-# Movimento
-
-Curvas: `e5(t) = 1 − (1 − t)^5` e `ov(t)` = pouso com overshoot curto (k = 1,5: passa ≈ 1,05× e volta). **Toda entrada usa `ov`.**
-
-| movimento | duração | valores |
-|---|---|---|
-| forma nasce | 20 quadros | escala 0 → 1 com overshoot, a partir do centro |
-| forma muda | 18 quadros | largura, altura, raio, contorno e giro interpolam juntos; giro até 90° |
-| forma boia | contínuo | y ±8 px (`sin(f/22)`), giro ±2° (`sin(f/40)`) |
-| linha da frase | 16 quadros, 8–9 entre linhas | sobe 115% da máscara |
-| dígito do número | 18 quadros, 5 entre dígitos | sobe 110% da máscara |
-| rótulo do número | 14 quadros | entra −60 px da esquerda |
-| ponto | percorre 620 px em 14–16 quadros | estica até 1,5× na velocidade (0,012 por px/quadro); achata 0,2 ao chegar (8 quadros) |
-| fio | 18–22 quadros | se desenha da esquerda; ponto de 22 px estoura no fim |
-| rodapé | 16 quadros | sobe 30 px, fio de 840 px se desenha |
-| troca de cena | 14 quadros | `circulo` (de 0 a 150% a partir de 50%, 55%), `cortina`, `baixo`; a anterior encolhe 5% |
-| câmera (sempre) | contínuo | zoom 1,012 ± 0,012 (+0,0001/quadro), deriva ±5/±5 px, giro ±0,11° |
-| soco de câmera | decai em ~7 quadros | +0,015 de zoom, tremor 3 px; só quando a forma muda |
-
-- Pausa: depois que a forma muda ou o número termina, segure 15–24 quadros; só a deriva da câmera e o boiar andam.

package/kits/minimal/regras/ritmo.md

@@ -1,15 +0,0 @@
-# Ritmo
-
-- 90 bpm: **1 batida = 20 quadros** (0,67 s). Cortes caem a cada 2–3 batidas (40–60 quadros).
-- Vídeo de 8 s = 240 quadros = 5 cenas de 38–54 quadros.
-
-| batida | duração s | quadros |
-|---|---|---|
-| forma | 1,4–1,8 | 42–54 |
-| frase | 1,6–1,8 | 48–54 |
-| ponto | 1,6–1,8 | 48–54 |
-| numero | 1,4–1,6 | 42–48 |
-| marca | 1,2–1,4 | 36–42 |
-
-- Leitura mínima: frase ≥ 30 quadros inteira na tela; número ≥ 24 quadros.
-- Cada cena: entrada → 1 evento → **pausa de 15–24 quadros** → saída. Se a cena precisa de 2 eventos, divida em 2 cenas.

package/kits/minimal/regras/som.md

@@ -1,21 +0,0 @@
-# Som
-
-- Trilha: `assets/trilha/vazio-90bpm.mp3` (8,6 s, 90 bpm, dark-minimal, tom C), volume **0,4**, fade nos últimos **20 quadros**. Vídeo maior: gere outra (`music make --preset dark-minimal --bpm 90 --key C --force`), sem loop. A trilha também pode ser omitida: com `trilha: false` o vídeo fica só nos toques.
-- Com narração: trilha a **0,18** e efeitos a 70%.
-- Pacote de efeitos `paper` (secos e curtos); volumes médios-baixos.
-
-| som | volume | quando |
-|---|---|---|
-| `toque` | 0,6 | a forma nasce ou muda |
-| `pop-cartao` | 0,7 | forma que pousa |
-| `pop-palavra` | 0,7 | primeira linha da frase, número |
-| `whoosh-entra` | 0,5 | cena que entra por círculo/cortina |
-| `swoosh` | 0,55 | bola que corre, troca de baixo |
-| `clique` | 0,6 | rótulo que fecha |
-| `assinatura` | 0,7 | rodapé final |
-| `impacto` | 0,6 | opcional, 1 por vídeo |
-| `subida` | 0,5 | opcional |
-| `whoosh-sai` | 0,4 | opcional |
-
-- No máximo **2 sons por segundo**; um som por movimento que importa; nunca o mesmo arquivo duas vezes seguidas. Som entra 1 a 2 quadros antes do visual.
-- Alvo −14 LUFS, pico −1,5 dBTP.

package/kits/minimal/regras/tipografia.md

@@ -1,15 +0,0 @@
-# Tipografia
-
-- **Hanken Grotesk 200–700** (frase, número) · **Spline Sans Mono 400** (rótulos, rodapé). Registradas como `"MN Hanken"` e `"MN Spline Mono"`.
-- Frase em peso 300, destaque em 500 cobalto. Tudo alinhado à esquerda na margem de **120 px**; tracking −0,03 a −0,05 em; sem negrito pesado.
-
-| papel | fonte | tamanho px | máx. caracteres |
-|---|---|---|---|
-| frase | Hanken 300 | 150–170 (encolhe até 840) | 14 por linha |
-| palavra de destaque | Hanken 500, cobalto | igual à frase | 12 |
-| número solo | Hanken 200 | 640 (encolhe até 840) | 3 |
-| rótulo do número | Spline Mono 400, 0,04 em | 40 | 22 |
-| nome no rodapé | Spline Mono 400, caixa alta, 0,06 em | 36 | 16 |
-| endereço no rodapé | Spline Mono 400 | 36 | 20 |
-
-- Linha: `line-height` 1,18 × o tamanho; máscara de altura igual para a linha subir de dentro (115%).

package/kits/neon-cidade/assets/ASSETS.md

@@ -1,21 +0,0 @@
-# Assets do kit neon-cidade
-
-| arquivo | o que é | origem | licença |
-|---|---|---|---|
-| `fontes/tiltneon-latin.woff2` | Tilt Neon (400), subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Tilt+Neon`), baixado em 26/10/2026 | SIL OFL 1.1, texto em `fontes/OFL-TiltNeon.txt` |
-| `fontes/barlow-latin.woff2` | Barlow Condensed (600), subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Barlow+Condensed`), baixado em 26/10/2026 | SIL OFL 1.1, texto em `fontes/OFL-BarlowCondensed.txt` |
-| `sons/tick.mp3` | cada letra que acende | sintetizado: MotionCraft `sfx make`, tipo `letter_tick`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
-| `sons/zumbido.mp3` | letreiro inteiro acendendo | sintetizado: MotionCraft `sfx make`, tipo `riser`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
-| `sons/liga.mp3` | forma de tubo fechando o desenho | sintetizado: MotionCraft `sfx make`, tipo `icon_pop`, pacote `glass` | sem samples; síntese própria (CC0) |
-| `sons/whoosh.mp3` | entrada de cena | sintetizado: MotionCraft `sfx make`, tipo `whoosh_in`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
-| `sons/balanca.mp3` | caixa luminosa que chega balançando | sintetizado: MotionCraft `sfx make`, tipo `swoosh`, pacote `paper` | sem samples; síntese própria (CC0) |
-| `sons/impacto.mp3` | a palavra principal e a data | sintetizado: MotionCraft `sfx make`, tipo `impact`, 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 `glass` | sem samples; síntese própria (CC0) |
-| `trilha/noite-100bpm.mp3` | 8,6 s a partir de 2.4 s da trilha gerada | MotionCraft `music make` (preset `dark-minimal`, 100 bpm, tom A) | 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-fenix.svg` | logo fictício desenhado para a demo | próprio |

package/kits/neon-cidade/elementos/AssinaturaMarca.tsx

@@ -1,24 +0,0 @@
-// AssinaturaMarca: a última cena. O logo acende (brilho de tubo), o nome acende letra por letra e o endereço
-// aparece em Barlow Condensed, sem brilho.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FAM_B, FONTE_B, acende, caber, ob, seg} from './base';
-import {LetreiroNeon} from './LetreiroNeon';
-
-export type AssinaturaMarcaProps = {
-  logo: string;
-  nome: string;
-  endereco?: string;
-  cor?: string;
-  inicio?: number;
-};
-
-export const AssinaturaMarca: React.FC<AssinaturaMarcaProps> = ({logo, nome, endereco, cor = COR.rosa, inicio = 0}) => {
-  const f = useCurrentFrame() - inicio;
-  const lg = ob(seg(f, 0, 14), 1.5), k = acende(f, 2, 9), te = caber(endereco ?? '', 64, FAM_B, 780, 600, 0.08), en = seg(f, 30, 40);
-  return <>
-    <img src={logo} style={{position: 'absolute', left: 540 - 200, top: 540 - 200, width: 400, height: 400, transform: `scale(${lg})`, opacity: k, filter: `drop-shadow(0 0 10px ${cor}) drop-shadow(0 0 34px ${cor}b0)`}} />
-    <LetreiroNeon linhas={[nome.toUpperCase()]} cor={cor} y={940} tamanho={200} inicio={inicio + 14} passo={3} reflexo />
-    {endereco && <div style={{position: 'absolute', left: 0, width: 1080, top: 1150, textAlign: 'center', fontFamily: FONTE_B, fontWeight: 600, fontSize: te, letterSpacing: '0.08em', color: COR.gelo, opacity: en, transform: `translateY(${(1 - en) * 24}px)`}}>{endereco}</div>}
-  </>;
-};

package/kits/neon-cidade/elementos/CaixaLuminosa.tsx

@@ -1,40 +0,0 @@
-// CaixaLuminosa: placa pendurada por duas correntes, que balança como pêndulo (±5°, amortecido de 18° na chegada).
-// A face é uma caixa escura com moldura de metal e o texto em neon aceso por dentro. Chega de cima com overshoot.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FAM_A, FONTE_A, FONTE_B, FAM_B, acende, brilho, caber, ob, seg} from './base';
-
-export type CaixaLuminosaProps = {
-  linhas: string[];
-  /** linha pequena em Barlow, sem brilho */
-  detalhe?: string;
-  cor?: string;
-  /** y do topo (onde as correntes prendem) */
-  topo?: number;
-  largura?: number;
-  tamanho?: number;
-  inicio?: number;
-};
-
-export const CaixaLuminosa: React.FC<CaixaLuminosaProps> = ({linhas, detalhe, cor = COR.rosa, topo = 230, largura = 800, tamanho = 170, inicio = 0}) => {
-  const f = useCurrentFrame() - inicio;
-  if (f < -1) return null;
-  const tam = Math.min(...linhas.map((l) => caber(l, tamanho, FAM_A, largura - 140, 400, 0.04)));
-  const altura = tam * 1.2 * linhas.length + 150 + (detalhe ? 90 : 0), queda = ob(seg(f, 0, 16), 1.5);
-  const ang = (18 * Math.exp(-Math.max(0, f) / 26) + 5) * Math.sin(Math.max(0, f) / 11) * (1 - 0.1 * 0);
-  const cord = 150;
-  let n = 0;
-  return <div style={{position: 'absolute', left: 540, top: topo, width: 0, height: 0, transform: `translateY(${(1 - queda) * -700}px) rotate(${ang}deg)`, transformOrigin: '0 0'}}>
-    {[-largura * 0.32, largura * 0.32].map((dx, i) => <div key={i} style={{position: 'absolute', left: dx, top: 0, width: 4, height: cord, background: 'repeating-linear-gradient(180deg, #8d8aa8 0 10px, #4b4864 10px 16px)'}} />)}
-    <div style={{position: 'absolute', left: -largura / 2, top: cord, width: largura, height: altura, background: '#0d0b17', border: '10px solid #3b3852', borderRadius: 26, boxSizing: 'border-box', boxShadow: `0 0 0 3px ${cor}66 inset`, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
-      {linhas.map((l, li) => <div key={li} style={{fontFamily: FONTE_A, fontSize: tam, lineHeight: 1.2, letterSpacing: '0.04em', whiteSpace: 'pre', display: 'flex'}}>
-        {l.split('').map((ch, ci) => {
-          const k = acende(f, 8 + n++ * 3, n), aceso = k > 0.5;
-          return <span key={ci} style={{color: aceso ? COR.branco : `${cor}2e`, textShadow: aceso ? brilho(cor, k * 0.7) : 'none', opacity: aceso ? k : 1}}>{ch}</span>;
-        })}
-      </div>)}
-      {detalhe && <div style={{fontFamily: FONTE_B, fontWeight: 600, fontSize: caber(detalhe, 62, FAM_B, largura - 160, 600, 0.08), letterSpacing: '0.08em', color: COR.gelo, marginTop: 16, opacity: seg(f, 24, 34)}}>{detalhe}</div>}
-    </div>
-    {[-largura / 2 + 36, largura / 2 - 36].map((dx, i) => <div key={i} style={{position: 'absolute', left: dx - 9, top: cord - 10, width: 18, height: 18, borderRadius: 9, background: '#8d8aa8'}} />)}
-  </div>;
-};

package/kits/neon-cidade/elementos/Cena.tsx

@@ -1,48 +0,0 @@
-// Cena: janela de tempo de um plano. Entra com movimento (nunca corte seco) e a saída cruza 10 quadros
-// com a entrada da próxima. Dentro dela, useCurrentFrame() começa em 0.
-import React, {createContext, useContext} from 'react';
-import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
-import {c01, e5, ob, seg} from './base';
-
-export type Entrada = 'subir' | 'zoom' | 'direita' | 'esquerda' | 'giro' | 'queda' | 'circulo' | 'nenhuma';
-export type Saida = 'sobe' | 'esquerda' | 'zoom' | 'gira' | 'encolhe';
-export const SOBREPOE = 10; // quadros em que a saída desta cena cruza a entrada da próxima
-export const QUADROS_ENTRADA = 12;
-
-const CenaCtx = createContext({duracao: 60});
-/** duração da cena atual em quadros (sem a sobreposição) */
-export const useDuracaoCena = () => useContext(CenaCtx).duracao;
-
-export type CenaProps = {de: number; ate: number; entrada?: Entrada; saida?: Saida; ultima?: boolean; children: React.ReactNode};
-
-const Janela: React.FC<{duracao: number; entrada: Entrada; saida: Saida; ultima: boolean; children: React.ReactNode}> = ({duracao, entrada, saida, ultima, children}) => {
-  const f = useCurrentFrame();
-  const p = seg(f, 0, QUADROS_ENTRADA);
-  const en = entrada === 'nenhuma' ? 0 : 1 - ob(p, 1.2);
-  const xo = ultima ? 0 : e5(seg(f, duracao, duracao + SOBREPOE));
-  let tf = '';
-  let clip: string | undefined;
-  if (entrada === 'subir') tf += `translateY(${en * 300}px) `;
-  if (entrada === 'queda') tf += `translateY(${-en * 520}px) `;
-  if (entrada === 'zoom') tf += `scale(${1 + en * 0.9}) `;
-  if (entrada === 'direita') tf += `translateX(${en * 800}px) `;
-  if (entrada === 'esquerda') tf += `translateX(${-en * 800}px) `;
-  if (entrada === 'giro') tf += `rotate(${-en * 16}deg) scale(${1 + en * 0.6}) `;
-  if (entrada === 'circulo') clip = `circle(${e5(p) * 1700 + 4}px at 50% 52%)`;
-  if (saida === 'sobe') tf += `translateY(${-xo * 240}px) scale(${1 + xo * 0.08})`;
-  if (saida === 'esquerda') tf += `translateX(${-xo * 820}px) rotate(${-xo * 4}deg)`;
-  if (saida === 'zoom') tf += `scale(${1 + xo * 0.9})`;
-  if (saida === 'gira') tf += `rotate(${xo * 12}deg) scale(${1 - xo * 0.25}) translateY(${xo * 300}px)`;
-  if (saida === 'encolhe') tf += `scale(${1 - xo * 0.35})`;
-  const blur = c01(en) * 8 + xo * 8;
-  return <AbsoluteFill style={{transform: tf, clipPath: clip, opacity: (1 - c01(en) * 0.85) * (1 - xo), filter: blur > 0.3 ? `blur(${blur}px)` : undefined}}>{children}</AbsoluteFill>;
-};
-
-export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'subir', saida = 'zoom', ultima = false, children}) => {
-  const duracao = ate - de;
-  return <Sequence from={de} durationInFrames={duracao + (ultima ? 0 : SOBREPOE)} layout="none">
-    <CenaCtx.Provider value={{duracao}}>
-      <Janela duracao={duracao} entrada={entrada} saida={saida} ultima={ultima}>{children}</Janela>
-    </CenaCtx.Provider>
-  </Sequence>;
-};

package/kits/neon-cidade/elementos/Chuva.tsx

@@ -1,23 +0,0 @@
-// Chuva: 70 riscos finos a 14° da vertical, caindo a 38 px/quadro, com comprimento de 60 a 150 px e opacidade variada.
-// É ambiente: cai por trás do herói e nunca para.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {ALTURA, LARGURA, rnd} from './base';
-
-export type ChuvaProps = {
-  quantidade?: number;
-  cor?: string;
-  /** 0..1 */
-  forca?: number;
-};
-
-export const Chuva: React.FC<ChuvaProps> = ({quantidade = 70, cor = '#C9C2E0', forca = 0.5}) => {
-  const f = useCurrentFrame();
-  const tg = Math.tan((14 * Math.PI) / 180);
-  return <svg width={LARGURA} height={ALTURA} viewBox={`0 0 ${LARGURA} ${ALTURA}`} style={{position: 'absolute', inset: 0}}>
-    {Array.from({length: quantidade}, (_, i) => {
-      const L = 60 + rnd(i + 4) * 90, v = 30 + rnd(i + 8) * 16, ciclo = ALTURA + 400, y = ((f * v + rnd(i) * ciclo) % ciclo) - 200, x = rnd(i + 20) * (LARGURA + 400) - 200 - y * tg;
-      return <line key={i} x1={x} y1={y} x2={x - L * tg} y2={y + L} stroke={cor} strokeWidth={1.5 + rnd(i + 12) * 2} opacity={(0.12 + rnd(i + 6) * 0.3) * forca * 2} strokeLinecap="round" />;
-    })}
-  </svg>;
-};

package/kits/neon-cidade/elementos/FormaNeon.tsx

@@ -1,42 +0,0 @@
-// FormaNeon: seta, moldura, estrela, raio, coração ou círculo em tubo. O contorno se desenha de ponta a ponta
-// (pathLength, 20 quadros) e depois acende com tremida. Três camadas: halo largo borrado, tubo médio e miolo branco.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, acende, e5, seg} from './base';
-
-export type TipoNeon = 'seta' | 'moldura' | 'estrela' | 'raio' | 'coracao' | 'circulo';
-const CAMINHOS: Record<TipoNeon, string> = {
-  seta: 'M10 50 H80 M56 20 L88 50 L56 80',
-  moldura: 'M24 8 H76 Q92 8 92 24 V76 Q92 92 76 92 H24 Q8 92 8 76 V24 Q8 8 24 8 Z',
-  estrela: 'M50 8 L61 38 L93 40 L68 60 L77 92 L50 74 L23 92 L32 60 L7 40 L39 38 Z',
-  raio: 'M58 6 L22 56 H46 L38 94 L78 40 H54 Z',
-  coracao: 'M50 88 C12 60 6 38 18 24 C28 12 44 16 50 30 C56 16 72 12 82 24 C94 38 88 60 50 88 Z',
-  circulo: 'M50 8 A42 42 0 1 1 49.9 8 Z',
-};
-
-export type FormaNeonProps = {
-  tipo: TipoNeon;
-  x?: number;
-  y?: number;
-  /** largura/altura em px (a forma é quadrada; a seta usa 2:1 dentro dela) */
-  tamanho?: number;
-  rot?: number;
-  cor?: string;
-  inicio?: number;
-  /** espessura do tubo em px */
-  tubo?: number;
-};
-
-export const FormaNeon: React.FC<FormaNeonProps> = ({tipo, x = 540, y = 1140, tamanho = 300, rot = 0, cor = COR.ciano, inicio = 0, tubo = 14}) => {
-  const f = useCurrentFrame();
-  if (f < inicio) return null;
-  const p = e5(seg(f, inicio, inicio + 20)), k = acende(f, inicio + 20, 3), esc = 100 / tamanho;
-  const lum = p < 1 ? 0.5 : k;
-  const traço = {fill: 'none', strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const, pathLength: 1, strokeDasharray: '1 1.1', strokeDashoffset: 1 - p};
-  return <svg width={tamanho} height={tamanho} viewBox="0 0 100 100" style={{position: 'absolute', left: x - tamanho / 2, top: y - tamanho / 2, overflow: 'visible', transform: `rotate(${rot}deg)`}}>
-    <defs><filter id="nc-halo" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="3.2" /></filter></defs>
-    <path d={CAMINHOS[tipo]} {...traço} stroke={cor} strokeWidth={tubo * 2.6 * esc} opacity={0.55 * lum} filter="url(#nc-halo)" />
-    <path d={CAMINHOS[tipo]} {...traço} stroke={cor} strokeWidth={tubo * 1.3 * esc} opacity={lum} />
-    <path d={CAMINHOS[tipo]} {...traço} stroke={COR.branco} strokeWidth={tubo * 0.5 * esc} opacity={Math.min(1, lum * 1.1)} />
-  </svg>;
-};

package/kits/neon-cidade/elementos/Fundo.tsx

@@ -1,18 +0,0 @@
-// Fundo: noite quase preta com céu que clareia no horizonte, neblina rosa embaixo e estrelas fracas que piscam.
-// Fica FORA da Camera.
-import React from 'react';
-import {AbsoluteFill, useCurrentFrame} from 'remotion';
-import {COR, rnd} from './base';
-
-export type FundoProps = {neblina?: string; velocidade?: number};
-
-export const Fundo: React.FC<FundoProps> = ({neblina = COR.rosa, velocidade = 1}) => {
-  const t = useCurrentFrame() * velocidade;
-  return <AbsoluteFill style={{background: `linear-gradient(180deg, ${COR.noite} 0%, #0B0817 55%, ${COR.noiteClara} 100%)`}}>
-    <svg width={1080} height={1920} viewBox="0 0 1080 1920" style={{position: 'absolute', inset: 0}}>
-      {Array.from({length: 46}, (_, i) => <circle key={i} cx={rnd(i) * 1080} cy={rnd(i + 50) * 900} r={1.2 + rnd(i + 9) * 1.6} fill="#fff" opacity={0.15 + 0.35 * Math.abs(Math.sin(t / (20 + rnd(i) * 30) + i))} />)}
-    </svg>
-    <AbsoluteFill style={{background: `radial-gradient(70% 26% at ${50 + Math.sin(t / 90) * 8}% 100%, ${neblina}29, transparent 70%)`}} />
-    <AbsoluteFill style={{background: 'radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,0.5))'}} />
-  </AbsoluteFill>;
-};

package/kits/neon-cidade/elementos/Horizonte.tsx

@@ -1,34 +0,0 @@
-// Horizonte: silhueta de prédios em 3 camadas (longe, meio, perto) com parallax (0,15 / 0,35 / 0,7 px por quadro)
-// e janelas âmbar ou ciano que piscam. Fica embaixo da área de leitura (começa em y 1320).
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, rnd} from './base';
-
-export type HorizonteProps = {
-  /** y do chão (base dos prédios) */
-  chao?: number;
-  velocidade?: number;
-};
-
-const CAMADAS = [{cor: '#120F22', alt: 300, larg: [90, 160], vel: 0.15, seed: 1, janelas: 0.0}, {cor: '#0C0A18', alt: 380, larg: [110, 190], vel: 0.35, seed: 2, janelas: 0.18}, {cor: COR.noite, alt: 460, larg: [130, 220], vel: 0.7, seed: 3, janelas: 0.3}];
-
-export const Horizonte: React.FC<HorizonteProps> = ({chao = 1920, velocidade = 1}) => {
-  const f = useCurrentFrame() * velocidade;
-  return <svg width={1080} height={1920} viewBox="0 0 1080 1920" style={{position: 'absolute', inset: 0}}>
-    {CAMADAS.map((c, li) => {
-      const pr: JSX.Element[] = [];
-      let x = -((f * c.vel) % 1500) - 200;
-      for (let i = 0; x < 1400; i++) {
-        const w = c.larg[0] + rnd(i + c.seed * 17) * (c.larg[1] - c.larg[0]), h = c.alt * (0.45 + 0.55 * rnd(i + c.seed * 31)), idx = i % 12;
-        void idx;
-        pr.push(<rect key={`b${i}`} x={x} y={chao - h} width={w} height={h + 4} fill={c.cor} />);
-        if (c.janelas > 0) for (let jy = 0; jy < h - 40; jy += 46) for (let jx = 16; jx < w - 24; jx += 34) {
-          const r = rnd(i * 97 + jy * 3 + jx + c.seed);
-          if (r < c.janelas) pr.push(<rect key={`j${i}-${jy}-${jx}`} x={x + jx} y={chao - h + 24 + jy} width={14} height={20} fill={r < c.janelas * 0.4 ? COR.ciano : COR.ambar} opacity={0.35 + 0.35 * Math.abs(Math.sin(f / (25 + r * 60) + r * 9))} />);
-        }
-        x += w + 8 + rnd(i + 5) * 14;
-      }
-      return <g key={li}>{pr}</g>;
-    })}
-  </svg>;
-};