primocode 11.0.0 → 11.2.0

package/materiais/retro-70/regras.md

@@ -0,0 +1,132 @@
+# Regras do estilo retro-70 (Retrô anos 70)
+
+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 |
+|---|---|---|
+| `creme` | `#F6E3B8` | chão e texto sobre escuro |
+| `laranja` | `#E8601C` | arco, sombra do meio, raios |
+| `mostarda` | `#F2A900` | arco, sombra de trás, pétalas, botão |
+| `tijolo` | `#B8341B` | arco de fora, 1ª sombra, destaque |
+| `marrom` | `#4A2511` | texto principal, cartão, centro da flor |
+
+- Sombras do tipo: `6px 6px 0 #B8341B, 12px 12px 0 #E8601C, 18px 18px 0 #F2A900` (duras, sem desfoque).
+- Foto: `sepia(0.55) saturate(1.35) hue-rotate(-12deg) contrast(1.05)` + véu laranja multiply a 22%.
+- Nada de preto, branco puro, azul ou degradê. Cantos sempre redondos (raio ≥ 40 px).
+- O cliente pode trocar `laranja` e `mostarda`; `marrom` e `creme` ficam.
+
+## Regras do kit: tipografia
+Shrikhand (400, única espessura) para tudo que é título; Fredoka 600 para rótulos, mês, local e endereço.
+
+| papel | tamanho (px) | máx. caracteres | peso · tracking · caixa |
+|---|---|---|---|
+| título gordo (linha) | 230 (encolhe até 110) | 10 por linha | Shrikhand · marrom · 3 sombras em camadas |
+| dia no cartão | 380 | 2 dígitos | Shrikhand · mostarda |
+| mês / rótulo | 90 | 10 | Fredoka 700 · 0,2 em · MAIÚSCULAS |
+| local / tagline | 54 | 30 | Fredoka 600 |
+| texto no arco | 130 (encolhe) | 8 | Shrikhand · marrom |
+| endereço | 52 | 22 | Fredoka 600 · marrom em pílula mostarda |
+| nome na marca | 190 (encolhe) | 10 | Shrikhand · marrom · 3 sombras |
+
+- Texto que passa da largura útil (888 px) **encolhe sozinho** (`caber()` em `elementos/base.ts`). Nunca palavra cortada.
+- Destaque `*palavra*` = tijolo no lugar do marrom.
+- Margem lateral de 96 px; o tipo nunca passa de 888 px com as sombras.
+
+## Regras do kit: area-segura
+- Tudo que se lê fica entre **y = 168** e **y = 1330** e entre **x = 96** e **x = 984** (888 px úteis, margem de 8,9%).
+- Embaixo de 1330 px ficam a legenda e os botões do Reels/TikTok: ali só fundo e elementos que sangram.
+- Posições de referência (centro, em px):
+
+| uso | y |
+|---|---|
+| título gordo (centro do bloco) | 700 |
+| arcos de listras (base do chão) | 1180 |
+| texto no arco | 1000 |
+| raios de sol (centro) | 720 |
+| foto em arco (centro) | 700 |
+| cartão de data (centro) | 720 |
+| onda de listras | 1260 |
+| margaridas | 260–1250, fora do herói |
+| marca (nome) | 700 |
+
+- Margem de 96 px também para os apoios; o creme vazio é parte do estilo.
+- Respiro: 35–45% do quadro vazio, 1 herói + no máximo 1 apoio por plano, nada encostando na borda, e uma pausa de 15 a 24 quadros depois de cada golpe grande.
+
+## Regras do kit: movimento
+- Tela 1080×1920, **30 fps**. Curva padrão `e5` ≈ cubic-bezier(.2,.8,.2,1); toda entrada com sobra `eb` (easeOutBack, passa ~10% e volta).
+- A câmera nunca para: zoom 1,02 ± 0,014 (período 110 quadros), deslize ±10 × ±12 px, giro ±0,29°; soco de +2,5% que cai em 8 quadros a cada corte.
+- Entrada de cena: 12 quadros; saída sobrepõe 10 quadros com a próxima. Corte ou troca a cada 0,6–1,5 s (18–45 quadros).
+
+| movimento | quadros | valores |
+|---|---|---|
+| título cai amassando | 14 | translateY −500 → 0 com `eb`; scaleY 1,35 → 0,88 → 1 (borracha); 9 quadros entre linhas |
+| arcos sobem | 16 | cada faixa cresce do chão (scaleY 0 → 1 com `eb`), 4 quadros entre faixas, de fora para dentro |
+| raios giram | contínuo | 0,4° por quadro; entra com giro de 90° e scale 0 → 1 com `eb` |
+| foto em arco | 16 | scale 0,8 → 1 e giro −5° → 2° com `eb`; depois balança ±1,5° |
+| cartão de data | 16 | sobe 600 px com `eb`, amassa 1,3 → 0,9 → 1 e gira −3° |
+| margaridas | contínuo | giram 1,2° por quadro e pulsam 0,9 → 1,1 (período 36 quadros) |
+| onda de listras | 20 | revela da esquerda (`e5`); a fase da onda corre 0,08 rad por quadro |
+| saída de cena | 10 | sobe 140 px e some, sobrepondo 10 quadros |
+
+## Regras do kit: ritmo
+- 104 bpm → 1 batida = **17.31 quadros** (0.577 s). Cortes caem nas batidas; o título cai no tempo forte e assenta por 0,5 s.
+- Tempo mínimo de leitura: **40** quadros por frase (≈ 0,45 s por palavra curta).
+
+| batida | duração (s) | quadros |
+|---|---|---|
+| gancho | 1.3–2.5 | 40–75 |
+| virada | 1.5–2.5 | 45–75 |
+| prova | 1.5–2.5 | 45–75 |
+| data | 1.5–2.5 | 45–75 |
+| oferta | 1.2–2.2 | 36–66 |
+| marca | 1.6–3.0 | 48–90 |
+
+- Vídeo de demo: 8 s = 240 quadros (13.9 batidas).
+
+## Regras do kit: som
+- Trilha: `assets/trilha/solar-104bpm.mp3` (9 s, 104 bpm), volume **0.5**, fade de saída nos últimos **20 quadros**. Vídeo maior que 9 s: gere outra no MotionCraft (`music make`, preset warm-major, 104 bpm, tom C, progressão warm-lift, lead marimba, bateria soft, comp offbeat) — não faça loop.
+- Com narração: trilha a **0,25** e efeitos a 70% do volume da tabela.
+- Efeitos sintetizados (MotionCraft `sfx make`, pacote organic-wood: madeira e marimba); trilha de 9 s, 104 bpm, quente e balançada.
+
+| som | volume | quando |
+|---|---|---|
+| `pop-palavra` | 1 | linha do título que cai |
+| `pop-cartao` | 0.9 | arco, foto ou cartão que chega |
+| `clique` | 0.8 | margarida e onda de listras |
+| `impacto` | 0.9 | a palavra em tijolo e o cartão de data |
+| `whoosh-entra` | 0.9 | entrada de cena (−1 quadro) |
+| `swoosh` | 1 | raios de sol e onda |
+| `subida` | 0.7 | 1,3 s antes do golpe final |
+| `assinatura` | 0.9 | revelação da marca |
+| `whoosh-sai` | 0.8 | saída grande |
+
+- Um som por movimento que importa; no máximo **3 sons por segundo**; nunca o mesmo arquivo duas vezes seguidas.
+- Som entra **1 a 2 quadros antes** do visual.
+- O render nivela o mix em **−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/retro-70/sons/Som.tsx

@@ -0,0 +1,38 @@
+// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`, pacote organic-wood: madeira e marimba); trilha de 9 s, 104 bpm, quente e balançada.
+// 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/solar-104bpm.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.9, 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/retro-70/texturas/Fundo.tsx

@@ -0,0 +1,11 @@
+// Fundo: creme de papel quente com os cantos tostados (vinheta de `#E9C98A` a 60%) e uma luz suave que passeia. Sem textura.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {COR} from '../base';
+
+export const Fundo: React.FC = () => {
+  const t = useCurrentFrame() / 30;
+  return <AbsoluteFill style={{background: COR.creme}}>
+    <AbsoluteFill style={{background: `radial-gradient(60% 28% at ${40 + Math.sin(t * 0.5) * 20}% ${30 + Math.cos(t * 0.4) * 8}%, rgba(255,246,222,0.7), transparent 70%), radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 58%, rgba(233,201,138,0.7) 100%)`}} />
+  </AbsoluteFill>;
+};

package/materiais/retro-70/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 = '#E8601C', 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/retro-70/tipografia/AssinaturaMarca.tsx

@@ -0,0 +1,21 @@
+// AssinaturaMarca: a última cena. O ícone (arcos de listras) sobe do chão com sobra, o nome em Shrikhand marrom com as 3 sombras cai
+// amassando, a tagline em Fredoka entra e o endereço fica numa pílula mostarda com borda marrom. Muito creme em volta.
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, caber, eb, seg} from '../base';
+import {SOMBRAS} from '../tipografia/TituloGordo';
+
+export type AssinaturaMarcaProps = {nome: string; icone: string; detalhe?: string; endereco?: string; inicio?: number; y?: number};
+
+export const AssinaturaMarca: React.FC<AssinaturaMarcaProps> = ({nome, icone, detalhe, endereco, inicio = 0, y = 700}) => {
+  const f = useCurrentFrame();
+  const tam = caber(nome, 190, LARGURA_UTIL - 40, 400, 0);
+  const ic = eb(seg(f, inicio, inicio + 16), 1.8), nm = eb((f - inicio - 6) / 14, 2.2), pl = eb(seg(f, inicio + 28, inicio + 42), 2);
+  const sy = 1.35 - 0.35 * nm, sx = 1 / Math.sqrt(Math.max(0.5, sy));
+  return <div style={{position: 'absolute', inset: 0}}>
+    <Img src={icone} style={{position: 'absolute', left: 540 - 120, top: y - 380, width: 240, height: 240, transformOrigin: '50% 100%', transform: `scaleY(${Math.max(0.001, ic)})`}} />
+    <div style={{position: 'absolute', left: SEGURA.lado, width: LARGURA_UTIL, top: y - 80, height: tam * 1.15, lineHeight: `${tam * 1.15}px`, textAlign: 'center', fontFamily: FONTE.titulo, fontSize: tam, whiteSpace: 'nowrap', color: COR.marrom, textShadow: SOMBRAS, opacity: f < inicio + 6 ? 0 : 1, transformOrigin: '50% 100%', transform: `translateY(${(1 - Math.min(nm, 1)) * -500}px) scale(${sx}, ${sy})`}}>{nome}</div>
+    {detalhe && <div style={{position: 'absolute', left: SEGURA.lado, width: LARGURA_UTIL, top: y + tam * 1.15 + 20, textAlign: 'center', fontFamily: FONTE.apoio, fontWeight: 600, fontSize: 54, color: COR.marrom, opacity: seg(f, inicio + 24, inicio + 30)}}>{detalhe}</div>}
+    {endereco && <div style={{position: 'absolute', left: 540 - 300, top: y + tam * 1.15 + 120, width: 600, height: 110, borderRadius: 55, background: COR.mostarda, border: `6px solid ${COR.marrom}`, boxSizing: 'border-box', textAlign: 'center', fontFamily: FONTE.apoio, fontWeight: 600, fontSize: 52, lineHeight: '98px', color: COR.marrom, boxShadow: `8px 8px 0 ${COR.laranja}`, transform: `scale(${Math.max(0.001, pl)})`}}>{endereco}</div>}
+  </div>;
+};

package/materiais/retro-70/tipografia/TituloGordo.tsx

@@ -0,0 +1,28 @@
+// TituloGordo: título Shrikhand marrom com 3 sombras duras em camadas (`6px 6px` tijolo, `12px 12px` laranja, `18px 18px` mostarda).
+// Cada linha cai de −500 px com sobra e amassa como borracha (scaleY 1,35 → 0,88 → 1, scaleX inversa), 9 quadros uma da outra.
+// `*palavra*` vai em tijolo.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, caber, eb, pedacos, textoLimpo} from '../base';
+
+export const SOMBRAS = `6px 6px 0 ${COR.tijolo}, 12px 12px 0 ${COR.laranja}, 18px 18px 0 ${COR.mostarda}`;
+export type TituloGordoProps = {linhas: string[]; inicio?: number; intervalo?: number; y?: number; tamanho?: number; fim?: number};
+
+export const TituloGordo: React.FC<TituloGordoProps> = ({linhas, inicio = 0, intervalo = 9, y = 700, tamanho = 230, fim}) => {
+  const f = useCurrentFrame();
+  if (fim !== undefined && f >= fim) return null;
+  const tam = Math.min(...linhas.map((l) => caber(textoLimpo(l), tamanho, LARGURA_UTIL - 40, 400, 0)));
+  const alt = tam * 1.12;
+  const topo = y - (linhas.length * alt) / 2;
+  return <div style={{position: 'absolute', inset: 0}}>
+    {linhas.map((l, i) => {
+      const t = f - (inicio + i * intervalo);
+      if (t < 0) return null;
+      const p = eb(t / 14, 2.2);
+      const sy = 1.35 - 0.35 * p, sx = 1 / Math.sqrt(Math.max(0.5, sy));
+      return <div key={i} style={{position: 'absolute', left: SEGURA.lado, width: LARGURA_UTIL, top: topo + i * alt, height: alt, lineHeight: `${alt}px`, textAlign: 'center', fontFamily: FONTE.titulo, fontSize: tam, whiteSpace: 'nowrap', color: COR.marrom, textShadow: SOMBRAS, transformOrigin: '50% 100%', transform: `translateY(${(1 - Math.min(p, 1)) * -500}px) scale(${sx}, ${sy})`}}>
+        {pedacos(l).map((s, j) => <span key={j} style={{color: s.d ? COR.tijolo : COR.marrom}}>{s.t}</span>)}
+      </div>;
+    })}
+  </div>;
+};

package/materiais/retro-70/transicoes/Cena.tsx

@@ -0,0 +1,41 @@
+// Cena: janela de tempo de um plano. Entra com movimento (nunca corte seco) e sai deslizando,
+// sobrepondo 10 quadros com a próxima. Dentro dela, useCurrentFrame() começa em 0.
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {e5, eb, seg} from '../base';
+
+export type Entrada = 'subir' | 'zoom' | 'direita' | 'esquerda' | 'girar' | 'cortar' | 'nenhuma';
+export const SOBREPOE = 10; // quadros em que a saída desta cena cruza a entrada da próxima
+
+const CenaCtx = createContext({duracao: 60});
+/** duração da cena atual em quadros (sem a sobreposição) */
+export const useDuracaoCena = () => useContext(CenaCtx).duracao;
+
+export type CenaProps = {de: number; ate: number; entrada?: Entrada; ultima?: boolean; children: React.ReactNode};
+
+const Janela: React.FC<{duracao: number; entrada: Entrada; ultima: boolean; children: React.ReactNode}> = ({duracao, entrada, ultima, children}) => {
+  const f = useCurrentFrame();
+  const q = 12; // quadros da entrada
+  const en = entrada === 'nenhuma' ? 0 : 1 - (entrada === 'cortar' ? eb(seg(f, 0, q)) : e5(seg(f, 0, q)));
+  const xo = ultima ? 0 : e5(seg(f, duracao, duracao + SOBREPOE));
+  let tf = '';
+  if (entrada === 'subir') tf += `translateY(${en * 140}px) `;
+  if (entrada === 'zoom') tf += `scale(${1 + en * 0.9}) `;
+  if (entrada === 'direita') tf += `translateX(${en * 406}px) `;
+  if (entrada === 'esquerda') tf += `translateX(${-en * 406}px) `;
+  if (entrada === 'girar') tf += `rotate(${en * -14}deg) scale(${1 + en * 0.5}) `;
+  if (entrada === 'cortar') tf += `scale(${1 + en * 0.14}) `;
+  tf += `translateY(${-xo * 140}px)`;
+  const blur = (entrada === 'cortar' ? 0 : en * 5) + xo * 5;
+  const op = entrada === 'cortar' ? 1 - xo : (1 - en * 0.7) * (1 - xo);
+  return <AbsoluteFill style={{transform: tf, opacity: op, filter: blur > 0.3 ? `blur(${blur}px)` : undefined}}>{children}</AbsoluteFill>;
+};
+
+export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'subir', ultima = false, children}) => {
+  const duracao = ate - de;
+  return <Sequence from={de} durationInFrames={duracao + (ultima ? 0 : SOBREPOE)} layout="none">
+    <CenaCtx.Provider value={{duracao}}>
+      <Janela duracao={duracao} entrada={entrada} ultima={ultima}>{children}</Janela>
+    </CenaCtx.Provider>
+  </Sequence>;
+};

package/materiais/retro-70/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/revista/base.ts

@@ -0,0 +1,76 @@
+// Base do kit revista: 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/cormorant.woff2';
+import fonte1 from './fontes/cormorant-italic.woff2';
+import fonte2 from './fontes/jost.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: 96};
+export const LARGURA_UTIL = LARGURA - SEGURA.lado * 2; // 888 px
+
+// ---------- cor ----------
+export const COR = {
+  creme: '#F6F1E9',
+  pagina: '#FBF8F2',
+  tinta: '#14110F',
+  vinho: '#7A1F2B',
+  cinza: '#8C857B'
+};
+
+// ---------- fonte ----------
+// Nome de família com o prefixo do kit ("RV ..."), pra não colidir com outro kit no mesmo estúdio.
+export const FONTE = {
+  titulo: '"RV Cormorant Garamond", Georgia, Times New Roman, serif',
+  italico: '"RV Cormorant Garamond", Georgia, serif',
+  apoio: '"RV Jost", Helvetica Neue, Arial, sans-serif',
+};
+type G = {__kit_revista?: boolean};
+if (typeof document !== 'undefined' && !(globalThis as G).__kit_revista) {
+  (globalThis as G).__kit_revista = true;
+  const h = delayRender('revista: fontes');
+  Promise.all([
+    new FontFace('RV Cormorant Garamond', `url(${fonte0}) format('woff2')`, {weight: '500 700', style: 'normal'}).load(),
+    new FontFace('RV Cormorant Garamond', `url(${fonte1}) format('woff2')`, {weight: '500 700', style: 'italic'}).load(),
+    new FontFace('RV Jost', `url(${fonte2}) format('woff2')`, {weight: '400 600', 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 (100 bpm) em quadros */
+export const BATIDA = 18.00;
+
+// ---------- medida de texto ----------
+let canvas: HTMLCanvasElement | null = null;
+const cache = new Map<string, number>();
+export const larguraTexto = (texto: string, tamanho: number, peso = 700, trackingEm = -0.01, familia = 'RV Cormorant Garamond'): 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 = 700, trackingEm = -0.01, familia = 'RV Cormorant Garamond') => {
+  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/revista/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/revista/cores/paleta.json

@@ -0,0 +1,27 @@
+{
+  "estilo": "revista",
+  "cor": {
+    "creme": "#F6F1E9",
+    "pagina": "#FBF8F2",
+    "tinta": "#14110F",
+    "vinho": "#7A1F2B",
+    "cinza": "#8C857B"
+  },
+  "video": {
+    "largura": 1080,
+    "altura": 1920,
+    "fps": 30,
+    "segura": {
+      "topo": 168,
+      "base": 1330,
+      "lado": 80
+    }
+  },
+  "particulas": {
+    "cor": "#14110F"
+  },
+  "batida": {
+    "bpm": 100,
+    "quadros": 18
+  }
+}

package/materiais/revista/formas/ColagemFotos.tsx

@@ -0,0 +1,22 @@
+// ColagemFotos: 3 fotos sobrepostas com giros pequenos (−3°, 2°, −1,5°). Cada uma entra de um lado (±600 px) com sobra,
+// 7 quadros depois da anterior, e depois deriva 0,4 px por quadro em sentidos diferentes (paralaxe). Tudo dentro da margem de 96 px.
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, eb} from '../base';
+
+export type ColagemFotosProps = {fotos: string[]; inicio?: number; y?: number};
+
+const LAYOUT = [{x: 96, dy: -330, w: 500, h: 660, rot: -3, lado: -1, par: 0.4}, {x: 520, dy: -170, w: 464, h: 560, rot: 2, lado: 1, par: -0.3}, {x: 250, dy: 150, w: 440, h: 360, rot: -1.5, lado: -1, par: 0.2}];
+
+export const ColagemFotos: React.FC<ColagemFotosProps> = ({fotos, inicio = 0, y = 720}) => {
+  const f = useCurrentFrame();
+  return <div style={{position: 'absolute', inset: 0}}>
+    {LAYOUT.map((L, i) => {
+      const t = f - inicio - i * 7;
+      const p = eb(t / 20, 1.3);
+      return <div key={i} style={{position: 'absolute', left: L.x, top: y + L.dy, width: L.w, height: L.h, background: COR.pagina, padding: 12, boxSizing: 'border-box', boxShadow: '0 24px 40px rgba(20,17,15,0.22)', opacity: t < 0 ? 0 : 1, transform: `translateX(${(1 - p) * 600 * L.lado + Math.max(0, t) * L.par}px) rotate(${L.rot}deg)`}}>
+        <Img src={fotos[i % fotos.length]} style={{width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(0.92) sepia(0.12)'}} />
+      </div>;
+    })}
+  </div>;
+};

package/materiais/revista/formas/Folio.tsx

@@ -0,0 +1,19 @@
+// Folio: o rodapé da página de revista. Filete fino, número da página em itálico e a seção em Jost caixa alta. É sempre
+// apoio (pequeno, cinza) e entra com um deslize curto de 40 px.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, e5, seg} from '../base';
+
+export type FolioProps = {numero: string; secao?: string; inicio?: number; y?: number};
+
+export const Folio: React.FC<FolioProps> = ({numero, secao = '', inicio = 0, y = 1250}) => {
+  const f = useCurrentFrame();
+  const p = e5(seg(f, inicio, inicio + 16));
+  return <div style={{position: 'absolute', left: SEGURA.lado, top: y, width: LARGURA_UTIL, opacity: p, transform: `translateY(${(1 - p) * 40}px)`}}>
+    <div style={{height: 2, background: COR.cinza, width: LARGURA_UTIL * p, opacity: 0.6}} />
+    <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 16}}>
+      <span style={{fontFamily: FONTE.italico, fontStyle: 'italic', fontWeight: 500, fontSize: 56, color: COR.vinho}}>{numero}</span>
+      <span style={{fontFamily: FONTE.apoio, fontWeight: 500, fontSize: 28, letterSpacing: '0.22em', textTransform: 'uppercase', color: COR.cinza}}>{secao}</span>
+    </div>
+  </div>;
+};

package/materiais/revista/formas/FotoSangrando.tsx

@@ -0,0 +1,24 @@
+// FotoSangrando: foto grande (888 × 980, margem de 96 px) que abre por cortina de cima para baixo (22 quadros) e faz
+// push-in lento (1,15 → 1,25) até o fim da cena. Rótulo em Jost no topo e legenda em itálico embaixo, com filete vinho.
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, e5, seg} from '../base';
+import {useDuracaoCena} from '../transicoes/Cena';
+
+export type FotoSangrandoProps = {src: string; y?: number; altura?: number; inicio?: number; legenda?: string; rotulo?: string; foco?: string};
+
+export const FotoSangrando: React.FC<FotoSangrandoProps> = ({src, y = 720, altura = 900, inicio = 0, legenda, rotulo, foco = '50% 50%'}) => {
+  const f = useCurrentFrame(), L = useDuracaoCena();
+  const p = e5(seg(f, inicio, inicio + 22));
+  const topo = y - altura / 2;
+  return <div style={{position: 'absolute', inset: 0}}>
+    {rotulo && <div style={{position: 'absolute', left: SEGURA.lado, top: topo - 64, fontFamily: FONTE.apoio, fontWeight: 500, fontSize: 28, letterSpacing: '0.22em', textTransform: 'uppercase', color: COR.cinza, opacity: seg(f, inicio + 8, inicio + 20)}}>{rotulo}</div>}
+    <div style={{position: 'absolute', left: SEGURA.lado, top: topo, width: LARGURA_UTIL, height: altura, overflow: 'hidden', clipPath: `inset(0 0 ${(1 - p) * 100}% 0)`}}>
+      <Img src={src} style={{width: '100%', height: '100%', objectFit: 'cover', objectPosition: foco, filter: 'saturate(0.92) sepia(0.12)', transform: `scale(${1.15 + 0.1 * (f / L)})`}} />
+    </div>
+    {legenda && <div style={{position: 'absolute', left: SEGURA.lado, top: topo + altura + 24, width: LARGURA_UTIL, opacity: seg(f, inicio + 18, inicio + 30)}}>
+      <div style={{height: 3, width: 120 * e5(seg(f, inicio + 18, inicio + 32)), background: COR.vinho, marginBottom: 14}} />
+      <div style={{fontFamily: FONTE.italico, fontStyle: 'italic', fontWeight: 500, fontSize: 40, color: COR.tinta}}>{legenda}</div>
+    </div>}
+  </div>;
+};

package/materiais/revista/formas/PaginaDupla.tsx

@@ -0,0 +1,36 @@
+// PaginaDupla: a revista aberta (888 × 620). Esquerda: foto. Direita: kicker, título e texto. Em `viraEm` a página da direita
+// vira em 3D sobre a lombada (rotateY 0 → −180° em 24 quadros) e mostra no verso a foto seguinte, deixando à direita a
+// página seguinte. Sombra de lombada fixa; sombra da dobra cresce até 90°.
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, e5, eb, seg} from '../base';
+
+export type Pagina = {kicker?: string; titulo: string; texto?: string};
+export type PaginaDuplaProps = {foto: string; direita: Pagina; depois?: {foto: string; direita: Pagina}; inicio?: number; viraEm?: number; y?: number; altura?: number};
+
+const Lado: React.FC<{p: Pagina}> = ({p}) => <div style={{position: 'absolute', inset: 0, padding: '48px 40px', boxSizing: 'border-box', background: COR.pagina}}>
+  {p.kicker && <div style={{fontFamily: FONTE.apoio, fontWeight: 500, fontSize: 22, letterSpacing: '0.22em', textTransform: 'uppercase', color: COR.cinza}}>{p.kicker}</div>}
+  <div style={{marginTop: 18, fontFamily: FONTE.titulo, fontWeight: 700, fontSize: 64, lineHeight: '64px', color: COR.tinta}}>{p.titulo.split('*').map((s, i) => i % 2 ? <span key={i} style={{fontFamily: FONTE.italico, fontStyle: 'italic', color: COR.vinho}}>{s}</span> : s)}</div>
+  <div style={{width: 80, height: 3, background: COR.vinho, margin: '22px 0'}} />
+  {p.texto && <div style={{fontFamily: FONTE.titulo, fontWeight: 500, fontSize: 30, lineHeight: '42px', color: COR.tinta}}>{p.texto}</div>}
+</div>;
+
+export const PaginaDupla: React.FC<PaginaDuplaProps> = ({foto, direita, depois, inicio = 0, viraEm, y = 700, altura = 620}) => {
+  const f = useCurrentFrame();
+  const w = LARGURA_UTIL / 2;
+  const entra = eb(seg(f, inicio, inicio + 18), 1.2);
+  const ang = viraEm === undefined ? 0 : -180 * e5(seg(f, viraEm, viraEm + 24));
+  const img = (src: string) => <Img src={src} style={{width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(0.92) sepia(0.12)'}} />;
+  const sombra = Math.sin((-ang / 180) * Math.PI) * 0.35;
+  return <div style={{position: 'absolute', inset: 0, perspective: 2600, perspectiveOrigin: '50% 40%'}}>
+    <div style={{position: 'absolute', left: SEGURA.lado, top: y - altura / 2, width: LARGURA_UTIL, height: altura, opacity: f < inicio ? 0 : 1, transform: `translateY(${(1 - entra) * 90}px) rotateX(${(1 - entra) * 8}deg)`, transformStyle: 'preserve-3d', boxShadow: '0 40px 60px rgba(20,17,15,0.22)'}}>
+      <div style={{position: 'absolute', left: 0, top: 0, width: w, height: altura, overflow: 'hidden'}}>{img(foto)}</div>
+      <div style={{position: 'absolute', left: w, top: 0, width: w, height: altura}}><Lado p={depois ? depois.direita : direita} /></div>
+      <div style={{position: 'absolute', left: w, top: 0, width: w, height: altura, transformOrigin: '0 50%', transformStyle: 'preserve-3d', transform: `rotateY(${ang}deg)`}}>
+        <div style={{position: 'absolute', inset: 0, backfaceVisibility: 'hidden'}}><Lado p={direita} /><div style={{position: 'absolute', inset: 0, background: `rgba(20,17,15,${sombra})`}} /></div>
+        <div style={{position: 'absolute', inset: 0, backfaceVisibility: 'hidden', transform: 'rotateY(180deg)', overflow: 'hidden'}}>{depois && img(depois.foto)}</div>
+      </div>
+      <div style={{position: 'absolute', left: w - 24, top: 0, width: 48, height: altura, background: 'linear-gradient(90deg, rgba(20,17,15,0), rgba(20,17,15,0.22) 50%, rgba(20,17,15,0))', pointerEvents: 'none'}} />
+    </div>
+  </div>;
+};