primocode 10.17.1 → 11.0.0

package/materiais/saas-linear/pecas.json

@@ -0,0 +1,590 @@
+{
+  "estilo": "saas-linear",
+  "nome": "SaaS · produto em acao",
+  "versao": 1,
+  "fps": 30,
+  "pecas": [
+    {
+      "nome": "Monitor",
+      "categoria": "formas",
+      "tipo": "componente",
+      "arquivo": "formas/Monitor.tsx",
+      "descricao": "Aparelho com borda fina e pé que segura as camadas dentro da tela 1500x940 (envolve as camadas de UI).",
+      "params": [
+        "semAparelho?",
+        "borda?",
+        "children"
+      ],
+      "duracao": null,
+      "tags": [
+        "moldura",
+        "3d",
+        "produto"
+      ]
+    },
+    {
+      "nome": "Agenda",
+      "categoria": "formas",
+      "tipo": "componente",
+      "arquivo": "formas/Agenda.tsx",
+      "descricao": "Painel de semana cujos blocos coloridos crescem um a um, com check opcional.",
+      "params": [
+        "titulo",
+        "dias",
+        "blocos",
+        "inicio?",
+        "intervalo?",
+        "marcar?",
+        "marcarEm?",
+        "x?",
+        "y?",
+        "largura?",
+        "altura?"
+      ],
+      "duracao": [
+        30,
+        90
+      ],
+      "tags": [
+        "ui",
+        "lista",
+        "dados"
+      ]
+    },
+    {
+      "nome": "CaixaPrompt",
+      "categoria": "formas",
+      "tipo": "componente",
+      "arquivo": "formas/CaixaPrompt.tsx",
+      "descricao": "Caixa de pedido branca com texto digitado letra a letra, botao + e botao de enviar.",
+      "params": [
+        "placeholder",
+        "digitar?",
+        "digitarEm?",
+        "atalhos?",
+        "inicio?",
+        "apertarMais?",
+        "x?",
+        "y?",
+        "largura?"
+      ],
+      "duracao": [
+        40,
+        120
+      ],
+      "tags": [
+        "ui",
+        "texto",
+        "ia"
+      ]
+    },
+    {
+      "nome": "CartoesIntegracao",
+      "categoria": "formas",
+      "tipo": "componente",
+      "arquivo": "formas/CartoesIntegracao.tsx",
+      "descricao": "Fileira de cartoes de conector que sobem em sequencia e ligam a chave (desconectado para conectado).",
+      "params": [
+        "cartoes",
+        "inicio?",
+        "intervalo?",
+        "foco?",
+        "x?",
+        "y?",
+        "largura?"
+      ],
+      "duracao": [
+        36,
+        90
+      ],
+      "tags": [
+        "ui",
+        "lista",
+        "integracao"
+      ]
+    },
+    {
+      "nome": "Menu",
+      "categoria": "formas",
+      "tipo": "componente",
+      "arquivo": "formas/Menu.tsx",
+      "descricao": "Popover de menu com icones e faixa de selecao que desce pelos itens.",
+      "params": [
+        "itens",
+        "inicio?",
+        "passar?",
+        "fechar?",
+        "x?",
+        "y?",
+        "largura?"
+      ],
+      "duracao": [
+        30,
+        80
+      ],
+      "tags": [
+        "ui",
+        "lista",
+        "interacao"
+      ]
+    },
+    {
+      "nome": "Cursor",
+      "categoria": "formas",
+      "tipo": "componente",
+      "arquivo": "formas/Cursor.tsx",
+      "descricao": "Mao/cursor que viaja entre pontos e clica soltando um anel; todo clique deve causar algo.",
+      "params": [
+        "pontos",
+        "cliques?",
+        "inicio?",
+        "fim?",
+        "mao?",
+        "tamanho?"
+      ],
+      "duracao": [
+        20,
+        150
+      ],
+      "tags": [
+        "interacao",
+        "guia"
+      ]
+    },
+    {
+      "nome": "Fundo",
+      "categoria": "texturas",
+      "tipo": "componente",
+      "arquivo": "texturas/Fundo.tsx",
+      "descricao": "Parede quente com luz lateral que respira e mesa; com claro vira o creme da interface.",
+      "params": [
+        "claro?"
+      ],
+      "duracao": null,
+      "tags": [
+        "fundo",
+        "luz"
+      ]
+    },
+    {
+      "nome": "Particulas",
+      "categoria": "texturas",
+      "tipo": "componente",
+      "arquivo": "texturas/Particulas.tsx",
+      "descricao": "Camada de pontos e tracos flutuando em 3 profundidades (movimento de fundo constante).",
+      "params": [
+        "quantidade?",
+        "cor?",
+        "semente?",
+        "velocidade?",
+        "opacidade?"
+      ],
+      "duracao": null,
+      "tags": [
+        "fundo",
+        "movimento",
+        "densidade"
+      ]
+    },
+    {
+      "nome": "Cena",
+      "categoria": "transicoes",
+      "tipo": "componente",
+      "arquivo": "transicoes/Cena.tsx",
+      "descricao": "Janela de tempo com entrada suave/subir/corte e saida com desfoque que cruza 10 quadros com a proxima.",
+      "params": [
+        "de",
+        "ate",
+        "entrada?",
+        "ultima?",
+        "children"
+      ],
+      "duracao": [
+        24,
+        150
+      ],
+      "tags": [
+        "corte",
+        "troca",
+        "tempo"
+      ]
+    },
+    {
+      "nome": "CorteImpacto",
+      "categoria": "transicoes",
+      "tipo": "componente",
+      "arquivo": "transicoes/CorteImpacto.tsx",
+      "descricao": "Soco de corte: clarao, tremida e zoom-pop que decaem em ~10 quadros.",
+      "params": [
+        "em",
+        "forca?",
+        "clarao?",
+        "children"
+      ],
+      "duracao": [
+        10,
+        14
+      ],
+      "tags": [
+        "corte",
+        "impacto",
+        "energia"
+      ]
+    },
+    {
+      "nome": "FraseSerifa",
+      "categoria": "tipografia",
+      "tipo": "componente",
+      "arquivo": "tipografia/FraseSerifa.tsx",
+      "descricao": "Frase em serifa que nasce palavra a palavra (desfoque para nitido), *palavra* em acento.",
+      "params": [
+        "texto",
+        "x?",
+        "y?",
+        "tamanho?",
+        "largura?",
+        "inicio?",
+        "intervalo?",
+        "sair?"
+      ],
+      "duracao": [
+        30,
+        90
+      ],
+      "tags": [
+        "texto",
+        "serifa"
+      ]
+    },
+    {
+      "nome": "Saudacao",
+      "categoria": "tipografia",
+      "tipo": "componente",
+      "arquivo": "tipografia/Saudacao.tsx",
+      "descricao": "Saudacao em serifa grande com a flor que abre antes das palavras.",
+      "params": [
+        "texto",
+        "x?",
+        "y?",
+        "tamanho?",
+        "inicio?",
+        "intervalo?",
+        "marca?",
+        "marcaSrc?"
+      ],
+      "duracao": [
+        40,
+        100
+      ],
+      "tags": [
+        "texto",
+        "abertura"
+      ]
+    },
+    {
+      "nome": "Marca",
+      "categoria": "tipografia",
+      "tipo": "componente",
+      "arquivo": "tipografia/Marca.tsx",
+      "descricao": "Flor de quatro petalas que gira e abre em 16 quadros; aceita logo do cliente.",
+      "params": [
+        "tamanho?",
+        "cor?",
+        "inicio?",
+        "src?",
+        "girar?"
+      ],
+      "duracao": [
+        16,
+        60
+      ],
+      "tags": [
+        "logo",
+        "sinal"
+      ]
+    },
+    {
+      "nome": "MarcaFinal",
+      "categoria": "tipografia",
+      "tipo": "componente",
+      "arquivo": "tipografia/MarcaFinal.tsx",
+      "descricao": "Fecho: flor + nome revelado por mascara, com linha de apoio.",
+      "params": [
+        "nome",
+        "apoio?",
+        "x?",
+        "y?",
+        "tamanho?",
+        "inicio?",
+        "marcaSrc?"
+      ],
+      "duracao": [
+        36,
+        90
+      ],
+      "tags": [
+        "logo",
+        "fecho"
+      ]
+    },
+    {
+      "nome": "Camera",
+      "categoria": "camera",
+      "tipo": "componente",
+      "arquivo": "camera/Camera.tsx",
+      "descricao": "Camera 3D com perspectiva: chaves {em,z,x,y} levam do plano aberto (z0) ao fechado (z1) e alem; deriva constante.",
+      "params": [
+        "chaves?",
+        "children"
+      ],
+      "duracao": null,
+      "tags": [
+        "3d",
+        "camera",
+        "movimento"
+      ]
+    },
+    {
+      "nome": "whoosh-entra",
+      "categoria": "sons",
+      "tipo": "audio",
+      "arquivo": "sons/whoosh-entra.mp3",
+      "descricao": "Passagem de ar que entra (camera aproximando, cena nascendo).",
+      "params": [
+        "em",
+        "volume?"
+      ],
+      "duracao": [
+        30,
+        30
+      ],
+      "volumeSugerido": 0.9,
+      "tags": [
+        "sfx",
+        "entrada"
+      ]
+    },
+    {
+      "nome": "whoosh-sai",
+      "categoria": "sons",
+      "tipo": "audio",
+      "arquivo": "sons/whoosh-sai.mp3",
+      "descricao": "Passagem de ar que sai (troca de tela).",
+      "params": [
+        "em",
+        "volume?"
+      ],
+      "duracao": [
+        30,
+        30
+      ],
+      "volumeSugerido": 0.8,
+      "tags": [
+        "sfx",
+        "saida"
+      ]
+    },
+    {
+      "nome": "swoosh",
+      "categoria": "sons",
+      "tipo": "audio",
+      "arquivo": "sons/swoosh.mp3",
+      "descricao": "Varrida curta para menu abrindo ou painel entrando.",
+      "params": [
+        "em",
+        "volume?"
+      ],
+      "duracao": [
+        30,
+        30
+      ],
+      "volumeSugerido": 1,
+      "tags": [
+        "sfx",
+        "entrada"
+      ]
+    },
+    {
+      "nome": "pop-palavra",
+      "categoria": "sons",
+      "tipo": "audio",
+      "arquivo": "sons/pop-palavra.mp3",
+      "descricao": "Estalo leve para palavra ou frase comecando, check.",
+      "params": [
+        "em",
+        "volume?"
+      ],
+      "duracao": [
+        18,
+        18
+      ],
+      "volumeSugerido": 1,
+      "tags": [
+        "sfx",
+        "texto"
+      ]
+    },
+    {
+      "nome": "pop-cartao",
+      "categoria": "sons",
+      "tipo": "audio",
+      "arquivo": "sons/pop-cartao.mp3",
+      "descricao": "Estalo de cartao, chave ligando, bloco enchendo.",
+      "params": [
+        "em",
+        "volume?"
+      ],
+      "duracao": [
+        21,
+        21
+      ],
+      "volumeSugerido": 0.9,
+      "tags": [
+        "sfx",
+        "ui"
+      ]
+    },
+    {
+      "nome": "clique",
+      "categoria": "sons",
+      "tipo": "audio",
+      "arquivo": "sons/clique.mp3",
+      "descricao": "Clique seco de botao, 1 quadro antes do aperto do cursor.",
+      "params": [
+        "em",
+        "volume?"
+      ],
+      "duracao": [
+        15,
+        15
+      ],
+      "volumeSugerido": 0.8,
+      "tags": [
+        "sfx",
+        "interacao"
+      ]
+    },
+    {
+      "nome": "impacto",
+      "categoria": "sons",
+      "tipo": "audio",
+      "arquivo": "sons/impacto.mp3",
+      "descricao": "Batida grave de climax; casar com CorteImpacto.",
+      "params": [
+        "em",
+        "volume?"
+      ],
+      "duracao": [
+        42,
+        42
+      ],
+      "volumeSugerido": 0.85,
+      "tags": [
+        "sfx",
+        "impacto"
+      ]
+    },
+    {
+      "nome": "subida",
+      "categoria": "sons",
+      "tipo": "audio",
+      "arquivo": "sons/subida.mp3",
+      "descricao": "Riser que cresce ate o fecho.",
+      "params": [
+        "em",
+        "volume?"
+      ],
+      "duracao": [
+        45,
+        45
+      ],
+      "volumeSugerido": 0.7,
+      "tags": [
+        "sfx",
+        "tensao"
+      ]
+    },
+    {
+      "nome": "assinatura",
+      "categoria": "sons",
+      "tipo": "audio",
+      "arquivo": "sons/assinatura.mp3",
+      "descricao": "Sting de logo para o nome da marca revelando.",
+      "params": [
+        "em",
+        "volume?"
+      ],
+      "duracao": [
+        66,
+        66
+      ],
+      "volumeSugerido": 0.9,
+      "tags": [
+        "sfx",
+        "marca"
+      ]
+    },
+    {
+      "nome": "trilha",
+      "categoria": "sons",
+      "tipo": "audio",
+      "arquivo": "sons/trilha.mp3",
+      "descricao": "Trilha de 9 s a 100 bpm (1 batida = 18 quadros), quente; repetir em laco para videos longos.",
+      "params": [
+        "volume?",
+        "saida?"
+      ],
+      "duracao": [
+        270,
+        270
+      ],
+      "bpm": 100,
+      "tags": [
+        "trilha",
+        "musica"
+      ]
+    },
+    {
+      "nome": "Som",
+      "categoria": "sons",
+      "tipo": "componente",
+      "arquivo": "sons/Som.tsx",
+      "descricao": "Componentes Efeito (um som no quadro em) e Trilha (musica com fade de saida) que tocam os audios acima.",
+      "params": [
+        "som",
+        "em",
+        "volume?"
+      ],
+      "duracao": null,
+      "tags": [
+        "audio",
+        "codigo"
+      ]
+    },
+    {
+      "nome": "paleta",
+      "categoria": "paleta",
+      "tipo": "dados",
+      "arquivo": "paleta.json",
+      "descricao": "Cores, sombras, area segura, curvas e medidas do estilo.",
+      "params": [],
+      "duracao": null,
+      "tags": [
+        "cor"
+      ]
+    },
+    {
+      "nome": "base",
+      "categoria": "paleta",
+      "tipo": "componente",
+      "arquivo": "base.ts",
+      "descricao": "Constantes e curvas de easing (e3, e4, eb, seg, lerp), fontes e medidas da tela; todas as pecas importam daqui.",
+      "params": [],
+      "duracao": null,
+      "tags": [
+        "easing",
+        "tokens"
+      ]
+    }
+  ]
+}

package/materiais/saas-linear/regras.md

@@ -0,0 +1,40 @@
+# Regras do estilo saas-linear (produto em ação)
+
+Estas regras valem para QUEM MONTA. Não existe vídeo pronto aqui: só peças (`pecas.json`). Cada cena é escrita do zero.
+
+## Identidade (não negociável)
+- Fundo: parede quente `#3B1E19` + luz `#6A3426`; tela do produto creme `#F4F1EA`; acento coral `#D46F4D` só na flor e no botão enviar; azul `#3D7BF0` só em "ligado"/clique.
+- Serifa Newsreader só em saudação, frase e nome; Inter em toda a interface. Frase em minúscula normal, nunca caixa alta.
+- Área segura: texto entre y 168-1330 e x 80-1000 do vídeo. Na tela do monitor: x 290-1210. Câmera com zoom pode cortar borda, mas alvo do clique e palavra lida ficam inteiros.
+- Conteúdo: nunca logo de marca real; o cliente troca acento, nome e logo (`marcaSrc`).
+
+## Movimento (régua: extravagante; liso e calmo é reprovado)
+- Easing: `e4` (saída rápida, pouso longo) como padrão; `e3` em câmera e cursor; `eb` (overshoot ~4%) em cartão e bloco.
+- A câmera nunca para: sempre ao menos 2 chaves com mudança de `z` e de `x/y`, e uma chave a cada cena. Em cada corte, um `CorteImpacto`.
+- Toda cena tem fundo vivo (`Particulas` + `Fundo`), pelo menos 1 herói e 2 apoios em movimento.
+- Entrada de elemento: 12-18 quadros. Saída: metade da entrada. Stagger entre itens: 2-5 quadros.
+- Pausa de leitura: frase assentada >= 8 quadros antes de sair; saudação >= 12.
+- Cursor: >= 12 quadros de viagem entre alvos; >= 6 parado antes do clique; clique 2 quadros antes do efeito.
+
+## Ritmo
+- Trilha 100 bpm: 1 batida = 18 quadros. Cortes nas batidas (múltiplos de 18) ou na voz.
+- Cena curta: 36-90 quadros. Vídeo de 15 s tem 6-9 cenas.
+
+## Som (camadas)
+- Trilha sempre, volume 0,45, fade de saída 20 quadros.
+- SFX em TODO corte (1-2 quadros antes do visual) e em todo clique, pop de cartão e entrada de texto.
+- No mínimo 2 camadas de SFX por corte (ex.: `whoosh-sai` + `impacto`, ou `swoosh` + `pop-cartao`). Máx. 6 efeitos por segundo. Nunca o mesmo arquivo duas vezes seguidas no mesmo quadro.
+
+## Densidade mínima (o auto-conferir cobra isto)
+| medida | mínimo |
+|---|---|
+| camadas visuais simultâneas por cena | 4 (fundo, partículas, herói, apoio) |
+| elementos em movimento por segundo | 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 sem som quando entra com movimento grande.

package/materiais/saas-linear/sons/Som.tsx

@@ -0,0 +1,39 @@
+// Som: efeitos e trilha do kit, sintetizados no MotionCraft (ver assets/ASSETS.md).
+// Regra: um som por movimento que importa, 1 a 2 quadros ANTES do visual.
+import React from 'react';
+import {Audio, Sequence, interpolate, useVideoConfig} from 'remotion';
+import whooshEntra from './whoosh-entra.mp3';
+import whooshSai from './whoosh-sai.mp3';
+import swoosh from './swoosh.mp3';
+import popPalavra from './pop-palavra.mp3';
+import popCartao from './pop-cartao.mp3';
+import clique from './clique.mp3';
+import impacto from './impacto.mp3';
+import subida from './subida.mp3';
+import assinatura from './assinatura.mp3';
+import trilha from './trilha.mp3';
+
+export const SONS = {
+  'whoosh-entra': whooshEntra, 'whoosh-sai': whooshSai, swoosh, 'pop-palavra': popPalavra, 'pop-cartao': popCartao,
+  clique, impacto, subida, assinatura,
+} as const;
+export type NomeSom = keyof typeof SONS;
+
+// volume de cada efeito (0..1) já calibrado contra a trilha a 0,5
+const VOLUME: Record<NomeSom, number> = {
+  'whoosh-entra': 0.9, 'whoosh-sai': 0.8, swoosh: 1, 'pop-palavra': 1, 'pop-cartao': 0.9, clique: 0.8, impacto: 0.85, subida: 0.7, assinatura: 0.9,
+};
+
+export type EfeitoProps = {som: NomeSom; em: number; volume?: number};
+/** um efeito no quadro `em` (absoluto, ou relativo à Cena se estiver dentro de uma) */
+export const Efeito: React.FC<EfeitoProps> = ({som, em, volume}) =>
+  <Sequence from={Math.max(0, Math.round(em))} durationInFrames={90} layout="none">
+    <Audio src={SONS[som]} volume={volume ?? VOLUME[som]} />
+  </Sequence>;
+
+export type TrilhaProps = {volume?: number; /** quadros de fade no fim */ saida?: number};
+/** a trilha do kit, do quadro 0 ao fim, com fade de saída */
+export const Trilha: React.FC<TrilhaProps> = ({volume = 0.5, saida = 20}) => {
+  const {durationInFrames} = useVideoConfig();
+  return <Audio src={trilha} volume={(f) => volume * interpolate(f, [durationInFrames - saida, durationInFrames], [1, 0], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'})} />;
+};