primocode 10.17.1 → 10.19.0

package/kits/colagem/elementos/Cena.tsx

@@ -0,0 +1,36 @@
+// Cena: janela de tempo de um plano. Entra com movimento (nunca corte seco), sai com movimento e sobrepõe 10 quadros com a próxima.
+// Dentro dela, useCurrentFrame() começa em 0 e useDuracaoCena() devolve a duração.
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {mola, e5, seg, q} from './base';
+
+export type Entrada = 'subir' | 'zoom' | 'direita' | 'esquerda' | 'nenhuma';
+export const SOBREPOE = 10;
+
+const CenaCtx = createContext({duracao: 60});
+export const useDuracaoCena = () => useContext(CenaCtx).duracao;
+
+export type CenaProps = {de: number; ate: number; entrada?: Entrada; ultima?: boolean; children: React.ReactNode};
+
+const Janela: React.FC<{duracao: number; entrada: Entrada; ultima: boolean; children: React.ReactNode}> = ({duracao, entrada, ultima, children}) => {
+  const f = q(useCurrentFrame());
+  const en = entrada === 'nenhuma' ? 0 : 1 - mola(seg(f, 0, 12));
+  const xo = ultima ? 0 : e5(seg(f, duracao, duracao + SOBREPOE));
+  let tf = '';
+  if (entrada === 'subir') tf += `translateY(${en * 240}px) `;
+  if (entrada === 'zoom') tf += `scale(${1 + en * 0.9}) `;
+  if (entrada === 'direita') tf += `translateX(${en * 720}px) `;
+  if (entrada === 'esquerda') tf += `translateX(${-en * 720}px) `;
+  tf += `translateY(${-xo * 280}px) rotate(${xo * 3}deg)`;
+  const blur = (en * 0 + xo * 0);
+  return <AbsoluteFill style={{transform: tf, opacity: Math.max(0, (1 - Math.max(0, en) * 0.9) * (1 - xo)), filter: blur > 0.3 ? `blur(${blur}px)` : undefined}}>{children}</AbsoluteFill>;
+};
+
+export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'subir', ultima = false, children}) => {
+  const duracao = ate - de;
+  return <Sequence from={de} durationInFrames={duracao + (ultima ? 0 : SOBREPOE)} layout="none">
+    <CenaCtx.Provider value={{duracao}}>
+      <Janela duracao={duracao} entrada={entrada} ultima={ultima}>{children}</Janela>
+    </CenaCtx.Provider>
+  </Sequence>;
+};

package/kits/colagem/elementos/FitaAdesiva.tsx

@@ -0,0 +1,11 @@
+// FitaAdesiva: pedaço de fita adesiva amarelada e translúcida com pontas serrilhadas, colada em ângulo. Apoio que prende fotos e notas; também serve sozinha.
+import React from 'react';
+import {COR, mola, seg, useF} from './base';
+
+export type FitaAdesivaProps = {x?: number; y?: number; largura?: number; altura?: number; rot?: number; inicio?: number; cor?: string};
+export const FitaAdesiva: React.FC<FitaAdesivaProps> = ({x = 540, y = 400, largura = 280, altura = 80, rot = -8, inicio = 0, cor = COR.fita}) => {
+  const f = useF() - inicio;
+  const p = mola(seg(f, 0, 8), 2);
+  const z = Array.from({length: 7}).map((_, i) => (i % 2 ? '100%' : '97%')).join(',');
+  return <div style={{position: 'absolute', left: x - largura / 2, top: y - altura / 2, width: largura, height: altura, background: cor, opacity: 0.82 * Math.min(1, p * 2), clipPath: `polygon(0 0, 100% 0, 97% 15%, 100% 30%, 97% 45%, 100% 60%, 97% 75%, 100% 90%, 100% 100%, 0 100%, 3% 85%, 0 70%, 3% 55%, 0 40%, 3% 25%, 0 10%)`, boxShadow: '0 3px 3px rgba(0,0,0,0.2)', transform: `rotate(${rot + (1 - p) * 20}deg) scale(${0.6 + p * 0.4})`}} />;
+};

package/kits/colagem/elementos/FotoRasgada.tsx

@@ -0,0 +1,26 @@
+// FotoRasgada: o herói. Foto recortada com borda rasgada sobre uma folha branca também rasgada, presa com duas fitas. Voa girando e pousa em passos de 2 quadros,
+// com um leve balanço de "ainda não colou" e depois quieta. `legenda` entra datilografada num pedaço de papel embaixo.
+import React from 'react';
+import {COR, FONTE_TEXTO, caber, mola, ruido, seg, useF} from './base';
+import {FitaAdesiva} from './FitaAdesiva';
+import {rasgado} from './rasgado';
+
+export type FotoRasgadaProps = {src: string; legenda?: string; x?: number; y?: number; largura?: number; altura?: number; rot?: number; inicio?: number; foco?: string; de?: 'esquerda' | 'direita' | 'cima'};
+export const FotoRasgada: React.FC<FotoRasgadaProps> = ({src, legenda, x = 540, y = 700, largura = 700, altura = 880, rot = -4, inicio = 0, foco = '50% 50%', de = 'direita'}) => {
+  const f = useF() - inicio;
+  const p = mola(seg(f, 0, 14), 1.8);
+  const q = 1 - p;
+  const dx = de === 'esquerda' ? -1100 : de === 'direita' ? 1100 : 0, dy = de === 'cima' ? -1400 : 0;
+  const bal = Math.sin(f / 3) * 3 * Math.exp(-f / 16);
+  const W = largura + 70, H = altura + 70;
+  const pl = mola(seg(f, 16, 26), 1.6);
+  return <>
+    <div style={{position: 'absolute', left: x - W / 2, top: y - H / 2, width: W, height: H, transform: `translate(${q * dx}px, ${q * dy}px) rotate(${rot + q * 30 + bal}deg) scale(${0.7 + p * 0.3})`, filter: 'drop-shadow(0 14px 10px rgba(0,0,0,0.38))'}}>
+      <div style={{position: 'absolute', inset: 0, background: COR.branco, clipPath: rasgado(W, H, 3, 10, 30)}} />
+      <div style={{position: 'absolute', left: 35, top: 35, width: largura, height: altura, backgroundImage: `url(${src})`, backgroundSize: 'cover', backgroundPosition: foco, clipPath: rasgado(largura, altura, 8, 12, 34)}} />
+    </div>
+    <FitaAdesiva x={x - W / 2 + 70} y={y - H / 2 + 20} rot={-38} inicio={inicio + 12} largura={230} />
+    <FitaAdesiva x={x + W / 2 - 70} y={y - H / 2 + 20} rot={34} inicio={inicio + 15} largura={230} />
+    {legenda && <div style={{position: 'absolute', left: x - 330, top: y + H / 2 - 40, width: 660, background: COR.jornal, padding: '14px 26px', fontFamily: FONTE_TEXTO, fontSize: caber(legenda, 56, 600, FONTE_TEXTO, 400, 0), color: COR.tinta, clipPath: rasgado(660, 100, 5, 5, 24), filter: 'drop-shadow(0 6px 4px rgba(0,0,0,0.3))', transform: `rotate(${2 + (1 - pl) * 10}deg) scale(${Math.max(0.01, pl)})`, textAlign: 'center', whiteSpace: 'nowrap'}}>{legenda}</div>}
+  </>;
+};

package/kits/colagem/elementos/Fundo.tsx

@@ -0,0 +1,16 @@
+// Fundo: papel kraft com pontos de retícula de jornal bem fracos, dobras em cruz e um canto de papel rasgado preto embaixo. Quieto; o respiro do estilo.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {COR, useF} from './base';
+import {rasgado} from './rasgado';
+
+export const Fundo: React.FC = () => {
+  const f = useF();
+  return <AbsoluteFill style={{background: COR.kraft}}>
+    <AbsoluteFill style={{backgroundImage: 'radial-gradient(rgba(60,40,20,0.12) 2px, transparent 3px)', backgroundSize: '22px 22px', WebkitMaskImage: 'linear-gradient(180deg, rgba(0,0,0,0.9), transparent 55%)', maskImage: 'linear-gradient(180deg, rgba(0,0,0,0.9), transparent 55%)'}} />
+    <div style={{position: 'absolute', left: 539, top: 0, width: 2, height: 1920, background: 'rgba(255,255,255,0.25)'}} />
+    <div style={{position: 'absolute', left: 0, top: 959, width: 1080, height: 2, background: 'rgba(0,0,0,0.08)'}} />
+    <div style={{position: 'absolute', left: -60 + Math.sin(f / 50) * 10, top: 1620, width: 760, height: 360, background: COR.tinta, clipPath: rasgado(760, 360, 21, 14, 34), filter: 'drop-shadow(0 -4px 6px rgba(0,0,0,0.3))'}} />
+    <div style={{position: 'absolute', right: -80, top: 80 + Math.cos(f / 60) * 8, width: 420, height: 260, background: COR.jornal, clipPath: rasgado(420, 260, 13, 12, 30), opacity: 0.8}} />
+  </AbsoluteFill>;
+};

package/kits/colagem/elementos/ListaRecortes.tsx

@@ -0,0 +1,23 @@
+// ListaRecortes: cada item numa tira de papel rasgado diferente (jornal, branco, amarelo), girada, com texto datilografado e um grampo/fita na ponta.
+// As tiras batem em fila, de lados alternados.
+import React from 'react';
+import {COR, FONTE_TEXTO, FONTE_TITULO, caber, mola, seg, useF} from './base';
+import {rasgado} from './rasgado';
+
+export type ListaRecortesProps = {itens: string[]; inicio?: number; intervalo?: number; y?: number; altura?: number};
+const PAP = [COR.jornal, COR.branco, COR.amarelo];
+export const ListaRecortes: React.FC<ListaRecortesProps> = ({itens, inicio = 0, intervalo = 7, y = 740, altura = 230}) => {
+  const f = useF() - inicio;
+  const W = 800;
+  const tam = Math.min(...itens.map((t) => caber(t.toUpperCase(), 120, W - 260, FONTE_TITULO, 400, 0)));
+  const topo = y - (itens.length * altura) / 2;
+  return <>{itens.map((t, i) => {
+    const t0 = i * intervalo;
+    const p = mola(seg(f, t0, t0 + 10), 2);
+    return <div key={i} style={{position: 'absolute', left: (1080 - W) / 2 + (i % 2 ? 36 : -36), top: topo + i * altura, width: W, height: altura - 24, transform: `translateX(${(1 - p) * (i % 2 ? 1200 : -1200)}px) rotate(${(i % 2 ? 2.5 : -2.5) + (1 - p) * 14}deg)`, filter: 'drop-shadow(0 8px 6px rgba(0,0,0,0.35))', opacity: f >= t0 ? 1 : 0}}>
+      <div style={{position: 'absolute', inset: 0, background: PAP[i % PAP.length], clipPath: rasgado(W, altura - 24, i + 2, 8, 28)}} />
+      <div style={{position: 'absolute', left: 50, top: 0, height: '100%', display: 'flex', alignItems: 'center', fontFamily: FONTE_TEXTO, fontSize: 90, color: COR.vermelho}}>{i + 1}.</div>
+      <div style={{position: 'absolute', left: 190, right: 40, top: 0, height: '100%', display: 'flex', alignItems: 'center', fontFamily: FONTE_TITULO, fontSize: tam, color: COR.tinta, whiteSpace: 'nowrap'}}>{t.toUpperCase()}</div>
+    </div>;
+  })}</>;
+};

package/kits/colagem/elementos/Montagem.tsx

@@ -0,0 +1,56 @@
+// Montagem: transforma um plano de cenas (JSON escrito pela IA) em vídeo, só com os elementos do kit.
+// Não decide estética: põe Fundo + Camera + Cenas + Overlay + sons onde o plano mandou. Formato: exemplos/plano.json.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {Fundo} from './Fundo';
+import {Overlay} from './Overlay';
+import {Camera} from './Camera';
+import {Cena, Entrada} from './Cena';
+import {Efeito, NomeSom, Trilha} from './Som';
+import {COR} from './base';
+import {AssinaturaMarca} from './AssinaturaMarca';
+import {FitaAdesiva} from './FitaAdesiva';
+import {FotoRasgada} from './FotoRasgada';
+import {ListaRecortes} from './ListaRecortes';
+import {NotaDatilografada} from './NotaDatilografada';
+import {RecorteForma} from './RecorteForma';
+import {TituloRecorte} from './TituloRecorte';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {AssinaturaMarca, FitaAdesiva, FotoRasgada, ListaRecortes, NotaDatilografada, RecorteForma, TituloRecorte};
+
+export type Camada = {elemento: string; props: Record<string, unknown>};
+export type CenaPlano = {
+  batida: string; de: number; ate: number; entrada?: Entrada;
+  camadas: Camada[];
+  sons?: {som: NomeSom; em: number; volume?: number}[];
+  socos?: number[];
+};
+export type Plano = {kit: string; duracao: number; trilha?: {volume?: number} | false; cenas: CenaPlano[]};
+
+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: "#E6D8BC"}}>
+    <Fundo />
+    <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(`colagem: elemento "${k.elemento}" não existe no kit`);
+          return <El key={j} {...(resolver(k.props, arquivos) as object)} />;
+        })}
+      </Cena>)}
+    </Camera>
+    <Overlay />
+    {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/colagem/elementos/NotaDatilografada.tsx

@@ -0,0 +1,35 @@
+// NotaDatilografada: pedaço de papel rasgado com texto que bate na máquina de escrever (Special Elite), uma palavra circulada a caneta vermelha
+// que se desenha, e fita no topo. `circular` é a palavra a destacar.
+import React from 'react';
+import {COR, FONTE_TEXTO, LARGURA_UTIL, caber, mola, seg, useF} from './base';
+import {FitaAdesiva} from './FitaAdesiva';
+import {rasgado} from './rasgado';
+
+export type NotaDatilografadaProps = {texto: string; circular?: string; inicio?: number; y?: number; tamanho?: number; ritmo?: number};
+export const NotaDatilografada: React.FC<NotaDatilografadaProps> = ({texto, circular, inicio = 0, y = 740, tamanho = 100, ritmo = 1.4}) => {
+  const f = useF() - inicio;
+  const p = mola(seg(f, 0, 10), 1.8);
+  const W = 840, H = 760;
+  const n = Math.max(0, Math.floor((f - 8) / ritmo));
+  const linhas = texto.split('\n');
+  const maiorLinha = linhas.reduce((a, b) => (a.length > b.length ? a : b), '');
+  const tam = caber(maiorLinha, tamanho, W - 120, FONTE_TEXTO, 400, 0);
+  let gasto = 0;
+  const circ = seg(f, 8 + texto.length * ritmo + 4, 8 + texto.length * ritmo + 16);
+  return <>
+    <div style={{position: 'absolute', left: (1080 - W) / 2, top: y - H / 2, width: W, height: H, transform: `translateY(${(1 - p) * 900}px) rotate(${-2 + (1 - p) * 10}deg)`, filter: 'drop-shadow(0 12px 9px rgba(0,0,0,0.35))'}}>
+      <div style={{position: 'absolute', inset: 0, background: COR.branco, clipPath: rasgado(W, H, 11, 11, 30)}} />
+      <div style={{position: 'absolute', left: 60, right: 60, top: 0, bottom: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', fontFamily: FONTE_TEXTO, fontSize: tam, lineHeight: 1.25, color: COR.tinta}}>
+        {linhas.map((l, i) => {
+          const ini = gasto; gasto += l.length;
+          const vis = l.slice(0, Math.max(0, n - ini));
+          const idx = circular ? l.indexOf(circular) : -1;
+          return <div key={i} style={{position: 'relative', whiteSpace: 'pre', height: tam * 1.25}}>{vis}
+            {idx >= 0 && circular && <svg width={circular.length * tam * 0.62 + 50} height={tam * 1.7} style={{position: 'absolute', left: idx * tam * 0.6 - 24, top: -tam * 0.22, overflow: 'visible'}}><ellipse cx={(circular.length * tam * 0.6 + 40) / 2} cy={tam * 0.8} rx={(circular.length * tam * 0.6 + 40) / 2} ry={tam * 0.62} fill="none" stroke={COR.vermelho} strokeWidth="9" strokeLinecap="round" strokeDasharray="1400" strokeDashoffset={1400 * (1 - circ)} transform={`rotate(-3 ${(circular.length * tam * 0.6) / 2} ${tam * 0.8})`} /></svg>}
+          </div>;
+        })}
+      </div>
+    </div>
+    <FitaAdesiva x={540} y={y - H / 2 + 16} largura={300} rot={-3} inicio={inicio + 8} />
+  </>;
+};

package/kits/colagem/elementos/Overlay.tsx

@@ -0,0 +1,8 @@
+// Overlay: luz de mesa (vinheta quente) e uma pequena sujeira de papel (riscos finos claros e escuros fixos) sobre todo plano. Leve e estático.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+
+export const Overlay: React.FC = () => <AbsoluteFill style={{pointerEvents: 'none'}}>
+  <div style={{position: 'absolute', inset: 0, background: 'radial-gradient(120% 90% at 40% 35%, rgba(255,245,220,0.12), transparent 55%, rgba(60,30,10,0.25) 100%)'}} />
+  <div style={{position: 'absolute', inset: 0, backgroundImage: 'repeating-linear-gradient(23deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 37px), repeating-linear-gradient(-67deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 53px)'}} />
+</AbsoluteFill>;

package/kits/colagem/elementos/RecorteForma.tsx

@@ -0,0 +1,23 @@
+// RecorteForma: adesivo-explosão de papel (círculo de pontas) vermelho com texto grande em Abril Fatface, e uma tira rasgada preta com subtexto.
+// Estoura com overshoot, gira em passos e balança. Serve de selo de data ou oferta.
+import React from 'react';
+import {COR, FONTE_TEXTO, FONTE_TITULO, caber, mola, seg, useF} from './base';
+import {rasgado} from './rasgado';
+
+export type RecorteFormaProps = {texto: string; sub?: string; cor?: string; inicio?: number; y?: number; diametro?: number; tamanho?: number};
+export const RecorteForma: React.FC<RecorteFormaProps> = ({texto, sub, cor = COR.vermelho, inicio = 0, y = 700, diametro = 800, tamanho = 280}) => {
+  const f = useF() - inicio;
+  const p = mola(seg(f, 0, 12), 2.4);
+  const pts = Array.from({length: 48}).map((_, i) => { const a = (i / 48) * Math.PI * 2, r = i % 2 ? 0.86 : 1; return `${50 + Math.cos(a) * 50 * r}% ${50 + Math.sin(a) * 50 * r}%`; }).join(',');
+  const linhas = texto.split('\n');
+  const tam = Math.min(...linhas.map((l) => caber(l, tamanho, diametro * 0.62, FONTE_TITULO, 400, 0)));
+  const ps = mola(seg(f, 10, 20), 2);
+  return <>
+    <div style={{position: 'absolute', left: 540 - diametro / 2, top: y - diametro / 2, width: diametro, height: diametro, transform: `rotate(${(1 - p) * -120 + Math.sin(f / 5) * 2}deg) scale(${Math.max(0.01, p)})`, filter: 'drop-shadow(0 14px 10px rgba(0,0,0,0.4))'}}>
+      <div style={{position: 'absolute', inset: 0, background: cor, clipPath: `polygon(${pts})`}} />
+      <div style={{position: 'absolute', inset: '9%', border: `6px dashed ${COR.branco}`, borderRadius: '50%', opacity: 0.8}} />
+      <div style={{position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontFamily: FONTE_TITULO, color: COR.branco, lineHeight: 0.95, fontSize: tam, textShadow: `6px 6px 0 ${COR.tinta}`}}>{linhas.map((l, i) => <div key={i}>{l}</div>)}</div>
+    </div>
+    {sub && <div style={{position: 'absolute', left: 540 - 330, top: y + diametro / 2 - 80, width: 660, height: 120, background: COR.tinta, clipPath: rasgado(660, 120, 4, 6, 26), display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FONTE_TEXTO, fontSize: caber(sub, 60, 580, FONTE_TEXTO, 400, 0), color: COR.amarelo, transform: `rotate(-3deg) scale(${Math.max(0.01, ps)})`, whiteSpace: 'nowrap'}}>{sub}</div>}
+  </>;
+};

package/kits/colagem/elementos/Som.tsx

@@ -0,0 +1,30 @@
+// Som: efeitos e trilha do kit (sintetizados no MotionCraft, pacote paper). Um som por movimento, 1–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/trilha.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;
+const VOLUME: Record<NomeSom, number> = {'whoosh-entra': 0.9, 'whoosh-sai': 0.8, swoosh: 1, 'pop-palavra': 1, 'pop-cartao': 0.9, clique: 0.8, impacto: 0.9, subida: 0.7, assinatura: 0.9, tick: 0.6};
+
+export type EfeitoProps = {som: NomeSom; em: number; volume?: number};
+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; saida?: number};
+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/colagem/elementos/TituloRecorte.tsx

@@ -0,0 +1,34 @@
+// TituloRecorte: título de bilhete de sequestrador. Cada letra é um recorte de papel diferente (branco, preto, vermelho, amarelo, jornal),
+// com fonte alternada (Abril Fatface / Special Elite), giro próprio e sombra. Batem uma a uma, em passos de 2 quadros.
+import React from 'react';
+import {COR, FONTE_TEXTO, FONTE_TITULO, LARGURA_UTIL, mola, ruido, seg, useF} from './base';
+import {rasgado} from './rasgado';
+
+export type TituloRecorteProps = {linhas: string[]; inicio?: number; y?: number; tamanho?: number; fim?: number};
+const PAPEIS: [string, string][] = [[COR.branco, COR.tinta], [COR.tinta, COR.branco], [COR.vermelho, COR.branco], [COR.amarelo, COR.tinta], [COR.jornal, COR.tinta], [COR.azul, COR.branco]];
+export const TituloRecorte: React.FC<TituloRecorteProps> = ({linhas, inicio = 0, y = 720, tamanho = 190, fim}) => {
+  const f = useF();
+  const maxLen = Math.max(...linhas.map((l) => l.length));
+  const t = Math.min(tamanho, Math.floor((LARGURA_UTIL - 20) / (maxLen * 0.82)));
+  const alt = t * 1.3;
+  const topo0 = y - (linhas.length * alt) / 2;
+  let k = 0;
+  return <>{linhas.map((l, i) => {
+    const letras = [...l];
+    const larg = letras.length * t * 0.82;
+    return <div key={i} style={{position: 'absolute', left: (1080 - larg) / 2, top: topo0 + i * alt, width: larg, height: alt}}>
+      {letras.map((ch, j) => {
+        const idx = k++;
+        if (ch === ' ') return null;
+        const [bg, fg] = PAPEIS[Math.floor(ruido(idx * 3.1) * PAPEIS.length)];
+        const t0 = inicio + idx * 2.5;
+        const p = mola(seg(f, t0, t0 + 8), 2.4);
+        const sai = fim === undefined ? 0 : seg(f, fim + idx, fim + idx + 6);
+        const rot = (ruido(idx + 5) - 0.5) * 16 + (ruido(Math.floor(f / 4) + idx) - 0.5) * 1.6;
+        const w = t * (0.7 + ruido(idx + 9) * 0.14), h = t * (0.98 + ruido(idx + 11) * 0.2);
+        const serif = ruido(idx + 20) > 0.45;
+        return <div key={j} style={{position: 'absolute', left: j * t * 0.82 + (ruido(idx + 2) - 0.5) * 8, top: (alt - h) / 2 + (ruido(idx + 7) - 0.5) * 18, width: w, height: h, background: bg, clipPath: rasgado(w, h, idx, 4, 22), color: fg, fontFamily: serif ? FONTE_TITULO : FONTE_TEXTO, fontWeight: 400, fontSize: t * (serif ? 0.95 : 0.88), display: 'flex', alignItems: 'center', justifyContent: 'center', filter: 'drop-shadow(0 4px 3px rgba(0,0,0,0.35))', opacity: f >= t0 ? 1 - sai : 0, transform: `translateY(${(1 - p) * -500 + sai * 600}px) rotate(${rot + (1 - p) * 50}deg) scale(${0.5 + p * 0.5})`}}>{ch.toUpperCase()}</div>;
+      })}
+    </div>;
+  })}</>;
+};

package/kits/colagem/elementos/base.ts

@@ -0,0 +1,77 @@
+// Base do kit colagem: cores, fontes, curvas, passo e medidas. Todo número visual sai daqui.
+// Os elementos importam só este arquivo, 'react' e 'remotion'.
+import {continueRender, delayRender, useCurrentFrame} from 'remotion';
+import fonte0 from '../assets/fontes/abril-fatface.woff2';
+import fonte1 from '../assets/fontes/special-elite.woff2';
+
+// ---------- tela ----------
+export const LARGURA = 1080, ALTURA = 1920, FPS = 30;
+export const SEGURA = {topo: 168, base: 1330, lado: 80};
+export const LARGURA_UTIL = LARGURA - SEGURA.lado * 2; // 920 px
+
+// ---------- cor ----------
+export const COR = {
+  "kraft": "#E6D8BC",
+  "jornal": "#D9CCAE",
+  "branco": "#FAF7F0",
+  "tinta": "#1B1B1B",
+  "vermelho": "#E63B2E",
+  "amarelo": "#F6D743",
+  "azul": "#2B59C3",
+  "fita": "rgba(246,215,67,0.85)"
+};
+
+// ---------- fonte ----------
+export const FONTE_TITULO = '"CL Abril Fatface", serif';
+export const FONTE_TEXTO = '"CL Special Elite", monospace';
+const FONTES: [string, string, string][] = [['CL Abril Fatface', fonte0, '400'], ['CL Special Elite', fonte1, '400']];
+if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__k_colagem) {
+  (globalThis as Record<string, unknown>).__k_colagem = true;
+  const h = delayRender('colagem: fontes');
+  Promise.all(FONTES.map(([nome, url, peso]) => new FontFace(nome, `url(${url}) format('woff2')`, {weight: peso, style: 'normal'}).load().then((ff) => {document.fonts.add(ff);}).catch(() => undefined)))
+    .then(() => continueRender(h));
+}
+
+// ---------- tempo e curva ----------
+/** passo da animação: 1 = liso, 2 ou 3 = movimento em passos (stop-motion / 8 bits) */
+export const PASSO = 2;
+export const q = (f: number) => Math.floor(f / PASSO) * PASSO;
+/** quadro atual da cena, já em passos */
+export const useF = () => q(useCurrentFrame());
+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 */
+export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
+/** passa do alvo e volta (overshoot ~2) */
+export const mola = (t: number, s = 2) => { const x = c01(t) - 1; return x * x * ((s + 1) * x + s) + 1; };
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+/** ruído determinístico 0..1 */
+export const ruido = (n: number) => { const x = Math.sin(n * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x); };
+/** uma batida da trilha do kit (108 bpm) em quadros */
+export const BATIDA = 16.67;
+
+// ---------- medida de texto ----------
+let canvas: HTMLCanvasElement | null = null;
+const cache = new Map<string, number>();
+export const larguraTexto = (texto: string, tamanho: number, familia = FONTE_TITULO, peso = 400, trackingEm = 0): number => {
+  const chave = `${texto}|${tamanho}|${familia}|${peso}|${trackingEm}`;
+  const c = cache.get(chave); if (c !== undefined) return c;
+  if (typeof document === 'undefined') return texto.length * tamanho * 0.6;
+  canvas = canvas || document.createElement('canvas');
+  const ctx = canvas.getContext('2d'); if (!ctx) return texto.length * tamanho * 0.6;
+  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, familia = FONTE_TITULO, peso = 400, trackingEm = 0) => {
+  const w = larguraTexto(texto, tamanho, familia, peso, trackingEm);
+  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, '');
+/** divide "Usar *IA* já" em [{t:'Usar ',d:false},{t:'IA',d:true},{t:' já',d:false}] */
+export const comDestaque = (t: string) => t.split('*').map((p, i) => ({t: p, d: i % 2 === 1})).filter((p) => p.t !== '');

package/kits/colagem/elementos/index.ts

@@ -0,0 +1,17 @@
+// Tudo que o kit colagem oferece.
+export * from './base';
+export {Fundo} from './Fundo';
+export {Overlay} from './Overlay';
+export {Camera, posCamera} from './Camera';
+export {Cena, useDuracaoCena, SOBREPOE} from './Cena';
+export {AssinaturaMarca} from './AssinaturaMarca';
+export {FitaAdesiva} from './FitaAdesiva';
+export {FotoRasgada} from './FotoRasgada';
+export {ListaRecortes} from './ListaRecortes';
+export {NotaDatilografada} from './NotaDatilografada';
+export {RecorteForma} from './RecorteForma';
+export {TituloRecorte} from './TituloRecorte';
+export {Efeito, Trilha, SONS} from './Som';
+export type {NomeSom} from './Som';
+export {Montagem, ELEMENTOS} from './Montagem';
+export type {Plano, CenaPlano, Camada} from './Montagem';

package/kits/colagem/elementos/rasgado.ts

@@ -0,0 +1,16 @@
+// rasgado: gera o contorno irregular de um papel rasgado (polygon em px) de forma determinística. Usado por todos os recortes do kit.
+import {ruido} from './base';
+
+export const rasgado = (w: number, h: number, seed = 1, amp = 9, passo = 26): string => {
+  const pts: string[] = [];
+  const lado = (x0: number, y0: number, x1: number, y1: number, n: number) => {
+    const len = Math.hypot(x1 - x0, y1 - y0), k = Math.max(2, Math.round(len / passo));
+    for (let i = 0; i < k; i++) {
+      const t = i / k, nx = -(y1 - y0) / len, ny = (x1 - x0) / len;
+      const o = (ruido(seed * 17 + n * 31 + i) - 0.5) * 2 * amp;
+      pts.push(`${(x0 + (x1 - x0) * t + nx * o).toFixed(1)}px ${(y0 + (y1 - y0) * t + ny * o).toFixed(1)}px`);
+    }
+  };
+  lado(amp, amp, w - amp, amp, 1); lado(w - amp, amp, w - amp, h - amp, 2); lado(w - amp, h - amp, amp, h - amp, 3); lado(amp, h - amp, amp, amp, 4);
+  return `polygon(${pts.join(',')})`;
+};