primocode 10.17.0 → 10.19.0

package/kits/produto-3d/elementos/Produto3D.tsx

@@ -0,0 +1,144 @@
+// Produto3D: o herói do filme. Um produto 3D de verdade (raymarching em JS puro, ver raymarch.ts) em
+// estúdio escuro: luz de borda quente/fria atrás, softbox fraca em cima, sombra de contato e REFLEXO
+// num chão polido. O canvas é transparente: o breu e o feixe de luz vêm do Fundo.
+// A câmera orbita/aproxima por chaves; `explodir` abre a vista explodida (cada peça vai pro seu `abre`)
+// e `cascata` atrasa uma peça da outra, pra elas encaixarem uma a uma.
+import React, {useLayoutEffect, useRef} from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {ALTURA, COR, CURVAS, LARGURA, NomeCurva, seg, trilha} from './base';
+import {desenhar} from './raymarch';
+import {M3, Peca, UsoModelo, V3, aplicar, expandir, mul, rotacao, somar} from './modelos';
+
+const MAXP = 16;
+type Chaves = [number, number][] | number;
+export type ChaveCamera = {em: number; orbita?: number; elevacao?: number; distancia?: number; alvo?: V3};
+export type Animacao = {grupo: string; de: number; ate: number; pos?: V3; rot?: V3; pivo?: V3; curva?: NomeCurva};
+
+export type Produto3DProps = {
+  modelo?: UsoModelo[];
+  pecas?: Peca[];
+  /** cor do corpo anodizado */
+  cor?: string;
+  /** vista explodida: chaves [[quadro, 0..1]] (0 = montado, 1 = aberto) */
+  explodir?: [number, number][];
+  /** curva da vista explodida (padrão `suave`; use `encaixe` pra fechar seco) */
+  curvaExplodir?: NomeCurva;
+  /** atraso em quadros entre uma peça e a próxima (as de fora andam primeiro) */
+  cascata?: number;
+  animar?: Animacao[];
+  /** giro do produto inteiro em graus: Y (giro), X (inclinar), Z (rolar). Número ou chaves */
+  giro?: Chaves; inclinar?: Chaves; rolar?: Chaves;
+  centro?: V3;
+  mover?: {em: number; pos: V3}[];
+  flutuar?: number;
+  camera?: ChaveCamera[];
+  /** campo de visão vertical em graus (lente longa de produto: 20–30) */
+  lente?: number;
+  /** altura do chão, força da sombra (0–1) e do reflexo no chão polido (0–0,6) */
+  chao?: number; sombra?: number; reflexo?: number;
+  /** cor e força (chaves 0–1) do anel de acento */
+  acento?: string; brilho?: Chaves;
+  /** luz geral (chaves 0–1): 0 = breu, revela o produto */
+  luz?: Chaves;
+  /** força da luz de borda (chaves 0–1,5) */
+  borda?: Chaves;
+  opacidade?: Chaves;
+  qualidade?: number;
+};
+
+export const hexRgb = (h: string): V3 => {
+  const s = h.replace('#', ''); const v = parseInt(s.length === 3 ? s.split('').map((c) => c + c).join('') : s, 16);
+  return [((v >> 16) & 255) / 255, ((v >> 8) & 255) / 255, (v & 255) / 255];
+};
+const TIPOS = {caixa: 1, capsula: 2, elipsoide: 3, cilindro: 4, anel: 5, estriado: 6} as const;
+const MATS = {anodizado: 0, metal: 1, borracha: 2, acento: 3, vidro: 4} as const;
+const MAT_COR = {anodizado: COR.anodizado, metal: COR.metal, borracha: COR.borracha, acento: COR.acento, vidro: COR.vidro};
+
+const camera = (f: number, chaves: ChaveCamera[]) => {
+  const tr = (k: 'orbita' | 'elevacao' | 'distancia', p: number) =>
+    trilha(f, chaves.filter((c) => c[k] !== undefined).map((c) => [c.em, c[k] as number] as [number, number]), p);
+  const alvos = chaves.filter((c) => c.alvo);
+  const alvo: V3 = [0, 1, 2].map((i) => trilha(f, alvos.map((c) => [c.em, c.alvo![i]] as [number, number]), 0)) as V3;
+  return {orbita: tr('orbita', 0), elevacao: tr('elevacao', 8), distancia: tr('distancia', 7), alvo};
+};
+
+export const Produto3D: React.FC<Produto3DProps> = ({
+  modelo, pecas = [], cor, explodir, curvaExplodir = 'suave', cascata = 2, animar = [], giro, inclinar, rolar,
+  centro = [0, 0, 0], mover, flutuar = 0.02, camera: chavesCam = [{em: 0}], lente = 24, chao = -1.1, sombra = 0.6,
+  reflexo = 0.38, acento = COR.acento, brilho = 0.15, luz = 1, borda = 1, opacidade, qualidade = 1,
+}) => {
+  const f = useCurrentFrame();
+  const ref = useRef<HTMLCanvasElement>(null);
+  const dpr = typeof window === 'undefined' ? 1 : Math.min(1, window.devicePixelRatio || 1);
+  const W = Math.round(LARGURA * dpr * qualidade), H = Math.round(ALTURA * dpr * qualidade);
+
+  const todas = [...expandir(modelo), ...pecas].slice(0, MAXP) as (Peca & {rotM?: M3})[];
+  // ordem da cascata: as peças que andam mais longe saem primeiro e voltam por último
+  const grupos = [...new Map(todas.map((pc) => [pc.grupo ?? '', pc.abre ? Math.hypot(...pc.abre) : 0] as [string, number])).entries()]
+    .sort((a, b) => b[1] - a[1]).map((g) => g[0]);
+  const Rraiz = rotacao([trilha(f, inclinar, 0), trilha(f, giro, 0), trilha(f, rolar, 0)]);
+  const desl: V3 = mover?.length ? [0, 1, 2].map((i) => trilha(f, mover.map((m) => [m.em, m.pos[i]] as [number, number]), 0)) as V3 : [0, 0, 0];
+  const fy = Math.sin((f / 30) * Math.PI * 2 / 3.4) * flutuar;
+  const mundo = todas.map((pc) => {
+    let pos: V3 = pc.pos ?? [0, 0, 0];
+    let R: M3 = pc.rotM ?? rotacao(pc.rot);
+    if (explodir && pc.abre) {
+      const k = trilha(f - grupos.indexOf(pc.grupo ?? '') * cascata, explodir, 0, curvaExplodir);
+      pos = somar(pos, [pc.abre[0] * k, pc.abre[1] * k, pc.abre[2] * k]);
+    }
+    for (const a of animar) {
+      if (!pc.grupo || !(pc.grupo === a.grupo || pc.grupo.startsWith(a.grupo + '.'))) continue;
+      const t = CURVAS[a.curva ?? 'suave'](seg(f, a.de, a.ate));
+      if (t <= 0) continue;
+      if (a.rot) {
+        const Ra = rotacao([a.rot[0] * t, a.rot[1] * t, a.rot[2] * t]); const pv = a.pivo ?? [0, 0, 0];
+        pos = somar(pv, aplicar(Ra, [pos[0] - pv[0], pos[1] - pv[1], pos[2] - pv[2]])); R = mul(Ra, R);
+      }
+      if (a.pos) pos = somar(pos, [a.pos[0] * t, a.pos[1] * t, a.pos[2] * t]);
+    }
+    pos = somar(somar(centro, aplicar(Rraiz, [pos[0] - centro[0], pos[1] - centro[1], pos[2] - centro[2]])), [desl[0], desl[1] + fy, desl[2]]);
+    R = mul(Rraiz, R);
+    return {pc, pos, R};
+  });
+  const ext = (pc: Peca) => {
+    const [a, b, c] = pc.tam; const r = pc.raio ?? 0;
+    if (pc.forma === 'capsula') return b / 2 + Math.max(a, c);
+    if (pc.forma === 'anel') return a + b;
+    if (pc.forma === 'cilindro' || pc.forma === 'estriado') return Math.hypot(a, b) + r;
+    return Math.hypot(a, b, c) + r;
+  };
+  const sol = mundo.filter((m) => (m.pc.uniao ?? 0) >= 0);
+  const cx = sol.reduce((s, m) => somar(s, m.pos), [0, 0, 0] as V3).map((v) => v / Math.max(1, sol.length)) as V3;
+  const raio = sol.reduce((r, m) => Math.max(r, Math.hypot(m.pos[0] - cx[0], m.pos[1] - cx[1], m.pos[2] - cx[2]) + ext(m.pc)), 0.1) + 0.05;
+
+  const cam = camera(f, chavesCam);
+  const el = (cam.elevacao * Math.PI) / 180, az = (cam.orbita * Math.PI) / 180;
+  const olho: V3 = [cam.alvo[0] + cam.distancia * Math.cos(el) * Math.sin(az), cam.alvo[1] + cam.distancia * Math.sin(el), cam.alvo[2] + cam.distancia * Math.cos(el) * Math.cos(az)];
+  const forca = trilha(f, brilho, 0);
+  const luzK = trilha(f, luz, 1), bordaK = trilha(f, borda, 1);
+  const op = trilha(f, opacidade, 1);
+
+  useLayoutEffect(() => {
+    const cv = ref.current; if (!cv) return;
+    const ctx = cv.getContext('2d'); if (!ctx) return;
+    const N = mundo.length;
+    const tipo = new Int8Array(N), pos = new Float64Array(N * 3), tam = new Float64Array(N * 3), rr = new Float64Array(N),
+      rot = new Float64Array(N * 9), mat = new Int8Array(N), corA = new Float64Array(N * 3), un = new Float64Array(N),
+      corte = new Float64Array(N * 2), ex = new Float64Array(N);
+    mundo.forEach(({pc, pos: p, R}, i) => {
+      tipo[i] = TIPOS[pc.forma]; pos.set(p, i * 3); tam.set(pc.tam, i * 3); rr[i] = pc.raio ?? 0;
+      rot.set(R, i * 9);
+      const m = pc.material ?? 'anodizado'; mat[i] = MATS[m];
+      corA.set(hexRgb(pc.cor ?? (m === 'anodizado' ? cor ?? MAT_COR[m] : MAT_COR[m])), i * 3);
+      un[i] = pc.uniao ?? 0; corte.set(pc.corte ?? [0, 0], i * 2); ex[i] = ext(pc) + Math.max(0, pc.uniao ?? 0) + 0.01;
+    });
+    desenhar(ctx, W, H, {
+      n: N, tipo, pos, tam, raio: rr, rot, mat, cor: corA, un, corte, ext: ex, esfera: [cx[0], cx[1], cx[2], raio],
+      chao, sombra, reflexo, acento: hexRgb(acento), brilho: forca, luz: luzK, borda: bordaK,
+    }, {olho, alvo: cam.alvo, tan: Math.tan(((lente / 2) * Math.PI) / 180)});
+  });
+
+  return <AbsoluteFill style={{opacity: op}}>
+    <canvas ref={ref} width={W} height={H} style={{width: '100%', height: '100%'}} />
+  </AbsoluteFill>;
+};

package/kits/produto-3d/elementos/RotuloChamada.tsx

@@ -0,0 +1,43 @@
+// RotuloChamada: a etiqueta técnica do filme. Um ponto no detalhe do produto, uma linha fina que
+// se desenha até o texto, e o texto em mono 24 px com espaçamento 0,18 em. No máximo 1 por cena.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_M, TIPO, entrada, saida, seg} from './base';
+import {useDuracaoCena} from './Cena';
+
+export type RotuloChamadaProps = {
+  /** ponto do produto que o rótulo aponta (px na tela 1080×1920) */
+  ponto: [number, number];
+  /** onde o texto começa (px) */
+  texto: [number, number];
+  titulo: string;
+  sub?: string;
+  inicio?: number;
+  sai?: number;
+};
+
+export const RotuloChamada: React.FC<RotuloChamadaProps> = ({ponto, texto, titulo, sub, inicio = 0, sai = -1}) => {
+  const f = useCurrentFrame();
+  const dur = useDuracaoCena();
+  const fim = sai < 0 ? dur + 99 : sai;
+  const tOut = entrada(seg(f, fim, fim + 8));
+  const tp = saida(seg(f, inicio, inicio + 8));
+  const tl = saida(seg(f, inicio + 3, inicio + 16));
+  const tt = saida(seg(f, inicio + 10, inicio + 22));
+  const esq = texto[0] < ponto[0];
+  const fimLinha: [number, number] = [texto[0] + (esq ? 0 : -14), texto[1] + 14];
+  const lx = ponto[0] + (fimLinha[0] - ponto[0]) * tl, ly = ponto[1] + (fimLinha[1] - ponto[1]) * tl;
+  return <div style={{position: 'absolute', inset: 0, opacity: 1 - tOut}}>
+    <svg width={1080} height={1920} style={{position: 'absolute', inset: 0}}>
+      <circle cx={ponto[0]} cy={ponto[1]} r={7 * tp} fill={COR.acento} />
+      <circle cx={ponto[0]} cy={ponto[1]} r={7 + 22 * seg(f, inicio, inicio + 18)} fill="none" stroke={COR.acento} strokeWidth={2} opacity={1 - seg(f, inicio, inicio + 18)} />
+      <line x1={ponto[0]} y1={ponto[1]} x2={lx} y2={ly} stroke={COR.texto} strokeOpacity={0.55} strokeWidth={2} />
+    </svg>
+    <div style={{position: 'absolute', left: esq ? undefined : texto[0], right: esq ? 1080 - texto[0] : undefined, top: texto[1], textAlign: esq ? 'right' : 'left',
+      fontFamily: FONTE_M, fontWeight: 600, fontSize: TIPO.rotulo.tamanho, letterSpacing: `${TIPO.rotulo.tracking}em`, color: COR.texto, textTransform: 'uppercase',
+      opacity: tt, transform: `translateX(${(1 - tt) * (esq ? 20 : -20)}px)`, whiteSpace: 'nowrap'}}>
+      {titulo}
+      {sub && <div style={{color: COR.apagado, fontWeight: 400, marginTop: 8, fontSize: 21}}>{sub}</div>}
+    </div>
+  </div>;
+};

package/kits/produto-3d/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/produto-3d/elementos/TituloMinimo.tsx

@@ -0,0 +1,45 @@
+// TituloMinimo: a única tipografia grande do filme. Syncopate 700, CAIXA ALTA, alinhada à esquerda,
+// cada linha sobe de dentro de uma máscara enquanto o espaçamento fecha de 0,3 em → 0,04 em.
+// Um traço de acento de 56 px abre a primeira linha. Sai com desfoque e queda de 0,9 → 0.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_D, SEGURA, TIPO, caber, entrada, lerp, saida, seg} from './base';
+import {useDuracaoCena} from './Cena';
+
+export type TituloMinimoProps = {
+  linhas: string[];
+  /** y do topo da primeira linha (área segura: 168–1330) */
+  y?: number;
+  x?: number;
+  tamanho?: number;
+  inicio?: number;
+  /** quadros entre linhas */
+  intervalo?: number;
+  /** quadro (relativo) em que sai; −1 = fica até o corte */
+  sai?: number;
+  /** palavra da última linha pintada com o acento */
+  acentoUltima?: boolean;
+};
+
+export const TituloMinimo: React.FC<TituloMinimoProps> = ({linhas, y = 1080, x = SEGURA.lado, tamanho = TIPO.titulo.tamanho, inicio = 0, intervalo = 5, sai = -1, acentoUltima = false}) => {
+  const f = useCurrentFrame();
+  const dur = useDuracaoCena();
+  const fim = sai < 0 ? dur + 99 : sai;
+  const tOut = entrada(seg(f, fim, fim + 9));
+  const tam = Math.min(...linhas.map((l) => caber(l, tamanho, 1080 - x - SEGURA.lado, FONTE_D, 700, TIPO.titulo.tracking)));
+  const traco = saida(seg(f, inicio - 4, inicio + 10));
+  return <div style={{position: 'absolute', left: x, top: y, opacity: 1 - tOut, filter: tOut > 0 ? `blur(${tOut * 10}px)` : undefined, transform: `translateY(${tOut * 24}px)`}}>
+    <div style={{width: 56 * traco, height: 4, background: COR.acento, marginBottom: 22}} />
+    {linhas.map((l, i) => {
+      const t = saida(seg(f, inicio + i * intervalo, inicio + i * intervalo + 16));
+      const ultima = acentoUltima && i === linhas.length - 1;
+      return <div key={i} style={{overflow: 'hidden', height: tam * 1.18}}>
+        <div style={{
+          fontFamily: FONTE_D, fontWeight: 700, fontSize: tam, lineHeight: 1.18, whiteSpace: 'nowrap', textTransform: 'uppercase',
+          letterSpacing: `${lerp(0.3, TIPO.titulo.tracking, t)}em`, color: ultima ? COR.acento : COR.texto,
+          transform: `translateY(${(1 - t) * 105}%)`,
+        }}>{l}</div>
+      </div>;
+    })}
+  </div>;
+};

package/kits/produto-3d/elementos/VarreduraLuz.tsx

@@ -0,0 +1,22 @@
+// VarreduraLuz: o risco de luz anamórfico que atravessa a tela no golpe (o "brilho caro" de lente).
+// Uma linha horizontal de 3 px, com halo azulado de 80 px, que corre da esquerda à direita em `dura` quadros.
+// Só no golpe: no máximo 2 por vídeo.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {seg, suave} from './base';
+
+export type VarreduraLuzProps = {em: number; y?: number; dura?: number; forca?: number};
+
+export const VarreduraLuz: React.FC<VarreduraLuzProps> = ({em, y = 960, dura = 16, forca = 1}) => {
+  const f = useCurrentFrame();
+  const t = seg(f, em, em + dura);
+  if (t <= 0 || t >= 1) return null;
+  const cx = -300 + suave(t) * 1680;
+  const a = Math.sin(t * Math.PI) * forca;
+  return <div style={{position: 'absolute', inset: 0, pointerEvents: 'none', mixBlendMode: 'screen'}}>
+    <div style={{position: 'absolute', left: cx - 700, top: y - 40, width: 1400, height: 80, opacity: a * 0.5,
+      background: 'radial-gradient(50% 50% at 50% 50%, rgba(140,180,255,.55) 0%, rgba(140,180,255,0) 100%)'}} />
+    <div style={{position: 'absolute', left: cx - 520, top: y - 1.5, width: 1040, height: 3, opacity: a,
+      background: 'linear-gradient(90deg, rgba(200,220,255,0) 0%, rgba(235,242,255,1) 50%, rgba(200,220,255,0) 100%)'}} />
+  </div>;
+};

package/kits/produto-3d/elementos/base.ts

@@ -0,0 +1,109 @@
+// Base do kit produto-3d (v2, filme de produto escuro): cores, fontes, curvas e medidas.
+// Todo número visual sai daqui. Os elementos importam só este arquivo, 'react' e 'remotion'.
+import {continueRender, delayRender} from 'remotion';
+import syncopateUrl from '../assets/fontes/syncopate-latin.woff2';
+import plexUrl from '../assets/fontes/plex-mono.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: 88};
+export const LARGURA_UTIL = LARGURA - SEGURA.lado * 2; // 904 px
+
+// ---------- cor (ver regras/cor.md) ----------
+export const COR = {
+  /** o breu do estúdio e o chão polido */
+  breu: '#030304',
+  chao: '#07080A',
+  /** o poço de luz que cai do teto (volume) */
+  feixe: '#9AA3B5',
+  /** corpo do produto: alumínio anodizado quase preto */
+  anodizado: '#1B1C21',
+  borracha: '#101114',
+  metal: '#B9BEC6',
+  vidro: '#05070C',
+  /** luz de borda: esquerda quente, direita fria */
+  bordaQuente: '#FFE6CC',
+  bordaFria: '#D2E4FF',
+  texto: '#F2F2F0',
+  apagado: '#7B7F88',
+  linha: '#4A4E57',
+  /** o ÚNICO acento: o anel do produto e um traço na tipografia */
+  acento: '#FF5A1F',
+};
+
+// ---------- fonte ----------
+// Famílias com o prefixo do kit (P3), pra não colidir com outro kit no mesmo estúdio.
+export const FONTE_D = '"P3 Syncopate", "Syncopate", system-ui, sans-serif';
+export const FONTE_M = '"P3 Plex Mono", "IBM Plex Mono", ui-monospace, monospace';
+if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__kitP3v2) {
+  (globalThis as Record<string, unknown>).__kitP3v2 = true;
+  for (const [fam, url, peso] of [['P3 Syncopate', syncopateUrl, '700'], ['P3 Plex Mono', plexUrl, '400 600']]) {
+    const h = delayRender('produto-3d: ' + fam);
+    new FontFace(fam, `url(${url}) format('woff2')`, {weight: peso, style: 'normal'}).load()
+      .then((ff) => {document.fonts.add(ff); continueRender(h);})
+      .catch(() => continueRender(h));
+  }
+}
+/** tamanhos (tela 1080×1920) */
+export const TIPO = {
+  titulo: {tamanho: 68, tracking: 0.04},
+  marca: {tamanho: 92, tracking: 0.08},
+  numero: {tamanho: 150, tracking: 0},
+  rotulo: {tamanho: 27, tracking: 0.16},
+};
+
+// ---------- tempo e curva ----------
+export const c01 = (t: number) => Math.max(0, Math.min(1, t));
+export const seg = (f: number, a: number, b: number) => (b <= a ? (f >= b ? 1 : 0) : c01((f - a) / (b - a)));
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+export const bezier = (x1: number, y1: number, x2: number, y2: number) => {
+  const cx = 3 * x1, bx = 3 * (x2 - x1) - cx, ax = 1 - cx - bx;
+  const cy = 3 * y1, by = 3 * (y2 - y1) - cy, ay = 1 - cy - by;
+  const sx = (t: number) => ((ax * t + bx) * t + cx) * t;
+  return (x: number) => {
+    x = c01(x); let t = x;
+    for (let i = 0; i < 8; i++) {const d = (3 * ax * t + 2 * bx) * t + cx; const e = sx(t) - x; if (Math.abs(e) < 1e-5 || d === 0) break; t -= e / d;}
+    t = c01(t); return ((ay * t + by) * t + cy) * t;
+  };
+};
+/** câmera e peças: arranca devagar, pousa longo (a calma cara do filme) */
+export const suave = bezier(0.5, 0, 0.15, 1);
+/** entrada de texto: sai rápido, pousa longo */
+export const saida = bezier(0.16, 1, 0.3, 1);
+/** saída: acelera pra fora */
+export const entrada = bezier(0.7, 0, 0.84, 0);
+/** encaixe: acelera e assenta seco no fim (o "clac" da vista explodida) */
+export const encaixe = bezier(0.65, 0, 0.95, 0.4);
+export const CURVAS = {suave, saida, entrada, encaixe, linear: (t: number) => c01(t)} as const;
+export type NomeCurva = keyof typeof CURVAS;
+
+/** trilha de chaves [[quadro, valor], ...] → valor no quadro f */
+export const trilha = (f: number, chaves: [number, number][] | number | undefined, padrao = 0, curva: NomeCurva = 'suave'): number => {
+  if (chaves === undefined) return padrao;
+  if (typeof chaves === 'number') return chaves;
+  if (!chaves.length) return padrao;
+  if (f <= chaves[0][0]) return chaves[0][1];
+  for (let i = 1; i < chaves.length; i++) {
+    const [qa, va] = chaves[i - 1], [qb, vb] = chaves[i];
+    if (f <= qb) return lerp(va, vb, CURVAS[curva](seg(f, qa, qb)));
+  }
+  return chaves[chaves.length - 1][1];
+};
+/** uma batida da trilha em quadros */
+export const BATIDA = 18;
+
+// ---------- medida de texto ----------
+let canvas: HTMLCanvasElement | null = null;
+export const larguraTexto = (texto: string, tamanho: number, familia: string, peso: number, trackingEm: number): number => {
+  if (typeof document === 'undefined') return texto.length * tamanho * 0.8;
+  canvas = canvas || document.createElement('canvas');
+  const ctx = canvas.getContext('2d'); if (!ctx) return texto.length * tamanho * 0.8;
+  ctx.font = `${peso} ${tamanho}px ${familia}`;
+  return ctx.measureText(texto).width + texto.length * trackingEm * tamanho;
+};
+/** o maior tamanho até `tamanho` em que o texto cabe em `largura`. Nunca corta palavra. */
+export const caber = (texto: string, tamanho: number, largura = LARGURA_UTIL, familia = FONTE_D, peso = 700, trackingEm = 0.04) => {
+  const w = larguraTexto(texto, tamanho, familia, peso, trackingEm);
+  return w > largura ? Math.floor(tamanho * (largura / w)) : tamanho;
+};

package/kits/produto-3d/elementos/index.ts

@@ -0,0 +1,13 @@
+export * from './base';
+export * from './modelos';
+export * from './Produto3D';
+export * from './Fundo';
+export * from './Camera';
+export * from './Cena';
+export * from './Som';
+export * from './TituloMinimo';
+export * from './RotuloChamada';
+export * from './NumeroDestaque';
+export * from './VarreduraLuz';
+export * from './AssinaturaMarca';
+export * from './Montagem';

package/kits/produto-3d/elementos/modelos.ts

@@ -0,0 +1,92 @@
+// Modelos 3D do kit: o produto é montado com PEÇAS (formas com borda arredondada) que o Produto3D
+// desenha com luz de estúdio escuro. Cada peça pode ter `abre`: para onde ela vai na VISTA EXPLODIDA.
+// A demo é uma lente fictícia (KAIRO 35); qualquer objeto de revolução ou de caixas cabe aqui
+// (relógio, fone, caixa de som, garrafa, controle, câmera): a IA escreve as peças.
+
+export type V3 = [number, number, number];
+export type Forma = 'caixa' | 'capsula' | 'elipsoide' | 'cilindro' | 'anel' | 'estriado';
+export type Material = 'anodizado' | 'metal' | 'borracha' | 'acento' | 'vidro';
+
+export type Peca = {
+  forma: Forma;
+  /** caixa/elipsoide: meias medidas x,y,z · capsula: [raio de baixo, altura, raio de cima] ·
+   *  cilindro: [raio, meia altura, -] · estriado: [raio, meia altura, nº de sulcos] · anel: [raio maior, raio do tubo, -] */
+  tam: V3;
+  /** arredondamento da borda (caixa, cilindro, estriado) */
+  raio?: number;
+  pos?: V3;
+  /** graus, ordem Y·X·Z */
+  rot?: V3;
+  material?: Material;
+  cor?: string;
+  /** >0 funde com as peças anteriores; <0 ENTALHA (cava as peças anteriores; o entalhe pinta a parede com a cor dele) */
+  uniao?: number;
+  /** guarda só um lado do plano y = altura (no espaço da peça): [+1 → acima | −1 → abaixo, altura] */
+  corte?: [number, number];
+  /** nome do grupo que o `animar` do Produto3D move junto */
+  grupo?: string;
+  /** deslocamento da peça com a vista explodida em 100% (espaço do modelo) */
+  abre?: V3;
+};
+
+export type UsoModelo = {nome: NomeModelo; pos?: V3; rot?: V3; escala?: number; grupo?: string; cor?: string; opcoes?: Record<string, number>};
+
+// ---------- matemática mínima (matriz 3×3 em linhas) ----------
+export type M3 = number[];
+const rad = (g: number) => (g * Math.PI) / 180;
+export const mul = (a: M3, b: M3): M3 => {
+  const r = new Array(9).fill(0);
+  for (let i = 0; i < 3; i++) for (let j = 0; j < 3; j++) for (let k = 0; k < 3; k++) r[i * 3 + j] += a[i * 3 + k] * b[k * 3 + j];
+  return r;
+};
+export const aplicar = (m: M3, v: V3): V3 => [
+  m[0] * v[0] + m[1] * v[1] + m[2] * v[2], m[3] * v[0] + m[4] * v[1] + m[5] * v[2], m[6] * v[0] + m[7] * v[1] + m[8] * v[2]];
+/** rotação em graus, aplicada na ordem Z, depois X, depois Y (R = Ry·Rx·Rz) */
+export const rotacao = (r: V3 = [0, 0, 0]): M3 => {
+  const [x, y, z] = r.map(rad);
+  const Rx = [1, 0, 0, 0, Math.cos(x), -Math.sin(x), 0, Math.sin(x), Math.cos(x)];
+  const Ry = [Math.cos(y), 0, Math.sin(y), 0, 1, 0, -Math.sin(y), 0, Math.cos(y)];
+  const Rz = [Math.cos(z), -Math.sin(z), 0, Math.sin(z), Math.cos(z), 0, 0, 0, 1];
+  return mul(Ry, mul(Rx, Rz));
+};
+export const somar = (a: V3, b: V3): V3 => [a[0] + b[0], a[1] + b[1], a[2] + b[2]];
+export const vezes = (a: V3, k: number): V3 => [a[0] * k, a[1] * k, a[2] * k];
+
+// ---------- modelos prontos ----------
+/** lente fotográfica: eixo óptico em +y (a frente), baioneta embaixo. Ø 1,47 × 1,7 de altura.
+ *  Grupos: baioneta · traseira · abertura · acento · foco · frente · vidro1 (frontal) · vidro2 · vidro3.
+ *  Os vidros 2 e 3 ficam escondidos dentro do corpo: só aparecem na vista explodida. */
+const lente = (): Peca[] => [
+  {forma: 'cilindro', tam: [0.6, 0.05, 0], raio: 0.02, pos: [0, -1.0, 0], material: 'metal', grupo: 'baioneta', abre: [0, -0.95, 0]},
+  {forma: 'cilindro', tam: [0.66, 0.16, 0], raio: 0.03, pos: [0, -0.8, 0], material: 'anodizado', grupo: 'traseira', abre: [0, -0.62, 0]},
+  {forma: 'estriado', tam: [0.69, 0.1, 48], raio: 0.015, pos: [0, -0.53, 0], material: 'anodizado', grupo: 'abertura', abre: [0, -0.27, 0]},
+  {forma: 'cilindro', tam: [0.7, 0.02, 0], raio: 0.008, pos: [0, -0.405, 0], material: 'acento', grupo: 'acento', abre: [0, -0.09, 0]},
+  {forma: 'estriado', tam: [0.735, 0.26, 96], raio: 0.03, pos: [0, -0.12, 0], material: 'borracha', grupo: 'foco', abre: [0, 0, 0]},
+  {forma: 'cilindro', tam: [0.72, 0.24, 0], raio: 0.04, pos: [0, 0.4, 0], material: 'anodizado', grupo: 'frente', abre: [0, 0.62, 0]},
+  // o poço da frente: cava o corpo e pinta a parede de preto
+  {forma: 'cilindro', tam: [0.6, 0.2, 0], pos: [0, 0.62, 0], material: 'borracha', cor: '#060607', uniao: -0.012, grupo: 'frente', abre: [0, 0.62, 0]},
+  {forma: 'anel', tam: [0.6, 0.026, 0], pos: [0, 0.64, 0], material: 'metal', grupo: 'frente', abre: [0, 0.62, 0]},
+  {forma: 'elipsoide', tam: [0.44, 0.09, 0.44], pos: [0, -0.55, 0], material: 'vidro', grupo: 'vidro3', abre: [0, -0.5, 0]},
+  {forma: 'elipsoide', tam: [0.5, 0.1, 0.5], pos: [0, 0.1, 0], material: 'vidro', grupo: 'vidro2', abre: [0, 0.42, 0]},
+  {forma: 'elipsoide', tam: [0.575, 0.13, 0.575], pos: [0, 0.46, 0], material: 'vidro', grupo: 'vidro1', abre: [0, 1.02, 0]},
+];
+
+export const MODELOS = {lente} as const;
+export type NomeModelo = keyof typeof MODELOS;
+
+/** expande os modelos prontos em peças, já com posição/rotação/escala aplicadas */
+export const expandir = (usos: UsoModelo[] = []): (Peca & {rotM: M3})[] => usos.flatMap((u) => {
+  const R = rotacao(u.rot), k = u.escala ?? 1, p0 = u.pos ?? [0, 0, 0];
+  return MODELOS[u.nome]().map((pc) => ({
+    ...pc,
+    tam: (pc.forma === 'estriado' ? [pc.tam[0] * k, pc.tam[1] * k, pc.tam[2]] : vezes(pc.tam, k)) as V3,
+    raio: pc.raio !== undefined ? pc.raio * k : undefined,
+    uniao: pc.uniao !== undefined ? pc.uniao * k : undefined,
+    corte: pc.corte ? [pc.corte[0], pc.corte[1] * k] as [number, number] : undefined,
+    pos: somar(p0, aplicar(R, vezes(pc.pos ?? [0, 0, 0], k))),
+    abre: pc.abre ? aplicar(R, vezes(pc.abre, k)) : undefined,
+    rotM: mul(R, rotacao(pc.rot)),
+    cor: u.cor && pc.material === 'anodizado' && !pc.cor ? u.cor : pc.cor,
+    grupo: u.grupo && pc.grupo ? `${u.grupo}.${pc.grupo}` : (u.grupo ?? pc.grupo),
+  }));
+});