primocode 10.17.0 → 10.19.0

package/kits/dashboard-dados/exemplos/plano.json

@@ -0,0 +1,325 @@
+{
+ "kit": "dashboard-dados",
+ "roteiro": "exemplos/roteiro.md",
+ "duracao": 240,
+ "trilha": {
+  "volume": 0.5
+ },
+ "cenas": [
+  {
+   "batida": "kpi",
+   "de": 0,
+   "ate": 44,
+   "entrada": "nenhuma",
+   "camadas": [
+    {
+     "elemento": "NumeroGigante",
+     "props": {
+      "valor": 1.2,
+      "casas": 1,
+      "prefixo": "R$ ",
+      "sufixo": " mi",
+      "rotulo": "receita do mês",
+      "delta": "24%",
+      "inicio": 2,
+      "y": 760,
+      "tamanho": 380
+     }
+    }
+   ],
+   "socos": [
+    30
+   ],
+   "sons": [
+    {
+     "som": "subida",
+     "em": -6
+    },
+    {
+     "som": "whoosh-entra",
+     "em": 0
+    },
+    {
+     "som": "impacto",
+     "em": 30
+    },
+    {
+     "som": "pop-palavra",
+     "em": 32
+    }
+   ]
+  },
+  {
+   "batida": "barras",
+   "de": 44,
+   "ate": 90,
+   "entrada": "direita",
+   "camadas": [
+    {
+     "elemento": "BarrasCrescendo",
+     "props": {
+      "titulo": "Vendas por mês",
+      "dados": [
+       {
+        "rotulo": "mai",
+        "valor": 42
+       },
+       {
+        "rotulo": "jun",
+        "valor": 55
+       },
+       {
+        "rotulo": "jul",
+        "valor": 51
+       },
+       {
+        "rotulo": "ago",
+        "valor": 68
+       },
+       {
+        "rotulo": "set",
+        "valor": 80
+       },
+       {
+        "rotulo": "out",
+        "valor": 112
+       }
+      ],
+      "inicio": 0,
+      "y": 820,
+      "altura": 600
+     }
+    }
+   ],
+   "socos": [
+    26
+   ],
+   "sons": [
+    {
+     "som": "whoosh-entra",
+     "em": -1
+    },
+    {
+     "som": "pop-cartao",
+     "em": 4
+    },
+    {
+     "som": "pop-cartao",
+     "em": 8
+    },
+    {
+     "som": "pop-cartao",
+     "em": 12
+    },
+    {
+     "som": "pop-cartao",
+     "em": 16
+    },
+    {
+     "som": "impacto",
+     "em": 24
+    }
+   ]
+  },
+  {
+   "batida": "rosca",
+   "de": 90,
+   "ate": 132,
+   "entrada": "zoom",
+   "camadas": [
+    {
+     "elemento": "RoscaDados",
+     "props": {
+      "fatias": [
+       {
+        "rotulo": "Site",
+        "pct": 46,
+        "cor": "laranja"
+       },
+       {
+        "rotulo": "Loja",
+        "pct": 34,
+        "cor": "turquesa"
+       },
+       {
+        "rotulo": "Parceiros",
+        "pct": 20,
+        "cor": "rosa"
+       }
+      ],
+      "centro": 100,
+      "sufixo": "%",
+      "rotuloCentro": "das vendas",
+      "inicio": 0,
+      "y": 640
+     }
+    }
+   ],
+   "socos": [
+    16
+   ],
+   "sons": [
+    {
+     "som": "whoosh-entra",
+     "em": -1
+    },
+    {
+     "som": "pop-cartao",
+     "em": 4
+    },
+    {
+     "som": "pop-cartao",
+     "em": 13
+    },
+    {
+     "som": "pop-cartao",
+     "em": 22
+    }
+   ]
+  },
+  {
+   "batida": "ranking",
+   "de": 132,
+   "ate": 172,
+   "entrada": "esquerda",
+   "camadas": [
+    {
+     "elemento": "RankingBarras",
+     "props": {
+      "titulo": "Canais",
+      "sufixo": "k",
+      "itens": [
+       {
+        "nome": "Instagram",
+        "valor": 84
+       },
+       {
+        "nome": "Email",
+        "valor": 61
+       },
+       {
+        "nome": "Busca",
+        "valor": 47
+       },
+       {
+        "nome": "Indicação",
+        "valor": 22
+       }
+      ],
+      "inicio": 0,
+      "y": 820
+     }
+    }
+   ],
+   "socos": [
+    20
+   ],
+   "sons": [
+    {
+     "som": "swoosh",
+     "em": -1
+    },
+    {
+     "som": "pop-palavra",
+     "em": 4
+    },
+    {
+     "som": "pop-palavra",
+     "em": 9
+    },
+    {
+     "som": "pop-palavra",
+     "em": 14
+    },
+    {
+     "som": "impacto",
+     "em": 22
+    }
+   ]
+  },
+  {
+   "batida": "tendencia",
+   "de": 172,
+   "ate": 208,
+   "entrada": "subir",
+   "camadas": [
+    {
+     "elemento": "LinhaTendencia",
+     "props": {
+      "titulo": "Visitas",
+      "serie": [
+       20,
+       26,
+       24,
+       33,
+       38,
+       36,
+       47,
+       62
+      ],
+      "rotulos": [
+       "",
+       "",
+       "",
+       "",
+       "",
+       "",
+       "",
+       ""
+      ],
+      "etiqueta": "+210%",
+      "inicio": 0,
+      "y": 800,
+      "altura": 560
+     }
+    }
+   ],
+   "socos": [
+    28
+   ],
+   "sons": [
+    {
+     "som": "whoosh-entra",
+     "em": -1
+    },
+    {
+     "som": "pop-cartao",
+     "em": 30
+    },
+    {
+     "som": "impacto",
+     "em": 32
+    }
+   ]
+  },
+  {
+   "batida": "marca",
+   "de": 208,
+   "ate": 240,
+   "entrada": "zoom",
+   "camadas": [
+    {
+     "elemento": "AssinaturaMarca",
+     "props": {
+      "logo": "logo-radar.svg",
+      "nome": "Radar",
+      "detalhe": "Veja o que importa.",
+      "endereco": "radar.exemplo",
+      "inicio": 2,
+      "y": 640
+     }
+    }
+   ],
+   "sons": [
+    {
+     "som": "assinatura",
+     "em": 3
+    },
+    {
+     "som": "clique",
+     "em": 20
+    }
+   ]
+  }
+ ]
+}

package/kits/dashboard-dados/exemplos/roteiro.md

@@ -0,0 +1,20 @@
+# Roteiro de demonstração · Radar (produto fictício)
+
+Pedido: *"um reels de 8 s do Radar, painel de métricas de vendas, mostrando o resultado de outubro. Números grandes e gráficos."*
+
+Sem narração: os cortes seguem a trilha (1 batida = 14.75 quadros).
+
+| # | batida | quadros | na tela | elemento | som |
+|---|---|---|---|---|---|
+| 1 | kpi | 0–44 | "R$ 1,2 mi" receita do mês ▲ 24% | NumeroGigante | subida, whoosh-entra, impacto, pop-palavra |
+| 2 | barras | 44–90 | 6 colunas "Vendas por mês" (out em laranja) | BarrasCrescendo | whoosh-entra, pop-cartao, pop-cartao, pop-cartao, pop-cartao, impacto |
+| 3 | rosca | 90–132 | rosca Site 46% · Loja 34% · Parceiros 20% | RoscaDados | whoosh-entra, pop-cartao, pop-cartao, pop-cartao |
+| 4 | ranking | 132–172 | ranking de canais: Instagram, Email, Busca, Indicação | RankingBarras | swoosh, pop-palavra, pop-palavra, pop-palavra, impacto |
+| 5 | tendencia | 172–208 | linha "Visitas" com etiqueta +210% | LinhaTendencia | whoosh-entra, pop-cartao, impacto |
+| 6 | marca | 208–240 | logo Radar + "Veja o que importa." | AssinaturaMarca | assinatura, clique |
+
+Como a IA chegou nisso:
+1. Cortou o pedido em número, evolução, composição, ranking, tendência e marca.
+2. Um tipo de gráfico por cena, sempre com o dado importante em laranja.
+3. Encaixou os cortes nas batidas de 14,75 quadros.
+4. O `preview.tsx` entrega o plano à `Montagem`.

package/kits/dashboard-dados/preview.tsx

@@ -0,0 +1,12 @@
+// Preview do kit: a demo (8 s) montada SÓ com os elementos do kit, a partir de exemplos/plano.json.
+// O estúdio registra isto como `Kit-dashboard-dados`.
+import React from 'react';
+import {Montagem, Plano} from './elementos';
+import plano from './exemplos/plano.json';
+import logo from './exemplos/logo-radar.svg';
+
+const arquivos: Record<string, string> = {'logo-radar.svg': logo};
+
+const Preview: React.FC = () => <Montagem plano={plano as Plano} arquivos={arquivos} />;
+
+export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 30, Componente: Preview};

package/kits/dashboard-dados/receita.json

@@ -0,0 +1,173 @@
+{
+ "kit": "dashboard-dados",
+ "fps": 30,
+ "batida_trilha_quadros": 14.75,
+ "duracao_video_s": [
+  6,
+  60
+ ],
+ "ordem_sugerida": [
+  "kpi",
+  "barras",
+  "rosca",
+  "ranking",
+  "tendencia",
+  "marca"
+ ],
+ "batidas": [
+  {
+   "nome": "kpi",
+   "obrigatoria": true,
+   "duracao": [
+    40,
+    48
+   ],
+   "elementos": [
+    "NumeroGigante"
+   ],
+   "entrada": [
+    "nenhuma"
+   ],
+   "sons": [
+    "subida",
+    "impacto",
+    "pop-palavra"
+   ],
+   "nota": "o número principal, contando; selo de variação no fim."
+  },
+  {
+   "nome": "barras",
+   "obrigatoria": true,
+   "duracao": [
+    42,
+    52
+   ],
+   "elementos": [
+    "BarrasCrescendo"
+   ],
+   "entrada": [
+    "direita"
+   ],
+   "sons": [
+    "whoosh-entra",
+    "pop-cartao",
+    "impacto"
+   ],
+   "nota": "5–6 colunas; a última (laranja) é a que importa."
+  },
+  {
+   "nome": "rosca",
+   "obrigatoria": false,
+   "duracao": [
+    40,
+    48
+   ],
+   "elementos": [
+    "RoscaDados"
+   ],
+   "entrada": [
+    "zoom"
+   ],
+   "sons": [
+    "whoosh-entra",
+    "pop-cartao"
+   ],
+   "nota": "composição em 3 fatias que somam o total."
+  },
+  {
+   "nome": "ranking",
+   "obrigatoria": false,
+   "duracao": [
+    36,
+    45
+   ],
+   "elementos": [
+    "RankingBarras"
+   ],
+   "entrada": [
+    "esquerda"
+   ],
+   "sons": [
+    "swoosh",
+    "pop-palavra",
+    "impacto"
+   ],
+   "nota": "4 itens, o líder em laranja."
+  },
+  {
+   "nome": "tendencia",
+   "obrigatoria": false,
+   "duracao": [
+    33,
+    45
+   ],
+   "elementos": [
+    "LinhaTendencia"
+   ],
+   "entrada": [
+    "subir"
+   ],
+   "sons": [
+    "whoosh-entra",
+    "pop-cartao",
+    "impacto"
+   ],
+   "nota": "a linha sobe; a etiqueta final diz quanto."
+  },
+  {
+   "nome": "marca",
+   "obrigatoria": true,
+   "duracao": [
+    28,
+    45
+   ],
+   "elementos": [
+    "AssinaturaMarca"
+   ],
+   "entrada": [
+    "zoom"
+   ],
+   "sons": [
+    "assinatura",
+    "clique"
+   ],
+   "nota": "sempre a última."
+  }
+ ],
+ "transicoes": [
+  {
+   "nome": "nenhuma",
+   "quadros": 0,
+   "como": "gancho: o número entra sozinho"
+  },
+  {
+   "nome": "direita",
+   "quadros": 12,
+   "como": "entra 760 px da direita"
+  },
+  {
+   "nome": "esquerda",
+   "quadros": 12,
+   "como": "entra 760 px da esquerda"
+  },
+  {
+   "nome": "zoom",
+   "quadros": 12,
+   "como": "entra de 1,9x para 1 com desfoque"
+  },
+  {
+   "nome": "subir",
+   "quadros": 12,
+   "como": "entra 260 px de baixo; a anterior sai 220 px para cima"
+  }
+ ],
+ "camera": {
+  "deriva": "sempre",
+  "socos": "cada impacto de número"
+ },
+ "trilha": {
+  "arquivo": "assets/trilha/trilha.mp3",
+  "volume": 0.5,
+  "com_narracao": 0.25
+ }
+}

package/kits/dashboard-dados/regras/area-segura.md

@@ -0,0 +1,13 @@
+# Área segura
+9:16 em 1080×1920: texto em **y 168–1330** e **x 96–984** (margens de 96 px).
+
+| elemento | y de referência (centro) | tamanho do herói |
+|---|---|---|
+| NumeroGigante | 760 | 380 px de altura de dígito, 888 de largura |
+| BarrasCrescendo | 820 (título 130 px acima) | 888 × 600 px |
+| RoscaDados | 640 (legenda a partir de y 1050) | anel de 610 px + legenda de 3 × 84 px |
+| RankingBarras | 820 | 4 × 190 px, 888 de largura |
+| LinhaTendencia | 800 (título 130 px acima) | 888 × 560 px |
+| AssinaturaMarca | 640 | logo 240 px, nome 260 px |
+
+Um herói por cena. Espaço vazio: 35–45% do quadro.

package/kits/dashboard-dados/regras/cor.md

@@ -0,0 +1,17 @@
+# Cor
+| token | hex | uso |
+|---|---|---|
+| `fundo` | `#0C1224` | chão |
+| `topo` | `#16203F` | topo do degradê |
+| `painel` | `#18223F` | trilho da rosca, logo |
+| `linha` | `#2A3558` | eixos e grade |
+| `texto` | `#F2F5FF` | números e títulos |
+| `mute` | `#8E9BC0` | rótulos |
+| `laranja` | `#FF8A3D` | **o dado que importa** (barra, fatia, linha, ponto, fio) |
+| `turquesa` | `#35D6C0` | séries secundárias, selo de variação positiva |
+| `rosa` | `#FF5C8A` | 3ª série |
+| `amarelo` | `#FFD23F` | 4ª série (raro) |
+
+- Cores de dado **chapadas** (sem degradê), exceto a área sob a linha (laranja 40% → 0).
+- Fundo: `linear-gradient(180deg, #16203F 0%, #0C1224 70%)`; eixos de 2 px a 35%; luz fria `rgba(120,150,255,0.14)` no topo.
+- O cliente troca as 4 cores de dado; fundo e texto ficam.

package/kits/dashboard-dados/regras/movimento.md

@@ -0,0 +1,17 @@
+# Movimento
+Curva padrão `cubic-bezier(.2,.8,.2,1)` (`e5`); crescimento de barras com overshoot `eb` (c1 = 2,2).
+
+| movimento | quadros | valores |
+|---|---|---|
+| KPI conta | 26 | de 0 ao valor em `e5`, começa 4 quadros após a entrada |
+| selo de variação | 12 | scale 0 → 1 com overshoot |
+| coluna cresce | 20 (+4 entre colunas) | altura 0 → valor, overshoot de ~10% |
+| linha de base | 14 | cresce da esquerda |
+| rosca | 20 por fatia (+9 entre) | cada arco varre em `e5`; o anel gira −120° → 0 em 40 quadros |
+| barra do ranking | 22 (+5 entre) | largura 0 → valor com overshoot; número conta junto |
+| linha de tendência | 30 | clip da esquerda p/ direita; pontos estalam em 12 quadros |
+| etiqueta final | 12 | scale 0 → 1 com overshoot a partir do ponto |
+| entrada de cena | 12 | zoom 1,9x / lateral 760 px / subir 260 px com desfoque 16 px |
+| eixos do fundo | contínua | sobem 0,8 px/quadro |
+| câmera | contínua | zoom 1,025 + 0,0004/quadro, deriva 10×8 px, soco +0,025 por batida |
+| respiro | 8–14 quadros | depois do último número assentar, nada novo entra |

package/kits/dashboard-dados/regras/ritmo.md

@@ -0,0 +1,14 @@
+# Ritmo
+- 1 batida = **14,75 quadros** (118 bpm). Cenas de 1,2 a 1,6 s (36–48 quadros).
+- Leitura: um KPI = 30 quadros; 6 colunas = 40; ranking de 4 = 38.
+
+| batida | duração s | quadros |
+|---|---|---|
+| kpi | 1,3–1,6 | 40–48 |
+| barras | 1,4–1,7 | 42–52 |
+| rosca | 1,3–1,6 | 40–48 |
+| ranking | 1,2–1,5 | 36–45 |
+| tendencia | 1,1–1,5 | 33–45 |
+| marca | 0,9–1,5 | 28–45 |
+
+Demo 8 s = 240 quadros = 6 cenas: 0, 44, 90, 132, 172, 208.

package/kits/dashboard-dados/regras/som.md

@@ -0,0 +1,18 @@
+# Som
+- Trilha: `assets/trilha/trilha.mp3` (9 s, 118 bpm, preset tech-bright, tom G), volume **0,5**, fade nos últimos **20 quadros**.
+- Com narração: trilha a **0,25**, efeitos a 70%. Pacote de efeitos: MotionCraft `soft-pop`.
+
+| som | volume | quando |
+|---|---|---|
+| `whoosh-entra` | 0,9 | entrada de cena (−1 quadro) |
+| `swoosh` | 1,0 | movimento lateral grande |
+| `whoosh-sai` | 0,8 | saída grande |
+| `pop-palavra` | 1,0 | palavra-chave que entra |
+| `pop-cartao` | 0,9 | peça que pousa |
+| `impacto` | 0,85 | clímax da cena |
+| `subida` | 0,7 | 1,2 s antes de um impacto (sempre resolve nele) |
+| `assinatura` | 0,9 | revelação da marca |
+| `clique` | 0,8 | endereço/CTA aparece |
+
+- `pop-cartao` em cada coluna/fatia que assenta; `impacto` quando o número final bate; `subida` só antes do KPI de abertura.
+- Máx. **3 sons/s**; nunca o mesmo arquivo duas vezes seguidas. Alvo **−14 LUFS**, pico −1,5 dBTP.

package/kits/dashboard-dados/regras/tipografia.md

@@ -0,0 +1,16 @@
+# Tipografia
+- Fontes: **Montserrat** 700–800 (números, títulos, nomes) e **IBM Plex Mono** 500 (rótulos, eixos, endereço). Registradas como `DD Montserrat` e `DD IBM Plex Mono`.
+- Tudo alinhado à esquerda (x = 96), exceto a rosca (centro) e rótulos de eixo (centro da coluna).
+
+| papel | tamanho px | peso | tracking | máx. caracteres |
+|---|---|---|---|---|
+| KPI gigante | 380 (encolhe até 888) | 800 | −0,05 em | 8 |
+| título do gráfico | 64 | 800 | −0,03 em | 20 |
+| valor sobre a coluna | 44 | 800 | — | 4 |
+| número do centro da rosca | 150 | 800 | −0,05 em | 4 |
+| nome na barra do ranking | 64 (encolhe até 500) | 800 | −0,03 em | 12 |
+| valor do ranking | 60 | 800 | — | 5 |
+| etiqueta de ponto | 60 | 800 | — | 6 |
+| legenda da rosca | 48 | 700 | — | 14 |
+| rótulo mono / eixo | 28–38, +0,08–0,12 em, caixa alta | 500 | — | 20 |
+| nome da marca | 260 | 800 | −0,05 em | 7 |

package/kits/depoimento/SKILL.md

@@ -0,0 +1,54 @@
+---
+slug: depoimento
+nome: Depoimento
+descricao: rosa-pétala com estrelas gigantes de contorno, cartões creme com rosto, estrelas amarelas que acendem e frase em itálico com marca-texto
+familia: Redes sociais
+versao: 1
+quando:
+  - "vídeo de depoimento de cliente com foto, nome e estrelas"
+  - "reels de prova social: nota média, avaliações e clientes felizes"
+  - "anúncio com 3 depoimentos curtos em sequência"
+  - "mostrar o que o pessoal está falando do meu produto ou serviço"
+nao_serve:
+  - "depoimento em vídeo falado (use corte-podcast, que tem legenda falada)"
+  - "tom sério, corporativo ou escuro (use luxo ou saas)"
+---
+
+# Depoimento
+
+Prova social como um monte de cartões na mesa. O chão é **rosa-pétala** com **estrelas gigantes só de contorno**
+girando atrás. O cartão é **creme, canto 64 px, sombra longa e macia**, boiando e inclinado ±3°: rosto, nome,
+cargo, **cinco estrelas amarelas que acendem uma a uma** e a frase em **Newsreader itálico** com a palavra-chave
+em marca-texto amarelo. Entre os cartões entram o **número da nota gigante** (que conta de 0 até 4,9), uma pilha
+de depoimentos que voam pra direita e uma fileira de rostos com um contador "+12 mil". O rosto é um **busto
+ilustrado** (nunca foto de banco); com a foto real do cliente, passe `foto`.
+
+## Como montar um vídeo com este kit
+
+1. **Junte os dados**: nota média, total de avaliações, 2 a 4 depoimentos (frase de até 85 caracteres, nome, cargo) e o nome do que está sendo avaliado.
+2. **Escolha as batidas** em `receita.json` (gancho → depoimento → pilha → depoimento → prova). Uma cena de 42–52 quadros por depoimento.
+3. **Escreva o plano** (`plano.json`, formato de `exemplos/plano.json`): marque com `*asteriscos*` a palavra-chave de cada frase.
+4. **Renderize** com `<Montagem plano={...} arquivos={...} />`.
+5. **Confira** contra `regras/`: texto em y 168–1330, estrelas acendendo, nenhum cartão parado, só uma palavra com marca-texto por frase.
+
+## Elementos
+
+| elemento | o que faz | batidas |
+|---|---|---|
+| `NotaGigante` | número enorme que conta até a nota, estrelas e total de avaliações correndo | gancho |
+| `CartaoDepoimento` | cartão com rosto, nome, cargo, estrelas e frase; entra de baixo/esquerda/direita inclinado | depoimento |
+| `PilhaCartoes` | 2–4 cartões empilhados; o de cima voa pra direita a cada 14–16 quadros | pilha |
+| `Estrelas` | fileira de estrelas grandes que acendem (herói quando sozinha) | gancho, prova |
+| `FaixaAvatares` | rostos sobrepostos + bolinha "+N mil" que conta + rótulo | prova |
+| `SeloVerificado` | pílula menta com check que se desenha | prova |
+| `Avatar` | busto ilustrado (5 estilos de cabelo, cores por props) ou foto em círculo | dentro dos outros |
+| `Fundo`, `Camera`, `Cena` | rosa com estrelas de contorno, câmera, troca por revelação | todas |
+| `Efeito`, `Trilha` | sons e trilha do kit | todas |
+
+## Proibido
+
+- Depoimento inventado que pareça de pessoa real em anúncio de verdade: na demo é fictício; no uso real, só frase que o cliente disse.
+- Foto de banco com cara de banco e rosto gerado por IA como "cliente". Use `foto` real ou o busto ilustrado.
+- Fundo escuro, degradê roxo-azul, brilho em letra, mais de 5 estrelas, estrela que não acende.
+- Cartão parado ou sem inclinação; sombra dura (aqui a sombra é longa e macia).
+- Mais de uma palavra em marca-texto por frase; texto fora da área segura (168–1330 px).