primocode 10.17.1 → 10.19.0

package/kits/isometrico/elementos/AssinaturaMarca.tsx

@@ -0,0 +1,24 @@
+// AssinaturaMarca: o logo cai e quica sobre uma plataforma isométrica, o nome em Archivo 800 sobe de uma máscara, endereço em Jost. Última cena.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_D, FONTE_T, c01, caber, e5, eb, seg} from './base';
+import {CuboSVG, SombraSVG} from './iso';
+
+export type AssinaturaMarcaProps = {logo: string; nome: string; detalhe?: string; endereco?: string; inicio?: number; y?: number};
+
+export const AssinaturaMarca: React.FC<AssinaturaMarcaProps> = ({logo, nome, detalhe, endereco, inicio = 0, y = 600}) => {
+  const f = useCurrentFrame();
+  const lg = eb(seg(f, inicio, inicio + 18)), nm = e5(seg(f, inicio + 8, inicio + 24));
+  const tam = caber(nome, 250, 800, 800, -0.04);
+  const ang = ((38 + f * 0.5) * Math.PI) / 180, S = 72;
+  return <div style={{position: 'absolute', inset: 0}}>
+    <svg width={1080} height={700} viewBox="-540 -350 1080 700" style={{position: 'absolute', left: 0, top: y - 280, overflow: 'visible'}}>
+      <SombraSVG b={{x: 0, y: 0, w: 3.2, d: 3.2, h: 0.5, cor: COR.marinho}} ang={ang} S={S} />
+      <CuboSVG b={{x: 0, y: 0, w: 3.2, d: 3.2, h: 0.5, cor: COR.marinho}} ang={ang} S={S} />
+      <image href={logo} x={-110} y={-215 - (1 - lg) * 500} width="220" height="220" opacity={c01(lg * 2)} />
+    </svg>
+    <div style={{position: 'absolute', left: 96, width: 888, top: y + 270, height: tam * 1.15, overflow: 'hidden', textAlign: 'center', fontFamily: FONTE_D, fontWeight: 800, fontSize: tam, letterSpacing: '-0.04em', lineHeight: 1.15, color: COR.tinta}}><div style={{transform: `translateY(${(1 - nm) * 110}%)`}}>{nome}</div></div>
+    {detalhe && <div style={{position: 'absolute', left: 96, width: 888, top: y + 270 + tam * 1.2, textAlign: 'center', fontFamily: FONTE_D, fontWeight: 600, fontSize: 52, color: COR.tinta, opacity: c01((f - inicio - 24) / 8)}}>{detalhe}</div>}
+    {endereco && <div style={{position: 'absolute', left: 96, width: 888, top: y + 270 + tam * 1.2 + 80, textAlign: 'center', fontFamily: FONTE_T, fontWeight: 500, fontSize: 40, letterSpacing: '0.12em', color: COR.coral, opacity: c01((f - inicio - 30) / 8)}}>{endereco}</div>}
+  </div>;
+};

package/kits/isometrico/elementos/BlocosMontando.tsx

@@ -0,0 +1,36 @@
+// BlocosMontando: um sistema feito de blocos 3D (projeção isométrica real) que caem do alto um depois do outro, quicam ao pousar
+// e ficam girando em mesa giratória. O primeiro bloco da lista é a plataforma (chão). Cada bloco leva uma sombra.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, c01, e5, eb, seg} from './base';
+import {Cubo, CuboSVG, SombraSVG, profundidade} from './iso';
+
+export type BlocosMontandoProps = {
+  /** blocos em unidades do mundo; o primeiro é a plataforma. `cor` aceita o nome do token */
+  blocos: Cubo[];
+  inicio?: number;
+  /** quadros entre um bloco e o próximo */
+  intervalo?: number;
+  y?: number;
+  /** pixels por unidade */
+  escala?: number;
+  /** giro da mesa em graus por quadro */
+  giro?: number;
+  /** ângulo inicial em graus */
+  angulo?: number;
+};
+
+export const BlocosMontando: React.FC<BlocosMontandoProps> = ({blocos, inicio = 0, intervalo = 4, y = 800, escala = 100, giro = 0.5, angulo = 38}) => {
+  const f = useCurrentFrame();
+  const ang = ((angulo + (f - inicio) * giro) * Math.PI) / 180;
+  const ordem = blocos.map((b, i) => ({b, i})).sort((a, c) => profundidade(a.b, ang) - profundidade(c.b, ang));
+  const estado = (i: number) => {
+    const t0 = inicio + (blocos[i].cai ?? i * intervalo);
+    const p = eb(seg(f, t0, t0 + 16));
+    return {dz: (1 - p) * 9, vis: c01((f - t0) / 3), sombra: e5(seg(f, t0 + 4, t0 + 16))};
+  };
+  return <svg width={1080} height={1200} viewBox="-540 -600 1080 1200" style={{position: 'absolute', left: 0, top: y - 600, overflow: 'visible'}}>
+    {ordem.map(({b, i}) => {const e = estado(i); return e.vis > 0 ? <SombraSVG key={'s' + i} b={b} ang={ang} S={escala} escala={e.sombra} /> : null;})}
+    {ordem.map(({b, i}) => {const e = estado(i); return e.vis > 0 ? <CuboSVG key={i} b={b} ang={ang} S={escala} dz={e.dz} opacidade={e.vis} /> : null;})}
+  </svg>;
+};

package/kits/isometrico/elementos/Camera.tsx

@@ -0,0 +1,23 @@
+// Camera: deriva constante por baixo de tudo e um soco em cada batida. O quadro nunca fica parado.
+// `batidas` são quadros absolutos do vídeo. Parâmetros do kit em base.ts (CAMERA).
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {CAMERA} from './base';
+
+export type CameraProps = {batidas?: number[]; forca?: number; children: React.ReactNode};
+
+export const posCamera = (f: number, batidas: number[], forca = 1) => {
+  const C = CAMERA;
+  let z = C.z + C.zOsc * Math.sin(f / 90) + f * C.push, dx = Math.sin(f / 37) * C.dx, dy = Math.cos(f / 51) * C.dy;
+  const rot = Math.sin(f / 83) * C.rot;
+  for (const h of batidas) if (f >= h) {
+    const d = Math.exp(-(f - h) / 7) * forca;
+    z += C.soco * d; dx += C.dx * 0.8 * d * Math.sin((f - h) * 2.7 + h); dy += C.dy * 0.8 * 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/isometrico/elementos/Cena.tsx

@@ -0,0 +1,46 @@
+// Cena: janela de tempo de um plano. Entra com movimento e sai com movimento (conforme a entrada).
+// Dentro dela, useCurrentFrame() começa em 0. A saída cruza SOBREPOE quadros com a próxima cena.
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {COR, e5, seg, LARGURA} from './base';
+
+export type Entrada = 'subir' | 'zoom' | 'direita' | 'esquerda' | 'whip' | 'cortina' | 'corte' | 'nenhuma';
+export const SOBREPOE = 10;
+const COM_SAIDA: Entrada[] = ['subir', 'zoom', 'direita', 'esquerda', 'whip'];
+
+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 dur = entrada === 'whip' ? 8 : 12;
+  const en = entrada === 'nenhuma' || entrada === 'corte' ? 0 : 1 - e5(seg(f, 0, dur));
+  const sai = !ultima && COM_SAIDA.includes(entrada);
+  const xo = sai ? e5(seg(f, duracao, duracao + SOBREPOE)) : 0;
+  let tf = '';
+  if (entrada === 'subir') tf += `translateY(${en * 260 - xo * 220}px) scale(${1 + xo * 0.06})`;
+  if (entrada === 'zoom') tf += `scale(${1 + en * 0.9 + xo * 0.5})`;
+  if (entrada === 'direita') tf += `translateX(${en * 760 - xo * 760}px)`;
+  if (entrada === 'esquerda') tf += `translateX(${-en * 760 + xo * 760}px)`;
+  if (entrada === 'whip') tf += `translateX(${en * 1500 - xo * 1500}px) skewX(${(en - xo) * -14}deg)`;
+  const blur = en * (entrada === 'whip' ? 34 : 16) + xo * (entrada === 'whip' ? 34 : 14);
+  const opac = entrada === 'whip' ? 1 : (1 - en * 0.85) * (1 - xo);
+  const corte = entrada === 'cortina' ? e5(seg(f, 0, 14)) : 1;
+  return <AbsoluteFill style={{transform: tf || undefined, opacity: opac, filter: blur > 0.3 ? `blur(${blur}px)` : undefined, clipPath: corte < 1 ? `inset(0 ${(1 - corte) * 100}% 0 0)` : undefined}}>
+    {children}
+    {entrada === 'cortina' && corte < 1 && <div style={{position: 'absolute', top: 0, bottom: 0, left: corte * LARGURA - 90, width: 90, background: COR.cortina}} />}
+  </AbsoluteFill>;
+};
+
+export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'subir', ultima = false, children}) => {
+  const duracao = ate - de;
+  const extra = !ultima && COM_SAIDA.includes(entrada) ? SOBREPOE : 0;
+  return <Sequence from={de} durationInFrames={duracao + extra} layout="none">
+    <CenaCtx.Provider value={{duracao}}>
+      <Janela duracao={duracao} entrada={entrada} ultima={ultima}>{children}</Janela>
+    </CenaCtx.Provider>
+  </Sequence>;
+};

package/kits/isometrico/elementos/CidadeDeDados.tsx

@@ -0,0 +1,33 @@
+// CidadeDeDados: gráfico de barras em 3D isométrico (uma "cidade" de colunas sobre uma plataforma). As colunas sobem em onda a partir
+// de um canto, com overshoot; as mais altas ficam coral, as médias verdes, as baixas marinho. A mesa gira devagar.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, eb, seg} from './base';
+import {Cubo, CuboSVG, SombraSVG, profundidade} from './iso';
+
+export type CidadeDeDadosProps = {
+  /** matriz n×n de alturas (0..1) */
+  valores: number[][];
+  inicio?: number; y?: number; escala?: number; giro?: number; angulo?: number;
+  /** altura máxima de uma coluna, em unidades */
+  alturaMax?: number;
+};
+
+export const CidadeDeDados: React.FC<CidadeDeDadosProps> = ({valores, inicio = 0, y = 800, escala = 100, giro = 0.45, angulo = 32, alturaMax = 4.2}) => {
+  const f = useCurrentFrame();
+  const n = valores.length, ang = ((angulo + (f - inicio) * giro) * Math.PI) / 180, gap = 0.18, L = 1;
+  const tam = n * L + (n - 1) * gap;
+  const base: Cubo = {x: 0, y: 0, w: tam + 0.9, d: tam + 0.9, h: 0.3, cor: COR.creme};
+  const colunas: Cubo[] = [];
+  valores.forEach((lin, j) => lin.forEach((v, i) => {
+    const t0 = inicio + 4 + (i + j) * 2, p = eb(seg(f, t0, t0 + 18));
+    colunas.push({x: -tam / 2 + L / 2 + i * (L + gap), y: -tam / 2 + L / 2 + j * (L + gap), z: 0.3, w: L, d: L, h: Math.max(0.02, v * alturaMax * p), cor: v > 0.7 ? COR.coral : v > 0.4 ? COR.verde : COR.marinho});
+  }));
+  const ordem = colunas.slice().sort((a, b) => profundidade(a, ang) - profundidade(b, ang));
+  return <svg width={1080} height={1300} viewBox="-540 -700 1080 1300" style={{position: 'absolute', left: 0, top: y - 700, overflow: 'visible'}}>
+    <SombraSVG b={{...base, h: 0.3}} ang={ang} S={escala} />
+    <CuboSVG b={base} ang={ang} S={escala} />
+    {ordem.map((b, i) => <SombraSVG key={'s' + i} b={{...b, x: b.x, y: b.y, z: 0.3}} ang={ang} S={escala} escala={0.7} />)}
+    {ordem.map((b, i) => <CuboSVG key={i} b={b} ang={ang} S={escala} />)}
+  </svg>;
+};

package/kits/isometrico/elementos/Fundo.tsx

@@ -0,0 +1,13 @@
+// Fundo: gelo azulado (#DDE9F0) com uma malha isométrica (linhas a ±30°) quase invisível que deriva devagar. Fica FORA da Camera.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {COR} from './base';
+
+export const Fundo: React.FC<{velocidade?: number}> = ({velocidade = 1}) => {
+  const f = useCurrentFrame() * velocidade;
+  const linhas = (graus: number) => `repeating-linear-gradient(${graus}deg, transparent 0 96px, rgba(27,43,75,0.07) 96px 98px)`;
+  return <AbsoluteFill style={{background: `linear-gradient(180deg, ${COR.topo} 0%, ${COR.fundo} 100%)`}}>
+    <AbsoluteFill style={{backgroundImage: `${linhas(30)}, ${linhas(-30)}`, backgroundPosition: `${f * 1.2}px ${f * 0.7}px, ${-f * 1.2}px ${f * 0.7}px`}} />
+    <AbsoluteFill style={{background: `radial-gradient(60% 28% at ${30 + Math.sin(f / 45) * 22}% 18%, rgba(255,255,255,0.7), transparent 70%)`}} />
+  </AbsoluteFill>;
+};

package/kits/isometrico/elementos/LegendaPlaca.tsx

@@ -0,0 +1,18 @@
+// LegendaPlaca: uma plaquinha de texto (pílula creme com sombra dura marinho) com um fio que sai dela para um ponto do herói.
+// É o apoio: serve para nomear o que o herói mostra. Entra com overshoot.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_D, FONTE_T, c01, caber, e5, eb, seg} from './base';
+
+export type LegendaPlacaProps = {texto: string; sobre?: string; inicio?: number; y?: number; /** alinhamento horizontal da placa */ alinhar?: 'esquerda' | 'centro'};
+
+export const LegendaPlaca: React.FC<LegendaPlacaProps> = ({texto, sobre, inicio = 0, y = 1260, alinhar = 'centro'}) => {
+  const f = useCurrentFrame(), e = eb(seg(f, inicio, inicio + 16));
+  const t = caber(texto, 84, 760, 800, -0.02);
+  return <div style={{position: 'absolute', left: 96, width: 888, top: y - 90, height: 180, display: 'flex', justifyContent: alinhar === 'centro' ? 'center' : 'flex-start', alignItems: 'center', opacity: c01(e * 2), transform: `translateY(${(1 - e) * 60}px) scale(${0.85 + 0.15 * e})`}}>
+    <div style={{background: COR.creme, border: `5px solid ${COR.tinta}`, borderRadius: 100, boxShadow: `10px 10px 0 ${COR.tinta}`, padding: '18px 58px', fontFamily: FONTE_D, fontWeight: 800, fontSize: t, letterSpacing: '-0.02em', color: COR.tinta, whiteSpace: 'nowrap', textAlign: 'center'}}>
+      {sobre && <div style={{fontFamily: FONTE_T, fontWeight: 500, fontSize: 26, letterSpacing: '0.14em', textTransform: 'uppercase', color: COR.mute, marginBottom: 2, width: '100%'}}>{sobre}</div>}
+      {texto}
+    </div>
+  </div>;
+};

package/kits/isometrico/elementos/Montagem.tsx

@@ -0,0 +1,60 @@
+// Montagem: transforma um plano de cenas (JSON escrito pela IA) em vídeo, usando só os elementos do kit.
+// Ela NÃO decide estética: põe Fundo + Camera + Cenas + sons onde o plano mandou. Formato: exemplos/plano.json.
+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 {AssinaturaMarca} from './AssinaturaMarca';
+import {BlocosMontando} from './BlocosMontando';
+import {CidadeDeDados} from './CidadeDeDados';
+import {LegendaPlaca} from './LegendaPlaca';
+import {RedeDeBlocos} from './RedeDeBlocos';
+import {TextoNoChao} from './TextoNoChao';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {
+  AssinaturaMarca, BlocosMontando, CidadeDeDados, LegendaPlaca, RedeDeBlocos, TextoNoChao,
+};
+
+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[]};
+
+/** props de cor aceitam o nome do token ("vermelho") ou um hex */
+const CHAVES_COR = ['cor', 'corAnel', 'ponto', 'tinta'];
+/** troca nomes de arquivo ("fotos/a.jpg") pela URL importada, em qualquer prop */
+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, CHAVES_COR.includes(k) && typeof x === 'string' && x in COR ? COR[x as keyof typeof COR] : 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.fundo}}>
+    <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(`isometrico: 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/isometrico/elementos/RedeDeBlocos.tsx

@@ -0,0 +1,41 @@
+// RedeDeBlocos: blocos 3D ligados por trilhos no chão; pacotes de luz (bolinhas) correm pelos trilhos de um bloco ao outro.
+// Os blocos sobem do chão em sequência; a mesa gira devagar. Mostra "sistemas que conversam".
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, c01, e5, eb, seg} from './base';
+import {Cubo, CuboSVG, SombraSVG, profundidade, proj, tom} from './iso';
+
+export type RedeDeBlocosProps = {
+  /** nós da rede (o primeiro pode ser a plataforma, sem ligação) */
+  blocos: Cubo[];
+  /** pares de índices ligados por trilho em L */
+  ligacoes: [number, number][];
+  inicio?: number; y?: number; escala?: number; giro?: number; angulo?: number;
+};
+
+export const RedeDeBlocos: React.FC<RedeDeBlocosProps> = ({blocos, ligacoes, inicio = 0, y = 800, escala = 100, giro = 0.45, angulo = 40}) => {
+  const f = useCurrentFrame();
+  const ang = ((angulo + (f - inicio) * giro) * Math.PI) / 180;
+  const ordem = blocos.map((b, i) => ({b, i})).sort((a, c) => profundidade(a.b, ang) - profundidade(c.b, ang));
+  const sobe = (i: number) => {const t0 = inicio + 2 + i * 4; return {p: eb(seg(f, t0, t0 + 16)), v: c01((f - t0) / 3)};};
+  const caminho = (a: Cubo, b: Cubo) => [[a.x, a.y], [b.x, a.y], [b.x, b.y]];
+  const ponto = (c: number[][], t: number) => {
+    const l1 = Math.abs(c[1][0] - c[0][0]) + Math.abs(c[1][1] - c[0][1]), l2 = Math.abs(c[2][0] - c[1][0]) + Math.abs(c[2][1] - c[1][1]), L = l1 + l2 || 1, d = t * L;
+    const [a, b, k] = d < l1 ? [c[0], c[1], d / (l1 || 1)] : [c[1], c[2], (d - l1) / (l2 || 1)];
+    return [a[0] + (b[0] - a[0]) * k, a[1] + (b[1] - a[1]) * k];
+  };
+  const pol = (c: number[][], z: number) => c.map((p) => {const q = proj(p[0], p[1], z, ang, escala); return `${q.x.toFixed(1)},${q.y.toFixed(1)}`;}).join(' ');
+  const cheg = e5(seg(f, inicio + 14, inicio + 34));
+  return <svg width={1080} height={1200} viewBox="-540 -600 1080 1200" style={{position: 'absolute', left: 0, top: y - 600, overflow: 'visible'}}>
+    {ligacoes.map(([a, b], k) => {const c = caminho(blocos[a], blocos[b]); return <g key={k} opacity={cheg}>
+      <polyline points={pol(c, 0.02)} fill="none" stroke={tom(COR.marinho, 1)} strokeWidth="26" strokeLinejoin="round" strokeLinecap="round" />
+      <polyline points={pol(c, 0.03)} fill="none" stroke={COR.creme} strokeWidth="4" strokeDasharray="16 14" strokeLinejoin="round" />
+    </g>;})}
+    {ligacoes.map(([a, b], k) => {
+      const c = caminho(blocos[a], blocos[b]);
+      return [0, 1, 2].map((n) => {const t = (((f - inicio) * 0.022 + n / 3 + k * 0.17) % 1 + 1) % 1, p = ponto(c, t), q = proj(p[0], p[1], 0.18, ang, escala); return <circle key={`${k}-${n}`} cx={q.x} cy={q.y} r="15" fill={COR.mostarda} stroke={COR.creme} strokeWidth="5" opacity={cheg} />;});
+    })}
+    {ordem.map(({b, i}) => {const e = sobe(i); return e.v > 0 ? <SombraSVG key={'s' + i} b={b} ang={ang} S={escala} escala={c01(e.p)} /> : null;})}
+    {ordem.map(({b, i}) => {const e = sobe(i); return e.v > 0 ? <CuboSVG key={i} b={{...b, h: b.h * Math.max(0.01, e.p)}} ang={ang} S={escala} opacidade={e.v} /> : null;})}
+  </svg>;
+};

package/kits/isometrico/elementos/Som.tsx

@@ -0,0 +1,39 @@
+// Som: efeitos e trilha do kit, sintetizados no MotionCraft (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 trilha from '../assets/trilha/trilha.mp3';
+
+export const SONS = {
+  'whoosh-entra': whooshEntra, 'whoosh-sai': whooshSai, swoosh, 'pop-palavra': popPalavra, 'pop-cartao': popCartao,
+  clique, impacto, subida, assinatura,
+} 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.9, 'whoosh-sai': 0.8, swoosh: 1, 'pop-palavra': 1, 'pop-cartao': 0.9, clique: 0.8, impacto: 0.85, 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.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/isometrico/elementos/TextoNoChao.tsx

@@ -0,0 +1,28 @@
+// TextoNoChao: a palavra deitada no chão em perspectiva isométrica e extrudada (16 camadas empilhadas), sobre uma plataforma marinho.
+// A palavra "levanta" do chão ao entrar e a plataforma gira alguns graus durante a cena.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_D, c01, caber, e5, eb, lerp, seg} from './base';
+import {tom} from './iso';
+import {useDuracaoCena} from './Cena';
+
+export type TextoNoChaoProps = {linhas: string[]; inicio?: number; y?: number; tamanho?: number; /** cor da face de cima do texto */ cor?: string; /** cor lateral/extrusão */ lado?: string};
+
+export const TextoNoChao: React.FC<TextoNoChaoProps> = ({linhas, inicio = 0, y = 760, tamanho = 230, cor = COR.creme, lado = COR.coral}) => {
+  const f = useCurrentFrame(), dur = useDuracaoCena();
+  const en = eb(seg(f, inicio, inicio + 18)), sobe = e5(seg(f, inicio + 6, inicio + 24));
+  const tams = linhas.map((l) => caber(l, tamanho, 700, 800, -0.03));
+  const H = tams.reduce((a, b) => a + b * 1.05, 0);
+  const rz = lerp(-48, -38, f / dur), rx = 60;
+  const N = 16, prof = 3.4 * sobe, W = 760, PH = H + 200;
+  const camada = (z: number, c: string, extra?: React.CSSProperties) => <div style={{position: 'absolute', left: 0, top: 0, width: W, height: PH, transform: `translateZ(${z}px)`, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', ...extra}}>
+    {linhas.map((l, i) => <div key={i} style={{fontFamily: FONTE_D, fontWeight: 800, fontSize: tams[i], lineHeight: 1.05, letterSpacing: '-0.03em', color: c, whiteSpace: 'nowrap'}}>{l}</div>)}
+  </div>;
+  return <div style={{position: 'absolute', left: 0, right: 0, top: y - 520, height: 1040, perspective: 3000, opacity: c01(en * 2)}}>
+    <div style={{position: 'absolute', left: (1080 - W) / 2, top: 520 - PH / 2, width: W, height: PH, transformStyle: 'preserve-3d', transform: `scale(${0.7 + 0.3 * en}) rotateX(${rx}deg) rotateZ(${rz}deg)`}}>
+      {Array.from({length: 10}, (_, i) => <div key={'p' + i} style={{position: 'absolute', inset: 0, transform: `translateZ(${-i * 4}px)`, background: i === 0 ? COR.marinho : tom(COR.marinho, 0.7), borderRadius: 36}} />)}
+      {Array.from({length: N}, (_, i) => camada(8 + i * prof, tom(lado, 0.75 + (i / N) * 0.25)))}
+      {camada(8 + N * prof + 1, cor)}
+    </div>
+  </div>;
+};

package/kits/isometrico/elementos/base.ts

@@ -0,0 +1,86 @@
+// Base do kit isometrico: 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 f0Url from '../assets/fontes/archivo.woff2';
+import f1Url from '../assets/fontes/jost.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 = {
+  fundo: '#DDE9F0',
+  topo: '#EBF3F8',
+  tinta: '#1B2B4B',
+  mute: '#6F819F',
+  coral: '#F26B5B',
+  mostarda: '#F2B134',
+  verde: '#1FA6A0',
+  marinho: '#233A66',
+  creme: '#FFF8EC',
+  destaque: '#F26B5B',
+  cortina: '#F26B5B',
+};
+
+// ---------- fonte ----------
+// Famílias com o prefixo do kit (IS), pra não colidir com outro kit no mesmo estúdio.
+export const FONTE_D = '"IS Archivo", "Archivo", system-ui, sans-serif';
+export const FONTE_T = '"IS Jost", "Jost", system-ui, sans-serif';
+export const FONTE_S = '"IS Jost", "Jost", system-ui, sans-serif';
+const LISTA = [
+  {fam: 'IS Archivo', url: f0Url, peso: '500 800', estilo: 'normal'},
+  {fam: 'IS Jost', url: f1Url, peso: '400 600', estilo: 'normal'},
+];
+if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__kit_IS) {
+  (globalThis as Record<string, unknown>).__kit_IS = true;
+  for (const f of LISTA) {
+    const h = delayRender('isometrico: ' + f.fam);
+    new FontFace(f.fam, `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: cubic-bezier(.2,.8,.2,1) aproximado */
+export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
+/** entrada com overshoot de ~10% (easeOutBack, c1 = 2.2) */
+export const eb = (t: number) => {const x = c01(t) - 1, c = 2.2; return 1 + (c + 1) * x * x * x + c * x * x;};
+/** entra e sai suave */
+export const e3 = (t: number) => {const x = c01(t); return x * x * (3 - 2 * x);};
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+/** uma batida da trilha do kit em quadros */
+export const BATIDA = 15.0;
+
+// ---------- texto ----------
+/** "Usar *IA* já" -> [{t:'Usar ', d:false}, {t:'IA', d:true}, {t:' já', d:false}] */
+export const partes = (texto: string) => texto.split('*').map((t, i) => ({t, d: i % 2 === 1})).filter((p) => p.t.length > 0);
+export const textoLimpo = (t: string) => t.replace(/\*/g, '');
+let canvas: HTMLCanvasElement | null = null;
+const cache = new Map<string, number>();
+export const larguraTexto = (texto: string, tamanho: number, peso = 800, trackingEm = -0.03, familia = FONTE_D): 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`. Nunca palavra cortada. */
+export const caber = (texto: string, tamanho: number, largura = LARGURA_UTIL, peso = 800, trackingEm = -0.03, familia = FONTE_D) => {
+  const w = larguraTexto(textoLimpo(texto), tamanho, peso, trackingEm, familia);
+  return w > largura ? Math.floor(tamanho * (largura / w)) : tamanho;
+};
+
+// ---------- câmera ----------
+export const CAMERA = {"z": 1.02, "zOsc": 0.01, "push": 0.0004, "dx": 10, "dy": 8, "rot": 0.004, "soco": 0.03};

package/kits/isometrico/elementos/index.ts

@@ -0,0 +1,16 @@
+// Tudo que o kit isometrico 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 {AssinaturaMarca} from './AssinaturaMarca';
+export {BlocosMontando} from './BlocosMontando';
+export {CidadeDeDados} from './CidadeDeDados';
+export {LegendaPlaca} from './LegendaPlaca';
+export {RedeDeBlocos} from './RedeDeBlocos';
+export {TextoNoChao} from './TextoNoChao';
+export {Efeito, Trilha, SONS} from './Som';
+export * from './iso';
+export type {NomeSom} from './Som';
+export {Montagem, ELEMENTOS} from './Montagem';
+export type {Plano, CenaPlano, Camada} from './Montagem';

package/kits/isometrico/elementos/iso.tsx

@@ -0,0 +1,49 @@
+// iso: o motor 3D do kit. Projeção de câmera real (elevação de 32°, giro livre em torno do eixo vertical), cubóides com 3 faces
+// sombreadas, sombra no chão, ordenação por profundidade. Unidades do mundo: 1 = um bloco. `S` = pixels por unidade.
+import React from 'react';
+
+export const ELEV = (32 * Math.PI) / 180;
+export type Cubo = {x: number; y: number; z?: number; w: number; d: number; h: number; cor: string; /** quadro em que começa a cair */ cai?: number};
+
+export const proj = (x: number, y: number, z: number, ang: number, S: number) => {
+  const c = Math.cos(ang), s = Math.sin(ang), rx = x * c - y * s, ry = x * s + y * c;
+  return {x: rx * S, y: (ry * Math.sin(ELEV) - z * Math.cos(ELEV)) * S, d: ry};
+};
+
+const hex = (h: string) => {const n = parseInt(h.slice(1), 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255];};
+/** multiplica o brilho de uma cor hex */
+export const tom = (h: string, f: number) => `rgb(${hex(h).map((v) => Math.max(0, Math.min(255, Math.round(v * f)))).join(',')})`;
+
+/** as faces visíveis de um cubóide, já projetadas e sombreadas (luz vindo de cima à esquerda) */
+export const faces = (b: Cubo, ang: number, S: number, dz = 0) => {
+  const {x, y, w, d, h, cor} = b, z = (b.z ?? 0) + dz, hw = w / 2, hd = d / 2;
+  const P = (px: number, py: number, pz: number) => proj(px, py, pz, ang, S);
+  const lista: {pts: {x: number; y: number}[]; n: [number, number]; topo?: boolean}[] = [
+    {topo: true, n: [0, 0], pts: [P(x - hw, y - hd, z + h), P(x + hw, y - hd, z + h), P(x + hw, y + hd, z + h), P(x - hw, y + hd, z + h)]},
+    {n: [1, 0], pts: [P(x + hw, y - hd, z), P(x + hw, y + hd, z), P(x + hw, y + hd, z + h), P(x + hw, y - hd, z + h)]},
+    {n: [-1, 0], pts: [P(x - hw, y + hd, z), P(x - hw, y - hd, z), P(x - hw, y - hd, z + h), P(x - hw, y + hd, z + h)]},
+    {n: [0, 1], pts: [P(x + hw, y + hd, z), P(x - hw, y + hd, z), P(x - hw, y + hd, z + h), P(x + hw, y + hd, z + h)]},
+    {n: [0, -1], pts: [P(x - hw, y - hd, z), P(x + hw, y - hd, z), P(x + hw, y - hd, z + h), P(x - hw, y - hd, z + h)]},
+  ];
+  const c = Math.cos(ang), s = Math.sin(ang);
+  return lista.map((f) => {
+    const nx = f.n[0] * c - f.n[1] * s, ny = f.n[0] * s + f.n[1] * c;
+    if (!f.topo && ny <= 0.02) return null;
+    const luz = f.topo ? 1.12 : 0.78 + (nx * -0.6 + ny * 0.3) * 0.38;
+    return {d: f.pts.map((p) => `${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' '), cor: tom(cor, luz)};
+  }).filter(Boolean) as {d: string; cor: string}[];
+};
+
+/** um cubóide como grupo SVG */
+export const CuboSVG: React.FC<{b: Cubo; ang: number; S: number; dz?: number; opacidade?: number}> = ({b, ang, S, dz = 0, opacidade = 1}) =>
+  <g opacity={opacidade}>{faces(b, ang, S, dz).map((f, i) => <polygon key={i} points={f.d} fill={f.cor} stroke={f.cor} strokeWidth="1.5" strokeLinejoin="round" />)}</g>;
+
+/** sombra achatada no chão (um pouco deslocada pela luz) */
+export const SombraSVG: React.FC<{b: Cubo; ang: number; S: number; escala?: number}> = ({b, ang, S, escala = 1}) => {
+  const hw = (b.w / 2) * escala, hd = (b.d / 2) * escala, o = b.h * 0.35 + (b.z ?? 0) * 0.25;
+  const pts = [[-hw, -hd], [hw, -hd], [hw, hd], [-hw, hd]].map(([px, py]) => proj(b.x + px + o, b.y + py + o * 0.6, 0, ang, S));
+  return <polygon points={pts.map((p) => `${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ')} fill="rgba(27,43,75,0.16)" />;
+};
+
+/** profundidade do centro de um cubóide (menor = mais longe) */
+export const profundidade = (b: Cubo, ang: number) => proj(b.x, b.y, 0, ang, 1).d + (b.z ?? 0) * 0.01;

package/kits/isometrico/exemplos/logo-nodo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 220"><polygon points="110,14 200,62 110,110 20,62" fill="#FFF8EC"/><polygon points="20,62 110,110 110,206 20,158" fill="#F26B5B"/><polygon points="200,62 110,110 110,206 200,158" fill="#C7503F"/></svg>