primocode 10.17.1 → 11.0.0

package/kits/legenda-viva/elementos/Cena.tsx

@@ -0,0 +1,41 @@
+// Cena: janela de tempo de um plano. Entra com movimento (nunca corte seco) e sai deslizando,
+// sobrepondo 8 quadros com a próxima. Dentro dela, useCurrentFrame() começa em 0.
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {e5, eb, seg} from './base';
+
+export type Entrada = 'subir' | 'zoom' | 'direita' | 'esquerda' | 'girar' | 'cortar' | 'nenhuma';
+export const SOBREPOE = 8; // quadros em que a saída desta cena cruza a entrada da próxima
+
+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 Janela: React.FC<{duracao: number; entrada: Entrada; ultima: boolean; children: React.ReactNode}> = ({duracao, entrada, ultima, children}) => {
+  const f = useCurrentFrame();
+  const q = 10; // quadros da entrada
+  const en = entrada === 'nenhuma' ? 0 : 1 - (entrada === 'cortar' ? eb(seg(f, 0, q)) : e5(seg(f, 0, q)));
+  const xo = ultima ? 0 : e5(seg(f, duracao, duracao + SOBREPOE));
+  let tf = '';
+  if (entrada === 'subir') tf += `translateY(${en * 100}px) `;
+  if (entrada === 'zoom') tf += `scale(${1 + en * 0.9}) `;
+  if (entrada === 'direita') tf += `translateX(${en * 290}px) `;
+  if (entrada === 'esquerda') tf += `translateX(${-en * 290}px) `;
+  if (entrada === 'girar') tf += `rotate(${en * -14}deg) scale(${1 + en * 0.5}) `;
+  if (entrada === 'cortar') tf += `scale(${1 + en * 0.14}) `;
+  tf += `translateY(${-xo * 60}px)`;
+  const blur = (entrada === 'cortar' ? 0 : en * 4) + xo * 4;
+  const op = entrada === 'cortar' ? 1 - xo : (1 - en * 0.5) * (1 - xo);
+  return <AbsoluteFill style={{transform: tf, opacity: op, 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/legenda-viva/elementos/ChipTema.tsx

@@ -0,0 +1,19 @@
+// ChipTema: pílula preta de 80 px com o assunto do vídeo em Inter 800 caixa alta (0,12 em) e um ponto vermelho que pulsa.
+// Desce do topo (translateY −200 → 0 com sobra, 14 quadros). Fica em y = 270, sempre dentro da área segura.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, eb} from './base';
+
+export type ChipTemaProps = {texto: string; inicio?: number; y?: number; fim?: number};
+
+export const ChipTema: React.FC<ChipTemaProps> = ({texto, inicio = 0, y = 270, fim}) => {
+  const f = useCurrentFrame();
+  if (f < inicio || (fim !== undefined && f >= fim)) return null;
+  const p = eb((f - inicio) / 14, 1.8);
+  const pulso = 1 + 0.25 * Math.sin(f / 4);
+  return <div style={{position: 'absolute', left: 0, right: 0, top: y - 40, display: 'flex', justifyContent: 'center', transform: `translateY(${(1 - p) * -200}px)`}}>
+    <div style={{height: 80, padding: '0 36px', borderRadius: 40, background: COR.preto, border: `4px solid ${COR.branco}`, boxSizing: 'border-box', display: 'flex', alignItems: 'center', gap: 20, fontFamily: FONTE.apoio, fontWeight: 800, fontSize: 36, letterSpacing: '0.12em', textTransform: 'uppercase', color: COR.branco}}>
+      <div style={{width: 22, height: 22, borderRadius: 11, background: COR.vermelho, transform: `scale(${pulso})`}} />{texto}
+    </div>
+  </div>;
+};

package/kits/legenda-viva/elementos/Fundo.tsx

@@ -0,0 +1,6 @@
+// Fundo: preto. Só aparece se o vídeo/foto da QuadroFalante falhar; a cena real é sempre o vídeo da pessoa.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {COR} from './base';
+
+export const Fundo: React.FC = () => <AbsoluteFill style={{background: COR.preto}} />;

package/kits/legenda-viva/elementos/LegendaCaixa.tsx

@@ -0,0 +1,36 @@
+// LegendaCaixa: uma linha só (112 px, Montserrat 800) em que uma caixa verde de canto 22 px desliza de palavra em palavra
+// (6 quadros em `e5`, largura acompanhando a palavra). O texto da palavra ativa vira preto; as outras ficam brancas com
+// contorno de 10 px. As palavras aparecem pulando no quadro em que são faladas.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, caber, e5, eb, larguraTexto, lerp} from './base';
+import type {PalavraFala} from './LegendaPalavra';
+
+export type LegendaCaixaProps = {palavras: PalavraFala[]; y?: number; tamanho?: number; cor?: 'verde' | 'amarelo'; fim?: number};
+
+export const LegendaCaixa: React.FC<LegendaCaixaProps> = ({palavras, y = 1100, tamanho = 112, cor = 'verde', fim}) => {
+  const f = useCurrentFrame();
+  if (fim !== undefined && f >= fim) return null;
+  const ws = palavras.map((p) => p.t.toUpperCase());
+  const tam = caber(ws.join(' ') + '  ', tamanho, LARGURA_UTIL - 60, 800, -0.01);
+  const larg = ws.map((w) => larguraTexto(w, tam, 800, -0.01) + 44);
+  const gap = tam * 0.12;
+  const total = larg.reduce((a, b) => a + b, 0) + gap * (ws.length - 1);
+  const xs = larg.map((_, i) => larg.slice(0, i).reduce((a, b) => a + b + gap, 0));
+  const ativa = palavras.reduce((a, p, i) => (f >= p.de ? i : a), -1);
+  if (ativa < 0) return null;
+  const prev = Math.max(0, ativa - 1);
+  const k = e5((f - palavras[ativa].de) / 6);
+  const bx = lerp(xs[prev], xs[ativa], k), bw = lerp(larg[prev], larg[ativa], k);
+  const h = tam * 1.3;
+  return <div style={{position: 'absolute', left: (1080 - total) / 2, top: y - h / 2, width: total, height: h}}>
+    <div style={{position: 'absolute', left: bx, top: 0, width: bw, height: h, borderRadius: 22, background: COR[cor], boxShadow: `0 10px 0 ${COR.preto}`}} />
+    {ws.map((w, i) => {
+      const t = f - palavras[i].de;
+      if (t < 0) return null;
+      const pop = eb(t / 10, 2);
+      const act = i === ativa;
+      return <div key={i} style={{position: 'absolute', left: xs[i], width: larg[i], top: 0, height: h, lineHeight: `${h}px`, textAlign: 'center', fontFamily: FONTE.titulo, fontWeight: 800, fontSize: tam, letterSpacing: '-0.01em', whiteSpace: 'nowrap', color: act ? COR.preto : COR.branco, WebkitTextStroke: act ? '0' : `10px ${COR.preto}`, paintOrder: 'stroke fill', transform: `scale(${0.6 + 0.4 * pop})`}}>{w}</div>;
+    })}
+  </div>;
+};

package/kits/legenda-viva/elementos/LegendaPalavra.tsx

@@ -0,0 +1,32 @@
+// LegendaPalavra: a legenda animada. Páginas de 2–3 palavras; cada palavra aparece no quadro em que é falada, pulando
+// (scale 0,6 → 1 com sobra); a ativa fica amarela e 12% maior, as já faladas ficam brancas. Contorno preto de 12 px
+// (paint-order: stroke) + sombra dura. A página troca inteira em `ate`.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, caber, e5, eb} from './base';
+
+export type PalavraFala = {t: string; /** quadro em que é falada */ de: number};
+export type PaginaLegenda = {palavras: PalavraFala[]; /** quadro em que a página some */ ate: number};
+export type LegendaPalavraProps = {paginas: PaginaLegenda[]; y?: number; tamanho?: number; cor?: 'amarelo' | 'verde' | 'vermelho'};
+
+export const LegendaPalavra: React.FC<LegendaPalavraProps> = ({paginas, y = 1080, tamanho = 150, cor = 'amarelo'}) => {
+  const f = useCurrentFrame();
+  const pg = paginas.find((p) => f >= p.palavras[0].de - 2 && f < p.ate);
+  if (!pg) return null;
+  const texto = pg.palavras.map((p) => p.t.toUpperCase()).join(' ');
+  // cada palavra cabe na largura; a página quebra em linhas se não couber numa só
+  const tam = Math.min(...pg.palavras.map((p) => caber(p.t.toUpperCase(), tamanho, LARGURA_UTIL - 40, 900, -0.01)));
+  void texto;
+  const ativa = pg.palavras.reduce((a, p, i) => (f >= p.de ? i : a), -1);
+  const ent = eb((f - pg.palavras[0].de + 2) / 8, 1.2);
+  return <div style={{position: 'absolute', left: SEGURA.lado, top: y - tam, width: LARGURA_UTIL, height: tam * 2, display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', alignContent: 'center', gap: `0 ${tam * 0.4}px`, transform: `translateY(${(1 - Math.min(ent, 1)) * 30}px) scale(${0.9 + 0.1 * Math.min(ent, 1)})`}}>
+    {pg.palavras.map((p, i) => {
+      const t = f - p.de;
+      if (t < 0) return <div key={i} style={{fontSize: tam, lineHeight: `${tam * 1.1}px`, opacity: 0}}>{p.t.toUpperCase()}</div>;
+      const pop = eb(t / 10, 2);
+      const act = i === ativa;
+      const esc = (0.6 + 0.4 * pop) * (act ? 1 + 0.12 * e5(t / 6) : 1);
+      return <div key={i} style={{fontFamily: FONTE.titulo, fontWeight: 900, fontSize: tam, lineHeight: `${tam * 1.1}px`, letterSpacing: '-0.01em', whiteSpace: 'nowrap', color: act ? COR[cor] : COR.branco, WebkitTextStroke: `12px ${COR.preto}`, paintOrder: 'stroke fill', textShadow: '0 8px 0 rgba(10,10,10,0.6)', transform: `scale(${esc})`}}>{p.t.toUpperCase()}</div>;
+    })}
+  </div>;
+};

package/kits/legenda-viva/elementos/Montagem.tsx

@@ -0,0 +1,59 @@
+// 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 {Fundo} from './Fundo';
+import {Camera} from './Camera';
+import {Cena, Entrada} from './Cena';
+import {Efeito, NomeSom, Trilha} from './Som';
+import {QuadroFalante} from './QuadroFalante';
+import {LegendaPalavra} from './LegendaPalavra';
+import {LegendaCaixa} from './LegendaCaixa';
+import {PalavraGigante} from './PalavraGigante';
+import {OndaVoz} from './OndaVoz';
+import {ChipTema} from './ChipTema';
+import {AssinaturaMarca} from './AssinaturaMarca';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {
+  QuadroFalante, LegendaPalavra, LegendaCaixa, PalavraGigante, OndaVoz, ChipTema, AssinaturaMarca,
+};
+
+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; 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: '#0A0A0A'}}>
+    <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(`legenda-viva: 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/legenda-viva/elementos/OndaVoz.tsx

@@ -0,0 +1,23 @@
+// OndaVoz: 19 barras (largura 22, vão 24) que dançam como a voz: altura de 30 a 200 px por senoides com fases e
+// períodos diferentes (12–22 quadros). As barras do meio são amarelas, as das pontas brancas. Entra crescendo do chão.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, e5, seg} from './base';
+
+export type OndaVozProps = {y?: number; inicio?: number; barras?: number; fim?: number};
+
+export const OndaVoz: React.FC<OndaVozProps> = ({y = 1200, inicio = 0, barras = 19, fim}) => {
+  const f = useCurrentFrame();
+  if (f < inicio || (fim !== undefined && f >= fim)) return null;
+  const entra = e5(seg(f, inicio, inicio + 12));
+  const w = 22, gap = 24, total = barras * w + (barras - 1) * gap;
+  return <div style={{position: 'absolute', left: (1080 - total) / 2, top: y - 100, width: total, height: 200, display: 'flex', alignItems: 'center', gap}}>
+    {Array.from({length: barras}, (_, i) => {
+      const per = 12 + (i * 7) % 11;
+      const amp = 0.5 + 0.5 * Math.sin(f / per + i * 1.7) * Math.sin(f / (per + 5) + i);
+      const centro = 1 - Math.abs(i - (barras - 1) / 2) / ((barras - 1) / 2) * 0.5;
+      const h = (30 + 170 * Math.abs(amp) * centro) * entra;
+      return <div key={i} style={{width: w, height: h, borderRadius: 11, background: Math.abs(i - (barras - 1) / 2) < 5 ? COR.amarelo : COR.branco, border: `4px solid ${COR.preto}`, boxSizing: 'border-box'}} />;
+    })}
+  </div>;
+};

package/kits/legenda-viva/elementos/PalavraGigante.tsx

@@ -0,0 +1,18 @@
+// PalavraGigante: a palavra-chave da frase na tela inteira (Montserrat 900 até 300 px, amarela, contorno preto de 18 px).
+// Bate de 2,2x para 1x com sobra e treme 6 px nos 6 primeiros quadros; depois respira (push-in de 0,2% por quadro).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, caber, eb} from './base';
+
+export type PalavraGiganteProps = {palavra: string; cor?: 'amarelo' | 'branco' | 'verde' | 'vermelho'; inicio?: number; y?: number; tamanho?: number; fim?: number};
+
+export const PalavraGigante: React.FC<PalavraGiganteProps> = ({palavra, cor = 'amarelo', inicio = 0, y = 740, tamanho = 300, fim}) => {
+  const f = useCurrentFrame();
+  const t = f - inicio;
+  if (t < 0 || (fim !== undefined && f >= fim)) return null;
+  const txt = palavra.toUpperCase();
+  const tam = caber(txt, tamanho, LARGURA_UTIL - 40, 900, -0.01);
+  const p = eb(t / 12, 1.8);
+  const tremor = t < 6 ? Math.sin(t * 5) * 6 * (1 - t / 6) : 0;
+  return <div style={{position: 'absolute', left: SEGURA.lado, top: y - tam / 2, width: LARGURA_UTIL, height: tam, lineHeight: `${tam}px`, textAlign: 'center', fontFamily: FONTE.titulo, fontWeight: 900, fontSize: tam, letterSpacing: '-0.01em', whiteSpace: 'nowrap', color: COR[cor], WebkitTextStroke: `18px ${COR.preto}`, paintOrder: 'stroke fill', textShadow: '0 12px 0 rgba(10,10,10,0.6)', transform: `translate(${tremor}px, ${-tremor * 0.6}px) scale(${(2.2 - 1.2 * p) * (1 + Math.max(0, t - 12) * 0.002)})`}}>{txt}</div>;
+};

package/kits/legenda-viva/elementos/QuadroFalante.tsx

@@ -0,0 +1,17 @@
+// QuadroFalante: o vídeo (ou foto) da pessoa falando, em tela cheia, com push-in (1,12 → 1,20 até o fim da cena) e um véu
+// preto de 0% no topo a 55% embaixo para a legenda ler. Com `video`, usa OffthreadVideo (src é a URL do vídeo).
+import React from 'react';
+import {AbsoluteFill, Img, OffthreadVideo, useCurrentFrame} from 'remotion';
+import {COR} from './base';
+import {useDuracaoCena} from './Cena';
+
+export type QuadroFalanteProps = {src: string; video?: boolean; foco?: string; veu?: number; inicioDoVideo?: number};
+
+export const QuadroFalante: React.FC<QuadroFalanteProps> = ({src, video = false, foco = '50% 40%', veu = 0.55, inicioDoVideo = 0}) => {
+  const f = useCurrentFrame(), L = useDuracaoCena();
+  const st: React.CSSProperties = {width: '100%', height: '100%', objectFit: 'cover', objectPosition: foco, transform: `scale(${1.12 + 0.08 * (f / L)})`, filter: 'saturate(1.05) contrast(1.05)'};
+  return <AbsoluteFill style={{background: COR.preto}}>
+    {video ? <OffthreadVideo src={src} startFrom={inicioDoVideo} style={st} /> : <Img src={src} style={st} />}
+    <AbsoluteFill style={{background: `linear-gradient(180deg, rgba(10,10,10,0) 35%, rgba(10,10,10,${veu}) 100%)`}} />
+  </AbsoluteFill>;
+};

package/kits/legenda-viva/elementos/Som.tsx

@@ -0,0 +1,38 @@
+// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`, pacote soft-pop); trilha de 9 s, 118 bpm, mixada baixa (0,25) porque o vídeo tem voz.
+// 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 trilha from '../assets/trilha/voz-118bpm.mp3';
+
+export const SONS = {
+  'whoosh-entra': whooshEntra, 'whoosh-sai': whooshSai, swoosh, 'pop-palavra': popPalavra, 'pop-cartao': popCartao, clique, impacto, subida, assinatura,
+} as const;
+export type NomeSom = keyof typeof SONS;
+
+// volume de cada efeito (0..1) já calibrado contra a trilha a 0.25
+const VOLUME: Record<NomeSom, number> = {
+  'whoosh-entra': 0.9, 'whoosh-sai': 0.8, swoosh: 1, 'pop-palavra': 0.5, 'pop-cartao': 0.9, clique: 0.8, impacto: 0.9, subida: 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.25, 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/legenda-viva/elementos/base.ts

@@ -0,0 +1,73 @@
+// Base do kit legenda-viva: 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 fonte0 from '../assets/fontes/montserrat.woff2';
+import fonte1 from '../assets/fontes/inter.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: '#0A0A0A',
+  branco: '#FFFFFF',
+  amarelo: '#FFE11A',
+  verde: '#22E27A',
+  vermelho: '#FF3B30'
+};
+
+// ---------- fonte ----------
+// Nome de família com o prefixo do kit ("LV ..."), pra não colidir com outro kit no mesmo estúdio.
+export const FONTE = {
+  titulo: '"LV Montserrat", Arial Black, Arial, sans-serif',
+  apoio: '"LV Inter", Helvetica Neue, Arial, sans-serif',
+};
+type G = {__kit_legenda_viva?: boolean};
+if (typeof document !== 'undefined' && !(globalThis as G).__kit_legenda_viva) {
+  (globalThis as G).__kit_legenda_viva = true;
+  const h = delayRender('legenda-viva: fontes');
+  Promise.all([
+    new FontFace('LV Montserrat', `url(${fonte0}) format('woff2')`, {weight: '700 900', style: 'normal'}).load(),
+    new FontFace('LV Inter', `url(${fonte1}) format('woff2')`, {weight: '500 800', style: 'normal'}).load(),
+  ]).then((fs) => {fs.forEach((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);
+/** easeOutBack: passa do destino em ~10% e volta (toda entrada tem overshoot) */
+export const eb = (t: number, s = 1.70158) => {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;
+/** uma batida da trilha do kit (118 bpm) em quadros */
+export const BATIDA = 15.25;
+
+// ---------- medida de texto ----------
+let canvas: HTMLCanvasElement | null = null;
+const cache = new Map<string, number>();
+export const larguraTexto = (texto: string, tamanho: number, peso = 900, trackingEm = -0.01, familia = 'LV Montserrat'): 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.58;
+  canvas = canvas || document.createElement('canvas');
+  const ctx = canvas.getContext('2d'); if (!ctx) return texto.length * tamanho * 0.58;
+  const fonte = `${peso} ${tamanho}px "${familia}"`;
+  ctx.font = fonte;
+  const w = ctx.measureText(texto).width + texto.length * trackingEm * tamanho;
+  if (document.fonts.check(fonte)) cache.set(chave, w);
+  return w;
+};
+/** o maior tamanho até `tamanho` em que o texto cabe em `largura` (nunca palavra cortada) */
+export const caber = (texto: string, tamanho: number, largura = LARGURA_UTIL, peso = 900, trackingEm = -0.01, familia = 'LV Montserrat') => {
+  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 pedaços {t, d}: d = true quando estava entre asteriscos */
+export const pedacos = (t: string) => t.split(/(\*[^*]+\*)/).filter(Boolean).map((p) => p.startsWith('*') ? {t: p.slice(1, -1), d: true} : {t: p, d: false});

package/kits/legenda-viva/elementos/index.ts

@@ -0,0 +1,16 @@
+// Tudo que o kit legenda-viva 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 {QuadroFalante} from './QuadroFalante';
+export {LegendaPalavra} from './LegendaPalavra';
+export {LegendaCaixa} from './LegendaCaixa';
+export {PalavraGigante} from './PalavraGigante';
+export {OndaVoz} from './OndaVoz';
+export {ChipTema} from './ChipTema';
+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/legenda-viva/exemplos/logo-dica.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><circle cx="60" cy="60" r="60" fill="#FFE11A"/><path d="M38 44h44v28H64l-12 14V72H38z" fill="#0A0A0A"/></svg>

package/kits/legenda-viva/exemplos/plano.json

@@ -0,0 +1,45 @@
+{
+  "kit": "legenda-viva",
+  "roteiro": "exemplos/roteiro.md",
+  "duracao": 240,
+  "trilha": {"volume": 0.25},
+  "cenas": [
+    {
+      "batida": "gancho", "de": 0, "ate": 70, "entrada": "nenhuma",
+      "camadas": [
+        {"elemento": "QuadroFalante", "props": {"src": "fotos/foto-03.jpg", "foco": "50% 35%"}},
+        {"elemento": "ChipTema", "props": {"texto": "estratégia", "inicio": 4}},
+        {"elemento": "LegendaPalavra", "props": {"paginas": [
+          {"palavras": [{"t": "você", "de": 6}, {"t": "não", "de": 14}, {"t": "precisa", "de": 21}], "ate": 34},
+          {"palavras": [{"t": "postar", "de": 38}, {"t": "todo", "de": 46}, {"t": "dia", "de": 53}], "ate": 70}
+        ], "y": 1080}}
+      ],
+      "sons": [{"som": "whoosh-entra", "em": 3}, {"som": "pop-palavra", "em": 21}, {"som": "pop-palavra", "em": 53}]
+    },
+    {
+      "batida": "virada", "de": 70, "ate": 120, "entrada": "cortar",
+      "camadas": [
+        {"elemento": "QuadroFalante", "props": {"src": "fotos/foto-01.jpg", "foco": "70% 40%"}},
+        {"elemento": "LegendaCaixa", "props": {"palavras": [{"t": "precisa", "de": 4}, {"t": "postar", "de": 14}, {"t": "bem", "de": 24}], "y": 1100}}
+      ],
+      "sons": [{"som": "whoosh-entra", "em": -1}, {"som": "clique", "em": 4}, {"som": "clique", "em": 24}]
+    },
+    {
+      "batida": "prova", "de": 120, "ate": 172, "entrada": "cortar",
+      "camadas": [
+        {"elemento": "QuadroFalante", "props": {"src": "fotos/foto-05.jpg", "foco": "30% 40%"}},
+        {"elemento": "PalavraGigante", "props": {"palavra": "estratégia", "cor": "amarelo", "inicio": 4, "y": 720, "tamanho": 300}},
+        {"elemento": "OndaVoz", "props": {"y": 1200, "inicio": 10}}
+      ],
+      "socos": [4],
+      "sons": [{"som": "subida", "em": -14}, {"som": "impacto", "em": 4}]
+    },
+    {
+      "batida": "marca", "de": 172, "ate": 240, "entrada": "cortar",
+      "camadas": [
+        {"elemento": "AssinaturaMarca", "props": {"nome": "Dica Rápida", "icone": "logo-dica.svg", "handle": "@dicarapida.exemplo", "chamada": "mais dicas toda semana", "botao": "SEGUIR", "inicio": 2, "y": 700}}
+      ],
+      "sons": [{"som": "whoosh-entra", "em": -1}, {"som": "assinatura", "em": 6}, {"som": "pop-cartao", "em": 38}]
+    }
+  ]
+}

package/kits/legenda-viva/exemplos/roteiro.md

@@ -0,0 +1,18 @@
+# Roteiro de demonstração · "Dica Rápida" (perfil fictício)
+
+Pedido: *"um reels de 8 s de uma pessoa dizendo 'você não precisa postar todo dia, precisa postar bem: estratégia', com legenda que acompanha cada palavra e um final pedindo para seguir."*
+
+A fala marca os cortes (o vídeo da pessoa é uma foto na demo; com vídeo real, `QuadroFalante` recebe `video: true`).
+
+| # | batida | tempo (quadros) | na tela | elemento | som |
+|---|---|---|---|---|---|
+| 1 | gancho | 0–70 | chip "ESTRATÉGIA" + "VOCÊ NÃO PRECISA" → "POSTAR TODO DIA" (palavra ativa amarela) | QuadroFalante + ChipTema + LegendaPalavra | whoosh, pop nos destaques |
+| 2 | virada | 70–120 | "PRECISA POSTAR BEM" com caixa verde que desliza | QuadroFalante + LegendaCaixa | whoosh, cliques |
+| 3 | prova | 120–172 | "ESTRATÉGIA" na tela inteira + onda de voz | QuadroFalante + PalavraGigante + OndaVoz | subida, impacto |
+| 4 | marca | 172–240 | avatar, "DICA RÁPIDA", @handle, "mais dicas toda semana", botão SEGUIR com toque | AssinaturaMarca | assinatura, pop |
+
+Como a IA chegou nisso:
+1. Transcreveu a fala com horário de cada palavra (quadro) e agrupou em páginas de 2–3 palavras.
+2. Escolheu a legenda em caixa para a solução e a palavra gigante para a palavra-chave; um apoio por plano (chip ou onda).
+3. Trocou a imagem de fundo a cada frase, com som só nos destaques (a trilha fica baixa por causa da voz).
+4. O `preview.tsx` passa esse plano para `Montagem`, que só usa os elementos do kit.

package/kits/legenda-viva/preview.tsx

@@ -0,0 +1,19 @@
+// 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-legenda-viva`.
+import React from 'react';
+import {Montagem, Plano} from './elementos';
+import plano from './exemplos/plano.json';
+import f1 from './exemplos/fotos/foto-01.jpg';
+import f3 from './exemplos/fotos/foto-03.jpg';
+import f5 from './exemplos/fotos/foto-05.jpg';
+import f2 from './exemplos/fotos/foto-02.jpg';
+import logo from './exemplos/logo-dica.svg';
+
+const arquivos: Record<string, string> = {
+  'fotos/foto-01.jpg': f1, 'fotos/foto-03.jpg': f3, 'fotos/foto-05.jpg': f5, 'fotos/foto-02.jpg': f2,
+  'logo-dica.svg': logo,
+};
+
+const Preview: React.FC = () => <Montagem plano={plano as Plano} arquivos={arquivos} />;
+
+export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 52, Componente: Preview};