primocode 10.19.0 → 11.1.0

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

@@ -1,18 +0,0 @@
-# Á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 |
-|---|---|
-| herói 3D (centro) | 700 |
-| cubo giratório (centro) | 700 |
-| base da pilha | 1000 |
-| placa de apoio | 1140–1200 |
-| logo na assinatura (centro) | 620 |
-| nome | 1000 |
-| endereço | 1160 |
-
-- Só o chão e a grade sangram; as peças ficam dentro das margens de 96 px.

package/kits/cubos/regras/cor.md

@@ -1,23 +0,0 @@
-# Cor
-
-| token | hex | uso |
-|---|---|---|
-| `chao` | #E6E9EE | chão (cinza-azulado claro) |
-| `linha` | #D2D7E0 | grade isométrica |
-| `tinta` | #1B1D22 | texto e cubo preto |
-| `tomate` | #FF5B3A | peça 1 |
-| `sol` | #FFC21A | peça 2 |
-| `ceu` | #3D8BFF | peça 3 |
-| `osso` | #F7F7F5 | peça clara e texto sobre cor escura |
-
-## Degradês e sombras
-
-- Faces do cubo (multiplicadores da cor-base): topo ×1,12 · frente ×1,00 · esquerda ×0,90 · direita ×0,78 · fundo ×0,66 · base ×0,55.
-- Pino no topo: círculo de 38% do lado, ×1,2 da cor-base, borda ×0,9.
-- Borda de encaixe: `rgba(255,255,255,.28)` de 4 px em cada face.
-- Extrusão da placa: 18 sombras sólidas de 1 px na cor-base ×0,62 (diagonal 1,1).
-- Grade isométrica: linhas de 2 px `#D2D7E0` a ±30° com passo de 120 px, andando 0,25 px/quadro.
-
-## O que o cliente pode trocar
-
-As 3 cores de peça (tomate, sol, céu) podem ser as da marca; preto, osso e o cinza do chão ficam.

package/kits/cubos/regras/movimento.md

@@ -1,17 +0,0 @@
-# Movimento
-
-Curva padrão: `ob(t, 1,8)` (overshoot ~8%) para encaixes e `e5(t) = 1 − (1 − t)^5` para voos de saída.
-
-| movimento | duração | valores |
-|---|---|---|
-| cubo cai e encaixa | 18 quadros | cai 900 px girando rotateX 180° → 0 com overshoot 1,8; 5 quadros de intervalo entre cubos |
-| cubos se desmontam | 20 quadros | cada peça voa 420–900 px para fora girando 270°, some nos últimos 6 |
-| cubo gigante vira | 16 + 18 quadros | gira 90° com overshoot 1,8 e fica 18 quadros parado |
-| placa estala | 14 quadros | desliza 700 px, bate com overshoot 1,8 e a extrusão afunda 6 px por 3 quadros |
-| órbita da cena | contínuo | rotateY −34° ± 12° (período 190 quadros) + 0,15°/quadro, rotateX −26° |
-| pilha cresce | 12 quadros por cubo | cada cubo cai de 700 px com overshoot, um a cada 7 quadros |
-| entrada de cena | 12 quadros | `zoom` 1,9× · `subir` 300 px · `direita` 800 px; desfoque 6 px |
-| câmera (sempre) | contínuo | zoom 1,02 + 0,00015/quadro ± 0,012; soco +0,03 |
-
-- Pausa de 15–24 quadros depois do último cubo encaixar (só a órbita se mexe).
-- Uma peça por vez: o próximo cubo só cai quando o anterior já encaixou (≥ 5 quadros).

package/kits/cubos/regras/ritmo.md

@@ -1,14 +0,0 @@
-# Ritmo
-
-- 30 fps. Uma batida da trilha = **16.667 quadros** (108 bpm). Cortes em múltiplos de 16,7 (arredonde): 0, 17, 33, 50, 67, 83, 100, 117, 133, 150, 167, 183, 200, 217, 233.
-
-| batida | duração (s) | quadros |
-|---|---|---|
-| gancho | 1,3–2,0 | 40–60 |
-| virada | 1,5–2,2 | 45–66 |
-| prova (cada) | 1,2–1,8 | 36–54 |
-| data | 1,2–1,8 | 36–54 |
-| marca | 1,6–3,0 | 48–90 |
-
-- Preview do kit: 8 s, 6 cenas.
-- Leitura: uma palavra de cubo precisa de **≥ 18 quadros** parada; uma placa, **≥ 24**.

package/kits/cubos/regras/som.md

@@ -1,20 +0,0 @@
-# Som
-
-- Trilha: `assets/trilha/calma-com-punch-108bpm.mp3` (8,6 s, 108 bpm), volume **0.5**, fade de saída nos últimos **20 quadros**. Vídeo maior que 8,6 s: gere uma trilha nova no MotionCraft (`music make`, preset `calm-punch`, 108 bpm, tom A), não faça loop deste trecho.
-- Com narração: trilha a **0.25** e efeitos a 70% do volume da tabela.
-- Efeitos (todos sintetizados) e volume padrão:
-
-| som | volume | quando |
-|---|---|---|
-| `encaixa` | 1.0 | cubo que encaixa no lugar |
-| `bloco` | 0.85 | peça pequena ou placa que estala |
-| `queda` | 0.8 | o último cubo / a peça grande |
-| `whoosh` | 0.85 | entrada de cena |
-| `gira` | 0.75 | cubo gigante que vira de face |
-| `estala` | 0.7 | cada cubo da pilha |
-| `desmonta` | 0.8 | peças voando pra fora |
-| `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/cubos/regras/tipografia.md

@@ -1,15 +0,0 @@
-# Tipografia
-
-Duas fontes: **Archivo Black** (peso único, gorda) para tudo que é grande e **DM Sans 700** para detalhe.
-
-| papel | fonte | peso | tamanho (px) | máx. caracteres |
-|---|---|---|---|---|
-| palavra de cubo (hero) | Archivo Black | 400 | 110–150 | 9 |
-| placa extrudada | Archivo Black | 400 | 96–150 | 14 |
-| número da pilha | Archivo Black | 400 | 90–120 | 5 |
-| detalhe / endereço | DM Sans | 700 | 48–56 | 30 |
-
-- Tracking: 0 no Archivo; 0,01 em no DM Sans.
-- Line-height: 1,0 na placa; 1,2 no detalhe.
-- Caixa: caixa-alta em cubo e placa; frase normal no detalhe.
-- Texto que cresce encolhe sozinho (`caber()` em `base.ts`) até caber em 920 px; nunca palavra cortada.

package/kits/dashboard-dados/assets/ASSETS.md

@@ -1,18 +0,0 @@
-# Assets do kit dashboard-dados
-
-| arquivo | o que é | origem | licença |
-|---|---|---|---|
-| `fontes/montserrat.woff2` | Montserrat (subset latino) | Google Fonts, baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-Montserrat.txt` |
-| `fontes/plex-mono.woff2` | IBM Plex Mono (subset latino) | Google Fonts, baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-IBM-Plex-Mono.txt` |
-| `sons/whoosh-entra.mp3` | efeito `whoosh_in` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
-| `sons/whoosh-sai.mp3` | efeito `whoosh_out` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
-| `sons/swoosh.mp3` | efeito `swoosh` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
-| `sons/pop-palavra.mp3` | efeito `word_pop` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
-| `sons/pop-cartao.mp3` | efeito `icon_pop` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
-| `sons/clique.mp3` | efeito `button` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
-| `sons/impacto.mp3` | efeito `impact` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
-| `sons/subida.mp3` | efeito `riser` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
-| `sons/assinatura.mp3` | efeito `logo_sting` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
-| `trilha/trilha.mp3` | 9 s de trilha | MotionCraft `music make` ({"preset": "tech-bright", "bpm": 118, "key": "G", "progression": "soft-pop", "lead": "pluck", "drums": "tight", "comp": "syncopated"}) | sem samples; síntese própria (CC0). MotionCraft é MIT |
-
-Conteúdo de demonstração (fica em `exemplos/`, não faz parte do estilo): desenhado no código ou SVG próprio, sem fotos de terceiros, a menos que listado abaixo.

package/kits/dashboard-dados/elementos/AssinaturaMarca.tsx

@@ -1,19 +0,0 @@
-// AssinaturaMarca: logo, nome em Montserrat 800 alinhado à esquerda sob o logo, um fio laranja que cresce e o endereço em mono. Última cena.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FONTE_D, FONTE_T, c01, caber, e5, eb, seg} from './base';
-
-export type AssinaturaMarcaProps = {logo: string; nome: string; detalhe?: string; endereco?: string; inicio?: number; y?: number};
-
-export const AssinaturaMarca: React.FC<AssinaturaMarcaProps> = ({logo, nome, detalhe, endereco, inicio = 0, y = 640}) => {
-  const f = useCurrentFrame();
-  const lg = eb(seg(f, inicio, inicio + 18)), nm = e5(seg(f, inicio + 6, inicio + 22)), fio = e5(seg(f, inicio + 14, inicio + 32));
-  const tam = caber(nome, 260, 888, 800, -0.05);
-  return <div style={{position: 'absolute', inset: 0}}>
-    <img src={logo} style={{position: 'absolute', left: 96, top: y - 300, width: 240, height: 240, transform: `scale(${lg})`, transformOrigin: '0 100%', opacity: c01(lg * 2)}} />
-    <div style={{position: 'absolute', left: 96, top: y - 10, fontFamily: FONTE_D, fontWeight: 800, fontSize: tam, letterSpacing: '-0.05em', lineHeight: 1.05, color: COR.texto, opacity: c01(nm * 1.5), transform: `translateX(${(1 - nm) * -120}px)`}}>{nome}</div>
-    <div style={{position: 'absolute', left: 96, top: y + tam * 1.1 + 10, width: 888 * fio, height: 8, background: COR.laranja}} />
-    {detalhe && <div style={{position: 'absolute', left: 96, top: y + tam * 1.1 + 50, fontFamily: FONTE_D, fontWeight: 700, fontSize: 56, color: COR.texto, opacity: c01((f - inicio - 24) / 8)}}>{detalhe}</div>}
-    {endereco && <div style={{position: 'absolute', left: 96, top: y + tam * 1.1 + 130, fontFamily: FONTE_T, fontWeight: 500, fontSize: 42, letterSpacing: '0.1em', color: COR.laranja, opacity: c01((f - inicio - 30) / 8)}}>{endereco}</div>}
-  </div>;
-};

package/kits/dashboard-dados/elementos/BarrasCrescendo.tsx

@@ -1,27 +0,0 @@
-// BarrasCrescendo: gráfico de colunas que crescem da linha de base, uma depois da outra, com overshoot. O número de cada coluna conta
-// em cima dela; a última (ou a escolhida) é laranja, as outras turquesa.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FONTE_D, FONTE_T, c01, e5, eb, seg} from './base';
-
-export type Barra = {rotulo: string; valor: number};
-export type BarrasCrescendoProps = {dados: Barra[]; /** índice da barra laranja (padrão: a última) */ destaque?: number; titulo?: string; inicio?: number; intervalo?: number; y?: number; altura?: number};
-
-export const BarrasCrescendo: React.FC<BarrasCrescendoProps> = ({dados, destaque, titulo, inicio = 0, intervalo = 4, y = 760, altura = 620}) => {
-  const f = useCurrentFrame();
-  const n = dados.length, gap = 22, w = (888 - gap * (n - 1)) / n, mx = Math.max(...dados.map((d) => d.valor));
-  const base = y + altura / 2, dest = destaque ?? n - 1;
-  return <div style={{position: 'absolute', inset: 0}}>
-    {titulo && <div style={{position: 'absolute', left: 96, top: y - altura / 2 - 130, fontFamily: FONTE_D, fontWeight: 800, fontSize: 64, letterSpacing: '-0.03em', color: COR.texto, opacity: e5(seg(f, inicio, inicio + 12))}}>{titulo}</div>}
-    <div style={{position: 'absolute', left: 96, width: 888 * e5(seg(f, inicio, inicio + 14)), top: base, height: 4, background: COR.mute}} />
-    {dados.map((d, i) => {
-      const t0 = inicio + 4 + i * intervalo, g = eb(seg(f, t0, t0 + 20)), h = (d.valor / mx) * altura * 0.9 * g, cont = e5(seg(f, t0, t0 + 20));
-      const cor = i === dest ? COR.laranja : COR.turquesa;
-      return <div key={i}>
-        <div style={{position: 'absolute', left: 96 + i * (w + gap), width: w, top: base - Math.max(0, h), height: Math.max(0, h), background: cor, borderRadius: '14px 14px 0 0'}} />
-        <div style={{position: 'absolute', left: 96 + i * (w + gap) - 20, width: w + 40, top: base - Math.max(0, h) - 62, textAlign: 'center', fontFamily: FONTE_D, fontWeight: 800, fontSize: 44, color: COR.texto, opacity: c01(g * 2)}}>{Math.round(d.valor * cont)}</div>
-        <div style={{position: 'absolute', left: 96 + i * (w + gap) - 20, width: w + 40, top: base + 20, textAlign: 'center', fontFamily: FONTE_T, fontWeight: 500, fontSize: 28, letterSpacing: '0.08em', textTransform: 'uppercase', color: COR.mute}}>{d.rotulo}</div>
-      </div>;
-    })}
-  </div>;
-};

package/kits/dashboard-dados/elementos/Camera.tsx

@@ -1,23 +0,0 @@
-// Camera: deriva constante por baixo de tudo e um soco em cada batida. O quadro nunca fica parado.
-// `batidas` são quadros absolutos do vídeo. Parâmetros do kit em base.ts (CAMERA).
-import React from 'react';
-import {AbsoluteFill, useCurrentFrame} from 'remotion';
-import {CAMERA} from './base';
-
-export type CameraProps = {batidas?: number[]; forca?: number; children: React.ReactNode};
-
-export const posCamera = (f: number, batidas: number[], forca = 1) => {
-  const C = CAMERA;
-  let z = C.z + C.zOsc * Math.sin(f / 90) + f * C.push, dx = Math.sin(f / 37) * C.dx, dy = Math.cos(f / 51) * C.dy;
-  const rot = Math.sin(f / 83) * C.rot;
-  for (const h of batidas) if (f >= h) {
-    const d = Math.exp(-(f - h) / 7) * forca;
-    z += C.soco * d; dx += C.dx * 0.8 * d * Math.sin((f - h) * 2.7 + h); dy += C.dy * 0.8 * d * Math.cos((f - h) * 3.3 + h);
-  }
-  return {z, dx, dy, rot};
-};
-
-export const Camera: React.FC<CameraProps> = ({batidas = [], forca = 1, children}) => {
-  const c = posCamera(useCurrentFrame(), batidas, forca);
-  return <AbsoluteFill style={{transform: `translate(${c.dx}px, ${c.dy}px) rotate(${c.rot}rad) scale(${c.z})`, transformOrigin: '50% 44%'}}>{children}</AbsoluteFill>;
-};

package/kits/dashboard-dados/elementos/Cena.tsx

@@ -1,46 +0,0 @@
-// Cena: janela de tempo de um plano. Entra com movimento e sai com movimento (conforme a entrada).
-// Dentro dela, useCurrentFrame() começa em 0. A saída cruza SOBREPOE quadros com a próxima cena.
-import React, {createContext, useContext} from 'react';
-import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
-import {COR, e5, seg, LARGURA} from './base';
-
-export type Entrada = 'subir' | 'zoom' | 'direita' | 'esquerda' | 'whip' | 'cortina' | 'corte' | 'nenhuma';
-export const SOBREPOE = 10;
-const COM_SAIDA: Entrada[] = ['subir', 'zoom', 'direita', 'esquerda', 'whip'];
-
-const CenaCtx = createContext({duracao: 60});
-/** duração da cena atual em quadros (sem a sobreposição) */
-export const useDuracaoCena = () => useContext(CenaCtx).duracao;
-
-export type CenaProps = {de: number; ate: number; entrada?: Entrada; ultima?: boolean; children: React.ReactNode};
-
-const Janela: React.FC<{duracao: number; entrada: Entrada; ultima: boolean; children: React.ReactNode}> = ({duracao, entrada, ultima, children}) => {
-  const f = useCurrentFrame();
-  const dur = entrada === 'whip' ? 8 : 12;
-  const en = entrada === 'nenhuma' || entrada === 'corte' ? 0 : 1 - e5(seg(f, 0, dur));
-  const sai = !ultima && COM_SAIDA.includes(entrada);
-  const xo = sai ? e5(seg(f, duracao, duracao + SOBREPOE)) : 0;
-  let tf = '';
-  if (entrada === 'subir') tf += `translateY(${en * 260 - xo * 220}px) scale(${1 + xo * 0.06})`;
-  if (entrada === 'zoom') tf += `scale(${1 + en * 0.9 + xo * 0.5})`;
-  if (entrada === 'direita') tf += `translateX(${en * 760 - xo * 760}px)`;
-  if (entrada === 'esquerda') tf += `translateX(${-en * 760 + xo * 760}px)`;
-  if (entrada === 'whip') tf += `translateX(${en * 1500 - xo * 1500}px) skewX(${(en - xo) * -14}deg)`;
-  const blur = en * (entrada === 'whip' ? 34 : 16) + xo * (entrada === 'whip' ? 34 : 14);
-  const opac = entrada === 'whip' ? 1 : (1 - en * 0.85) * (1 - xo);
-  const corte = entrada === 'cortina' ? e5(seg(f, 0, 14)) : 1;
-  return <AbsoluteFill style={{transform: tf || undefined, opacity: opac, filter: blur > 0.3 ? `blur(${blur}px)` : undefined, clipPath: corte < 1 ? `inset(0 ${(1 - corte) * 100}% 0 0)` : undefined}}>
-    {children}
-    {entrada === 'cortina' && corte < 1 && <div style={{position: 'absolute', top: 0, bottom: 0, left: corte * LARGURA - 90, width: 90, background: COR.cortina}} />}
-  </AbsoluteFill>;
-};
-
-export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'subir', ultima = false, children}) => {
-  const duracao = ate - de;
-  const extra = !ultima && COM_SAIDA.includes(entrada) ? SOBREPOE : 0;
-  return <Sequence from={de} durationInFrames={duracao + extra} layout="none">
-    <CenaCtx.Provider value={{duracao}}>
-      <Janela duracao={duracao} entrada={entrada} ultima={ultima}>{children}</Janela>
-    </CenaCtx.Provider>
-  </Sequence>;
-};

package/kits/dashboard-dados/elementos/Fundo.tsx

@@ -1,12 +0,0 @@
-// Fundo: azul-marinho profundo com linhas de eixo horizontais bem finas que sobem devagar (como a régua de um gráfico) e uma luz fria no topo.
-import React from 'react';
-import {AbsoluteFill, useCurrentFrame} from 'remotion';
-import {COR} from './base';
-
-export const Fundo: React.FC<{velocidade?: number}> = ({velocidade = 1}) => {
-  const f = useCurrentFrame() * velocidade, passo = 160;
-  return <AbsoluteFill style={{background: `linear-gradient(180deg, ${COR.topo} 0%, ${COR.fundo} 70%)`}}>
-    <AbsoluteFill style={{backgroundImage: `linear-gradient(${COR.linha} 2px, transparent 2px)`, backgroundSize: `100% ${passo}px`, backgroundPosition: `0 ${-(f * 0.8) % passo}px`, opacity: 0.35}} />
-    <AbsoluteFill style={{background: `radial-gradient(60% 26% at ${30 + Math.sin(f / 50) * 20}% 10%, rgba(120,150,255,0.14), transparent 70%)`}} />
-  </AbsoluteFill>;
-};

package/kits/dashboard-dados/elementos/LinhaTendencia.tsx

@@ -1,29 +0,0 @@
-// LinhaTendencia: gráfico de linha de 888 px: a linha laranja de 10 px se desenha, cada ponto estala com overshoot e o último
-// ganha uma linha vertical tracejada e uma etiqueta com o valor. Área de degradê embaixo.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FONTE_D, FONTE_T, c01, e5, eb, seg} from './base';
-
-export type LinhaTendenciaProps = {serie: number[]; rotulos?: string[]; titulo?: string; etiqueta?: string; inicio?: number; y?: number; altura?: number};
-
-export const LinhaTendencia: React.FC<LinhaTendenciaProps> = ({serie, rotulos, titulo, etiqueta, inicio = 0, y = 760, altura = 600}) => {
-  const f = useCurrentFrame();
-  const W = 888, mx = Math.max(...serie), mn = Math.min(...serie) * 0.9;
-  const pts = serie.map((v, i) => [(i / (serie.length - 1)) * W, altura - ((v - mn) / (mx - mn)) * (altura * 0.88)]);
-  const p = e5(seg(f, inicio + 4, inicio + 34));
-  const d = pts.map((q, i) => `${i ? 'L' : 'M'}${q[0].toFixed(1)} ${q[1].toFixed(1)}`).join(' ');
-  const ult = pts[pts.length - 1], tag = eb(seg(f, inicio + 34, inicio + 46));
-  return <div style={{position: 'absolute', left: 96, width: 888, top: y - altura / 2, height: altura}}>
-    {titulo && <div style={{position: 'absolute', left: 0, top: -130, fontFamily: FONTE_D, fontWeight: 800, fontSize: 64, letterSpacing: '-0.03em', color: COR.texto, opacity: e5(seg(f, inicio, inicio + 12))}}>{titulo}</div>}
-    <svg width={W} height={altura + 20} style={{overflow: 'visible'}}>
-      <defs><linearGradient id="lt-a" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor={COR.laranja} stopOpacity="0.4" /><stop offset="1" stopColor={COR.laranja} stopOpacity="0" /></linearGradient>
-        <clipPath id="lt-c"><rect x="-10" y="-20" width={W * p + 10} height={altura + 60} /></clipPath></defs>
-      {[0, 0.33, 0.66, 1].map((k) => <line key={k} x1="0" x2={W} y1={altura * k} y2={altura * k} stroke={COR.linha} strokeWidth="2" />)}
-      <g clipPath="url(#lt-c)"><path d={`${d} L${W} ${altura} L0 ${altura} Z`} fill="url(#lt-a)" /><path d={d} fill="none" stroke={COR.laranja} strokeWidth="10" strokeLinejoin="round" strokeLinecap="round" /></g>
-      {pts.map((q, i) => {const e = eb(seg(f, inicio + 4 + (i / (pts.length - 1)) * 30, inicio + 16 + (i / (pts.length - 1)) * 30)); return <circle key={i} cx={q[0]} cy={q[1]} r={13 * e} fill={COR.fundo} stroke={COR.laranja} strokeWidth="7" />;})}
-      <line x1={ult[0]} x2={ult[0]} y1={ult[1] + 16} y2={altura} stroke={COR.laranja} strokeWidth="3" strokeDasharray="10 10" opacity={c01(tag)} />
-    </svg>
-    {etiqueta && <div style={{position: 'absolute', left: ult[0] - 250, top: ult[1] - 130, background: COR.laranja, color: COR.fundo, fontFamily: FONTE_D, fontWeight: 800, fontSize: 60, borderRadius: 24, padding: '8px 30px', transform: `scale(${tag})`, transformOrigin: '100% 100%', whiteSpace: 'nowrap'}}>{etiqueta}</div>}
-    {rotulos && rotulos.map((r, i) => <div key={i} style={{position: 'absolute', left: pts[i][0] - 60, width: 120, top: altura + 28, textAlign: 'center', fontFamily: FONTE_T, fontWeight: 500, fontSize: 28, letterSpacing: '0.08em', color: COR.mute, textTransform: 'uppercase'}}>{r}</div>)}
-  </div>;
-};

package/kits/dashboard-dados/elementos/Montagem.tsx

@@ -1,60 +0,0 @@
-// Montagem: transforma um plano de cenas (JSON escrito pela IA) em vídeo, usando só os elementos do kit.
-// Ela NÃO decide estética: põe Fundo + Camera + Cenas + sons onde o plano mandou. Formato: exemplos/plano.json.
-import React from 'react';
-import {AbsoluteFill} from 'remotion';
-import {COR} from './base';
-import {Fundo} from './Fundo';
-import {Camera} from './Camera';
-import {Cena, Entrada} from './Cena';
-import {Efeito, NomeSom, Trilha} from './Som';
-import {AssinaturaMarca} from './AssinaturaMarca';
-import {BarrasCrescendo} from './BarrasCrescendo';
-import {LinhaTendencia} from './LinhaTendencia';
-import {NumeroGigante} from './NumeroGigante';
-import {RankingBarras} from './RankingBarras';
-import {RoscaDados} from './RoscaDados';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const ELEMENTOS: Record<string, React.FC<any>> = {
-  AssinaturaMarca, BarrasCrescendo, LinhaTendencia, NumeroGigante, RankingBarras, RoscaDados,
-};
-
-export type Camada = {elemento: string; props: Record<string, unknown>};
-export type CenaPlano = {
-  batida: string; de: number; ate: number; entrada?: Entrada;
-  camadas: Camada[];
-  /** sons relativos ao início da cena */
-  sons?: {som: NomeSom; em: number; volume?: number}[];
-  /** socos de câmera extras, relativos ao início da cena (o início já é um soco) */
-  socos?: number[];
-};
-export type Plano = {kit: string; duracao: number; trilha?: {volume?: number} | false; cenas: CenaPlano[]};
-
-/** props de cor aceitam o nome do token ("vermelho") ou um hex */
-const CHAVES_COR = ['cor', 'corAnel', 'ponto', 'tinta'];
-/** troca nomes de arquivo ("fotos/a.jpg") pela URL importada, em qualquer prop */
-const resolver = (v: unknown, arquivos: Record<string, string>): unknown => {
-  if (typeof v === 'string') return arquivos[v] ?? v;
-  if (Array.isArray(v)) return v.map((x) => resolver(x, arquivos));
-  if (v && typeof v === 'object') return Object.fromEntries(Object.entries(v).map(([k, x]) => [k, CHAVES_COR.includes(k) && typeof x === 'string' && x in COR ? COR[x as keyof typeof COR] : resolver(x, arquivos)]));
-  return v;
-};
-
-export const Montagem: React.FC<{plano: Plano; arquivos?: Record<string, string>}> = ({plano, arquivos = {}}) => {
-  const socos = plano.cenas.flatMap((c) => [c.de, ...(c.socos ?? []).map((s) => c.de + s)]);
-  const ultima = plano.cenas.length - 1;
-  return <AbsoluteFill style={{background: COR.fundo}}>
-    <Fundo />
-    <Camera batidas={socos}>
-      {plano.cenas.map((c, i) => <Cena key={i} de={c.de} ate={c.ate} entrada={c.entrada} ultima={i === ultima}>
-        {c.camadas.map((k, j) => {
-          const El = ELEMENTOS[k.elemento];
-          if (!El) throw new Error(`dashboard-dados: elemento "${k.elemento}" não existe no kit`);
-          return <El key={j} {...(resolver(k.props, arquivos) as object)} />;
-        })}
-      </Cena>)}
-    </Camera>
-    {plano.cenas.flatMap((c, i) => (c.sons ?? []).map((s, j) => <Efeito key={`${i}-${j}`} som={s.som} em={c.de + s.em} volume={s.volume} />))}
-    {plano.trilha !== false && <Trilha volume={plano.trilha?.volume} />}
-  </AbsoluteFill>;
-};

package/kits/dashboard-dados/elementos/NumeroGigante.tsx

@@ -1,21 +0,0 @@
-// NumeroGigante: o KPI. Um número de até 380 px que conta de 0 ao valor, rótulo em mono em cima e um selo de variação embaixo.
-// Alinhado à esquerda (x = 96), como num painel.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FONTE_D, FONTE_T, c01, caber, e5, eb, seg} from './base';
-
-export type NumeroGiganteProps = {valor: number; casas?: number; prefixo?: string; sufixo?: string; rotulo: string; delta?: string; inicio?: number; y?: number; tamanho?: number};
-
-export const NumeroGigante: React.FC<NumeroGiganteProps> = ({valor, casas = 0, prefixo = '', sufixo = '', rotulo, delta, inicio = 0, y = 740, tamanho = 380}) => {
-  const f = useCurrentFrame();
-  const n = e5(seg(f, inicio + 4, inicio + 30)), en = e5(seg(f, inicio, inicio + 14));
-  const txt = `${prefixo}${(valor * n).toFixed(casas).replace('.', ',')}${sufixo}`;
-  const cheio = `${prefixo}${valor.toFixed(casas).replace('.', ',')}${sufixo}`;
-  const tam = caber(cheio, tamanho, 888, 800, -0.05);
-  const d = eb(seg(f, inicio + 26, inicio + 38));
-  return <div style={{position: 'absolute', left: 96, width: 888, top: y - tam * 0.8, height: tam * 1.8}}>
-    <div style={{fontFamily: FONTE_T, fontWeight: 500, fontSize: 38, letterSpacing: '0.12em', textTransform: 'uppercase', color: COR.mute, opacity: en, transform: `translateY(${(1 - en) * 30}px)`}}>{rotulo}</div>
-    <div style={{fontFamily: FONTE_D, fontWeight: 800, fontSize: tam, letterSpacing: '-0.05em', lineHeight: 1.05, color: COR.texto, whiteSpace: 'nowrap', marginTop: 10}}>{txt}</div>
-    {delta && <div style={{display: 'inline-block', marginTop: 18, background: COR.turquesa, color: COR.fundo, fontFamily: FONTE_D, fontWeight: 800, fontSize: 60, borderRadius: 24, padding: '8px 30px', transform: `scale(${d})`, transformOrigin: '0 50%'}}>▲ {delta}</div>}
-  </div>;
-};

package/kits/dashboard-dados/elementos/RankingBarras.tsx

@@ -1,27 +0,0 @@
-// RankingBarras: barras horizontais ordenadas (do maior ao menor). Cada barra desliza da esquerda até o seu comprimento com o nome dentro
-// e o valor contando na ponta; a primeira é laranja, as outras turquesa.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FONTE_D, c01, caber, e5, eb, seg} from './base';
-
-export type ItemRanking = {nome: string; valor: number};
-export type RankingBarrasProps = {itens: ItemRanking[]; sufixo?: string; titulo?: string; inicio?: number; intervalo?: number; y?: number};
-
-export const RankingBarras: React.FC<RankingBarrasProps> = ({itens, sufixo = '', titulo, inicio = 0, intervalo = 5, y = 760}) => {
-  const f = useCurrentFrame();
-  const H = 190, topo = y - (itens.length * H) / 2, mx = Math.max(...itens.map((i) => i.valor));
-  return <div style={{position: 'absolute', inset: 0}}>
-    {titulo && <div style={{position: 'absolute', left: 96, top: topo - 130, fontFamily: FONTE_D, fontWeight: 800, fontSize: 64, letterSpacing: '-0.03em', color: COR.texto, opacity: e5(seg(f, inicio, inicio + 12))}}>{titulo}</div>}
-    {itens.map((it, i) => {
-      const t0 = inicio + 4 + i * intervalo, g = eb(seg(f, t0, t0 + 22)), c = e5(seg(f, t0, t0 + 22));
-      const larg = Math.max(0, Math.max((it.valor / mx) * 888, 420) * g);
-      const cor = i === 0 ? COR.laranja : COR.turquesa;
-      return <div key={i} style={{position: 'absolute', left: 96, width: 888, top: topo + i * H, height: H - 30}}>
-        <div style={{position: 'absolute', left: 0, top: 0, width: larg, height: '100%', background: cor, borderRadius: 24, overflow: 'hidden'}}>
-          <div style={{position: 'absolute', left: 36, top: 0, bottom: 0, display: 'flex', alignItems: 'center', fontFamily: FONTE_D, fontWeight: 800, fontSize: caber(it.nome, 64, 500, 800, -0.03), letterSpacing: '-0.03em', color: COR.fundo, whiteSpace: 'nowrap'}}>{it.nome}</div>
-        </div>
-        {(() => {const fora = larg < 600; return <div style={{position: 'absolute', left: fora ? larg + 20 : larg - 260, width: fora ? undefined : 230, textAlign: fora ? 'left' : 'right', top: 0, height: '100%', display: 'flex', alignItems: 'center', justifyContent: fora ? 'flex-start' : 'flex-end', fontFamily: FONTE_D, fontWeight: 800, fontSize: 60, color: fora ? COR.texto : COR.fundo, opacity: c01(g * 2), whiteSpace: 'nowrap'}}>{Math.round(it.valor * c)}{sufixo}</div>;})()}
-      </div>;
-    })}
-  </div>;
-};

package/kits/dashboard-dados/elementos/RoscaDados.tsx

@@ -1,39 +0,0 @@
-// RoscaDados: gráfico de rosca de 640 px. As fatias se desenham em sequência (cada uma varre seu arco), o número do centro conta
-// o total e uma legenda de 3 linhas aparece embaixo com o porcentual de cada fatia.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FONTE_D, FONTE_T, c01, e5, seg} from './base';
-
-export type Fatia = {rotulo: string; pct: number; cor?: string};
-export type RoscaDadosProps = {fatias: Fatia[]; centro: number; sufixo?: string; rotuloCentro?: string; inicio?: number; y?: number};
-
-const PAD = [COR.laranja, COR.turquesa, COR.rosa, COR.amarelo];
-
-export const RoscaDados: React.FC<RoscaDadosProps> = ({fatias, centro, sufixo = '', rotuloCentro, inicio = 0, y = 640}) => {
-  const f = useCurrentFrame();
-  const R = 250, C = 2 * Math.PI * R, tot = fatias.reduce((a, b) => a + b.pct, 0);
-  let acc = 0;
-  const giro = e5(seg(f, inicio, inicio + 40));
-  return <div style={{position: 'absolute', inset: 0}}>
-    <svg width={1080} height={800} viewBox="-540 -400 1080 800" style={{position: 'absolute', left: 0, top: y - 400}}>
-      <circle r={R} fill="none" stroke={COR.painel} strokeWidth="110" />
-      <g transform={`rotate(${-90 - (1 - giro) * 120})`}>
-        {fatias.map((s, i) => {
-          const ini = acc / tot; acc += s.pct;
-          const t0 = inicio + 4 + i * 9, p = e5(seg(f, t0, t0 + 20)), len = (s.pct / tot) * C * p;
-          return <circle key={i} r={R} fill="none" stroke={s.cor ?? PAD[i % PAD.length]} strokeWidth="110" strokeDasharray={`${Math.max(0, len - 4)} ${C}`} strokeDashoffset={-ini * C} />;
-        })}
-      </g>
-    </svg>
-    <div style={{position: 'absolute', left: 0, right: 0, top: y - 95, textAlign: 'center', fontFamily: FONTE_D, fontWeight: 800, fontSize: 150, letterSpacing: '-0.05em', color: COR.texto, lineHeight: 1}}>{Math.round(centro * e5(seg(f, inicio + 4, inicio + 34)))}{sufixo}</div>
-    {rotuloCentro && <div style={{position: 'absolute', left: 0, right: 0, top: y + 62, textAlign: 'center', fontFamily: FONTE_T, fontWeight: 500, fontSize: 30, letterSpacing: '0.12em', textTransform: 'uppercase', color: COR.mute, opacity: c01((f - inicio - 16) / 8)}}>{rotuloCentro}</div>}
-    {fatias.map((s, i) => {
-      const e = e5(seg(f, inicio + 20 + i * 5, inicio + 32 + i * 5));
-      return <div key={i} style={{position: 'absolute', left: 150, width: 780, top: y + 410 + i * 84, height: 70, display: 'flex', alignItems: 'center', gap: 24, opacity: e, transform: `translateX(${(1 - e) * 60}px)`}}>
-        <div style={{width: 40, height: 40, borderRadius: 12, background: s.cor ?? PAD[i % PAD.length]}} />
-        <div style={{fontFamily: FONTE_D, fontWeight: 700, fontSize: 48, color: COR.texto, flex: 1}}>{s.rotulo}</div>
-        <div style={{fontFamily: FONTE_T, fontWeight: 500, fontSize: 44, color: COR.mute}}>{s.pct}%</div>
-      </div>;
-    })}
-  </div>;
-};

package/kits/dashboard-dados/elementos/Som.tsx

@@ -1,39 +0,0 @@
-// Som: efeitos e trilha do kit, sintetizados no MotionCraft (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 trilha from '../assets/trilha/trilha.mp3';
-
-export const SONS = {
-  'whoosh-entra': whooshEntra, 'whoosh-sai': whooshSai, swoosh, 'pop-palavra': popPalavra, 'pop-cartao': popCartao,
-  clique, impacto, subida, assinatura,
-} as const;
-export type NomeSom = keyof typeof SONS;
-
-// volume de cada efeito (0..1) já calibrado contra a trilha a 0,5
-const VOLUME: Record<NomeSom, number> = {
-  'whoosh-entra': 0.9, 'whoosh-sai': 0.8, swoosh: 1, 'pop-palavra': 1, 'pop-cartao': 0.9, clique: 0.8, impacto: 0.85, subida: 0.7, assinatura: 0.9,
-};
-
-export type EfeitoProps = {som: NomeSom; em: number; volume?: number};
-/** um efeito no quadro `em` (absoluto, ou relativo à Cena se estiver dentro de uma) */
-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.5, 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/dashboard-dados/elementos/base.ts

@@ -1,87 +0,0 @@
-// Base do kit dashboard-dados: 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 f0Url from '../assets/fontes/montserrat.woff2';
-import f1Url from '../assets/fontes/plex-mono.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 = {
-  fundo: '#0C1224',
-  topo: '#16203F',
-  painel: '#18223F',
-  linha: '#2A3558',
-  texto: '#F2F5FF',
-  mute: '#8E9BC0',
-  laranja: '#FF8A3D',
-  turquesa: '#35D6C0',
-  rosa: '#FF5C8A',
-  amarelo: '#FFD23F',
-  destaque: '#FF8A3D',
-  cortina: '#FF8A3D',
-};
-
-// ---------- fonte ----------
-// Famílias com o prefixo do kit (DD), pra não colidir com outro kit no mesmo estúdio.
-export const FONTE_D = '"DD Montserrat", "Montserrat", system-ui, sans-serif';
-export const FONTE_T = '"DD IBM Plex Mono", "IBM Plex Mono", ui-monospace, monospace';
-export const FONTE_S = '"DD IBM Plex Mono", "IBM Plex Mono", ui-monospace, monospace';
-const LISTA = [
-  {fam: 'DD Montserrat', url: f0Url, peso: '700 900', estilo: 'normal'},
-  {fam: 'DD IBM Plex Mono', url: f1Url, peso: '500', estilo: 'normal'},
-];
-if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__kit_DD) {
-  (globalThis as Record<string, unknown>).__kit_DD = true;
-  for (const f of LISTA) {
-    const h = delayRender('dashboard-dados: ' + f.fam);
-    new FontFace(f.fam, `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: cubic-bezier(.2,.8,.2,1) aproximado */
-export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
-/** entrada com overshoot de ~10% (easeOutBack, c1 = 2.2) */
-export const eb = (t: number) => {const x = c01(t) - 1, c = 2.2; return 1 + (c + 1) * x * x * x + c * x * x;};
-/** entra e sai suave */
-export const e3 = (t: number) => {const x = c01(t); return x * x * (3 - 2 * x);};
-export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
-/** uma batida da trilha do kit em quadros */
-export const BATIDA = 14.75;
-
-// ---------- texto ----------
-/** "Usar *IA* já" -> [{t:'Usar ', d:false}, {t:'IA', d:true}, {t:' já', d:false}] */
-export const partes = (texto: string) => texto.split('*').map((t, i) => ({t, d: i % 2 === 1})).filter((p) => p.t.length > 0);
-export const textoLimpo = (t: string) => t.replace(/\*/g, '');
-let canvas: HTMLCanvasElement | null = null;
-const cache = new Map<string, number>();
-export const larguraTexto = (texto: string, tamanho: number, peso = 800, trackingEm = -0.03, familia = FONTE_D): 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`. Nunca palavra cortada. */
-export const caber = (texto: string, tamanho: number, largura = LARGURA_UTIL, peso = 800, trackingEm = -0.03, familia = FONTE_D) => {
-  const w = larguraTexto(textoLimpo(texto), tamanho, peso, trackingEm, familia);
-  return w > largura ? Math.floor(tamanho * (largura / w)) : tamanho;
-};
-
-// ---------- câmera ----------
-export const CAMERA = {"z": 1.025, "zOsc": 0.01, "push": 0.0004, "dx": 10, "dy": 8, "rot": 0.004, "soco": 0.025};

package/kits/dashboard-dados/elementos/index.ts

@@ -1,16 +0,0 @@
-// Tudo que o kit dashboard-dados 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 {AssinaturaMarca} from './AssinaturaMarca';
-export {BarrasCrescendo} from './BarrasCrescendo';
-export {LinhaTendencia} from './LinhaTendencia';
-export {NumeroGigante} from './NumeroGigante';
-export {RankingBarras} from './RankingBarras';
-export {RoscaDados} from './RoscaDados';
-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/dashboard-dados/exemplos/logo-radar.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240"><rect width="240" height="240" rx="56" fill="#18223F"/><rect x="48" y="130" width="34" height="62" rx="8" fill="#35D6C0"/><rect x="103" y="92" width="34" height="100" rx="8" fill="#35D6C0"/><rect x="158" y="48" width="34" height="144" rx="8" fill="#FF8A3D"/></svg>