primocode 10.19.0 → 11.1.0

package/materiais/campos-de-cor/regras.md

@@ -0,0 +1,125 @@
+# Regras do estilo campos-de-cor (Campos de cor)
+
+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 |
+|---|---|---|
+| `tinta` | `#101010` | campo escuro, texto sobre claro |
+| `creme` | `#F1EDE4` | campo claro, texto sobre escuro |
+| `vermelho` | `#F0442A` | campo, asterisco, ponto, logo |
+| `azul` | `#2B3BF0` | campo da forma geométrica |
+| `lima` | `#DDFF3A` | campo de data / explosão |
+
+- Campos **chapados**: nenhum degradê. Faixa diagonal opcional: `rgba(255,255,255,0.18)`.
+- Texto: `tintaPara(cor)` escolhe tinta ou creme pela luminância (limite 0,5).
+- Ponto da palavra: sempre outra cor do conjunto (creme sobre vermelho, vermelho sobre lima).
+- Regra do contraste: duas cenas seguidas nunca têm o mesmo campo. Ordem de uso sugerida: tinta → vermelho → azul → creme → lima → tinta.
+- O cliente troca vermelho/azul/lima pela paleta da marca; tinta e creme ficam.
+
+## Regras do kit: tipografia
+- Fontes: **Archivo Black** 400 (palavras gigantes, nome), **DM Mono** 500 (HUD, rótulos), **Playfair Display itálico** 500 (frase de apoio). Registradas como `CC Archivo Black`, `CC DM Mono`, `CC Playfair Display`.
+- Archivo Black sempre com `font-weight: 400` (não existe outro peso; nada de negrito falso).
+
+| papel | fonte | tamanho px | tracking | máx. caracteres |
+|---|---|---|---|---|
+| palavra gigante (1 linha) | Archivo Black | 300–400 (encolhe até 760 de largura) | −0,02 em | 7 |
+| palavra gigante (2 linhas) | Archivo Black | 420 | −0,02 em | 4 por linha |
+| frase de apoio | Playfair itálico | 100 | −0,01 em | 24 |
+| título de lista | Playfair itálico | 96 | −0,01 em | 22 |
+| rótulo de régua | DM Mono | 34 | +0,04 em | 12 |
+| HUD (legenda, código de tempo) | DM Mono | 26 | +0,12 em, caixa alta | 28 |
+| faixa de texto | Archivo Black | 0,7 × altura da faixa (119–160) | −0,01 em | 14 |
+
+## Regras do kit: area-segura
+9:16 em 1080×1920: o que se lê fica em **y 168–1330** e **x 108–972** (margem de 10%). Herói: no máximo **760 px** de largura (~70%); o resto é campo de cor. Só os cantos de mira e o HUD (decorativos) ficam em x 60–1020.
+
+| elemento | y de referência (centro) | tamanho do herói |
+|---|---|---|
+| Asterisco | 740 | diâmetro ≈ 700 px |
+| PalavraGigante (1 linha) | 720 | 300–400 px de letra, no máximo 760 de largura |
+| PalavraGigante (2 linhas) | 680 | 2 × 420 px |
+| FormaGeometrica | 740 | ≈ 500 px sem anel (padrão); ≈ 800 px com `anel: true` |
+| ListaRegua | 740 | 5 linhas × 140 px |
+| FitaDeTexto | 1230 (1 faixa) / 760 (3 faixas) | 170–230 px por faixa |
+| LegendaItalica | 1180–1250 | 100 px |
+| HUD | 196 | 26 px |
+
+Um herói por cena + no máximo 2 de apoio.
+
+## Regras do kit: movimento
+Curva padrão `cubic-bezier(.2,.8,.2,1)` (`e5`); entrada com overshoot `eb` (c1 = 2,2).
+
+| movimento | quadros | valores |
+|---|---|---|
+| letra da palavra | 11 (+2 entre letras) | sobe 120% da máscara, scaleY 1,6 → 1, desfoque 10 px → 0 |
+| ponto final | 14 | cai de −300 px com overshoot |
+| saída da palavra | 8 | scaleX 1 → 1,5, desfoque 14 px |
+| forma geométrica | contínua | troca a cada 13–16 quadros; rotação 0,035 rad/quadro; pulso ±4% |
+| asterisco | 18 | scale 0 → 1 com overshoot; gira 3,2°/quadro (começa 3x mais rápido) |
+| bolinha da régua | 34 | uma curva por linha: linear, suave, saída rápida, overshoot, quique |
+| faixa de texto | contínua | 22 px/quadro, sentidos alternados; entra 1080 px de lado em 14 quadros |
+| cortina de cor | 14 | clip da esquerda p/ direita + barra de 90 px na ponta |
+| whip | 8 | 1500 px de lado, skew −14°, desfoque 34 px |
+| câmera | contínua | zoom 1,04 + 0,0005/quadro, deriva 12×10 px, soco +0,05 por batida (decai em 7) |
+
+## Regras do kit: ritmo
+- 1 batida = **14,29 quadros** (126 bpm). **Toda cena troca de campo de cor**: 1,3 a 1,8 s (40–54 quadros).
+- **Pausa depois do golpe:** 15–24 quadros (0,5–0,8 s) parados no lugar depois que a palavra assenta / a forma abre (a câmera segue derivando).
+- Palavra gigante: 1 palavra = 34 quadros mínimo (entrada 11–15 + 19 de pausa).
+
+| batida | duração s | quadros |
+|---|---|---|
+| gancho | 1,2–1,5 | 36–45 |
+| nome | 1,5–1,8 | 45–54 |
+| forma | 1,4–1,7 | 42–50 |
+| lista | 1,5–1,8 | 45–54 |
+| data | 1,5–1,8 | 45–54 |
+| marca | 1,4–1,7 | 42–50 |
+
+Demo de 8 s = 240 quadros = 5 cenas (v2, sem a lista): 0, 40, 94, 140, 194.
+
+## Regras do kit: som
+- Trilha: `assets/trilha/trilha.mp3` (9 s, 126 bpm, preset tech-bright, tom F), volume **0,5**, fade de saída nos últimos **20 quadros**.
+- Com narração: trilha a **0,25**, efeitos a 70%. Pacote de efeitos: MotionCraft `soft-pop`.
+
+| som | volume | quando |
+|---|---|---|
+| `whoosh-entra` | 0,9 | entrada de cena (−1 quadro) |
+| `swoosh` | 1,0 | movimento lateral grande |
+| `whoosh-sai` | 0,8 | saída grande |
+| `pop-palavra` | 1,0 | palavra-chave que entra |
+| `pop-cartao` | 0,9 | peça que pousa |
+| `impacto` | 0,85 | clímax da cena |
+| `subida` | 0,7 | 1,2 s antes de um impacto (sempre resolve nele) |
+| `assinatura` | 0,9 | revelação da marca |
+| `clique` | 0,8 | endereço/CTA aparece |
+
+- **Impacto no corte** para cada campo novo; whoosh só nas cortinas e whips. Máx. **3 sons/s**, 1–2 quadros antes do visual, nunca o mesmo arquivo seguido.
+- Alvo **−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, 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/campos-de-cor/sons/Som.tsx

@@ -0,0 +1,39 @@
+// Som: efeitos e trilha do kit, sintetizados no MotionCraft (ver assets/ASSETS.md).
+// Regra: um som por movimento que importa, 1 a 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 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,
+} as const;
+export type NomeSom = keyof typeof SONS;
+
+// volume de cada efeito (0..1) já calibrado contra a trilha a 0,5
+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.85, subida: 0.7, assinatura: 0.9,
+};
+
+export type EfeitoProps = {som: NomeSom; em: number; volume?: number};
+/** um efeito no quadro `em` (absoluto, ou relativo à Cena se estiver dentro de uma) */
+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; /** quadros de fade no fim */ saida?: number};
+/** a trilha do kit, do quadro 0 ao fim, com fade de saída */
+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/campos-de-cor/texturas/Fundo.tsx

@@ -0,0 +1,11 @@
+// Fundo: o preto-tinta por baixo de tudo, com uma retícula de pontos que corre devagar. Os campos de cor das cenas cobrem isto.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {COR} from '../base';
+
+export const Fundo: React.FC<{velocidade?: number}> = ({velocidade = 1}) => {
+  const f = useCurrentFrame() * velocidade;
+  return <AbsoluteFill style={{background: COR.tinta, backgroundImage: `radial-gradient(${COR.creme} 2px, transparent 2.5px)`, backgroundSize: '90px 90px', backgroundPosition: `${f * 2}px ${f}px`, opacity: 1}}>
+    <AbsoluteFill style={{background: COR.tinta, opacity: 0.88}} />
+  </AbsoluteFill>;
+};

package/materiais/campos-de-cor/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 = '#F0442A', 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/campos-de-cor/tipografia/AssinaturaMarca.tsx

@@ -0,0 +1,18 @@
+// AssinaturaMarca: logo, nome em Archivo Black com ponto colorido, linha de mono e endereço. Sempre a última cena.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_D, FONTE_T, MAX_HEROI, c01, caber, e5, eb, seg} from '../base';
+
+export type AssinaturaMarcaProps = {logo: string; nome: string; detalhe?: string; endereco?: string; cor?: string; ponto?: string; inicio?: number; y?: number};
+
+export const AssinaturaMarca: React.FC<AssinaturaMarcaProps> = ({logo, nome, detalhe, endereco, cor = COR.creme, ponto = COR.vermelho, inicio = 0, y = 700}) => {
+  const f = useCurrentFrame();
+  const lg = eb(seg(f, inicio, inicio + 18)), nm = e5(seg(f, inicio + 6, inicio + 20));
+  const tam = caber(nome, 220, MAX_HEROI, 400, -0.02);
+  return <div style={{position: 'absolute', inset: 0}}>
+    <img src={logo} style={{position: 'absolute', left: 540 - 110, top: y - 300, width: 220, height: 220, transform: `scale(${lg}) rotate(${(1 - lg) * 120}deg)`, opacity: c01(lg * 2)}} />
+    <div style={{position: 'absolute', left: 0, right: 0, top: y - 40, textAlign: 'center', fontFamily: FONTE_D, fontWeight: 400, fontSize: tam, letterSpacing: '-0.02em', lineHeight: 1.05, color: cor, transform: `scaleX(${0.6 + 0.4 * nm})`, opacity: c01(nm * 2)}}>{nome}<span style={{color: ponto}}>.</span></div>
+    {detalhe && <div style={{position: 'absolute', left: 0, right: 0, top: y + tam * 1.1, textAlign: 'center', fontFamily: FONTE_T, fontWeight: 500, fontSize: 28, letterSpacing: '0.14em', textTransform: 'uppercase', color: cor, opacity: c01((f - inicio - 20) / 8)}}>{detalhe}</div>}
+    {endereco && <div style={{position: 'absolute', left: 0, right: 0, top: y + tam * 1.1 + 70, textAlign: 'center', fontFamily: FONTE_T, fontWeight: 500, fontSize: 36, color: ponto, opacity: c01((f - inicio - 26) / 8)}}>{endereco}</div>}
+  </div>;
+};

package/materiais/campos-de-cor/tipografia/FitaDeTexto.tsx

@@ -0,0 +1,24 @@
+// FitaDeTexto: faixas horizontais de cor com uma palavra enorme repetida, cada faixa correndo para um lado.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_D, c01, e5, seg} from '../base';
+import {tintaPara} from '../formas/CampoDeCor';
+
+export type Faixa = {texto: string; cor?: string; tinta?: string; /** 1 = direita, -1 = esquerda */ dir?: number};
+export type FitaDeTextoProps = {faixas: Faixa[]; inicio?: number; y?: number; altura?: number; /** px por quadro */ velocidade?: number};
+
+export const FitaDeTexto: React.FC<FitaDeTextoProps> = ({faixas, inicio = 0, y = 760, altura = 230, velocidade = 22}) => {
+  const f = useCurrentFrame();
+  const topo = y - (faixas.length * altura) / 2;
+  return <div style={{position: 'absolute', inset: 0}}>
+    {faixas.map((fx, i) => {
+      const cor = fx.cor ?? COR.vermelho, tinta = fx.tinta ?? tintaPara(cor), dir = fx.dir ?? (i % 2 ? -1 : 1);
+      const e = e5(seg(f, inicio + i * 3, inicio + 14 + i * 3));
+      const unid = `${fx.texto}  ●  `, w = unid.length * altura * 0.62;
+      const off = ((f - inicio) * velocidade * dir) % w;
+      return <div key={i} style={{position: 'absolute', left: 0, width: 1080, top: topo + i * altura, height: altura, background: cor, overflow: 'hidden', transform: `translateX(${(1 - e) * dir * -1080}px)`, opacity: c01(e * 3)}}>
+        <div style={{position: 'absolute', left: off - w, top: 0, height: altura, display: 'flex', alignItems: 'center', fontFamily: FONTE_D, fontWeight: 400, fontSize: altura * 0.7, color: tinta, whiteSpace: 'pre', letterSpacing: '-0.01em'}}>{unid.repeat(4)}</div>
+      </div>;
+    })}
+  </div>;
+};

package/materiais/campos-de-cor/tipografia/LegendaItalica.tsx

@@ -0,0 +1,12 @@
+// LegendaItalica: a frase de apoio em serifa itálica (Playfair), revelada por uma máscara da esquerda pra direita.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_S, LARGURA_UTIL, MAX_HEROI, SEGURA, caber, e5, seg} from '../base';
+
+export type LegendaItalicaProps = {texto: string; cor?: string; inicio?: number; y?: number; tamanho?: number; alinhar?: 'centro' | 'esquerda'};
+
+export const LegendaItalica: React.FC<LegendaItalicaProps> = ({texto, cor = COR.tinta, inicio = 0, y = 1240, tamanho = 84, alinhar = 'centro'}) => {
+  const f = useCurrentFrame(), e = e5(seg(f, inicio, inicio + 14));
+  const t = caber(texto, tamanho, MAX_HEROI, 500, -0.01, FONTE_S);
+  return <div style={{position: 'absolute', left: SEGURA.lado, width: LARGURA_UTIL, top: y - t * 0.6, textAlign: alinhar === 'centro' ? 'center' : 'left', fontFamily: FONTE_S, fontStyle: 'italic', fontWeight: 500, fontSize: t, lineHeight: 1.2, color: cor, whiteSpace: 'nowrap', clipPath: `inset(0 ${(1 - e) * 100}% 0 0)`, transform: `translateY(${(1 - e) * 30}px)`}}>{texto}</div>;
+};

package/materiais/campos-de-cor/tipografia/PalavraGigante.tsx

@@ -0,0 +1,44 @@
+// PalavraGigante: a palavra em Archivo Black que enche a largura. Cada letra sobe esticada e desfocada e assenta com overshoot;
+// no fim um ponto colorido cai e quica. 1 a 3 linhas.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_D, MAX_HEROI, c01, caber, eb, seg} from '../base';
+
+export type PalavraGiganteProps = {
+  linhas: string[];
+  /** cor da letra */
+  cor?: string;
+  /** cor do ponto final (some se vazio) */
+  ponto?: string;
+  inicio?: number;
+  /** quadros entre uma letra e a próxima */
+  intervalo?: number;
+  y?: number;
+  tamanho?: number;
+  /** quadro em que a palavra sai esticando para os lados */
+  fim?: number;
+};
+
+export const PalavraGigante: React.FC<PalavraGiganteProps> = ({linhas, cor = COR.tinta, ponto = '', inicio = 0, intervalo = 2, y = 720, tamanho = 300, fim}) => {
+  const f = useCurrentFrame();
+  const tams = linhas.map((l) => caber(l + (ponto ? '.' : ''), tamanho, MAX_HEROI, 400, -0.02));
+  const H = tams.map((t) => t * 0.98), total = H.reduce((a, b) => a + b, 0);
+  let n = 0;
+  const sai = fim === undefined ? 0 : seg(f, fim, fim + 8);
+  return <div style={{position: 'absolute', inset: 0, transform: `scaleX(${1 + sai * 0.5})`, opacity: 1 - sai, filter: sai > 0 ? `blur(${sai * 14}px)` : undefined}}>
+    {linhas.map((l, i) => {
+      const top = y - total / 2 + H.slice(0, i).reduce((a, b) => a + b, 0);
+      const ultima = i === linhas.length - 1;
+      return <div key={i} style={{position: 'absolute', left: 0, right: 0, top, height: H[i], display: 'flex', justifyContent: 'center', alignItems: 'flex-end', fontFamily: FONTE_D, fontWeight: 400, fontSize: tams[i], letterSpacing: '-0.02em', lineHeight: `${H[i]}px`, color: cor, whiteSpace: 'pre', overflow: 'hidden'}}>
+        {l.split('').map((ch, j) => {
+          const k = n++, e = eb(seg(f, inicio + k * intervalo, inicio + k * intervalo + 11)), lin = c01((f - inicio - k * intervalo) / 11);
+          return <span key={j} style={{display: 'inline-block', transform: `translateY(${(1 - e) * 120}%) scaleY(${1 + (1 - lin) * 0.6})`, transformOrigin: '50% 100%', filter: lin < 1 ? `blur(${(1 - lin) * 10}px)` : undefined}}>{ch}</span>;
+        })}
+        {ponto && ultima && (() => {
+          const t0 = inicio + n * intervalo + 4, e = c01((f - t0) / 12), q = eb(seg(f, t0, t0 + 14));
+          return <span style={{display: 'inline-block', width: tams[i] * 0.2, height: tams[i] * 0.2, borderRadius: '50%', background: ponto, marginLeft: tams[i] * 0.04, marginBottom: tams[i] * 0.12, transform: `translateY(${(1 - q) * -300}px) scale(${e > 0 ? 1 : 0})`}} />;
+        })()}
+      </div>;
+    })}
+  </div>;
+};

package/materiais/campos-de-cor/transicoes/Cena.tsx

@@ -0,0 +1,46 @@
+// Cena: janela de tempo de um plano. Entra com movimento e sai com movimento (conforme a entrada).
+// Dentro dela, useCurrentFrame() começa em 0. A saída cruza SOBREPOE quadros com a próxima cena.
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {COR, e5, seg, LARGURA} from '../base';
+
+export type Entrada = 'subir' | 'zoom' | 'direita' | 'esquerda' | 'whip' | 'cortina' | 'corte' | 'nenhuma';
+export const SOBREPOE = 10;
+const COM_SAIDA: Entrada[] = ['subir', 'zoom', 'direita', 'esquerda', 'whip'];
+
+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 dur = entrada === 'whip' ? 8 : 12;
+  const en = entrada === 'nenhuma' || entrada === 'corte' ? 0 : 1 - e5(seg(f, 0, dur));
+  const sai = !ultima && COM_SAIDA.includes(entrada);
+  const xo = sai ? e5(seg(f, duracao, duracao + SOBREPOE)) : 0;
+  let tf = '';
+  if (entrada === 'subir') tf += `translateY(${en * 260 - xo * 220}px) scale(${1 + xo * 0.06})`;
+  if (entrada === 'zoom') tf += `scale(${1 + en * 0.9 + xo * 0.5})`;
+  if (entrada === 'direita') tf += `translateX(${en * 760 - xo * 760}px)`;
+  if (entrada === 'esquerda') tf += `translateX(${-en * 760 + xo * 760}px)`;
+  if (entrada === 'whip') tf += `translateX(${en * 1500 - xo * 1500}px) skewX(${(en - xo) * -14}deg)`;
+  const blur = en * (entrada === 'whip' ? 34 : 16) + xo * (entrada === 'whip' ? 34 : 14);
+  const opac = entrada === 'whip' ? 1 : (1 - en * 0.85) * (1 - xo);
+  const corte = entrada === 'cortina' ? e5(seg(f, 0, 14)) : 1;
+  return <AbsoluteFill style={{transform: tf || undefined, opacity: opac, filter: blur > 0.3 ? `blur(${blur}px)` : undefined, clipPath: corte < 1 ? `inset(0 ${(1 - corte) * 100}% 0 0)` : undefined}}>
+    {children}
+    {entrada === 'cortina' && corte < 1 && <div style={{position: 'absolute', top: 0, bottom: 0, left: corte * LARGURA - 90, width: 90, background: COR.cortina}} />}
+  </AbsoluteFill>;
+};
+
+export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'subir', ultima = false, children}) => {
+  const duracao = ate - de;
+  const extra = !ultima && COM_SAIDA.includes(entrada) ? SOBREPOE : 0;
+  return <Sequence from={de} durationInFrames={duracao + extra} layout="none">
+    <CenaCtx.Provider value={{duracao}}>
+      <Janela duracao={duracao} entrada={entrada} ultima={ultima}>{children}</Janela>
+    </CenaCtx.Provider>
+  </Sequence>;
+};

package/materiais/campos-de-cor/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/cartaz-cinetico/base.ts

@@ -0,0 +1,72 @@
+// Base do kit cartaz-cinetico: 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/anton.woff2';
+import fonte1 from './fontes/archivo.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 = {
+  papel: '#EFE6D2',
+  preto: '#111111',
+  vermelho: '#E8381F',
+  azul: '#2438E8'
+};
+
+// ---------- fonte ----------
+// Nome de família com o prefixo do kit ("CC ..."), pra não colidir com outro kit no mesmo estúdio.
+export const FONTE = {
+  titulo: '"CC Anton", Impact, Haettenschweiler, sans-serif',
+  apoio: '"CC Archivo", Arial, sans-serif',
+};
+type G = {__kit_cartaz_cinetico?: boolean};
+if (typeof document !== 'undefined' && !(globalThis as G).__kit_cartaz_cinetico) {
+  (globalThis as G).__kit_cartaz_cinetico = true;
+  const h = delayRender('cartaz-cinetico: fontes');
+  Promise.all([
+    new FontFace('CC Anton', `url(${fonte0}) format('woff2')`, {weight: '400', style: 'normal'}).load(),
+    new FontFace('CC Archivo', `url(${fonte1}) format('woff2')`, {weight: '500 800', 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 (124 bpm) em quadros */
+export const BATIDA = 14.52;
+
+// ---------- medida de texto ----------
+let canvas: HTMLCanvasElement | null = null;
+const cache = new Map<string, number>();
+export const larguraTexto = (texto: string, tamanho: number, peso = 400, trackingEm = -0.005, familia = 'CC Anton'): 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 = 400, trackingEm = -0.005, familia = 'CC Anton') => {
+  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/cartaz-cinetico/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/cartaz-cinetico/cores/paleta.json

@@ -0,0 +1,26 @@
+{
+  "estilo": "cartaz-cinetico",
+  "cor": {
+    "papel": "#EFE6D2",
+    "preto": "#111111",
+    "vermelho": "#E8381F",
+    "azul": "#2438E8"
+  },
+  "video": {
+    "largura": 1080,
+    "altura": 1920,
+    "fps": 30,
+    "segura": {
+      "topo": 168,
+      "base": 1330,
+      "lado": 80
+    }
+  },
+  "particulas": {
+    "cor": "#E8381F"
+  },
+  "batida": {
+    "bpm": 124,
+    "quadros": 15
+  }
+}

package/materiais/cartaz-cinetico/formas/CirculoPoster.tsx

@@ -0,0 +1,22 @@
+// CirculoPoster: círculo vermelho de 860 px que cresce do ponto (scale 0 → 1 com sobra), com linhas de texto em Anton
+// dentro; no quadro `morfar` o raio vai de 50% a 6% e ele gira 90°, virando um quadrado de cartaz.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, caber, e5, eb, seg} from '../base';
+
+type Cor = 'papel' | 'preto' | 'vermelho' | 'azul';
+export type CirculoPosterProps = {linhas: string[]; cor?: Cor; texto?: Cor; inicio?: number; morfar?: number; x?: number; y?: number; diametro?: number};
+
+export const CirculoPoster: React.FC<CirculoPosterProps> = ({linhas, cor = 'vermelho', texto = 'papel', inicio = 0, morfar, x = 540, y = 740, diametro = 860}) => {
+  const f = useCurrentFrame();
+  if (f < inicio) return null;
+  const t = f - inicio;
+  const m = e5(seg(f, morfar ?? inicio + 22, (morfar ?? inicio + 22) + 14));
+  const p = eb(t / 12, 1.5);
+  const tams = linhas.map((l) => caber(l.toUpperCase(), 520, diametro * 0.72, 400, -0.005));
+  return <div style={{position: 'absolute', left: x - diametro / 2, top: y - diametro / 2, width: diametro, height: diametro, background: COR[cor], borderRadius: `${50 - 44 * m}%`, transform: `scale(${Math.max(0.001, p)}) rotate(${m * 90}deg)`, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
+    <div style={{transform: `rotate(${-m * 90}deg)`, display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
+      {linhas.map((l, i) => <div key={i} style={{fontFamily: FONTE.titulo, fontSize: tams[i], lineHeight: `${tams[i] * 0.95}px`, color: COR[texto], whiteSpace: 'nowrap'}}>{l.toUpperCase()}</div>)}
+    </div>
+  </div>;
+};

package/materiais/cartaz-cinetico/formas/PilhaCartaz.tsx

@@ -0,0 +1,40 @@
+// PilhaCartaz: linhas empilhadas, cada uma esticada até a largura útil (palavra curta fica enorme). Cada linha
+// estica da esquerda (scaleX 0 → 1 com sobra), 7 quadros depois da anterior. Cores alternam preto, vermelho e azul.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, SEGURA, caber, eb} from '../base';
+
+type Cor = 'papel' | 'preto' | 'vermelho' | 'azul';
+export type PilhaCartazProps = {
+  linhas: string[];
+  /** uma cor por linha; padrão: preto, vermelho, azul, ... */
+  cores?: Cor[];
+  /** bloco de fundo da pilha (cor chapada); padrão: sem bloco */
+  fundo?: Cor;
+  inicio?: number;
+  intervalo?: number;
+  y?: number;
+  tamanho?: number;
+  fim?: number;
+};
+
+export const PilhaCartaz: React.FC<PilhaCartazProps> = ({linhas, cores, fundo, inicio = 0, intervalo = 7, y = 720, tamanho = 520, fim}) => {
+  const f = useCurrentFrame();
+  if (fim !== undefined && f >= fim) return null;
+  const cs = cores ?? (['preto', 'vermelho', 'azul'] as Cor[]);
+  const tams = linhas.map((l) => caber(l.toUpperCase(), tamanho, 920, 400, -0.005));
+  const alts = tams.map((t) => t * 0.92);
+  const total = alts.reduce((a, b) => a + b, 0);
+  let topo = y - total / 2;
+  return <div style={{position: 'absolute', inset: 0}}>
+    {fundo && <div style={{position: 'absolute', inset: 0, background: COR[fundo]}} />}
+    {linhas.map((l, i) => {
+      const top = topo; topo += alts[i];
+      const t = f - (inicio + i * intervalo);
+      const p = eb(t / 12, 1.7);
+      const corTexto = cs[i % cs.length];
+      const sobreEscuro = fundo && fundo !== 'papel';
+      return <div key={i} style={{position: 'absolute', left: SEGURA.lado, top, height: alts[i], width: 920, lineHeight: `${alts[i]}px`, fontFamily: FONTE.titulo, fontSize: tams[i], letterSpacing: '-0.005em', whiteSpace: 'nowrap', color: sobreEscuro && corTexto === 'preto' ? COR.papel : COR[corTexto], transformOrigin: '0 50%', transform: `scaleX(${Math.max(0.001, p)})`, opacity: t < 0 ? 0 : 1}}>{l.toUpperCase()}</div>;
+    })}
+  </div>;
+};

package/materiais/cartaz-cinetico/formas/Selo.tsx

@@ -0,0 +1,25 @@
+// Selo: selo circular com texto no anel (Archivo 800) que gira 3,2° por quadro e uma palavra no centro (Anton).
+// Entra com scale 0 → 1 e sobra. Serve de apoio ao círculo da data ou à oferta.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, eb} from '../base';
+
+type Cor = 'papel' | 'preto' | 'vermelho' | 'azul';
+export type SeloProps = {anel: string; centro?: string; x?: number; y?: number; tamanho?: number; cor?: Cor; texto?: Cor; inicio?: number; id?: string};
+
+export const Selo: React.FC<SeloProps> = ({anel, centro = '', x = 820, y = 420, tamanho = 360, cor = 'preto', texto = 'papel', inicio = 0, id = 'selo'}) => {
+  const f = useCurrentFrame();
+  if (f < inicio) return null;
+  const t = f - inicio;
+  const p = eb(t / 12, 1.8);
+  const r = 150;
+  const repetido = `${anel.toUpperCase()} · `.repeat(Math.max(1, Math.round(40 / (anel.length + 3))));
+  return <svg viewBox="0 0 400 400" style={{position: 'absolute', left: x - tamanho / 2, top: y - tamanho / 2, width: tamanho, height: tamanho, transform: `scale(${Math.max(0.001, p)})`, overflow: 'visible'}}>
+    <circle cx="200" cy="200" r="198" fill={COR[cor]} />
+    <g transform={`rotate(${t * 3.2} 200 200)`}>
+      <path id={id} d={`M 200 200 m -${r} 0 a ${r} ${r} 0 1 1 ${r * 2} 0 a ${r} ${r} 0 1 1 -${r * 2} 0`} fill="none" />
+      <text fontFamily={FONTE.apoio} fontWeight={800} fontSize="36" letterSpacing="3" fill={COR[texto]}><textPath href={`#${id}`} textLength={2 * Math.PI * r - 6} lengthAdjust="spacing">{repetido}</textPath></text>
+    </g>
+    {centro && <text x="200" y="232" textAnchor="middle" fontFamily={FONTE.titulo} fontSize="110" fill={COR[texto]}>{centro.toUpperCase()}</text>}
+  </svg>;
+};