primocode 10.19.0 → 11.1.0

package/materiais/suica/regras.md

@@ -0,0 +1,129 @@
+# Regras do estilo suica (Suíço)
+
+Estas regras valem para QUEM MONTA. Não existe vídeo pronto aqui: só peças (`pecas.json`). Cada cena é escrita do zero, peça a peça.
+
+## Regras do kit: cor
+| token | hex | uso |
+|---|---|---|
+| `papel` | `#F4F2EE` | chão de todas as cenas |
+| `tinta` | `#0B0B0B` | texto, régua, linhas fortes |
+| `vermelho` | `#E10600` | a palavra-chave, o disco, o número |
+| `fio` | `#B9B6AF` | linhas da grade (2 px, 55% de opacidade) |
+| `apagado` | `#6B6860` | rótulos mono de apoio |
+
+- Grade: 6 colunas de 140 px de x = 120 a x = 960, linhas de 2 px em `fio` a 32% (v2: mais leve; sem linhas horizontais por padrão).
+- Um vermelho só. Sem degradê, sem sombra, sem brilho. Foto entra em preto e branco (`grayscale(1) contrast(1.15)`) dentro do disco.
+- O cliente pode trocar `vermelho` pela cor da marca; o resto não muda.
+
+## Regras do kit: tipografia
+Inter Tight 900 para título e número; IBM Plex Mono 500 para rótulos, índice e horas. Tudo alinhado à esquerda em x = 120.
+
+| papel | tamanho (px) | máx. caracteres | peso · tracking · caixa |
+|---|---|---|---|
+| título (linha) | 190–215 (encolhe até caber em 720 px) | 10 por linha | 900 · −0,05 em · minúsculas · entrelinha 0,88 |
+| número gigante | 520–640 (máx. 720 px de largura) | 2 dígitos | 900 · −0,06 em |
+| linha de lista | 54 (máx. 3 linhas) | 18 | 800 · −0,03 em · minúsculas |
+| rótulo mono | 24 | 40 | 500 · 0,08 em · MAIÚSCULAS |
+| assinatura (nome) | 170 | 10 | 900 · −0,06 em · minúsculas |
+| hora / info | 24 | 16 | 500 mono |
+
+- Texto que passa da largura do herói (720 px) **encolhe sozinho** (`caber()` em `elementos/base.ts`). Nunca palavra cortada.
+- Uma palavra em `vermelho` por bloco, escrita entre asteriscos (`*ruído.*`).
+- Nunca centralizar texto. Nunca mais de 3 linhas de título por cena.
+
+## Regras do kit: area-segura
+- Tudo que se lê fica entre **y = 168** e **y = 1330** e entre **x = 120** e **x = 960** (840 px úteis). Herói: no máximo **720 px** de largura.
+- **Vazio:** 35–45% do quadro, no mínimo, fica papel sem nada (fora a grade). Na demo o terço de baixo (y > 1250) fica vazio.
+- 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 |
+|---|---|
+| índice mono (canto) | 230 |
+| bloco de título (centro) | 800–840 |
+| número gigante (base) | 1020 |
+| régua | 1040–1160 |
+| disco da foto (centro, Ø 540) | 690 |
+| lista (primeira linha, passo 170) | 560 |
+| assinatura (nome) | 760 |
+
+- Fotos e o disco podem sangrar; texto nunca. O eixo x = 120 vale para tudo que é texto; o disco pode descer até x 180, nunca sangrar.
+
+## 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,012 ± 0,008 (período 120 quadros), deslize ±10 × ±8 px, giro ±0,17°; soco de +2,2% de zoom que cai em 7 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 |
+|---|---|---|
+| linha de título entra | 14 | translateX de ±1100 → 0 com `eb`; linhas pares da esquerda, ímpares da direita; intervalo 8 |
+| número gigante | 16 | scaleY 0 → 1 ancorado na base com `eb`, depois deriva 1,00 → 1,04 |
+| régua | 18 | largura 0 → 840 px em `e5`, barra de 12 px; marcas a cada 70 px aparecem 1 a cada 1 quadro |
+| disco da foto | 18 | scale 0,4 → 1 com `eb`; disco vermelho atrás desliza −120 px em x |
+| linha de lista | 12 | translateX −900 → 0, intervalo 7 quadros entre linhas |
+| assinatura | 16 | quadrado vermelho cresce do canto, nome desliza da esquerda |
+| saída de cena | 10 | desliza 160 px para a esquerda, sobrepondo 10 quadros |
+
+## Regras do kit: ritmo
+- 120 bpm → 1 batida = **15.00 quadros** (0.500 s). Cortes caem nas batidas; o gancho dura 3 a 4 batidas, o resto 3.
+- Tempo mínimo de leitura: **44** quadros por frase; depois que a última linha pousa, **10–14 quadros parados** antes de sair (a câmera segue derivando).
+- Entre linhas de título: **9–10 quadros** (era 8).
+
+| batida | duração (s) | quadros |
+|---|---|---|
+| gancho | 1.5–2.5 | 45–75 |
+| problema | 1.5–3.0 | 45–90 |
+| virada | 1.3–2.5 | 40–75 |
+| prova | 1.3–2.5 | 40–75 |
+| lista | 1.5–3.0 | 45–90 |
+| data | 1.3–2.5 | 40–75 |
+| marca | 1.6–3.0 | 48–90 |
+
+- Vídeo de demo: 8 s = 240 quadros (16.0 batidas).
+
+## Regras do kit: som
+- Trilha: `assets/trilha/frio-120bpm.mp3` (9 s, 120 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 tech-bright, 120 bpm, tom D, progressão night-drive, lead pluck, bateria tight) — 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 digital-soft: secos e digitais); trilha de 9 s, 120 bpm.
+
+| som | volume | quando |
+|---|---|---|
+| `whoosh-entra` | 0.9 | entrada de cena (−1 quadro) |
+| `pop-palavra` | 1 | linha de título que assenta |
+| `pop-cartao` | 0.9 | disco/foto que pousa |
+| `clique` | 0.8 | linha de lista e régua |
+| `swoosh` | 1 | número gigante que sobe |
+| `impacto` | 0.9 | a palavra em vermelho do gancho |
+| `subida` | 0.7 | 1,3 s antes do impacto 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/suica/sons/Som.tsx

@@ -0,0 +1,38 @@
+// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`, pacote digital-soft: secos e digitais); trilha de 9 s, 120 bpm.
+// 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/frio-120bpm.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/suica/texturas/Fundo.tsx

@@ -0,0 +1,16 @@
+// Fundo: papel off-white com a grade de 6 colunas (fios de 2 px) e linhas de base que sobem devagar.
+// Fica FORA da Camera; quem se mexe é o que está em cima.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {COR, ALTURA, LARGURA_UTIL, SEGURA} from '../base';
+
+export const Fundo: React.FC<{linhas?: boolean}> = ({linhas = false}) => {
+  const f = useCurrentFrame();
+  const col = (LARGURA_COL: number) => Array.from({length: 7}, (_, i) => SEGURA.lado + i * LARGURA_COL);
+  const xs = col(LARGURA_UTIL / 6);
+  const off = (f * 0.9) % 240;
+  return <AbsoluteFill style={{background: COR.papel}}>
+    {xs.map((x, i) => <div key={i} style={{position: 'absolute', left: x - 1, top: 0, width: 2, height: ALTURA, background: COR.fio, opacity: 0.32}} />)}
+    {linhas && Array.from({length: 9}, (_, i) => <div key={i} style={{position: 'absolute', left: 0, right: 0, top: i * 240 - off, height: 2, background: COR.fio, opacity: 0.35}} />)}
+  </AbsoluteFill>;
+};

package/materiais/suica/texturas/GradeFotos.tsx

@@ -0,0 +1,21 @@
+// GradeFotos: grade modular 2×3 (células de 450 × 360, vão de 20 px) revelada célula a célula por cortina
+// da esquerda para a direita, a cada 5 quadros. A célula `vermelha` é cheia, com um texto preto-sobre-vermelho.
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, FONTE, e5, seg} from '../base';
+
+export type GradeFotosProps = {fotos: string[]; inicio?: number; topo?: number; /** índice (0–5) da célula vermelha */ vermelha?: number; texto?: string; /** quantas células (2, 4 ou 6). v2: padrão 4, pra respirar */ celulas?: number};
+
+export const GradeFotos: React.FC<GradeFotosProps> = ({fotos, inicio = 0, topo = 420, vermelha = 3, texto = '', celulas = 4}) => {
+  const f = useCurrentFrame();
+  return <div style={{position: 'absolute', inset: 0}}>
+    {Array.from({length: celulas}, (_, k) => {
+      const col = k % 2, lin = Math.floor(k / 2);
+      const p = e5(seg(f, inicio + k * 5, inicio + k * 5 + 12));
+      const st: React.CSSProperties = {position: 'absolute', left: 120 + col * 430, top: topo + lin * 360, width: 410, height: 330, overflow: 'hidden', clipPath: `inset(0 ${(1 - p) * 100}% 0 0)`};
+      if (k === vermelha) return <div key={k} style={{...st, background: COR.vermelho, color: COR.papel, fontFamily: FONTE.titulo, fontWeight: 900, fontSize: 80, lineHeight: '72px', letterSpacing: '-0.05em', textTransform: 'lowercase', padding: 28, boxSizing: 'border-box', display: 'flex', alignItems: 'flex-end'}}>{texto}</div>;
+      const src = fotos[k % fotos.length];
+      return <div key={k} style={st}><Img src={src} style={{width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(1) contrast(1.15)', transform: `scale(${1.15 + f * 0.0025})`, transformOrigin: `${30 + k * 10}% 50%`}} /></div>;
+    })}
+  </div>;
+};

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

@@ -0,0 +1,21 @@
+// AssinaturaMarca: a última cena. O ícone (quadrado vermelho) cresce do canto superior esquerdo, o nome desliza
+// da esquerda em 230 px, uma régua de 6 px se estica e os dados aparecem em mono. Tudo no eixo x = 80.
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, MAX_HEROI, SEGURA, caber, e5, eb, seg} from '../base';
+
+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 = 760}) => {
+  const f = useCurrentFrame();
+  const ic = eb(seg(f, inicio, inicio + 16));
+  const nm = eb(seg(f, inicio + 5, inicio + 21));
+  const tam = caber(nome, 170, MAX_HEROI, 900, -0.06);
+  return <div style={{position: 'absolute', inset: 0}}>
+    <Img src={icone} style={{position: 'absolute', left: SEGURA.lado, top: y - 260, width: 160, height: 160, transformOrigin: '0 0', transform: `scale(${Math.max(0.001, ic)})`}} />
+    <div style={{position: 'absolute', left: SEGURA.lado, top: y - 40, fontFamily: FONTE.titulo, fontWeight: 900, fontSize: tam, lineHeight: `${tam}px`, letterSpacing: '-0.06em', textTransform: 'lowercase', color: COR.tinta, whiteSpace: 'nowrap', transform: `translateX(${(1 - nm) * -1100}px)`}}>{nome}<span style={{color: COR.vermelho}}>.</span></div>
+    <div style={{position: 'absolute', left: SEGURA.lado, top: y + tam - 10, height: 3, width: LARGURA_UTIL * e5(seg(f, inicio + 14, inicio + 30)), background: COR.tinta}} />
+    {detalhe.map((d, i) => <div key={i} style={{position: 'absolute', left: SEGURA.lado, top: y + tam + 40 + i * 42, fontFamily: FONTE.apoio, fontWeight: 500, fontSize: 24, letterSpacing: '0.08em', textTransform: 'uppercase', color: COR.tinta, opacity: seg(f, inicio + 16 + i * 4, inicio + 18 + i * 4), transform: `translateX(${(1 - eb(seg(f, inicio + 16 + i * 4, inicio + 30 + i * 4))) * -400}px)`}}>{d}</div>)}
+    {endereco && <div style={{position: 'absolute', left: SEGURA.lado, top: y + tam + 70 + detalhe.length * 42, fontFamily: FONTE.titulo, fontWeight: 800, fontSize: 48, letterSpacing: '-0.03em', color: COR.vermelho, opacity: seg(f, inicio + 24, inicio + 26), transform: `translateX(${(1 - eb(seg(f, inicio + 24, inicio + 38))) * 600}px)`}}>{endereco}</div>}
+  </div>;
+};

package/materiais/suica/tipografia/NumeroGigante.tsx

@@ -0,0 +1,21 @@
+// NumeroGigante: um número vermelho de 760 px que cresce da linha de base (scaleY 0 → 1 com sobra) e depois
+// deriva um pouco mais. Rótulo mono em cima. Resume o produto ou o evento em um dado ("3 dias", "40 vozes").
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, MAX_HEROI, SEGURA, caber, e5, eb, seg} from '../base';
+import {useDuracaoCena} from '../transicoes/Cena';
+
+export type NumeroGiganteProps = {numero: string; rotulo?: string; inicio?: number; /** base do número (y) */ y?: number; tamanho?: number; cor?: string; /** texto pequeno embaixo, no eixo x = 80 */ legenda?: string};
+
+export const NumeroGigante: React.FC<NumeroGiganteProps> = ({numero, rotulo, inicio = 0, y = 980, tamanho = 520, cor = COR.vermelho, legenda}) => {
+  const f = useCurrentFrame(), L = useDuracaoCena();
+  const tam = caber(numero, tamanho, MAX_HEROI, 900, -0.06);
+  const p = eb(seg(f, inicio, inicio + 16), 1.2);
+  const alt = tam * 0.74;
+  const deriva = 1 + 0.025 * (f / L);
+  return <div style={{position: 'absolute', inset: 0}}>
+    {rotulo && <div style={{position: 'absolute', left: SEGURA.lado, top: y - alt - 70, fontFamily: FONTE.apoio, fontWeight: 500, fontSize: 24, letterSpacing: '0.08em', textTransform: 'uppercase', color: COR.tinta, opacity: seg(f, inicio + 4, inicio + 8), transform: `translateX(${(1 - e5(seg(f, inicio + 4, inicio + 16))) * -200}px)`}}>{rotulo}</div>}
+    <div style={{position: 'absolute', left: SEGURA.lado - tam * 0.03, top: y - alt, height: alt, lineHeight: `${tam * 0.98}px`, fontFamily: FONTE.titulo, fontWeight: 900, fontSize: tam, letterSpacing: '-0.06em', color: cor, whiteSpace: 'nowrap', transformOrigin: '0 100%', transform: `scale(${deriva}, ${Math.max(0.001, p) * deriva})`, overflow: 'visible'}}>{numero}</div>
+    {legenda && <div style={{position: 'absolute', left: SEGURA.lado, top: y + 60, fontFamily: FONTE.titulo, fontWeight: 800, fontSize: 56, letterSpacing: '-0.03em', color: COR.tinta, textTransform: 'lowercase', opacity: seg(f, inicio + 10, inicio + 14), transform: `translateX(${(1 - eb(seg(f, inicio + 10, inicio + 24))) * 500}px)`}}>{legenda}</div>}
+  </div>;
+};

package/materiais/suica/tipografia/TituloGrade.tsx

@@ -0,0 +1,38 @@
+// TituloGrade: 1 a 3 linhas enormes, alinhadas à esquerda (x = 80), que deslizam pelos eixos da grade:
+// linhas pares entram da esquerda, ímpares da direita, com sobra de 8%. `*palavra*` vai em vermelho.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, MAX_HEROI, SEGURA, caber, e5, eb, pedacos, seg, textoLimpo} from '../base';
+
+export type TituloGradeProps = {
+  linhas: string[];
+  /** quadro da primeira linha */
+  inicio?: number;
+  /** quadros entre uma linha e a próxima */
+  intervalo?: number;
+  /** centro vertical do bloco */
+  y?: number;
+  /** tamanho padrão (encolhe sozinho se uma linha não couber) */
+  tamanho?: number;
+  /** quadro em que as linhas saem juntas (deslizam para a esquerda) */
+  fim?: number;
+  cor?: string;
+};
+
+export const TituloGrade: React.FC<TituloGradeProps> = ({linhas, inicio = 0, intervalo = 8, y = 700, tamanho = 190, fim, cor = COR.tinta}) => {
+  const f = useCurrentFrame();
+  const tam = Math.min(...linhas.map((l) => caber(textoLimpo(l), tamanho, MAX_HEROI)));
+  const passo = tam * 0.88;
+  const topo = y - (linhas.length * passo) / 2;
+  return <div style={{position: 'absolute', inset: 0}}>
+    {linhas.map((l, i) => {
+      const t = f - (inicio + i * intervalo);
+      const p = eb(t / 16);
+      const dir = i % 2 === 0 ? -1 : 1;
+      const sai = fim === undefined ? 0 : e5(seg(f, fim + i * 3, fim + i * 3 + 10));
+      return <div key={i} style={{position: 'absolute', left: SEGURA.lado, top: topo + i * passo, height: passo, lineHeight: `${passo}px`, whiteSpace: 'nowrap', fontFamily: FONTE.titulo, fontWeight: 900, fontSize: tam, letterSpacing: '-0.05em', textTransform: 'lowercase', color: cor, opacity: t < 0 ? 0 : 1, transform: `translateX(${(1 - p) * 1100 * dir - sai * 1300}px)`}}>
+        {pedacos(l).map((s, j) => <span key={j} style={{color: s.d ? COR.vermelho : cor}}>{s.t}</span>)}
+      </div>;
+    })}
+  </div>;
+};

package/materiais/suica/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 += `translateX(${-xo * 160}px)`;
+  const blur = (entrada === 'cortar' ? 0 : en * 0) + xo * 0;
+  const op = entrada === 'cortar' ? 1 - xo : (1 - en * 0) * (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/suica/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/synthwave/base.ts

@@ -0,0 +1,75 @@
+// Base do kit synthwave: 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/orbitron.woff2';
+import fonte1 from './fontes/rajdhani.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 = {
+  noite: '#0D0221',
+  roxo: '#2B0B5E',
+  magenta: '#FF2A9D',
+  ciano: '#00E5FF',
+  sol: '#FFD23F',
+  rosa: '#FF2A6D',
+  branco: '#FFF4FF'
+};
+
+// ---------- fonte ----------
+// Nome de família com o prefixo do kit ("SW ..."), pra não colidir com outro kit no mesmo estúdio.
+export const FONTE = {
+  titulo: '"SW Orbitron", Arial Black, Arial, sans-serif',
+  apoio: '"SW Rajdhani", Arial Narrow, Arial, sans-serif',
+};
+type G = {__kit_synthwave?: boolean};
+if (typeof document !== 'undefined' && !(globalThis as G).__kit_synthwave) {
+  (globalThis as G).__kit_synthwave = true;
+  const h = delayRender('synthwave: fontes');
+  Promise.all([
+    new FontFace('SW Orbitron', `url(${fonte0}) format('woff2')`, {weight: '600 900', style: 'normal'}).load(),
+    new FontFace('SW Rajdhani', `url(${fonte1}) format('woff2')`, {weight: '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 (110 bpm) em quadros */
+export const BATIDA = 16.36;
+
+// ---------- 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.02, familia = 'SW Orbitron'): 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.02, familia = 'SW Orbitron') => {
+  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/synthwave/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/synthwave/cores/paleta.json

@@ -0,0 +1,29 @@
+{
+  "estilo": "synthwave",
+  "cor": {
+    "noite": "#0D0221",
+    "roxo": "#2B0B5E",
+    "magenta": "#FF2A9D",
+    "ciano": "#00E5FF",
+    "sol": "#FFD23F",
+    "rosa": "#FF2A6D",
+    "branco": "#FFF4FF"
+  },
+  "video": {
+    "largura": 1080,
+    "altura": 1920,
+    "fps": 30,
+    "segura": {
+      "topo": 168,
+      "base": 1330,
+      "lado": 80
+    }
+  },
+  "particulas": {
+    "cor": "#FF2A9D"
+  },
+  "batida": {
+    "bpm": 110,
+    "quadros": 16
+  }
+}

package/materiais/synthwave/formas/Montanhas.tsx

@@ -0,0 +1,27 @@
+// Montanhas: duas cadeias de montanhas de arame ancoradas no horizonte (y = 1180): a de trás em ciano (fundo roxo), a da
+// frente em magenta (fundo noite). Sobem 300 px com sobra em 18 quadros e derivam em paralaxe (0,15 e 0,3 px por quadro).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, eb} from '../base';
+import {HORIZONTE} from '../texturas/Fundo';
+
+const PONTOS_T = '0,300 90,220 170,270 260,150 360,260 450,200 560,300 650,190 760,280 850,170 960,270 1060,210 1160,300 1300,230 1500,300';
+const PONTOS_F = '0,300 110,240 200,290 300,210 400,300 520,250 620,300 700,230 800,300 930,240 1040,300 1160,260 1300,300 1500,300';
+
+export type MontanhasProps = {inicio?: number; fim?: number};
+
+export const Montanhas: React.FC<MontanhasProps> = ({inicio = 0, fim}) => {
+  const f = useCurrentFrame();
+  const t = f - inicio;
+  if (t < 0 || (fim !== undefined && f >= fim)) return null;
+  const p = eb(t / 18, 1.3);
+  const camada = (pontos: string, fundo: string, borda: string, v: number, k: string) => <svg key={k} viewBox="0 0 1500 300" style={{position: 'absolute', left: -210 - t * v, top: HORIZONTE - 300, width: 1500, height: 300, overflow: 'visible'}}>
+    <polygon points={pontos} fill={fundo} stroke={borda} strokeWidth="5" strokeLinejoin="round" />
+  </svg>;
+  return <div style={{position: 'absolute', left: 0, top: 0, width: 1080, height: HORIZONTE, overflow: 'hidden'}}>
+    <div style={{position: 'absolute', inset: 0, transform: `translateY(${(1 - p) * 300}px)`}}>
+      {camada(PONTOS_T, COR.roxo, COR.ciano, 0.15, 't')}
+      {camada(PONTOS_F, COR.noite, COR.magenta, 0.3, 'f')}
+    </div>
+  </div>;
+};

package/materiais/synthwave/formas/Palmeiras.tsx

@@ -0,0 +1,30 @@
+// Palmeiras: duas palmeiras de silhueta (preto-noite com borda magenta de 3 px) plantadas no horizonte, uma à esquerda e uma à
+// direita. Sobem com sobra em 16 quadros e balançam ±2° (período 60 quadros) em torno da base. Sempre apoio, nunca no centro.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, eb} from '../base';
+import {HORIZONTE} from '../texturas/Fundo';
+
+const FOLHAS = [-75, -45, -15, 15, 45, 75, 105].map((a) => a);
+const Palma: React.FC<{x: number; escala: number; lado: 1 | -1; fase: number; t: number}> = ({x, escala, lado, fase, t}) => {
+  const sway = Math.sin((t / 60) * 2 * Math.PI + fase) * 2;
+  return <svg viewBox="-200 -700 400 740" style={{position: 'absolute', left: x - 200 * escala, top: HORIZONTE + 30 - 740 * escala, width: 400 * escala, height: 740 * escala, overflow: 'visible', transformOrigin: '50% 100%', transform: `scaleX(${lado}) rotate(${sway}deg)`}}>
+    <path d="M-14 40 C-10 -200 20 -400 40 -600 L62 -600 C44 -400 22 -200 18 40 Z" fill={COR.noite} stroke={COR.magenta} strokeWidth="3" />
+    <g transform="translate(51 -600)">
+      {FOLHAS.map((a, i) => <path key={i} transform={`rotate(${a - 90})`} d="M0 0 C40 -50 130 -70 210 -20 C140 -44 70 -34 0 0Z" fill={COR.noite} stroke={COR.magenta} strokeWidth="3" strokeLinejoin="round" />)}
+    </g>
+  </svg>;
+};
+
+export type PalmeirasProps = {inicio?: number; fim?: number};
+
+export const Palmeiras: React.FC<PalmeirasProps> = ({inicio = 0, fim}) => {
+  const f = useCurrentFrame();
+  const t = f - inicio;
+  if (t < 0 || (fim !== undefined && f >= fim)) return null;
+  const p = eb(t / 16, 1.4);
+  return <div style={{position: 'absolute', inset: 0, transform: `translateY(${(1 - p) * 500}px)`}}>
+    <Palma x={150} escala={0.8} lado={1} fase={0} t={t} />
+    <Palma x={940} escala={0.62} lado={-1} fase={2} t={t} />
+  </div>;
+};

package/materiais/synthwave/formas/QuadroHUD.tsx

@@ -0,0 +1,33 @@
+// QuadroHUD: painel de dados (888 × altura por linha) com cantoneiras ciano de 6 px que abrem do centro em 10 quadros. Cada linha
+// (rótulo Rajdhani ciano + valor Orbitron branco com brilho ciano) revela por varredura da esquerda para a direita em 10 quadros,
+// 8 quadros depois da anterior; fio magenta entre linhas. Cursor em bloco pisca na última.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, caber, e5, eb, seg} from '../base';
+
+export type LinhaHUD = {rotulo: string; valor: string};
+export type QuadroHUDProps = {linhas: LinhaHUD[]; titulo?: string; inicio?: number; intervalo?: number; y?: number; fim?: number};
+
+export const QuadroHUD: React.FC<QuadroHUDProps> = ({linhas, titulo, inicio = 0, intervalo = 8, y = 700, fim}) => {
+  const f = useCurrentFrame();
+  const t = f - inicio;
+  if (t < 0 || (fim !== undefined && f >= fim)) return null;
+  const h = 190;
+  const altura = (titulo ? 90 : 0) + linhas.length * h + 40;
+  const a = e5(seg(f, inicio, inicio + 10));
+  const canto = (pos: React.CSSProperties) => <div style={{position: 'absolute', width: 70, height: 70, borderColor: COR.ciano, borderStyle: 'solid', borderWidth: 0, boxShadow: `0 0 14px ${COR.ciano}`, ...pos}} />;
+  return <div style={{position: 'absolute', left: SEGURA.lado, top: y - altura / 2, width: LARGURA_UTIL, height: altura, transform: `scaleX(${Math.max(0.001, a)}) scaleY(${Math.max(0.001, eb(t / 12, 1.4))})`, background: 'rgba(13,2,33,0.62)', border: `2px solid ${COR.magenta}88`, boxSizing: 'border-box'}}>
+    {canto({left: -6, top: -6, borderTopWidth: 6, borderLeftWidth: 6})}{canto({right: -6, top: -6, borderTopWidth: 6, borderRightWidth: 6})}
+    {canto({left: -6, bottom: -6, borderBottomWidth: 6, borderLeftWidth: 6})}{canto({right: -6, bottom: -6, borderBottomWidth: 6, borderRightWidth: 6})}
+    {titulo && <div style={{position: 'absolute', left: 40, top: 22, fontFamily: FONTE.apoio, fontWeight: 600, fontSize: 40, letterSpacing: '0.3em', color: COR.magenta, textTransform: 'uppercase'}}>{titulo}</div>}
+    {linhas.map((l, i) => {
+      const r = e5(seg(f, inicio + 10 + i * intervalo, inicio + 20 + i * intervalo));
+      const tam = caber(l.valor.toUpperCase(), 96, LARGURA_UTIL - 120, 900, 0.02);
+      const ultima = i === linhas.length - 1;
+      return <div key={i} style={{position: 'absolute', left: 40, right: 40, top: (titulo ? 90 : 20) + i * h, height: h, borderTop: i > 0 ? `2px solid ${COR.magenta}88` : undefined, clipPath: `inset(0 ${(1 - r) * 100}% 0 0)`}}>
+        <div style={{position: 'absolute', left: 0, top: 18, fontFamily: FONTE.apoio, fontWeight: 600, fontSize: 40, letterSpacing: '0.3em', color: COR.ciano, textTransform: 'uppercase'}}>{l.rotulo}</div>
+        <div style={{position: 'absolute', left: 0, top: 66, fontFamily: FONTE.titulo, fontWeight: 900, fontSize: tam, letterSpacing: '0.02em', color: COR.branco, textShadow: `0 0 16px ${COR.ciano}`, whiteSpace: 'nowrap'}}>{l.valor.toUpperCase()}{ultima && Math.floor(f / 8) % 2 === 0 ? <span style={{background: COR.ciano, color: 'transparent'}}>_</span> : null}</div>
+      </div>;
+    })}
+  </div>;
+};