primocode 10.17.1 → 11.0.0

package/kits/dashboard-dados/SKILL.md

@@ -0,0 +1,51 @@
+---
+slug: dashboard-dados
+nome: Painel de dados
+descricao: azul-marinho profundo, gráficos planos e saturados que crescem, números gigantes que contam
+familia: SaaS e tecnologia
+versao: 1
+quando:
+  - "vídeo de relatório, resultado do mês ou painel de métricas"
+  - "mostrar crescimento com números e gráficos"
+  - "anúncio de ferramenta de analytics, BI ou financeiro"
+  - "prova de resultado com um número grande"
+  - "resumo de ano ou retrospectiva em dados"
+nao_serve:
+  - "vídeo sem nenhum número ou dado"
+  - "clima editorial, calmo, em papel (use notion-editorial)"
+---
+
+# Painel de dados
+
+Fundo **azul-marinho profundo** (`#0C1224`) com linhas de eixo finas que sobem devagar como a régua de um gráfico. Os heróis são **dados desenhados em cores chapadas e saturadas** (laranja `#FF8A3D`, turquesa `#35D6C0`, rosa `#FF5C8A`, amarelo `#FFD23F`): um **KPI de 380 px** que conta, **colunas que crescem com overshoot**, **rosca que se desenha fatia a fatia**, **ranking de barras horizontais** e **linha de tendência** com ponto final etiquetado. Tudo **alinhado à esquerda** (x = 96), como num painel, em **Montserrat 800**. A cor laranja marca sempre a barra/fatia/ponto que importa; o resto é turquesa. Um herói por cena e muito vazio ao redor.
+
+## Como montar um vídeo com este kit
+
+1. **Leia o pedido e o roteiro.** Corte cada fala em frases curtas. Uma frase = um plano.
+2. **Escolha as batidas** em `receita.json`. Cada batida diz quanto dura e quais elementos servem.
+3. **Escreva o plano de cenas** (`plano.json`, mesmo formato de `exemplos/plano.json`): `de`/`ate` em quadros, `entrada`, `camadas` (elemento + props) e `sons`. Os cortes seguem a voz ou a batida da trilha (1 batida = 14.75 quadros).
+4. **Renderize** com `<Montagem plano={...} arquivos={...} />`.
+5. **Confira** um quadro por cena contra `regras/`: área segura, herói grande, nada parado, nada cortado.
+
+## Elementos
+
+| elemento | o que faz | batidas |
+|---|---|---|
+| `NumeroGigante` | KPI de até 380 px contando, rótulo mono e selo de variação | kpi |
+| `BarrasCrescendo` | colunas que crescem da base com overshoot, números contando, a destacada em laranja | barras |
+| `RoscaDados` | rosca de 640 px com fatias que se desenham em sequência + legenda | rosca |
+| `RankingBarras` | barras horizontais ordenadas que deslizam, valor contando | ranking |
+| `LinhaTendencia` | linha que se desenha, pontos que estalam, etiqueta no último | tendencia |
+| `AssinaturaMarca` | logo + nome + fio laranja + endereço, à esquerda | marca (última) |
+| `Fundo`, `Camera`, `Cena` | o chão, a deriva da câmera e a janela de cada plano | todas |
+| `Efeito`, `Trilha` | sons e trilha do kit | todas |
+
+## Proibido
+
+- Fundo claro ou cartões brancos (isso é stripe-ondas) e janela de app (isso é saas-linear).
+- Mais de 4 cores de dado; laranja só no que importa.
+- Gráfico sem número: todo dado mostra o valor contando.
+- Dado inventado fora de ordem de grandeza razoável; sempre rotule a unidade.
+- Mais de um herói por cena; elemento a menos de 96 px da borda.
+- Brilho/glow, flash branco, 3D.
+- Texto fora da área segura (168–1330 px, 96 px nas laterais).

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

@@ -0,0 +1,18 @@
+# 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/assets/fontes/OFL-IBM-Plex-Mono.txt

@@ -0,0 +1,93 @@
+Copyright IBM Corp. (https://github.com/IBM/plex)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/kits/dashboard-dados/assets/fontes/OFL-Montserrat.txt

@@ -0,0 +1,93 @@
+Copyright The Montserrat Project Authors (https://github.com/JulietaUla/Montserrat)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

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

@@ -0,0 +1,19 @@
+// 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

@@ -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/kits/dashboard-dados/elementos/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/kits/dashboard-dados/elementos/Cena.tsx

@@ -0,0 +1,46 @@
+// 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

@@ -0,0 +1,12 @@
+// 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

@@ -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/kits/dashboard-dados/elementos/Montagem.tsx

@@ -0,0 +1,60 @@
+// 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

@@ -0,0 +1,21 @@
+// 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

@@ -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/kits/dashboard-dados/elementos/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>;
+};