primocode 11.0.0 → 11.1.0

package/materiais/cubos/regras.md

@@ -0,0 +1,136 @@
+# Regras do estilo cubos (Cubos modulares)
+
+Estas regras valem para QUEM MONTA. Não existe vídeo pronto aqui: só peças (`pecas.json`). Cada cena é escrita do zero, peça a peça.
+
+## Regras do kit: 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.
+
+## Regras do kit: 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.
+
+## Regras do kit: area-segura
+- 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.
+
+## Regras do kit: 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).
+
+## Regras do kit: 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**.
+
+## Regras do kit: 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.
+
+## Movimento (régua extravagante; liso e calmo é reprovado)
+- A câmera nunca para: use `CameraDeriva` (ou a câmera do estilo) com ao menos 4 chaves `{em, z, x, y}` mudando `z` e `x/y`, uma chave a cada cena. Deriva e leve rotação por baixo, sempre.
+- Em cada corte, um `CorteImpacto` (clarão + tremida + zoom-pop) casado com o som `queda` 1 a 2 quadros antes.
+- Toda cena tem fundo vivo (`Particulas` + o fundo do estilo), pelo menos 1 herói e 2 apoios em movimento. Cena parada é reprovada.
+- Entrada de elemento: 10-18 quadros com overshoot curto; saída: metade da entrada. Stagger entre itens: 2-5 quadros.
+- Peças 3D e giros valem: quanto mais profundidade (parallax, perspectiva, rotação), melhor, sem sair da área segura.
+
+## Som (camadas)
+- Trilha sempre, volume 0,45, fade de saída 20 quadros.
+- SFX em TODO corte e em toda entrada de elemento grande, no mínimo 2 camadas por corte (ex.: `whoosh` + `queda`, depois `gira` no quadro seguinte). Máx. 6 efeitos por segundo. Nunca o mesmo arquivo duas vezes no mesmo quadro.
+- Sons deste estilo: assinatura, bloco, desmonta, encaixa, estala, gira, queda, whoosh.
+
+## Densidade mínima (o conferir cobra isto)
+| medida | mínimo |
+|---|---|
+| camadas visuais simultâneas por cena | 4 (fundo, partículas, herói, apoio) |
+| elementos em movimento por segundo (média da linha do tempo) | 5 |
+| chaves de câmera por vídeo | 4 |
+| SFX por corte | 1 (alvo 2) |
+| peças diferentes usadas no vídeo | 6 |
+
+## Proibido
+- Copiar uma cena pronta: cada cena é composta peça a peça, com props novas.
+- Cena parada: nenhum quadro em que nada se mexe.
+- Elemento com movimento grande sem som.

package/materiais/cubos/sons/Som.tsx

@@ -0,0 +1,33 @@
+// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`), trilha de `music make`.
+// 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 encaixa from './encaixa.mp3';
+import bloco from './bloco.mp3';
+import queda from './queda.mp3';
+import whoosh from './whoosh.mp3';
+import gira from './gira.mp3';
+import estala from './estala.mp3';
+import desmonta from './desmonta.mp3';
+import assinatura from './assinatura.mp3';
+import trilha from '../trilha/calma-com-punch-108bpm.mp3';
+
+export const SONS = {'encaixa': encaixa, 'bloco': bloco, 'queda': queda, 'whoosh': whoosh, 'gira': gira, 'estala': estala, 'desmonta': desmonta, 'assinatura': assinatura} as const;
+export type NomeSom = keyof typeof SONS;
+
+// volume de cada efeito (0..1) já calibrado contra a trilha
+const VOLUME: Record<NomeSom, number> = {'encaixa': 1.0, 'bloco': 0.85, 'queda': 0.8, 'whoosh': 0.85, 'gira': 0.75, 'estala': 0.7, 'desmonta': 0.8, '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/materiais/cubos/texturas/Fundo.tsx

@@ -0,0 +1,15 @@
+// Fundo: cinza-azulado claro com grade isométrica (linhas a ±30°) que anda devagar e uma luz suave no alto.
+// Fica FORA da Camera.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {COR} from '../base';
+
+export type FundoProps = {cor?: string; linha?: string; velocidade?: number};
+
+export const Fundo: React.FC<FundoProps> = ({cor = COR.chao, linha = COR.linha, velocidade = 1}) => {
+  const f = useCurrentFrame() * velocidade;
+  return <AbsoluteFill style={{background: cor}}>
+    <AbsoluteFill style={{backgroundImage: `repeating-linear-gradient(30deg, ${linha} 0 2px, transparent 2px 120px), repeating-linear-gradient(-30deg, ${linha} 0 2px, transparent 2px 120px)`, backgroundPosition: `${f * 0.25}px ${f * 0.15}px`, opacity: 0.8}} />
+    <AbsoluteFill style={{background: 'radial-gradient(60% 34% at 50% 22%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(70% 22% at 50% 82%, rgba(27,29,34,0.08), transparent 70%)'}} />
+  </AbsoluteFill>;
+};

package/materiais/cubos/texturas/Particulas.tsx

@@ -0,0 +1,22 @@
+// Particulas: camada de pontos e traços que flutuam o tempo todo (parallax em 3 profundidades). Dá movimento
+// de fundo sem competir com o herói. Determinística: a mesma `semente` dá o mesmo desenho em qualquer render.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame, useVideoConfig} from 'remotion';
+
+export type ParticulasProps = {quantidade?: number; cor?: string; semente?: number; velocidade?: number; opacidade?: number};
+
+const rnd = (n: number) => { const x = Math.sin(n * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x); };
+
+export const Particulas: React.FC<ParticulasProps> = ({quantidade = 36, cor = '#FF5B3A', semente = 1, velocidade = 1, opacidade = 0.55}) => {
+  const f = useCurrentFrame();
+  const {width: L, height: A} = useVideoConfig();
+  return <AbsoluteFill style={{pointerEvents: 'none'}}>
+    {Array.from({length: quantidade}, (_, i) => {
+      const prof = 0.4 + rnd(i + semente) * 1.2;
+      const x = ((rnd(i * 3 + semente) * L + f * 0.9 * prof * velocidade) % (L + 80)) - 40;
+      const y = ((rnd(i * 7 + semente) * A - f * 1.6 * prof * velocidade) % (A + 80) + (A + 80)) % (A + 80) - 40;
+      const tam = 3 + prof * 5, pisca = 0.55 + 0.45 * Math.sin(f / (9 + i % 7) + i);
+      return <div key={i} style={{position: 'absolute', left: x, top: y, width: tam, height: i % 3 === 0 ? tam * 4 : tam, borderRadius: tam, background: cor, opacity: opacidade * pisca * Math.min(1, prof)}} />;
+    })}
+  </AbsoluteFill>;
+};

package/materiais/cubos/tipografia/AssinaturaMarca.tsx

@@ -0,0 +1,29 @@
+// AssinaturaMarca: a última cena. Um cubo grande com o logo na face da frente cai e gira de leve; embaixo,
+// o nome numa placa extrudada e o endereço numa placa preta.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, ob, seg} from '../base';
+import {Cubo} from '../formas/Cubo';
+import {PlacaBloco} from '../formas/PlacaBloco';
+
+export type AssinaturaMarcaProps = {
+  logo: string;
+  nome: string;
+  endereco?: string;
+  cor?: string;
+  inicio?: number;
+};
+
+export const AssinaturaMarca: React.FC<AssinaturaMarcaProps> = ({logo, nome, endereco, cor = COR.sol, inicio = 0}) => {
+  const f = useCurrentFrame() - inicio;
+  const q = ob(seg(f, 0, 18), 1.8), rotY = -24 + Math.sin(f / 22) * 14 + Math.max(0, f - 18) * 0.9 * Math.exp(-Math.max(0, f - 18) / 25);
+  return <>
+    <div style={{position: 'absolute', left: 540, top: 590, width: 0, height: 0, perspective: 2200}}>
+      <div style={{position: 'absolute', left: 0, top: 0, transformStyle: 'preserve-3d', transform: `translateY(${(1 - q) * -900}px) rotateX(${-16 + (1 - q) * 160}deg) rotateY(${rotY}deg)`}}>
+        <Cubo lado={400} cor={cor} faces={{frente: {imagem: logo}}} />
+      </div>
+    </div>
+    <PlacaBloco texto={nome.toUpperCase()} y={1000} tamanho={130} cor={COR.tomate} inicio={inicio + 12} de="esquerda" />
+    {endereco && <PlacaBloco texto={endereco} y={1190} tamanho={64} cor={COR.tinta} inicio={inicio + 20} de="direita" rot={2} />}
+  </>;
+};

package/materiais/cubos/transicoes/Cena.tsx

@@ -0,0 +1,48 @@
+// 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.3);
+  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) * 6 + xo * 6;
+  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 = 'encolhe', 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/materiais/cubos/transicoes/CorteImpacto.tsx

@@ -0,0 +1,16 @@
+// CorteImpacto: o soco de um corte. Num quadro `em` ele solta um clarão, treme o conteúdo (decai em ~10 quadros)
+// e faz um zoom-pop. Envolve as camadas que devem tremer; ponha um som de batida 1 a 2 quadros antes de `em`.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+
+export type CorteImpactoProps = {em: number; forca?: number; clarao?: boolean; corClarao?: string; children?: React.ReactNode};
+
+export const CorteImpacto: React.FC<CorteImpactoProps> = ({em, forca = 1, clarao = true, corClarao = '#ffffff', children}) => {
+  const f = useCurrentFrame();
+  const d = f >= em ? Math.exp(-(f - em) / 6) * forca : 0;
+  const dx = Math.sin((f - em) * 2.9) * 22 * d, dy = Math.cos((f - em) * 3.7) * 16 * d, s = 1 + 0.045 * d;
+  return <AbsoluteFill>
+    <AbsoluteFill style={{transform: `translate(${dx}px, ${dy}px) scale(${s})`}}>{children}</AbsoluteFill>
+    {clarao && d > 0.02 && <AbsoluteFill style={{background: corClarao, opacity: Math.min(0.55, d * 0.6), pointerEvents: 'none'}} />}
+  </AbsoluteFill>;
+};

package/materiais/dashboard-dados/base.ts

@@ -0,0 +1,87 @@
+// 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 './fontes/montserrat.woff2';
+import f1Url from './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/materiais/dashboard-dados/camera/Camera.tsx

@@ -0,0 +1,23 @@
+// 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/materiais/dashboard-dados/camera/CameraDeriva.tsx

@@ -0,0 +1,37 @@
+// CameraDeriva: câmera 3D que nunca para. `chaves` [{em, z, x?, y?, giro?}] levam o foco de uma chave à outra (suave),
+// e por baixo roda uma deriva (balanço, respiração de zoom, leve rotação em perspectiva) que não pára nunca.
+// z é o zoom (1 = enquadramento normal; 1.3 = 30% mais perto); x/y deslocam o foco em px; giro é a inclinação em graus.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame, useVideoConfig} from 'remotion';
+
+export type ChaveCamera = {em: number; z?: number; x?: number; y?: number; giro?: number};
+export type CameraDerivaProps = {chaves?: ChaveCamera[]; deriva?: number; perspectiva?: number; children: React.ReactNode};
+
+const suave = (t: number) => { const c = Math.min(1, Math.max(0, t)); return c * c * (3 - 2 * c); };
+const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+
+export const posCameraDeriva = (f: number, chaves: ChaveCamera[], deriva = 1) => {
+  const ks = chaves.length ? [...chaves].sort((a, b) => a.em - b.em) : [{em: 0, z: 1}];
+  let z = ks[0].z ?? 1, x = ks[0].x ?? 0, y = ks[0].y ?? 0, g = ks[0].giro ?? 0;
+  for (let i = 0; i < ks.length - 1; i++) {
+    const a = ks[i], b = ks[i + 1];
+    if (f >= a.em) {
+      const t = suave((f - a.em) / Math.max(1, b.em - a.em));
+      z = lerp(a.z ?? 1, b.z ?? 1, t); x = lerp(a.x ?? 0, b.x ?? 0, t); y = lerp(a.y ?? 0, b.y ?? 0, t); g = lerp(a.giro ?? 0, b.giro ?? 0, t);
+    }
+  }
+  const escala = z * (1 + deriva * (0.03 * Math.sin(f / 90) + 0.00015 * f));
+  return {escala, dx: Math.sin(f / 70) * 12 * deriva - x * escala, dy: Math.cos(f / 90) * 9 * deriva - y * escala,
+    rotZ: g + Math.sin(f / 130) * 0.8 * deriva, rotX: 3 * Math.cos(f / 110) * deriva, rotY: 4 * Math.sin(f / 95) * deriva};
+};
+
+export const CameraDeriva: React.FC<CameraDerivaProps> = ({chaves = [], deriva = 1, perspectiva = 2400, children}) => {
+  const {width: L, height: A} = useVideoConfig();
+  const c = posCameraDeriva(useCurrentFrame(), chaves, deriva);
+  return <AbsoluteFill style={{perspective: perspectiva, perspectiveOrigin: `${L / 2}px ${A / 2}px`}}>
+    <AbsoluteFill style={{transformOrigin: `${L / 2}px ${A / 2}px`,
+      transform: `translate(${c.dx}px, ${c.dy}px) rotateX(${c.rotX}deg) rotateY(${c.rotY}deg) rotateZ(${c.rotZ}deg) scale(${c.escala})`}}>
+      {children}
+    </AbsoluteFill>
+  </AbsoluteFill>;
+};

package/materiais/dashboard-dados/cores/paleta.json

@@ -0,0 +1,30 @@
+{
+  "estilo": "dashboard-dados",
+  "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"
+  },
+  "video": {
+    "largura": 1080,
+    "altura": 1920,
+    "fps": 30,
+    "segura": {
+      "topo": 168,
+      "base": 1330,
+      "lado": 80
+    }
+  },
+  "particulas": {
+    "cor": "#FF8A3D"
+  }
+}

package/materiais/dashboard-dados/formas/BarrasCrescendo.tsx

@@ -0,0 +1,27 @@
+// 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/materiais/dashboard-dados/formas/LinhaTendencia.tsx

@@ -0,0 +1,29 @@
+// 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/materiais/dashboard-dados/formas/RankingBarras.tsx

@@ -0,0 +1,27 @@
+// 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/materiais/dashboard-dados/formas/RoscaDados.tsx

@@ -0,0 +1,39 @@
+// 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>;
+};