primocode 10.17.0 → 10.19.0

package/kits/aurora/regras/tipografia.md

@@ -0,0 +1,15 @@
+# Tipografia
+
+Duas fontes: **Instrument Serif** (serifada fina, só peso 400) para título e **Manrope** (300–700) para rótulo e detalhe.
+
+| papel | fonte | peso | tamanho (px) | máx. caracteres |
+|---|---|---|---|---|
+| título (hero) | Instrument Serif | 400 | 190–250 | 12 |
+| número no cartão | Instrument Serif | 400 | 260–320 | 4 |
+| rótulo | Manrope | 600 | 40–46, caixa-alta, tracking 0,32 em | 28 |
+| detalhe / endereço | Manrope | 400 | 44–52 | 32 |
+
+- Tracking: −0,01 em no serifado; 0,32 em no rótulo em caixa-alta.
+- Line-height: 1,0 no título.
+- Caixa: frase normal no serifado; caixa-alta só no rótulo.
+- Texto que cresce encolhe sozinho (`caber()` em `base.ts`) até caber em 920 px; nunca palavra cortada.

package/kits/bauhaus/SKILL.md

@@ -0,0 +1,52 @@
+---
+slug: bauhaus
+nome: Bauhaus
+descricao: papel off-white com grade, círculo, quadrado e triângulo em vermelho, azul e amarelo, barras de cor, Jost 900 em caixa alta
+familia: Retrô
+versao: 1
+quando:
+  - "vídeo de exposição, curso de design, arquitetura ou arte"
+  - "anúncio de marca criativa com cara de pôster modernista"
+  - "lançamento com geometria, cores primárias e muita ordem"
+  - "quero Bauhaus, círculo-quadrado-triângulo, construtivismo"
+  - "convite de palestra ou workshop com identidade gráfica forte"
+nao_serve:
+  - "clima divertido e bagunçado com rabiscos (use memphis)"
+  - "fundo escuro, neon ou tecnologia (use terminal)"
+  - "fotos como protagonista"
+---
+
+# Bauhaus
+
+Um pôster modernista que se monta sozinho. O chão é papel `#EFE8D8` com grade fina de 90 px. Nada tem contorno, sombra ou degradê: só **círculo, quadrado e triângulo** em vermelho `#D9261C`, azul `#1B4F9C`, amarelo `#F4B71A` e preto. Títulos são Jost 900 em MAIÚSCULA sobre barras de cor do tamanho exato do texto, alinhadas à esquerda (assimetria é regra). As formas entram de cantos diferentes girando e travam numa composição; faixas diagonais varrem a tela; listas viram barras de largura total numeradas. A coluna de 3 cores na lateral e a régua de progresso no pé aparecem em todo plano.
+
+## Como montar um vídeo com este kit
+
+1. **Leia o pedido e o roteiro.** Corte cada fala em frases curtas (1 a 4 palavras). Uma frase = uma cena de 0,6 a 1,5 s.
+2. **Escolha as batidas** em `receita.json` (gancho → virada → prova → lista → data → marca). Cada batida diz a duração e os elementos que 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`. 1 batida da trilha = 15.25 quadros.
+4. **Renderize** com `<Montagem plano={...} arquivos={...} />` ou combine `Fundo`, `Camera`, `Cena` e os elementos (tudo sai de `elementos/index.ts`).
+5. **Confira** um quadro por cena contra `regras/`: área segura, herói grande, nada parado, nada cortado.
+
+## Elementos
+
+| elemento | o que faz | batidas |
+|---|---|---|
+| `TituloBauhaus` | linhas em barras de cor com texto que sobe da máscara | gancho, virada |
+| `ComposicaoGeometrica` | herói: círculo, quadrado, triângulo e linha em 3 presets (a, b, c) | gancho, virada, prova |
+| `BarraDiagonal` | faixa inclinada com texto correndo e faixa fina cruzando | virada, problema |
+| `NumeroBauhaus` | número gigante sobre círculo e quadrado, com rótulo | prova, data |
+| `ListaFaixas` | barras de largura total numeradas, com forma que gira | lista |
+| `AssinaturaMarca` | logo de 3 formas, nome em Jost 900, régua e endereço | marca (sempre a última) |
+| `Fundo`, `Overlay`, `Camera`, `Cena` | papel com grade, coluna de cores + régua de progresso, câmera, janela | todas |
+| `Efeito`, `Trilha` | sons e trilha do kit | todas |
+
+## Proibido
+
+- Quadro apertado: 35–45% do quadro livre, 1 herói + no máximo 1 apoio, margens de 96 px, uma pausa de 0,5–0,8 s depois de cada impacto.
+- Contorno, sombra, degradê, brilho, textura: tudo é chapado.
+- Qualquer cor fora de vermelho, azul, amarelo, preto e papel.
+- Centralizar tudo: títulos e barras ficam alinhados à esquerda (ou à direita), nunca no centro.
+- Fonte que não seja Jost (títulos) e Bebas Neue (rótulos); nada de minúscula nos títulos.
+- Formas orgânicas, rabiscos, emoji, fotos reais, texto fora da área segura (168–1330 px).
+- Mais de 3 formas diferentes em primeiro plano ao mesmo tempo, fora a composição.

package/kits/bauhaus/assets/ASSETS.md

@@ -0,0 +1,18 @@
+# Assets do kit bauhaus
+
+| arquivo | o que é | origem | licença |
+|---|---|---|---|
+| `fontes/jost-900.woff2` | Jost (título), subset latino | Google Fonts (fonts.gstatic.com), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-jost-900.txt` |
+| `fontes/bebas-neue.woff2` | Bebas Neue (texto), subset latino | Google Fonts (fonts.gstatic.com), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-bebas-neue.txt` |
+| `sons/whoosh-entra.mp3` | efeito whoosh-entra | sintetizado: MotionCraft `sfx make`, tipo `whoosh_in`, pacote `glass` | sem samples; síntese própria (CC0) |
+| `sons/whoosh-sai.mp3` | efeito whoosh-sai | sintetizado: MotionCraft `sfx make`, tipo `whoosh_out`, pacote `glass` | sem samples; síntese própria (CC0) |
+| `sons/swoosh.mp3` | efeito swoosh | sintetizado: MotionCraft `sfx make`, tipo `swoosh`, pacote `glass` | sem samples; síntese própria (CC0) |
+| `sons/pop-palavra.mp3` | efeito pop-palavra | sintetizado: MotionCraft `sfx make`, tipo `word_pop`, pacote `glass` | sem samples; síntese própria (CC0) |
+| `sons/pop-cartao.mp3` | efeito pop-cartao | sintetizado: MotionCraft `sfx make`, tipo `icon_pop`, pacote `glass` | sem samples; síntese própria (CC0) |
+| `sons/clique.mp3` | efeito clique | sintetizado: MotionCraft `sfx make`, tipo `button`, pacote `glass` | sem samples; síntese própria (CC0) |
+| `sons/impacto.mp3` | efeito impacto | sintetizado: MotionCraft `sfx make`, tipo `impact`, pacote `glass` | sem samples; síntese própria (CC0) |
+| `sons/subida.mp3` | efeito subida | sintetizado: MotionCraft `sfx make`, tipo `riser`, pacote `glass` | sem samples; síntese própria (CC0) |
+| `sons/assinatura.mp3` | efeito assinatura | sintetizado: MotionCraft `sfx make`, tipo `logo_sting`, pacote `glass` | sem samples; síntese própria (CC0) |
+| `sons/tick.mp3` | efeito tick | sintetizado: MotionCraft `sfx make`, tipo `letter_tick`, pacote `glass` | sem samples; síntese própria (CC0) |
+| `trilha/trilha.mp3` | trilha de 8,7 s, 118 bpm | MotionCraft `music make --preset tech-bright --bpm 118 --key D` | síntese própria (CC0); MotionCraft é MIT |
+

package/kits/bauhaus/assets/fontes/OFL-bebas-neue.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Bebas Neue Project Authors (https://github.com/rsms/inter)
+
+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/bauhaus/assets/fontes/OFL-jost-900.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Jost Project Authors (https://github.com/rsms/inter)
+
+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/bauhaus/elementos/AssinaturaMarca.tsx

@@ -0,0 +1,26 @@
+// AssinaturaMarca: logo (círculo + quadrado + triângulo desenhados na hora) sobre uma barra, nome em Jost 900, detalhe em Bebas e endereço numa barra preta. Sempre a última cena.
+import React from 'react';
+import {COR, FONTE_TEXTO, FONTE_TITULO, LARGURA_UTIL, caber, mola, seg, useF} from './base';
+
+export type AssinaturaMarcaProps = {nome: string; detalhe?: string; endereco?: string; inicio?: number};
+export const AssinaturaMarca: React.FC<AssinaturaMarcaProps> = ({nome, detalhe, endereco, inicio = 0}) => {
+  const f = useF() - inicio;
+  const tam = caber(nome.toUpperCase(), 250, LARGURA_UTIL, FONTE_TITULO, 900, -0.03);
+  const forma = (i: number) => mola(seg(f, i * 4, i * 4 + 12), 1.4);
+  const pn = mola(seg(f, 10, 22), 1.2);
+  const pe = mola(seg(f, 20, 30), 1.3);
+  const S = 250;
+  return <>
+    <div style={{position: 'absolute', left: 80, top: 330, display: 'flex', gap: 40}}>
+      <div style={{width: S, height: S, borderRadius: '50%', background: COR.vermelho, transform: `scale(${Math.max(0.001, forma(0))}) rotate(${(1 - forma(0)) * -200}deg)`}} />
+      <div style={{width: S, height: S, background: COR.azul, transform: `scale(${Math.max(0.001, forma(1))}) rotate(${(1 - forma(1)) * 200 + f * 0.6}deg)`}} />
+      <svg viewBox="0 0 100 100" style={{width: S, height: S, transform: `scale(${Math.max(0.001, forma(2))}) rotate(${(1 - forma(2)) * -200}deg)`}}><polygon points="50,4 98,92 2,92" fill={COR.amarelo} /></svg>
+    </div>
+    <div style={{position: 'absolute', left: 80, top: 670, overflow: 'hidden', height: tam * 1.05}}>
+      <div style={{fontFamily: FONTE_TITULO, fontWeight: 900, fontSize: tam, letterSpacing: '-0.03em', lineHeight: 1.05, color: COR.preto, transform: `translateY(${(1 - pn) * tam * 1.1}px)`, whiteSpace: 'nowrap'}}>{nome.toUpperCase()}</div>
+    </div>
+    <div style={{position: 'absolute', left: 80, top: 670 + tam * 1.05 + 16, width: LARGURA_UTIL * 0.9 * Math.max(0.001, pn), height: 14, background: COR.preto}} />
+    {detalhe && <div style={{position: 'absolute', left: 80, top: 670 + tam * 1.05 + 56, fontFamily: FONTE_TEXTO, fontSize: caber(detalhe.toUpperCase(), 110, LARGURA_UTIL, FONTE_TEXTO, 400, 0.04), letterSpacing: 4, color: COR.vermelho, opacity: pn}}>{detalhe.toUpperCase()}</div>}
+    {endereco && <div style={{position: 'absolute', left: 80, top: 670 + tam * 1.05 + 190, background: COR.preto, color: COR.papel, fontFamily: FONTE_TITULO, fontWeight: 900, fontSize: caber(endereco, 66, LARGURA_UTIL - 80, FONTE_TITULO, 900, 0), padding: '10px 40px', transformOrigin: '0 50%', transform: `scaleX(${Math.max(0.001, pe)})`}}>{endereco}</div>}
+  </>;
+};

package/kits/bauhaus/elementos/BarraDiagonal.tsx

@@ -0,0 +1,20 @@
+// BarraDiagonal: faixa grossa de cor inclinada que varre a tela de ponta a ponta com texto em Bebas Neue correndo dentro,
+// e uma segunda faixa fina de outra cor cruzando por baixo. Serve de virada ou de legenda gigante.
+import React from 'react';
+import {COR, FONTE_TEXTO, mola, seg, useF} from './base';
+
+export type BarraDiagonalProps = {texto: string; inicio?: number; y?: number; rot?: number; fundo?: string; cor?: string; apoio?: string; tamanho?: number; sentido?: 1 | -1};
+export const BarraDiagonal: React.FC<BarraDiagonalProps> = ({texto, inicio = 0, y = 740, rot = -14, fundo = COR.vermelho, cor = COR.papel, apoio = COR.amarelo, tamanho = 230, sentido = 1}) => {
+  const f = useF() - inicio;
+  const p = mola(seg(f, 0, 12), 1.2);
+  const p2 = mola(seg(f, 4, 16), 1.2);
+  const rep = `${texto.toUpperCase()}   ●   `.repeat(8);
+  const larg = (texto.length + 6) * tamanho * 0.42;
+  const x = -((f * 26 * sentido) % larg) - larg;
+  return <>
+    <div style={{position: 'absolute', left: -400, width: 1880, top: y - tamanho * 0.2 - 40, height: tamanho * 0.5, background: apoio, transform: `rotate(${rot + 24}deg) translateX(${(1 - p2) * 1900}px)`}} />
+    <div style={{position: 'absolute', left: -400, width: 1880, top: y - tamanho * 0.8, height: tamanho * 1.6, background: fundo, overflow: 'hidden', transform: `rotate(${rot}deg) translateX(${(1 - p) * -1900}px)`}}>
+      <div style={{position: 'absolute', left: x, top: 0, height: '100%', display: 'flex', alignItems: 'center', whiteSpace: 'pre', fontFamily: FONTE_TEXTO, fontSize: tamanho, color: cor, letterSpacing: 4}}>{rep}</div>
+    </div>
+  </>;
+};

package/kits/bauhaus/elementos/Camera.tsx

@@ -0,0 +1,21 @@
+// Camera: deriva constante por baixo de tudo e um soco em cada batida. O quadro nunca fica parado.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {q} from './base';
+
+export type CameraProps = {batidas?: number[]; forca?: number; children: React.ReactNode};
+
+export const posCamera = (f: number, batidas: number[], forca = 1) => {
+  let z = 1.02 + 0.01 * Math.sin(f / 60), dx = Math.sin(f / 31) * 10, dy = Math.cos(f / 43) * 8;
+  let rot = Math.sin(f / 71) * 0.004;
+  for (const h of batidas) if (f >= h) {
+    const d = Math.exp(-(f - h) / 7) * forca;
+    z += 0.025 * d; dx += 12 * d * Math.sin((f - h) * 2.7 + h); dy += 12 * d * Math.cos((f - h) * 3.3 + h); rot += 0.004 * 0.8 * d * Math.sin((f - h) * 2 + h);
+  }
+  return {z, dx, dy, rot};
+};
+
+export const Camera: React.FC<CameraProps> = ({batidas = [], forca = 1, children}) => {
+  const c = posCamera(q(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/bauhaus/elementos/Cena.tsx

@@ -0,0 +1,36 @@
+// Cena: janela de tempo de um plano. Entra com movimento (nunca corte seco), sai com movimento e sobrepõe 10 quadros com a próxima.
+// Dentro dela, useCurrentFrame() começa em 0 e useDuracaoCena() devolve a duração.
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {mola, e5, seg, q} from './base';
+
+export type Entrada = 'subir' | 'zoom' | 'direita' | 'esquerda' | 'nenhuma';
+export const SOBREPOE = 10;
+
+const CenaCtx = createContext({duracao: 60});
+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 = q(useCurrentFrame());
+  const en = entrada === 'nenhuma' ? 0 : 1 - mola(seg(f, 0, 12));
+  const xo = ultima ? 0 : e5(seg(f, duracao, duracao + SOBREPOE));
+  let tf = '';
+  if (entrada === 'subir') tf += `translateY(${en * 220}px) `;
+  if (entrada === 'zoom') tf += `scale(${1 + en * 0.9}) `;
+  if (entrada === 'direita') tf += `translateX(${en * 660}px) `;
+  if (entrada === 'esquerda') tf += `translateX(${-en * 660}px) `;
+  tf += `translateX(${-xo * 900}px)`;
+  const blur = (en * 0 + xo * 0);
+  return <AbsoluteFill style={{transform: tf, opacity: Math.max(0, (1 - Math.max(0, en) * 0.9) * (1 - xo)), filter: blur > 0.3 ? `blur(${blur}px)` : undefined}}>{children}</AbsoluteFill>;
+};
+
+export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'subir', 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} ultima={ultima}>{children}</Janela>
+    </CenaCtx.Provider>
+  </Sequence>;
+};

package/kits/bauhaus/elementos/ComposicaoGeometrica.tsx

@@ -0,0 +1,54 @@
+// ComposicaoGeometrica: o herói do estilo. Círculo, quadrado e triângulo nas cores primárias entram de cantos diferentes girando,
+// travam numa composição de pôster (preset 'a', 'b' ou 'c') e seguem girando devagar. Tudo em SVG, sem contorno, com uma linha preta fina.
+import React from 'react';
+import {COR, mola, seg, useF} from './base';
+
+type Def = {t: 'c' | 'q' | 't' | 's' | 'l' | 'k'; x: number; y: number; r: number; cor: string; rot: number; v: number; de: [number, number]};
+const PRESETS: Record<string, Def[]> = {
+  a: [
+    {t: 'c', x: 320, y: 330, r: 270, cor: COR.vermelho, rot: 0, v: 0, de: [-900, -300]},
+    {t: 'q', x: 560, y: 600, r: 230, cor: COR.azul, rot: 45, v: 0.9, de: [900, 700]},
+    {t: 't', x: 640, y: 250, r: 220, cor: COR.amarelo, rot: 0, v: -0.7, de: [900, -700]},
+    {t: 'k', x: 260, y: 700, r: 90, cor: COR.preto, rot: 0, v: 0, de: [-900, 900]},
+    {t: 'l', x: 450, y: 450, r: 760, cor: COR.preto, rot: 35, v: 0.2, de: [0, 900]},
+  ],
+  b: [
+    {t: 's', x: 450, y: 560, r: 330, cor: COR.amarelo, rot: 0, v: 0.8, de: [-900, 0]},
+    {t: 'q', x: 300, y: 300, r: 210, cor: COR.vermelho, rot: 0, v: -0.9, de: [-600, -900]},
+    {t: 'c', x: 600, y: 330, r: 190, cor: COR.azul, rot: 0, v: 0, de: [900, -600]},
+    {t: 't', x: 650, y: 650, r: 180, cor: COR.preto, rot: 180, v: 0.6, de: [900, 900]},
+    {t: 'l', x: 450, y: 450, r: 760, cor: COR.preto, rot: -55, v: -0.2, de: [0, -900]},
+  ],
+  c: [
+    {t: 'c', x: 450, y: 450, r: 400, cor: COR.azul, rot: 0, v: 0, de: [0, 900]},
+    {t: 'c', x: 450, y: 450, r: 270, cor: COR.amarelo, rot: 0, v: 0, de: [0, -900]},
+    {t: 'q', x: 450, y: 450, r: 150, cor: COR.vermelho, rot: 0, v: 1.6, de: [-900, 0]},
+    {t: 't', x: 740, y: 190, r: 160, cor: COR.preto, rot: 0, v: -1, de: [900, -500]},
+    {t: 'l', x: 450, y: 450, r: 900, cor: COR.preto, rot: 0, v: 0, de: [-900, 0]},
+  ],
+};
+export type ComposicaoGeometricaProps = {preset?: 'a' | 'b' | 'c'; inicio?: number; y?: number; escala?: number};
+
+const Forma: React.FC<{d: Def; rot: number}> = ({d, rot}) => {
+  const tr = `translate(${d.x} ${d.y}) rotate(${rot})`;
+  if (d.t === 'c') return <circle cx={d.x} cy={d.y} r={d.r} fill={d.cor} />;
+  if (d.t === 'k') return <circle cx={d.x} cy={d.y} r={d.r} fill={d.cor} />;
+  if (d.t === 'q') return <rect x={-d.r} y={-d.r} width={d.r * 2} height={d.r * 2} fill={d.cor} transform={tr} />;
+  if (d.t === 't') return <polygon points={`0,${-d.r} ${d.r * 0.95},${d.r * 0.75} ${-d.r * 0.95},${d.r * 0.75}`} fill={d.cor} transform={tr} />;
+  if (d.t === 's') return <path d={`M${-d.r} 0 A${d.r} ${d.r} 0 0 1 ${d.r} 0 Z`} fill={d.cor} transform={tr} />;
+  return <rect x={-d.r / 2} y={-5} width={d.r} height={10} fill={d.cor} transform={tr} />;
+};
+export const ComposicaoGeometrica: React.FC<ComposicaoGeometricaProps> = ({preset = 'a', inicio = 0, y = 720, escala = 1.18}) => {
+  const f = useF() - inicio;
+  const defs = PRESETS[preset];
+  return <svg viewBox="0 0 900 900" style={{position: 'absolute', left: 540 - 450 * escala, top: y - 450 * escala, width: 900 * escala, height: 900 * escala, overflow: 'visible'}}>
+    {defs.map((d, i) => {
+      const t0 = i * 3;
+      const p = mola(seg(f, t0, t0 + 14), 1.3);
+      const q = 1 - p;
+      const rot = d.rot + q * 200 * (i % 2 ? 1 : -1) + Math.max(0, f - 14) * d.v;
+      const dd = {...d, x: d.x + d.de[0] * q, y: d.y + d.de[1] * q};
+      return <Forma key={i} d={dd} rot={rot} />;
+    })}
+  </svg>;
+};

package/kits/bauhaus/elementos/Fundo.tsx

@@ -0,0 +1,13 @@
+// Fundo: papel off-white com grade de 90 px em traço fino, uma régua diagonal e um círculo grande e apagado que passa atrás. Quieto de propósito: o movimento é das formas.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {COR, useF} from './base';
+
+export const Fundo: React.FC = () => {
+  const f = useF();
+  return <AbsoluteFill style={{background: COR.papel}}>
+    <AbsoluteFill style={{backgroundImage: `linear-gradient(rgba(20,20,20,0.09) 2px, transparent 2px), linear-gradient(90deg, rgba(20,20,20,0.09) 2px, transparent 2px)`, backgroundSize: '90px 90px', backgroundPosition: `${(f * 0.8) % 90}px 0`}} />
+    <div style={{position: 'absolute', left: 560 + Math.sin(f / 50) * 60, top: 1180 + Math.cos(f / 60) * 50, width: 760, height: 760, borderRadius: '50%', background: COR.amarelo, opacity: 0.12}} />
+    <div style={{position: 'absolute', left: -200, top: 300 + Math.sin(f / 70) * 40, width: 520, height: 520, background: COR.azul, opacity: 0.12, transform: `rotate(${45 + f * 0.3}deg)`}} />
+  </AbsoluteFill>;
+};

package/kits/bauhaus/elementos/ListaFaixas.tsx

@@ -0,0 +1,27 @@
+// ListaFaixas: itens em barras de largura total, cada uma de uma cor primária, com número 01/02/03 em Bebas e uma forma (círculo, quadrado, triângulo) no fim.
+// As barras entram de lados alternados e travam sem folga entre si.
+import React from 'react';
+import {COR, FONTE_TEXTO, FONTE_TITULO, caber, mola, seg, useF} from './base';
+
+export type ListaFaixasProps = {itens: string[]; inicio?: number; intervalo?: number; y?: number; altura?: number};
+const CORES = [COR.vermelho, COR.azul, COR.amarelo, COR.preto];
+export const ListaFaixas: React.FC<ListaFaixasProps> = ({itens, inicio = 0, intervalo = 6, y = 740, altura = 200}) => {
+  const f = useF() - inicio;
+  const tam = Math.min(...itens.map((t) => caber(t.toUpperCase(), 130, 500, FONTE_TITULO, 900, -0.02)));
+  const topo = y - (itens.length * altura) / 2;
+  return <>{itens.map((t, i) => {
+    const t0 = i * intervalo;
+    const p = mola(seg(f, t0, t0 + 11), 1.25);
+    const fundo = CORES[i % CORES.length];
+    const clara = fundo === COR.amarelo;
+    const cor = clara ? COR.preto : COR.papel;
+    const forma = i % 3;
+    return <div key={i} style={{position: 'absolute', left: 96, width: 888, top: topo + i * altura, height: altura, background: fundo, transform: `translateX(${(1 - p) * (i % 2 ? 1200 : -1200)}px)`, color: cor, fontFamily: FONTE_TITULO, fontWeight: 900, display: 'flex', alignItems: 'center'}}>
+      <span style={{fontFamily: FONTE_TEXTO, fontSize: 130, width: 190, paddingLeft: 40, opacity: 0.85}}>{String(i + 1).padStart(2, '0')}</span>
+      <span style={{fontSize: tam, letterSpacing: '-0.02em', whiteSpace: 'nowrap'}}>{t.toUpperCase()}</span>
+      <svg viewBox="0 0 100 100" style={{position: 'absolute', right: 40, top: altura / 2 - 50, width: 100, height: 100, transform: `rotate(${f * (i % 2 ? -3 : 3)}deg)`}}>
+        {forma === 0 ? <circle cx="50" cy="50" r="46" fill={cor} /> : forma === 1 ? <rect x="8" y="8" width="84" height="84" fill={cor} /> : <polygon points="50,6 96,90 4,90" fill={cor} />}
+      </svg>
+    </div>;
+  })}</>;
+};

package/kits/bauhaus/elementos/Montagem.tsx

@@ -0,0 +1,55 @@
+// Montagem: transforma um plano de cenas (JSON escrito pela IA) em vídeo, só com os elementos do kit.
+// Não decide estética: põe Fundo + Camera + Cenas + Overlay + sons onde o plano mandou. Formato: exemplos/plano.json.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {Fundo} from './Fundo';
+import {Overlay} from './Overlay';
+import {Camera} from './Camera';
+import {Cena, Entrada} from './Cena';
+import {Efeito, NomeSom, Trilha} from './Som';
+import {COR} from './base';
+import {AssinaturaMarca} from './AssinaturaMarca';
+import {BarraDiagonal} from './BarraDiagonal';
+import {ComposicaoGeometrica} from './ComposicaoGeometrica';
+import {ListaFaixas} from './ListaFaixas';
+import {NumeroBauhaus} from './NumeroBauhaus';
+import {TituloBauhaus} from './TituloBauhaus';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {AssinaturaMarca, BarraDiagonal, ComposicaoGeometrica, ListaFaixas, NumeroBauhaus, TituloBauhaus};
+
+export type Camada = {elemento: string; props: Record<string, unknown>};
+export type CenaPlano = {
+  batida: string; de: number; ate: number; entrada?: Entrada;
+  camadas: Camada[];
+  sons?: {som: NomeSom; em: number; volume?: number}[];
+  socos?: number[];
+};
+export type Plano = {kit: string; duracao: number; trilha?: {volume?: number} | false; cenas: CenaPlano[]};
+
+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, 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: "#EFE8D8"}}>
+    <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(`bauhaus: elemento "${k.elemento}" não existe no kit`);
+          return <El key={j} {...(resolver(k.props, arquivos) as object)} />;
+        })}
+      </Cena>)}
+    </Camera>
+    <Overlay />
+    {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/bauhaus/elementos/NumeroBauhaus.tsx

@@ -0,0 +1,21 @@
+// NumeroBauhaus: número gigante em Jost 900 sobre um círculo e um quadrado de cores primárias deslocados, com barra de rótulo.
+// O número aparece de baixo para cima por máscara e as formas giram devagar.
+import React from 'react';
+import {COR, FONTE_TEXTO, FONTE_TITULO, caber, mola, seg, useF} from './base';
+
+export type NumeroBauhausProps = {valor: string; rotulo?: string; inicio?: number; y?: number; formas?: [string, string]};
+export const NumeroBauhaus: React.FC<NumeroBauhausProps> = ({valor, rotulo, inicio = 0, y = 700, formas = [COR.amarelo, COR.azul]}) => {
+  const f = useF() - inicio;
+  const p = mola(seg(f, 0, 12), 1.3);
+  const pn = mola(seg(f, 6, 18), 1.2);
+  const tam = caber(valor, 760, 860, FONTE_TITULO, 900, -0.04);
+  const pr = mola(seg(f, 14, 24), 1.4);
+  return <>
+    <div style={{position: 'absolute', left: 120, top: y - 470, width: 640, height: 640, borderRadius: '50%', background: formas[0], transform: `scale(${Math.max(0.001, p)})`}} />
+    <div style={{position: 'absolute', left: 430, top: y - 120, width: 520, height: 520, background: formas[1], transform: `rotate(${45 + f * 0.8 + (1 - p) * 180}deg) scale(${Math.max(0.001, p)})`}} />
+    <div style={{position: 'absolute', left: 0, right: 0, top: y - tam * 0.62, height: tam * 1.1, overflow: 'hidden', display: 'flex', justifyContent: 'center'}}>
+      <div style={{fontFamily: FONTE_TITULO, fontWeight: 900, fontSize: tam, letterSpacing: '-0.04em', lineHeight: 1.1, color: COR.preto, transform: `translateY(${(1 - pn) * tam * 1.1}px)`, whiteSpace: 'nowrap'}}>{valor}</div>
+    </div>
+    {rotulo && <div style={{position: 'absolute', left: 80, top: y + tam * 0.5 + 40, background: COR.vermelho, color: COR.papel, fontFamily: FONTE_TEXTO, fontSize: 120, padding: '6px 40px', letterSpacing: 4, transformOrigin: '0 50%', transform: `scaleX(${Math.max(0.001, pr)})`}}>{rotulo.toUpperCase()}</div>}
+  </>;
+};

package/kits/bauhaus/elementos/Overlay.tsx

@@ -0,0 +1,18 @@
+// Overlay: a assinatura que se repete em todo plano: coluna de 3 cores primárias na lateral esquerda e uma régua preta no pé com um
+// quadrado vermelho que anda do início ao fim do vídeo (barra de progresso).
+import React from 'react';
+import {AbsoluteFill, useVideoConfig} from 'remotion';
+import {COR, c01, useF} from './base';
+
+export const Overlay: React.FC = () => {
+  const f = useF();
+  const {durationInFrames} = useVideoConfig();
+  const p = c01(f / durationInFrames);
+  return <AbsoluteFill style={{pointerEvents: 'none'}}>
+    <div style={{position: 'absolute', left: 0, top: 0, width: 30, height: '34%', background: COR.vermelho}} />
+    <div style={{position: 'absolute', left: 0, top: '34%', width: 30, height: '33%', background: COR.amarelo}} />
+    <div style={{position: 'absolute', left: 0, top: '67%', width: 30, height: '33%', background: COR.azul}} />
+    <div style={{position: 'absolute', left: 60, right: 60, top: 1830, height: 8, background: COR.preto}} />
+    <div style={{position: 'absolute', left: 60 + p * 900, top: 1810, width: 48, height: 48, background: COR.vermelho, transform: `rotate(${f * 4}deg)`}} />
+  </AbsoluteFill>;
+};