primocode 11.0.0 → 11.2.0

package/kits/antes-depois/assets/ASSETS.md

@@ -1,23 +0,0 @@
-# Assets do kit antes-depois
-
-| arquivo | o que é | origem | licença |
-|---|---|---|---|
-| `fontes/archivoblack.woff2` | Archivo Black regular (400), subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Archivo+Black`), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-ArchivoBlack.txt` |
-| `fontes/manrope.woff2` | Manrope variável 500–800, subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Manrope:wght@500..800`), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-Manrope.txt` |
-| `sons/whoosh-entra.mp3` | whoosh de entrada | sintetizado: MotionCraft `sfx make`, tipo `whoosh_in`, pacote `paper` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/whoosh-sai.mp3` | whoosh de saída | sintetizado: MotionCraft `sfx make`, tipo `whoosh_out`, pacote `paper` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/swoosh.mp3` | swoosh lateral | sintetizado: MotionCraft `sfx make`, tipo `swoosh`, pacote `paper` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/pop-palavra.mp3` | pop curto de palavra | sintetizado: MotionCraft `sfx make`, tipo `word_pop`, pacote `paper` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/pop-cartao.mp3` | pop de cartão/selo que pousa | sintetizado: MotionCraft `sfx make`, tipo `icon_pop`, pacote `paper` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/clique.mp3` | clique de botão | sintetizado: MotionCraft `sfx make`, tipo `button`, pacote `paper` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/impacto.mp3` | impacto grave | sintetizado: MotionCraft `sfx make`, tipo `impact`, pacote `paper` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/subida.mp3` | riser de 1,2 s | sintetizado: MotionCraft `sfx make`, tipo `riser`, pacote `paper` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/assinatura.mp3` | acorde da marca | sintetizado: MotionCraft `sfx make`, tipo `logo_sting`, pacote `paper` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/tick.mp3` | tique do número que conta | sintetizado: MotionCraft `sfx make`, tipo `slot_tick`, pacote `paper` | sem samples; síntese própria, uso livre (CC0) |
-| `trilha/corte-118bpm.mp3` | 8.6 s de trilha, preset tech-bright, 118 bpm, tom D | MotionCraft `music make --preset tech-bright --bpm 118 --key D --duration 10 --force`, cortada em 8,6 s com fade | sem samples; síntese própria (CC0). MotionCraft é MIT |
-
-Conteúdo de demonstração (não faz parte do estilo, fica em `exemplos/`):
-
-| arquivo | origem | licença |
-|---|---|---|
-| `exemplos/fotos/foto-06.jpg`, `foto-07.jpg`, `foto-08.jpg` | cópia das fotos de demonstração do kit apple-tipografico (Unsplash, picsum ids 20, 26, 60), recorte 720×960; o "antes" é a mesma foto com filtro CSS (cinza, escura, desfocada) | Unsplash License |

package/kits/antes-depois/elementos/BarraMedidor.tsx

@@ -1,43 +0,0 @@
-// BarraMedidor: duas barras de largura total, a do "antes" cinza e comprida, a do "depois" limão e curta, cada uma com
-// o valor contando dentro. Mostra a diferença em número e em tamanho ao mesmo tempo.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FONTE, TEXTO, SOMBRA_DURA, lerp, ov, seg} from './base';
-
-export type BarraMedidorProps = {
-  titulo: string;
-  unidade: string;
-  antes: {valor: number; rotulo: string};
-  depois: {valor: number; rotulo: string};
-  inicio?: number;
-  /** centro vertical do conjunto, px */
-  y: number;
-  fim?: number;
-};
-
-export const BarraMedidor: React.FC<BarraMedidorProps> = ({titulo, unidade, antes, depois, inicio = 0, y, fim = 1e9}) => {
-  const f = useCurrentFrame();
-  if (f < inicio - 1 || f > fim + 12) return null;
-  const sai = seg(f, fim, fim + 10);
-  const max = Math.max(antes.valor, depois.valor);
-  const linha = (d: {valor: number; rotulo: string}, i: number, cor: string, texto: string) => {
-    const t = ov(seg(f, inicio + 4 + i * 10, inicio + 24 + i * 10));
-    const larg = Math.max(150, (880 * d.valor) / max) * Math.max(0, t);
-    const v = Math.round(lerp(0, d.valor, seg(f, inicio + 6 + i * 10, inicio + 30 + i * 10)));
-    // barra curta: o valor vai pra FORA, à direita (na v1 ele era cortado dentro da barra)
-    const fora = (880 * d.valor) / max < 380;
-    const valor = <>{v}<span style={{fontSize: 62, marginLeft: 12}}>{unidade}</span></>;
-    return <div key={i} style={{marginTop: i ? 40 : 0}}>
-      <div style={{fontFamily: TEXTO, fontWeight: 800, fontSize: 46, color: COR.tinta, marginBottom: 14, opacity: seg(f, inicio + 4 + i * 10, inicio + 14 + i * 10)}}>{d.rotulo}</div>
-      <div style={{display: 'flex', alignItems: 'center', gap: 30}}>
-        <div style={{width: Math.max(0, larg), height: 190, borderRadius: 40, background: cor, border: `8px solid ${COR.tinta}`, boxSizing: 'border-box', boxShadow: SOMBRA_DURA(12), display: 'flex', alignItems: 'center', justifyContent: 'flex-end', padding: '0 34px', overflow: 'hidden', whiteSpace: 'nowrap', fontFamily: FONTE, fontSize: 118, color: texto, flex: 'none'}}>{fora ? null : valor}</div>
-        {fora && <div style={{fontFamily: FONTE, fontSize: 118, color: COR.tinta, whiteSpace: 'nowrap', opacity: seg(f, inicio + 10 + i * 10, inicio + 18 + i * 10)}}>{valor}</div>}
-      </div>
-    </div>;
-  };
-  return <div style={{position: 'absolute', left: 100, width: 880, top: y - 330, opacity: 1 - sai, transform: `translateY(${-sai * 160}px)`}}>
-    <div style={{fontFamily: FONTE, fontSize: 92, lineHeight: 1.05, textTransform: 'uppercase', color: COR.tinta, marginBottom: 52, transform: `translateX(${(1 - ov(seg(f, inicio, inicio + 16))) * -900}px)`}}>{titulo}</div>
-    {linha(antes, 0, COR.cinza, COR.tinta)}
-    {linha(depois, 1, COR.limao, COR.tinta)}
-  </div>;
-};

package/kits/antes-depois/elementos/Cena.tsx

@@ -1,41 +0,0 @@
-// Cena: janela de tempo de um plano (troca "revelar"). Dentro dela, useCurrentFrame() começa em 0.
-// v2: as cenas NÃO se sobrepõem (a v1 deixava a cena velha por baixo da nova e embolava tudo).
-// A cena sai sozinha nos últimos 7 quadros (encolhe 6%, sobe 40 px, some); a próxima entra limpa.
-import React, {createContext, useContext} from 'react';
-import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
-import {e5, seg} from './base';
-
-export type Entrada = 'cortina' | 'baixo' | 'circulo' | 'flip' | 'nenhuma';
-export const SOBREPOE = 0; // sem sobreposição entre cenas
-export const SAIDA = 7; // quadros da saída dentro da própria cena
-
-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 estilo = (f: number, duracao: number, entrada: Entrada, ultima: boolean): React.CSSProperties => {
-  const p = entrada === 'nenhuma' ? 1 : e5(seg(f, 0, 14));
-  const xo = ultima ? 0 : seg(f, duracao - SAIDA, duracao) ** 2;
-  const base = {transform: `translateY(${-xo * 40}px) scale(${1 - xo * 0.06})`, opacity: 1 - xo} as React.CSSProperties;
-  if (p >= 1) return base;
-  if (entrada === 'cortina') return {...base, clipPath: `polygon(0 0, ${p * 130}% 0, ${p * 130 - 30}% 100%, 0 100%)`};
-  if (entrada === 'baixo') return {...base, clipPath: `inset(${(1 - p) * 100}% 0 0 0)`};
-  if (entrada === 'circulo') return {...base, clipPath: `circle(${p * 150}% at 50% 55%)`};
-  return {...base, transform: `perspective(1800px) rotateX(${(1 - p) * -80}deg)`, transformOrigin: '50% 0%', opacity: 0.3 + 0.7 * p};
-};
-
-const Janela: React.FC<{duracao: number; entrada: Entrada; ultima: boolean; children: React.ReactNode}> = ({duracao, entrada, ultima, children}) => {
-  const f = useCurrentFrame();
-  return <AbsoluteFill style={estilo(f, duracao, entrada, ultima)}>{children}</AbsoluteFill>;
-};
-
-export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'cortina', 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/kits/antes-depois/elementos/FaixaMarquee.tsx

@@ -1,35 +0,0 @@
-// FaixaMarquee: faixa inclinada, contida em 880 px (margem de 100 px), com o texto correndo sem parar (como fita de obra).
-// Chega varrendo de um lado com overshoot. Sozinha vira chamada de ação.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FONTE, ov, seg} from './base';
-
-export type FaixaMarqueeProps = {
-  /** a frase que repete (ex.: "VEJA O SEU •") */
-  texto: string;
-  /** centro vertical, px */
-  y: number;
-  /** inclinação, graus */
-  rot?: number;
-  altura?: number;
-  cor?: 'limao' | 'tinta';
-  /** px por quadro; negativo corre pra direita */
-  velocidade?: number;
-  inicio?: number;
-  fim?: number;
-};
-
-export const FaixaMarquee: React.FC<FaixaMarqueeProps> = ({texto, y, rot = -6, altura = 210, cor = 'limao', velocidade = 16, inicio = 0, fim = 1e9}) => {
-  const f = useCurrentFrame();
-  if (f < inicio - 1 || f > fim + 12) return null;
-  const t = ov(seg(f, inicio, inicio + 16)), sai = seg(f, fim, fim + 10);
-  const fundo = cor === 'limao' ? COR.limao : COR.tinta, letra = cor === 'limao' ? COR.tinta : COR.limao;
-  const item = `${texto}  `;
-  const passo = item.length * altura * 0.52;
-  const desloc = ((f - inicio) * velocidade) % passo;
-  return <div style={{position: 'absolute', left: 100, width: 880, borderRadius: 56, borderLeft: `8px solid ${COR.tinta}`, borderRight: `8px solid ${COR.tinta}`, top: y - altura / 2, height: altura, background: fundo, borderTop: `8px solid ${COR.tinta}`, borderBottom: `8px solid ${COR.tinta}`, boxSizing: 'border-box', overflow: 'hidden', transform: `rotate(${rot + (1 - t) * 14}deg) translateX(${(1 - t) * (rot < 0 ? -1200 : 1200) + sai * 1200}px)`}}>
-    <div style={{position: 'absolute', top: 0, bottom: 0, left: -passo + desloc, display: 'flex', alignItems: 'center', whiteSpace: 'nowrap', fontFamily: FONTE, fontSize: altura * 0.62, color: letra, textTransform: 'uppercase', paddingTop: altura * 0.04}}>
-      {[0, 1, 2, 3].map((i) => <span key={i} style={{width: passo, flex: 'none'}}>{item}</span>)}
-    </div>
-  </div>;
-};

package/kits/antes-depois/elementos/Fundo.tsx

@@ -1,24 +0,0 @@
-// Fundo: a tela dividida em duas metades chapadas, concreto à esquerda (antes) e limão à direita (depois),
-// com a emenda ao meio balançando devagar. É a moldura que se repete em todo vídeo do kit.
-import React from 'react';
-import {AbsoluteFill, useCurrentFrame} from 'remotion';
-import {COR} from './base';
-
-export type FundoProps = {
-  /** cor da metade "antes" */
-  antes?: string;
-  /** cor da metade "depois" */
-  depois?: string;
-  /** posição média da emenda, 0..1 */
-  pos?: number;
-};
-
-export const Fundo: React.FC<FundoProps> = ({antes = COR.concreto, depois = COR.limao, pos = 0.5}) => {
-  const f = useCurrentFrame();
-  const x = (pos + Math.sin(f / 26) * 0.045) * 1080;
-  return <AbsoluteFill style={{background: antes}}>
-    <AbsoluteFill style={{background: `repeating-linear-gradient(135deg, rgba(15,15,13,0.045) 0 3px, transparent 3px 22px)`}} />
-    <div style={{position: 'absolute', left: x, top: 0, width: 1080 - x + 40, height: 1920, background: depois}} />
-    <div style={{position: 'absolute', left: x - 8, top: 0, width: 16, height: 1920, background: COR.tinta}} />
-  </AbsoluteFill>;
-};

package/kits/antes-depois/elementos/ListaMudancas.tsx

@@ -1,37 +0,0 @@
-// ListaMudancas: o que mudou, linha a linha. Cada linha é um cartão partido ao meio: a metade "antes" cinza e riscada,
-// a metade "depois" limão com check. As duas metades entram de lados opostos e se encontram no meio.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, SOMBRA_DURA, TEXTO, ov, seg} from './base';
-
-export type ListaMudancasProps = {
-  linhas: {antes: string; depois: string}[];
-  inicio?: number;
-  /** quadros entre linhas */
-  intervalo?: number;
-  /** centro vertical do conjunto, px */
-  y: number;
-  fim?: number;
-};
-
-export const ListaMudancas: React.FC<ListaMudancasProps> = ({linhas, inicio = 0, intervalo = 11, y, fim = 1e9}) => {
-  const f = useCurrentFrame();
-  if (f < inicio - 1 || f > fim + 12) return null;
-  const alt = 230, gap = 34, total = linhas.length * alt + (linhas.length - 1) * gap, sai = seg(f, fim, fim + 10);
-  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `translateY(${-sai * 160}px)`}}>
-    {linhas.map((l, i) => {
-      const t = ov(seg(f, inicio + i * intervalo, inicio + i * intervalo + 14));
-      const risca = seg(f, inicio + i * intervalo + 12, inicio + i * intervalo + 22);
-      return <div key={i} style={{position: 'absolute', left: 100, top: y - total / 2 + i * (alt + gap), width: 880, height: alt, display: 'flex', borderRadius: 40, border: `8px solid ${COR.tinta}`, boxSizing: 'border-box', overflow: 'hidden', boxShadow: SOMBRA_DURA(12), transform: `scale(${0.8 + 0.2 * t})`, opacity: Math.min(1, t * 3)}}>
-        <div style={{width: '44%', background: COR.cinza, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 20px', transform: `translateX(${(1 - t) * -700}px)`, position: 'relative'}}>
-          <span style={{fontFamily: TEXTO, fontWeight: 700, fontSize: 52, lineHeight: 1.1, color: COR.concretoEscuro, textAlign: 'center'}}>{l.antes}</span>
-          <div style={{position: 'absolute', left: '8%', top: '50%', height: 8, width: `${84 * risca}%`, background: COR.tinta}} />
-        </div>
-        <div style={{width: '56%', background: COR.limao, borderLeft: `8px solid ${COR.tinta}`, display: 'flex', alignItems: 'center', gap: 18, padding: '0 24px', transform: `translateX(${(1 - t) * 700}px)`}}>
-          <svg width={64} height={64} viewBox="0 0 40 40" style={{flex: 'none'}}><circle cx={20} cy={20} r={19} fill={COR.tinta} /><path d="M11 21 L18 28 L30 13" stroke={COR.limao} strokeWidth={5} fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
-          <span style={{fontFamily: TEXTO, fontWeight: 800, fontSize: 56, lineHeight: 1.08, color: COR.tinta}}>{l.depois}</span>
-        </div>
-      </div>;
-    })}
-  </div>;
-};

package/kits/antes-depois/elementos/Montagem.tsx

@@ -1,59 +0,0 @@
-// Montagem: transforma um plano de cenas (JSON escrito pela IA) em vídeo, usando só os elementos do kit.
-// Ela NÃO decide nada de estética: só põe Fundo + Camera + Cenas + sons onde o plano mandou.
-// Formato do plano: ver exemplos/plano.json e KITS.md (seção "plano de cenas").
-import React from 'react';
-import {AbsoluteFill} from 'remotion';
-import {COR} from './base';
-import {Fundo} from './Fundo';
-import {Camera} from './Camera';
-import {Cena, Entrada} from './Cena';
-import {Efeito, NomeSom, Trilha} from './Som';
-import {TelaDividida} from './TelaDividida';
-import {RotuloAntesDepois} from './RotuloAntesDepois';
-import {BarraMedidor} from './BarraMedidor';
-import {NumeroDelta} from './NumeroDelta';
-import {ListaMudancas} from './ListaMudancas';
-import {FaixaMarquee} from './FaixaMarquee';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const ELEMENTOS: Record<string, React.FC<any>> = {
-  TelaDividida, RotuloAntesDepois, BarraMedidor, NumeroDelta, ListaMudancas, FaixaMarquee,
-};
-
-export type Camada = {elemento: string; props: Record<string, unknown>};
-export type CenaPlano = {
-  batida: string; de: number; ate: number; entrada?: Entrada;
-  camadas: Camada[];
-  /** sons relativos ao início da cena */
-  sons?: {som: NomeSom; em: number; volume?: number}[];
-  /** socos de câmera extras, relativos ao início da cena (o início já é um soco) */
-  socos?: number[];
-};
-export type Plano = {kit: string; duracao: number; fundo?: Record<string, unknown>; trilha?: {volume?: number} | false; cenas: CenaPlano[]};
-
-/** troca "fotos/foto-01.jpg" pela URL importada, em qualquer prop (texto, lista ou objeto) */
-const resolver = (v: unknown, arquivos: Record<string, string>): unknown => {
-  if (typeof v === 'string') return arquivos[v] ?? v;
-  if (Array.isArray(v)) return v.map((x) => resolver(x, arquivos));
-  if (v && typeof v === 'object') return Object.fromEntries(Object.entries(v).map(([k, x]) => [k, resolver(x, arquivos)]));
-  return v;
-};
-
-export const Montagem: React.FC<{plano: Plano; arquivos?: Record<string, string>}> = ({plano, arquivos = {}}) => {
-  const socos = plano.cenas.flatMap((c) => [c.de, ...(c.socos ?? []).map((s) => c.de + s)]);
-  const ultima = plano.cenas.length - 1;
-  return <AbsoluteFill style={{background: COR.concreto}}>
-    <Fundo {...(plano.fundo as object)} />
-    <Camera batidas={socos}>
-      {plano.cenas.map((c, i) => <Cena key={i} de={c.de} ate={c.ate} entrada={c.entrada} ultima={i === ultima}>
-        {c.camadas.map((k, j) => {
-          const El = ELEMENTOS[k.elemento];
-          if (!El) throw new Error(`antes-depois: elemento "${k.elemento}" não existe no kit`);
-          return <El key={j} {...(resolver(k.props, arquivos) as object)} />;
-        })}
-      </Cena>)}
-    </Camera>
-    {plano.cenas.flatMap((c, i) => (c.sons ?? []).map((s, j) => <Efeito key={`${i}-${j}`} som={s.som} em={c.de + s.em} volume={s.volume} />))}
-    {plano.trilha !== false && <Trilha volume={plano.trilha?.volume} />}
-  </AbsoluteFill>;
-};

package/kits/antes-depois/elementos/NumeroDelta.tsx

@@ -1,36 +0,0 @@
-// NumeroDelta: o ganho em um número só. Bloco limão inclinado, borda preta e sombra dura, com o número em Archivo Black
-// que conta de 0 até o valor, uma seta grande e o rótulo. É o herói da batida de resultado.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FONTE, TEXTO, SOMBRA_DURA, caber, lerp, ov, seg} from './base';
-
-export type NumeroDeltaProps = {
-  valor: number;
-  /** sinal mostrado antes do número ("−" ou "+") */
-  sinal?: string;
-  sufixo?: string;
-  rotulo: string;
-  /** sentido da seta */
-  seta?: 'baixo' | 'cima';
-  inicio?: number;
-  /** centro vertical, px */
-  y: number;
-  fim?: number;
-};
-
-export const NumeroDelta: React.FC<NumeroDeltaProps> = ({valor, sinal = '−', sufixo = '%', rotulo, seta = 'baixo', inicio = 0, y, fim = 1e9}) => {
-  const f = useCurrentFrame();
-  if (f < inicio - 1 || f > fim + 12) return null;
-  const t = ov(seg(f, inicio, inicio + 18)), sai = seg(f, fim, fim + 10);
-  const n = Math.round(lerp(valor * 0.35, valor, seg(f, inicio + 4, inicio + 22)));
-  const texto = `${sinal}${n}${sufixo}`;
-  const tam = caber(`${sinal}${valor}${sufixo}`, 400, 800, 400, -0.02, 'AD Archivo Black');
-  const dir = seta === 'baixo' ? 1 : -1;
-  return <div style={{position: 'absolute', left: 100, top: y - 380, width: 880, height: 760, background: COR.limao, border: `10px solid ${COR.tinta}`, borderRadius: 56, boxShadow: SOMBRA_DURA(20), boxSizing: 'border-box', transform: `translateY(${(1 - t) * 1000 - sai * 1000}px) rotate(${-4 + (1 - t) * 12}deg) scale(${0.85 + 0.15 * t})`, overflow: 'hidden'}}>
-    <svg width={880} height={760} style={{position: 'absolute', inset: 0}}>
-      <path d={dir > 0 ? 'M700 -40 L700 220 L610 130 M700 220 L790 130' : 'M700 220 L700 -40 L610 50 M700 -40 L790 50'} transform="translate(0 20)" stroke={COR.tinta} strokeWidth={30} fill="none" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.14} />
-    </svg>
-    <div style={{position: 'absolute', left: 0, width: 860, top: 90, textAlign: 'center', fontFamily: FONTE, fontSize: tam, lineHeight: 1.1, color: COR.tinta, letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums', transform: `scale(${1 + 0.06 * Math.exp(-Math.max(0, f - inicio - 22) / 5) * (f >= inicio + 22 ? 1 : 0)})`}}>{texto}</div>
-    <div style={{position: 'absolute', left: 30, width: 820, top: 560, textAlign: 'center', fontFamily: TEXTO, fontWeight: 800, fontSize: 70, lineHeight: 1.1, color: COR.tinta, opacity: seg(f, inicio + 14, inicio + 26)}}>{rotulo}</div>
-  </div>;
-};

package/kits/antes-depois/elementos/RotuloAntesDepois.tsx

@@ -1,26 +0,0 @@
-// RotuloAntesDepois: adesivo "ANTES" (concreto escuro) ou "DEPOIS" (limão) com borda preta e sombra dura, inclinado,
-// que estala no canto com overshoot. Marca de que lado da divisão a pessoa está olhando.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FONTE, SOMBRA_DURA, ov, seg} from './base';
-
-export type RotuloAntesDepoisProps = {
-  lado: 'antes' | 'depois';
-  texto?: string;
-  inicio?: number;
-  /** centro, px */
-  x: number;
-  y: number;
-  /** tamanho da letra, px (padrão 96) */
-  tamanho?: number;
-  fim?: number;
-};
-
-export const RotuloAntesDepois: React.FC<RotuloAntesDepoisProps> = ({lado, texto, inicio = 0, x, y, tamanho = 96, fim = 1e9}) => {
-  const f = useCurrentFrame();
-  if (f < inicio - 1 || f > fim + 12) return null;
-  const t = ov(seg(f, inicio, inicio + 14)), sai = seg(f, fim, fim + 10);
-  const antes = lado === 'antes';
-  const rot = (antes ? -7 : 6) + (1 - t) * (antes ? -30 : 30) + Math.sin(f / 9) * 1.2;
-  return <div style={{position: 'absolute', left: x, top: y, transform: `translate(-50%, -50%) scale(${Math.max(0, t) * (1 - sai)}) rotate(${rot}deg)`, background: antes ? COR.concretoEscuro : COR.limao, color: antes ? COR.papel : COR.tinta, border: `8px solid ${COR.tinta}`, borderRadius: 26, padding: `${tamanho * 0.12}px ${tamanho * 0.3}px ${tamanho * 0.06}px`, boxShadow: SOMBRA_DURA(10), fontFamily: FONTE, fontSize: tamanho, lineHeight: 1.1, textTransform: 'uppercase', whiteSpace: 'nowrap'}}>{texto ?? (antes ? 'Antes' : 'Depois')}</div>;
-};

package/kits/antes-depois/elementos/Som.tsx

@@ -1,40 +0,0 @@
-// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`, pacote paper); trilha de 8.6 s
-// (MotionCraft `music make`, preset tech-bright, 118 bpm, tom D). Ver assets/ASSETS.md.
-// Regra: um som por movimento que importa, 1 a 2 quadros ANTES do visual.
-import React from 'react';
-import {Audio, Sequence, interpolate, useVideoConfig} from 'remotion';
-import whooshEntra from '../assets/sons/whoosh-entra.mp3';
-import whooshSai from '../assets/sons/whoosh-sai.mp3';
-import swoosh from '../assets/sons/swoosh.mp3';
-import popPalavra from '../assets/sons/pop-palavra.mp3';
-import popCartao from '../assets/sons/pop-cartao.mp3';
-import clique from '../assets/sons/clique.mp3';
-import impacto from '../assets/sons/impacto.mp3';
-import subida from '../assets/sons/subida.mp3';
-import assinatura from '../assets/sons/assinatura.mp3';
-import tick from '../assets/sons/tick.mp3';
-import trilha from '../assets/trilha/corte-118bpm.mp3';
-
-export const SONS = {
-  'whoosh-entra': whooshEntra, 'whoosh-sai': whooshSai, swoosh, 'pop-palavra': popPalavra, 'pop-cartao': popCartao, clique, impacto, subida, assinatura, tick,
-} 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.85, 'whoosh-sai': 0.7, swoosh: 0.9, 'pop-palavra': 0.9, 'pop-cartao': 0.9, clique: 0.8, impacto: 0.95, subida: 0.7, assinatura: 0.8, tick: 0.55,
-};
-
-export type EfeitoProps = {som: NomeSom; em: number; volume?: number};
-/** um efeito no quadro `em` (relativo à Cena se estiver dentro de uma, absoluto no resto) */
-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/kits/antes-depois/elementos/TelaDividida.tsx

@@ -1,68 +0,0 @@
-// TelaDividida: a janela da comparação. A mesma cena duas vezes: "antes" fosca e cinza à esquerda,
-// "depois" viva à direita, separadas por um DIVISOR que parece arrastável (linha branca de 10 px com
-// contorno preto + puxador redondo com setas). Os rótulos ANTES e DEPOIS moram DENTRO de cada metade,
-// nos cantos de cima, e são recortados junto com ela: nunca se encostam, e o wipe revela/esconde cada um.
-// v2: chaves de `pos` com curva em S (arrastar), puxador que "agarra" (cresce 8%) enquanto anda.
-import React from 'react';
-import {Img, useCurrentFrame} from 'remotion';
-import {COR, FONTE, SOMBRA_DURA, c01, lerp, ov, seg} from './base';
-
-export type TelaDivididaProps = {
-  antes: string;
-  depois: string;
-  /** chaves do divisor: [[quadro, posição 0..1], ...]; 1 = tudo "antes", 0 = tudo "depois" */
-  pos?: number[][];
-  /** centro vertical, px */
-  y: number;
-  /** altura da janela, px (herói: 900–1100) */
-  altura?: number;
-  inicio?: number;
-  fim?: number;
-  rotuloAntes?: string;
-  rotuloDepois?: string;
-  filtroAntes?: string;
-  filtroDepois?: string;
-  foco?: string;
-};
-
-// curva em S (arrastar com a mão: arranca e freia)
-const s3 = (t: number) => {const x = c01(t); return x * x * x * (x * (x * 6 - 15) + 10);};
-const chavesS = (f: number, ks: number[][]) => {
-  if (f <= ks[0][0]) return ks[0][1];
-  for (let i = 1; i < ks.length; i++) if (f <= ks[i][0]) return lerp(ks[i - 1][1], ks[i][1], s3(seg(f, ks[i - 1][0], ks[i][0])));
-  return ks[ks.length - 1][1];
-};
-
-export const TelaDividida: React.FC<TelaDivididaProps> = ({antes, depois, pos = [[0, 1], [14, 1], [40, 0.12], [54, 0.5]], y, altura = 1000, inicio = 0, fim = 1e9,
-  rotuloAntes = 'Antes', rotuloDepois = 'Depois',
-  filtroAntes = 'grayscale(1) contrast(0.72) brightness(0.72) blur(3px)', filtroDepois = 'saturate(1.5) contrast(1.12) brightness(1.08)', foco = '50% 50%'}) => {
-  const f = useCurrentFrame();
-  if (f < inicio - 1 || f > fim + 14) return null;
-  const t = ov(seg(f, inicio, inicio + 16)), sai = seg(f, fim, fim + 12);
-  const L = 880, rel = f - inicio, p = chavesS(rel, pos), pAntes = chavesS(rel - 1, pos);
-  const andando = Math.min(1, Math.abs(p - pAntes) * 40);
-  const zoom = lerp(1.12, 1.03, seg(f, inicio, inicio + 90));
-  const foto = (src: string, filtro: string) => <Img src={src} style={{position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: foco, transform: `scale(${zoom})`, filter: filtro}} />;
-  // o rótulo só aparece quando a metade dele já mostra o rótulo inteiro (nunca uma fatia de letra)
-  const largRotulo = (texto: string) => texto.length * 52 * 0.86 + 56;
-  const rotulo = (texto: string, lado: 'antes' | 'depois') => <div style={{position: 'absolute', top: 34, [lado === 'antes' ? 'left' : 'right']: 34,
-    opacity: lado === 'antes' ? c01((xDiv - 34 - largRotulo(texto)) / 50) : c01((L - xDiv - 34 - largRotulo(texto)) / 50),
-    background: lado === 'antes' ? COR.concretoEscuro : COR.limao, color: lado === 'antes' ? COR.papel : COR.tinta, border: `6px solid ${COR.tinta}`, borderRadius: 20,
-    padding: '8px 22px 4px', fontFamily: FONTE, fontSize: 52, lineHeight: 1.1, textTransform: 'uppercase', whiteSpace: 'nowrap', boxShadow: SOMBRA_DURA(7)}}>{texto}</div>;
-  const xDiv = p * L;
-  return <div style={{position: 'absolute', left: 100, top: y - altura / 2, width: L, height: altura, transform: `translateY(${(1 - t) * 900 - sai * 900}px) rotate(${(1 - t) * 5}deg) scale(${0.92 + 0.08 * t})`}}>
-    <div style={{position: 'absolute', inset: 0, borderRadius: 40, overflow: 'hidden', border: `9px solid ${COR.tinta}`, boxShadow: SOMBRA_DURA(16), boxSizing: 'border-box', background: COR.papel}}>
-      {/* depois: a foto inteira por baixo, com o rótulo no canto direito */}
-      <div style={{position: 'absolute', inset: 0, clipPath: `inset(0 0 0 ${xDiv - 9}px)`}}>{foto(depois, filtroDepois)}{rotulo(rotuloDepois, 'depois')}</div>
-      {/* antes: recortada até o divisor, com o rótulo no canto esquerdo */}
-      <div style={{position: 'absolute', inset: 0, clipPath: `inset(0 ${L - xDiv - 9}px 0 0)`}}>{foto(antes, filtroAntes)}{rotulo(rotuloAntes, 'antes')}</div>
-      {/* o divisor: linha branca com contorno */}
-      <div style={{position: 'absolute', left: xDiv - 9 - 7, top: 0, width: 14, height: '100%', background: COR.papel, borderLeft: `4px solid ${COR.tinta}`, borderRight: `4px solid ${COR.tinta}`, boxSizing: 'content-box'}} />
-    </div>
-    {/* o puxador */}
-    <div style={{position: 'absolute', left: xDiv - 9 - 66, top: altura / 2 - 66, width: 132, height: 132, borderRadius: 66, background: COR.papel, border: `8px solid ${COR.tinta}`, boxSizing: 'border-box',
-      display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: SOMBRA_DURA(8), transform: `scale(${(1 + 0.08 * andando) * Math.min(1, ov(seg(f, inicio + 6, inicio + 16)))})`}}>
-      <svg width={76} height={44} viewBox="0 0 84 50"><path d="M30 6 L8 25 L30 44 M54 6 L76 25 L54 44" stroke={COR.tinta} strokeWidth={9} fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
-    </div>
-  </div>;
-};

package/kits/antes-depois/elementos/base.ts

@@ -1,82 +0,0 @@
-// Base do kit antes-depois: 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 fonte0Url from '../assets/fontes/archivoblack.woff2';
-import fonte1Url from '../assets/fontes/manrope.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 = {
-  concreto: '#8F8C86',
-  concretoEscuro: '#6F6C66',
-  cinza: '#B9B6AF',
-  limao: '#C8FF2E',
-  tinta: '#0F0F0D',
-  papel: '#F4F2EC'
-};
-
-
-// ---------- fonte ----------
-// Nome de família com o prefixo do kit, pra não colidir com outro kit no mesmo estúdio.
-export const FONTE = "\"AD Archivo Black\", Impact, sans-serif";
-export const TEXTO = "\"AD Manrope\", system-ui, sans-serif";
-const fontes = [
-  {nome: 'AD Archivo Black', url: fonte0Url, peso: '400', estilo: 'normal'},
-  {nome: 'AD Manrope', url: fonte1Url, peso: '500 800', estilo: 'normal'},
-];
-if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__antesdepois) {
-  (globalThis as Record<string, unknown>).__antesdepois = true;
-  for (const f of fontes) {
-    const h = delayRender('antes-depois: ' + f.nome);
-    new FontFace(f.nome, `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, parecida com cubic-bezier(.2,.8,.2,1) */
-export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
-/** pouso com overshoot (passa 1.1x e volta), toda entrada usa esta */
-export const ov = (t: number) => { const x = c01(t) - 1; const k = 2.2; return 1 + (k + 1) * x * x * x + k * x * x; };
-export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
-/** uma batida da trilha do kit (118 bpm) em quadros */
-export const BATIDA = 15.3;
-
-// ---------- medida de texto ----------
-// Mede com canvas (só guarda no cache depois que a fonte carregou) pra encolher a linha que passaria
-// da largura útil. Nunca deixa palavra cortada.
-let canvas: HTMLCanvasElement | null = null;
-const cache = new Map<string, number>();
-export const larguraTexto = (texto: string, tamanho: number, peso = 400, trackingEm = -0.01, familia = 'AD Archivo Black'): 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` */
-export const caber = (texto: string, tamanho: number, largura = LARGURA_UTIL, peso = 400, trackingEm = -0.01, familia = 'AD Archivo Black') => {
-  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 partes {t, d}: d = destaque */
-export const partes = (t: string) => t.split(/(\*[^*]+\*)/).filter(Boolean).map((s) => s.startsWith('*') ? {t: s.slice(1, -1), d: true} : {t: s, d: false});
-export const SOMBRA_DURA = (px = 14) => `${px}px ${px}px 0 ${COR.tinta}`;
-/** valor de uma lista de chaves [[quadro, valor], ...] no quadro f, com pouso suave entre as chaves */
-export const chaves = (f: number, ks: number[][]) => { if (f <= ks[0][0]) return ks[0][1]; for (let i = 1; i < ks.length; i++) if (f <= ks[i][0]) return lerp(ks[i - 1][1], ks[i][1], e5(seg(f, ks[i - 1][0], ks[i][0]))); return ks[ks.length - 1][1]; };

package/kits/antes-depois/elementos/index.ts

@@ -1,15 +0,0 @@
-// Tudo que o kit antes-depois oferece. A IA monta o vídeo combinando isto (ou escrevendo um plano pra Montagem).
-export * from './base';
-export {Fundo} from './Fundo';
-export {Camera, posCamera} from './Camera';
-export {Cena, useDuracaoCena, SOBREPOE} from './Cena';
-export {TelaDividida} from './TelaDividida';
-export {RotuloAntesDepois} from './RotuloAntesDepois';
-export {BarraMedidor} from './BarraMedidor';
-export {NumeroDelta} from './NumeroDelta';
-export {ListaMudancas} from './ListaMudancas';
-export {FaixaMarquee} from './FaixaMarquee';
-export {Efeito, Trilha, SONS} from './Som';
-export type {NomeSom} from './Som';
-export {Montagem, ELEMENTOS} from './Montagem';
-export type {Plano, CenaPlano, Camada} from './Montagem';