primocode 10.17.1 → 11.0.0

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>;
+};

package/kits/bauhaus/elementos/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 '../assets/sons/whoosh-entra.mp3';
+import whooshSai from '../assets/sons/whoosh-sai.mp3';
+import swoosh from '../assets/sons/swoosh.mp3';
+import popPalavra from '../assets/sons/pop-palavra.mp3';
+import popCartao from '../assets/sons/pop-cartao.mp3';
+import clique from '../assets/sons/clique.mp3';
+import impacto from '../assets/sons/impacto.mp3';
+import subida from '../assets/sons/subida.mp3';
+import assinatura from '../assets/sons/assinatura.mp3';
+import tick from '../assets/sons/tick.mp3';
+import trilha from '../assets/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/kits/bauhaus/elementos/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/kits/bauhaus/elementos/base.ts

@@ -0,0 +1,74 @@
+// Base do kit bauhaus: cores, fontes, curvas, passo e medidas. Todo número visual sai daqui.
+// Os elementos importam só este arquivo, 'react' e 'remotion'.
+import {continueRender, delayRender, useCurrentFrame} from 'remotion';
+import fonte0 from '../assets/fontes/jost-900.woff2';
+import fonte1 from '../assets/fontes/bebas-neue.woff2';
+
+// ---------- tela ----------
+export const LARGURA = 1080, ALTURA = 1920, FPS = 30;
+export const SEGURA = {topo: 168, base: 1330, lado: 80};
+export const LARGURA_UTIL = LARGURA - SEGURA.lado * 2; // 920 px
+
+// ---------- cor ----------
+export const COR = {
+  "papel": "#EFE8D8",
+  "vermelho": "#D9261C",
+  "azul": "#1B4F9C",
+  "amarelo": "#F4B71A",
+  "preto": "#141414"
+};
+
+// ---------- fonte ----------
+export const FONTE_TITULO = '"BH Jost", Futura, sans-serif';
+export const FONTE_TEXTO = '"BH Bebas Neue", Impact, sans-serif';
+const FONTES: [string, string, string][] = [['BH Jost', fonte0, '900'], ['BH Bebas Neue', fonte1, '400']];
+if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__k_bauhaus) {
+  (globalThis as Record<string, unknown>).__k_bauhaus = true;
+  const h = delayRender('bauhaus: fontes');
+  Promise.all(FONTES.map(([nome, url, peso]) => new FontFace(nome, `url(${url}) format('woff2')`, {weight: peso, style: 'normal'}).load().then((ff) => {document.fonts.add(ff);}).catch(() => undefined)))
+    .then(() => continueRender(h));
+}
+
+// ---------- tempo e curva ----------
+/** passo da animação: 1 = liso, 2 ou 3 = movimento em passos (stop-motion / 8 bits) */
+export const PASSO = 1;
+export const q = (f: number) => Math.floor(f / PASSO) * PASSO;
+/** quadro atual da cena, já em passos */
+export const useF = () => q(useCurrentFrame());
+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 */
+export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
+/** passa do alvo e volta (overshoot ~1.3) */
+export const mola = (t: number, s = 1.3) => { const x = c01(t) - 1; return x * x * ((s + 1) * x + s) + 1; };
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+/** ruído determinístico 0..1 */
+export const ruido = (n: number) => { const x = Math.sin(n * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x); };
+/** uma batida da trilha do kit (118 bpm) em quadros */
+export const BATIDA = 15.25;
+
+// ---------- medida de texto ----------
+let canvas: HTMLCanvasElement | null = null;
+const cache = new Map<string, number>();
+export const larguraTexto = (texto: string, tamanho: number, familia = FONTE_TITULO, peso = 900, trackingEm = 0): number => {
+  const chave = `${texto}|${tamanho}|${familia}|${peso}|${trackingEm}`;
+  const c = cache.get(chave); if (c !== undefined) return c;
+  if (typeof document === 'undefined') return texto.length * tamanho * 0.6;
+  canvas = canvas || document.createElement('canvas');
+  const ctx = canvas.getContext('2d'); if (!ctx) return texto.length * tamanho * 0.6;
+  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` */
+export const caber = (texto: string, tamanho: number, largura = LARGURA_UTIL, familia = FONTE_TITULO, peso = 900, trackingEm = 0) => {
+  const w = larguraTexto(texto, tamanho, familia, peso, trackingEm);
+  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, '');
+/** divide "Usar *IA* já" em [{t:'Usar ',d:false},{t:'IA',d:true},{t:' já',d:false}] */
+export const comDestaque = (t: string) => t.split('*').map((p, i) => ({t: p, d: i % 2 === 1})).filter((p) => p.t !== '');

package/kits/bauhaus/elementos/index.ts

@@ -0,0 +1,16 @@
+// Tudo que o kit bauhaus oferece.
+export * from './base';
+export {Fundo} from './Fundo';
+export {Overlay} from './Overlay';
+export {Camera, posCamera} from './Camera';
+export {Cena, useDuracaoCena, SOBREPOE} from './Cena';
+export {AssinaturaMarca} from './AssinaturaMarca';
+export {BarraDiagonal} from './BarraDiagonal';
+export {ComposicaoGeometrica} from './ComposicaoGeometrica';
+export {ListaFaixas} from './ListaFaixas';
+export {NumeroBauhaus} from './NumeroBauhaus';
+export {TituloBauhaus} from './TituloBauhaus';
+export {Efeito, Trilha, SONS} from './Som';
+export type {NomeSom} from './Som';
+export {Montagem, ELEMENTOS} from './Montagem';
+export type {Plano, CenaPlano, Camada} from './Montagem';

package/kits/bauhaus/exemplos/plano.json

@@ -0,0 +1,221 @@
+{
+  "kit": "bauhaus",
+  "roteiro": "exemplos/roteiro.md",
+  "duracao": 240,
+  "trilha": {
+    "volume": 0.5
+  },
+  "cenas": [
+    {
+      "batida": "gancho",
+      "de": 0,
+      "ate": 50,
+      "entrada": "nenhuma",
+      "naTela": "\"FORMA / SEGUE A / FUNÇÃO\" em barras (só o título, com respiro)",
+      "camadas": [
+        {
+          "elemento": "TituloBauhaus",
+          "props": {
+            "linhas": [
+              "FORMA",
+              "SEGUE A",
+              "FUNÇÃO"
+            ],
+            "inicio": 2,
+            "intervalo": 7,
+            "y": 760,
+            "tamanho": 200
+          }
+        }
+      ],
+      "socos": [
+        22
+      ],
+      "sons": [
+        {
+          "som": "whoosh-entra",
+          "em": 0
+        },
+        {
+          "som": "pop-palavra",
+          "em": 3
+        },
+        {
+          "som": "pop-palavra",
+          "em": 10
+        },
+        {
+          "som": "impacto",
+          "em": 20
+        }
+      ]
+    },
+    {
+      "batida": "prova",
+      "de": 50,
+      "ate": 98,
+      "entrada": "zoom",
+      "naTela": "composição geométrica (herói isolado)",
+      "camadas": [
+        {
+          "elemento": "ComposicaoGeometrica",
+          "props": {
+            "preset": "a",
+            "y": 740,
+            "escala": 1
+          }
+        }
+      ],
+      "sons": [
+        {
+          "som": "whoosh-entra",
+          "em": -1
+        },
+        {
+          "som": "pop-cartao",
+          "em": 2
+        },
+        {
+          "som": "pop-cartao",
+          "em": 8
+        },
+        {
+          "som": "impacto",
+          "em": 18
+        }
+      ]
+    },
+    {
+      "batida": "virada",
+      "de": 98,
+      "ate": 140,
+      "entrada": "direita",
+      "naTela": "faixa diagonal \"EXPOSIÇÃO\"",
+      "camadas": [
+        {
+          "elemento": "BarraDiagonal",
+          "props": {
+            "texto": "EXPOSIÇÃO",
+            "y": 760,
+            "rot": -14,
+            "tamanho": 210
+          }
+        }
+      ],
+      "sons": [
+        {
+          "som": "swoosh",
+          "em": -1
+        },
+        {
+          "som": "pop-palavra",
+          "em": 10
+        }
+      ]
+    },
+    {
+      "batida": "lista",
+      "de": 140,
+      "ate": 180,
+      "entrada": "esquerda",
+      "naTela": "barras 01 CADEIRAS / 02 CARTAZES / 03 PRÉDIOS",
+      "camadas": [
+        {
+          "elemento": "ListaFaixas",
+          "props": {
+            "itens": [
+              "Cadeiras",
+              "Cartazes",
+              "Prédios"
+            ],
+            "intervalo": 6,
+            "y": 760,
+            "altura": 240
+          }
+        }
+      ],
+      "sons": [
+        {
+          "som": "swoosh",
+          "em": -1
+        },
+        {
+          "som": "pop-cartao",
+          "em": 2
+        },
+        {
+          "som": "pop-cartao",
+          "em": 8
+        },
+        {
+          "som": "pop-cartao",
+          "em": 14
+        }
+      ]
+    },
+    {
+      "batida": "data",
+      "de": 180,
+      "ate": 212,
+      "entrada": "zoom",
+      "naTela": "número \"5\" gigante + rótulo DEZEMBRO",
+      "camadas": [
+        {
+          "elemento": "NumeroBauhaus",
+          "props": {
+            "valor": "5",
+            "rotulo": "DEZEMBRO",
+            "formas": [
+              "#D9261C",
+              "#F4B71A"
+            ],
+            "y": 700
+          }
+        }
+      ],
+      "sons": [
+        {
+          "som": "subida",
+          "em": -10,
+          "volume": 0.55
+        },
+        {
+          "som": "impacto",
+          "em": 3
+        },
+        {
+          "som": "pop-palavra",
+          "em": 10
+        }
+      ]
+    },
+    {
+      "batida": "marca",
+      "de": 212,
+      "ate": 240,
+      "entrada": "subir",
+      "naTela": "logo de 3 formas + \"FORMA\" + detalhe + endereço",
+      "camadas": [
+        {
+          "elemento": "AssinaturaMarca",
+          "props": {
+            "nome": "Forma",
+            "detalhe": "Exposição · entrada gratuita",
+            "endereco": "formaefuncao.exemplo",
+            "inicio": 0
+          }
+        }
+      ],
+      "sons": [
+        {
+          "som": "assinatura",
+          "em": 2
+        },
+        {
+          "som": "clique",
+          "em": 22
+        }
+      ]
+    }
+  ]
+}

package/kits/bauhaus/exemplos/roteiro.md

@@ -0,0 +1,20 @@
+# Roteiro de demonstração · "Forma & Função" (fictício)
+
+Pedido: *"um reels de 8 s anunciando a exposição "Forma e Função", sobre design modernista, dia 5 de dezembro, entrada gratuita. Estilo Bauhaus."*
+
+Sem narração: os cortes seguem a trilha (1 batida = 15.25 quadros).
+
+| # | batida | quadros | na tela | elemento | som |
+|---|---|---|---|---|---|
+| 1 | gancho | 0–50 | "FORMA / SEGUE A / FUNÇÃO" em barras (só o título, com respiro) | TituloBauhaus | whoosh-entra, pop-palavra, impacto |
+| 2 | prova | 50–98 | composição geométrica (herói isolado) | ComposicaoGeometrica | whoosh-entra, pop-cartao, impacto |
+| 3 | virada | 98–140 | faixa diagonal "EXPOSIÇÃO" | BarraDiagonal | swoosh, pop-palavra |
+| 4 | lista | 140–180 | barras 01 CADEIRAS / 02 CARTAZES / 03 PRÉDIOS | ListaFaixas | swoosh, pop-cartao |
+| 5 | data | 180–212 | número "5" gigante + rótulo DEZEMBRO | NumeroBauhaus | subida, impacto, pop-palavra |
+| 6 | marca | 212–240 | logo de 3 formas + "FORMA" + detalhe + endereço | AssinaturaMarca | assinatura, clique |
+
+Como a IA chegou nisso:
+1. Cortou em frases curtas ("Forma", "segue a função", "100 obras", "5 dez").
+2. Pegou as obrigatórias (gancho, virada, marca) e as do pedido (prova com número, lista, data).
+3. Encaixou os cortes nas batidas de 118 bpm (15,3 quadros) e alternou composição, faixa e barras.
+4. Escreveu `plano.json`; `preview.tsx` passa para `Montagem`.

package/kits/bauhaus/preview.tsx

@@ -0,0 +1,12 @@
+// Preview do kit: demo de 8 s montada SÓ com os elementos do kit, a partir de exemplos/plano.json.
+// O estúdio registra isto como `Kit-bauhaus`.
+import React from 'react';
+import {Montagem, Plano} from './elementos';
+import plano from './exemplos/plano.json';
+
+
+const arquivos: Record<string, string> = {};
+
+const Preview: React.FC = () => <Montagem plano={plano as Plano} arquivos={arquivos} />;
+
+export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 44, Componente: Preview};