primocode 10.17.0 → 10.19.0

package/kits/ugc-reels/elementos/Comentario.tsx

@@ -0,0 +1,29 @@
+// Comentario: bolha branca de comentário (avatar, nome, texto e coração com contagem). Cresce de 0,5 a 1 com overshoot 1,9
+// e gira −3°; o coração dá um pulo 10 quadros depois.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FAM_A, FONTE_A, caber, ob, seg} from './base';
+
+export type ComentarioProps = {
+  nome: string;
+  texto: string;
+  /** contagem de curtidas */
+  curtidas?: string;
+  avatar?: string;
+  y?: number;
+  inicio?: number;
+};
+
+export const Comentario: React.FC<ComentarioProps> = ({nome, texto, curtidas = '2,4 mil', avatar, y = 860, inicio = 0}) => {
+  const f = useCurrentFrame() - inicio;
+  if (f < -1) return null;
+  const p = ob(seg(f, 0, 12), 1.9), tt = caber(texto, 52, FAM_A, 560, 700, 0), coracao = 1 + 0.35 * Math.max(0, Math.sin(Math.PI * seg(f, 10, 18)));
+  return <div style={{position: 'absolute', left: 540 - 400, top: y - 120, width: 800, height: 240, borderRadius: 54, background: COR.branco, boxShadow: '0 20px 50px rgba(0,0,0,0.35)', display: 'flex', alignItems: 'center', gap: 28, padding: '0 40px', boxSizing: 'border-box', transform: `scale(${0.5 + 0.5 * p}) rotate(${-3 * p}deg)`, opacity: Math.min(1, p * 2)}}>
+    <div style={{width: 110, height: 110, borderRadius: 55, flex: 'none', background: avatar ? `url(${avatar}) center/cover` : `linear-gradient(135deg, ${COR.amarelo}, ${COR.vermelho})`}} />
+    <div style={{flex: 1, minWidth: 0, fontFamily: FONTE_A, color: COR.preto}}>
+      <div style={{fontWeight: 900, fontSize: 38, opacity: 0.55}}>{nome}</div>
+      <div style={{fontWeight: 700, fontSize: tt, lineHeight: 1.15, whiteSpace: 'nowrap'}}>{texto}</div>
+    </div>
+    <div style={{flex: 'none', textAlign: 'center', fontFamily: FONTE_A, fontWeight: 700, fontSize: 30, color: COR.preto, opacity: 0.8}}><div style={{fontSize: 56, lineHeight: 1, transform: `scale(${coracao})`}}>❤️</div>{curtidas}</div>
+  </div>;
+};

package/kits/ugc-reels/elementos/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/kits/ugc-reels/elementos/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/kits/ugc-reels/elementos/Montagem.tsx

@@ -0,0 +1,69 @@
+// 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, {useEffect, useState} from 'react';
+import {AbsoluteFill, continueRender, delayRender} from 'remotion';
+import {COR, esperarFontes, fontesProntas} from './base';
+import {Fundo} from './Fundo';
+import {Camera} from './Camera';
+import {Cena, Entrada, Saida} from './Cena';
+import {Efeito, NomeSom, Trilha} from './Som';
+import {VideoCelular} from './VideoCelular';
+import {LegendaEmoji} from './LegendaEmoji';
+import {CabecalhoPerfil} from './CabecalhoPerfil';
+import {Comentario} from './Comentario';
+import {NotaDeMao} from './NotaDeMao';
+import {Reacoes} from './Reacoes';
+import {BotaoLink} from './BotaoLink';
+import {AssinaturaMarca} from './AssinaturaMarca';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {
+  VideoCelular, LegendaEmoji, CabecalhoPerfil, Comentario, NotaDeMao, Reacoes, BotaoLink, AssinaturaMarca,
+};
+
+export type Camada = {elemento: string; props: Record<string, unknown>};
+export type CenaPlano = {
+  batida: string; de: number; ate: number; entrada?: Entrada; saida?: Saida;
+  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 = {}}) => {
+  // não desenha nada antes das fontes: as medidas de texto (caber) precisam delas
+  const [ok, setOk] = useState(fontesProntas());
+  useEffect(() => {
+    if (ok) return;
+    const h = delayRender('ugc-reels: aguardando fontes');
+    esperarFontes().then(() => {setOk(true); setTimeout(() => continueRender(h), 40);});
+  }, [ok]);
+  if (!ok) return <AbsoluteFill style={{background: COR.preto}} />;
+  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.preto}}>
+    <Fundo {...(plano.fundo ?? {})} />
+    <Camera batidas={socos} forca={1}>
+      {plano.cenas.map((c, i) => <Cena key={i} de={c.de} ate={c.ate} entrada={c.entrada} saida={c.saida} ultima={i === ultima}>
+        {c.camadas.map((k, j) => {
+          const El = ELEMENTOS[k.elemento];
+          if (!El) throw new Error(`ugc-reels: 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/ugc-reels/elementos/NotaDeMao.tsx

@@ -0,0 +1,29 @@
+// NotaDeMao: texto em Caveat 700 branco com contorno preto, inclinado, e uma seta desenhada à mão que aponta para o alvo.
+// Entra com overshoot 1,9 (escala 0,6 → 1) e a seta se desenha em 10 quadros.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, CONTORNO, FAM_B, FONTE_B, ALTURA, LARGURA, caber, e5, ob, seg} from './base';
+
+export type NotaDeMaoProps = {
+  texto: string;
+  x?: number;
+  y?: number;
+  tamanho?: number;
+  rot?: number;
+  /** ponto que a seta aponta; sem isso, sem seta */
+  alvo?: [number, number];
+  inicio?: number;
+};
+
+export const NotaDeMao: React.FC<NotaDeMaoProps> = ({texto, x = 540, y = 760, tamanho = 120, rot = -6, alvo, inicio = 0}) => {
+  const f = useCurrentFrame() - inicio;
+  if (f < -1) return null;
+  const p = ob(seg(f, 0, 12), 1.9), tam = caber(texto, tamanho, FAM_B, 800, 700, 0), s = e5(seg(f, 8, 18));
+  return <>
+    <div style={{position: 'absolute', left: x - 450, width: 900, top: y - tam * 0.6, textAlign: 'center', fontFamily: FONTE_B, fontWeight: 700, fontSize: tam, lineHeight: 1.2, color: COR.branco, textShadow: CONTORNO, transform: `rotate(${rot}deg) scale(${0.6 + 0.4 * p})`, opacity: Math.min(1, p * 2), whiteSpace: 'nowrap'}}>{texto}</div>
+    {alvo && <svg width={LARGURA} height={ALTURA} viewBox={`0 0 ${LARGURA} ${ALTURA}`} style={{position: 'absolute', inset: 0, overflow: 'visible'}}>
+      <path d={`M ${x} ${y + tam * 0.7} Q ${(x + alvo[0]) / 2 - 80} ${(y + alvo[1]) / 2 + 60} ${alvo[0]} ${alvo[1]}`} fill="none" stroke={COR.branco} strokeWidth={9} strokeLinecap="round" pathLength={1} strokeDasharray="1 1.1" strokeDashoffset={1 - s} style={{filter: 'drop-shadow(0 0 3px #0E0E10) drop-shadow(0 0 3px #0E0E10)'}} />
+      <path d={`M ${alvo[0] - 40} ${alvo[1] - 30} L ${alvo[0]} ${alvo[1]} L ${alvo[0] - 52} ${alvo[1] + 6}`} fill="none" stroke={COR.branco} strokeWidth={9} strokeLinecap="round" strokeLinejoin="round" pathLength={1} strokeDasharray="1 1.1" strokeDashoffset={1 - seg(f, 14, 20)} style={{filter: 'drop-shadow(0 0 3px #0E0E10) drop-shadow(0 0 3px #0E0E10)'}} />
+    </svg>}
+  </>;
+};

package/kits/ugc-reels/elementos/Reacoes.tsx

@@ -0,0 +1,26 @@
+// Reacoes: emojis (❤️ 🔥 😍 👏) que sobem pela lateral direita, um novo a cada `intervalo` quadros. Cada um sobe 520 px em 90 quadros
+// com ondulação de ±24 px, nasce com overshoot e some nos últimos 20 quadros. Ficam dentro da margem de 96 px.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {ob, rnd, seg} from './base';
+
+export type ReacoesProps = {
+  emojis?: string[];
+  quantidade?: number;
+  inicio?: number;
+  intervalo?: number;
+  /** y de onde nascem */
+  base?: number;
+};
+
+export const Reacoes: React.FC<ReacoesProps> = ({emojis = ['❤️', '🔥', '😍', '👏'], quantidade = 8, inicio = 0, intervalo = 5, base = 1200}) => {
+  const f = useCurrentFrame();
+  return <>
+    {Array.from({length: quantidade}, (_, i) => {
+      const q = f - inicio - i * intervalo;
+      if (q < 0 || q > 90) return null;
+      const sobe = 520 * (q / 90), nasce = ob(seg(q, 0, 10), 1.9);
+      return <div key={i} style={{position: 'absolute', left: 880 + Math.sin(q / 9 + i * 2) * 24 - 40 + (rnd(i) - 0.5) * 40, top: base - sobe, fontSize: 84, lineHeight: 1, transform: `scale(${nasce})`, opacity: 1 - seg(q, 70, 90)}}>{emojis[i % emojis.length]}</div>;
+    })}
+  </>;
+};

package/kits/ugc-reels/elementos/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 '../assets/sons/corte.mp3';
+import palavra from '../assets/sons/palavra.mp3';
+import pop from '../assets/sons/pop.mp3';
+import notificacao from '../assets/sons/notificacao.mp3';
+import whoosh from '../assets/sons/whoosh.mp3';
+import toque from '../assets/sons/toque.mp3';
+import impacto from '../assets/sons/impacto.mp3';
+import assinatura from '../assets/sons/assinatura.mp3';
+import trilha from '../assets/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/kits/ugc-reels/elementos/VideoCelular.tsx

@@ -0,0 +1,37 @@
+// VideoCelular: a imagem do cliente em tela cheia, com cara de gravação de celular: tremida de mão (±5 px, ±0,4°),
+// contraste 1,08, vinheta e gradiente embaixo pra legenda ler. Aceita vários cortes: cada um é um corte seco que entra
+// com zoom alternado (1,0× / 1,2×) e empurra +6% em 14 quadros.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {COR, e5, rnd, seg} from './base';
+
+export type Corte = {
+  src: string;
+  /** quadro (da cena) em que esta imagem entra */
+  de: number;
+  /** ponto da imagem que fica no centro, ex.: "50% 40%" */
+  foco?: string;
+};
+export type VideoCelularProps = {
+  cortes: Corte[];
+  /** quadro em que a cena acaba (último corte vai até aqui) */
+  fim?: number;
+  /** intensidade da tremida, 0..2 */
+  tremor?: number;
+};
+
+export const VideoCelular: React.FC<VideoCelularProps> = ({cortes, tremor = 1}) => {
+  const f = useCurrentFrame();
+  let i = 0;
+  for (let k = 0; k < cortes.length; k++) if (f >= cortes[k].de) i = k;
+  const c = cortes[i], q = f - c.de;
+  const zoom0 = i % 2 === 0 ? 1.04 : 1.2, z = zoom0 + 0.06 * e5(seg(q, 0, 14)) + q * 0.0009;
+  const dx = (Math.sin(f / 4.5 + i) * 4 + Math.sin(f / 6.5 + 2) * 2 + (rnd(f) - 0.5) * 2) * tremor, dy = (Math.cos(f / 6 + i) * 4 + Math.sin(f / 9) * 2 + (rnd(f + 99) - 0.5) * 2) * tremor, rot = Math.sin(f / 7 + i) * 0.4 * tremor;
+  return <AbsoluteFill style={{background: COR.preto}}>
+    <AbsoluteFill style={{overflow: 'hidden'}}>
+      <img src={c.src} style={{position: 'absolute', left: '50%', top: '50%', height: 1920, minWidth: 1080, transform: `translate(-50%, -50%) translate(${dx}px, ${dy}px) rotate(${rot}deg) scale(${z})`, objectFit: 'cover', objectPosition: c.foco ?? '50% 50%', filter: 'contrast(1.08) saturate(1.12)'}} />
+    </AbsoluteFill>
+    <AbsoluteFill style={{background: 'radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(0,0,0,0.45))'}} />
+    <AbsoluteFill style={{background: 'linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 18%, transparent 55%, rgba(0,0,0,0.5) 100%)'}} />
+  </AbsoluteFill>;
+};

package/kits/ugc-reels/elementos/base.ts

@@ -0,0 +1,92 @@
+// Base do kit ugc-reels: 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 fonteA from '../assets/fontes/montserrat-latin.woff2';
+import fonteB from '../assets/fontes/caveat-latin.woff2';
+
+// ---------- tela ----------
+export const LARGURA = 1080, ALTURA = 1920, FPS = 30;
+// área segura (Reels/TikTok): o que se lê fica entre estas linhas
+export const SEGURA = {topo: 168, base: 1330, lado: 96};
+export const LARGURA_UTIL = LARGURA - SEGURA.lado * 2; // 888 px
+
+// ---------- cor ----------
+export const COR = {
+  preto: '#0E0E10',
+  branco: '#FFFFFF',
+  amarelo: '#FFE14D',
+  vermelho: '#FF3B5C',
+  cinza: '#2A2A2E',
+  azulSeguir: '#3B82F6',
+};
+
+/** contorno preto de 5 px em volta de texto branco (8 direções) */
+export const CONTORNO = Array.from({length: 8}, (_, i) => `${(Math.cos((i * Math.PI) / 4) * 5).toFixed(1)}px ${(Math.sin((i * Math.PI) / 4) * 5).toFixed(1)}px 0 #0E0E10`).join(', ');
+
+// ---------- fonte ----------
+// Famílias com o prefixo do kit, pra não colidir com outro kit no mesmo estúdio.
+export const FAM_A = 'UG Montserrat';
+export const FONTE_A = '"UG Montserrat", system-ui, sans-serif';
+export const FAM_B = 'UG Caveat';
+export const FONTE_B = '"UG Caveat", cursive';
+
+// As medidas de texto (caber) só valem depois das fontes: a Montagem espera `esperarFontes()` antes de desenhar.
+const TOTAL_FONTES = 2;
+let nProntas = 0;
+const aguardando: (() => void)[] = [];
+const marcarFonte = () => {nProntas++; if (nProntas >= TOTAL_FONTES) aguardando.splice(0).forEach((r) => r());};
+export const fontesProntas = () => nProntas >= TOTAL_FONTES || typeof document === 'undefined';
+export const esperarFontes = () => new Promise<void>((res) => {if (fontesProntas()) res(); else aguardando.push(res);});
+if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__ugA) {
+  (globalThis as Record<string, unknown>).__ugA = true;
+  const hA = delayRender('ugc-reels: UG Montserrat');
+  new FontFace('UG Montserrat', `url(${fonteA}) format('woff2')`, {weight: '700 900', style: 'normal'}).load()
+    .then((ff) => {document.fonts.add(ff); marcarFonte(); continueRender(hA);})
+    .catch(() => {marcarFonte(); continueRender(hA);});
+}
+if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__ugB) {
+  (globalThis as Record<string, unknown>).__ugB = true;
+  const hB = delayRender('ugc-reels: UG Caveat');
+  new FontFace('UG Caveat', `url(${fonteB}) format('woff2')`, {weight: '600 700', style: 'normal'}).load()
+    .then((ff) => {document.fonts.add(ff); marcarFonte(); continueRender(hB);})
+    .catch(() => {marcarFonte(); continueRender(hB);});
+}
+
+// ---------- 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) */
+export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
+/** saída com overshoot (passa de 1 e volta): toda entrada do kit usa esta ou a e5 */
+export const ob = (t: number, s = 1.9) => {const x = c01(t) - 1; return 1 + (s + 1) * x * x * x + s * x * x;};
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+/** pseudo-aleatório estável (0..1) a partir de um inteiro */
+export const rnd = (n: number) => {const x = Math.sin(n * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x);};
+/** uma batida da trilha do kit em quadros */
+export const BATIDA = 15;
+
+// ---------- medida de texto ----------
+let canvas: HTMLCanvasElement | null = null;
+const cache = new Map<string, number>();
+export const larguraTexto = (texto: string, tamanho: number, fam: string, peso = 800, trackingEm = 0): number => {
+  const chave = `${texto}|${tamanho}|${fam}|${peso}|${trackingEm}`;
+  const c = cache.get(chave); if (c !== undefined) return c;
+  if (typeof document === 'undefined') return texto.length * tamanho * 0.58;
+  canvas = canvas || document.createElement('canvas');
+  const ctx = canvas.getContext('2d'); if (!ctx) return texto.length * tamanho * 0.58;
+  const fonte = `${peso} ${tamanho}px "${fam}"`;
+  ctx.font = fonte;
+  const w = ctx.measureText(texto).width + texto.length * trackingEm * tamanho;
+  if (fontesProntas() && 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, fam: string, largura = LARGURA_UTIL, peso = 800, trackingEm = 0) => {
+  const w = larguraTexto(texto, tamanho, fam, 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, '');
+/** corta "a *b* c" em [{t:'a ', d:false}, {t:'b', d:true}, {t:' c', d:false}] */
+export const partes = (t: string) => t.split('*').map((p, i) => ({t: p, d: i % 2 === 1})).filter((p) => p.t.length > 0);

package/kits/ugc-reels/elementos/index.ts

@@ -0,0 +1,17 @@
+// Tudo que o kit ugc-reels 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 {VideoCelular} from './VideoCelular';
+export {LegendaEmoji} from './LegendaEmoji';
+export {CabecalhoPerfil} from './CabecalhoPerfil';
+export {Comentario} from './Comentario';
+export {NotaDeMao} from './NotaDeMao';
+export {Reacoes} from './Reacoes';
+export {BotaoLink} from './BotaoLink';
+export {AssinaturaMarca} from './AssinaturaMarca';
+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/ugc-reels/exemplos/logo-rotina.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect width="200" height="200" fill="#FFE14D"/><rect x="46" y="50" width="108" height="100" rx="16" fill="#0E0E10"/><path d="M70 100l20 20 40-44" fill="none" stroke="#FFE14D" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/kits/ugc-reels/exemplos/plano.json

@@ -0,0 +1,54 @@
+{
+  "kit": "ugc-reels",
+  "roteiro": "exemplos/roteiro.md",
+  "duracao": 240,
+  "trilha": {"volume": 0.5},
+  "cenas": [
+    {"batida": "gancho", "de": 0, "ate": 42, "entrada": "nenhuma",
+     "camadas": [
+       {"elemento": "VideoCelular", "props": {"cortes": [{"src": "fotos/foto-03.jpg", "de": 0}, {"src": "fotos/foto-04.jpg", "de": 14}, {"src": "fotos/foto-02.jpg", "de": 28}]}},
+       {"elemento": "CabecalhoPerfil", "props": {"usuario": "bia.organiza", "avatar": "B", "ativa": 0, "duracao": 42, "inicio": 0}},
+       {"elemento": "LegendaEmoji", "props": {"texto": "Eu vivia atrasada", "emoji": "😩", "y": 1150, "inicio": 4, "passo": 5}}
+     ],
+     "socos": [14, 28],
+     "sons": [{"som": "corte", "em": 14}, {"som": "corte", "em": 28}, {"som": "palavra", "em": 4}, {"som": "pop", "em": 24}]},
+    {"batida": "virada", "de": 42, "ate": 84, "entrada": "nenhuma",
+     "camadas": [
+       {"elemento": "VideoCelular", "props": {"cortes": [{"src": "fotos/foto-06.jpg", "de": 0}, {"src": "fotos/foto-03.jpg", "de": 20}]}},
+       {"elemento": "LegendaEmoji", "props": {"texto": "Até achar o Rotina", "emoji": "✨", "y": 1150, "inicio": 2, "passo": 6}},
+       {"elemento": "Reacoes", "props": {"emojis": ["❤️", "🔥", "😍"], "quantidade": 7, "inicio": 12, "intervalo": 4}}
+     ],
+     "socos": [0, 20],
+     "sons": [{"som": "corte", "em": 0}, {"som": "palavra", "em": 2}, {"som": "corte", "em": 20}, {"som": "impacto", "em": 26}]},
+    {"batida": "prova", "de": 84, "ate": 126, "entrada": "nenhuma",
+     "camadas": [
+       {"elemento": "VideoCelular", "props": {"cortes": [{"src": "fotos/foto-04.jpg", "de": 0}, {"src": "fotos/foto-06.jpg", "de": 22}]}},
+       {"elemento": "Comentario", "props": {"nome": "carol_mendes", "texto": "amei demais 😍", "curtidas": "2,4 mil", "y": 780, "inicio": 6}},
+       {"elemento": "LegendaEmoji", "props": {"texto": "Tudo num lugar só", "emoji": "📲", "y": 1180, "inicio": 12, "passo": 5}}
+     ],
+     "socos": [0, 6, 22],
+     "sons": [{"som": "corte", "em": 0}, {"som": "notificacao", "em": 5}, {"som": "corte", "em": 22}, {"som": "palavra", "em": 12}]},
+    {"batida": "prova", "de": 126, "ate": 162, "entrada": "nenhuma",
+     "camadas": [
+       {"elemento": "VideoCelular", "props": {"cortes": [{"src": "fotos/foto-02.jpg", "de": 0}, {"src": "fotos/foto-03.jpg", "de": 18}]}},
+       {"elemento": "LegendaEmoji", "props": {"texto": "Lembra de tudo pra mim", "emoji": "🧠", "y": 1180, "inicio": 2, "passo": 5}},
+       {"elemento": "NotaDeMao", "props": {"texto": "juro!", "x": 700, "y": 560, "tamanho": 150, "rot": -8, "inicio": 20}}
+     ],
+     "socos": [0, 18],
+     "sons": [{"som": "corte", "em": 0}, {"som": "palavra", "em": 2}, {"som": "corte", "em": 18}, {"som": "whoosh", "em": 19}]},
+    {"batida": "cta", "de": 162, "ate": 198, "entrada": "nenhuma",
+     "camadas": [
+       {"elemento": "VideoCelular", "props": {"cortes": [{"src": "fotos/foto-06.jpg", "de": 0}, {"src": "fotos/foto-04.jpg", "de": 16}]}},
+       {"elemento": "LegendaEmoji", "props": {"texto": "Testa grátis", "emoji": "🎁", "y": 640, "inicio": 2, "passo": 6}},
+       {"elemento": "BotaoLink", "props": {"texto": "LINK NA BIO", "y": 1000, "inicio": 14}}
+     ],
+     "socos": [0, 16, 15],
+     "sons": [{"som": "corte", "em": 0}, {"som": "palavra", "em": 2}, {"som": "corte", "em": 16}, {"som": "toque", "em": 14}]},
+    {"batida": "marca", "de": 198, "ate": 240, "entrada": "nenhuma",
+     "camadas": [
+       {"elemento": "AssinaturaMarca", "props": {"fundo": "fotos/foto-03.jpg", "logo": "logo-rotina.svg", "usuario": "@bia.organiza", "endereco": "rotina.exemplo", "inicio": 0}}
+     ],
+     "socos": [0],
+     "sons": [{"som": "assinatura", "em": 2}, {"som": "pop", "em": 12}]}
+  ]
+}

package/kits/ugc-reels/exemplos/roteiro.md

@@ -0,0 +1,20 @@
+# Roteiro de demonstração · "Rotina" (app fictício) por @bia.organiza
+
+Pedido: *"um reels de 8 s no estilo UGC: a Bia conta que vivia atrasada até achar o Rotina, app de planejar a semana, comentário elogiando e "testa grátis, link na bio"."*
+
+Sem narração: os cortes seguem a trilha (1 batida = 15 quadros).
+
+| # | batida | tempo (quadros) | na tela | elemento | som |
+|---|---|---|---|---|---|
+| 1 | gancho | 0–42 | footage em 3 cortes + "Eu vivia atrasada 😩" | VideoCelular + LegendaEmoji + CabecalhoPerfil | corte ×3, palavra, pop |
+| 2 | virada | 42–84 | "Até achar o Rotina ✨" + corações | VideoCelular + LegendaEmoji + Reacoes | corte, palavra, impacto |
+| 3 | prova | 84–126 | comentário "amei demais 😍" + "Tudo num lugar só 📲" | VideoCelular + LegendaEmoji + Comentario | corte, notificacao |
+| 4 | prova | 126–162 | "Lembra de tudo pra mim 🧠" + nota "juro!" | VideoCelular + LegendaEmoji + NotaDeMao | corte, palavra, whoosh |
+| 5 | cta | 162–198 | "Testa grátis 🎁" + LINK NA BIO | VideoCelular + LegendaEmoji + BotaoLink | corte, whoosh, toque |
+| 6 | marca | 198–240 | avatar + "@bia.organiza" + "rotina.exemplo" | AssinaturaMarca | assinatura, pop |
+
+Como a IA chegou nisso:
+1. Cortou o roteiro falado em frases de 3–4 palavras, cada uma com um emoji.
+2. Pegou as batidas obrigatórias (gancho, virada, prova, marca) e o cta do pedido.
+3. Trocou a imagem a cada 12–20 quadros e deixou um só adereço por cena.
+4. Escreveu `plano.json`; o `preview.tsx` passa o plano para `Montagem`.

package/kits/ugc-reels/preview.tsx

@@ -0,0 +1,16 @@
+// Preview do kit: o vídeo de demonstração (8 s) montado SÓ com os elementos do kit, a partir de exemplos/plano.json.
+// O estúdio registra isto como `Kit-ugc-reels`.
+import React from 'react';
+import {Montagem, Plano} from './elementos';
+import plano from './exemplos/plano.json';
+import f0 from './exemplos/fotos/foto-02.jpg';
+import f1 from './exemplos/fotos/foto-03.jpg';
+import f2 from './exemplos/fotos/foto-04.jpg';
+import f3 from './exemplos/fotos/foto-06.jpg';
+import l0 from './exemplos/logo-rotina.svg';
+
+const arquivos: Record<string, string> = {'fotos/foto-02.jpg': f0, 'fotos/foto-03.jpg': f1, 'fotos/foto-04.jpg': f2, 'fotos/foto-06.jpg': f3, 'logo-rotina.svg': l0};
+
+const Preview: React.FC = () => <Montagem plano={plano as Plano} arquivos={arquivos} />;
+
+export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 96, Componente: Preview};