primocode 11.0.0 → 11.2.0

package/materiais/pontos-3d/regras.md

@@ -0,0 +1,136 @@
+# Regras do estilo pontos-3d (Campo de pontos)
+
+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 |
+|---|---|---|
+| `azul` | #1237FF | chão |
+| `azulEscuro` | #0A1FB8 | cantos e vinheta |
+| `azulClaro` | #3F5CFF | cruzes do fundo e pontos distantes |
+| `branco` | #FFFFFF | pontos e texto |
+| `laranja` | #FF5A36 | ponto de destaque, cursor, anel do rótulo |
+| `gelo` | #DDE4FF | texto secundário e rótulos |
+
+### Degradês e sombras
+
+- Fundo: `radial-gradient(90% 55% at 50% 40%, #2A4BFF 0%, #1237FF 55%, #0A1FB8 100%)`.
+- Cruzes: `+` de 14 px a 10% de branco, passo de 90 px, andando 0,35 px/quadro.
+- Ponto: branco; profundidade = raio × (1400 / (1400 − z)) e opacidade 0,35–1.
+- Ponto de destaque: a cada 12 pontos, `#FF5A36`, 1,35× maior.
+
+### O que o cliente pode trocar
+
+O azul-elétrico pode ser a cor da marca (um tom saturado e escuro); o laranja vira a cor de apoio. Branco e a regra "só ponto" não mudam.
+
+## Regras do kit: tipografia
+Duas fontes: **Sora 800** para título e **JetBrains Mono 800** para número e rótulo.
+
+| papel | fonte | peso | tamanho (px) | máx. caracteres |
+|---|---|---|---|---|
+| título (hero) | Sora | 800 | 170–220 | 9 |
+| número do contador (hero) | JetBrains Mono | 800 | 210–280 | 7 |
+| texto de pontos | Sora | 800 | 230–290 (amostrado a cada 12 px) | 8 |
+| rótulo técnico | JetBrains Mono | 700 | 46–56 | 26 |
+| detalhe / endereço | JetBrains Mono | 500 | 44–52 | 30 |
+
+- Tracking: −0,03 em no título; 0 em mono.
+- Line-height: 1,0 no título; 1,3 no rótulo.
+- Caixa: título em frase normal; rótulos em minúsculas.
+- Texto que cresce encolhe sozinho (`caber()` em `base.ts`) até caber em 920 px; nunca palavra cortada.
+
+## 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).
+- Embaixo de 1330 px ficam a legenda e os botões do Reels/TikTok: ali só fundo e o que sangra.
+- Respiro: 35–45% do quadro livre, 1 herói + no máximo 1 apoio por cena, nada encostando na borda, pausa de 15–24 quadros depois de cada impacto.
+- Posições de referência (centro da linha, em px):
+
+| uso | y |
+|---|---|
+| herói (centro) | 620–740 |
+| título de 1–2 linhas | 660–720 |
+| apoio (título ou rótulo) | 1100–1200 |
+| logo na assinatura | 540 |
+| nome em pontos | 900 |
+| endereço | 1130 |
+
+- Só o azul e as cruzes do fundo sangram; a nuvem fica dentro das margens de 96 px.
+
+## Regras do kit: movimento
+Curva padrão: `ob(t, 1,7)` para entradas, `e5(t) = 1 − (1 − t)^5` para trocas de forma. Cada ponto tem atraso próprio de até 40% da troca.
+
+| movimento | duração | valores |
+|---|---|---|
+| troca de forma | 24 quadros | cada ponto vai da posição A à B com `e5`, atraso 0–40% por ponto |
+| giro da nuvem | contínuo | rotateY 1,1°/quadro, inclinação 18° |
+| onda da grade | contínuo | amplitude 60 px, comprimento 380 px, 0,12 rad/quadro |
+| nuvem entra | 16 quadros | escala 0,3 → 1 com overshoot 1,7 |
+| texto de pontos | 28 quadros | cada ponto voa de uma nuvem solta até a letra; atraso por posição X até 10 quadros |
+| contador | 40 quadros | valor 0 → alvo com `e5`, dígitos mono tabulares |
+| rótulo | 12 + 10 quadros | linha desenha em 12, anel pulsa depois a cada 24 |
+| título | 18 quadros | sobe de máscara com overshoot 1,5 |
+| entrada de cena | 14 quadros | `zoom` 1,9× · `subir` 300 px · `direita` 800 px |
+| câmera (sempre) | contínuo | zoom 1,02 + 0,0003/quadro ± 0,012; soco +0,025 |
+
+- Pausa de 15–24 quadros depois de cada troca de forma e do fim da contagem.
+- A nuvem tem 900 pontos (cubo: 6 faces de 150).
+
+## Regras do kit: ritmo
+- 30 fps. Uma batida da trilha = **15 quadros** (120 bpm). Cortes em múltiplos de 15 quadros: 0, 15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165, 180, 195, 210, 225.
+
+| batida | duração (s) | quadros |
+|---|---|---|
+| gancho | 1,3–2,0 | 40–60 |
+| virada | 1,3–2,0 | 40–60 |
+| prova (cada) | 1,1–1,8 | 33–54 |
+| data | 1,0–1,6 | 30–48 |
+| marca | 1,6–3,0 | 48–90 |
+
+- Preview do kit: 8 s, 6 cenas.
+- Leitura: um título precisa de **≥ 30 quadros**; um contador, **≥ 24 quadros** depois de chegar ao valor.
+
+## Regras do kit: som
+- Trilha: `assets/trilha/tech-120bpm.mp3` (8,6 s, 120 bpm), volume **0.55**, fade de saída nos últimos **20 quadros**. Vídeo maior que 8,6 s: gere uma trilha nova no MotionCraft (`music make`, preset `tech-bright`, 120 bpm, tom E), não faça loop deste trecho.
+- Com narração: trilha a **0.28** e efeitos a 70% do volume da tabela.
+- Efeitos (todos sintetizados) e volume padrão:
+
+| som | volume | quando |
+|---|---|---|
+| `tick` | 0.7 | ponto ou letra que se monta |
+| `pop` | 0.8 | rótulo que aparece |
+| `whoosh` | 0.85 | entrada de cena e troca de forma |
+| `varre` | 0.7 | a nuvem gira para outra forma |
+| `impacto` | 0.8 | fim da contagem e o nome do produto |
+| `subida` | 0.6 | durante a contagem |
+| `clique` | 0.8 | endereço / detalhe |
+| `assinatura` | 0.9 | revelação da marca |
+
+- 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` + `impacto`, depois `varre` 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, subida, tick, varre, whoosh.
+
+## 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/pontos-3d/sons/Som.tsx

@@ -0,0 +1,33 @@
+// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`), trilha de `music make`.
+// 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 tick from './tick.mp3';
+import pop from './pop.mp3';
+import whoosh from './whoosh.mp3';
+import varre from './varre.mp3';
+import impacto from './impacto.mp3';
+import subida from './subida.mp3';
+import clique from './clique.mp3';
+import assinatura from './assinatura.mp3';
+import trilha from '../trilha/tech-120bpm.mp3';
+
+export const SONS = {'tick': tick, 'pop': pop, 'whoosh': whoosh, 'varre': varre, 'impacto': impacto, 'subida': subida, 'clique': clique, 'assinatura': assinatura} as const;
+export type NomeSom = keyof typeof SONS;
+
+// volume de cada efeito (0..1) já calibrado contra a trilha
+const VOLUME: Record<NomeSom, number> = {'tick': 0.7, 'pop': 0.8, 'whoosh': 0.85, 'varre': 0.7, 'impacto': 0.8, 'subida': 0.6, 'clique': 0.8, '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.55, 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/pontos-3d/texturas/Fundo.tsx

@@ -0,0 +1,20 @@
+// Fundo: azul-elétrico chapado com vinheta escura e cruzes (+) tênues que andam na diagonal.
+// Fica FORA da Camera.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {COR} from '../base';
+
+const cruz = `url("data:image/svg+xml;utf8,${encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><path d='M45 38v14M38 45h14' stroke='white' stroke-opacity='0.12' stroke-width='2'/></svg>")}")`;
+
+export type FundoProps = {
+  /** cor do chão (padrão: azul-elétrico) */
+  cor?: string;
+  velocidade?: number;
+};
+
+export const Fundo: React.FC<FundoProps> = ({cor = COR.azul, velocidade = 1}) => {
+  const f = useCurrentFrame() * velocidade;
+  return <AbsoluteFill style={{background: `radial-gradient(90% 55% at 50% 40%, #2A4BFF 0%, ${cor} 55%, ${COR.azulEscuro} 100%)`}}>
+    <AbsoluteFill style={{backgroundImage: cruz, backgroundSize: '90px 90px', backgroundPosition: `${f * 0.35}px ${f * 0.35}px`}} />
+  </AbsoluteFill>;
+};

package/materiais/pontos-3d/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 = '#FF5A36', 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/pontos-3d/tipografia/AssinaturaMarca.tsx

@@ -0,0 +1,23 @@
+// AssinaturaMarca: a última cena. O logo cai com overshoot, o nome se monta em pontos e o endereço aparece em mono.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FAM_B, FONTE_B, caber, ob, seg} from '../base';
+import {TextoDePontos} from '../tipografia/TextoDePontos';
+
+export type AssinaturaMarcaProps = {
+  logo: string;
+  nome: string;
+  endereco?: string;
+  inicio?: number;
+};
+
+export const AssinaturaMarca: React.FC<AssinaturaMarcaProps> = ({logo, nome, endereco, inicio = 0}) => {
+  const f = useCurrentFrame() - inicio;
+  const lg = ob(seg(f, 0, 18), 1.9), en = seg(f, 40, 52);
+  const te = caber(endereco ?? '', 50, FAM_B, 800, 500);
+  return <>
+    <img src={logo} style={{position: 'absolute', left: 540 - 190, top: 540 - 190, width: 380, height: 380, transform: `translateY(${(1 - lg) * -300}px) scale(${lg})`, opacity: Math.min(1, lg * 2)}} />
+    <TextoDePontos texto={nome} y={930} tamanho={210} passo={11} inicio={inicio + 8} ponto={6} />
+    {endereco && <div style={{position: 'absolute', left: 0, width: 1080, top: 1130, textAlign: 'center', fontFamily: FONTE_B, fontWeight: 500, fontSize: te, color: COR.gelo, opacity: en, transform: `translateY(${(1 - en) * 24}px)`}}>{endereco}</div>}
+  </>;
+};

package/materiais/pontos-3d/tipografia/Contador.tsx

@@ -0,0 +1,32 @@
+// Contador: número gigante em JetBrains Mono 800 que conta de 0 ao valor (e5, 40 quadros) com dígitos tabulares,
+// e uma legenda em mono embaixo. Ponto de milhar à brasileira. Ao chegar, dá um soco de escala (o plano põe o soco de câmera).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FAM_B, FONTE_B, LARGURA_UTIL, caber, e5, ob, seg} from '../base';
+
+export type ContadorProps = {
+  valor: number;
+  prefixo?: string;
+  sufixo?: string;
+  legenda?: string;
+  y?: number;
+  tamanho?: number;
+  inicio?: number;
+  duracao?: number;
+};
+
+const milhar = (n: number) => Math.round(n).toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+
+export const Contador: React.FC<ContadorProps> = ({valor, prefixo = '', sufixo = '', legenda, y = 680, tamanho = 250, inicio = 0, duracao = 40}) => {
+  const f = useCurrentFrame();
+  if (f < inicio) return null;
+  const txtFinal = prefixo + milhar(valor) + sufixo;
+  const tam = caber(txtFinal, tamanho, FAM_B, LARGURA_UTIL, 800, -0.04);
+  const v = valor * e5(seg(f, inicio, inicio + duracao)), chegou = f - (inicio + duracao);
+  const soco = chegou >= 0 ? 1 + 0.06 * Math.exp(-chegou / 5) * Math.cos(chegou) : 1;
+  const ent = ob(seg(f, inicio, inicio + 12), 1.5);
+  return <>
+    <div style={{position: 'absolute', left: 0, width: 1080, top: y - tam * 0.65, textAlign: 'center', fontFamily: FONTE_B, fontWeight: 800, fontSize: tam, lineHeight: 1.3, letterSpacing: '-0.04em', color: COR.branco, fontVariantNumeric: 'tabular-nums', transform: `scale(${soco * ent})`, whiteSpace: 'nowrap'}}>{prefixo}{milhar(v)}{sufixo}</div>
+    {legenda && <div style={{position: 'absolute', left: 0, width: 1080, top: y + tam * 0.62, textAlign: 'center', fontFamily: FONTE_B, fontWeight: 500, fontSize: 52, color: COR.gelo, opacity: seg(f, inicio + 14, inicio + 26), transform: `translateY(${(1 - seg(f, inicio + 14, inicio + 26)) * 24}px)`}}>{legenda}</div>}
+  </>;
+};

package/materiais/pontos-3d/tipografia/TextoDePontos.tsx

@@ -0,0 +1,55 @@
+// TextoDePontos: uma palavra feita de pontos. Os pontos começam numa nuvem solta e voam até as letras
+// (atraso por posição X de até 10 quadros); depois tremem de leve e uma onda de brilho passa pelo texto.
+import React, {useMemo} from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FAM_A, LARGURA, ALTURA, FONTE_A, caber, e5, ob, rnd, seg} from '../base';
+
+export type TextoDePontosProps = {
+  texto: string;
+  /** centro vertical */
+  y?: number;
+  /** tamanho da fonte usada pra amostrar (a palavra encolhe sozinha pra caber em 888 px) */
+  tamanho?: number;
+  /** distância entre pontos, em px */
+  passo?: number;
+  inicio?: number;
+  cor?: string;
+  destaque?: string;
+  /** raio do ponto */
+  ponto?: number;
+};
+
+type Pt = {x: number; y: number};
+
+export const TextoDePontos: React.FC<TextoDePontosProps> = ({texto, y = 700, tamanho = 260, passo = 12, inicio = 0, cor = COR.branco, destaque = COR.laranja, ponto = 6.4}) => {
+  const f = useCurrentFrame();
+  const tam = caber(texto, tamanho, FAM_A, 888, 800, -0.03);
+  const pts = useMemo<Pt[]>(() => {
+    if (typeof document === 'undefined') return [];
+    const c = document.createElement('canvas');
+    c.width = LARGURA; c.height = Math.ceil(tam * 1.4);
+    const ctx = c.getContext('2d');
+    if (!ctx) return [];
+    ctx.fillStyle = '#000';
+    ctx.font = `800 ${tam}px "${FAM_A}"`;
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText(texto, LARGURA / 2, c.height / 2);
+    const dados = ctx.getImageData(0, 0, c.width, c.height).data;
+    const r: Pt[] = [];
+    for (let py = 0; py < c.height; py += passo) for (let px = 0; px < c.width; px += passo) if (dados[(py * c.width + px) * 4 + 3] > 128) r.push({x: px, y: py - c.height / 2 + y});
+    return r;
+  }, [texto, tam, passo, y]);
+  void FONTE_A; void ALTURA;
+  if (f < inicio) return null;
+  const q = f - inicio;
+  return <svg width={LARGURA} height={ALTURA} viewBox={`0 0 ${LARGURA} ${ALTURA}`} style={{position: 'absolute', inset: 0, overflow: 'visible'}}>
+    {pts.map((p, i) => {
+      const atraso = (p.x / LARGURA) * 10 + rnd(i) * 4, t = e5(seg(q, atraso, atraso + 20));
+      const ox = 540 + (rnd(i * 3 + 1) - 0.5) * 1400, oy = y + (rnd(i * 5 + 2) - 0.5) * 1300;
+      const treme = t >= 1 ? Math.sin(q / 6 + i) * 1.8 : 0;
+      const onda = Math.max(0, 1 - Math.abs((q * 22 - 200 - p.x * 1) % 1400 - p.x) / 120);
+      const r = ponto * (0.3 + 0.7 * ob(seg(q, atraso, atraso + 16), 1.7)) * (1 + onda * 0.5);
+      return <circle key={i} cx={ox + (p.x - ox) * t + treme} cy={oy + (p.y - oy) * t + treme} r={r} fill={i % 12 === 0 ? destaque : cor} opacity={0.4 + 0.6 * t} />;
+    })}
+  </svg>;
+};

package/materiais/pontos-3d/tipografia/TituloSora.tsx

@@ -0,0 +1,36 @@
+// TituloSora: linhas em Sora 800 que sobem de uma máscara com overshoot e desfoque; um cursor laranja
+// quadrado pisca ao lado da última linha.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FAM_A, FONTE_A, LARGURA_UTIL, caber, e5, lerp, ob, seg} from '../base';
+
+export type TituloSoraProps = {
+  linhas: string[];
+  y?: number;
+  tamanho?: number;
+  inicio?: number;
+  intervalo?: number;
+  cor?: string;
+  /** mostra o cursor laranja na última linha */
+  cursor?: boolean;
+  fim?: number;
+};
+
+export const TituloSora: React.FC<TituloSoraProps> = ({linhas, y = 700, tamanho = 190, inicio = 0, intervalo = 9, cor = COR.branco, cursor = true, fim}) => {
+  const f = useCurrentFrame();
+  const sai = fim === undefined ? 0 : e5(seg(f, fim, fim + 10));
+  if (sai >= 1) return null;
+  const tam = Math.min(...linhas.map((l) => caber(l, tamanho, FAM_A, LARGURA_UTIL - (cursor ? tamanho * 0.3 : 0), 800, -0.03)));
+  const passo = tam * 1.08, topo = y - ((linhas.length - 1) * passo) / 2;
+  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai}}>
+    {linhas.map((l, i) => {
+      const em = inicio + i * intervalo, p = ob(seg(f, em, em + 18), 1.5), q = e5(seg(f, em, em + 18));
+      const ultima = i === linhas.length - 1, pisca = Math.floor(f / 8) % 2 === 0 || f < em + 24;
+      return <div key={i} style={{position: 'absolute', left: 0, width: 1080, top: topo + i * passo - tam * 0.6, height: tam * 1.2, overflow: 'hidden', textAlign: 'center'}}>
+        <div style={{transform: `translateY(${(1 - p) * 110}%)`, filter: q < 1 ? `blur(${(1 - q) * 10}px)` : undefined, fontFamily: FONTE_A, fontWeight: 800, fontSize: tam, lineHeight: 1.2, letterSpacing: `${lerp(0.06, -0.03, q)}em`, color: cor, whiteSpace: 'nowrap'}}>
+          {l}{cursor && ultima && <span style={{display: 'inline-block', width: tam * 0.16, height: tam * 0.7, marginLeft: tam * 0.08, background: COR.laranja, verticalAlign: 'baseline', opacity: pisca ? 1 : 0}} />}
+        </div>
+      </div>;
+    })}
+  </div>;
+};

package/materiais/pontos-3d/transicoes/Cena.tsx

@@ -0,0 +1,48 @@
+// Cena: janela de tempo de um plano. Entra com movimento (nunca corte seco) e a saída cruza 10 quadros
+// com a entrada da próxima. Dentro dela, useCurrentFrame() começa em 0.
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {c01, e5, ob, seg} from '../base';
+
+export type Entrada = 'subir' | 'zoom' | 'direita' | 'esquerda' | 'giro' | 'queda' | 'circulo' | 'nenhuma';
+export type Saida = 'sobe' | 'esquerda' | 'zoom' | 'gira' | 'encolhe';
+export const SOBREPOE = 10; // quadros em que a saída desta cena cruza a entrada da próxima
+export const QUADROS_ENTRADA = 14;
+
+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; saida?: Saida; ultima?: boolean; children: React.ReactNode};
+
+const Janela: React.FC<{duracao: number; entrada: Entrada; saida: Saida; ultima: boolean; children: React.ReactNode}> = ({duracao, entrada, saida, ultima, children}) => {
+  const f = useCurrentFrame();
+  const p = seg(f, 0, QUADROS_ENTRADA);
+  const en = entrada === 'nenhuma' ? 0 : 1 - ob(p, 1.3);
+  const xo = ultima ? 0 : e5(seg(f, duracao, duracao + SOBREPOE));
+  let tf = '';
+  let clip: string | undefined;
+  if (entrada === 'subir') tf += `translateY(${en * 300}px) `;
+  if (entrada === 'queda') tf += `translateY(${-en * 520}px) `;
+  if (entrada === 'zoom') tf += `scale(${1 + en * 0.9}) `;
+  if (entrada === 'direita') tf += `translateX(${en * 800}px) `;
+  if (entrada === 'esquerda') tf += `translateX(${-en * 800}px) `;
+  if (entrada === 'giro') tf += `rotate(${-en * 16}deg) scale(${1 + en * 0.6}) `;
+  if (entrada === 'circulo') clip = `circle(${e5(p) * 1700 + 4}px at 50% 52%)`;
+  if (saida === 'sobe') tf += `translateY(${-xo * 240}px) scale(${1 + xo * 0.08})`;
+  if (saida === 'esquerda') tf += `translateX(${-xo * 820}px) rotate(${-xo * 4}deg)`;
+  if (saida === 'zoom') tf += `scale(${1 + xo * 0.9})`;
+  if (saida === 'gira') tf += `rotate(${xo * 12}deg) scale(${1 - xo * 0.25}) translateY(${xo * 300}px)`;
+  if (saida === 'encolhe') tf += `scale(${1 - xo * 0.35})`;
+  const blur = c01(en) * 10 + xo * 10;
+  return <AbsoluteFill style={{transform: tf, clipPath: clip, opacity: (1 - c01(en) * 0.85) * (1 - xo), filter: blur > 0.3 ? `blur(${blur}px)` : undefined}}>{children}</AbsoluteFill>;
+};
+
+export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'subir', saida = 'zoom', 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} saida={saida} ultima={ultima}>{children}</Janela>
+    </CenaCtx.Provider>
+  </Sequence>;
+};

package/materiais/pontos-3d/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/produto-3d/base.ts

@@ -0,0 +1,109 @@
+// Base do kit produto-3d (v2, filme de produto escuro): cores, fontes, curvas e medidas.
+// Todo número visual sai daqui. Os elementos importam só este arquivo, 'react' e 'remotion'.
+import {continueRender, delayRender} from 'remotion';
+import syncopateUrl from './fontes/syncopate-latin.woff2';
+import plexUrl from './fontes/plex-mono.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: 88};
+export const LARGURA_UTIL = LARGURA - SEGURA.lado * 2; // 904 px
+
+// ---------- cor (ver regras/cor.md) ----------
+export const COR = {
+  /** o breu do estúdio e o chão polido */
+  breu: '#030304',
+  chao: '#07080A',
+  /** o poço de luz que cai do teto (volume) */
+  feixe: '#9AA3B5',
+  /** corpo do produto: alumínio anodizado quase preto */
+  anodizado: '#1B1C21',
+  borracha: '#101114',
+  metal: '#B9BEC6',
+  vidro: '#05070C',
+  /** luz de borda: esquerda quente, direita fria */
+  bordaQuente: '#FFE6CC',
+  bordaFria: '#D2E4FF',
+  texto: '#F2F2F0',
+  apagado: '#7B7F88',
+  linha: '#4A4E57',
+  /** o ÚNICO acento: o anel do produto e um traço na tipografia */
+  acento: '#FF5A1F',
+};
+
+// ---------- fonte ----------
+// Famílias com o prefixo do kit (P3), pra não colidir com outro kit no mesmo estúdio.
+export const FONTE_D = '"P3 Syncopate", "Syncopate", system-ui, sans-serif';
+export const FONTE_M = '"P3 Plex Mono", "IBM Plex Mono", ui-monospace, monospace';
+if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__kitP3v2) {
+  (globalThis as Record<string, unknown>).__kitP3v2 = true;
+  for (const [fam, url, peso] of [['P3 Syncopate', syncopateUrl, '700'], ['P3 Plex Mono', plexUrl, '400 600']]) {
+    const h = delayRender('produto-3d: ' + fam);
+    new FontFace(fam, `url(${url}) format('woff2')`, {weight: peso, style: 'normal'}).load()
+      .then((ff) => {document.fonts.add(ff); continueRender(h);})
+      .catch(() => continueRender(h));
+  }
+}
+/** tamanhos (tela 1080×1920) */
+export const TIPO = {
+  titulo: {tamanho: 68, tracking: 0.04},
+  marca: {tamanho: 92, tracking: 0.08},
+  numero: {tamanho: 150, tracking: 0},
+  rotulo: {tamanho: 27, tracking: 0.16},
+};
+
+// ---------- tempo e curva ----------
+export const c01 = (t: number) => Math.max(0, Math.min(1, t));
+export const seg = (f: number, a: number, b: number) => (b <= a ? (f >= b ? 1 : 0) : c01((f - a) / (b - a)));
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+export const bezier = (x1: number, y1: number, x2: number, y2: number) => {
+  const cx = 3 * x1, bx = 3 * (x2 - x1) - cx, ax = 1 - cx - bx;
+  const cy = 3 * y1, by = 3 * (y2 - y1) - cy, ay = 1 - cy - by;
+  const sx = (t: number) => ((ax * t + bx) * t + cx) * t;
+  return (x: number) => {
+    x = c01(x); let t = x;
+    for (let i = 0; i < 8; i++) {const d = (3 * ax * t + 2 * bx) * t + cx; const e = sx(t) - x; if (Math.abs(e) < 1e-5 || d === 0) break; t -= e / d;}
+    t = c01(t); return ((ay * t + by) * t + cy) * t;
+  };
+};
+/** câmera e peças: arranca devagar, pousa longo (a calma cara do filme) */
+export const suave = bezier(0.5, 0, 0.15, 1);
+/** entrada de texto: sai rápido, pousa longo */
+export const saida = bezier(0.16, 1, 0.3, 1);
+/** saída: acelera pra fora */
+export const entrada = bezier(0.7, 0, 0.84, 0);
+/** encaixe: acelera e assenta seco no fim (o "clac" da vista explodida) */
+export const encaixe = bezier(0.65, 0, 0.95, 0.4);
+export const CURVAS = {suave, saida, entrada, encaixe, linear: (t: number) => c01(t)} as const;
+export type NomeCurva = keyof typeof CURVAS;
+
+/** trilha de chaves [[quadro, valor], ...] → valor no quadro f */
+export const trilha = (f: number, chaves: [number, number][] | number | undefined, padrao = 0, curva: NomeCurva = 'suave'): number => {
+  if (chaves === undefined) return padrao;
+  if (typeof chaves === 'number') return chaves;
+  if (!chaves.length) return padrao;
+  if (f <= chaves[0][0]) return chaves[0][1];
+  for (let i = 1; i < chaves.length; i++) {
+    const [qa, va] = chaves[i - 1], [qb, vb] = chaves[i];
+    if (f <= qb) return lerp(va, vb, CURVAS[curva](seg(f, qa, qb)));
+  }
+  return chaves[chaves.length - 1][1];
+};
+/** uma batida da trilha em quadros */
+export const BATIDA = 18;
+
+// ---------- medida de texto ----------
+let canvas: HTMLCanvasElement | null = null;
+export const larguraTexto = (texto: string, tamanho: number, familia: string, peso: number, trackingEm: number): number => {
+  if (typeof document === 'undefined') return texto.length * tamanho * 0.8;
+  canvas = canvas || document.createElement('canvas');
+  const ctx = canvas.getContext('2d'); if (!ctx) return texto.length * tamanho * 0.8;
+  ctx.font = `${peso} ${tamanho}px ${familia}`;
+  return ctx.measureText(texto).width + texto.length * trackingEm * tamanho;
+};
+/** o maior tamanho até `tamanho` em que o texto cabe em `largura`. Nunca corta palavra. */
+export const caber = (texto: string, tamanho: number, largura = LARGURA_UTIL, familia = FONTE_D, peso = 700, trackingEm = 0.04) => {
+  const w = larguraTexto(texto, tamanho, familia, peso, trackingEm);
+  return w > largura ? Math.floor(tamanho * (largura / w)) : tamanho;
+};

package/materiais/produto-3d/camera/Camera.tsx

@@ -0,0 +1,23 @@
+// Camera: o empurrão lento do filme para camadas 2D (texto, foto recortada, cartão).
+// O Produto3D tem a própria câmera 3D (órbita/distância por chaves); esta só aproxima o quadro.
+// Valores do filme: +3 a +6% de zoom por plano, curva suave, nunca tremor.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {CURVAS, NomeCurva, lerp, seg} from '../base';
+import {useDuracaoCena} from '../transicoes/Cena';
+
+export type CameraProps = {
+  /** zoom no início e no fim da cena (1 = parado; 1.05 = empurrão do filme) */
+  de?: number; para?: number;
+  /** deriva horizontal total em px (−30 a 30) */
+  deriva?: number;
+  /** ponto que a câmera aproxima, em % da tela */
+  foco?: [number, number];
+  curva?: NomeCurva;
+  children: React.ReactNode;
+};
+
+export const Camera: React.FC<CameraProps> = ({de = 1, para = 1.04, deriva = 0, foco = [50, 48], curva = 'suave', children}) => {
+  const t = CURVAS[curva](seg(useCurrentFrame(), 0, useDuracaoCena()));
+  return <AbsoluteFill style={{transform: `translateX(${deriva * t}px) scale(${lerp(de, para, t)})`, transformOrigin: `${foco[0]}% ${foco[1]}%`}}>{children}</AbsoluteFill>;
+};

package/materiais/produto-3d/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/produto-3d/cores/paleta.json

@@ -0,0 +1,31 @@
+{
+  "estilo": "produto-3d",
+  "cor": {
+    "breu": "#030304",
+    "chao": "#07080A",
+    "feixe": "#9AA3B5",
+    "anodizado": "#1B1C21",
+    "borracha": "#101114",
+    "metal": "#B9BEC6",
+    "vidro": "#05070C",
+    "bordaQuente": "#FFE6CC",
+    "bordaFria": "#D2E4FF",
+    "texto": "#F2F2F0",
+    "apagado": "#7B7F88",
+    "linha": "#4A4E57",
+    "acento": "#FF5A1F"
+  },
+  "video": {
+    "largura": 1080,
+    "altura": 1920,
+    "fps": 30,
+    "segura": {
+      "topo": 168,
+      "base": 1330,
+      "lado": 80
+    }
+  },
+  "particulas": {
+    "cor": "#FF5A1F"
+  }
+}