primocode 11.0.0 → 11.1.0

package/materiais/ugc-reels/referencia/analise.md

@@ -0,0 +1,85 @@
+# Análise do vídeo de referência: UGC de Reels
+
+Método Clube do Motion: dissecar o vídeo pronto pra aprender a técnica, não pra copiar. Este vídeo (`referencia.mp4`, vertical 1080x1920 renderizado em 540x960) é o filme de demonstração do estilo; o código que o fez NÃO está aqui. A IA pode olhar o vídeo e esta análise; a cena nova se escreve do zero com as peças desta pasta.
+
+- Duração: 240 quadros = 8.0 s a 30 fps.
+- Trilha: trilha/pop-120bpm.mp3, 120 bpm (1 batida = 15.0 quadros = 0.50 s).
+- Cenas: 6; cortes em 1.4 s, 2.8 s, 4.2 s, 5.4 s, 6.6 s.
+
+## Linha do tempo, segundo a segundo
+
+| tempo | quadros | entrada | peças em cena (pasta/Peça) | sons |
+|---|---|---|---|---|
+| 0.0 s-1.4 s | 0-42 | nenhuma | formas/VideoCelular, formas/CabecalhoPerfil, tipografia/LegendaEmoji | corte@0.5 s, corte@0.9 s, palavra@0.1 s, pop@0.8 s |
+| 1.4 s-2.8 s | 42-84 | nenhuma | formas/VideoCelular, tipografia/LegendaEmoji, formas/Reacoes | corte@1.4 s, palavra@1.5 s, corte@2.1 s, impacto@2.3 s |
+| 2.8 s-4.2 s | 84-126 | nenhuma | formas/VideoCelular, formas/Comentario, tipografia/LegendaEmoji | corte@2.8 s, notificacao@3.0 s, corte@3.5 s, palavra@3.2 s |
+| 4.2 s-5.4 s | 126-162 | nenhuma | formas/VideoCelular, tipografia/LegendaEmoji, formas/NotaDeMao | corte@4.2 s, palavra@4.3 s, corte@4.8 s, whoosh@4.8 s |
+| 5.4 s-6.6 s | 162-198 | nenhuma | formas/VideoCelular, tipografia/LegendaEmoji, formas/BotaoLink | corte@5.4 s, palavra@5.5 s, corte@5.9 s, toque@5.9 s |
+| 6.6 s-8.0 s | 198-240 | nenhuma | tipografia/AssinaturaMarca | assinatura@6.7 s, pop@7.0 s |
+
+Fundo, partículas e a câmera valem o vídeo todo (fundo vivo + câmera em perspectiva sempre).
+
+## Cortes e batida
+
+- Corte em 1.4 s (quadro 42): batida 2.80 (fora da batida: corte na voz ou no gesto).
+- Corte em 2.8 s (quadro 84): batida 5.60 (fora da batida: corte na voz ou no gesto).
+- Corte em 4.2 s (quadro 126): batida 8.40 (fora da batida: corte na voz ou no gesto).
+- Corte em 5.4 s (quadro 162): batida 10.80 (NA batida).
+- Corte em 6.6 s (quadro 198): batida 13.20 (NA batida).
+
+## Câmera
+
+A câmera deste estilo é a peça `camera/Camera` (ver o código da peça): ela dá o empurrão nos cortes e uma deriva contínua. No material novo, `camera/CameraDeriva` (chaves {em, z, x, y, giro}) acrescenta o controle por chaves.
+
+## Números de easing e tempos
+
+- `e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);`
+- `ob = (t: number, s = 1.9) => {const x = c01(t) - 1; return 1 + (s + 1) * x * x * x + s * x * x;};`
+
+Movimentos medidos no estilo:
+
+| movimento | duração | valores |
+|---|---|---|
+| corte seco | 1 quadro | troca de imagem; zoom alterna 1,0× ↔ 1,2×, depois empurra +6% em 14 quadros |
+| tremida de mão | contínuo | ±5 px em X e Y, ±0,4°, 2 senóides (período 9 e 13 quadros) |
+| chip da palavra | 8 quadros | escala 0,7 → 1 com overshoot 1,9, gira ±3° |
+| emoji da frase | 10 quadros | escala 0 → 1 com overshoot 1,9 depois da última palavra |
+| cabeçalho | 12 quadros | desce 80 px com overshoot; barrinha da cena enche de 0 a 100% |
+| bolha de comentário | 12 quadros | escala 0,5 → 1 com overshoot 1,9, gira −3° |
+| corações | 90 quadros cada | sobem 520 px com ondulação ±24 px, somem nos últimos 20 |
+| botão LINK NA BIO | 12 quadros + contínuo | entra com overshoot; anel pulsa a cada 20 quadros; mãozinha quica 14 px |
+| entrada de cena | 6 quadros | corte seco (zoom da imagem) |
+| câmera (sempre) | contínuo | zoom 1,01 ± 0,01, deriva ±6/±5 px; soco +0,025 em ~5 quadros |
+
+## 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,2–1,6 | 36–48 |
+| virada | 1,2–1,8 | 36–54 |
+| prova (cada) | 1,0–1,5 | 30–45 |
+| cta | 1,0–1,5 | 30–45 |
+| marca | 1,2–2,0 | 36–60 |
+
+## Som
+
+- Trilha: `assets/trilha/pop-120bpm.mp3` (8,6 s, 120 bpm), volume **0.5**, fade de saída nos últimos **20 quadros**. Vídeo maior que 8,6 s: gere uma trilha nova no MotionCraft (`music make`, preset `warm-major`, 120 bpm, tom D), não faça loop deste trecho.
+- Com narração: trilha a **0.25** e efeitos a 70% do volume da tabela.
+- Efeitos (todos sintetizados) e volume padrão:
+| som | volume | quando |
+|---|---|---|
+| `corte` | 0.8 | cada corte seco entre imagens |
+| `palavra` | 0.85 | início de cada frase da legenda |
+| `pop` | 0.85 | emoji, avatar ou adereço que entra |
+| `notificacao` | 0.8 | bolha de comentário |
+| `whoosh` | 0.7 | nota ou botão que entra |
+
+## Técnicas pra levar (o que se vê nos quadros 1 a 4)
+
+- Composição: foto de vídeo em tela cheia; legenda centralizada no meio do quadro; cabeçalho de perfil ('bia.organiza', botão Seguir) e barra de progresso no topo, como no Reels.
+- Profundidade: foto real com profundidade de campo e escurecimento; sem elementos 3D; a leitura vem da legenda sobre a imagem.
+- Densidade: baixa. Uma frase curta por quadro, com emoji; o último quadro mostra um selo de check amarelo e o @ do perfil.
+- Tipografia: sans arredondada pesada branca, sombra suave; a palavra em foco ganha um chip amarelo ('pra').
+- Cor: foto quente e escura, branco e amarelo-ovo para a legenda; nenhum fundo chapado.
+- Movimento: a legenda aparece palavra por palavra, emojis estouram ao lado; a foto muda de ângulo (zoom) a cada frase.

package/materiais/ugc-reels/regras.md

@@ -0,0 +1,138 @@
+# Regras do estilo ugc-reels (UGC de Reels)
+
+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 |
+|---|---|---|
+| `preto` | #0E0E10 | contorno da legenda, texto sobre amarelo, fundo de cartão |
+| `branco` | #FFFFFF | legenda, cabeçalho, bolha |
+| `amarelo` | #FFE14D | chip da palavra ativa, botão, anel de story |
+| `vermelho` | #FF3B5C | coração, ponto REC, anel de story |
+| `cinza` | #2A2A2E | barra de story vazia, avatar sem foto |
+| `azulSeguir` | #3B82F6 | botão Seguir |
+
+### Degradês e sombras
+
+- Contorno da legenda: 8 sombras de 5 px a 45° em `#0E0E10` (círculo de 5 px).
+- Vinheta da imagem: `radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(0,0,0,.45))`.
+- Gradiente da base (pra legenda ler): `linear-gradient(180deg, transparent 55%, rgba(0,0,0,.5) 100%)`.
+- Anel de story: `conic-gradient(#FFE14D, #FF3B5C, #FFE14D)`, 8 px.
+- Chip amarelo: `#FFE14D`, canto 18 px, texto `#0E0E10`.
+
+### O que o cliente pode trocar
+
+O amarelo (chip, botão, anel) pode ser a cor de destaque da marca; o azul do Seguir e o vermelho do coração ficam.
+
+## Regras do kit: tipografia
+Duas fontes: **Montserrat 900** (legenda e UI) e **Caveat 700** (nota à mão).
+
+| papel | fonte | peso | tamanho (px) | máx. caracteres |
+|---|---|---|---|---|
+| legenda | Montserrat | 900 | 72–84 | 14 |
+| chip da palavra ativa | Montserrat | 900 | igual à legenda | 14 |
+| @usuário / botão | Montserrat | 700 | 40–46 | 22 |
+| comentário | Montserrat | 700 | 40–46 | 28 |
+| nota à mão | Caveat | 700 | 96–120 | 16 |
+
+- Tracking: −0,01 em na legenda; 0 no resto.
+- Line-height: 1,05 na legenda.
+- Caixa: legenda em frase normal; botão em caixa-alta.
+- 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 |
+|---|---|
+| cabeçalho de perfil (barras) | 190 |
+| cabeçalho (avatar + usuário) | 250 |
+| bolha de comentário (centro) | 900 |
+| nota à mão | 760 |
+| legenda (centro do bloco) | 1180 |
+| botão LINK NA BIO (centro) | 1000 |
+| logo no cartão final | 560 |
+
+- A imagem em tela cheia e a vinheta sangram; legenda, UI e adereços respeitam as margens de 96 px.
+
+## Regras do kit: movimento
+Curva padrão: `ob(t, 1,9)` (overshoot ~9%) para chips, emoji e adereços; `e5(t)` para o zoom pós-corte. Cortes são secos.
+
+| movimento | duração | valores |
+|---|---|---|
+| corte seco | 1 quadro | troca de imagem; zoom alterna 1,0× ↔ 1,2×, depois empurra +6% em 14 quadros |
+| tremida de mão | contínuo | ±5 px em X e Y, ±0,4°, 2 senóides (período 9 e 13 quadros) |
+| chip da palavra | 8 quadros | escala 0,7 → 1 com overshoot 1,9, gira ±3° |
+| emoji da frase | 10 quadros | escala 0 → 1 com overshoot 1,9 depois da última palavra |
+| cabeçalho | 12 quadros | desce 80 px com overshoot; barrinha da cena enche de 0 a 100% |
+| bolha de comentário | 12 quadros | escala 0,5 → 1 com overshoot 1,9, gira −3° |
+| corações | 90 quadros cada | sobem 520 px com ondulação ±24 px, somem nos últimos 20 |
+| botão LINK NA BIO | 12 quadros + contínuo | entra com overshoot; anel pulsa a cada 20 quadros; mãozinha quica 14 px |
+| entrada de cena | 6 quadros | corte seco (zoom da imagem) |
+| câmera (sempre) | contínuo | zoom 1,01 ± 0,01, deriva ±6/±5 px; soco +0,025 em ~5 quadros |
+
+- Corte a cada 12–20 quadros dentro da cena; nenhuma imagem passa de 24 quadros.
+- A legenda troca de frase junto com o corte, nunca no meio de uma imagem.
+
+## 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,2–1,6 | 36–48 |
+| virada | 1,2–1,8 | 36–54 |
+| prova (cada) | 1,0–1,5 | 30–45 |
+| cta | 1,0–1,5 | 30–45 |
+| marca | 1,2–2,0 | 36–60 |
+
+- Preview do kit: 8 s, 6 cenas.
+- Leitura: uma frase de legenda precisa de **≥ 24 quadros**; o comentário, **≥ 30**.
+
+## Regras do kit: som
+- Trilha: `assets/trilha/pop-120bpm.mp3` (8,6 s, 120 bpm), volume **0.5**, fade de saída nos últimos **20 quadros**. Vídeo maior que 8,6 s: gere uma trilha nova no MotionCraft (`music make`, preset `warm-major`, 120 bpm, tom D), não faça loop deste trecho.
+- Com narração: trilha a **0.25** e efeitos a 70% do volume da tabela.
+- Efeitos (todos sintetizados) e volume padrão:
+
+| som | volume | quando |
+|---|---|---|
+| `corte` | 0.8 | cada corte seco entre imagens |
+| `palavra` | 0.85 | início de cada frase da legenda |
+| `pop` | 0.85 | emoji, avatar ou adereço que entra |
+| `notificacao` | 0.8 | bolha de comentário |
+| `whoosh` | 0.7 | nota ou botão que entra |
+| `toque` | 0.8 | botão LINK NA BIO |
+| `impacto` | 0.7 | a frase da virada |
+| `assinatura` | 0.9 | cartão final |
+
+- Um som por movimento que importa; no máximo **4 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 `impacto` no quadro seguinte). Máx. 6 efeitos por segundo. Nunca o mesmo arquivo duas vezes no mesmo quadro.
+- Sons deste estilo: assinatura, corte, impacto, notificacao, palavra, pop, toque, 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/ugc-reels/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 corte from './corte.mp3';
+import palavra from './palavra.mp3';
+import pop from './pop.mp3';
+import notificacao from './notificacao.mp3';
+import whoosh from './whoosh.mp3';
+import toque from './toque.mp3';
+import impacto from './impacto.mp3';
+import assinatura from './assinatura.mp3';
+import trilha from '../trilha/pop-120bpm.mp3';
+
+export const SONS = {'corte': corte, 'palavra': palavra, 'pop': pop, 'notificacao': notificacao, 'whoosh': whoosh, 'toque': toque, 'impacto': impacto, '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> = {'corte': 0.8, 'palavra': 0.85, 'pop': 0.85, 'notificacao': 0.8, 'whoosh': 0.7, 'toque': 0.8, 'impacto': 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/ugc-reels/texturas/Fundo.tsx

@@ -0,0 +1,8 @@
+// Fundo: preto liso. Só aparece nos quadros de corte entre duas imagens; a imagem (VideoCelular) cobre a tela.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {COR} from '../base';
+
+export type FundoProps = {cor?: string};
+
+export const Fundo: React.FC<FundoProps> = ({cor = COR.preto}) => <AbsoluteFill style={{background: cor}} />;

package/materiais/ugc-reels/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 = '#FFE14D', 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/ugc-reels/tipografia/AssinaturaMarca.tsx

@@ -0,0 +1,28 @@
+// AssinaturaMarca: cartão final. A imagem fica borrada (24 px) e escurecida; o avatar com anel de story cai com overshoot,
+// o @usuário aparece e o botão Seguir / site fecham. Sem logo gigante: o clima é de perfil, não de comercial.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FAM_A, FONTE_A, caber, ob, seg} from '../base';
+
+export type AssinaturaMarcaProps = {
+  /** imagem de fundo (borrada) */
+  fundo: string;
+  logo: string;
+  usuario: string;
+  endereco?: string;
+  inicio?: number;
+};
+
+export const AssinaturaMarca: React.FC<AssinaturaMarcaProps> = ({fundo, logo, usuario, endereco, inicio = 0}) => {
+  const f = useCurrentFrame() - inicio;
+  const av = ob(seg(f, 0, 12), 1.9), us = ob(seg(f, 8, 20), 1.9), bt = ob(seg(f, 16, 28), 1.9);
+  const tu = caber(usuario, 70, FAM_A, 800, 900, -0.01), te = caber(endereco ?? '', 46, FAM_A, 800, 700, 0);
+  return <>
+    <img src={fundo} style={{position: 'absolute', inset: 0, width: 1080, height: 1920, objectFit: 'cover', filter: 'blur(24px) brightness(0.45) saturate(1.1)', transform: `scale(${1.2 + f * 0.001})`}} />
+    <div style={{position: 'absolute', left: 540 - 190, top: 540 - 190, width: 380, height: 380, borderRadius: '50%', background: `conic-gradient(${COR.amarelo}, ${COR.vermelho}, ${COR.amarelo})`, padding: 14, boxSizing: 'border-box', transform: `scale(${av})`, opacity: Math.min(1, av * 2)}}>
+      <img src={logo} style={{width: '100%', height: '100%', borderRadius: '50%', border: '10px solid #0E0E10', boxSizing: 'border-box', objectFit: 'cover'}} />
+    </div>
+    <div style={{position: 'absolute', left: 0, width: 1080, top: 800, textAlign: 'center', fontFamily: FONTE_A, fontWeight: 900, fontSize: tu, letterSpacing: '-0.01em', color: COR.branco, transform: `scale(${us})`, opacity: Math.min(1, us * 2)}}>{usuario}</div>
+    {endereco && <div style={{position: 'absolute', left: 540 - 300, top: 940, width: 600, height: 110, borderRadius: 55, background: COR.amarelo, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FONTE_A, fontWeight: 900, fontSize: te, color: COR.preto, transform: `scale(${bt})`, opacity: Math.min(1, bt * 2)}}>{endereco}</div>}
+  </>;
+};

package/materiais/ugc-reels/tipografia/LegendaEmoji.tsx

@@ -0,0 +1,43 @@
+// LegendaEmoji: legenda em Montserrat 900 branca com contorno preto de 5 px. As palavras aparecem juntas e a palavra
+// "ativa" (uma a cada `passo` quadros) vira um chip amarelo que pula (overshoot 1,9). Depois da última palavra
+// entra um emoji de 96 px com overshoot. Quebra sozinha em até 2 linhas de ~3 palavras.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, CONTORNO, FAM_A, FONTE_A, LARGURA_UTIL, caber, c01, e5, ob, seg} from '../base';
+
+export type LegendaEmojiProps = {
+  /** a frase, ex.: "Eu vivia atrasada" */
+  texto: string;
+  emoji?: string;
+  /** centro vertical do bloco */
+  y?: number;
+  tamanho?: number;
+  inicio?: number;
+  /** quadros por palavra */
+  passo?: number;
+  /** quadro em que a legenda some (sem isso fica até o fim da cena) */
+  fim?: number;
+};
+
+export const LegendaEmoji: React.FC<LegendaEmojiProps> = ({texto, emoji, y = 1180, tamanho = 108, inicio = 0, passo = 5, fim}) => {
+  const f = useCurrentFrame();
+  const sai = fim === undefined ? 0 : seg(f, fim, fim + 4);
+  if (f < inicio || sai >= 1) return null;
+  const palavras = texto.split(' ');
+  const meio = palavras.length > 3 ? Math.ceil(palavras.length / 2) : palavras.length;
+  const linhas = [palavras.slice(0, meio), palavras.slice(meio)].filter((l) => l.length > 0);
+  const tam = Math.min(...linhas.map((l) => caber(l.join(' '), tamanho, FAM_A, LARGURA_UTIL - 40, 900, -0.01)));
+  const ativa = Math.min(palavras.length - 1, Math.floor((f - inicio) / passo));
+  const fimFrase = inicio + palavras.length * passo;
+  const altura = tam * 1.25 * linhas.length;
+  let n = 0;
+  return <div style={{position: 'absolute', left: 0, width: 1080, top: y - altura / 2, height: altura, opacity: 1 - sai}}>
+    {linhas.map((l, li) => <div key={li} style={{position: 'absolute', left: 0, width: 1080, top: li * tam * 1.25, height: tam * 1.25, display: 'flex', justifyContent: 'center', alignItems: 'center', gap: tam * 0.22, whiteSpace: 'nowrap'}}>
+      {l.map((p, pi) => {
+        const idx = n++, ativo = idx === ativa && f < fimFrase + passo, q = ob(seg(f - inicio - idx * passo, 0, 8), 1.9);
+        return <span key={pi} style={{display: 'inline-block', fontFamily: FONTE_A, fontWeight: 900, fontSize: tam, lineHeight: 1.1, letterSpacing: '-0.01em', color: ativo ? COR.preto : COR.branco, textShadow: ativo ? 'none' : CONTORNO, background: ativo ? COR.amarelo : 'transparent', borderRadius: 18, padding: ativo ? '0 16px' : '0 0', margin: ativo ? '0 -16px' : 0, transform: ativo ? `scale(${0.7 + 0.3 * q}) rotate(${(idx % 2 ? 3 : -3) * (1 - e5(seg(f - inicio - idx * passo, 0, 8)) * 0.4)}deg)` : `scale(${c01(0.5 + 0.5 * q)})`, opacity: f >= inicio + idx * passo ? 1 : 0.0}}>{p}</span>;
+      })}
+    </div>)}
+    {emoji && <div style={{position: 'absolute', left: 0, width: 1080, top: altura + 8, textAlign: 'center', fontSize: 104, lineHeight: 1, transform: `scale(${ob(seg(f, fimFrase, fimFrase + 10), 1.9)})`, opacity: f >= fimFrase ? 1 : 0}}>{emoji}</div>}
+  </div>;
+};

package/materiais/ugc-reels/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 4 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 = 4; // quadros em que a saída desta cena cruza a entrada da próxima
+export const QUADROS_ENTRADA = 6;
+
+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.2);
+  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) * 0 + xo * 0;
+  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 = 'encolhe', 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/ugc-reels/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/vercel-mono/base.ts

@@ -0,0 +1,82 @@
+// Base do kit vercel-mono: 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 f0Url from './fontes/inter.woff2';
+import f1Url from './fontes/jetbrains-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: 80};
+export const LARGURA_UTIL = LARGURA - SEGURA.lado * 2; // 920 px
+
+// ---------- cor ----------
+export const COR = {
+  fundo: '#000000',
+  preto: '#000000',
+  branco: '#FFFFFF',
+  cinza: '#8A8A8A',
+  linha: '#3A3A3A',
+  destaque: '#FFFFFF',
+  cortina: '#FFFFFF',
+};
+
+// ---------- fonte ----------
+// Famílias com o prefixo do kit (VM), pra não colidir com outro kit no mesmo estúdio.
+export const FONTE_D = '"VM Inter", "Inter", system-ui, sans-serif';
+export const FONTE_T = '"VM JetBrains Mono", "JetBrains Mono", ui-monospace, monospace';
+export const FONTE_S = '"VM JetBrains Mono", "JetBrains Mono", ui-monospace, monospace';
+const LISTA = [
+  {fam: 'VM Inter', url: f0Url, peso: '500 800', estilo: 'normal'},
+  {fam: 'VM JetBrains Mono', url: f1Url, peso: '500 800', estilo: 'normal'},
+];
+if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__kit_VM) {
+  (globalThis as Record<string, unknown>).__kit_VM = true;
+  for (const f of LISTA) {
+    const h = delayRender('vercel-mono: ' + f.fam);
+    new FontFace(f.fam, `url(${f.url}) format('woff2')`, {weight: f.peso, style: f.estilo}).load()
+      .then((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: cubic-bezier(.2,.8,.2,1) aproximado */
+export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
+/** entrada com overshoot de ~10% (easeOutBack, c1 = 2.2) */
+export const eb = (t: number) => {const x = c01(t) - 1, c = 2.2; return 1 + (c + 1) * x * x * x + c * x * x;};
+/** entra e sai suave */
+export const e3 = (t: number) => {const x = c01(t); return x * x * (3 - 2 * x);};
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+/** uma batida da trilha do kit em quadros */
+export const BATIDA = 15.0;
+
+// ---------- texto ----------
+/** "Usar *IA* já" -> [{t:'Usar ', d:false}, {t:'IA', d:true}, {t:' já', d:false}] */
+export const partes = (texto: string) => texto.split('*').map((t, i) => ({t, d: i % 2 === 1})).filter((p) => p.t.length > 0);
+export const textoLimpo = (t: string) => t.replace(/\*/g, '');
+let canvas: HTMLCanvasElement | null = null;
+const cache = new Map<string, number>();
+export const larguraTexto = (texto: string, tamanho: number, peso = 800, trackingEm = -0.03, familia = FONTE_D): 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.56;
+  canvas = canvas || document.createElement('canvas');
+  const ctx = canvas.getContext('2d'); if (!ctx) return texto.length * tamanho * 0.56;
+  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 = 800, trackingEm = -0.03, familia = FONTE_D) => {
+  const w = larguraTexto(textoLimpo(texto), tamanho, peso, trackingEm, familia);
+  return w > largura ? Math.floor(tamanho * (largura / w)) : tamanho;
+};
+
+// ---------- câmera ----------
+export const CAMERA = {"z": 1.02, "zOsc": 0.008, "push": 0.0003, "dx": 8, "dy": 6, "rot": 0.003, "soco": 0.04};

package/materiais/vercel-mono/camera/Camera.tsx

@@ -0,0 +1,23 @@
+// Camera: deriva constante por baixo de tudo e um soco em cada batida. O quadro nunca fica parado.
+// `batidas` são quadros absolutos do vídeo. Parâmetros do kit em base.ts (CAMERA).
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {CAMERA} from '../base';
+
+export type CameraProps = {batidas?: number[]; forca?: number; children: React.ReactNode};
+
+export const posCamera = (f: number, batidas: number[], forca = 1) => {
+  const C = CAMERA;
+  let z = C.z + C.zOsc * Math.sin(f / 90) + f * C.push, dx = Math.sin(f / 37) * C.dx, dy = Math.cos(f / 51) * C.dy;
+  const rot = Math.sin(f / 83) * C.rot;
+  for (const h of batidas) if (f >= h) {
+    const d = Math.exp(-(f - h) / 7) * forca;
+    z += C.soco * d; dx += C.dx * 0.8 * d * Math.sin((f - h) * 2.7 + h); dy += C.dy * 0.8 * d * Math.cos((f - h) * 3.3 + h);
+  }
+  return {z, dx, dy, rot};
+};
+
+export const Camera: React.FC<CameraProps> = ({batidas = [], forca = 1, children}) => {
+  const c = posCamera(useCurrentFrame(), batidas, forca);
+  return <AbsoluteFill style={{transform: `translate(${c.dx}px, ${c.dy}px) rotate(${c.rot}rad) scale(${c.z})`, transformOrigin: '50% 44%'}}>{children}</AbsoluteFill>;
+};

package/materiais/vercel-mono/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/vercel-mono/cores/paleta.json

@@ -0,0 +1,25 @@
+{
+  "estilo": "vercel-mono",
+  "cor": {
+    "fundo": "#000000",
+    "preto": "#000000",
+    "branco": "#FFFFFF",
+    "cinza": "#8A8A8A",
+    "linha": "#3A3A3A",
+    "destaque": "#FFFFFF",
+    "cortina": "#FFFFFF"
+  },
+  "video": {
+    "largura": 1080,
+    "altura": 1920,
+    "fps": 30,
+    "segura": {
+      "topo": 168,
+      "base": 1330,
+      "lado": 80
+    }
+  },
+  "particulas": {
+    "cor": "#FFFFFF"
+  }
+}