primocode 10.17.1 → 10.19.0

package/kits/neon-cidade/elementos/CaixaLuminosa.tsx

@@ -0,0 +1,40 @@
+// CaixaLuminosa: placa pendurada por duas correntes, que balança como pêndulo (±5°, amortecido de 18° na chegada).
+// A face é uma caixa escura com moldura de metal e o texto em neon aceso por dentro. Chega de cima com overshoot.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FAM_A, FONTE_A, FONTE_B, FAM_B, acende, brilho, caber, ob, seg} from './base';
+
+export type CaixaLuminosaProps = {
+  linhas: string[];
+  /** linha pequena em Barlow, sem brilho */
+  detalhe?: string;
+  cor?: string;
+  /** y do topo (onde as correntes prendem) */
+  topo?: number;
+  largura?: number;
+  tamanho?: number;
+  inicio?: number;
+};
+
+export const CaixaLuminosa: React.FC<CaixaLuminosaProps> = ({linhas, detalhe, cor = COR.rosa, topo = 230, largura = 800, tamanho = 170, inicio = 0}) => {
+  const f = useCurrentFrame() - inicio;
+  if (f < -1) return null;
+  const tam = Math.min(...linhas.map((l) => caber(l, tamanho, FAM_A, largura - 140, 400, 0.04)));
+  const altura = tam * 1.2 * linhas.length + 150 + (detalhe ? 90 : 0), queda = ob(seg(f, 0, 16), 1.5);
+  const ang = (18 * Math.exp(-Math.max(0, f) / 26) + 5) * Math.sin(Math.max(0, f) / 11) * (1 - 0.1 * 0);
+  const cord = 150;
+  let n = 0;
+  return <div style={{position: 'absolute', left: 540, top: topo, width: 0, height: 0, transform: `translateY(${(1 - queda) * -700}px) rotate(${ang}deg)`, transformOrigin: '0 0'}}>
+    {[-largura * 0.32, largura * 0.32].map((dx, i) => <div key={i} style={{position: 'absolute', left: dx, top: 0, width: 4, height: cord, background: 'repeating-linear-gradient(180deg, #8d8aa8 0 10px, #4b4864 10px 16px)'}} />)}
+    <div style={{position: 'absolute', left: -largura / 2, top: cord, width: largura, height: altura, background: '#0d0b17', border: '10px solid #3b3852', borderRadius: 26, boxSizing: 'border-box', boxShadow: `0 0 0 3px ${cor}66 inset`, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
+      {linhas.map((l, li) => <div key={li} style={{fontFamily: FONTE_A, fontSize: tam, lineHeight: 1.2, letterSpacing: '0.04em', whiteSpace: 'pre', display: 'flex'}}>
+        {l.split('').map((ch, ci) => {
+          const k = acende(f, 8 + n++ * 3, n), aceso = k > 0.5;
+          return <span key={ci} style={{color: aceso ? COR.branco : `${cor}2e`, textShadow: aceso ? brilho(cor, k * 0.7) : 'none', opacity: aceso ? k : 1}}>{ch}</span>;
+        })}
+      </div>)}
+      {detalhe && <div style={{fontFamily: FONTE_B, fontWeight: 600, fontSize: caber(detalhe, 62, FAM_B, largura - 160, 600, 0.08), letterSpacing: '0.08em', color: COR.gelo, marginTop: 16, opacity: seg(f, 24, 34)}}>{detalhe}</div>}
+    </div>
+    {[-largura / 2 + 36, largura / 2 - 36].map((dx, i) => <div key={i} style={{position: 'absolute', left: dx - 9, top: cord - 10, width: 18, height: 18, borderRadius: 9, background: '#8d8aa8'}} />)}
+  </div>;
+};

package/kits/neon-cidade/elementos/Camera.tsx

@@ -0,0 +1,22 @@
+// Camera: deriva constante por baixo de tudo (zoom, deslize e giro) 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 / 110) + f * 0.00022, dx = Math.sin(f / 37) * 12, dy = Math.cos(f / 51) * 9;
+  let rot = Math.sin(f / 83) * 0.004;
+  for (const h of batidas) if (f >= h) {
+    const d = Math.exp(-(f - h) / 8) * forca;
+    z += 0.025 * d; dx += 4 * d * Math.sin((f - h) * 2.7 + h); dy += 4 * d * Math.cos((f - h) * 3.3 + h);
+    rot += 0.002 * d * Math.sin((f - h) * 1.9 + 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% 42%'}}>{children}</AbsoluteFill>;
+};

package/kits/neon-cidade/elementos/Cena.tsx

@@ -0,0 +1,48 @@
+// Cena: janela de tempo de um plano. Entra com movimento (nunca corte seco) e a saída cruza 10 quadros
+// com a entrada da próxima. Dentro dela, useCurrentFrame() começa em 0.
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {c01, e5, ob, seg} from './base';
+
+export type Entrada = 'subir' | 'zoom' | 'direita' | 'esquerda' | 'giro' | 'queda' | 'circulo' | 'nenhuma';
+export type Saida = 'sobe' | 'esquerda' | 'zoom' | 'gira' | 'encolhe';
+export const SOBREPOE = 10; // quadros em que a saída desta cena cruza a entrada da próxima
+export const QUADROS_ENTRADA = 12;
+
+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; saida?: Saida; ultima?: boolean; children: React.ReactNode};
+
+const Janela: React.FC<{duracao: number; entrada: Entrada; saida: Saida; ultima: boolean; children: React.ReactNode}> = ({duracao, entrada, saida, ultima, children}) => {
+  const f = useCurrentFrame();
+  const p = seg(f, 0, QUADROS_ENTRADA);
+  const en = entrada === 'nenhuma' ? 0 : 1 - ob(p, 1.2);
+  const xo = ultima ? 0 : e5(seg(f, duracao, duracao + SOBREPOE));
+  let tf = '';
+  let clip: string | undefined;
+  if (entrada === 'subir') tf += `translateY(${en * 300}px) `;
+  if (entrada === 'queda') tf += `translateY(${-en * 520}px) `;
+  if (entrada === 'zoom') tf += `scale(${1 + en * 0.9}) `;
+  if (entrada === 'direita') tf += `translateX(${en * 800}px) `;
+  if (entrada === 'esquerda') tf += `translateX(${-en * 800}px) `;
+  if (entrada === 'giro') tf += `rotate(${-en * 16}deg) scale(${1 + en * 0.6}) `;
+  if (entrada === 'circulo') clip = `circle(${e5(p) * 1700 + 4}px at 50% 52%)`;
+  if (saida === 'sobe') tf += `translateY(${-xo * 240}px) scale(${1 + xo * 0.08})`;
+  if (saida === 'esquerda') tf += `translateX(${-xo * 820}px) rotate(${-xo * 4}deg)`;
+  if (saida === 'zoom') tf += `scale(${1 + xo * 0.9})`;
+  if (saida === 'gira') tf += `rotate(${xo * 12}deg) scale(${1 - xo * 0.25}) translateY(${xo * 300}px)`;
+  if (saida === 'encolhe') tf += `scale(${1 - xo * 0.35})`;
+  const blur = c01(en) * 8 + xo * 8;
+  return <AbsoluteFill style={{transform: tf, clipPath: clip, opacity: (1 - c01(en) * 0.85) * (1 - xo), filter: blur > 0.3 ? `blur(${blur}px)` : undefined}}>{children}</AbsoluteFill>;
+};
+
+export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'subir', saida = 'zoom', 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} saida={saida} ultima={ultima}>{children}</Janela>
+    </CenaCtx.Provider>
+  </Sequence>;
+};

package/kits/neon-cidade/elementos/Chuva.tsx

@@ -0,0 +1,23 @@
+// Chuva: 70 riscos finos a 14° da vertical, caindo a 38 px/quadro, com comprimento de 60 a 150 px e opacidade variada.
+// É ambiente: cai por trás do herói e nunca para.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {ALTURA, LARGURA, rnd} from './base';
+
+export type ChuvaProps = {
+  quantidade?: number;
+  cor?: string;
+  /** 0..1 */
+  forca?: number;
+};
+
+export const Chuva: React.FC<ChuvaProps> = ({quantidade = 70, cor = '#C9C2E0', forca = 0.5}) => {
+  const f = useCurrentFrame();
+  const tg = Math.tan((14 * Math.PI) / 180);
+  return <svg width={LARGURA} height={ALTURA} viewBox={`0 0 ${LARGURA} ${ALTURA}`} style={{position: 'absolute', inset: 0}}>
+    {Array.from({length: quantidade}, (_, i) => {
+      const L = 60 + rnd(i + 4) * 90, v = 30 + rnd(i + 8) * 16, ciclo = ALTURA + 400, y = ((f * v + rnd(i) * ciclo) % ciclo) - 200, x = rnd(i + 20) * (LARGURA + 400) - 200 - y * tg;
+      return <line key={i} x1={x} y1={y} x2={x - L * tg} y2={y + L} stroke={cor} strokeWidth={1.5 + rnd(i + 12) * 2} opacity={(0.12 + rnd(i + 6) * 0.3) * forca * 2} strokeLinecap="round" />;
+    })}
+  </svg>;
+};

package/kits/neon-cidade/elementos/FormaNeon.tsx

@@ -0,0 +1,42 @@
+// FormaNeon: seta, moldura, estrela, raio, coração ou círculo em tubo. O contorno se desenha de ponta a ponta
+// (pathLength, 20 quadros) e depois acende com tremida. Três camadas: halo largo borrado, tubo médio e miolo branco.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, acende, e5, seg} from './base';
+
+export type TipoNeon = 'seta' | 'moldura' | 'estrela' | 'raio' | 'coracao' | 'circulo';
+const CAMINHOS: Record<TipoNeon, string> = {
+  seta: 'M10 50 H80 M56 20 L88 50 L56 80',
+  moldura: 'M24 8 H76 Q92 8 92 24 V76 Q92 92 76 92 H24 Q8 92 8 76 V24 Q8 8 24 8 Z',
+  estrela: 'M50 8 L61 38 L93 40 L68 60 L77 92 L50 74 L23 92 L32 60 L7 40 L39 38 Z',
+  raio: 'M58 6 L22 56 H46 L38 94 L78 40 H54 Z',
+  coracao: 'M50 88 C12 60 6 38 18 24 C28 12 44 16 50 30 C56 16 72 12 82 24 C94 38 88 60 50 88 Z',
+  circulo: 'M50 8 A42 42 0 1 1 49.9 8 Z',
+};
+
+export type FormaNeonProps = {
+  tipo: TipoNeon;
+  x?: number;
+  y?: number;
+  /** largura/altura em px (a forma é quadrada; a seta usa 2:1 dentro dela) */
+  tamanho?: number;
+  rot?: number;
+  cor?: string;
+  inicio?: number;
+  /** espessura do tubo em px */
+  tubo?: number;
+};
+
+export const FormaNeon: React.FC<FormaNeonProps> = ({tipo, x = 540, y = 1140, tamanho = 300, rot = 0, cor = COR.ciano, inicio = 0, tubo = 14}) => {
+  const f = useCurrentFrame();
+  if (f < inicio) return null;
+  const p = e5(seg(f, inicio, inicio + 20)), k = acende(f, inicio + 20, 3), esc = 100 / tamanho;
+  const lum = p < 1 ? 0.5 : k;
+  const traço = {fill: 'none', strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const, pathLength: 1, strokeDasharray: '1 1.1', strokeDashoffset: 1 - p};
+  return <svg width={tamanho} height={tamanho} viewBox="0 0 100 100" style={{position: 'absolute', left: x - tamanho / 2, top: y - tamanho / 2, overflow: 'visible', transform: `rotate(${rot}deg)`}}>
+    <defs><filter id="nc-halo" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="3.2" /></filter></defs>
+    <path d={CAMINHOS[tipo]} {...traço} stroke={cor} strokeWidth={tubo * 2.6 * esc} opacity={0.55 * lum} filter="url(#nc-halo)" />
+    <path d={CAMINHOS[tipo]} {...traço} stroke={cor} strokeWidth={tubo * 1.3 * esc} opacity={lum} />
+    <path d={CAMINHOS[tipo]} {...traço} stroke={COR.branco} strokeWidth={tubo * 0.5 * esc} opacity={Math.min(1, lum * 1.1)} />
+  </svg>;
+};

package/kits/neon-cidade/elementos/Fundo.tsx

@@ -0,0 +1,18 @@
+// Fundo: noite quase preta com céu que clareia no horizonte, neblina rosa embaixo e estrelas fracas que piscam.
+// Fica FORA da Camera.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {COR, rnd} from './base';
+
+export type FundoProps = {neblina?: string; velocidade?: number};
+
+export const Fundo: React.FC<FundoProps> = ({neblina = COR.rosa, velocidade = 1}) => {
+  const t = useCurrentFrame() * velocidade;
+  return <AbsoluteFill style={{background: `linear-gradient(180deg, ${COR.noite} 0%, #0B0817 55%, ${COR.noiteClara} 100%)`}}>
+    <svg width={1080} height={1920} viewBox="0 0 1080 1920" style={{position: 'absolute', inset: 0}}>
+      {Array.from({length: 46}, (_, i) => <circle key={i} cx={rnd(i) * 1080} cy={rnd(i + 50) * 900} r={1.2 + rnd(i + 9) * 1.6} fill="#fff" opacity={0.15 + 0.35 * Math.abs(Math.sin(t / (20 + rnd(i) * 30) + i))} />)}
+    </svg>
+    <AbsoluteFill style={{background: `radial-gradient(70% 26% at ${50 + Math.sin(t / 90) * 8}% 100%, ${neblina}29, transparent 70%)`}} />
+    <AbsoluteFill style={{background: 'radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,0.5))'}} />
+  </AbsoluteFill>;
+};

package/kits/neon-cidade/elementos/Horizonte.tsx

@@ -0,0 +1,34 @@
+// Horizonte: silhueta de prédios em 3 camadas (longe, meio, perto) com parallax (0,15 / 0,35 / 0,7 px por quadro)
+// e janelas âmbar ou ciano que piscam. Fica embaixo da área de leitura (começa em y 1320).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, rnd} from './base';
+
+export type HorizonteProps = {
+  /** y do chão (base dos prédios) */
+  chao?: number;
+  velocidade?: number;
+};
+
+const CAMADAS = [{cor: '#120F22', alt: 300, larg: [90, 160], vel: 0.15, seed: 1, janelas: 0.0}, {cor: '#0C0A18', alt: 380, larg: [110, 190], vel: 0.35, seed: 2, janelas: 0.18}, {cor: COR.noite, alt: 460, larg: [130, 220], vel: 0.7, seed: 3, janelas: 0.3}];
+
+export const Horizonte: React.FC<HorizonteProps> = ({chao = 1920, velocidade = 1}) => {
+  const f = useCurrentFrame() * velocidade;
+  return <svg width={1080} height={1920} viewBox="0 0 1080 1920" style={{position: 'absolute', inset: 0}}>
+    {CAMADAS.map((c, li) => {
+      const pr: JSX.Element[] = [];
+      let x = -((f * c.vel) % 1500) - 200;
+      for (let i = 0; x < 1400; i++) {
+        const w = c.larg[0] + rnd(i + c.seed * 17) * (c.larg[1] - c.larg[0]), h = c.alt * (0.45 + 0.55 * rnd(i + c.seed * 31)), idx = i % 12;
+        void idx;
+        pr.push(<rect key={`b${i}`} x={x} y={chao - h} width={w} height={h + 4} fill={c.cor} />);
+        if (c.janelas > 0) for (let jy = 0; jy < h - 40; jy += 46) for (let jx = 16; jx < w - 24; jx += 34) {
+          const r = rnd(i * 97 + jy * 3 + jx + c.seed);
+          if (r < c.janelas) pr.push(<rect key={`j${i}-${jy}-${jx}`} x={x + jx} y={chao - h + 24 + jy} width={14} height={20} fill={r < c.janelas * 0.4 ? COR.ciano : COR.ambar} opacity={0.35 + 0.35 * Math.abs(Math.sin(f / (25 + r * 60) + r * 9))} />);
+        }
+        x += w + 8 + rnd(i + 5) * 14;
+      }
+      return <g key={li}>{pr}</g>;
+    })}
+  </svg>;
+};

package/kits/neon-cidade/elementos/LetreiroNeon.tsx

@@ -0,0 +1,46 @@
+// LetreiroNeon: palavra em tubo (Tilt Neon). As letras estão apagadas (18% da cor) e acendem uma a uma, da esquerda
+// pra direita, com 9 quadros de tremida de lâmpada; depois zumbem, e de vez em quando uma falha. Reflete no chão molhado.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FAM_A, FONTE_A, LARGURA_UTIL, acende, brilho, caber, e5, rnd, seg} from './base';
+
+export type LetreiroNeonProps = {
+  linhas: string[];
+  /** cor do tubo */
+  cor?: string;
+  /** cor por linha (sobrepõe `cor`) */
+  cores?: string[];
+  y?: number;
+  tamanho?: number;
+  inicio?: number;
+  /** quadros entre letras */
+  passo?: number;
+  /** liga o reflexo no chão molhado */
+  reflexo?: boolean;
+  /** quadro em que apaga e sai */
+  fim?: number;
+};
+
+export const LetreiroNeon: React.FC<LetreiroNeonProps> = ({linhas, cor = COR.rosa, cores, y = 680, tamanho = 250, inicio = 0, passo = 4, reflexo = false, fim}) => {
+  const f = useCurrentFrame();
+  const tam = Math.min(...linhas.map((l) => caber(l, tamanho, FAM_A, LARGURA_UTIL, 400, 0.04)));
+  const alt = tam * 1.1, topo = y - (linhas.length * alt) / 2;
+  const sai = fim === undefined ? 0 : e5(seg(f, fim, fim + 8));
+  if (sai >= 1) return null;
+  let n = 0;
+  return <div style={{position: 'absolute', left: 0, width: 1080, top: topo, height: linhas.length * alt, opacity: 1 - sai, WebkitBoxReflect: reflexo ? 'below 8px linear-gradient(transparent 55%, rgba(255,255,255,0.28))' : undefined}}>
+    {linhas.map((l, li) => {
+      const c = cores?.[li] ?? cor;
+      return <div key={li} style={{position: 'absolute', left: 0, width: 1080, top: li * alt, height: alt, display: 'flex', justifyContent: 'center', alignItems: 'center', fontFamily: FONTE_A, fontSize: tam, lineHeight: 1, letterSpacing: '0.04em', whiteSpace: 'pre'}}>
+        {l.split('').map((ch, ci) => {
+          const idx = n++;
+          let k = acende(f, inicio + idx * passo, idx);
+          if (k >= 0.9 && l.length >= 5 && idx === 2 && f > inicio + 40 && (f % 41) < 3) k = 0.12;
+          const aceso = k > 0.5;
+          return <span key={ci} style={{color: aceso ? COR.branco : `${c}2e`, textShadow: aceso ? brilho(c, k) : 'none', opacity: aceso ? k : 1}}>{ch}</span>;
+        })}
+      </div>;
+    })}
+  </div>;
+};
+void rnd;

package/kits/neon-cidade/elementos/Montagem.tsx

@@ -0,0 +1,67 @@
+// 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 {LetreiroNeon} from './LetreiroNeon';
+import {FormaNeon} from './FormaNeon';
+import {CaixaLuminosa} from './CaixaLuminosa';
+import {Chuva} from './Chuva';
+import {Horizonte} from './Horizonte';
+import {AssinaturaMarca} from './AssinaturaMarca';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {
+  LetreiroNeon, FormaNeon, CaixaLuminosa, Chuva, Horizonte, 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('neon-cidade: aguardando fontes');
+    esperarFontes().then(() => {setOk(true); setTimeout(() => continueRender(h), 40);});
+  }, [ok]);
+  if (!ok) return <AbsoluteFill style={{background: COR.noite}} />;
+  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.noite}}>
+    <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(`neon-cidade: 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/neon-cidade/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 tick from '../assets/sons/tick.mp3';
+import zumbido from '../assets/sons/zumbido.mp3';
+import liga from '../assets/sons/liga.mp3';
+import whoosh from '../assets/sons/whoosh.mp3';
+import balanca from '../assets/sons/balanca.mp3';
+import impacto from '../assets/sons/impacto.mp3';
+import clique from '../assets/sons/clique.mp3';
+import assinatura from '../assets/sons/assinatura.mp3';
+import trilha from '../assets/trilha/noite-100bpm.mp3';
+
+export const SONS = {'tick': tick, 'zumbido': zumbido, 'liga': liga, 'whoosh': whoosh, 'balanca': balanca, 'impacto': impacto, 'clique': clique, '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> = {'tick': 0.7, 'zumbido': 0.55, 'liga': 0.85, 'whoosh': 0.8, 'balanca': 0.7, 'impacto': 0.8, 'clique': 0.8, '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.55, 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/neon-cidade/elementos/base.ts

@@ -0,0 +1,100 @@
+// Base do kit neon-cidade: 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/tiltneon-latin.woff2';
+import fonteB from '../assets/fontes/barlow-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 = {
+  noite: '#07060D',
+  noiteClara: '#120F22',
+  rosa: '#FF2E93',
+  ciano: '#19E3FF',
+  ambar: '#FFB020',
+  branco: '#FFF4FA',
+  gelo: '#C9C2E0',
+};
+
+/** brilho de tubo aceso */
+export const brilho = (cor: string, k = 1) => `0 0 6px ${cor}, 0 0 18px ${cor}, 0 0 ${Math.round(42 * k)}px ${cor}, 0 0 ${Math.round(90 * k)}px ${cor}80`;
+/** estado de um tubo que acende em `em`: 0 apagado, 0..1 tremendo, 1 aceso (com zumbido) */
+export const acende = (f: number, em: number, seed = 0) => {
+  if (f < em) return 0;
+  const q = f - em;
+  if (q < 9) return rnd(Math.floor(q / 1.5) + seed * 7) > 0.42 ? 1 : 0.12;
+  return 0.94 + 0.06 * Math.sin(f / 3 + seed) * (rnd(Math.floor(f / 5) + seed) > 0.9 ? 3 : 1);
+};
+
+// ---------- fonte ----------
+// Famílias com o prefixo do kit, pra não colidir com outro kit no mesmo estúdio.
+export const FAM_A = 'NC Tilt Neon';
+export const FONTE_A = '"NC Tilt Neon", Impact, sans-serif';
+export const FAM_B = 'NC Barlow Condensed';
+export const FONTE_B = '"NC Barlow Condensed", system-ui, sans-serif';
+
+// 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>).__ncA) {
+  (globalThis as Record<string, unknown>).__ncA = true;
+  const hA = delayRender('neon-cidade: NC Tilt Neon');
+  new FontFace('NC Tilt Neon', `url(${fonteA}) format('woff2')`, {weight: '400', 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>).__ncB) {
+  (globalThis as Record<string, unknown>).__ncB = true;
+  const hB = delayRender('neon-cidade: NC Barlow Condensed');
+  new FontFace('NC Barlow Condensed', `url(${fonteB}) format('woff2')`, {weight: '600', 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.5) => {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 = 18;
+
+// ---------- 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/neon-cidade/elementos/index.ts

@@ -0,0 +1,15 @@
+// Tudo que o kit neon-cidade 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 {LetreiroNeon} from './LetreiroNeon';
+export {FormaNeon} from './FormaNeon';
+export {CaixaLuminosa} from './CaixaLuminosa';
+export {Chuva} from './Chuva';
+export {Horizonte} from './Horizonte';
+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/neon-cidade/exemplos/logo-fenix.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><g fill="none" stroke="#FF2E93" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"><path d="M100 168c-34 0-56-22-56-52 0-26 18-40 30-60 4 18 14 22 20 32 4-22 14-34 30-44-2 24 12 34 12 62 0 36-14 62-36 62z"/><path d="M100 168c-14 0-22-10-22-22 0-12 10-18 14-28 6 8 8 12 8 18 4-4 6-10 6-14 6 8 6 18 6 24 0 12-6 22-12 22z" stroke="#FFB020"/></g></svg>

package/kits/neon-cidade/exemplos/plano.json

@@ -0,0 +1,50 @@
+{
+  "kit": "neon-cidade",
+  "roteiro": "exemplos/roteiro.md",
+  "duracao": 240,
+  "trilha": {"volume": 0.55},
+  "cenas": [
+    {"batida": "gancho", "de": 0, "ate": 45, "entrada": "nenhuma",
+     "camadas": [
+       {"elemento": "Horizonte", "props": {"chao": 1920}},
+       {"elemento": "Chuva", "props": {"quantidade": 60, "forca": 0.5}},
+       {"elemento": "LetreiroNeon", "props": {"linhas": ["NOITE"], "cor": "#FF2E93", "y": 680, "tamanho": 280, "inicio": 3, "passo": 4, "reflexo": true}}
+     ],
+     "socos": [26],
+     "sons": [{"som": "tick", "em": 3}, {"som": "tick", "em": 7}, {"som": "tick", "em": 11}, {"som": "zumbido", "em": 12}, {"som": "impacto", "em": 24}]},
+    {"batida": "virada", "de": 45, "ate": 90, "entrada": "subir",
+     "camadas": [
+       {"elemento": "CaixaLuminosa", "props": {"linhas": ["FÊNIX"], "detalhe": "bar & pista", "cor": "#19E3FF", "topo": 230, "largura": 820, "tamanho": 190, "inicio": 0}}
+     ],
+     "socos": [18],
+     "sons": [{"som": "whoosh", "em": -1}, {"som": "balanca", "em": 4}, {"som": "tick", "em": 10}, {"som": "tick", "em": 16}, {"som": "impacto", "em": 22}]},
+    {"batida": "prova", "de": 90, "ate": 126, "entrada": "zoom",
+     "camadas": [
+       {"elemento": "Chuva", "props": {"quantidade": 50, "forca": 0.4}},
+       {"elemento": "LetreiroNeon", "props": {"linhas": ["DJ", "AO VIVO"], "cores": ["#FF2E93", "#19E3FF"], "y": 640, "tamanho": 230, "inicio": 2, "passo": 3}},
+       {"elemento": "FormaNeon", "props": {"tipo": "moldura", "x": 540, "y": 1130, "tamanho": 260, "cor": "#FFB020", "inicio": 14}}
+     ],
+     "socos": [18],
+     "sons": [{"som": "tick", "em": 2}, {"som": "tick", "em": 8}, {"som": "liga", "em": 34}]},
+    {"batida": "prova", "de": 126, "ate": 162, "entrada": "subir",
+     "camadas": [
+       {"elemento": "LetreiroNeon", "props": {"linhas": ["ENTRADA", "GRÁTIS"], "cores": ["#19E3FF", "#FF2E93"], "y": 640, "tamanho": 210, "inicio": 2, "passo": 3}},
+       {"elemento": "FormaNeon", "props": {"tipo": "seta", "x": 540, "y": 1130, "tamanho": 280, "cor": "#FFB020", "rot": 90, "inicio": 14}}
+     ],
+     "socos": [20],
+     "sons": [{"som": "tick", "em": 2}, {"som": "tick", "em": 9}, {"som": "liga", "em": 34}]},
+    {"batida": "data", "de": 162, "ate": 204, "entrada": "zoom",
+     "camadas": [
+       {"elemento": "LetreiroNeon", "props": {"linhas": ["14 NOV"], "cor": "#FFB020", "y": 640, "tamanho": 280, "inicio": 2, "passo": 4, "reflexo": true}}
+     ],
+     "socos": [24],
+     "sons": [{"som": "zumbido", "em": 0}, {"som": "tick", "em": 3}, {"som": "impacto", "em": 24}, {"som": "clique", "em": 30}]},
+    {"batida": "marca", "de": 204, "ate": 240, "entrada": "zoom",
+     "camadas": [
+       {"elemento": "Horizonte", "props": {"chao": 1920}},
+       {"elemento": "AssinaturaMarca", "props": {"logo": "logo-fenix.svg", "nome": "fênix", "endereco": "barfenix.exemplo", "inicio": 0}}
+     ],
+     "socos": [14],
+     "sons": [{"som": "assinatura", "em": 3}, {"som": "tick", "em": 14}, {"som": "clique", "em": 30}]}
+  ]
+}

package/kits/neon-cidade/exemplos/roteiro.md

@@ -0,0 +1,20 @@
+# Roteiro de demonstração · "Noite Fênix" (bar fictício)
+
+Pedido: *"um reels de 8 s anunciando a Noite Fênix, DJ ao vivo, entrada grátis até 23h, sexta 14 de novembro, no Bar Fênix. Estilo neon urbano."*
+
+Sem narração: os cortes seguem a trilha (1 batida = 18 quadros).
+
+| # | batida | tempo (quadros) | na tela | elemento | som |
+|---|---|---|---|---|---|
+| 1 | gancho | 0–45 | "NOITE" acende, chuva e prédios | LetreiroNeon + Horizonte + Chuva | tick ×5, zumbido, impacto |
+| 2 | virada | 45–90 | caixa luminosa balança: "FÊNIX" | CaixaLuminosa | whoosh, balanca, tick, impacto |
+| 3 | prova | 90–126 | "DJ" + moldura de tubo | LetreiroNeon + FormaNeon | tick, liga |
+| 4 | prova | 126–162 | "ENTRADA / GRÁTIS" + seta | LetreiroNeon + FormaNeon | tick, liga |
+| 5 | data | 162–204 | "14 NOV" âmbar + "sexta · 22h" | LetreiroNeon | zumbido, tick, impacto, clique |
+| 6 | marca | 204–240 | logo + "fênix" + "barfenix.exemplo" | AssinaturaMarca + Horizonte | assinatura, tick, clique |
+
+Como a IA chegou nisso:
+1. Cortou o pedido em: abertura, nome, DJ, entrada, data.
+2. Pegou as batidas obrigatórias e usou uma cor de neon por cena (rosa, ciano, âmbar) para a noite não ficar uniforme.
+3. Deixou só um apoio por cena e uma pausa de 20 quadros depois de cada letreiro aceso.
+4. Escreveu `plano.json`; o `preview.tsx` passa o plano para `Montagem`.

package/kits/neon-cidade/preview.tsx

@@ -0,0 +1,12 @@
+// 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-neon-cidade`.
+import React from 'react';
+import {Montagem, Plano} from './elementos';
+import plano from './exemplos/plano.json';
+import l0 from './exemplos/logo-fenix.svg';
+
+const arquivos: Record<string, string> = {'logo-fenix.svg': l0};
+
+const Preview: React.FC = () => <Montagem plano={plano as Plano} arquivos={arquivos} />;
+
+export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 60, Componente: Preview};