primocode 11.0.0 → 11.2.0

package/materiais/isometrico/regras.md

@@ -0,0 +1,125 @@
+# Regras do estilo isometrico (Isométrico)
+
+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 |
+|---|---|---|
+| `fundo` | `#DDE9F0` | chão |
+| `topo` | `#EBF3F8` | topo do degradê |
+| `tinta` | `#1B2B4B` | texto, contorno e sombra dura das plaquinhas |
+| `mute` | `#6F819F` | rótulos |
+| `coral` | `#F26B5B` | destaque, bloco principal, endereço |
+| `mostarda` | `#F2B134` | blocos, pacotes de luz |
+| `verde` | `#1FA6A0` | blocos |
+| `marinho` | `#233A66` | blocos, plataformas, trilhos |
+| `creme` | `#FFF8EC` | plataformas, topos claros, placas |
+
+- **Sombreamento de bloco** (função `tom`): topo = cor × 1,12; lateral = cor × (0,78 + 0,38 × (n·luz)), com luz vindo de cima à esquerda; faces com traço de 1,5 px na própria cor (sem fresta).
+- Sombra no chão `rgba(27,43,75,0.16)`; sombra dura da placa `10px 10px 0 #1B2B4B`.
+- Malha isométrica `rgba(27,43,75,0.07)`, linhas a ±30°, passo 96 px.
+- Colunas da cidade: altura > 0,7 = coral; > 0,4 = verde; resto = marinho.
+- O cliente troca coral/mostarda/verde/marinho; fundo, tinta e creme ficam.
+
+## Regras do kit: tipografia
+- Fontes: **Archivo** 600–800 (títulos, nome, texto de placa) e **Jost** 500 (rótulos pequenos, endereço). Registradas como `IS Archivo` e `IS Jost`.
+- Archivo sempre com tracking −0,02 a −0,04 em; Jost em caixa alta +0,12 em.
+
+| papel | tamanho px | peso | máx. caracteres |
+|---|---|---|---|
+| texto no chão (extrudado) | 230 (encolhe até 640) | 800 | 7 por linha, 2 linhas |
+| texto da plaquinha | 84 (encolhe até 760) | 800 | 16 |
+| rótulo da plaquinha | 26 (Jost, caixa alta) | 500 | 14 |
+| nome da marca | 250 | 800 | 6 |
+| frase da marca | 52 | 600 | 24 |
+| endereço | 40 (Jost) | 500 | 16 |
+
+## Regras do kit: area-segura
+9:16 em 1080×1920: texto em **y 168–1330** e **x 96–984**. Os blocos são imagem, mas ficam dentro das margens de 96 px.
+
+| elemento | y de referência (centro) | tamanho do herói |
+|---|---|---|
+| BlocosMontando | 820 | plataforma 6,2 un. × 100 px ≈ 877 px de largura |
+| TextoNoChao | 780 | plataforma de 760 px de lado em perspectiva ≈ 880 px |
+| RedeDeBlocos | 760 | plataforma 6,8 un. × 100 px; use `escala` 90 se passar de 888 px |
+| CidadeDeDados | 800 | 6,6 un. × 92 px ≈ 860 px de largura |
+| LegendaPlaca | 1260–1290 | 84 px, até 760 de largura |
+| AssinaturaMarca | 600 | plataforma ≈ 600 px, nome 250 px |
+
+Um herói por cena + no máximo 1 apoio. Espaço vazio: 35–45% do quadro.
+
+## Regras do kit: movimento
+Curva padrão `cubic-bezier(.2,.8,.2,1)` (`e5`); queda e subida com overshoot (`eb`, c1 = 2,2).
+
+| movimento | quadros | valores |
+|---|---|---|
+| bloco cai | 16 (a cada 4–5 quadros) | de 9 unidades acima até o chão, quica ~10%; aparece em 3 quadros |
+| sombra | 12 | cresce de 0 a 100% depois do pouso |
+| mesa giratória | contínua | 0,45–0,6°/quadro (≈ 15–18°/s) |
+| bloco da rede sobe | 16 (a cada 4) | altura 0 → 100% com overshoot |
+| pacotes de luz | contínua | 0,022 do trilho por quadro; 3 por trilho |
+| colunas da cidade | 18 (`(i + j) × 2` de atraso) | altura 0 → valor com overshoot |
+| texto no chão | 18 + 18 | entra com scale 0,7 → 1; extrusão 0 → 54 px; a plataforma gira −48° → −38° |
+| plaquinha | 16 | sobe 60 px, scale 0,85 → 1 com overshoot |
+| entrada de cena | 12 | zoom 1,9x / lateral 760 px / subir 260 px |
+| câmera | contínua | zoom 1,02 + 0,0004/quadro, deriva 10×8 px, soco +0,03 por pouso |
+| respiro | 10–14 quadros | depois do último bloco pousar, só a mesa gira |
+
+## Regras do kit: ritmo
+- 1 batida = **15 quadros** (110 bpm). Cenas de 1,1 a 1,6 s (33–48 quadros).
+- Montar 7 blocos: 46 quadros (um a cada 5, o último bate no 31, respiro de 15).
+
+| batida | duração s | quadros |
+|---|---|---|
+| montar | 1,4–1,7 | 42–52 |
+| titulo | 1,1–1,5 | 33–45 |
+| rede | 1,3–1,6 | 40–48 |
+| dados | 1,3–1,6 | 40–48 |
+| marca | 0,9–1,5 | 28–45 |
+
+Demo 8 s = 240 quadros = 6 cenas: 0, 46, 92, 136, 178, 212.
+
+## Regras do kit: som
+- Trilha: `assets/trilha/trilha.mp3` (9 s, 110 bpm, preset warm-major, tom C, lead marimba), volume **0,5**, fade nos últimos **20 quadros**.
+- Com narração: trilha a **0,25**, efeitos a 70%. Pacote de efeitos: MotionCraft `organic-wood` (blocos de madeira).
+
+| 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 |
+
+- **`pop-cartao` em cada bloco que pousa** (1 quadro antes do contato); `impacto` no último bloco; sem `swoosh` fora das trocas laterais.
+- Máx. **3 sons/s**; nunca o mesmo arquivo duas vezes seguidas. 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/isometrico/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/isometrico/texturas/Fundo.tsx

@@ -0,0 +1,13 @@
+// Fundo: gelo azulado (#DDE9F0) com uma malha isométrica (linhas a ±30°) quase invisível que deriva devagar. Fica FORA da Camera.
+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;
+  const linhas = (graus: number) => `repeating-linear-gradient(${graus}deg, transparent 0 96px, rgba(27,43,75,0.07) 96px 98px)`;
+  return <AbsoluteFill style={{background: `linear-gradient(180deg, ${COR.topo} 0%, ${COR.fundo} 100%)`}}>
+    <AbsoluteFill style={{backgroundImage: `${linhas(30)}, ${linhas(-30)}`, backgroundPosition: `${f * 1.2}px ${f * 0.7}px, ${-f * 1.2}px ${f * 0.7}px`}} />
+    <AbsoluteFill style={{background: `radial-gradient(60% 28% at ${30 + Math.sin(f / 45) * 22}% 18%, rgba(255,255,255,0.7), transparent 70%)`}} />
+  </AbsoluteFill>;
+};

package/materiais/isometrico/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 = '#F26B5B', 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/isometrico/tipografia/AssinaturaMarca.tsx

@@ -0,0 +1,24 @@
+// AssinaturaMarca: o logo cai e quica sobre uma plataforma isométrica, o nome em Archivo 800 sobe de uma máscara, endereço em Jost. Última cena.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_D, FONTE_T, c01, caber, e5, eb, seg} from '../base';
+import {CuboSVG, SombraSVG} from '../formas/iso';
+
+export type AssinaturaMarcaProps = {logo: string; nome: string; detalhe?: string; endereco?: string; inicio?: number; y?: number};
+
+export const AssinaturaMarca: React.FC<AssinaturaMarcaProps> = ({logo, nome, detalhe, endereco, inicio = 0, y = 600}) => {
+  const f = useCurrentFrame();
+  const lg = eb(seg(f, inicio, inicio + 18)), nm = e5(seg(f, inicio + 8, inicio + 24));
+  const tam = caber(nome, 250, 800, 800, -0.04);
+  const ang = ((38 + f * 0.5) * Math.PI) / 180, S = 72;
+  return <div style={{position: 'absolute', inset: 0}}>
+    <svg width={1080} height={700} viewBox="-540 -350 1080 700" style={{position: 'absolute', left: 0, top: y - 280, overflow: 'visible'}}>
+      <SombraSVG b={{x: 0, y: 0, w: 3.2, d: 3.2, h: 0.5, cor: COR.marinho}} ang={ang} S={S} />
+      <CuboSVG b={{x: 0, y: 0, w: 3.2, d: 3.2, h: 0.5, cor: COR.marinho}} ang={ang} S={S} />
+      <image href={logo} x={-110} y={-215 - (1 - lg) * 500} width="220" height="220" opacity={c01(lg * 2)} />
+    </svg>
+    <div style={{position: 'absolute', left: 96, width: 888, top: y + 270, height: tam * 1.15, overflow: 'hidden', textAlign: 'center', fontFamily: FONTE_D, fontWeight: 800, fontSize: tam, letterSpacing: '-0.04em', lineHeight: 1.15, color: COR.tinta}}><div style={{transform: `translateY(${(1 - nm) * 110}%)`}}>{nome}</div></div>
+    {detalhe && <div style={{position: 'absolute', left: 96, width: 888, top: y + 270 + tam * 1.2, textAlign: 'center', fontFamily: FONTE_D, fontWeight: 600, fontSize: 52, color: COR.tinta, opacity: c01((f - inicio - 24) / 8)}}>{detalhe}</div>}
+    {endereco && <div style={{position: 'absolute', left: 96, width: 888, top: y + 270 + tam * 1.2 + 80, textAlign: 'center', fontFamily: FONTE_T, fontWeight: 500, fontSize: 40, letterSpacing: '0.12em', color: COR.coral, opacity: c01((f - inicio - 30) / 8)}}>{endereco}</div>}
+  </div>;
+};

package/materiais/isometrico/tipografia/LegendaPlaca.tsx

@@ -0,0 +1,18 @@
+// LegendaPlaca: uma plaquinha de texto (pílula creme com sombra dura marinho) com um fio que sai dela para um ponto do herói.
+// É o apoio: serve para nomear o que o herói mostra. Entra com overshoot.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_D, FONTE_T, c01, caber, e5, eb, seg} from '../base';
+
+export type LegendaPlacaProps = {texto: string; sobre?: string; inicio?: number; y?: number; /** alinhamento horizontal da placa */ alinhar?: 'esquerda' | 'centro'};
+
+export const LegendaPlaca: React.FC<LegendaPlacaProps> = ({texto, sobre, inicio = 0, y = 1260, alinhar = 'centro'}) => {
+  const f = useCurrentFrame(), e = eb(seg(f, inicio, inicio + 16));
+  const t = caber(texto, 84, 760, 800, -0.02);
+  return <div style={{position: 'absolute', left: 96, width: 888, top: y - 90, height: 180, display: 'flex', justifyContent: alinhar === 'centro' ? 'center' : 'flex-start', alignItems: 'center', opacity: c01(e * 2), transform: `translateY(${(1 - e) * 60}px) scale(${0.85 + 0.15 * e})`}}>
+    <div style={{background: COR.creme, border: `5px solid ${COR.tinta}`, borderRadius: 100, boxShadow: `10px 10px 0 ${COR.tinta}`, padding: '18px 58px', fontFamily: FONTE_D, fontWeight: 800, fontSize: t, letterSpacing: '-0.02em', color: COR.tinta, whiteSpace: 'nowrap', textAlign: 'center'}}>
+      {sobre && <div style={{fontFamily: FONTE_T, fontWeight: 500, fontSize: 26, letterSpacing: '0.14em', textTransform: 'uppercase', color: COR.mute, marginBottom: 2, width: '100%'}}>{sobre}</div>}
+      {texto}
+    </div>
+  </div>;
+};

package/materiais/isometrico/tipografia/TextoNoChao.tsx

@@ -0,0 +1,28 @@
+// TextoNoChao: a palavra deitada no chão em perspectiva isométrica e extrudada (16 camadas empilhadas), sobre uma plataforma marinho.
+// A palavra "levanta" do chão ao entrar e a plataforma gira alguns graus durante a cena.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_D, c01, caber, e5, eb, lerp, seg} from '../base';
+import {tom} from '../formas/iso';
+import {useDuracaoCena} from '../transicoes/Cena';
+
+export type TextoNoChaoProps = {linhas: string[]; inicio?: number; y?: number; tamanho?: number; /** cor da face de cima do texto */ cor?: string; /** cor lateral/extrusão */ lado?: string};
+
+export const TextoNoChao: React.FC<TextoNoChaoProps> = ({linhas, inicio = 0, y = 760, tamanho = 230, cor = COR.creme, lado = COR.coral}) => {
+  const f = useCurrentFrame(), dur = useDuracaoCena();
+  const en = eb(seg(f, inicio, inicio + 18)), sobe = e5(seg(f, inicio + 6, inicio + 24));
+  const tams = linhas.map((l) => caber(l, tamanho, 700, 800, -0.03));
+  const H = tams.reduce((a, b) => a + b * 1.05, 0);
+  const rz = lerp(-48, -38, f / dur), rx = 60;
+  const N = 16, prof = 3.4 * sobe, W = 760, PH = H + 200;
+  const camada = (z: number, c: string, extra?: React.CSSProperties) => <div style={{position: 'absolute', left: 0, top: 0, width: W, height: PH, transform: `translateZ(${z}px)`, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', ...extra}}>
+    {linhas.map((l, i) => <div key={i} style={{fontFamily: FONTE_D, fontWeight: 800, fontSize: tams[i], lineHeight: 1.05, letterSpacing: '-0.03em', color: c, whiteSpace: 'nowrap'}}>{l}</div>)}
+  </div>;
+  return <div style={{position: 'absolute', left: 0, right: 0, top: y - 520, height: 1040, perspective: 3000, opacity: c01(en * 2)}}>
+    <div style={{position: 'absolute', left: (1080 - W) / 2, top: 520 - PH / 2, width: W, height: PH, transformStyle: 'preserve-3d', transform: `scale(${0.7 + 0.3 * en}) rotateX(${rx}deg) rotateZ(${rz}deg)`}}>
+      {Array.from({length: 10}, (_, i) => <div key={'p' + i} style={{position: 'absolute', inset: 0, transform: `translateZ(${-i * 4}px)`, background: i === 0 ? COR.marinho : tom(COR.marinho, 0.7), borderRadius: 36}} />)}
+      {Array.from({length: N}, (_, i) => camada(8 + i * prof, tom(lado, 0.75 + (i / N) * 0.25)))}
+      {camada(8 + N * prof + 1, cor)}
+    </div>
+  </div>;
+};

package/materiais/isometrico/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/isometrico/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/jornal/base.ts

@@ -0,0 +1,76 @@
+// Base do kit jornal: 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/playfair.woff2';
+import fonte1 from './fontes/playfair-italic.woff2';
+import fonte2 from './fontes/unifraktur.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: '#E8DFC8',
+  papelClaro: '#F3ECD9',
+  tinta: '#1B1A17',
+  vermelho: '#B3261E',
+  cinza: '#8A8472'
+};
+
+// ---------- fonte ----------
+// Nome de família com o prefixo do kit ("JN ..."), pra não colidir com outro kit no mesmo estúdio.
+export const FONTE = {
+  titulo: '"JN Playfair Display", Georgia, Times New Roman, serif',
+  italico: '"JN Playfair Display", Georgia, Times New Roman, serif',
+  apoio: '"JN UnifrakturMaguntia", Georgia, serif',
+};
+type G = {__kit_jornal?: boolean};
+if (typeof document !== 'undefined' && !(globalThis as G).__kit_jornal) {
+  (globalThis as G).__kit_jornal = true;
+  const h = delayRender('jornal: fontes');
+  Promise.all([
+    new FontFace('JN Playfair Display', `url(${fonte0}) format('woff2')`, {weight: '500 900', style: 'normal'}).load(),
+    new FontFace('JN Playfair Display', `url(${fonte1}) format('woff2')`, {weight: '500 900', style: 'italic'}).load(),
+    new FontFace('JN UnifrakturMaguntia', `url(${fonte2}) format('woff2')`, {weight: '400', style: 'normal'}).load(),
+  ]).then((fs) => {fs.forEach((ff) => document.fonts.add(ff)); continueRender(h);}).catch(() => continueRender(h));
+}
+
+// ---------- tempo e curva ----------
+export const c01 = (t: number) => Math.max(0, Math.min(1, t));
+/** progresso 0..1 de f entre a e b */
+export const seg = (f: number, a: number, b: number) => c01((f - a) / (b - a));
+/** saída rápida e pouso longo, parecida com cubic-bezier(.2,.8,.2,1) */
+export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
+/** easeOutBack: passa do destino em ~10% e volta (toda entrada tem overshoot) */
+export const eb = (t: number, s = 1.70158) => {const x = c01(t) - 1; return 1 + (s + 1) * x * x * x + s * x * x;};
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+/** uma batida da trilha do kit (96 bpm) em quadros */
+export const BATIDA = 18.75;
+
+// ---------- medida de texto ----------
+let canvas: HTMLCanvasElement | null = null;
+const cache = new Map<string, number>();
+export const larguraTexto = (texto: string, tamanho: number, peso = 900, trackingEm = -0.01, familia = 'JN Playfair Display'): 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 = 900, trackingEm = -0.01, familia = 'JN Playfair Display') => {
+  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/jornal/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/jornal/cores/paleta.json

@@ -0,0 +1,27 @@
+{
+  "estilo": "jornal",
+  "cor": {
+    "papel": "#E8DFC8",
+    "papelClaro": "#F3ECD9",
+    "tinta": "#1B1A17",
+    "vermelho": "#B3261E",
+    "cinza": "#8A8472"
+  },
+  "video": {
+    "largura": 1080,
+    "altura": 1920,
+    "fps": 30,
+    "segura": {
+      "topo": 168,
+      "base": 1330,
+      "lado": 80
+    }
+  },
+  "particulas": {
+    "cor": "#1B1A17"
+  },
+  "batida": {
+    "bpm": 96,
+    "quadros": 19
+  }
+}

package/materiais/jornal/formas/Cabecalho.tsx

@@ -0,0 +1,21 @@
+// Cabecalho: o cabeçalho do jornal. Filete duplo, nome gótico (UnifrakturMaguntia, até 170 px), filete fino e uma linha
+// com edição · data · preço. Cai de cima (translateY −420 → 0 com sobra) e o giro de 3° assenta.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, SEGURA, caber, eb} from '../base';
+
+export type CabecalhoProps = {nome: string; edicao?: string; data?: string; preco?: string; inicio?: number; y?: number};
+
+export const Cabecalho: React.FC<CabecalhoProps> = ({nome, edicao = '', data = '', preco = '', inicio = 0, y = 190}) => {
+  const f = useCurrentFrame();
+  const p = eb((f - inicio) / 16, 1.6);
+  const tam = caber(nome, 170, 888, 400, 0, FONTE.apoio.split('"')[1]);
+  const duplo = <div style={{borderTop: `6px solid ${COR.tinta}`, borderBottom: `2px solid ${COR.tinta}`, height: 12}} />;
+  const it: React.CSSProperties = {fontFamily: FONTE.italico, fontStyle: 'italic', fontWeight: 500, fontSize: 30, color: COR.tinta};
+  return <div style={{position: 'absolute', left: 96, top: y, width: 888, transform: `translateY(${(1 - p) * -420}px) rotate(${(1 - p) * 3}deg)`, opacity: f < inicio ? 0 : 1}}>
+    {duplo}
+    <div style={{fontFamily: FONTE.apoio, fontSize: tam, lineHeight: `${tam * 1.1}px`, textAlign: 'center', color: COR.tinta, whiteSpace: 'nowrap'}}>{nome}</div>
+    <div style={{borderTop: `2px solid ${COR.tinta}`, display: 'flex', justifyContent: 'space-between', padding: '8px 0', ...it}}><span>{edicao}</span><span>{data}</span><span>{preco}</span></div>
+    {duplo}
+  </div>;
+};

package/materiais/jornal/formas/Carimbo.tsx

@@ -0,0 +1,18 @@
+// Carimbo: carimbo vermelho (borda dupla de 10 px, Playfair 900 caixa alta com 0,08 em) girado −12° que cai de 3,2x para
+// 1x com sobra em 9 quadros, como batido na página. Linhas separadas por `|`.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, caber, eb} from '../base';
+
+export type CarimboProps = {texto: string; x?: number; y?: number; largura?: number; inicio?: number; rot?: number; tamanho?: number};
+
+export const Carimbo: React.FC<CarimboProps> = ({texto, x = 540, y = 760, largura = 760, inicio = 0, rot = -12, tamanho = 160}) => {
+  const f = useCurrentFrame();
+  const t = f - inicio;
+  const p = eb(t / 9, 2);
+  const linhas = texto.toUpperCase().split('|');
+  const tam = Math.min(...linhas.map((l) => caber(l, tamanho, largura - 120, 900, 0.08)));
+  return <div style={{position: 'absolute', left: x - largura / 2, top: y - (linhas.length * tam * 1.05 + 90) / 2, width: largura, padding: '24px 0', boxSizing: 'border-box', textAlign: 'center', color: COR.vermelho, border: `10px solid ${COR.vermelho}`, outline: `4px solid ${COR.vermelho}`, outlineOffset: 8, fontFamily: FONTE.titulo, fontWeight: 900, fontSize: tam, lineHeight: 1.05, letterSpacing: '0.08em', opacity: t < 0 ? 0 : 0.94, transform: `scale(${3.2 - 2.2 * p}) rotate(${rot}deg)`, mixBlendMode: 'multiply'}}>
+    {linhas.map((l, i) => <div key={i}>{l}</div>)}
+  </div>;
+};

package/materiais/jornal/formas/Colunas.tsx

@@ -0,0 +1,24 @@
+// Colunas: até 3 colunas de texto justificado (Playfair 500, 34 px, entrelinha 1,28) separadas por fios, que se escrevem
+// sozinhas a 1,6 caractere por quadro: primeiro a coluna 1, depois a 2, depois a 3. Uma letra capitular na primeira.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, SEGURA, eb, seg} from '../base';
+
+export type ColunasProps = {colunas: string[]; inicio?: number; y?: number; altura?: number; velocidade?: number};
+
+export const Colunas: React.FC<ColunasProps> = ({colunas, inicio = 0, y = 1000, altura = 340, velocidade = 1.6}) => {
+  const f = useCurrentFrame();
+  const n = colunas.length;
+  const gap = 36, w = (888 - gap * (n - 1)) / n;
+  let escritos = Math.max(0, (f - inicio) * velocidade);
+  const entra = eb(seg(f, inicio, inicio + 10), 1.4);
+  return <div style={{position: 'absolute', left: 96, top: y, width: 888, height: altura, opacity: f < inicio ? 0 : 1, transform: `translateY(${(1 - entra) * 80}px)`}}>
+    <div style={{height: 6, background: COR.tinta, width: 888 * entra, marginBottom: 14}} />
+    {colunas.map((c, i) => {
+      const k = Math.max(0, Math.min(c.length, Math.floor(escritos))); escritos -= c.length;
+      return <div key={i} style={{position: 'absolute', left: i * (w + gap), top: 24, width: w, height: altura - 24, borderLeft: i > 0 ? `2px solid ${COR.cinza}` : undefined, paddingLeft: i > 0 ? gap / 2 - 1 : 0, marginLeft: i > 0 ? -gap / 2 : 0, boxSizing: 'border-box', fontFamily: FONTE.titulo, fontWeight: 500, fontSize: 34, lineHeight: '43px', textAlign: 'justify', color: COR.tinta, hyphens: 'auto', overflow: 'hidden'}}>
+        {c.slice(0, k)}
+      </div>;
+    })}
+  </div>;
+};

package/materiais/jornal/formas/FotoMeiaTinta.tsx

@@ -0,0 +1,20 @@
+// FotoMeiaTinta: foto em meio-tom (P&B de alto contraste, sépia leve e retícula de pontos de 9 px em multiply), com
+// borda de tinta e legenda em itálico. Cola na página com giro (−8° → −2°) e scale 0,6 → 1 com sobra; depois faz push-in.
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, FONTE, eb} from '../base';
+
+export type FotoMeiaTintaProps = {src: string; x?: number; y?: number; largura?: number; altura?: number; inicio?: number; legenda?: string; foco?: string; rot?: number};
+
+export const FotoMeiaTinta: React.FC<FotoMeiaTintaProps> = ({src, x = 540, y = 620, largura = 880, altura = 640, inicio = 0, legenda, foco = '50% 50%', rot = -2}) => {
+  const f = useCurrentFrame();
+  const t = f - inicio;
+  const p = eb(t / 14, 1.6);
+  return <div style={{position: 'absolute', left: x - largura / 2, top: y - altura / 2, width: largura, opacity: t < 0 ? 0 : 1, transform: `scale(${0.6 + 0.4 * p}) rotate(${rot + (1 - p) * -6}deg)`}}>
+    <div style={{position: 'relative', width: largura, height: altura, border: `6px solid ${COR.tinta}`, boxSizing: 'border-box', overflow: 'hidden', background: COR.tinta}}>
+      <Img src={src} style={{width: '100%', height: '100%', objectFit: 'cover', objectPosition: foco, filter: 'grayscale(1) contrast(1.35) sepia(0.3)', transform: `scale(${1.06 + Math.max(0, t) * 0.0025})`}} />
+      <div style={{position: 'absolute', inset: 0, mixBlendMode: 'multiply', backgroundImage: 'radial-gradient(circle, rgba(27,26,23,0.55) 2.6px, rgba(27,26,23,0) 3.4px)', backgroundSize: '9px 9px'}} />
+    </div>
+    {legenda && <div style={{marginTop: 10, borderTop: `2px solid ${COR.tinta}`, paddingTop: 6, fontFamily: FONTE.italico, fontStyle: 'italic', fontWeight: 500, fontSize: 30, lineHeight: '36px', color: COR.cinza}}>{legenda}</div>}
+  </div>;
+};

package/materiais/jornal/formas/JornalGirando.tsx

@@ -0,0 +1,27 @@
+// JornalGirando: o clichê da abertura. A folha (papel claro, cabeçalho gótico, manchete, foto em meio-tom e barras de
+// texto) gira 720° → 0 enquanto cresce de 5% a 100% (rotação em `e5`, escala com sobra) e depois faz push-in lento.
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, FONTE, caber, e5, eb, textoLimpo} from '../base';
+
+export type JornalGirandoProps = {nome?: string; manchete: string; foto?: string; inicio?: number; y?: number; largura?: number; altura?: number; duracao?: number};
+
+export const JornalGirando: React.FC<JornalGirandoProps> = ({nome = 'O Diário', manchete, foto, inicio = 0, y = 760, largura = 820, altura = 1100, duracao = 24}) => {
+  const f = useCurrentFrame();
+  const t = f - inicio;
+  const rot = (1 - e5(t / duracao)) * -720;
+  const esc = 0.05 + 0.95 * eb(t / duracao, 1.1) + Math.max(0, t - duracao) * 0.0025;
+  const tam = caber(textoLimpo(manchete).toUpperCase(), 130, largura - 90, 900, -0.01);
+  const barra = (w: string, k: number) => <div key={k} style={{height: 12, width: w, background: COR.cinza, marginBottom: 14, opacity: 0.8}} />;
+  return <div style={{position: 'absolute', left: 540 - largura / 2, top: y - altura / 2, width: largura, height: altura, background: COR.papelClaro, border: `6px solid ${COR.tinta}`, boxSizing: 'border-box', padding: 40, transform: `rotate(${rot}deg) scale(${Math.max(0.01, esc)})`, opacity: t < 0 ? 0 : 1, boxShadow: '0 30px 60px rgba(60,40,10,0.35)', overflow: 'hidden'}}>
+    <div style={{borderTop: `6px solid ${COR.tinta}`, borderBottom: `2px solid ${COR.tinta}`, height: 12}} />
+    <div style={{fontFamily: FONTE.apoio, fontSize: 110, lineHeight: '120px', textAlign: 'center', color: COR.tinta, whiteSpace: 'nowrap'}}>{nome}</div>
+    <div style={{borderTop: `2px solid ${COR.tinta}`, marginBottom: 26}} />
+    <div style={{fontFamily: FONTE.titulo, fontWeight: 900, fontSize: tam, lineHeight: 1.0, letterSpacing: '-0.01em', color: COR.tinta, whiteSpace: 'nowrap', textTransform: 'uppercase'}}>{manchete.split('|').map((l, i) => <div key={i}>{l.replace(/\*/g, '')}</div>)}</div>
+    <div style={{position: 'relative', height: 360, margin: '28px 0', border: `4px solid ${COR.tinta}`, overflow: 'hidden', background: COR.cinza}}>
+      {foto && <Img src={foto} style={{width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(1) contrast(1.35) sepia(0.3)'}} />}
+      <div style={{position: 'absolute', inset: 0, mixBlendMode: 'multiply', backgroundImage: 'radial-gradient(circle, rgba(27,26,23,0.55) 2.6px, rgba(27,26,23,0) 3.4px)', backgroundSize: '9px 9px'}} />
+    </div>
+    <div style={{display: 'flex', gap: 28}}>{[0, 1, 2].map((c) => <div key={c} style={{flex: 1}}>{['100%', '94%', '100%', '88%', '100%', '72%'].map((w, k) => barra(w, k))}</div>)}</div>
+  </div>;
+};