primocode 11.0.0 → 11.1.0

package/materiais/bauhaus/regras.md

@@ -0,0 +1,127 @@
+# Regras do estilo bauhaus (Bauhaus)
+
+Estas regras valem para QUEM MONTA. Não existe vídeo pronto aqui: só peças (`pecas.json`). Cada cena é escrita do zero, peça a peça.
+
+## Regras do kit: cor
+| token | hex | uso |
+|---|---|---|
+| `papel` | #EFE8D8 | chão, texto sobre barra escura |
+| `vermelho` | #D9261C | barra, círculo, rótulo |
+| `azul` | #1B4F9C | barra, quadrado |
+| `amarelo` | #F4B71A | barra, triângulo, círculo de fundo (texto preto em cima) |
+| `preto` | #141414 | texto, barra, régua, linhas |
+
+- Sem degradê, sombra ou contorno. Grade: `rgba(20,20,20,0.09)` a cada 90 px, traço de 2 px.
+- Sobre vermelho, azul e preto o texto é `papel`; sobre amarelo e papel o texto é `preto`.
+- O cliente pode trocar: as três primárias (vermelho, azul, amarelo) para as cores da marca, mantendo o preto e o papel.
+
+## Regras do kit: 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.
+
+## Regras do kit: area-segura
+- Tudo que se lê fica entre **y = 168** e **y = 1330** e entre **x = 80** e **x = 1000** (920 px úteis). Abaixo de 1330 só fundo e o que sangra.
+- Herói com 40% ou mais da altura ou da largura; no máximo 2 apoios por cena.
+
+| uso | y de referência (px) |
+|---|---|
+| título de 3 barras (centro) | 700 |
+| composição geométrica (centro) | 720 |
+| faixa diagonal (centro) | 740 |
+| número (centro) | 700 |
+| lista de barras (centro) | 740 |
+| logo de formas (topo) | 330 |
+| nome na assinatura (topo) | 670 |
+| endereço | 1100–1180 |
+
+## Regras do kit: movimento
+- Tela 1080×1920, 30 fps. Curva padrão: `mola(t) com overshoot 1,2–1,4 (precisa, sem balanço) em 10–14 quadros`.
+- Passo de animação: **1 quadro(s)** por posição (liso).
+- Câmera: zoom base 1.02, deriva ±10 px × ±8 px, giro ±0.004 rad, soco de 0.025 em cada batida (decai em 7 quadros).
+- Toda entrada passa do alvo e volta (overshoot de 1,3). Nenhum quadro parado.
+
+| movimento | quadros | valores |
+|---|---|---|
+| barra do título corre | 10 | escala X 0 → 1 (origem esquerda), overshoot 1,3; texto sobe da máscara 4 quadros depois |
+| forma entra | 14 | desliza 900 px de um canto, gira 200°, trava; 3 quadros entre formas |
+| faixa diagonal | 12 | varre 1900 px; texto corre 26 px/quadro |
+| lista | 11 + 6 entre barras | entra 1200 px de lados alternados |
+| número | 12 + 6 | máscara de baixo para cima; quadrado gira 0,8°/quadro |
+| câmera | contínuo | zoom 1,02 ± 0,01, deriva ±10 × ±8 px, soco 0,025 |
+
+- Cena entra em 12 quadros e sobrepõe 10 com a próxima; cortes a cada 18–45 quadros.
+
+## Regras do kit: ritmo
+- Trilha a **118 bpm**: 1 batida = **15.25 quadros** (0.51 s). Corte em múltiplos de batida (8, 15, 31 quadros).
+
+| batida | duração s | quadros |
+|---|---|---|
+| gancho | 1.3–2.7 | 40–80 |
+| virada | 1.3–3.0 | 40–90 |
+| prova | 1.2–3.0 | 36–90 |
+| lista | 1.2–2.7 | 36–80 |
+| data | 1.0–2.3 | 30–70 |
+| marca | 1.3–4.0 | 40–120 |
+
+- Tempo mínimo de leitura: 1 palavra = 8 quadros, frase de 3 palavras = 24 quadros.
+- Troca de cena a cada 0,6–1,5 s (18–45 quadros). Vídeo de 6–60 s.
+
+## Regras do kit: som
+- Trilha: `assets/trilha/trilha.mp3` (8,7 s, 118 bpm, preset MotionCraft `tech-bright`), volume **0,5**, fade de saída nos últimos 20 quadros. Com narração: 0,25.
+- Efeitos sintetizados (pacote `glass`):
+
+| som | volume | quando |
+|---|---|---|
+| `whoosh-entra` | 0,9 | entrada de cena (−1 quadro) |
+| `swoosh` | 1,0 | faixa diagonal e barras |
+| `pop-palavra` | 1,0 | barra de título que trava |
+| `pop-cartao` | 0,9 | forma que trava na composição |
+| `clique` | 0,8 | endereço |
+| `impacto` | 0,9 | fechamento da composição / número |
+| `subida` | 0,7 | antes da data |
+| `assinatura` | 0,9 | logo final |
+
+- No máximo **3 sons por segundo**; nunca o mesmo arquivo duas vezes seguidas.
+- Som entra **1 a 2 quadros antes** do visual. Alvo do mix: **−14 LUFS**, pico −1,5 dBTP.
+
+## Movimento (régua extravagante; liso e calmo é reprovado)
+- A câmera nunca para: use `CameraDeriva` (ou a câmera do estilo) com ao menos 4 chaves `{em, z, x, y}` mudando `z` e `x/y`, uma chave a cada cena. Deriva e leve rotação por baixo, sempre.
+- Em cada corte, um `CorteImpacto` (clarão + tremida + zoom-pop) casado com o som `impacto` 1 a 2 quadros antes.
+- Toda cena tem fundo vivo (`Particulas` + o fundo do estilo), pelo menos 1 herói e 2 apoios em movimento. Cena parada é reprovada.
+- Entrada de elemento: 10-18 quadros com overshoot curto; saída: metade da entrada. Stagger entre itens: 2-5 quadros.
+- Peças 3D e giros valem: quanto mais profundidade (parallax, perspectiva, rotação), melhor, sem sair da área segura.
+
+## Som (camadas)
+- Trilha sempre, volume 0,45, fade de saída 20 quadros.
+- SFX em TODO corte e em toda entrada de elemento grande, no mínimo 2 camadas por corte (ex.: `whoosh-sai` + `impacto`, depois `swoosh` no quadro seguinte). Máx. 6 efeitos por segundo. Nunca o mesmo arquivo duas vezes no mesmo quadro.
+- Sons deste estilo: assinatura, clique, impacto, pop-cartao, pop-palavra, subida, swoosh, tick, whoosh-entra, whoosh-sai.
+
+## Densidade mínima (o conferir cobra isto)
+| medida | mínimo |
+|---|---|
+| camadas visuais simultâneas por cena | 4 (fundo, partículas, herói, apoio) |
+| elementos em movimento por segundo (média da linha do tempo) | 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 com movimento grande sem som.

package/materiais/bauhaus/sons/Som.tsx

@@ -0,0 +1,30 @@
+// Som: efeitos e trilha do kit (sintetizados no MotionCraft, pacote glass). Um som por movimento, 1–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 tick from './tick.mp3';
+import trilha from '../trilha/trilha.mp3';
+
+export const SONS = {'whoosh-entra': whooshEntra, 'whoosh-sai': whooshSai, swoosh, 'pop-palavra': popPalavra, 'pop-cartao': popCartao, clique, impacto, subida, assinatura, tick} as const;
+export type NomeSom = keyof typeof SONS;
+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.9, subida: 0.7, assinatura: 0.9, tick: 0.6};
+
+export type EfeitoProps = {som: NomeSom; em: number; volume?: number};
+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; saida?: number};
+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'})} />;
+};

package/materiais/bauhaus/texturas/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/materiais/bauhaus/texturas/Particulas.tsx

@@ -0,0 +1,22 @@
+// Particulas: camada de pontos e traços que flutuam o tempo todo (parallax em 3 profundidades). Dá movimento
+// de fundo sem competir com o herói. Determinística: a mesma `semente` dá o mesmo desenho em qualquer render.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame, useVideoConfig} from 'remotion';
+
+export type ParticulasProps = {quantidade?: number; cor?: string; semente?: number; velocidade?: number; opacidade?: number};
+
+const rnd = (n: number) => { const x = Math.sin(n * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x); };
+
+export const Particulas: React.FC<ParticulasProps> = ({quantidade = 36, cor = '#F4B71A', semente = 1, velocidade = 1, opacidade = 0.55}) => {
+  const f = useCurrentFrame();
+  const {width: L, height: A} = useVideoConfig();
+  return <AbsoluteFill style={{pointerEvents: 'none'}}>
+    {Array.from({length: quantidade}, (_, i) => {
+      const prof = 0.4 + rnd(i + semente) * 1.2;
+      const x = ((rnd(i * 3 + semente) * L + f * 0.9 * prof * velocidade) % (L + 80)) - 40;
+      const y = ((rnd(i * 7 + semente) * A - f * 1.6 * prof * velocidade) % (A + 80) + (A + 80)) % (A + 80) - 40;
+      const tam = 3 + prof * 5, pisca = 0.55 + 0.45 * Math.sin(f / (9 + i % 7) + i);
+      return <div key={i} style={{position: 'absolute', left: x, top: y, width: tam, height: i % 3 === 0 ? tam * 4 : tam, borderRadius: tam, background: cor, opacity: opacidade * pisca * Math.min(1, prof)}} />;
+    })}
+  </AbsoluteFill>;
+};

package/materiais/bauhaus/tipografia/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/materiais/bauhaus/tipografia/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/materiais/bauhaus/tipografia/TituloBauhaus.tsx

@@ -0,0 +1,32 @@
+// TituloBauhaus: 1 a 4 linhas em Jost 900 MAIÚSCULA, cada uma sobre uma barra de cor primária (ou preto) do tamanho exato do texto,
+// alinhadas à esquerda. A barra corre da esquerda e o texto sobe de dentro de uma máscara. Assimetria é regra.
+import React from 'react';
+import {COR, FONTE_TITULO, LARGURA_UTIL, SEGURA, caber, larguraTexto, mola, seg, useF} from '../base';
+
+export type LinhaBauhaus = string | {texto: string; fundo?: string; cor?: string; tamanho?: number};
+export type TituloBauhausProps = {linhas: LinhaBauhaus[]; inicio?: number; intervalo?: number; y?: number; tamanho?: number; fundos?: string[]; alinhar?: 'esquerda' | 'direita'; fim?: number};
+const ESCURAS = [COR.preto, COR.vermelho, COR.azul];
+
+export const TituloBauhaus: React.FC<TituloBauhausProps> = ({linhas, inicio = 0, intervalo = 6, y = 700, tamanho = 190, fundos = [COR.preto, COR.vermelho, COR.azul, COR.amarelo], alinhar = 'esquerda', fim}) => {
+  const f = useF();
+  const L = linhas.map((l) => (typeof l === 'string' ? {texto: l.toUpperCase()} : {...l, texto: l.texto.toUpperCase()}));
+  const tams = L.map((l) => caber(l.texto, l.tamanho ?? tamanho, LARGURA_UTIL - 70, FONTE_TITULO, 900, -0.02));
+  const alts = tams.map((t) => t * 1.0);
+  const total = alts.reduce((a, b) => a + b, 0) + (L.length - 1) * 14;
+  let acc = y - total / 2;
+  return <>{L.map((l, i) => {
+    const topo = acc; acc += alts[i] + 14;
+    const t0 = inicio + i * intervalo;
+    const p = mola(seg(f, t0, t0 + 10), 1.3);
+    const pt = mola(seg(f, t0 + 4, t0 + 14), 1.2);
+    const sai = fim === undefined ? 0 : seg(f, fim + i * 2, fim + i * 2 + 8);
+    const w = larguraTexto(l.texto, tams[i], FONTE_TITULO, 900, -0.02) + tams[i] * 0.34;
+    const fundo = l.fundo ?? fundos[i % fundos.length];
+    const cor = l.cor ?? (ESCURAS.includes(fundo) ? COR.papel : COR.preto);
+    const x = alinhar === 'esquerda' ? 96 : 1080 - 96 - w;
+    const dir = alinhar === 'esquerda' ? 1 : -1;
+    return <div key={i} style={{position: 'absolute', left: x + dir * sai * -1200, top: topo, width: w, height: alts[i], transformOrigin: alinhar === 'esquerda' ? '0 50%' : '100% 50%', transform: `scaleX(${Math.max(0.001, p)})`, background: fundo, overflow: 'hidden', opacity: f >= t0 ? 1 : 0}}>
+      <div style={{position: 'absolute', left: tams[i] * 0.17, top: 0, height: '100%', display: 'flex', alignItems: 'center', fontFamily: FONTE_TITULO, fontWeight: 900, fontSize: tams[i], letterSpacing: '-0.02em', lineHeight: 1, color: cor, whiteSpace: 'nowrap', transform: `translateY(${(1 - pt) * alts[i]}px) scaleX(${1 / Math.max(0.001, p)})`, transformOrigin: '0 50%'}}>{l.texto}</div>
+    </div>;
+  })}</>;
+};

package/materiais/bauhaus/transicoes/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/materiais/bauhaus/transicoes/CorteImpacto.tsx

@@ -0,0 +1,16 @@
+// CorteImpacto: o soco de um corte. Num quadro `em` ele solta um clarão, treme o conteúdo (decai em ~10 quadros)
+// e faz um zoom-pop. Envolve as camadas que devem tremer; ponha um som de batida 1 a 2 quadros antes de `em`.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+
+export type CorteImpactoProps = {em: number; forca?: number; clarao?: boolean; corClarao?: string; children?: React.ReactNode};
+
+export const CorteImpacto: React.FC<CorteImpactoProps> = ({em, forca = 1, clarao = true, corClarao = '#ffffff', children}) => {
+  const f = useCurrentFrame();
+  const d = f >= em ? Math.exp(-(f - em) / 6) * forca : 0;
+  const dx = Math.sin((f - em) * 2.9) * 22 * d, dy = Math.cos((f - em) * 3.7) * 16 * d, s = 1 + 0.045 * d;
+  return <AbsoluteFill>
+    <AbsoluteFill style={{transform: `translate(${dx}px, ${dy}px) scale(${s})`}}>{children}</AbsoluteFill>
+    {clarao && d > 0.02 && <AbsoluteFill style={{background: corClarao, opacity: Math.min(0.55, d * 0.6), pointerEvents: 'none'}} />}
+  </AbsoluteFill>;
+};

package/materiais/brutalista/base.ts

@@ -0,0 +1,71 @@
+// Base do kit brutalista: cores, fontes, curvas e medidas. Todo número visual sai daqui.
+// Os elementos importam só este arquivo, 'react' e 'remotion'. Nada de fora da pasta do kit.
+import {continueRender, delayRender} from 'remotion';
+import fonte0 from './fontes/jetbrains-mono.woff2';
+import fonte1 from './fontes/archivo-black.woff2';
+
+// ---------- tela ----------
+export const LARGURA = 1080, ALTURA = 1920, FPS = 30;
+// área segura (Reels/TikTok): o que se lê fica entre estas linhas
+export const SEGURA = {topo: 168, base: 1330, lado: 80};
+export const LARGURA_UTIL = LARGURA - SEGURA.lado * 2; // 920 px
+
+// ---------- cor ----------
+export const COR = {
+  branco: '#FFFFFF',
+  preto: '#000000',
+  amarelo: '#FFE600'
+};
+
+// ---------- fonte ----------
+// Nome de família com o prefixo do kit ("BR ..."), pra não colidir com outro kit no mesmo estúdio.
+export const FONTE = {
+  titulo: '"BR JetBrains Mono", Menlo, Courier New, monospace',
+  apoio: '"BR Archivo Black", Impact, Arial Black, sans-serif',
+};
+type G = {__kit_brutalista?: boolean};
+if (typeof document !== 'undefined' && !(globalThis as G).__kit_brutalista) {
+  (globalThis as G).__kit_brutalista = true;
+  const h = delayRender('brutalista: fontes');
+  Promise.all([
+    new FontFace('BR JetBrains Mono', `url(${fonte0}) format('woff2')`, {weight: '500 800', style: 'normal'}).load(),
+    new FontFace('BR Archivo Black', `url(${fonte1}) format('woff2')`, {weight: '400', style: 'normal'}).load(),
+  ]).then((fs) => {fs.forEach((ff) => document.fonts.add(ff)); continueRender(h);}).catch(() => continueRender(h));
+}
+
+// ---------- tempo e curva ----------
+export const c01 = (t: number) => Math.max(0, Math.min(1, t));
+/** progresso 0..1 de f entre a e b */
+export const seg = (f: number, a: number, b: number) => c01((f - a) / (b - a));
+/** saída rápida e pouso longo, parecida com cubic-bezier(.2,.8,.2,1) */
+export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
+/** easeOutBack: passa do destino em ~10% e volta (toda entrada tem overshoot) */
+export const eb = (t: number, s = 1.70158) => {const x = c01(t) - 1; return 1 + (s + 1) * x * x * x + s * x * x;};
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+/** uma batida da trilha do kit (108 bpm) em quadros */
+export const BATIDA = 16.67;
+
+// ---------- medida de texto ----------
+let canvas: HTMLCanvasElement | null = null;
+const cache = new Map<string, number>();
+export const larguraTexto = (texto: string, tamanho: number, peso = 800, trackingEm = -0.04, familia = 'BR JetBrains Mono'): number => {
+  const chave = `${texto}|${tamanho}|${peso}|${trackingEm}|${familia}`;
+  const c = cache.get(chave); if (c !== undefined) return c;
+  if (typeof document === 'undefined') return texto.length * tamanho * 0.58;
+  canvas = canvas || document.createElement('canvas');
+  const ctx = canvas.getContext('2d'); if (!ctx) return texto.length * tamanho * 0.58;
+  const fonte = `${peso} ${tamanho}px "${familia}"`;
+  ctx.font = fonte;
+  const w = ctx.measureText(texto).width + texto.length * trackingEm * tamanho;
+  if (document.fonts.check(fonte)) cache.set(chave, w);
+  return w;
+};
+/** o maior tamanho até `tamanho` em que o texto cabe em `largura` (nunca palavra cortada) */
+export const caber = (texto: string, tamanho: number, largura = LARGURA_UTIL, peso = 800, trackingEm = -0.04, familia = 'BR JetBrains Mono') => {
+  const w = larguraTexto(texto, tamanho, peso, trackingEm, familia);
+  return w > largura ? Math.floor(tamanho * (largura / w)) : tamanho;
+};
+/** tira os asteriscos de destaque: "Usar *IA*" -> "Usar IA" */
+export const textoLimpo = (t: string) => t.replace(/\*/g, '');
+/** quebra "a *b* c" em pedaços {t, d}: d = true quando estava entre asteriscos */
+export const pedacos = (t: string) => t.split(/(\*[^*]+\*)/).filter(Boolean).map((p) => p.startsWith('*') ? {t: p.slice(1, -1), d: true} : {t: p, d: false});

package/materiais/brutalista/camera/CameraDeriva.tsx

@@ -0,0 +1,37 @@
+// CameraDeriva: câmera 3D que nunca para. `chaves` [{em, z, x?, y?, giro?}] levam o foco de uma chave à outra (suave),
+// e por baixo roda uma deriva (balanço, respiração de zoom, leve rotação em perspectiva) que não pára nunca.
+// z é o zoom (1 = enquadramento normal; 1.3 = 30% mais perto); x/y deslocam o foco em px; giro é a inclinação em graus.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame, useVideoConfig} from 'remotion';
+
+export type ChaveCamera = {em: number; z?: number; x?: number; y?: number; giro?: number};
+export type CameraDerivaProps = {chaves?: ChaveCamera[]; deriva?: number; perspectiva?: number; children: React.ReactNode};
+
+const suave = (t: number) => { const c = Math.min(1, Math.max(0, t)); return c * c * (3 - 2 * c); };
+const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+
+export const posCameraDeriva = (f: number, chaves: ChaveCamera[], deriva = 1) => {
+  const ks = chaves.length ? [...chaves].sort((a, b) => a.em - b.em) : [{em: 0, z: 1}];
+  let z = ks[0].z ?? 1, x = ks[0].x ?? 0, y = ks[0].y ?? 0, g = ks[0].giro ?? 0;
+  for (let i = 0; i < ks.length - 1; i++) {
+    const a = ks[i], b = ks[i + 1];
+    if (f >= a.em) {
+      const t = suave((f - a.em) / Math.max(1, b.em - a.em));
+      z = lerp(a.z ?? 1, b.z ?? 1, t); x = lerp(a.x ?? 0, b.x ?? 0, t); y = lerp(a.y ?? 0, b.y ?? 0, t); g = lerp(a.giro ?? 0, b.giro ?? 0, t);
+    }
+  }
+  const escala = z * (1 + deriva * (0.03 * Math.sin(f / 90) + 0.00015 * f));
+  return {escala, dx: Math.sin(f / 70) * 12 * deriva - x * escala, dy: Math.cos(f / 90) * 9 * deriva - y * escala,
+    rotZ: g + Math.sin(f / 130) * 0.8 * deriva, rotX: 3 * Math.cos(f / 110) * deriva, rotY: 4 * Math.sin(f / 95) * deriva};
+};
+
+export const CameraDeriva: React.FC<CameraDerivaProps> = ({chaves = [], deriva = 1, perspectiva = 2400, children}) => {
+  const {width: L, height: A} = useVideoConfig();
+  const c = posCameraDeriva(useCurrentFrame(), chaves, deriva);
+  return <AbsoluteFill style={{perspective: perspectiva, perspectiveOrigin: `${L / 2}px ${A / 2}px`}}>
+    <AbsoluteFill style={{transformOrigin: `${L / 2}px ${A / 2}px`,
+      transform: `translate(${c.dx}px, ${c.dy}px) rotateX(${c.rotX}deg) rotateY(${c.rotY}deg) rotateZ(${c.rotZ}deg) scale(${c.escala})`}}>
+      {children}
+    </AbsoluteFill>
+  </AbsoluteFill>;
+};

package/materiais/brutalista/cores/paleta.json

@@ -0,0 +1,25 @@
+{
+  "estilo": "brutalista",
+  "cor": {
+    "branco": "#FFFFFF",
+    "preto": "#000000",
+    "amarelo": "#FFE600"
+  },
+  "video": {
+    "largura": 1080,
+    "altura": 1920,
+    "fps": 30,
+    "segura": {
+      "topo": 168,
+      "base": 1330,
+      "lado": 80
+    }
+  },
+  "particulas": {
+    "cor": "#FFE600"
+  },
+  "batida": {
+    "bpm": 108,
+    "quadros": 17
+  }
+}

package/materiais/brutalista/formas/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/materiais/brutalista/formas/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/materiais/brutalista/formas/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/materiais/brutalista/formas/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/materiais/brutalista/formas/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>;
+};

package/materiais/brutalista/formas/QuadroCor.tsx

@@ -0,0 +1,14 @@
+// QuadroCor: a cortina de cor que troca a tela. Um bloco chapado cobre tudo da esquerda para a direita em 6 quadros
+// (seco, com um tranco de 5% no fim). Primeira camada de quase toda cena.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, eb, seg} from '../base';
+
+export type QuadroCorProps = {cor?: 'amarelo' | 'preto' | 'branco'; inicio?: number; direcao?: 'esquerda' | 'baixo'};
+
+export const QuadroCor: React.FC<QuadroCorProps> = ({cor = 'amarelo', inicio = 0, direcao = 'esquerda'}) => {
+  const f = useCurrentFrame();
+  const p = eb(seg(f, inicio, inicio + 6), 0.8);
+  const tf = direcao === 'esquerda' ? `translateX(${(1 - p) * -1180}px)` : `translateY(${(1 - p) * -2000}px)`;
+  return <div style={{position: 'absolute', inset: -40, background: COR[cor], transform: tf}} />;
+};