primocode 10.17.0 → 10.19.0

package/kits/apple-tipografico/elementos/Produto3D.tsx

@@ -0,0 +1,140 @@
+// Produto3D: o herói do filme. Um produto 3D de verdade (raymarching em JS puro, ver raymarch.ts) com
+// material cetim/metal, luz de estúdio (softbox em cima à esquerda, recorte à direita, céu branco) e
+// sombra de contato macia num chão INVISÍVEL: o canvas é transparente, então o produto pousa em
+// qualquer Fundo (estúdio, cartão radial, preto). A câmera orbita/aproxima por chaves.
+//
+// Trocar o produto: `modelo` (prontos de modelos.ts) e/ou `pecas` (formas livres). Ver SKILL.md.
+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 = {
+  /** modelos prontos posicionados (ex.: [{nome:'fone', rot:[0,-20,0]}]) */
+  modelo?: UsoModelo[];
+  /** peças livres, somadas ao modelo (é assim que entra qualquer produto) */
+  pecas?: Peca[];
+  /** cor do corpo (peças de cetim sem cor própria) */
+  cor?: string;
+  /** move grupos de peças: separar, abrir tampa, enfileirar. Quadros relativos à cena. */
+  animar?: Animacao[];
+  /** giro do produto inteiro em graus: eixo Y (giro), X (inclinar), Z (rolar). Número ou chaves [[quadro, graus]] */
+  giro?: Chaves; inclinar?: Chaves; rolar?: Chaves;
+  /** ponto em volta do qual o produto gira */
+  centro?: V3;
+  /** deslocamento do produto inteiro (x, y, z) em chaves */
+  mover?: {em: number; pos: V3}[];
+  /** amplitude da flutuação (unidades; 0,03 = respiração quase invisível) */
+  flutuar?: number;
+  /** a câmera: chaves {em, orbita°, elevacao°, distancia, alvo} — curva suave entre elas */
+  camera?: ChaveCamera[];
+  /** campo de visão vertical em graus (lente longa de produto: 24–30) */
+  lente?: number;
+  /** altura do chão (y) e força da sombra de contato (0–1) */
+  chao?: number; sombra?: number;
+  /** cor e intensidade (chaves 0–1) do brilho das peças `brilho` */
+  acento?: string; brilho?: Chaves;
+  /** opacidade em chaves (padrão 1) */
+  opacidade?: Chaves;
+  /** resolução do canvas em relação à do render (1 = nítido; 0,5 = rascunho rápido no estúdio) */
+  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} as const;
+const MATS = {cetim: 0, metal: 1, grafite: 2, brilho: 3} as const;
+const MAT_COR = {cetim: COR.produto, metal: COR.metal, grafite: COR.grafite, brilho: COR.produto};
+
+/** a câmera no quadro f, interpolando cada valor entre as chaves que o definem */
+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, 0.2, 0][i])) 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, animar = [], giro, inclinar, rolar, centro = [0, 0, 0], mover, flutuar = 0.025,
+  camera: chavesCam = [{em: 0}], lente = 26, chao = -1.2, sombra = 0.55, acento = COR.acento, brilho = 0,
+  opacidade, qualidade = 1,
+}) => {
+  const f = useCurrentFrame();
+  const ref = useRef<HTMLCanvasElement>(null);
+  // o canvas segue a escala do render (o Remotion põe devicePixelRatio = scale): 540 px no preview, 1080 no final
+  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);
+
+  // ---- monta as peças deste quadro (CPU) ----
+  const todas = [...expandir(modelo), ...pecas].slice(0, MAXP) as (Peca & {rotM?: M3})[];
+  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.2) * flutuar;
+  const mundo = todas.map((pc) => {
+    let pos: V3 = pc.pos ?? [0, 0, 0];
+    let R: M3 = pc.rotM ?? rotacao(pc.rot);
+    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};
+  });
+  // esfera que envolve tudo (o raio só é marchado dentro dela)
+  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') 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 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 ?? 'cetim'; mat[i] = MATS[m];
+      corA.set(hexRgb(pc.cor ?? (m === 'cetim' || m === 'brilho' ? 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, sombraCor: hexRgb(COR.sombra), acento: hexRgb(acento), brilho: forca, estudio: hexRgb(COR.estudio),
+    }, {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/apple-tipografico/elementos/ProdutoFoto.tsx

@@ -0,0 +1,47 @@
+// ProdutoFoto: o produto do cliente a partir de FOTO RECORTADA (PNG transparente) ou da sequência de
+// quadros de um giro 3D (exportado do Blender/Spline/Keyshot), pousado no estúdio com sombra de contato
+// macia. É o caminho pra qualquer produto que não dá pra montar com peças no Produto3D.
+import React from 'react';
+import {AbsoluteFill, Img, useCurrentFrame} from 'remotion';
+import {COR, saida as curvaSaida, seg, trilha} from './base';
+import {useDuracaoCena} from './Cena';
+
+type Chaves = [number, number][] | number;
+export type ProdutoFotoProps = {
+  /** a foto recortada (PNG com fundo transparente) */
+  src?: string;
+  /** OU os quadros de um giro 3D, tocados ao longo da cena (`giroQuadros` por segundo) */
+  quadros?: string[];
+  quadrosPorSegundo?: number;
+  /** largura do produto em px e o centro dele na tela */
+  largura?: number; x?: number; y?: number;
+  /** chaves [[quadro, valor]]: escala (empurrão), giro 2D em graus, subida em px */
+  escala?: Chaves; giro?: Chaves; subir?: Chaves;
+  /** flutuação em px (o filme: 6–10) e força da sombra (0–1) */
+  flutuar?: number; sombra?: number;
+  /** como entra: subindo com desfoque, dissolvendo ou já no lugar */
+  entrada?: 'subir' | 'dissolver' | 'nenhuma';
+};
+
+export const ProdutoFoto: React.FC<ProdutoFotoProps> = ({
+  src, quadros, quadrosPorSegundo = 30, largura = 700, x = 540, y = 860, escala, giro, subir,
+  flutuar = 8, sombra = 0.5, entrada = 'subir',
+}) => {
+  const f = useCurrentFrame();
+  const dur = useDuracaoCena();
+  const e = entrada === 'nenhuma' ? 1 : curvaSaida(seg(f, 0, 16));
+  const k = trilha(f, escala, 1) * (entrada === 'subir' ? 0.96 + 0.04 * e : 1);
+  const alt = trilha(f, subir, 0) + Math.sin((f / 30) * Math.PI * 2 / 3.2) * flutuar + (entrada === 'subir' ? (1 - e) * 120 : 0);
+  const imagem = quadros?.length ? quadros[Math.min(quadros.length - 1, Math.floor((f / 30) * quadrosPorSegundo) % quadros.length)] : src;
+  void dur;
+  // a sombra fica no chão: encolhe e clareia quando o produto sobe
+  const sobe = Math.max(0, alt) / 200;
+  return <AbsoluteFill>
+    <div style={{position: 'absolute', left: x - largura * 0.42 * k, width: largura * 0.84 * k, top: y + largura * 0.36 * k - 26, height: 52 * k,
+      borderRadius: '50%', background: `radial-gradient(closest-side, ${COR.sombra}, transparent)`, opacity: sombra * e * (1 - Math.min(0.7, sobe)) * 0.7,
+      transform: `scaleX(${1 + sobe * 0.3})`, filter: `blur(${10 + sobe * 16}px)`}} />
+    {imagem && <Img src={imagem} style={{position: 'absolute', left: x - (largura / 2), top: y - largura * 0.5, width: largura, height: largura, objectFit: 'contain',
+      opacity: entrada === 'nenhuma' ? 1 : Math.min(1, e * 1.4),
+      transform: `translateY(${-alt}px) rotate(${trilha(f, giro, 0)}deg) scale(${k})`, filter: e < 0.99 ? `blur(${(1 - e) * 10}px)` : undefined}} />}
+  </AbsoluteFill>;
+};

package/kits/apple-tipografico/elementos/Som.tsx

@@ -0,0 +1,40 @@
+// Som: os efeitos e a trilha do kit. Efeitos são sintetizados (MotionCraft `sfx make`, pacote soft-pop);
+// a trilha é um trecho de 8,6 s da trilha aprovada (tech, 125 bpm). 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/tech-claro-125bpm.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/apple-tipografico/elementos/base.ts

@@ -0,0 +1,111 @@
+// Base do kit apple-tipografico (v2, filme de produto): cores, fonte, curvas e medidas.
+// Todo número visual sai daqui. Os elementos importam só este arquivo, 'react' e 'remotion'.
+import {continueRender, delayRender} from 'remotion';
+import interUrl from '../assets/fontes/inter-latin-500-800.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 (medida no filme de referência, ver regras/cor.md) ----------
+export const COR = {
+  /** o chão do estúdio: cinza-creme quente, sem emenda */
+  estudio: '#EAE4DA',
+  estudioLuz: '#F3EFE8',
+  estudioBorda: '#DAD2C5',
+  /** o corpo do produto: branco cetim */
+  produto: '#EEEBE5',
+  ponteira: '#E2DED6',
+  grafite: '#2A2A2D',
+  metal: '#C8C5BF',
+  /** a sombra de contato (multiplica o chão) */
+  sombra: '#3A3026',
+  tinta: '#1D1D1F',
+  apagado: '#6E6E73',
+  preto: '#000000',
+  logo: '#F5F5F7',
+  rodape: '#86868B',
+  /** o único acento: o brilho do detalhe tocável */
+  acento: '#7CE23A',
+  /** o cartão radial do título (centro → borda) */
+  radial: ['#F7E7C4', '#F2DDAE', '#9FE3B4', '#46BFD9', '#2366D6', '#173E9C'] as string[],
+};
+
+// ---------- fonte ----------
+// Nome de família com o prefixo do kit, pra não colidir com outro kit no mesmo estúdio.
+export const FONTE = '"AT Inter", "Inter", system-ui, sans-serif';
+if (typeof document !== 'undefined' && !(globalThis as {__atInter?: boolean}).__atInter) {
+  (globalThis as {__atInter?: boolean}).__atInter = true;
+  const h = delayRender('apple-tipografico: Inter');
+  new FontFace('AT Inter', `url(${interUrl}) format('woff2')`, {weight: '500 800', style: 'normal'}).load()
+    .then((ff) => {document.fonts.add(ff); continueRender(h);})
+    .catch(() => continueRender(h));
+}
+/** tamanhos e pesos (tela 1080×1920) */
+export const TIPO = {
+  legenda: {tamanho: 50, peso: 600, tracking: -0.012},
+  titulo: {tamanho: 92, peso: 600, tracking: -0.022},
+  sobretitulo: {tamanho: 34, peso: 500, tracking: -0.005},
+  rodape: {tamanho: 19, peso: 500, tracking: 0},
+};
+
+// ---------- 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) => (b <= a ? (f >= b ? 1 : 0) : c01((f - a) / (b - a)));
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+/** cubic-bezier(x1,y1,x2,y2) como função 0..1 */
+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 objetos: começa e termina devagar, sem tranco (o "premium" do filme) */
+export const suave = bezier(0.45, 0, 0.2, 1);
+/** entrada de texto e de peça: sai rápido, pousa longo */
+export const saida = bezier(0.16, 1, 0.3, 1);
+/** saída de texto: acelera pra fora */
+export const entrada = bezier(0.7, 0, 0.84, 0);
+export const CURVAS = {suave, saida, entrada, linear: (t: number) => c01(t)} as const;
+export type NomeCurva = keyof typeof CURVAS;
+
+/** trilha de chaves [[quadro, valor], ...] → valor no quadro f (curva `suave` entre chaves) */
+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];
+};
+
+// ---------- medida de texto ----------
+let canvas: HTMLCanvasElement | null = null;
+const cache = new Map<string, number>();
+export const larguraTexto = (texto: string, tamanho: number, peso = 600, trackingEm = -0.012): number => {
+  const chave = `${texto}|${tamanho}|${peso}|${trackingEm}`;
+  const c = cache.get(chave); if (c !== undefined) return c;
+  if (typeof document === 'undefined') return texto.length * tamanho * 0.55;
+  canvas = canvas || document.createElement('canvas');
+  const ctx = canvas.getContext('2d'); if (!ctx) return texto.length * tamanho * 0.55;
+  const fonte = `${peso} ${tamanho}px "AT Inter"`;
+  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 corta palavra. */
+export const caber = (texto: string, tamanho: number, largura = LARGURA_UTIL, peso = 600, trackingEm = -0.012) => {
+  const w = larguraTexto(texto, tamanho, peso, trackingEm);
+  return w > largura ? Math.floor(tamanho * (largura / w)) : tamanho;
+};

package/kits/apple-tipografico/elementos/index.ts

@@ -0,0 +1,18 @@
+// Tudo que o kit apple-tipografico (v2, filme de produto) oferece. A IA monta o vídeo combinando isto
+// (ou escrevendo um plano pra Montagem).
+export * from './base';
+export * from './modelos';
+export {Fundo} from './Fundo';
+export {Camera} from './Camera';
+export {Cena, useDuracaoCena, SOBREPOE, BorraoX} from './Cena';
+export type {Transicao} from './Cena';
+export {Produto3D, hexRgb} from './Produto3D';
+export type {Produto3DProps, ChaveCamera, Animacao} from './Produto3D';
+export {ProdutoFoto} from './ProdutoFoto';
+export {LegendaCurta} from './LegendaCurta';
+export {CartaoRadial} from './CartaoRadial';
+export {AssinaturaPreta} from './AssinaturaPreta';
+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/apple-tipografico/elementos/modelos.ts

@@ -0,0 +1,108 @@
+// Modelos 3D do kit: o produto é montado com PEÇAS (formas com borda arredondada) que o Produto3D
+// desenha com luz de estúdio. Qualquer produto simples cabe aqui (fone, estojo, relógio, garrafa,
+// controle, caixa de som...): a IA escreve as peças, ou usa um dos modelos prontos abaixo.
+// Produto com forma complexa demais? Use ProdutoFoto com o recorte (PNG) ou a sequência de um giro 3D.
+
+export type V3 = [number, number, number];
+export type Forma = 'caixa' | 'capsula' | 'elipsoide' | 'cilindro' | 'anel';
+export type Material = 'cetim' | 'metal' | 'grafite' | 'brilho';
+
+export type Peca = {
+  forma: Forma;
+  /** caixa/elipsoide: meias medidas x,y,z · capsula: [raio de baixo, altura, raio de cima] ·
+   *  cilindro: [raio, meia altura, -] · anel: [raio maior, raio do tubo, -] */
+  tam: V3;
+  /** arredondamento da borda (caixa e cilindro) */
+  raio?: number;
+  pos?: V3;
+  /** graus, ordem Y·X·Z */
+  rot?: V3;
+  material?: Material;
+  cor?: string;
+  /** >0 funde com as peças anteriores (suavidade); <0 ENTALHA (cava um sulco nas anteriores) */
+  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;
+};
+
+/** um modelo pronto, posicionado: {nome, pos, rot, escala, grupo, cor} */
+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[]; // 9 números, linha a linha
+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]];
+export const ID: M3 = [1, 0, 0, 0, 1, 0, 0, 0, 1];
+/** 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 (a demo é um fone fictício; nenhum é cópia de produto real) ----------
+const cetim = (o: Peca): Peca => ({material: 'cetim', ...o});
+
+/** um fone intra-auricular: cabeça, bico, ponteira de silicone, tela de som, haste com sulco tocável.
+ *  Origem no meio do fone; a ponteira aponta para +x; a frente (sulco) para +z. ~1,6 de altura.
+ *  opcoes: {semPonteira: 1} tira a ponteira (pra animá-la separada com o modelo `ponteira`). */
+const fone = (o: Record<string, number> = {}): Peca[] => [
+  cetim({forma: 'elipsoide', tam: [0.33, 0.3, 0.29], pos: [0, 0.55, 0], rot: [0, 0, -8]}),
+  cetim({forma: 'capsula', tam: [0.1, 1.12, 0.13], pos: [-0.07, -0.12, 0], rot: [0, 0, 5], uniao: 0.2}),
+  cetim({forma: 'cilindro', tam: [0.105, 0.09, 0], raio: 0.04, pos: [0.3, 0.6, 0.03], rot: [0, 0, -80], uniao: 0.06}),
+  // tela de som (entalhe escuro em cima, atrás)
+  {forma: 'elipsoide', tam: [0.1, 0.045, 0.07], pos: [-0.12, 0.85, -0.02], rot: [0, 0, 22], material: 'grafite', uniao: -0.01},
+  // o sulco tocável na frente da haste: acende com o brilho do acento
+  {forma: 'caixa', tam: [0.032, 0.17, 0.05], raio: 0.03, pos: [-0.075, -0.2, 0.125], rot: [0, 0, 5], material: 'brilho', uniao: -0.006},
+  // ponta da haste (microfone): anel de metal
+  {forma: 'cilindro', tam: [0.096, 0.018, 0], raio: 0.008, pos: [-0.02, -0.66, 0], rot: [0, 0, 5], material: 'metal'},
+  ...(o.semPonteira === 1 ? [] : [ponteiraPeca([0.44, 0.61, 0.03], 0.85)]),
+];
+const ponteiraPeca = (pos: V3, k: number): Peca =>
+  ({forma: 'capsula', tam: [0.17 * k, 0.13 * k, 0.125 * k], pos, rot: [0, 0, -90], material: 'cetim', cor: '#E2DED6', uniao: 0.025});
+
+/** ponteira de silicone avulsa, deitada no eixo x (tamanho k: 0,8 · 0,9 · 1 · 1,1) */
+const ponteira = (o: Record<string, number> = {}): Peca[] => [{...ponteiraPeca([0, 0, 0], o.k ?? 1), uniao: 0}];
+
+/** estojo de carregar: base + tampa (grupo "tampa"). Dobradiça (pivô da tampa) em [0, 0,85, −0,4].
+ *  Abrir: animar {grupo:'tampa', rot:[−100,0,0], pivo:[0,0.85,-0.4]} (× escala + pos). Origem no centro do fundo. ~1,9 × 1,36 × 0,8. */
+const estojo = (): Peca[] => [
+  cetim({forma: 'caixa', tam: [0.95, 0.68, 0.4], raio: 0.34, pos: [0, 0.68, 0], corte: [-1, 0.165]}),
+  cetim({forma: 'caixa', tam: [0.95, 0.68, 0.4], raio: 0.34, pos: [0, 0.68, 0], corte: [1, 0.18], grupo: 'tampa'}),
+  {forma: 'elipsoide', tam: [0.028, 0.028, 0.012], pos: [0, 0.52, 0.4], material: 'grafite'},
+];
+
+export const MODELOS = {fone, ponteira, estojo} 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[] => usos.flatMap((u) => {
+  const R = rotacao(u.rot), k = u.escala ?? 1, p0 = u.pos ?? [0, 0, 0];
+  return MODELOS[u.nome](u.opcoes).map((pc) => {
+    // a rotação da peça vira matriz e é guardada como "rotM" (o Produto3D usa direto)
+    const Rp = mul(R, rotacao(pc.rot));
+    return {
+      ...pc,
+      tam: vezes(pc.tam, k),
+      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))),
+      rotM: Rp,
+      cor: u.cor && pc.material === 'cetim' && !pc.cor ? u.cor : pc.cor,
+      grupo: u.grupo && pc.grupo ? `${u.grupo}.${pc.grupo}` : (u.grupo ?? pc.grupo),
+    } as Peca & {rotM: M3};
+  });
+});