primocode 10.17.1 → 10.19.0

package/kits/convite-evento/elementos/BotaoInscricao.tsx

@@ -0,0 +1,36 @@
+// BotaoInscricao: o botão da chamada final, pílula coral de 880 px com texto grande e seta, que estoura, pulsa e "aperta"
+// no quadro `clica`, soltando um anel. Embaixo, o endereço do evento em lima. Herói do fechamento.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, caber, e5, ov, seg} from './base';
+
+export type BotaoInscricaoProps = {
+  texto: string;
+  endereco: string;
+  inicio?: number;
+  /** quadro (na cena) do clique */
+  clica?: number;
+  /** centro vertical do botão, px */
+  y: number;
+  fim?: number;
+};
+
+export const BotaoInscricao: React.FC<BotaoInscricaoProps> = ({texto, endereco, inicio = 0, clica, y, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1 || f > fim + 12) return null;
+  const quando = clica ?? inicio + 22;
+  const t = ov(seg(f, inicio, inicio + 18)), sai = e5(seg(f, fim, fim + 10));
+  const aperta = f >= quando && f < quando + 8 ? 1 - Math.abs(f - quando - 3) / 5 : 0;
+  const anel = seg(f, quando, quando + 18);
+  const tam = caber(texto, 66, 600, 800, -0.02, 'CE Unbounded');
+  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `translateY(${-sai * 140}px)`}}>
+    {f >= quando && <div style={{position: 'absolute', left: 100 - anel * 80, top: y - 100 - anel * 80, width: 880 + anel * 160, height: 200 + anel * 160, borderRadius: 100 + anel * 80, border: `${10 * (1 - anel)}px solid ${COR.lima}`, boxSizing: 'border-box', opacity: 1 - anel}} />}
+    <div style={{position: 'absolute', left: 100, top: y - 100, width: 880, height: 200, borderRadius: 100, background: COR.coral, boxShadow: '0 28px 0 #B8442A, 0 60px 60px rgba(0,0,0,.35)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 40px 0 68px', boxSizing: 'border-box', transform: `translateY(${(1 - t) * 900 + aperta * 14}px) scale(${(0.85 + 0.15 * t) * (1 - aperta * 0.03) * (1 + 0.012 * Math.sin(f / 5))})`}}>
+      <div style={{fontFamily: FONTE, fontWeight: 800, fontSize: tam, color: COR.creme, letterSpacing: '-0.02em', whiteSpace: 'nowrap'}}>{texto}</div>
+      <div style={{width: 120, height: 120, borderRadius: 60, background: COR.creme, display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none', transform: `translateX(${Math.sin(f / 5) * 6}px)`}}>
+        <svg width={64} height={50} viewBox="0 0 64 50"><path d="M4 25 H54 M34 5 L56 25 L34 45" stroke={COR.coral} strokeWidth={9} fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
+      </div>
+    </div>
+    <div style={{position: 'absolute', left: 0, width: 1080, top: y + 190, textAlign: 'center', fontFamily: FONTE, fontWeight: 600, fontSize: 52, letterSpacing: '0.04em', color: COR.lima, opacity: seg(f, inicio + 14, inicio + 26), transform: `translateY(${(1 - ov(seg(f, inicio + 14, inicio + 30))) * 50}px)`}}>{endereco}</div>
+  </div>;
+};

package/kits/convite-evento/elementos/Camera.tsx

@@ -0,0 +1,21 @@
+// Camera: deriva constante por baixo de tudo (zoom, deslize e giro mínimos) e um soco em cada batida.
+// O quadro nunca fica parado. `batidas` são quadros absolutos do vídeo.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+
+export type CameraProps = {batidas?: number[]; forca?: number; children: React.ReactNode};
+
+export const posCamera = (f: number, batidas: number[], forca = 1) => {
+  let z = 1.02 + 0.012 * Math.sin(f / 120) + f * 0.00012, dx = Math.sin(f / 37) * 10, dy = Math.cos(f / 51) * 10;
+  const rot = Math.sin(f / 83) * 0.005;
+  for (const h of batidas) if (f >= h) {
+    const d = Math.exp(-(f - h) / 7) * forca;
+    z += 0.03 * d; dx += 7 * d * Math.sin((f - h) * 2.7 + h); dy += 7 * d * Math.cos((f - h) * 3.3 + h);
+  }
+  return {z, dx, dy, rot};
+};
+
+export const Camera: React.FC<CameraProps> = ({batidas = [], forca = 1, children}) => {
+  const c = posCamera(useCurrentFrame(), batidas, forca);
+  return <AbsoluteFill style={{transform: `translate(${c.dx}px, ${c.dy}px) rotate(${c.rot}rad) scale(${c.z})`, transformOrigin: '50% 44%'}}>{children}</AbsoluteFill>;
+};

package/kits/convite-evento/elementos/Cena.tsx

@@ -0,0 +1,39 @@
+// Cena: janela de tempo de um plano (troca "revelar"). Dentro dela, useCurrentFrame() começa em 0.
+// A saída da cena cruza 14 quadros com a entrada da próxima.
+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 = 14; // 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 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 : e5(seg(f, duracao, duracao + SOBREPOE));
+  const base = {transform: `scale(${1 - xo * 0.05})`, opacity: 1 - xo * 0.6} as React.CSSProperties;
+  if (p >= 1) return base;
+  if (entrada === 'cortina') return {...base, clipPath: `polygon(0 0, ${p * 140 - 20}% 0, ${p * 140 - 40}% 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) scale(${1 - xo * 0.05})`, 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/convite-evento/elementos/DataGigante.tsx

@@ -0,0 +1,37 @@
+// DataGigante: o dia em número enorme (Unbounded 900, lima) que gira em X ao pousar, o mês em itálico serifado por baixo
+// e uma linha de apoio ("SÁBADO · 14H"). É o herói da cena de data: o número ocupa mais de 40% da altura útil.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA, SERIFA, caber, e5, ov, seg} from './base';
+
+export type DataGiganteProps = {
+  /** o dia, ex.: "12" */
+  dia: string;
+  /** o mês por extenso, ex.: "março" */
+  mes: string;
+  /** linha de apoio, ex.: "SÁBADO · 14H" */
+  apoio: string;
+  inicio?: number;
+  /** centro vertical do número, px */
+  y: number;
+  tamanho?: number;
+  fim?: number;
+};
+
+export const DataGigante: React.FC<DataGiganteProps> = ({dia, mes, apoio, inicio = 0, y, tamanho = 640, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1 || f > fim + 12) return null;
+  const tam = caber(dia, tamanho, 860, 900, -0.05, 'CE Unbounded'), sai = e5(seg(f, fim, fim + 10));
+  const letras = dia.split('');
+  const mesT = ov(seg(f, inicio + 12, inicio + 28)), apoioT = ov(seg(f, inicio + 20, inicio + 34));
+  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `translateY(${-sai * 160}px)`}}>
+    <div style={{position: 'absolute', left: 0, width: LARGURA, top: y - tam * 0.58, height: tam * 1.16, display: 'flex', justifyContent: 'center', perspective: 1600}}>
+      {letras.map((c, i) => {
+        const t = ov(seg(f, inicio + i * 5, inicio + i * 5 + 18));
+        return <div key={i} style={{fontFamily: FONTE, fontWeight: 900, fontSize: tam, lineHeight: `${tam * 1.16}px`, color: COR.lima, letterSpacing: '-0.05em', transform: `rotateX(${(1 - t) * -95}deg) translateY(${(1 - t) * -200}px) scale(${0.8 + 0.2 * t})`, transformOrigin: '50% 100%', opacity: Math.min(1, t * 3), textShadow: `0 ${18 * t}px 0 rgba(0,0,0,0.22)`}}>{c}</div>;
+      })}
+    </div>
+    <div style={{position: 'absolute', left: 0, width: LARGURA, top: y + tam * 0.5 + 10, textAlign: 'center', fontFamily: SERIFA, fontStyle: 'italic', fontWeight: 400, fontSize: 210, lineHeight: 1.05, color: COR.creme, transform: `translateY(${(1 - mesT) * 120}px)`, opacity: Math.min(1, mesT * 2)}}>{mes}</div>
+    <div style={{position: 'absolute', left: 0, width: LARGURA, top: y + tam * 0.5 + 270, textAlign: 'center', fontFamily: FONTE, fontWeight: 600, fontSize: 52, letterSpacing: '0.18em', color: COR.creme, opacity: Math.min(1, apoioT * 2) * 0.85, transform: `translateY(${(1 - apoioT) * 60}px)`}}>{apoio}</div>
+  </div>;
+};

package/kits/convite-evento/elementos/Fundo.tsx

@@ -0,0 +1,30 @@
+// Fundo: verde-floresta com raios de sol (sunburst) saindo de baixo, girando devagar numa tonalidade um pouco mais clara.
+// Fica FORA da Camera; quem se mexe é o que está em cima.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {COR} from './base';
+
+export type FundoProps = {
+  /** cor do chão */
+  cor?: string;
+  /** cor dos raios */
+  raios?: string;
+  /** velocidade do giro (1 = a do preview) */
+  velocidade?: number;
+};
+
+export const Fundo: React.FC<FundoProps> = ({cor = COR.floresta, raios = COR.florestaClara, velocidade = 1}) => {
+  const f = useCurrentFrame() * velocidade;
+  const n = 14, fatia = 360 / n;
+  return <AbsoluteFill style={{background: cor}}>
+    <svg width={1080} height={1920} style={{position: 'absolute', inset: 0}}>
+      <g transform={`translate(540 1500) rotate(${f * 0.22})`}>
+        {Array.from({length: n}, (_, i) => {
+          const a0 = (i * fatia * Math.PI) / 180, a1 = ((i * fatia + fatia / 2) * Math.PI) / 180, R = 2600;
+          return <path key={i} d={`M0 0 L${Math.cos(a0) * R} ${Math.sin(a0) * R} L${Math.cos(a1) * R} ${Math.sin(a1) * R} Z`} fill={raios} />;
+        })}
+      </g>
+    </svg>
+    <AbsoluteFill style={{background: `radial-gradient(70% 36% at 50% 82%, rgba(232,255,90,0.16), transparent 70%), linear-gradient(180deg, rgba(12,59,44,0.55), transparent 40%)`}} />
+  </AbsoluteFill>;
+};

package/kits/convite-evento/elementos/IngressoBilhete.tsx

@@ -0,0 +1,40 @@
+// IngressoBilhete: o ingresso de papel creme, com entalhes nas laterais, linha tracejada e canhoto com código de barras.
+// Entra de baixo girando em X (3D), fica inclinado e boiando. Nome do evento, lugar e horário vêm por props.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, SERIFA, caber, e5, ov, seg} from './base';
+
+export type IngressoBilheteProps = {
+  nome: string;
+  lugar: string;
+  /** texto do canhoto, ex.: "SÁB 12/03 · 14H–22H" */
+  quando: string;
+  rotulo?: string;
+  inicio?: number;
+  /** centro vertical, px */
+  y: number;
+  fim?: number;
+};
+
+const L = 880, A = 700, CORTE = 470, R = 44;
+const caminho = `M0 0 H${L} V${CORTE - R} A${R} ${R} 0 0 0 ${L} ${CORTE + R} V${A} H0 V${CORTE + R} A${R} ${R} 0 0 0 0 ${CORTE - R} Z`;
+
+export const IngressoBilhete: React.FC<IngressoBilheteProps> = ({nome, lugar, quando, rotulo = 'INGRESSO', inicio = 0, y, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1 || f > fim + 12) return null;
+  const t = ov(seg(f, inicio, inicio + 20)), sai = e5(seg(f, fim, fim + 10));
+  const tamNome = caber(nome.toUpperCase(), 108, 760, 900, -0.03, 'CE Unbounded');
+  const barras = Array.from({length: 38}, (_, i) => 3 + ((i * 7 + 3) % 5) * 3);
+  return <div style={{position: 'absolute', left: 100, top: y - A / 2, width: L, height: A, perspective: 1800, transform: `translateY(${-sai * 1000}px)`}}>
+    <div style={{width: L, height: A, transform: `translateY(${(1 - t) * 1200}px) rotateX(${(1 - t) * 70}deg) rotateZ(${-5 + Math.sin(f / 22) * 1.2}deg) rotateY(${Math.sin(f / 30) * 4}deg)`, filter: 'drop-shadow(0 50px 50px rgba(0,0,0,0.38))', position: 'relative'}}>
+      <svg width={L} height={A} style={{position: 'absolute', inset: 0}}><path d={caminho} fill={COR.creme} /><line x1={60} y1={CORTE} x2={L - 60} y2={CORTE} stroke={COR.floresta} strokeWidth={5} strokeDasharray="4 16" strokeLinecap="round" opacity={0.5} /></svg>
+      <div style={{position: 'absolute', left: 64, top: 52, fontFamily: FONTE, fontWeight: 600, fontSize: 30, letterSpacing: '0.3em', color: COR.coral}}>{rotulo}</div>
+      <div style={{position: 'absolute', left: 64, top: 112, width: 760, fontFamily: FONTE, fontWeight: 900, fontSize: tamNome, lineHeight: 1.08, color: COR.floresta, letterSpacing: '-0.03em', textTransform: 'uppercase', whiteSpace: 'nowrap'}}>{nome}</div>
+      <div style={{position: 'absolute', left: 64, top: 112 + tamNome * 1.2 + 24, fontFamily: SERIFA, fontStyle: 'italic', fontSize: 84, lineHeight: 1.05, color: COR.floresta}}>{lugar}</div>
+      <div style={{position: 'absolute', left: 64, top: CORTE + 52, fontFamily: FONTE, fontWeight: 800, fontSize: 40, letterSpacing: '0.04em', color: COR.floresta}}>{quando}</div>
+      <div style={{position: 'absolute', left: 64, top: CORTE + 120, display: 'flex', alignItems: 'flex-end', gap: 6, height: 70}}>
+        {barras.map((w, i) => <div key={i} style={{width: w, height: 70, background: COR.floresta}} />)}
+      </div>
+    </div>
+  </div>;
+};

package/kits/convite-evento/elementos/LugarGigante.tsx

@@ -0,0 +1,38 @@
+// LugarGigante: o lugar como herói. Um pino coral cai de cima e quica (overshoot), o nome do lugar em Unbounded 900 lima
+// aparece em até 2 linhas e o endereço em itálico serifado fecha. Poucas peças, muito ar.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA, SERIFA, caber, e5, ov, seg, textoLimpo} from './base';
+
+export type LugarGiganteProps = {
+  linhas: string[];
+  endereco: string;
+  inicio?: number;
+  /** centro vertical do nome, px */
+  y: number;
+  tamanho?: number;
+  fim?: number;
+};
+
+export const LugarGigante: React.FC<LugarGiganteProps> = ({linhas, endereco, inicio = 0, y, tamanho = 170, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1 || f > fim + 12) return null;
+  const tam = Math.min(...linhas.map((l) => caber(textoLimpo(l).toUpperCase(), tamanho, 880, 900, -0.03, 'CE Unbounded')));
+  const alt = tam * 1.12, topo = y - (linhas.length * alt) / 2, sai = e5(seg(f, fim, fim + 10));
+  const pino = ov(seg(f, inicio, inicio + 18));
+  const sombra = e5(seg(f, inicio + 8, inicio + 18));
+  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `translateY(${-sai * 140}px)`}}>
+    <div style={{position: 'absolute', left: 540 - 24 * sombra * 3, top: topo - 120, width: 144 * sombra, height: 24, borderRadius: 12, background: 'rgba(0,0,0,0.25)'}} />
+    <svg width={190} height={250} viewBox="0 0 76 100" style={{position: 'absolute', left: 540 - 95, top: topo - 270 + (1 - pino) * -900}}>
+      <path d="M38 98 C 38 98, 4 58, 4 36 A 34 34 0 0 1 72 36 C 72 58, 38 98, 38 98 Z" fill={COR.coral} />
+      <circle cx={38} cy={36} r={14} fill={COR.creme} />
+    </svg>
+    {linhas.map((l, i) => {
+      const p = ov(seg(f, inicio + 12 + i * 6, inicio + 28 + i * 6));
+      return <div key={i} style={{position: 'absolute', left: 0, width: LARGURA, top: topo + i * alt, height: alt, overflow: 'hidden', textAlign: 'center'}}>
+        <div style={{transform: `translateY(${(1 - p) * 115}%)`, fontFamily: FONTE, fontWeight: 900, fontSize: tam, lineHeight: `${alt}px`, textTransform: 'uppercase', color: COR.lima, letterSpacing: '-0.03em', whiteSpace: 'nowrap'}}>{l}</div>
+      </div>;
+    })}
+    <div style={{position: 'absolute', left: 0, width: LARGURA, top: topo + linhas.length * alt + 30, textAlign: 'center', fontFamily: SERIFA, fontStyle: 'italic', fontSize: 76, color: COR.creme, opacity: seg(f, inicio + 26, inicio + 38), transform: `translateY(${(1 - ov(seg(f, inicio + 26, inicio + 42))) * 60}px)`}}>{endereco}</div>
+  </div>;
+};

package/kits/convite-evento/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 {COR} from './base';
+import {Fundo} from './Fundo';
+import {Camera} from './Camera';
+import {Cena, Entrada} from './Cena';
+import {Efeito, NomeSom, Trilha} from './Som';
+import {TituloEvento} from './TituloEvento';
+import {DataGigante} from './DataGigante';
+import {LugarGigante} from './LugarGigante';
+import {IngressoBilhete} from './IngressoBilhete';
+import {SeloRotativo} from './SeloRotativo';
+import {BotaoInscricao} from './BotaoInscricao';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {
+  TituloEvento, DataGigante, LugarGigante, IngressoBilhete, SeloRotativo, BotaoInscricao,
+};
+
+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.floresta}}>
+    <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(`convite-evento: 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/convite-evento/elementos/SeloRotativo.tsx

@@ -0,0 +1,32 @@
+// SeloRotativo: adesivo redondo lima com o texto girando em volta e uma estrela no meio. Estoura com overshoot e gira sem
+// parar. É o único apoio permitido ao lado de um herói (use tamanho 280–340).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, e5, ov, pontosEstrelaSelo, seg} from './base';
+
+export type SeloRotativoProps = {
+  /** texto que roda em volta (repete sozinho) */
+  texto: string;
+  inicio?: number;
+  /** centro, px */
+  x?: number;
+  y?: number;
+  tamanho?: number;
+  fim?: number;
+};
+
+export const SeloRotativo: React.FC<SeloRotativoProps> = ({texto, inicio = 0, x = 820, y = 340, tamanho = 300, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1 || f > fim + 12) return null;
+  const t = ov(seg(f, inicio, inicio + 16)), sai = e5(seg(f, fim, fim + 10));
+  const unidade = `${texto.toUpperCase()} • `;
+  const anel = unidade.repeat(Math.max(1, Math.round(30 / unidade.length)));
+  return <div style={{position: 'absolute', left: x - tamanho / 2, top: y - tamanho / 2, width: tamanho, height: tamanho, transform: `scale(${Math.max(0, t) * (1 - sai)}) rotate(${(1 - t) * 160}deg)`}}>
+    <svg width={tamanho} height={tamanho} viewBox="0 0 300 300">
+      <circle cx={150} cy={150} r={146} fill={COR.lima} />
+      <defs><path id="ce-anel" d="M 150 150 m -112 0 a 112 112 0 1 1 224 0 a 112 112 0 1 1 -224 0" /></defs>
+      <g transform={`rotate(${f * 2.4} 150 150)`}><text fontFamily={FONTE} fontWeight={700} fontSize={25} fill={COR.floresta}><textPath href="#ce-anel" textLength={700} lengthAdjust="spacing">{anel}</textPath></text></g>
+      <g transform={`translate(150 150) rotate(${-f * 1.2})`}><polygon points={pontosEstrelaSelo(52)} fill={COR.floresta} /></g>
+    </svg>
+  </div>;
+};

package/kits/convite-evento/elementos/Som.tsx

@@ -0,0 +1,40 @@
+// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`, pacote soft-pop); trilha de 8.6 s
+// (MotionCraft `music make`, preset warm-major, 112 bpm, tom D (energia alta)). 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 confete from '../assets/sons/confete.mp3';
+import trilha from '../assets/trilha/festa-112bpm.mp3';
+
+export const SONS = {
+  'whoosh-entra': whooshEntra, 'whoosh-sai': whooshSai, swoosh, 'pop-palavra': popPalavra, 'pop-cartao': popCartao, clique, impacto, subida, assinatura, confete,
+} 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.9, subida: 0.7, assinatura: 0.85, confete: 0.7,
+};
+
+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/convite-evento/elementos/TituloEvento.tsx

@@ -0,0 +1,33 @@
+// TituloEvento: o nome do evento em Unbounded 900 gigante, caixa alta, uma linha por vez subindo de dentro de uma máscara
+// com overshoot e leve giro. `*palavra*` fica lima; o resto, creme. Herói do gancho.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA, caber, e5, ov, partes, seg, textoLimpo} from './base';
+
+export type TituloEventoProps = {
+  linhas: string[];
+  inicio?: number;
+  /** quadros entre linhas */
+  intervalo?: number;
+  /** centro vertical do bloco, px */
+  y: number;
+  tamanho?: number;
+  fim?: number;
+};
+
+export const TituloEvento: React.FC<TituloEventoProps> = ({linhas, inicio = 0, intervalo = 6, y, tamanho = 200, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1 || f > fim + 12) return null;
+  const tam = Math.min(...linhas.map((l) => caber(textoLimpo(l).toUpperCase(), tamanho, 880, 900, -0.03, 'CE Unbounded')));
+  const alt = tam * 1.12, topo = y - (linhas.length * alt) / 2, sai = e5(seg(f, fim, fim + 10));
+  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `translateY(${-sai * 140}px)`}}>
+    {linhas.map((l, i) => {
+      const p = ov(seg(f, inicio + i * intervalo, inicio + i * intervalo + 16));
+      return <div key={i} style={{position: 'absolute', left: 0, width: LARGURA, top: topo + i * alt, height: alt, overflow: 'hidden', textAlign: 'center'}}>
+        <div style={{transform: `translateY(${(1 - p) * 115}%) rotate(${(1 - p) * (i % 2 ? 5 : -5)}deg)`, fontFamily: FONTE, fontWeight: 900, fontSize: tam, lineHeight: `${alt}px`, textTransform: 'uppercase', letterSpacing: '-0.03em', whiteSpace: 'nowrap'}}>
+          {partes(l).map((s, k) => <span key={k} style={{color: s.d ? COR.lima : COR.creme}}>{s.t}</span>)}
+        </div>
+      </div>;
+    })}
+  </div>;
+};

package/kits/convite-evento/elementos/base.ts

@@ -0,0 +1,82 @@
+// Base do kit convite-evento: 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/unbounded.woff2';
+import fonte1Url from '../assets/fontes/instrumentserif-i.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 = {
+  floresta: '#0C3B2C',
+  florestaClara: '#14523D',
+  lima: '#E8FF5A',
+  creme: '#FFF6E5',
+  coral: '#FF6B4A'
+};
+
+
+// ---------- fonte ----------
+// Nome de família com o prefixo do kit, pra não colidir com outro kit no mesmo estúdio.
+export const FONTE = "\"CE Unbounded\", system-ui, sans-serif";
+export const SERIFA = "\"CE Instrument Serif\", Georgia, serif";
+const fontes = [
+  {nome: 'CE Unbounded', url: fonte0Url, peso: '500 900', estilo: 'normal'},
+  {nome: 'CE Instrument Serif', url: fonte1Url, peso: '400', estilo: 'italic'},
+];
+if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__conviteevento) {
+  (globalThis as Record<string, unknown>).__conviteevento = true;
+  for (const f of fontes) {
+    const h = delayRender('convite-evento: ' + 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 (112 bpm) em quadros */
+export const BATIDA = 16.1;
+
+// ---------- 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 = 900, trackingEm = -0.03, familia = 'CE Unbounded'): 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 = 900, trackingEm = -0.03, familia = 'CE Unbounded') => {
+  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});
+
+
+/** pontos de uma estrela de 8 pontas (selo) com raio r */
+export const pontosEstrelaSelo = (r: number) => Array.from({length: 16}, (_, i) => { const a = (i * Math.PI) / 8, k = i % 2 ? 0.55 : 1; return `${(Math.cos(a) * r * k).toFixed(1)},${(Math.sin(a) * r * k).toFixed(1)}`; }).join(' ');

package/kits/convite-evento/elementos/index.ts

@@ -0,0 +1,15 @@
+// Tudo que o kit convite-evento 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 {TituloEvento} from './TituloEvento';
+export {DataGigante} from './DataGigante';
+export {LugarGigante} from './LugarGigante';
+export {IngressoBilhete} from './IngressoBilhete';
+export {SeloRotativo} from './SeloRotativo';
+export {BotaoInscricao} from './BotaoInscricao';
+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/convite-evento/exemplos/plano.json

@@ -0,0 +1,49 @@
+{
+  "kit": "convite-evento",
+  "roteiro": "exemplos/roteiro.md",
+  "duracao": 240,
+  "trilha": {"volume": 0.5},
+  "cenas": [
+    {
+      "batida": "gancho", "de": 0, "ate": 44, "entrada": "nenhuma",
+      "camadas": [
+        {"elemento": "TituloEvento", "props": {"linhas": ["Festival", "*Brisa*"], "inicio": 2, "intervalo": 7, "y": 860, "tamanho": 210}},
+        {"elemento": "SeloRotativo", "props": {"texto": "Entrada grátis", "inicio": 18, "x": 800, "y": 330, "tamanho": 300}}
+      ],
+      "socos": [16],
+      "sons": [{"som": "whoosh-entra", "em": 0}, {"som": "impacto", "em": 15}, {"som": "pop-cartao", "em": 20}]
+    },
+    {
+      "batida": "data", "de": 44, "ate": 94, "entrada": "cortina",
+      "camadas": [
+        {"elemento": "DataGigante", "props": {"dia": "12", "mes": "março", "apoio": "SÁBADO · 14H", "inicio": 2, "y": 700, "tamanho": 600}}
+      ],
+      "socos": [18],
+      "sons": [{"som": "swoosh", "em": -1}, {"som": "pop-palavra", "em": 6}, {"som": "impacto", "em": 18}, {"som": "pop-cartao", "em": 30}]
+    },
+    {
+      "batida": "lugar", "de": 94, "ate": 144, "entrada": "circulo",
+      "camadas": [
+        {"elemento": "LugarGigante", "props": {"linhas": ["Parque", "da Lagoa"], "endereco": "Av. das Flores, 500", "inicio": 2, "y": 800, "tamanho": 190}}
+      ],
+      "socos": [14],
+      "sons": [{"som": "whoosh-entra", "em": -1}, {"som": "pop-cartao", "em": 12}, {"som": "pop-palavra", "em": 24}, {"som": "clique", "em": 34}]
+    },
+    {
+      "batida": "ingresso", "de": 144, "ate": 194, "entrada": "baixo",
+      "camadas": [
+        {"elemento": "IngressoBilhete", "props": {"nome": "Brisa", "lugar": "Parque da Lagoa", "quando": "SÁB 12/03 · 14H–22H", "inicio": 2, "y": 780}}
+      ],
+      "socos": [20],
+      "sons": [{"som": "swoosh", "em": -1}, {"som": "impacto", "em": 18}, {"som": "clique", "em": 34}]
+    },
+    {
+      "batida": "cta", "de": 194, "ate": 240, "entrada": "cortina",
+      "camadas": [
+        {"elemento": "BotaoInscricao", "props": {"texto": "Garanta sua vaga", "endereco": "brisa.exemplo", "inicio": 2, "clica": 24, "y": 760}}
+      ],
+      "socos": [24],
+      "sons": [{"som": "whoosh-entra", "em": -1}, {"som": "pop-cartao", "em": 8}, {"som": "clique", "em": 24}, {"som": "confete", "em": 25}, {"som": "assinatura", "em": 26}]
+    }
+  ]
+}

package/kits/convite-evento/exemplos/roteiro.md

@@ -0,0 +1,19 @@
+# Roteiro de demonstração · "Festival Brisa" (evento fictício)
+
+Pedido: *"um convite de 8 s pro Festival Brisa, dia 12 de março, sábado às 14h, no Parque da Lagoa (Av. das Flores, 500), entrada grátis, com chamada pra garantir a vaga em brisa.exemplo."*
+
+Sem narração: os cortes seguem a trilha (1 batida = 16,1 quadros).
+
+| # | batida | quadros | na tela | elemento | som |
+|---|---|---|---|---|---|
+| 1 | gancho | 0–44 | "FESTIVAL / *BRISA*" + selo "Entrada grátis" | TituloEvento, SeloRotativo | whoosh, impacto, pop |
+| 2 | data | 44–94 | "12" gigante, "março", "SÁBADO · 14H" | DataGigante | swoosh, pops, impacto |
+| 3 | lugar | 94–144 | pino + "PARQUE / DA LAGOA" + "Av. das Flores, 500" | LugarGigante | whoosh, pops, clique |
+| 4 | ingresso | 144–194 | ingresso "BRISA" com lugar e horário | IngressoBilhete | swoosh, impacto, clique |
+| 5 | cta | 194–240 | botão "Garanta sua vaga" + "brisa.exemplo" | BotaoInscricao | whoosh, pop, clique, confete, assinatura |
+
+Como a IA chegou nisso:
+1. Pôs uma informação por cena (nome, quando, onde, objeto, ação) e deu a cada uma um herói só.
+2. Deixou o selo como único apoio (gancho) e 15–24 quadros de pausa depois de cada impacto.
+3. Variou a troca de cena (nenhuma, cortina, círculo, baixo, cortina) e cortou nas batidas (0, 44, 94, 144, 194).
+4. O `preview.tsx` passa o plano para `Montagem`, que só usa os elementos do kit.

package/kits/convite-evento/preview.tsx

@@ -0,0 +1,9 @@
+// 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-convite-evento`.
+import React from 'react';
+import {Montagem, Plano} from './elementos';
+import plano from './exemplos/plano.json';
+
+const Preview: React.FC = () => <Montagem plano={plano as Plano} />;
+
+export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 84, Componente: Preview};

package/kits/convite-evento/receita.json

@@ -0,0 +1,21 @@
+{
+  "kit": "convite-evento", "fps": 30, "batida_trilha_quadros": 16.1,
+  "duracao_video_s": [6, 30],
+  "ordem_sugerida": ["gancho", "data", "lugar", "ingresso", "cta"],
+  "batidas": [
+    {"nome": "gancho", "obrigatoria": true, "duracao": [40, 48], "elementos": ["TituloEvento", "SeloRotativo"], "entrada": ["nenhuma"], "sons": ["whoosh-entra", "impacto", "pop-cartao"], "nota": "nome do evento em 1–2 linhas; o selo ('entrada grátis') é o único apoio e entra depois do impacto."},
+    {"nome": "data", "obrigatoria": true, "duracao": [46, 54], "elementos": ["DataGigante"], "entrada": ["cortina"], "sons": ["swoosh", "pop-palavra", "impacto", "pop-cartao"], "nota": "o dia gira em X; mês e hora entram depois. Pausa de 20 quadros."},
+    {"nome": "lugar", "obrigatoria": true, "duracao": [46, 54], "elementos": ["LugarGigante"], "entrada": ["circulo"], "sons": ["whoosh-entra", "pop-cartao", "pop-palavra", "clique"], "nota": "pino cai, nome do lugar em até 2 linhas, endereço em itálico."},
+    {"nome": "ingresso", "obrigatoria": false, "duracao": [46, 54], "elementos": ["IngressoBilhete"], "entrada": ["baixo"], "sons": ["swoosh", "impacto", "clique"], "nota": "resume nome, lugar e horário em um objeto; use quando houver venda de ingresso."},
+    {"nome": "cta", "obrigatoria": true, "duracao": [46, 72], "elementos": ["BotaoInscricao"], "entrada": ["cortina"], "sons": ["whoosh-entra", "pop-cartao", "clique", "confete", "assinatura"], "nota": "sempre a última: botão que aperta no quadro 24 + endereço do site."}
+  ],
+  "transicoes": [
+    {"nome": "cortina", "quadros": 14, "como": "faixa diagonal que varre da esquerda revelando a cena nova"},
+    {"nome": "baixo", "quadros": 14, "como": "revela de baixo pra cima"},
+    {"nome": "circulo", "quadros": 14, "como": "círculo que cresce de 0 a 150% a partir de (50%, 55%)"},
+    {"nome": "flip", "quadros": 14, "como": "gira em X de −80° a 0° pelo topo"},
+    {"nome": "nenhuma", "quadros": 0, "como": "só no gancho"}
+  ],
+  "camera": {"deriva": "sempre", "socos": "o impacto de cada cena (um por cena)"},
+  "trilha": {"arquivo": "assets/trilha/festa-112bpm.mp3", "volume": 0.5, "com_narracao": 0.25}
+}