primocode 10.17.1 → 10.19.0

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

@@ -0,0 +1,295 @@
+// O motor 3D do kit, em JavaScript puro (o render headless do Remotion não tem WebGL).
+// Base: o raymarcher do apple-tipografico, reiluminado pra estúdio ESCURO:
+//   · duas tiras de luz de borda atrás do produto (quente à esquerda, fria à direita), presas à câmera,
+//     então a borda acende em qualquer ângulo de órbita;
+//   · uma softbox fraca em cima (a luz de chave), o resto é breu;
+//   · chão polido: cada pixel do chão traça o reflexo do produto, que some com a altura (brilho molhado);
+//   · materiais: anodizado, metal polido, borracha estriada, vidro com tratamento (verde/violeta) e acento.
+// Determinístico: o mesmo quadro sempre sai igual.
+
+export type CenaRM = {
+  n: number;
+  tipo: Int8Array; pos: Float64Array; tam: Float64Array; raio: Float64Array; rot: Float64Array;
+  mat: Int8Array; cor: Float64Array; un: Float64Array; corte: Float64Array; ext: Float64Array;
+  esfera: [number, number, number, number];
+  chao: number; sombra: number; reflexo: number; acento: [number, number, number]; brilho: number;
+  /** intensidade geral da luz 0..1 (revelar do breu) */
+  luz: number;
+  /** força das bordas 0..1.5 */
+  borda: number;
+};
+export type CameraRM = {olho: [number, number, number]; alvo: [number, number, number]; tan: number};
+
+const norm = (x: number, y: number, z: number): [number, number, number] => {const l = Math.hypot(x, y, z); return [x / l, y / l, z / l];};
+const LC = norm(-0.1, 1, 0.1);
+const sst = (a: number, b: number, x: number) => {const t = Math.max(0, Math.min(1, (x - a) / (b - a))); return t * t * (3 - 2 * t);};
+
+export const desenhar = (ctx: CanvasRenderingContext2D, W: number, H: number, c: CenaRM, cam: CameraRM) => {
+  const {n, tipo, pos, tam, raio, rot, mat, cor, un, corte, ext} = c;
+  let ID = -1;
+  // ---------- distância até o produto (e qual peça) ----------
+  const mapa = (x: number, y: number, z: number): number => {
+    let d = 1e5; ID = -1;
+    for (let i = 0; i < n; i++) {
+      const dx = x - pos[i * 3], dy = y - pos[i * 3 + 1], dz = z - pos[i * 3 + 2];
+      const k = un[i];
+      const lb = Math.sqrt(dx * dx + dy * dy + dz * dz) - ext[i];
+      if (k < 0 ? lb >= -d : lb > d + k) continue;
+      const r = i * 9;
+      const qx = rot[r] * dx + rot[r + 3] * dy + rot[r + 6] * dz;
+      const qy = rot[r + 1] * dx + rot[r + 4] * dy + rot[r + 7] * dz;
+      const qz = rot[r + 2] * dx + rot[r + 5] * dy + rot[r + 8] * dz;
+      const sx = tam[i * 3], sy = tam[i * 3 + 1], sz = tam[i * 3 + 2];
+      let di: number;
+      const t = tipo[i];
+      if (t === 1) { // caixa arredondada
+        const rr = raio[i];
+        const ax = Math.abs(qx) - sx + rr, ay = Math.abs(qy) - sy + rr, az = Math.abs(qz) - sz + rr;
+        const mx = Math.max(ax, 0), my = Math.max(ay, 0), mz = Math.max(az, 0);
+        di = Math.sqrt(mx * mx + my * my + mz * mz) + Math.min(Math.max(ax, Math.max(ay, az)), 0) - rr;
+      } else if (t === 2) { // cápsula cônica
+        const r1 = sx, h = sy, r2 = sz, py = qy + h * 0.5;
+        const b = (r1 - r2) / h, a = Math.sqrt(1 - b * b);
+        const q0 = Math.sqrt(qx * qx + qz * qz);
+        const kk = -b * q0 + a * py;
+        if (kk < 0) di = Math.sqrt(q0 * q0 + py * py) - r1;
+        else if (kk > a * h) di = Math.sqrt(q0 * q0 + (py - h) * (py - h)) - r2;
+        else di = q0 * a + py * b - r1;
+      } else if (t === 3) { // elipsoide
+        const ex = qx / sx, ey = qy / sy, ez = qz / sz;
+        const k0 = Math.sqrt(ex * ex + ey * ey + ez * ez);
+        const fx = qx / (sx * sx), fy = qy / (sy * sy), fz = qz / (sz * sz);
+        const k1 = Math.sqrt(fx * fx + fy * fy + fz * fz);
+        di = (k0 * (k0 - 1)) / Math.max(k1, 1e-6);
+      } else if (t === 4 || t === 6) { // cilindro arredondado (6 = estriado: sulcos em volta, sz = nº de sulcos)
+        const rr = raio[i];
+        let q0 = Math.sqrt(qx * qx + qz * qz);
+        if (t === 6) {const N = sz, amp = (0.85 * sx) / N; q0 += amp * (0.5 + 0.5 * Math.cos(Math.atan2(qz, qx) * N));}
+        const ax = q0 - sx + rr, ay = Math.abs(qy) - sy + rr;
+        di = Math.min(Math.max(ax, ay), 0) + Math.hypot(Math.max(ax, 0), Math.max(ay, 0)) - rr;
+        if (t === 6) di *= 0.6;
+      } else { // anel
+        const q0 = Math.sqrt(qx * qx + qz * qz) - sx;
+        di = Math.sqrt(q0 * q0 + qy * qy) - sy;
+      }
+      const cs = corte[i * 2];
+      if (cs !== 0) di = Math.max(di, -cs * (qy - corte[i * 2 + 1]));
+      if (k < 0) {if (-di > d) ID = i; d = Math.max(d, -di);}
+      else if (k > 0) {
+        if (di < d) ID = i;
+        const hh = Math.max(k - Math.abs(d - di), 0) / k;
+        d = Math.min(d, di) - hh * hh * k * 0.25;
+      } else if (di < d) {d = di; ID = i;}
+    }
+    return d;
+  };
+  const [ex, ey, ez, er] = c.esfera;
+  const esfera = (ox: number, oy: number, oz: number, dx: number, dy: number, dz: number, rr = er): [number, number] | null => {
+    const cx = ox - ex, cy = oy - ey, cz = oz - ez;
+    const b = cx * dx + cy * dy + cz * dz, cc = cx * cx + cy * cy + cz * cz - rr * rr, h = b * b - cc;
+    if (h < 0) return null; const s = Math.sqrt(h); return [-b - s, -b + s];
+  };
+  const sombra = (ox: number, oy: number, oz: number, dx: number, dy: number, dz: number, k: number, passos: number) => {
+    const b = esfera(ox, oy, oz, dx, dy, dz); if (!b || b[1] < 0) return 1;
+    let res = 1, t = Math.max(b[0], 0.012);
+    for (let i = 0; i < passos; i++) {
+      const h = mapa(ox + dx * t, oy + dy * t, oz + dz * t);
+      res = Math.min(res, (k * h) / t);
+      t += Math.min(Math.max(h, 0.014), 0.2);
+      if (res < 0.003 || t > b[1]) break;
+    }
+    return Math.max(0, Math.min(1, res));
+  };
+
+  // ---------- câmera ----------
+  const [cx0, cy0, cz0] = cam.olho;
+  let [fx, fy, fz] = [cam.alvo[0] - cx0, cam.alvo[1] - cy0, cam.alvo[2] - cz0];
+  [fx, fy, fz] = norm(fx, fy, fz);
+  let [rx, ry, rz] = norm(-fz, 0, fx);
+  if (!isFinite(rx)) [rx, ry, rz] = [1, 0, 0];
+  const ux = ry * fz - rz * fy, uy = rz * fx - rx * fz, uz = rx * fy - ry * fx;
+  const meio = 0.5 * H;
+  const raioDe = (px: number, py: number): [number, number, number] => {
+    const u = ((px - 0.5 * W) / meio) * cam.tan, v = ((0.5 * H - py) / meio) * cam.tan;
+    return norm(fx + u * rx + v * ux, fy + u * ry + v * uy, fz + u * rz + v * uz);
+  };
+  // luzes presas à câmera: (direita, cima, frente-pra-cena)
+  const daCam = (a: number, b: number, cc: number) => norm(a * rx + b * ux + cc * fx, a * ry + b * uy + cc * fy, a * rz + b * uz + cc * fz);
+  const LK = daCam(-0.45, 0.85, -0.3); // chave: em cima, à esquerda, do lado da câmera
+  const LQ = daCam(-0.92, 0.2, 0.55); // borda quente (atrás, esquerda)
+  const LF = daCam(0.92, 0.12, 0.6); // borda fria (atrás, direita)
+  const Q = [1.0, 0.9, 0.8], F = [0.82, 0.9, 1.0];
+  const luz = c.luz, bordaK = c.borda;
+  // ambiente (o que o metal, o vidro e o anodizado refletem): breu + duas tiras verticais + softbox no teto
+  const env = (dx: number, dy: number, dz: number, out: number[]) => {
+    const a = dx * rx + dy * ry + dz * rz, b = dx * ux + dy * uy + dz * uz, cc = dx * fx + dy * fy + dz * fz;
+    const fi = Math.atan2(a, cc); // 0 = atrás do produto (longe da câmera), ±π = a câmera
+    const alt = sst(-0.55, -0.3, b) * (1 - sst(0.75, 0.92, b));
+    const tq = (1 - sst(0.07, 0.13, Math.abs(fi + 1.75))) * alt * 2.6 * bordaK;
+    const tf = (1 - sst(0.07, 0.13, Math.abs(fi - 1.8))) * alt * 2.4 * bordaK;
+    const teto = sst(0.55, 0.75, b) * (1 - sst(0.16, 0.24, Math.abs(a))) * 0.5; // softbox retangular no teto
+    // tira de frente (à esquerda da câmera): o risco longo que corre no vidro e nas faces
+    const tfr = (1 - sst(0.035, 0.07, Math.abs(fi + 2.62))) * sst(-0.4, -0.1, b) * (1 - sst(0.5, 0.7, b)) * 1.3 * bordaK;
+    const chaoE = 0.012;
+    out[0] = chaoE + tq * Q[0] + tf * F[0] + teto + tfr;
+    out[1] = chaoE + tq * Q[1] + tf * F[1] + teto + tfr;
+    out[2] = chaoE + tq * Q[2] + tf * F[2] + teto * 1.03 + tfr;
+  };
+  const E = [0, 0, 0];
+
+  // ---------- um raio qualquer: cor em out, devolve a peça (−1 = nada) e a altura do ponto em hy ----------
+  const out = [0, 0, 0];
+  let hy = 0;
+  const traçar = (ox: number, oy: number, oz: number, dx: number, dy: number, dz: number, barato: boolean): number => {
+    const b = esfera(ox, oy, oz, dx, dy, dz);
+    out[0] = out[1] = out[2] = 0;
+    if (!b || b[1] < 0) return -1;
+    let t = Math.max(b[0], 0), hit = -1;
+    const passos = barato ? 70 : 160;
+    for (let i = 0; i < passos; i++) {
+      const h = mapa(ox + dx * t, oy + dy * t, oz + dz * t);
+      if (h < 0.00025 * t + 0.0002) {hit = ID; break;}
+      t += h * 0.95;
+      if (t > b[1]) break;
+    }
+    if (hit < 0) return -1;
+    const px3 = ox + dx * t, py3 = oy + dy * t, pz3 = oz + dz * t;
+    hy = py3;
+    const e = 0.0007;
+    const a1 = mapa(px3 + e, py3 - e, pz3 - e), a2 = mapa(px3 - e, py3 - e, pz3 + e), a3 = mapa(px3 - e, py3 + e, pz3 - e), a4 = mapa(px3 + e, py3 + e, pz3 + e);
+    let [nx, ny, nz] = norm(a1 - a2 - a3 + a4, -a1 - a2 + a3 + a4, -a1 + a2 - a3 + a4);
+    if (!isFinite(nx)) {nx = 0; ny = 1; nz = 0;}
+    const m = mat[hit];
+    const br = cor[hit * 3], bg = cor[hit * 3 + 1], bb = cor[hit * 3 + 2];
+    const sh = barato ? 1 : sombra(px3 + nx * 0.004, py3 + ny * 0.004, pz3 + nz * 0.004, LK[0], LK[1], LK[2], 10, 26);
+    let ao = 1;
+    if (!barato) {let o = 0, s = 1; for (let i = 0; i < 3; i++) {const hh = 0.012 + 0.05 * i; o += (hh - mapa(px3 + nx * hh, py3 + ny * hh, pz3 + nz * hh)) * s; s *= 0.75;} ao = Math.max(0, Math.min(1, 1 - 2.2 * o));}
+    const ndv = Math.max(0, Math.min(1, -(nx * dx + ny * dy + nz * dz)));
+    const fre = Math.pow(1 - ndv, 4);
+    const nk = nx * LK[0] + ny * LK[1] + nz * LK[2];
+    const dif = Math.max(0, nk) * sh;
+    const [hx, hy2, hz] = norm(LK[0] - dx, LK[1] - dy, LK[2] - dz);
+    const nh = Math.max(0, nx * hx + ny * hy2 + nz * hz);
+    // borda: a luz de trás lambendo a silhueta
+    const rimQ = Math.max(0, nx * LQ[0] + ny * LQ[1] + nz * LQ[2]), rimF = Math.max(0, nx * LF[0] + ny * LF[1] + nz * LF[2]);
+    const silh = Math.pow(1 - ndv, 2.2) * bordaK;
+    const rim0 = silh * rimQ * Q[0] + silh * rimF * F[0], rim1 = silh * rimQ * Q[1] + silh * rimF * F[1], rim2 = silh * rimQ * Q[2] + silh * rimF * F[2];
+    const dn = dx * nx + dy * ny + dz * nz;
+    env(dx - 2 * dn * nx, dy - 2 * dn * ny, dz - 2 * dn * nz, E);
+    let r: number, g: number, bl: number;
+    if (m === 0) { // anodizado: fosco acetinado, reflexo borrado
+      const k = 0.55 * dif + 0.05, sp = 0.32 * Math.pow(nh, 46) * sh, rf = 0.05 + 0.55 * fre;
+      r = (br * k + sp + E[0] * rf) * ao + rim0 * 0.85; g = (bg * k + sp + E[1] * rf) * ao + rim1 * 0.85; bl = (bb * k + sp + E[2] * rf) * ao + rim2 * 0.85;
+    } else if (m === 1) { // metal polido
+      const sp = 1.4 * Math.pow(nh, 140) * sh, aoK = 0.6 + 0.4 * ao;
+      r = (br * (E[0] * 0.95 + 0.04 + 0.12 * dif) + sp) * aoK + rim0 * 0.4; g = (bg * (E[1] * 0.95 + 0.04 + 0.12 * dif) + sp) * aoK + rim1 * 0.4; bl = (bb * (E[2] * 0.95 + 0.04 + 0.12 * dif) + sp) * aoK + rim2 * 0.4;
+    } else if (m === 2) { // borracha estriada
+      const k = 0.4 * dif + 0.03, sp = 0.12 * Math.pow(nh, 18) * sh;
+      r = (br * k + sp + E[0] * fre * 0.12) * ao + rim0 * 0.55; g = (bg * k + sp + E[1] * fre * 0.12) * ao + rim1 * 0.55; bl = (bb * k + sp + E[2] * fre * 0.12) * ao + rim2 * 0.55;
+    } else if (m === 3) { // acento: anel que acende
+      const k = 0.3 + 0.9 * c.brilho;
+      r = c.acento[0] * k * (0.8 + 0.5 * dif) + E[0] * fre * 0.3 + rim0 * 0.3;
+      g = c.acento[1] * k * (0.8 + 0.5 * dif) + E[1] * fre * 0.3 + rim1 * 0.3;
+      bl = c.acento[2] * k * (0.8 + 0.5 * dif) + E[2] * fre * 0.3 + rim2 * 0.3;
+    } else { // vidro: quase preto, espelho no ângulo, tratamento verde→violeta
+      const rf = 0.07 + 0.9 * fre, sp = 2.2 * Math.pow(nh, 260);
+      const cv = 1 - ndv; // 0 de frente, 1 rasante
+      const tr = 0.16 * (1 - cv) + 0.5 * cv, tg = 0.34 * (1 - cv) + 0.12 * cv, tb = 0.22 * (1 - cv) + 0.62 * cv;
+      const film = 0.2 * Math.pow(Math.sin(ndv * 3.1), 2);
+      r = br + E[0] * rf + sp + tr * film + rim0 * 0.25; g = bg + E[1] * rf + sp + tg * film + rim1 * 0.25; bl = bb + E[2] * rf + sp + tb * film + rim2 * 0.25;
+    }
+    out[0] = Math.min(1, r * luz); out[1] = Math.min(1, g * luz); out[2] = Math.min(1, bl * luz);
+    return hit;
+  };
+
+  // ---------- 1) chão: sombra de contato + reflexo do produto, numa grade de 1/2 ----------
+  const G = 2, gw = Math.ceil(W / G) + 2, gh = Math.ceil(H / G) + 2;
+  const somA = new Float32Array(gw * gh), refl = new Float32Array(gw * gh * 4);
+  if (c.sombra > 0 || c.reflexo > 0) {
+    const raioChao2 = er * er * 7;
+    for (let j = 0; j < gh; j++) for (let i = 0; i < gw; i++) {
+      const [dx, dy, dz] = raioDe(i * G, j * G);
+      if (dy >= 0) continue;
+      const tf = (c.chao - cy0) / dy; const x = cx0 + dx * tf, z = cz0 + dz * tf;
+      const qx = x - ex, qz = z - ez; if (qx * qx + qz * qz > raioChao2) continue;
+      const k = j * gw + i;
+      if (c.sombra > 0 && (i % 2 === 0) && (j % 2 === 0)) {
+        let o = 0, s = 1;
+        for (let q = 0; q < 4; q++) {const hh = 0.03 + 0.16 * q; o += Math.max(hh - mapa(x, c.chao + hh, z), 0) * s; s *= 0.72;}
+        const sh = sombra(x, c.chao + 0.002, z, LC[0], LC[1], LC[2], 3.2, 20);
+        const v = c.sombra * Math.max(0, Math.min(1, 0.5 * (1 - sh) + 0.7 * (1 - Math.max(0, Math.min(1, 1 - 1.1 * o)))));
+        somA[k] = v; if (i + 1 < gw) somA[k + 1] = v; if (j + 1 < gh) {somA[k + gw] = v; if (i + 1 < gw) somA[k + gw + 1] = v;}
+      }
+      if (c.reflexo > 0) {
+        const id = traçar(x, c.chao + 0.0005, z, dx, -dy, dz, true);
+        if (id >= 0) {
+          const alto = Math.max(0, hy - c.chao);
+          const a = c.reflexo * Math.exp(-alto * 1.25) * (0.55 + 0.45 * (1 + dy));
+          refl[k * 4] = out[0] * a; refl[k * 4 + 1] = out[1] * a; refl[k * 4 + 2] = out[2] * a; refl[k * 4 + 3] = a;
+        }
+      }
+    }
+  }
+  const amostra = (arr: Float32Array, canais: number, ch: number, x: number, y: number) => {
+    const gx = x / G, gy = y / G, i = Math.min(gw - 2, Math.floor(gx)), j = Math.min(gh - 2, Math.floor(gy)), tx = gx - i, ty = gy - j;
+    const A = arr[(j * gw + i) * canais + ch], B = arr[(j * gw + i + 1) * canais + ch], C = arr[((j + 1) * gw + i) * canais + ch], D = arr[((j + 1) * gw + i + 1) * canais + ch];
+    return (A * (1 - tx) + B * tx) * (1 - ty) + (C * (1 - tx) + D * tx) * ty;
+  };
+  // ---------- 2) o produto, um raio por pixel ----------
+  const img = ctx.createImageData(W, H); const px = img.data;
+  const ids = new Int16Array(W * H).fill(-1);
+  const cor4 = new Float32Array(W * H * 3);
+  const proj = (x: number, y: number, z: number): [number, number] | null => {
+    const vx = x - cx0, vy = y - cy0, vz = z - cz0; const zc = vx * fx + vy * fy + vz * fz; if (zc <= 0.01) return null;
+    return [0.5 * W + ((vx * rx + vy * ry + vz * rz) / zc / cam.tan) * meio, 0.5 * H - ((vx * ux + vy * uy + vz * uz) / zc / cam.tan) * meio];
+  };
+  let x0 = 0, x1 = W, y0 = 0, y1 = H;
+  const pc = proj(ex, ey, ez);
+  const dist = Math.hypot(ex - cx0, ey - cy0, ez - cz0);
+  if (pc && dist > er * 1.05) {
+    const rp = (er / Math.sqrt(dist * dist - er * er)) / cam.tan * meio * 1.08 + 2;
+    x0 = Math.max(0, Math.floor(pc[0] - rp)); x1 = Math.min(W, Math.ceil(pc[0] + rp));
+    y0 = Math.max(0, Math.floor(pc[1] - rp)); y1 = Math.min(H, Math.ceil(pc[1] + rp));
+  }
+  for (let y = y0; y < y1; y++) for (let x = x0; x < x1; x++) {
+    const [dx, dy, dz] = raioDe(x + 0.5, y + 0.5);
+    const id = traçar(cx0, cy0, cz0, dx, dy, dz, false);
+    if (id < 0) continue;
+    const k = y * W + x; ids[k] = id;
+    cor4[k * 3] = out[0]; cor4[k * 3 + 1] = out[1]; cor4[k * 3 + 2] = out[2];
+  }
+  // ---------- 3) bordas: 4 raios por pixel onde a peça muda ----------
+  const SUB = [[0.125, 0.375], [0.375, -0.125], [-0.125, -0.375], [-0.375, 0.125]];
+  const borda = new Uint8Array(W * H);
+  for (let y = Math.max(0, y0 - 1); y < Math.min(H, y1 + 1); y++) for (let x = Math.max(0, x0 - 1); x < Math.min(W, x1 + 1); x++) {
+    const k = y * W + x, a = ids[k];
+    if ((x + 1 < W && ids[k + 1] !== a) || (y + 1 < H && ids[k + W] !== a)) {borda[k] = 1; if (x + 1 < W) borda[k + 1] = 1; if (y + 1 < H) borda[k + W] = 1;}
+  }
+  // fundo de um ponto: reflexo sobre a sombra (pré-multiplicado)
+  const fundo = (x: number, y: number, o: number[]) => {
+    const s = amostra(somA, 1, 0, x, y);
+    const ra = amostra(refl, 4, 3, x, y);
+    o[0] = amostra(refl, 4, 0, x, y); o[1] = amostra(refl, 4, 1, x, y); o[2] = amostra(refl, 4, 2, x, y);
+    o[3] = ra + s * (1 - ra);
+  };
+  const F4 = [0, 0, 0, 0];
+  for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) {
+    const k = y * W + x;
+    let r: number, g: number, b: number, a: number;
+    if (borda[k]) {
+      r = g = b = a = 0;
+      for (const [sx, sy] of SUB) {
+        const [dx, dy, dz] = raioDe(x + 0.5 + sx, y + 0.5 + sy);
+        const id = traçar(cx0, cy0, cz0, dx, dy, dz, false);
+        if (id >= 0) {r += out[0]; g += out[1]; b += out[2]; a += 1;}
+        else {fundo(x + 0.5 + sx, y + 0.5 + sy, F4); r += F4[0]; g += F4[1]; b += F4[2]; a += F4[3];}
+      }
+      r /= 4; g /= 4; b /= 4; a /= 4;
+    } else if (ids[k] >= 0) {r = cor4[k * 3]; g = cor4[k * 3 + 1]; b = cor4[k * 3 + 2]; a = 1;}
+    else {fundo(x + 0.5, y + 0.5, F4); a = F4[3]; if (a <= 0.002) continue; r = F4[0]; g = F4[1]; b = F4[2];}
+    if (a <= 0.0001) continue;
+    const p = k * 4;
+    px[p] = Math.min(255, (r / a) * 255); px[p + 1] = Math.min(255, (g / a) * 255); px[p + 2] = Math.min(255, (b / a) * 255); px[p + 3] = Math.min(255, a * 255);
+  }
+  ctx.putImageData(img, 0, 0);
+};

package/kits/produto-3d/exemplos/plano.json

@@ -0,0 +1,53 @@
+{
+  "kit": "produto-3d",
+  "duracao": 240,
+  "trilha": {"volume": 0.5},
+  "cenas": [
+    {"batida": "gancho", "de": 0, "ate": 54, "entrada": "escuro", "fundo": {"feixe": 50, "poca": [50, 64], "horizonte": 62},
+     "camadas": [
+       {"elemento": "Produto3D", "props": {
+         "modelo": [{"nome": "lente"}], "inclinar": 58, "giro": [[0, -40], [54, -14]],
+         "camera": [{"em": 0, "distancia": 13.5, "elevacao": 12, "alvo": [0, -0.75, 0]}, {"em": 54, "distancia": 11.8, "elevacao": 7, "alvo": [0, -0.7, 0]}],
+         "chao": -1.12, "reflexo": 0.4, "luz": [[0, 0], [22, 1]], "borda": [[0, 0.2], [18, 1.2]], "brilho": [[22, 0.1], [30, 1], [54, 0.55]]}},
+       {"elemento": "TituloMinimo", "props": {"linhas": ["Feita para", "a noite."], "y": 1140, "inicio": 24, "intervalo": 5, "acentoUltima": true}}],
+     "sons": [{"som": "subida", "em": 0}, {"som": "clique", "em": 28}, {"som": "pop-palavra", "em": 24, "volume": 0.6}]},
+
+    {"batida": "prova", "de": 54, "ate": 120, "entrada": "corte", "fundo": {"feixe": 50, "poca": [50, 80], "forca": 0.8, "horizonte": 74},
+     "camadas": [
+       {"elemento": "Produto3D", "props": {
+         "modelo": [{"nome": "lente"}], "inclinar": 16, "giro": [[0, 25], [66, -15]],
+         "explodir": [[0, 0], [22, 1], [42, 1], [58, 0]], "cascata": 2,
+         "camera": [{"em": 0, "distancia": 13.5, "elevacao": 10, "alvo": [0, -0.1, 0]}, {"em": 66, "distancia": 12.0, "elevacao": 6, "alvo": [0, -0.15, 0]}],
+         "chao": -2.3, "reflexo": 0.3, "sombra": 0.3, "brilho": 0.6}},
+       {"elemento": "RotuloChamada", "props": {"ponto": [610, 760], "texto": [770, 640], "titulo": "11 elementos", "sub": "3 grupos ópticos", "inicio": 18, "sai": 40}}],
+     "sons": [{"som": "whoosh-sai", "em": 1}, {"som": "pop-cartao", "em": 19, "volume": 0.5}, {"som": "whoosh-entra", "em": 44, "volume": 0.6}, {"som": "impacto", "em": 60}]},
+
+    {"batida": "detalhe", "de": 120, "ate": 162, "entrada": "borrao", "fundo": {"forca": 0.4},
+     "camadas": [
+       {"elemento": "Produto3D", "props": {
+         "modelo": [{"nome": "lente"}], "giro": [[0, 20], [42, -30]],
+         "camera": [{"em": 0, "distancia": 2.4, "elevacao": 14, "orbita": 8, "alvo": [0.62, -0.44, 0]}, {"em": 42, "distancia": 2.0, "elevacao": 9, "orbita": -4, "alvo": [0.64, -0.42, 0]}], "borda": 1.4,
+         "sombra": 0, "reflexo": 0, "brilho": [[6, 0.1], [14, 1], [42, 0.85]]}},
+       {"elemento": "RotuloChamada", "props": {"ponto": [400, 1120], "texto": [700, 960], "titulo": "Foco manual", "sub": "0,3 m → ∞ em 270°", "inicio": 10}}],
+     "sons": [{"som": "swoosh", "em": 0}, {"som": "clique", "em": 12}]},
+
+    {"batida": "data", "de": 162, "ate": 204, "entrada": "borrao", "fundo": {"feixe": 50, "poca": [50, 58], "forca": 0.7, "horizonte": 56},
+     "camadas": [
+       {"elemento": "Produto3D", "props": {
+         "modelo": [{"nome": "lente"}], "inclinar": 90,
+         "camera": [{"em": 0, "distancia": 10.4, "elevacao": 9, "orbita": 30, "alvo": [0, -0.62, 0]}, {"em": 42, "distancia": 9.2, "elevacao": 5, "orbita": 10, "alvo": [0, -0.58, 0]}],
+         "chao": -0.8, "reflexo": 0.35, "brilho": 0.6}},
+       {"elemento": "NumeroDestaque", "props": {"de": 2.8, "para": 1.2, "prefixo": "f/", "rotulo": "Abertura máxima", "y": 1110, "inicio": 4, "conta": 24}}],
+     "sons": [{"som": "swoosh", "em": 0}, {"som": "pop-palavra", "em": 5, "volume": 0.7}]},
+
+    {"batida": "marca", "de": 204, "ate": 240, "entrada": "escuro", "fundo": {"feixe": 50, "poca": [50, 80], "horizonte": 76},
+     "camadas": [
+       {"elemento": "Produto3D", "props": {
+         "modelo": [{"nome": "lente"}], "giro": [[0, -30], [36, -8]], "flutuar": 0,
+         "camera": [{"em": 0, "distancia": 10.6, "elevacao": 7, "alvo": [0, 0.5, 0]}, {"em": 36, "distancia": 9.9, "elevacao": 5, "alvo": [0, 0.47, 0]}],
+         "chao": -1.05, "reflexo": 0.45, "brilho": 0.9}},
+       {"elemento": "AssinaturaMarca", "props": {"nome": "Kairo 35", "linha": "f/1.2 · chega em 12.11", "y": 330, "inicio": 4, "rodape": "Kairo é uma marca fictícia, criada para esta demonstração."}},
+       {"elemento": "VarreduraLuz", "props": {"em": 6, "y": 395, "dura": 18}}],
+     "sons": [{"som": "assinatura", "em": 3}]}
+  ]
+}

package/kits/produto-3d/exemplos/roteiro.md

@@ -0,0 +1,15 @@
+# Roteiro da demo: Kairo 35 (lente fictícia)
+
+Pedido: "Filme de lançamento da nossa lente 35 mm f/1.2, escuro, caro, com vista explodida."
+
+| cena | batida | quadros | na tela | elemento | som |
+|---|---|---|---|---|---|
+| 1 | gancho | 0–54 | lente nasce do breu, anel acende · "FEITA PARA / A NOITE." | Produto3D, TituloMinimo | subida, clique, pop |
+| 2 | prova | 54–120 | vista explodida abre, "11 ELEMENTOS", encaixa peça por peça | Produto3D, RotuloChamada | whoosh, pop, impacto |
+| 3 | detalhe | 120–162 | macro no anel de foco estriado · "FOCO MANUAL" | Produto3D, RotuloChamada | swoosh, clique |
+| 4 | data | 162–204 | frente da lente · f/2.8 → f/1.2 | Produto3D, NumeroDestaque | swoosh, pop |
+| 5 | marca | 204–240 | lente em pé no chão polido · KAIRO 35 | Produto3D, AssinaturaMarca, VarreduraLuz | assinatura |
+
+Como a IA chegou nisso: lente é objeto de revolução, então cabe inteira em cilindros, anéis e elipsoides.
+A vista explodida mostra os vidros escondidos (o "por dentro"). O macro prova acabamento; o número prova
+desempenho. Uma frase por plano e muito breu em volta.

package/kits/produto-3d/preview.tsx

@@ -0,0 +1,9 @@
+// Preview do kit: a demo (8 s) montada SÓ com os elementos do kit, a partir de exemplos/plano.json.
+// O estúdio registra isto como `Kit-produto-3d`.
+import React from 'react';
+import {Montagem, Plano} from './elementos';
+import plano from './exemplos/plano.json';
+
+const Preview: React.FC = () => <Montagem plano={plano as Plano} />;
+
+export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 190, Componente: Preview};

package/kits/produto-3d/receita.json

@@ -0,0 +1,16 @@
+{
+  "kit": "produto-3d", "fps": 30, "batida_trilha_quadros": 18,
+  "batidas": [
+    {"nome": "gancho", "obrigatoria": true, "duracao": [48, 66], "elementos": ["Produto3D", "TituloMinimo"], "entrada": ["escuro"], "sons": ["subida", "clique", "pop-palavra"], "nota": "o produto nasce do breu pela luz de borda; o título entra quando o anel acende"},
+    {"nome": "prova", "obrigatoria": true, "duracao": [60, 72], "elementos": ["Produto3D", "RotuloChamada"], "entrada": ["corte"], "sons": ["whoosh-sai", "pop-cartao", "whoosh-entra", "impacto"], "nota": "vista explodida: abre, segura, encaixa peça por peça; impacto no último encaixe"},
+    {"nome": "detalhe", "obrigatoria": false, "duracao": [36, 48], "elementos": ["Produto3D", "RotuloChamada"], "entrada": ["borrao"], "sons": ["swoosh", "clique"], "nota": "macro na borda do produto, a silhueta contra o breu"},
+    {"nome": "data", "obrigatoria": false, "duracao": [36, 48], "elementos": ["Produto3D", "NumeroDestaque"], "entrada": ["borrao"], "sons": ["swoosh", "pop-palavra"], "nota": "um número que conta, com o produto de frente"},
+    {"nome": "marca", "obrigatoria": true, "duracao": [36, 48], "elementos": ["Produto3D", "AssinaturaMarca", "VarreduraLuz"], "entrada": ["escuro"], "sons": ["assinatura"], "nota": "produto em pé no chão polido, nome em cima, risco de luz"}
+  ],
+  "transicoes": [
+    {"nome": "corte", "quadros": 0, "como": "troca seca"},
+    {"nome": "borrao", "quadros": 8, "como": "chicote: desfoque horizontal, a cena nova vem da direita"},
+    {"nome": "dissolver", "quadros": 10, "como": "fusão"},
+    {"nome": "escuro", "quadros": 12, "como": "nasce do preto"}
+  ]
+}

package/kits/produto-3d/regras/area-segura.md

@@ -0,0 +1,14 @@
+# Área segura
+
+Tela 1080×1920. Texto lido entre y 168 e 1330, x 88 a 992 (margem 8%).
+
+| elemento | y de referência |
+|---|---|
+| título (topo da 1ª linha) | 1120–1160, abaixo do produto |
+| número | 1100–1120 |
+| marca | 300–360 (produto embaixo) |
+| rótulo | 600–1200, no lado vazio do produto |
+| produto (centro) | 650–1250 conforme o texto; ocupa 40–60% da altura |
+
+- 35–45% da tela fica vazia (breu).
+- O reflexo pode passar de 1330: não é texto.

package/kits/produto-3d/regras/cor.md

@@ -0,0 +1,20 @@
+# Cor
+
+| token | hex | uso |
+|---|---|---|
+| breu | #030304 | fundo do estúdio |
+| chao | #07080A | chão polido abaixo do horizonte (até #0B0C10 no pé) |
+| feixe | #9AA3B5 | feixe de luz, alfa 0,20 → 0 |
+| anodizado | #1B1C21 | corpo do produto |
+| borracha | #101114 | anéis estriados |
+| metal | #B9BEC6 | baioneta, aros |
+| vidro | #05070C | lentes (tratamento: verde #29573A → violeta #7F1F9E no ângulo) |
+| bordaQuente | #FFE6CC | tira de borda à esquerda |
+| bordaFria | #D2E4FF | tira de borda à direita |
+| texto | #F2F2F0 | título, número, marca |
+| apagado | #7B7F88 | rótulos |
+| acento | #FF5A1F | o anel do produto, traço do título, sufixo do número |
+
+- Vinheta: preto 0 → 75% do centro (55%) à borda.
+- Reflexo no chão: 0,30–0,45, some com e^(−1,25 × altura).
+- O cliente troca só `acento` e a cor do `anodizado`.

package/kits/produto-3d/regras/movimento.md

@@ -0,0 +1,19 @@
+# Movimento
+
+Curva padrão `suave` = cubic-bezier(0.5, 0, 0.15, 1). Entrada de texto `saida` = cubic-bezier(0.16, 1, 0.3, 1).
+
+| movimento | quadros | valores |
+|---|---|---|
+| revelar do breu | 0–22 | luz 0 → 1, borda 0,2 → 1,2 |
+| órbita do produto | o plano todo | 20–40° por plano (máx. 40°/s) |
+| empurrão de câmera | o plano todo | distância −10 a −15% |
+| vista explodida abre | 22 | explodir 0 → 1, cascata 2 quadros por grupo |
+| segura aberta | 20 | parado (só a órbita anda) |
+| encaixe | 16 + cascata | explodir 1 → 0, impacto no último grupo |
+| anel acende | 8 | brilho 0,1 → 1 |
+| título entra | 16 por linha | sobe 105% da máscara, tracking 0,3 → 0,04 em |
+| título sai | 9 | desfoque 0 → 10 px, desce 24 px |
+| número conta | 22–24 | de → para |
+| chicote (borrão) | 8 | desfoque horizontal 60 px, 220 px de deslocamento |
+| flutuar | contínuo | 0,02 unidade, período 3,4 s |
+| feixe balança | contínuo | ±2,2%, período 9,6 s |

package/kits/produto-3d/regras/ritmo.md

@@ -0,0 +1,15 @@
+# Ritmo
+
+Batida da trilha: 100 bpm = 18 quadros.
+
+| batida | duração s | quadros |
+|---|---|---|
+| gancho | 1,6–2,2 | 48–66 |
+| prova (explodida) | 2,0–2,4 | 60–72 |
+| detalhe (macro) | 1,2–1,6 | 36–48 |
+| data | 1,2–1,6 | 36–48 |
+| marca | 1,2–1,6 | 36–48 |
+
+- Leitura mínima: 0,25 s por palavra + 0,5 s.
+- Depois de cada golpe (encaixe, anel aceso, número parado) segure ≥ 8 quadros.
+- 4 a 6 planos em 8 s.

package/kits/produto-3d/regras/som.md

@@ -0,0 +1,18 @@
+# Som
+
+Trilha: `assets/trilha/trilha.mp3` (dark-minimal, 100 bpm), volume 0,5, fade de saída 20 quadros. Alvo −14 LUFS.
+
+| som | volume | quando |
+|---|---|---|
+| subida | 0,7 | revelar do breu (quadro 0 do gancho) |
+| clique | 0,8 | o anel acende |
+| pop-palavra | 0,6–0,7 | título ou número entra |
+| whoosh-sai | 0,8 | vista explodida abre |
+| whoosh-entra | 0,6 | vista explodida começa a fechar |
+| impacto | 0,85 | o último encaixe (1 por vídeo) |
+| swoosh | 1 | corte chicote |
+| pop-cartao | 0,5 | rótulo aparece |
+| assinatura | 0,9 | a marca |
+
+- Máx. 2 sons por segundo; nunca o mesmo arquivo duas vezes seguidas.
+- O som vem 1–2 quadros antes do movimento.

package/kits/produto-3d/regras/tipografia.md

@@ -0,0 +1,13 @@
+# Tipografia
+
+| papel | fonte | tamanho px | máx. caracteres | tracking | caixa |
+|---|---|---|---|---|---|
+| título | Syncopate 700 | 68 (encolhe até caber em 904) | 14 por linha, 2 linhas | 0,3 em → 0,04 em na entrada | alta |
+| marca | Syncopate 700 | 92 | 12 | 0,6 em → 0,08 em | alta |
+| número | Syncopate 700 | 150 (prefixo/sufixo 42%) | 5 | −0,02 em | — |
+| rótulo | IBM Plex Mono 600 | 27 | 22 | 0,16 em | alta |
+| sub-rótulo | IBM Plex Mono 400 | 21 | 28 | 0,16 em | alta |
+| rodapé legal | IBM Plex Mono 400 | 17 | 70 | 0 | normal |
+
+- line-height do título: 1,18. Alinhado à esquerda em x = 88.
+- Linha entra em 16 quadros, 5 quadros entre linhas.

package/kits/quadro-giz/SKILL.md

@@ -0,0 +1,52 @@
+---
+slug: quadro-giz
+nome: Quadro de giz
+descricao: quadro verde com moldura de madeira, giz branco e colorido que escreve e desenha, apagador e poeira
+familia: Feito à mão
+versao: 1
+quando:
+  - "vídeo de aula, curso, aulão ou reforço escolar"
+  - "anúncio de escola, cursinho ou professor"
+  - "explicação passo a passo com cara de lousa"
+  - "quero quadro-negro/verde, giz, apagador, nostalgia de sala de aula"
+  - "convite de workshop ou palestra educativa"
+nao_serve:
+  - "visual tecnológico, neon ou premium (use outro kit)"
+  - "fundo claro ou colorido vibrante"
+  - "fotos como protagonista"
+---
+
+# Quadro de giz
+
+A lousa da escola em movimento. O chão é um quadro verde `#2E4A3E` com manchas claras de apagador, moldura de madeira de 38 px e bandeja de giz no pé (um giz e um apagador de feltro). Tudo é **giz**: títulos em Schoolbell escritos da esquerda para a direita, desenhos (maçã, livro, lâmpada, planeta) traçados em cores diferentes, contas escritas termo por termo com o resultado circulado, listas numeradas `1)`. O traço passa por um filtro de giz (borda áspera + falhas de pigmento) que troca de semente a cada 2 quadros. Um **apagador** varre e apaga palavras, deixando poeira. 1 herói por plano; o resto é quadro limpo.
+
+## Como montar um vídeo com este kit
+
+1. **Leia o pedido e o roteiro.** Corte cada fala em frases curtas (1 a 4 palavras). Uma frase = uma cena de 0,6 a 1,5 s.
+2. **Escolha as batidas** em `receita.json` (gancho → problema → prova → virada → lista → data → marca). Cada batida diz a duração e os elementos que servem.
+3. **Escreva o plano de cenas** (`plano.json`, mesmo formato de `exemplos/plano.json`): `de`/`ate` em quadros, `entrada`, `camadas` (elemento + props) e `sons`. 1 batida da trilha = 20 quadros.
+4. **Renderize** com `<Montagem plano={...} arquivos={...} />` ou combine `Fundo`, `Camera`, `Cena` e os elementos (tudo sai de `elementos/index.ts`).
+5. **Confira** um quadro por cena contra `regras/`: área segura, herói grande, nada parado, nada cortado.
+
+## Elementos
+
+| elemento | o que faz | batidas |
+|---|---|---|
+| `TituloGiz` | linhas de giz escritas da esquerda; sublinhado duplo na linha de destaque | gancho, virada |
+| `DesenhoGiz` | herói: maçã, livro, lâmpada, estrela, planeta ou seta desenhados traço a traço | prova, virada |
+| `ContaNoQuadro` | conta escrita termo a termo, resultado circulado | prova |
+| `ApagadorVarrendo` | palavra apagada por um apagador com poeira de giz | problema |
+| `ListaGiz` | itens `1)` escritos a giz com estrela no fim | lista |
+| `CartaoGiz` | moldura de giz com cantos reforçados e data grande | data, oferta |
+| `AssinaturaMarca` | nome em giz branco + estrela + detalhe + endereço em moldura | marca (sempre a última) |
+| `Fundo`, `Overlay`, `Camera`, `Cena` | quadro com manchas + filtros de giz, moldura de madeira e bandeja, câmera, janela | todas |
+| `Efeito`, `Trilha` | sons e trilha do kit | todas |
+
+## Proibido
+
+- Traço limpo de vetor: todo giz passa pelo filtro `gz-*` e entra sendo escrito, nunca de uma vez.
+- Cores fora do giz (branco, amarelo, rosa, azul, verde) sobre o verde do quadro.
+- Neon, brilho, degradê colorido, sombra suave (só a vinheta da moldura).
+- Mais de 1 herói + 1 apoio; menos de 35% de quadro limpo; margens < 96 px.
+- Fontes fora de Schoolbell e Patrick Hand; texto fora da área segura (168–1330 px).
+- Sem a pausa de 0,5–0,8 s depois de cada desenho ou resultado.

package/kits/quadro-giz/assets/ASSETS.md

@@ -0,0 +1,18 @@
+# Assets do kit quadro-giz
+
+| arquivo | o que é | origem | licença |
+|---|---|---|---|
+| `fontes/schoolbell.woff2` | Schoolbell (título), subset latino | Google Fonts (fonts.gstatic.com), baixado em 26/10/2026 | Apache 2.0 (Schoolbell) — texto em `fontes/OFL-schoolbell.txt` |
+| `fontes/patrick-hand.woff2` | Patrick Hand (texto), subset latino | Google Fonts (fonts.gstatic.com), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-patrick-hand.txt` |
+| `sons/whoosh-entra.mp3` | efeito whoosh-entra | sintetizado: MotionCraft `sfx make`, tipo `whoosh_in`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/whoosh-sai.mp3` | efeito whoosh-sai | sintetizado: MotionCraft `sfx make`, tipo `whoosh_out`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/swoosh.mp3` | efeito swoosh | sintetizado: MotionCraft `sfx make`, tipo `swoosh`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/pop-palavra.mp3` | efeito pop-palavra | sintetizado: MotionCraft `sfx make`, tipo `word_pop`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/pop-cartao.mp3` | efeito pop-cartao | sintetizado: MotionCraft `sfx make`, tipo `icon_pop`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/clique.mp3` | efeito clique | sintetizado: MotionCraft `sfx make`, tipo `button`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/impacto.mp3` | efeito impacto | sintetizado: MotionCraft `sfx make`, tipo `impact`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/subida.mp3` | efeito subida | sintetizado: MotionCraft `sfx make`, tipo `riser`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/assinatura.mp3` | efeito assinatura | sintetizado: MotionCraft `sfx make`, tipo `logo_sting`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/tick.mp3` | efeito tick | sintetizado: MotionCraft `sfx make`, tipo `letter_tick`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `trilha/trilha.mp3` | trilha de 8,7 s, 90 bpm | MotionCraft `music make --preset lofi-desk --bpm 90 --key D` | síntese própria (CC0); MotionCraft é MIT |
+