primocode 10.17.0 → 10.19.0

package/kits/bauhaus/regras/tipografia.md

@@ -0,0 +1,20 @@
+# Tipografia
+
+- **título**: Jost 900 (arquivo `assets/fontes/jost-900.woff2`, família registrada como `BH Jost`).
+- **texto**: Bebas Neue 400 (arquivo `assets/fontes/bebas-neue.woff2`, família registrada como `BH Bebas Neue`).
+
+| papel | tamanho px | máx. caracteres por linha | fonte |
+|---|---|---|---|
+| título em barra | 190 (3 linhas) / 250 | 6–9 | Jost 900 |
+| número gigante | 760 | 2–3 | Jost 900 |
+| item de lista | 130 | 12 | Jost 900 |
+| numeração 01/02 | 130 | 2 | Bebas Neue |
+| faixa diagonal | 230 | contínuo | Bebas Neue |
+| rótulo / detalhe | 110–120 | 20 | Bebas Neue |
+| nome na assinatura | 250 | 6 | Jost 900 |
+| endereço | 66 | 24 | Jost 900 |
+
+- Tracking: −0,02 em Jost 900 (−0,04 nos números); +4 px em Bebas Neue.
+- Line-height: 1,0 nos títulos (a barra colada no texto).
+- Caixa: SEMPRE MAIÚSCULAS.
+- Texto que passa da largura útil (920 px) **encolhe sozinho** (`caber()` em `base.ts`), nunca corta palavra.

package/kits/brutalista/SKILL.md

@@ -0,0 +1,54 @@
+---
+slug: brutalista
+nome: Brutalista
+descricao: mono enorme em caixa alta, só preto, branco e amarelo, bordas grossas e sombra dura, câmera em degraus
+familia: Tipografia em movimento
+versao: 1
+quando:
+  - "anúncio de produto com cara de ferramenta crua, sem enfeite"
+  - "lançamento de app, newsletter ou comunidade com tom direto e provocador"
+  - "vídeo com números grandes, lista de funções e frases curtas e secas"
+  - "quero um estilo brutalista, web brutalism, mono gigante"
+nao_serve:
+  - "vídeo delicado, premium suave ou feminino"
+  - "qualquer pedido com degradê, brilho ou foto retocada"
+---
+
+# Brutalista
+
+Web brutalism em movimento. **JetBrains Mono 800 em caixa alta, enorme**, em blocos chapados (amarelo, preto, branco), **bordas de 14 px e sombra dura de 18 px sem desfoque**, nada de raio de canto, degradê ou brilho. A tela inteira é trocada por **cortinas de cor** que batem (amarelo → preto → branco). A câmera anda **em degraus de 4 quadros** (stop-motion), as fotos são P&B de alto contraste e pulam de posição. Uma **moldura preta de 20 px** em volta do quadro se repete em todo vídeo.
+
+## Como montar um vídeo com este kit
+
+1. **Leia o pedido e o roteiro.** Corte cada fala em frases de 1 a 3 palavras em caixa alta. Uma frase = um plano (cabe em 30 a 50 quadros).
+2. **Escolha as batidas** em `receita.json` (gancho → problema → prova → lista → oferta → marca). Cada batida diz quanto dura e quais elementos servem.
+3. **Escreva o plano de cenas** (`plano.json`, mesmo formato de `exemplos/plano.json`): para cada cena, `de`/`ate` em quadros, a `entrada`, as `camadas` (elemento + props) e os `sons`. Os cortes seguem a voz (se houver) ou a batida da trilha: 1 batida = 16.7 quadros.
+4. **Renderize** com `<Montagem plano={...} arquivos={...} />` ou escreva o TSX direto combinando `Fundo`, `Camera`, `Cena` e os elementos (tudo sai de `elementos/index.ts`).
+5. **Confira** os quadros (um por cena) contra `regras/`: área segura, nada cortado, nenhum canto arredondado, nenhuma sombra suave, nenhum quadro parado.
+
+## Elementos
+
+| elemento | o que faz | batidas |
+|---|---|---|
+| QuadroCor | cortina de cor chapada que bate na tela (amarelo, preto ou branco) | toda cena |
+| MonoEnorme | linhas gigantes em blocos de cor que batem; `*palavra*` invertida | gancho, problema, virada |
+| BlocoSombra | adesivo com borda de 14 px e sombra dura, girado | apoio, oferta, data |
+| FitaAlerta | faixa diagonal listrada com texto que corre | problema, oferta |
+| Terminal | janela preta com texto digitado e cursor | virada, prova |
+| CartaoFotoBruto | foto P&B com borda, sombra dura e pulo de posição | prova |
+| ContadorGrande | número de 520 px que sobe em degraus | prova, dado |
+| ListaBruta | itens `[X] NOME` marcados um a um | lista |
+| AssinaturaMarca | bloco preto com nome gigante + endereço em faixa amarela | marca (sempre a última) |
+| Fundo, Sobre | chão branco; moldura preta de 20 px por cima de tudo | todas |
+| Camera | deriva em degraus + soco | todas |
+| Cena | janela de cada plano | todas |
+| Efeito, Trilha | sons e trilha do kit | todas |
+
+## Proibido
+
+- Qualquer degradê, brilho, desfoque, sombra suave ou opacidade abaixo de 100%.
+- Canto arredondado (raio é sempre 0) e qualquer cor fora de preto, branco e amarelo.
+- Foto colorida ou retocada; fonte que não seja mono ou Archivo Black.
+- Entrada com fade ou deslize suave: tudo bate e assenta seco.
+- Texto minúsculo ou misturado em caixa alta e baixa.
+- Texto fora da área segura (168–1330 px na vertical, 80 px nas laterais).

package/kits/brutalista/assets/ASSETS.md

@@ -0,0 +1,23 @@
+# Assets do kit brutalista
+
+| arquivo | o que é | origem | licença |
+|---|---|---|---|
+| `fontes/jetbrains-mono.woff2` | JetBrains Mono (500 800), subset latino | Google Fonts (`https://github.com/JetBrains/JetBrainsMono`), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-JetBrainsMono.txt` |
+| `fontes/archivo-black.woff2` | Archivo Black (400), subset latino | Google Fonts (`https://github.com/Omnibus-Type/Archivo`), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-ArchivoBlack.txt` |
+| `sons/whoosh-entra.mp3` | whoosh de entrada | sintetizado: MotionCraft `sfx make`, tipo `whoosh_in`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/whoosh-sai.mp3` | whoosh de saída | sintetizado: MotionCraft `sfx make`, tipo `whoosh_out`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/swoosh.mp3` | swoosh lateral | sintetizado: MotionCraft `sfx make`, tipo `swoosh`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/pop-palavra.mp3` | pop curto | sintetizado: MotionCraft `sfx make`, tipo `word_pop`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/pop-cartao.mp3` | pop de objeto que pousa | sintetizado: MotionCraft `sfx make`, tipo `icon_pop`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/clique.mp3` | clique | sintetizado: MotionCraft `sfx make`, tipo `button`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/impacto.mp3` | impacto grave | sintetizado: MotionCraft `sfx make`, tipo `impact`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/subida.mp3` | riser de 1,3 s | sintetizado: MotionCraft `sfx make`, tipo `riser`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/assinatura.mp3` | acorde da marca | sintetizado: MotionCraft `sfx make`, tipo `logo_sting`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `trilha/bruta-108bpm.mp3` | 9 s de trilha, 108 bpm | MotionCraft `music make` (preset dark-minimal, 108 bpm, tom E, lead pluck, bateria tight, comp eighths), síntese procedural | sem samples; síntese própria (CC0). MotionCraft é MIT |
+
+Conteúdo de demonstração (não faz parte do estilo, fica em `exemplos/`):
+
+| arquivo | origem | licença |
+|---|---|---|
+| `exemplos/fotos/foto-*.jpg` (5) | Unsplash via picsum (ids 1–5, 20, 26, 60), recorte 720×960, as mesmas do kit apple-tipografico | Unsplash License |
+| `exemplos/logo-bloco.svg` | logo fictício desenhado para a demo | próprio |

package/kits/brutalista/assets/fontes/OFL-ArchivoBlack.txt

@@ -0,0 +1,93 @@
+Copyright The Archivo Black Project Authors (https://github.com/Omnibus-Type/Archivo)
+
+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/brutalista/assets/fontes/OFL-JetBrainsMono.txt

@@ -0,0 +1,93 @@
+Copyright The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+
+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/brutalista/elementos/AssinaturaMarca.tsx

@@ -0,0 +1,21 @@
+// AssinaturaMarca: a última cena. Bloco preto gigante com o ícone, o nome em mono de 200 px (branco) que bate da
+// esquerda e uma faixa amarela com o endereço. Tudo com borda e sombra dura; nenhuma suavidade.
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, FONTE, SEGURA, caber, eb, seg} from './base';
+
+export type AssinaturaMarcaProps = {nome: string; icone: string; detalhe?: string; endereco?: string; inicio?: number; y?: number};
+
+export const AssinaturaMarca: React.FC<AssinaturaMarcaProps> = ({nome, icone, detalhe, endereco, inicio = 0, y = 640}) => {
+  const f = useCurrentFrame();
+  const tam = caber(nome.toUpperCase(), 200, 920 - 60, 800, -0.04);
+  const pb = eb(seg(f, inicio, inicio + 8), 2), pi = eb(seg(f, inicio + 4, inicio + 14), 2), pe = eb(seg(f, inicio + 14, inicio + 22), 1.6);
+  return <div style={{position: 'absolute', inset: 0}}>
+    <div style={{position: 'absolute', left: SEGURA.lado, top: y - 380, width: 920, height: 760, background: COR.preto, boxShadow: `18px 18px 0 ${COR.amarelo}`, border: `14px solid ${COR.branco}`, boxSizing: 'border-box', transform: `translateX(${(1 - pb) * -1200}px)`}}>
+      <Img src={icone} style={{position: 'absolute', left: 50, top: 50, width: 230, height: 230, transform: `scale(${Math.max(0.001, pi)})`, transformOrigin: '0 0'}} />
+      <div style={{position: 'absolute', left: 40, bottom: 150, fontFamily: FONTE.titulo, fontWeight: 800, fontSize: tam, lineHeight: `${tam}px`, letterSpacing: '-0.04em', color: COR.branco, whiteSpace: 'nowrap', transform: `translateX(${(1 - pi) * -1100}px)`}}>{nome.toUpperCase()}</div>
+      {detalhe && <div style={{position: 'absolute', left: 44, bottom: 60, fontFamily: FONTE.titulo, fontWeight: 500, fontSize: 40, color: COR.amarelo, opacity: seg(f, inicio + 12, inicio + 13)}}>&gt; {detalhe}</div>}
+    </div>
+    {endereco && <div style={{position: 'absolute', left: SEGURA.lado, top: y + 440, width: 920, height: 120, background: COR.amarelo, border: `14px solid ${COR.preto}`, boxShadow: `18px 18px 0 ${COR.preto}`, boxSizing: 'border-box', fontFamily: FONTE.titulo, fontWeight: 800, fontSize: 56, lineHeight: '92px', textAlign: 'center', color: COR.preto, transform: `scaleX(${Math.max(0.001, pe)})`, transformOrigin: '0 50%'}}>{endereco.toUpperCase()}</div>}
+  </div>;
+};

package/kits/brutalista/elementos/BlocoSombra.tsx

@@ -0,0 +1,18 @@
+// BlocoSombra: o adesivo brutalista. Caixa chapada com borda de 14 px, sombra dura de 18 px (sem desfoque) e raio 0,
+// girada alguns graus. Pula de scale 0 a 1 com sobra e o giro assenta.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, caber, eb, seg} from './base';
+
+export type BlocoSombraProps = {texto: string; x?: number; y?: number; largura?: number; inicio?: number; rot?: number; cor?: 'amarelo' | 'preto' | 'branco'; tamanho?: number};
+
+export const BlocoSombra: React.FC<BlocoSombraProps> = ({texto, x = 540, y = 400, largura = 700, inicio = 0, rot = -5, cor = 'amarelo', tamanho = 84}) => {
+  const f = useCurrentFrame();
+  const p = eb(seg(f, inicio, inicio + 10), 2);
+  const fg = cor === 'preto' ? COR.branco : COR.preto;
+  const linhas = texto.toUpperCase().split('|');
+  const tam = Math.min(...linhas.map((l) => caber(l, tamanho, largura - 80, 400, -0.01, FONTE.apoio.split('"')[1])));
+  return <div style={{position: 'absolute', left: x - largura / 2, top: y - (linhas.length * tam * 1.1 + 60) / 2, width: largura, padding: '30px 0', boxSizing: 'border-box', textAlign: 'center', background: COR[cor], color: fg, border: `14px solid ${COR.preto}`, boxShadow: `18px 18px 0 ${COR.preto}`, fontFamily: FONTE.apoio, fontSize: tam, lineHeight: 1.1, transform: `scale(${Math.max(0.001, p)}) rotate(${rot * (0.4 + 0.6 * p)}deg)`, opacity: f < inicio ? 0 : 1}}>
+    {linhas.map((l, i) => <div key={i}>{l}</div>)}
+  </div>;
+};

package/kits/brutalista/elementos/Camera.tsx

@@ -0,0 +1,23 @@
+// Camera: deriva constante por baixo de tudo (zoom, deslize e giro) e um soco em cada batida.
+// O quadro nunca fica parado. `batidas` são quadros absolutos do vídeo.
+// Neste kit a câmera anda em degraus de 4 quadros (stop-motion), não liso.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+
+export type CameraProps = {batidas?: number[]; forca?: number; children: React.ReactNode};
+
+export const posCamera = (fr: number, batidas: number[], forca = 1) => {
+  const f = Math.floor(fr / 4) * 4;
+  let z = 1.02 + 0.015 * Math.sin(f / 90), dx = Math.sin(f / 37) * 18, dy = Math.cos(f / 51) * 14;
+  const rot = Math.sin(f / 83) * 0.008;
+  for (const h of batidas) if (f >= h) {
+    const d = Math.exp(-(f - h) / 6) * forca;
+    z += 0.05 * d; dx += 14 * d * Math.sin((f - h) * 2.7 + h); dy += 14 * 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/brutalista/elementos/CartaoFotoBruto.tsx

@@ -0,0 +1,19 @@
+// CartaoFotoBruto: foto P&B de alto contraste com borda de 14 px e sombra dura. Entra batendo (scale 1,4 → 1) e
+// depois PULA de posição a cada 6 quadros (±12 px), como stop-motion. Etiqueta amarela no topo.
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, FONTE, eb, seg} from './base';
+
+const ruido = (n: number) => Math.sin(n * 91.7) * 43758.5453 % 1;
+export type CartaoFotoBrutoProps = {src: string; x?: number; y?: number; largura?: number; altura?: number; inicio?: number; rot?: number; legenda?: string; foco?: string};
+
+export const CartaoFotoBruto: React.FC<CartaoFotoBrutoProps> = ({src, x = 540, y = 760, largura = 820, altura = 760, inicio = 0, rot = 3, legenda, foco = '50% 50%'}) => {
+  const f = useCurrentFrame();
+  const p = eb(seg(f, inicio, inicio + 6), 1);
+  const passo = Math.floor(Math.max(0, f - inicio - 6) / 6);
+  const jx = f < inicio + 6 ? 0 : ruido(passo + 1) * 12, jy = f < inicio + 6 ? 0 : ruido(passo + 7) * 12;
+  return <div style={{position: 'absolute', left: x - largura / 2 + jx, top: y - altura / 2 + jy, width: largura, height: altura, border: `14px solid ${COR.preto}`, boxShadow: `18px 18px 0 ${COR.preto}`, boxSizing: 'border-box', background: COR.preto, transform: `scale(${1 + (1 - Math.min(p, 1)) * 0.4}) rotate(${rot}deg)`, opacity: f < inicio ? 0 : 1}}>
+    <Img src={src} style={{width: '100%', height: '100%', objectFit: 'cover', objectPosition: foco, filter: 'grayscale(1) contrast(1.5) brightness(1.05)', transform: `scale(${1.08 + passo * 0.012})`}} />
+    {legenda && <div style={{position: 'absolute', left: -14, top: -64, background: COR.amarelo, border: `14px solid ${COR.preto}`, padding: '0 18px', fontFamily: FONTE.titulo, fontWeight: 800, fontSize: 38, lineHeight: '44px', color: COR.preto}}>{legenda.toUpperCase()}</div>}
+  </div>;
+};

package/kits/brutalista/elementos/Cena.tsx

@@ -0,0 +1,41 @@
+// Cena: janela de tempo de um plano. Entra com movimento (nunca corte seco) e sai deslizando,
+// sobrepondo 8 quadros com a próxima. Dentro dela, useCurrentFrame() começa em 0.
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {e5, eb, seg} from './base';
+
+export type Entrada = 'subir' | 'zoom' | 'direita' | 'esquerda' | 'girar' | 'cortar' | 'nenhuma';
+export const SOBREPOE = 8; // quadros em que a saída desta cena cruza a entrada da próxima
+
+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 q = 6; // quadros da entrada
+  const en = entrada === 'nenhuma' ? 0 : 1 - (entrada === 'cortar' ? eb(seg(f, 0, q)) : e5(seg(f, 0, q)));
+  const xo = ultima ? 0 : e5(seg(f, duracao, duracao + SOBREPOE));
+  let tf = '';
+  if (entrada === 'subir') tf += `translateY(${en * 120}px) `;
+  if (entrada === 'zoom') tf += `scale(${1 + en * 0.9}) `;
+  if (entrada === 'direita') tf += `translateX(${en * 348}px) `;
+  if (entrada === 'esquerda') tf += `translateX(${-en * 348}px) `;
+  if (entrada === 'girar') tf += `rotate(${en * -14}deg) scale(${1 + en * 0.5}) `;
+  if (entrada === 'cortar') tf += `scale(${1 + en * 0.14}) `;
+  tf += `scale(${1 + xo * 0.12})`;
+  const blur = (entrada === 'cortar' ? 0 : en * 0) + xo * 0;
+  const op = entrada === 'cortar' ? 1 - xo : (1 - en * 0) * (1 - xo);
+  return <AbsoluteFill style={{transform: tf, opacity: op, 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/brutalista/elementos/ContadorGrande.tsx

@@ -0,0 +1,21 @@
+// ContadorGrande: número de 520 px que sobe em degraus de 3 quadros até o valor final, com sufixo e uma barra
+// amarela de 28 px embaixo que cresce junto. É o dado que prova o produto.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, SEGURA, caber, c01, eb, seg} from './base';
+
+export type ContadorGrandeProps = {de?: number; ate: number; sufixo?: string; rotulo?: string; inicio?: number; duracao?: number; y?: number; tamanho?: number};
+
+export const ContadorGrande: React.FC<ContadorGrandeProps> = ({de = 0, ate, sufixo = '', rotulo, inicio = 0, duracao = 30, y = 640, tamanho = 520}) => {
+  const f = useCurrentFrame();
+  const q = Math.floor(Math.max(0, f - inicio) / 3) * 3;
+  const v = Math.round(de + (ate - de) * c01(q / duracao));
+  const txt = `${v.toLocaleString('pt-BR')}${sufixo}`;
+  const tam = caber(`${ate.toLocaleString('pt-BR')}${sufixo}`, tamanho, 920, 800, -0.05);
+  const p = eb(seg(f, inicio, inicio + 8), 1.6);
+  return <div style={{position: 'absolute', inset: 0, opacity: f < inicio ? 0 : 1}}>
+    <div style={{position: 'absolute', left: SEGURA.lado, top: y - tam * 0.5, lineHeight: `${tam}px`, fontFamily: FONTE.titulo, fontWeight: 800, fontSize: tam, letterSpacing: '-0.05em', color: COR.preto, whiteSpace: 'nowrap', transform: `scale(${0.7 + 0.3 * p})`, transformOrigin: '0 50%'}}>{txt}</div>
+    <div style={{position: 'absolute', left: SEGURA.lado, top: y + tam * 0.5 + 10, height: 28, width: 920 * c01(q / duracao), background: COR.amarelo, border: `6px solid ${COR.preto}`, boxSizing: 'border-box'}} />
+    {rotulo && <div style={{position: 'absolute', left: SEGURA.lado, top: y + tam * 0.5 + 60, fontFamily: FONTE.apoio, fontSize: 64, color: COR.preto, textTransform: 'uppercase', opacity: seg(f, inicio + 14, inicio + 15)}}>{rotulo}</div>}
+  </div>;
+};

package/kits/brutalista/elementos/FitaAlerta.tsx

@@ -0,0 +1,20 @@
+// FitaAlerta: faixa diagonal (giro −8°) com listras pretas e amarelas nas bordas e o texto repetido correndo
+// 22 px por quadro para a esquerda. Entra de baixo com um tranco.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, eb, seg} from './base';
+
+export type FitaAlertaProps = {texto: string; y?: number; inicio?: number; rot?: number; velocidade?: number};
+
+export const FitaAlerta: React.FC<FitaAlertaProps> = ({texto, y = 1180, inicio = 0, rot = -8, velocidade = 22}) => {
+  const f = useCurrentFrame();
+  const p = eb(seg(f, inicio, inicio + 14));
+  const unidade = `${texto.toUpperCase()}  ✕  `;
+  const passo = unidade.length * 52 * 0.6;
+  const x = -((Math.max(0, f - inicio) * velocidade) % passo);
+  const listras = `repeating-linear-gradient(45deg, ${COR.preto} 0 28px, ${COR.amarelo} 28px 56px)`;
+  return <div style={{position: 'absolute', left: -200, width: 1480, top: y - 70, height: 140, transform: `translateY(${(1 - p) * 700}px) rotate(${rot}deg)`, background: COR.amarelo, borderTop: `14px solid ${COR.preto}`, borderBottom: `14px solid ${COR.preto}`, overflow: 'hidden', boxSizing: 'border-box'}}>
+    <div style={{position: 'absolute', left: 0, right: 0, top: 0, height: 14, background: listras}} />
+    <div style={{position: 'absolute', left: x, top: 20, whiteSpace: 'nowrap', fontFamily: FONTE.titulo, fontWeight: 800, fontSize: 52, lineHeight: '82px', color: COR.preto}}>{unidade.repeat(6)}</div>
+  </div>;
+};

package/kits/brutalista/elementos/Fundo.tsx

@@ -0,0 +1,9 @@
+// Fundo: branco chapado. Por cima de tudo (Sobre) vai a moldura preta de 20 px que se repete em todo vídeo brutalista.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {COR} from './base';
+
+export const Fundo: React.FC = () => <AbsoluteFill style={{background: COR.branco}} />;
+
+/** moldura preta de 20 px em volta do quadro, fora da câmera */
+export const Sobre: React.FC = () => <AbsoluteFill style={{border: `20px solid ${COR.preto}`, boxSizing: 'border-box', pointerEvents: 'none'}} />;

package/kits/brutalista/elementos/ListaBruta.tsx

@@ -0,0 +1,23 @@
+// ListaBruta: itens em mono caixa alta com caixa `[ ]` que vira `[X]` amarelo 6 quadros depois de o item bater.
+// Cada linha tem um fio de 8 px embaixo. Intervalo de 9 quadros entre itens.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, SEGURA, caber, eb} from './base';
+
+export type ListaBrutaProps = {itens: string[]; inicio?: number; intervalo?: number; y?: number; passo?: number};
+
+export const ListaBruta: React.FC<ListaBrutaProps> = ({itens, inicio = 0, intervalo = 9, y = 380, passo = 170}) => {
+  const f = useCurrentFrame();
+  return <div style={{position: 'absolute', inset: 0}}>
+    {itens.map((it, i) => {
+      const t = f - (inicio + i * intervalo);
+      const p = eb(t / 9, 1.8);
+      const marcado = t >= 6;
+      const tam = caber(it.toUpperCase(), 100, 920 - 190, 800, -0.04);
+      return <div key={i} style={{position: 'absolute', left: SEGURA.lado, top: y + i * passo, width: 920, height: passo - 16, borderBottom: `8px solid ${COR.preto}`, opacity: t < 0 ? 0 : 1, transform: `translateX(${(1 - p) * -1100}px)`, display: 'flex', alignItems: 'center', gap: 28, boxSizing: 'border-box'}}>
+        <div style={{width: 120, height: 120, flex: 'none', border: `14px solid ${COR.preto}`, boxSizing: 'border-box', background: marcado ? COR.amarelo : COR.branco, fontFamily: FONTE.titulo, fontWeight: 800, fontSize: 84, lineHeight: '92px', textAlign: 'center', color: COR.preto}}>{marcado ? 'X' : ''}</div>
+        <div style={{fontFamily: FONTE.titulo, fontWeight: 800, fontSize: tam, letterSpacing: '-0.04em', color: COR.preto, whiteSpace: 'nowrap'}}>{it.toUpperCase()}</div>
+      </div>;
+    })}
+  </div>;
+};

package/kits/brutalista/elementos/MonoEnorme.tsx

@@ -0,0 +1,43 @@
+// MonoEnorme: linhas gigantes em mono caixa alta, cada uma num bloco de cor que bate na tela
+// (translateX ±1400 → 0 com sobra forte). `*palavra*` vira bloco invertido. O esquema de cor de cada linha
+// é uma letra: a = amarelo/preto, p = preto/branco, b = branco/preto.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, SEGURA, caber, eb, pedacos, seg, textoLimpo} from './base';
+
+const ESQ = {a: {bg: COR.amarelo, fg: COR.preto}, p: {bg: COR.preto, fg: COR.branco}, b: {bg: COR.branco, fg: COR.preto}};
+export type MonoEnormeProps = {
+  linhas: string[];
+  /** uma letra por linha: 'a' | 'p' | 'b' (padrão: a, p, b, a...) */
+  esquema?: string;
+  inicio?: number;
+  intervalo?: number;
+  y?: number;
+  tamanho?: number;
+  /** quadro em que as linhas saem (viram para o lado) */
+  fim?: number;
+};
+
+export const MonoEnorme: React.FC<MonoEnormeProps> = ({linhas, esquema = 'apb', inicio = 0, intervalo = 6, y = 700, tamanho = 190, fim}) => {
+  const f = useCurrentFrame();
+  // cada linha encolhe sozinha até caber (palavra curta fica maior que palavra longa)
+  const tams = linhas.map((l) => caber(textoLimpo(l).toUpperCase(), tamanho, 920 - 44, 800, -0.04));
+  const gap = 14;
+  const alts = tams.map((t) => t * 1.02);
+  const total = alts.reduce((a, b) => a + b, 0) + gap * (linhas.length - 1);
+  const topo = y - total / 2;
+  return <div style={{position: 'absolute', inset: 0}}>
+    {linhas.map((l, i) => {
+      const tam = tams[i], alt = alts[i];
+      const top = topo + alts.slice(0, i).reduce((a, b) => a + b + gap, 0);
+      const e = ESQ[(esquema[i % esquema.length] as 'a' | 'p' | 'b')] ?? ESQ.a;
+      const t = f - (inicio + i * intervalo);
+      const p = eb(t / 8, 2.2);
+      const dir = i % 2 === 0 ? -1 : 1;
+      const sai = fim === undefined ? 0 : seg(f, fim + i * 2, fim + i * 2 + 6);
+      return <div key={i} style={{position: 'absolute', left: SEGURA.lado, top: top, height: alt, lineHeight: `${alt}px`, padding: '0 22px', background: e.bg, color: e.fg, fontFamily: FONTE.titulo, fontWeight: 800, fontSize: tam, letterSpacing: '-0.04em', whiteSpace: 'nowrap', opacity: t < 0 ? 0 : 1, transform: `translateX(${(1 - p) * 1400 * dir + sai * 1400 * -dir}px)`}}>
+        {pedacos(l.toUpperCase()).map((s, j) => <span key={j} style={s.d ? {background: e.fg, color: e.bg, padding: '0 10px', margin: '0 -10px'} : undefined}>{s.t}</span>)}
+      </div>;
+    })}
+  </div>;
+};