> **Atualização (r2):** o formato abaixo (elementos/, Montagem, receita, exemplos) saiu. Hoje cada estilo é `materiais//` > (peças soltas + `pecas.json` + `paleta.json` + `regras.md`; ver `docs/rebuild/motion-materiais-arquitetura.md`) e a pasta > `kits//` guarda só `SKILL.md` (nome, família, quando serve) e `capa.jpg` para a galeria. # KITS.md · o formato de um kit de estilo de motion Um kit **não é template**. É uma pasta que a IA carrega como uma skill: dentro tem a skill (como o estilo pensa), as regras em números, os elementos (componentes Remotion com props), os assets e uma receita de batidas. A IA monta o motion a partir disso e escreve o roteiro. **O motion nunca vem pronto.** O kit de referência é `kits/apple-tipografico/`. Na dúvida, copie a forma dele. ## 1. Pasta ``` kits// SKILL.md frontmatter + o que é o estilo, como montar, o que é proibido regras/ 6 MDs curtos, só números: tipografia · cor · movimento · som · ritmo · area-segura elementos/ componentes Remotion (.tsx) com props + base.ts + Montagem.tsx + index.ts assets/ fontes (OFL/Apache), sons (CC0 ou sintetizados), texturas pequenas + ASSETS.md receita.json as batidas que o estilo aceita, duração, elementos de cada batida, transições exemplos/ roteiro.md + plano.json (como a IA montou a demo) + o conteúdo fictício da demo preview.tsx a demo: `export const preview = {duracaoEmQuadros, quadroCapa, Componente}` capa.jpg gerado por scripts/render-kit.mjs (540×960) preview.mp4 gerado por scripts/render-kit.mjs (540×960, ≤ 2 MB, h264 + AAC) ``` `` é o do `CATALOGO.md` (ex.: `saas-linear`). Nada fora dessa pasta é do kit. ## 2. SKILL.md ```yaml --- slug: saas-linear nome: SaaS Linear # igual ao CATALOGO.md descricao: fundo grafite, formas de interface nítidas, luz suave, câmera lenta em perspectiva familia: SaaS e tecnologia # exatamente uma das 7 abaixo versao: 1 # suba 1 a cada preview novo que o dono precisa rever quando: # 3+ pedidos reais em que o kit serve (frases do usuário) - "vídeo de lançamento de SaaS" - "demo de produto com interface" - "anúncio B2B premium" nao_serve: # opcional: quando mandar pra outro kit - "vídeo divertido ou retrô" --- ``` Famílias (iguais às seções do CATALOGO.md): `SaaS e tecnologia` · `Tipografia em movimento` · `Retrô` · `Feito à mão` · `3D e abstrato` · `Redes sociais` · `Marca e evento`. Corpo, nesta ordem: **o que é o estilo** (1 parágrafo, concreto), **como montar um vídeo** (passos: cortar o roteiro em frases → escolher batidas na receita → escrever o plano → renderizar → conferir), **tabela de elementos** (elemento · o que faz · batidas), **proibido** (lista curta e específica). ## 3. regras/ Seis arquivos, curtos, com **números e não adjetivos**: px, hex, curvas (`cubic-bezier` ou fórmula), quadros, volumes, LUFS. Tela de referência 1080×1920, 30 fps. | arquivo | tem que ter | |---|---| | `tipografia.md` | fontes e pesos, tabela papel → tamanho px → máx. caracteres, tracking, line-height, caixa | | `cor.md` | tabela token → hex → uso, degradês exatos, sombras, o que o cliente pode trocar | | `movimento.md` | curva padrão, tabela movimento → quadros → valores (entrada, saída, câmera, cada elemento) | | `som.md` | trilha (arquivo, volume, fade), tabela som → volume → quando, máx. sons/s, alvo −14 LUFS | | `ritmo.md` | bpm/batida em quadros, tabela batida → duração s → quadros, tempo mínimo de leitura | | `area-segura.md` | limites (padrão 9:16: y 168–1330, x 80–1000), y de referência de cada elemento | ## 4. elementos/ - **Um componente por arquivo**, nome em PascalCase PT-BR (`TituloGigante.tsx`, `CartaoFoto.tsx`). Mínimo **5** elementos visuais além de `Fundo`/`Camera`/`Cena`. - **Tudo vem por props**: texto, imagem (`src` como URL), cores de destaque, tempo (`inicio`, `fim`, `intervalo` em quadros). **Nenhum texto de demo fixo** dentro de um elemento. - Tempo é **relativo à cena**: os elementos usam `useCurrentFrame()` dentro de `` (que é uma ``), e a duração da cena vem de `useDuracaoCena()`. - `base.ts`: tokens (cores, fonte, área segura, curvas, `BATIDA`) e o carregamento das fontes com `delayRender`. **Registre a fonte com prefixo do kit** (`"AT Inter"`, `"SL Geist"`…) pra não colidir com outro kit no mesmo estúdio, e proteja com uma flag em `globalThis` pra carregar uma vez só. - Texto que pode crescer (copy do cliente) **encolhe sozinho** pra caber na largura útil (veja `caber()` em `apple-tipografico/elementos/base.ts`). Nunca palavra cortada. - `Som.tsx`: `Efeito {som, em, volume}` e `Trilha {volume}`; os sons são importados de `../assets/`. - `Montagem.tsx`: recebe um `plano` (formato da seção 6) e um mapa `arquivos` (nome → URL importada) e monta `Fundo + Camera + Cena[] + sons + trilha`. Não decide estética, só executa o plano. - `index.ts`: exporta tudo. - **Imports permitidos**: arquivos da própria pasta do kit, `react`, `remotion`, `@remotion/*` que já estão no `package.json`. Nada de `src/`, de outro kit ou de pacote novo. Asset entra por `import` (`import url from '../assets/sons/pop.mp3'`): o webpack do Remotion devolve a URL. Não existe `public/`. ## 5. assets/ - Fontes: **só OFL ou Apache**, com o texto da licença ao lado (`OFL-.txt`). woff2, subset latino. - Sons: **CC0 ou sintetizados**. Caminho fácil: o MotionCraft sintetiza tudo sem samples: `node ~/www/pg/apps/primocode-motioncraft/vendor/motioncraft/scripts/motioncraft.mjs sfx make --cues c.json --duration 2.5 --pack --out /tmp/x.wav` e `music make` para a trilha (`music presets` lista os presets; em `music make`, `--out` é uma **pasta** e é obrigatório, senão ele cria `audio/` na pasta atual). Rode sempre de um diretório temporário. Converta para mp3 160k. Tipos: `word_pop icon_pop letter_tick check success slot_tick bubble type button whoosh_in whoosh_out swoosh riser impact confetti logo_sting`. - Trilha: 8–9 s bastam pro preview. "Trilha forte ou nenhuma": nada de pad morno. - Texturas: pequenas (< 300 KB cada), geradas ou CC0. - `ASSETS.md`: tabela arquivo · o que é · origem (URL/comando) · licença. **Todo arquivo** de `assets/` aparece nela. Fotos da demo ficam em `exemplos/` e também são listadas (Unsplash/Pexels/CC0). ## 6. receita.json e plano de cenas `receita.json`: ```json { "kit": "", "fps": 30, "batida_trilha_quadros": 14.4, "batidas": [ {"nome": "gancho", "obrigatoria": true, "duracao": [45, 105], "elementos": ["TituloGigante"], "entrada": ["nenhuma"], "sons": ["whoosh-entra"], "nota": "..."} ], "transicoes": [{"nome": "subir", "quadros": 12, "como": "..."}] } ``` Nomes de batida (use os que servem ao estilo, 4+): `gancho` · `problema` · `virada` · `prova` · `lista` · `depoimento` · `data` · `oferta` · `cta` · `marca`. `duracao` em quadros [mín, máx]. Todo nome em `elementos` tem que existir em `elementos/.tsx`. `exemplos/plano.json` (o que a IA escreve a cada vídeo, e o que a `Montagem` lê): ```json { "kit": "", "duracao": 240, "trilha": {"volume": 0.5}, "cenas": [ {"batida": "gancho", "de": 0, "ate": 58, "entrada": "nenhuma", "camadas": [{"elemento": "TituloGigante", "props": {"linhas": ["Prazo", "*estourado?*"], "inicio": 0}}], "socos": [31], "sons": [{"som": "whoosh-entra", "em": 0}]} ] } ``` `de`/`ate` absolutos; `inicio`, `socos` e `sons[].em` relativos à cena. Strings de arquivo nas props (`"fotos/foto-01.jpg"`) são trocadas pela URL do mapa `arquivos` do `preview.tsx`. `exemplos/roteiro.md`: o pedido do usuário, a tabela cena · batida · quadros · na tela · elemento · som, e 3–4 linhas de "como a IA chegou nisso". ## 7. preview.tsx e a demo ```tsx import {Montagem, Plano} from './elementos'; import plano from './exemplos/plano.json'; import f1 from './exemplos/fotos/foto-01.jpg'; const Preview: React.FC = () => ; export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 88, Componente: Preview}; ``` - 1080×1920, 30 fps, **6 a 8 s** (180–240 quadros). Feito **só** com os elementos do kit. - Copy de demo **genérica em PT-BR** sobre produto/evento **fictício**. Nunca a marca Destrava, nem marca real. Logo da demo: um SVG simples desenhado na hora. - Mostre no preview o máximo de elementos assinatura do estilo (4+), com som em cada movimento. - `quadroCapa`: o quadro que melhor vende o estilo (tipo + destaque + imagem, nada no meio da entrada). ## 8. Comandos ```bash npm run studio # abre todos os kits (Kit-) node scripts/render-kit.mjs # preview.mp4 + capa.jpg do kit (≈ 15–25 s) node scripts/checar-kit.mjs # confere este formato; tem que dar "ok" node scripts/manifest.mjs # reescreve kits/manifest.json npx tsc --noEmit # tipos ``` Depois de renderizar, **olhe os quadros**: `ffmpeg -i kits//preview.mp4 -vf "select='not(mod(n\,10))',scale=270:480,tile=8x3" -frames:v 1 /tmp/tile.jpg` e abra a imagem. Corrija o que estiver cortado, parado, fora da área segura ou feio, e renderize de novo. ## 9. Trabalho em paralelo (vários agentes, um kit cada) - Cada agente **só toca `kits//`**. Registro do kit é automático (`src/Estudio.tsx` acha todo `kits/*/preview.tsx` com `require.context`): **não existe linha de registro pra editar**. - **Não edite** `src/`, `scripts/`, `package.json`, `KITS.md`, `CATALOGO.md`, `galeria/` nem outro kit. Precisa de pacote novo? Não instale: peça a quem coordena. - **Não rode `scripts/manifest.mjs` nem commite `kits/manifest.json`** em paralelo: quem coordena roda uma vez no fim (evita conflito no mesmo arquivo). - O render empacota só o kit pedido (`.cache/entrada-.tsx`, `.cache//`), então um kit quebrado não derruba os outros. Rodando muitos ao mesmo tempo, use `KIT_CONCORRENCIA=2`. - Commit só da sua pasta: `git add kits/ && git commit -m "kit : ..."`. Nunca `git add -A`. Nunca push. - Pronto quando: `checar-kit.mjs ` dá ok, o preview tem ≤ 2 MB com áudio, e você olhou os quadros.