primocode 10.17.1 → 10.19.0

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

@@ -0,0 +1,249 @@
+// O motor 3D do kit, em JavaScript puro (o render headless do Remotion não tem WebGL).
+// Raymarching de formas arredondadas (SDF) com luz de estúdio, sombra suave, oclusão de contato e
+// antisserrilhado só nas bordas. Determinístico: o mesmo quadro sempre sai igual.
+// Quem usa é o Produto3D; ninguém precisa mexer aqui pra trocar de produto.
+
+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; sombraCor: [number, number, number]; acento: [number, number, number]; brilho: number;
+  estudio: [number, number, 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 L1 = norm(-0.55, 0.75, 0.52), L2 = norm(0.85, 0.27, 0.36), LC = norm(-0.12, 1, 0.12);
+
+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; // esta peça não pode mudar o resultado
+      const r = i * 9;
+      // local = Rᵀ·(p − pos)
+      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: [r baixo, altura, r cima], centrada
+        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) { // cilindro arredondado
+        const rr = raio[i];
+        const ax = Math.sqrt(qx * qx + qz * qz) - 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;
+      } 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;
+  // interseção raio × esfera que envolve o produto → [entra, sai] ou null
+  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));
+  };
+  const [scR, scG, scB] = c.sombraCor;
+  const [stR, stG, stB] = c.estudio;
+  // ambiente de estúdio (o que o cetim e o metal refletem)
+  const env = (dx: number, dy: number, dz: number, out: number[]) => {
+    const s = Math.max(0, Math.min(1, (dy + 0.35) / 1.1)), t = s * s * (3 - 2 * s);
+    const k1 = Math.max(0, Math.min(1, (dx * L1[0] + dy * L1[1] + dz * L1[2] - 0.86) / 0.125));
+    const k2 = Math.max(0, Math.min(1, (dx * L2[0] + dy * L2[1] + dz * L2[2] - 0.82) / 0.155));
+    const add = 0.75 * k1 * k1 * (3 - 2 * k1) + 0.45 * k2 * k2 * (3 - 2 * k2);
+    out[0] = stR * 0.82 + (1.04 - stR * 0.82) * t + add;
+    out[1] = stG * 0.82 + (1.04 - stG * 0.82) * t + add;
+    out[2] = stB * 0.82 + (1.04 - stB * 0.82) * t + add;
+  };
+  const E = [0, 0, 0];
+  // 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); // fw × up(0,1,0)
+  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);
+  };
+
+  // ---------- um raio: devolve cor + alfa (pré-multiplicado) em out e o id da peça (−1 = nada) ----------
+  const out = [0, 0, 0, 0];
+  const traçar = (px: number, py: number): number => {
+    const [dx, dy, dz] = raioDe(px, py);
+    const b = esfera(cx0, cy0, cz0, dx, dy, dz);
+    out[0] = out[1] = out[2] = out[3] = 0;
+    if (!b || b[1] < 0) return -1;
+    let t = Math.max(b[0], 0), hit = -1;
+    for (let i = 0; i < 140; i++) {
+      const h = mapa(cx0 + dx * t, cy0 + dy * t, cz0 + 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 = cx0 + dx * t, py3 = cy0 + dy * t, pz3 = cz0 + dz * t;
+    // normal (tetraedro)
+    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 = sombra(px3 + nx * 0.004, py3 + ny * 0.004, pz3 + nz * 0.004, L1[0], L1[1], L1[2], 9, 32);
+    let o = 0, s = 1;
+    for (let i = 0; i < 4; i++) {const hh = 0.012 + 0.05 * i; o += (hh - mapa(px3 + nx * hh, py3 + ny * hh, pz3 + nz * hh)) * s; s *= 0.75;}
+    const ao = Math.max(0, Math.min(1, 1 - 2.2 * o));
+    const ndl = nx * L1[0] + ny * L1[1] + nz * L1[2];
+    const dif = Math.max(0, Math.min(1, ndl * 0.6 + 0.4));
+    const dif2 = Math.max(0, Math.min(1, (nx * L2[0] + ny * L2[1] + nz * L2[2]) * 0.5 + 0.5));
+    const sky = 0.62 + 0.38 * ny;
+    const ndv = Math.max(0, Math.min(1, -(nx * dx + ny * dy + nz * dz)));
+    const fre = Math.pow(1 - ndv, 4);
+    const [hx, hy, hz] = norm(L1[0] - dx, L1[1] - dy, L1[2] - dz);
+    const nh = Math.max(0, nx * hx + ny * hy + nz * hz);
+    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 || m === 3) { // cetim
+      const lumA = 0.45 * dif * (0.45 + 0.55 * sh) + 0.15 * dif2 + 0.5 * sky + 0.12;
+      const bounce = 0.22 * Math.max(0, -ny);
+      const aoK = 0.55 + 0.45 * ao, sp = 0.16 * Math.pow(nh, 28) * sh;
+      r = br * (lumA + stR * bounce) * aoK + sp + E[0] * fre * 0.16;
+      g = bg * (lumA + stG * bounce) * aoK + sp + E[1] * fre * 0.16;
+      bl = bb * (lumA + stB * bounce) * aoK + sp + E[2] * fre * 0.16;
+      if (m === 3 && c.brilho > 0) {
+        const k = c.brilho;
+        r = r + (c.acento[0] * 1.18 - r) * k; g = g + (c.acento[1] * 1.18 - g) * k; bl = bl + (c.acento[2] * 1.18 - bl) * k;
+      }
+    } else if (m === 1) { // metal
+      const aoK = (0.5 + 0.5 * ao) * 0.92, sp = 0.9 * Math.pow(nh, 90) * sh;
+      r = br * E[0] * aoK + sp; g = bg * E[1] * aoK + sp; bl = bb * E[2] * aoK + sp;
+    } else { // grafite
+      const k = (0.45 + 0.55 * dif) * ao, sp = 0.1 * Math.pow(nh, 40);
+      r = br * k + sp + E[0] * fre * 0.06; g = bg * k + sp + E[1] * fre * 0.06; bl = bb * k + sp + E[2] * fre * 0.06;
+    }
+    out[0] = Math.min(1, r); out[1] = Math.min(1, g); out[2] = Math.min(1, bl); out[3] = 1;
+    return hit;
+  };
+
+  // ---------- 1) sombra de contato no chão, numa grade de 1/4 (é macia, não precisa de mais) ----------
+  const G = 4, gw = Math.ceil(W / G) + 2, gh = Math.ceil(H / G) + 2;
+  const grade = new Float32Array(gw * gh);
+  if (c.sombra > 0) {
+    const raioChao2 = er * er * 9;
+    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 sh = sombra(x, c.chao + 0.002, z, LC[0], LC[1], LC[2], 3.2, 28);
+      let o = 0, s = 1;
+      for (let k = 0; k < 5; k++) {const hh = 0.03 + 0.16 * k; o += Math.max(hh - mapa(x, c.chao + hh, z), 0) * s; s *= 0.72;}
+      const ao = Math.max(0, Math.min(1, 1 - 1.1 * o));
+      grade[j * gw + i] = c.sombra * Math.max(0, Math.min(1, 0.5 * (1 - sh) + 0.6 * (1 - ao)));
+    }
+  }
+  // ---------- 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 * 4);
+  // só varre o retângulo da tela onde a esfera do produto aparece
+  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 id = traçar(x + 0.5, y + 0.5);
+    if (id < 0) continue;
+    const k = y * W + x; ids[k] = id;
+    cor4[k * 4] = out[0]; cor4[k * 4 + 1] = out[1]; cor4[k * 4 + 2] = out[2]; cor4[k * 4 + 3] = 1;
+  }
+  // ---------- 3) bordas: 4 raios por pixel onde o id 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;}
+  }
+  const somb = (x: number, y: number) => { // sombra bilinear da grade
+    const gx = x / G, gy = y / G, i = Math.floor(gx), j = Math.floor(gy), tx = gx - i, ty = gy - j;
+    const a = grade[j * gw + i], b = grade[j * gw + i + 1], cc = grade[(j + 1) * gw + i], d = grade[(j + 1) * gw + i + 1];
+    return (a * (1 - tx) + b * tx) * (1 - ty) + (cc * (1 - tx) + d * tx) * ty;
+  };
+  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 id = traçar(x + 0.5 + sx, y + 0.5 + sy);
+        if (id >= 0) {r += out[0]; g += out[1]; b += out[2]; a += 1;}
+        else {const s = somb(x + 0.5 + sx, y + 0.5 + sy); r += scR * s; g += scG * s; b += scB * s; a += s;}
+      }
+      r /= 4; g /= 4; b /= 4; a /= 4;
+    } else if (ids[k] >= 0) {r = cor4[k * 4]; g = cor4[k * 4 + 1]; b = cor4[k * 4 + 2]; a = 1;}
+    else {a = somb(x + 0.5, y + 0.5); if (a <= 0.002) continue; r = scR * a; g = scG * a; b = scB * a;}
+    const p = k * 4;
+    px[p] = (r / a) * 255; px[p + 1] = (g / a) * 255; px[p + 2] = (b / a) * 255; px[p + 3] = a * 255;
+  }
+  ctx.putImageData(img, 0, 0);
+};

package/kits/apple-tipografico/exemplos/logo-lume.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><circle cx="60" cy="60" r="44" fill="none" stroke="#000" stroke-width="12"/><circle cx="60" cy="60" r="16" fill="#000"/></svg>

package/kits/apple-tipografico/exemplos/plano.json

@@ -0,0 +1,56 @@
+{
+  "kit": "apple-tipografico",
+  "duracao": 240,
+  "trilha": {"volume": 0.5},
+  "cenas": [
+    {"batida": "gancho", "de": 0, "ate": 36, "entrada": "escuro", "fundo": "nenhum",
+     "camadas": [{"elemento": "CartaoRadial", "props": {"sobretitulo": "Todo novo", "titulo": "Lume Buds", "inicio": 2}}],
+     "sons": [{"som": "whoosh-entra", "em": 0}]},
+
+    {"batida": "virada", "de": 36, "ate": 86, "entrada": "dissolver",
+     "camadas": [{"elemento": "Produto3D", "props": {
+       "modelo": [{"nome": "estojo"},
+                  {"nome": "fone", "pos": [-0.42, 0.59, 0], "escala": 0.42, "grupo": "fones"},
+                  {"nome": "fone", "pos": [0.42, 0.59, 0], "escala": 0.42, "rot": [0, 180, 0], "grupo": "fones"}],
+       "animar": [{"grupo": "tampa", "de": 8, "ate": 28, "rot": [-105, 0, 0], "pivo": [0, 0.85, -0.4]},
+                  {"grupo": "fones", "de": 22, "ate": 48, "pos": [0, 0.7, 0.15]}],
+       "giro": [[0, -32], [50, -14]], "centro": [0, 0.7, 0],
+       "camera": [{"em": 0, "distancia": 11.5, "elevacao": 17, "alvo": [0, 0.8, 0]}, {"em": 50, "distancia": 9.6, "elevacao": 12, "alvo": [0, 1.0, 0]}],
+       "chao": -0.3, "sombra": 0.5}}],
+     "sons": [{"som": "clique", "em": 7}, {"som": "whoosh-sai", "em": 21, "volume": 0.5}]},
+
+    {"batida": "prova", "de": 86, "ate": 114, "entrada": "corte", "camera": {"de": 1, "para": 1.03},
+     "camadas": [{"elemento": "LegendaCurta", "props": {"texto": "Refeito do zero.", "y": 950, "inicio": 2, "intervalo": 5, "sai": 20}}]},
+
+    {"batida": "prova", "de": 114, "ate": 168, "entrada": "borrao",
+     "camadas": [
+       {"elemento": "Produto3D", "props": {
+         "modelo": [{"nome": "fone", "pos": [-0.1, 0.52, 0], "rot": [0, -12, 0], "escala": 0.76, "grupo": "fone", "opcoes": {"semPonteira": 1}},
+                    {"nome": "ponteira", "pos": [0.23, 0.98, 0.03], "rot": [0, -12, 0], "escala": 0.84, "grupo": "p4"},
+                    {"nome": "ponteira", "pos": [0.23, 0.98, 0.03], "rot": [0, -12, 0], "escala": 0.76, "grupo": "p3"},
+                    {"nome": "ponteira", "pos": [0.23, 0.98, 0.03], "rot": [0, -12, 0], "escala": 0.68, "grupo": "p2"},
+                    {"nome": "ponteira", "pos": [0.23, 0.98, 0.03], "rot": [0, -12, 0], "escala": 0.6, "grupo": "p1"}],
+         "animar": [{"grupo": "p1", "de": 6, "ate": 26, "pos": [-0.89, -1.21, 0]},
+                    {"grupo": "p2", "de": 10, "ate": 30, "pos": [-0.45, -1.21, 0]},
+                    {"grupo": "p3", "de": 14, "ate": 34, "pos": [-0.01, -1.21, 0]},
+                    {"grupo": "p4", "de": 18, "ate": 38, "pos": [0.43, -1.21, 0]},
+                    {"grupo": "fone", "de": 0, "ate": 54, "rot": [0, 16, 0], "pivo": [-0.1, 0.52, 0]}],
+         "camera": [{"em": 0, "distancia": 8.4, "elevacao": 5, "alvo": [0, 0.02, 0]}, {"em": 54, "distancia": 8.0, "elevacao": 4, "alvo": [0, 0, 0]}],
+         "chao": -0.6, "sombra": 0.4}},
+       {"elemento": "LegendaCurta", "props": {"texto": "O encaixe, enfim resolvido.", "y": 1250, "inicio": 24, "intervalo": 4, "sai": -1}}],
+     "sons": [{"som": "swoosh", "em": 0}, {"som": "pop-cartao", "em": 24, "volume": 0.45}, {"som": "pop-cartao", "em": 36, "volume": 0.45}]},
+
+    {"batida": "detalhe", "de": 168, "ate": 206, "entrada": "borrao",
+     "camadas": [
+       {"elemento": "Produto3D", "props": {
+         "modelo": [{"nome": "fone", "rot": [0, 0, 0]}],
+         "camera": [{"em": 0, "distancia": 3.0, "elevacao": 5, "orbita": 22, "alvo": [0.15, -0.05, 0.1]}, {"em": 38, "distancia": 2.6, "elevacao": 3, "orbita": 6, "alvo": [0.13, -0.1, 0.1]}],
+         "brilho": [[10, 0], [20, 1], [38, 0.9]], "sombra": 0}},
+       {"elemento": "LegendaCurta", "props": {"texto": "Controle no toque.", "x": 500, "y": 960, "alinhar": "esquerda", "inicio": 12, "intervalo": 4, "sai": -1}}],
+     "sons": [{"som": "swoosh", "em": 0}, {"som": "clique", "em": 10}]},
+
+    {"batida": "marca", "de": 206, "ate": 240, "entrada": "corte", "fundo": "nenhum",
+     "camadas": [{"elemento": "AssinaturaPreta", "props": {"logo": "logo-lume.svg", "inicio": 3, "altura": 190, "rodape": "Lume Buds é um produto fictício, criado para esta demonstração."}}],
+     "sons": [{"som": "assinatura", "em": 2}]}
+  ]
+}

package/kits/apple-tipografico/exemplos/roteiro.md

@@ -0,0 +1,19 @@
+# Roteiro de demonstração · "Lume Buds" (produto fictício)
+
+Pedido: *"um reels de 8 s lançando o Lume Buds, nosso fone novo. Estilo filme de produto da Apple."*
+
+Sem narração: os cortes seguem a trilha. O produto é montado em 3D com os modelos prontos `estojo`, `fone` e `ponteira`.
+
+| # | batida | quadros | na tela | elemento | som |
+|---|---|---|---|---|---|
+| 1 | gancho | 0–36 | radial abre: "Todo novo / Lume Buds" | CartaoRadial | whoosh-entra |
+| 2 | virada | 36–86 | estojo gira, tampa abre, fones sobem; câmera aproxima | Produto3D (estojo + 2 fones) | clique, whoosh-sai |
+| 3 | prova | 86–114 | "Refeito do zero." palavra a palavra, sai borrando | LegendaCurta + Camera | — |
+| 4 | prova | 114–168 | fone sem ponteira; 4 ponteiras saem e se enfileiram + "O encaixe, enfim resolvido." | Produto3D + LegendaCurta | swoosh, pop-cartao ×2 |
+| 5 | detalhe | 168–206 | close da haste, o sulco acende verde + "Controle no toque." | Produto3D (brilho) + LegendaCurta | swoosh, clique |
+| 6 | marca | 206–240 | corte pro preto, logo Lume + rodapé | AssinaturaPreta | assinatura |
+
+Como a IA chegou nisso:
+- Copiou a ordem do filme de referência: título colorido → produto inteiro → frase sozinha → peças se separando → close → logo no preto.
+- Cada plano mostra o produto FAZENDO algo (abrir, subir, enfileirar, acender); o texto só nomeia o que se vê, em uma linha.
+- Os números (órbita, distância, quadros) vieram de `regras/movimento.md` e `regras/ritmo.md`.

package/kits/apple-tipografico/preview.tsx

@@ -0,0 +1,12 @@
+// Preview do kit: o filme de demonstração (8 s) montado SÓ com os elementos do kit, a partir de exemplos/plano.json.
+// Produto fictício (Lume Buds), desenhado em 3D com os modelos prontos do kit. O estúdio registra isto como `Kit-apple-tipografico`.
+import React from 'react';
+import {Montagem, Plano} from './elementos';
+import plano from './exemplos/plano.json';
+import logo from './exemplos/logo-lume.svg';
+
+const arquivos: Record<string, string> = {'logo-lume.svg': logo};
+
+const Preview: React.FC = () => <Montagem plano={plano as unknown as Plano} arquivos={arquivos} />;
+
+export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 165, Componente: Preview};

package/kits/apple-tipografico/receita.json

@@ -0,0 +1,22 @@
+{
+  "kit": "apple-tipografico",
+  "fps": 30,
+  "batida_trilha_quadros": 14.4,
+  "duracao_video_s": [6, 60],
+  "ordem_sugerida": ["gancho", "virada", "prova", "prova", "detalhe", "marca"],
+  "batidas": [
+    {"nome": "gancho", "obrigatoria": true, "duracao": [34, 50], "elementos": ["CartaoRadial"], "entrada": ["escuro"], "fundo": "nenhum", "sons": ["whoosh-entra"], "nota": "o único momento colorido: degradê radial abre do centro, 'Todo novo' + nome do produto, pequenos e escuros."},
+    {"nome": "virada", "obrigatoria": true, "duracao": [42, 60], "elementos": ["Produto3D", "ProdutoFoto"], "entrada": ["dissolver"], "sons": ["clique", "whoosh-sai"], "nota": "o produto inteiro no estúdio: gira 15–20°, a câmera aproxima, algo abre ou sobe (tampa, peças). Sem texto."},
+    {"nome": "prova", "obrigatoria": true, "duracao": [26, 70], "elementos": ["LegendaCurta", "Produto3D", "ProdutoFoto"], "entrada": ["corte", "borrao"], "sons": ["swoosh", "pop-cartao"], "nota": "ou só uma frase curta no estúdio vazio, ou uma função mostrada pelo produto (peças se separam e se enfileiram) com a legenda embaixo. Repita 2–3 vezes alternando."},
+    {"nome": "detalhe", "obrigatoria": false, "duracao": [34, 50], "elementos": ["Produto3D", "LegendaCurta"], "entrada": ["borrao"], "sons": ["swoosh", "clique"], "nota": "close extremo (distância 2,5–3) num detalhe; o acento acende (brilho); legenda de 2–3 palavras ao lado."},
+    {"nome": "marca", "obrigatoria": true, "duracao": [34, 48], "elementos": ["AssinaturaPreta"], "entrada": ["corte"], "fundo": "nenhum", "sons": ["assinatura"], "nota": "sempre a última: corte seco pro preto, logo claro no meio, rodapé legal opcional."}
+  ],
+  "transicoes": [
+    {"nome": "corte", "quadros": 0, "como": "troca seca"},
+    {"nome": "dissolver", "quadros": 10, "como": "fusão linear; a anterior fica por baixo"},
+    {"nome": "borrao", "quadros": 8, "como": "chicote: a anterior sai −160 px com desfoque horizontal 60 px; a nova entra de +220 px"},
+    {"nome": "escuro", "quadros": 12, "como": "nasce do preto"}
+  ],
+  "camera": {"3d": "órbita 15–20° e aproximação de 8–20% por plano, curva suave", "2d": "Camera de 1 → 1,03–1,06"},
+  "trilha": {"arquivo": "assets/trilha/tech-claro-125bpm.mp3", "volume": 0.5, "com_narracao": 0.25}
+}

package/kits/apple-tipografico/regras/area-segura.md

@@ -0,0 +1,19 @@
+# Área segura (9:16, 1080×1920)
+
+- Texto entre **y = 168** e **y = 1330**, **x = 80** a **1000** (920 px úteis). O produto pode sangrar a tela (no close, sempre sangra).
+- O filme original é 16:10; no vertical o produto ocupa **40–60% da altura** no plano geral e sangra no close.
+
+| uso | y (px) |
+|---|---|
+| título do cartão radial (centro) | 900 |
+| sobretítulo | 900 − 0,5 × título − 37 |
+| legenda sozinha (plano só de texto) | 950 |
+| produto no plano geral (centro) | 760–900 |
+| fila de peças | 1060–1140 |
+| legenda sob o produto / sob a fila | 1250 |
+| legenda ao lado do close (alinhar esquerda, x 500) | 960 |
+| logo no fim (centro, altura 150–190) | 860 |
+| rodapé legal | 1240 |
+
+- Câmera 3D: lente de 26° vertical. Visível na distância d: altura ≈ 0,46·d, largura ≈ 0,26·d unidades.
+  Produto de 1,6 de altura ocupa ~45% da tela em d ≈ 7,7.

package/kits/apple-tipografico/regras/cor.md

@@ -0,0 +1,24 @@
+# Cor
+
+Medido no filme de referência (AirPods Pro 3, filmado da tela de um MacBook com celular, então os
+valores brutos vêm ~15% mais quentes e escuros; os tokens abaixo são os corrigidos).
+
+| token | hex | uso | medido no filme (bruto) |
+|---|---|---|---|
+| estúdio (chão) | `#EAE4DA` | fundo de toda cena de produto, sem emenda | `#CBB497` no centro, `#C0AC94` embaixo |
+| estúdio luz | `#F3EFE8` | centro do radial de luz, 0% (em 50% x, 44% y) | — |
+| estúdio borda | `#DAD2C5` | cantos, 100% (7% mais escuro que o meio) | `#918170` no canto (vinheta da câmera) |
+| produto (cetim) | `#EEEBE5` | corpo do produto; o sombreado o leva a ~`#B8B3AA` no lado escuro | — |
+| ponteira | `#E2DED6` | silicone, um tom abaixo do corpo | — |
+| grafite | `#2A2A2D` | telas de som, sulcos, luz de status | — |
+| metal | `#C8C5BF` | anéis, dobradiça (reflete o estúdio) | — |
+| sombra | `#3A3026` | sombra de contato, opacidade 0,35–0,55 | — |
+| tinta | `#1D1D1F` | todo texto sobre o estúdio | `#3A3836` |
+| acento | `#7CE23A` | **só** o brilho do detalhe tocável, 1 vez por vídeo | verde-limão do "Touch control" |
+| preto | `#000000` | fim (logo) e abertura | `#1C2027` (preto de tela) |
+| logo / rodapé | `#F5F5F7` / `#86868B` | logo no preto / linha legal | — |
+
+- **Cartão radial** (título, uma vez): `radial-gradient(circle at 50% 900px, #F7E7C4 0, #F2DDAE 20%, #9FE3B4 38%, #46BFD9 55%, #2366D6 74%, #173E9C 92%, #000 112%)`, raio final 1500 px. Medido: centro `#C7AE81`, anel `#8AB992`, borda `#1A4A96`/`#22468B`.
+- Luz do produto (fixa no mundo, não gira com a câmera): softbox em cima à esquerda (−0,55; 0,75; 0,52), recorte à direita (0,85; 0,27; 0,36), céu branco; ambiente mínimo 0,12.
+- Sombra de contato: 50% da sombra suave (luz quase vertical, k = 3,2) + 60% da oclusão do chão; o canvas é transparente, então ela multiplica qualquer Fundo.
+- O cliente pode trocar: cor do produto (`cor`), acento (`acento`), cores do radial (`cores`). O estúdio só troca se a marca pedir (`Fundo cor`), e nunca para cor saturada.

package/kits/apple-tipografico/regras/movimento.md

@@ -0,0 +1,29 @@
+# Movimento
+
+Câmera lenta e cara: tudo começa e termina devagar. Nenhum tremor, nenhum soco, nenhum zoom rápido.
+
+Curvas (`base.ts`): `suave` = `cubic-bezier(.45,0,.2,1)` (câmera, peças, tampa) · `saida` = `cubic-bezier(.16,1,.3,1)` (texto e peça que pousa) · `entrada` = `cubic-bezier(.7,0,.84,0)` (texto que sai).
+
+| movimento | quadros | valores (medidos/derivados do filme) |
+|---|---|---|
+| órbita da câmera 3D | o plano todo (40–55) | 15–20° por plano (≈ 10°/s), elevação cai 3–5° |
+| aproximação (push-in) 3D | o plano todo | distância −8% a −20% (ex.: 11,5 → 9,6) |
+| giro do produto | o plano todo | 15–20° em Y (`giro [[0,−32],[50,−14]]`) |
+| flutuação | contínua | 0,025 unidade, período 3,2 s (quase invisível) |
+| tampa abre | 20 | −105° em X na dobradiça |
+| peças sobem/saem | 20–26 | 0,7–1,5 unidade, curva `suave` |
+| peças se enfileiram | 20 cada, 4 de intervalo | da posição de origem até a fila, todas na mesma altura |
+| close extremo | 38 | distância 3,0 → 2,6, órbita 22° → 6°, lente 26° |
+| brilho do detalhe | 10 | 0 → 1, depois fica |
+| empurrão 2D (texto) | o plano todo | escala 1 → 1,03–1,06 (`Camera`) |
+| cartão radial abre | 20 | raio 60 → 1500 px a partir do centro; título entra 8–22 |
+| logo no preto | 18 | opacidade 0 → 1, escala 0,94 → 1, desfoque 6 → 0 px |
+
+Transições (`Cena`):
+
+| transição | quadros | como |
+|---|---|---|
+| `corte` | 0 | troca seca (o filme corta no texto e no logo) |
+| `dissolver` | 10 | fusão linear (radial → estúdio com o produto) |
+| `borrao` | 8 | chicote: sai −160 px com desfoque horizontal até 60 px; entra de +220 px |
+| `escuro` | 12 | nasce do preto (abertura) |

package/kits/apple-tipografico/regras/ritmo.md

@@ -0,0 +1,29 @@
+# Ritmo
+
+Medido no filme (11,5 s de filme + 1,5 s de logo): **um plano a cada 1,0–1,6 s**, nunca mais de 2 s
+parado no mesmo enquadramento.
+
+| trecho do filme | s | o que acontece |
+|---|---|---|
+| 0,0–1,3 | 1,3 | preto |
+| 1,3–2,9 | 1,6 | cartão radial "All new / AirPods Pro 3" abre, segura, recolhe |
+| 3,2–5,0 | 1,8 | o estojo nasce no centro do radial, que vira estúdio; gira, abre, fones sobem |
+| 5,0–6,0 | 1,0 | só texto: "Rebuilt from the ground up" palavra a palavra, sai borrando |
+| 6,0–8,3 | 2,3 | chicote → par de fones girando → ponteiras saem e se enfileiram + "Fit, finally figured out." |
+| 8,5–10,0 | 1,5 | close extremo da haste, "Touch control", brilho verde no sulco |
+| 10,0–11,5 | 1,5 | fones caem no estojo, tampa fecha |
+| 11,5–13,0 | 1,5 | corte pro preto, logo |
+
+30 fps. Duração de cada batida (`receita.json`):
+
+| batida | s | quadros |
+|---|---|---|
+| gancho (cartão radial) | 1,1–1,7 | 34–50 |
+| virada (produto aparece) | 1,4–2,0 | 42–60 |
+| prova (texto só) | 0,9–1,2 | 26–36 |
+| prova (peças / função) | 1,5–2,3 | 45–70 |
+| detalhe (close) | 1,1–1,7 | 34–50 |
+| marca (logo no preto) | 1,1–1,6 | 34–48 |
+
+- Preview: 8 s, 6 planos. Vídeo de 15 s: 9–10 planos. Leitura: a linha precisa de **≥ 18 quadros** inteira na tela.
+- Sem narração, o corte segue a trilha (125 bpm = 14,4 quadros por batida) arredondando pro quadro.

package/kits/apple-tipografico/regras/som.md

@@ -0,0 +1,20 @@
+# Som
+
+O filme é música + respiros: quase nenhum efeito. O som só marca o que se MEXE no produto.
+
+- Trilha: `assets/trilha/tech-claro-125bpm.mp3` (8,64 s, 125 bpm), volume **0,5**, fade de saída de **20 quadros**.
+  Vídeo maior que 8,6 s: gere uma nova no MotionCraft (`music make`, preset `tech-bright`); não faça loop.
+- Com narração: trilha a **0,25**, efeitos a 70%.
+
+| som | volume | quando |
+|---|---|---|
+| `whoosh-entra` | 0,9 | o cartão radial abre (quadro 0) |
+| `swoosh` | 1,0 | transição `borrao` (chicote) |
+| `clique` | 0,8 | tampa abre / detalhe acende |
+| `whoosh-sai` | 0,5 | peças sobem |
+| `pop-cartao` | 0,45 | peças pousam na fila (no máx. 2 por fila) |
+| `assinatura` | 0,9 | logo no preto |
+| `pop-palavra`, `impacto`, `subida` | — | **não use** neste estilo (ficam pra outros kits) |
+
+- No máximo **2 efeitos por segundo**; texto entra em silêncio.
+- Som 1–2 quadros antes do visual. O render nivela em **−14 LUFS**, pico −1,5 dBTP.

package/kits/apple-tipografico/regras/tipografia.md

@@ -0,0 +1,21 @@
+# Tipografia
+
+O texto do filme é **pequeno, calmo e escuro**: o herói é o produto, não a letra. Medido no filme:
+legenda ≈ 4% da altura do quadro, título ≈ 7%, "All new" ≈ 3%.
+
+- Fonte única: **Inter** (pesos 500–600 aqui), carregada como `"AT Inter"` de `assets/fontes/` (no lugar da SF Pro).
+- Cor `#1D1D1F` sobre o estúdio; no radial o título vai a 92% de opacidade e o sobretítulo a 82%.
+- **Uma linha curta por plano.** Nada de título de várias linhas, nada de palavra em degradê.
+
+| papel | tamanho (px, 1080×1920) | peso | tracking | máx. caracteres |
+|---|---|---|---|---|
+| legenda (`LegendaCurta`) | 50 | 600 | −0,012em | 28 |
+| título do cartão radial | 92 | 600 | −0,022em | 16 |
+| sobretítulo ("Todo novo") | 34 | 500 | −0,005em | 14 |
+| marca escrita (sem logo) | 0,62 × altura do logo | 600 | −0,03em | 12 |
+| rodapé legal | 19 | 500 | 0 | 90 |
+
+- Entrada: **palavra por palavra**, 4–5 quadros entre palavras, cada uma vem 26 px da direita com desfoque 9 → 0 px em 10 quadros (curva `saida`).
+- Saída: a linha inteira borra **na horizontal** (0 → 26 px), anda −70 px e some em 8 quadros (curva `entrada`).
+- Caixa de frase, ponto final no fim ("Refeito do zero."). Nunca tudo maiúsculo.
+- Toda linha encolhe sozinha (`caber()`) para a largura útil; se encolheu mais de 20%, a frase está longa demais: corte palavras.

package/kits/aquarela/SKILL.md

@@ -0,0 +1,52 @@
+---
+slug: aquarela
+nome: Aquarela
+descricao: papel cru com grão, manchas de tinta que florescem e escorrem, pincelada, anotação à mão e papel rasgado com fita
+familia: Feito à mão
+versao: 1
+quando:
+  - "vídeo de oficina, curso de arte ou ateliê"
+  - "convite de evento artesanal, feira ou exposição"
+  - "reels de marca criativa, gentil, feita à mão"
+  - "anúncio com cara de caderno de artista, sem cara de template"
+  - "lançamento de produto autoral (cerâmica, papelaria, café, cosmético)"
+nao_serve:
+  - "vídeo de tecnologia, SaaS ou dado (use um kit de interface)"
+  - "estilo frio, metálico, neon ou 3D (use outro kit)"
+---
+
+# Aquarela
+
+Um caderno de artista em movimento: o chão é papel cru com grão e fibra, e **toda cena nasce de uma mancha de tinta** (coral, turquesa, ouro, violeta) que floresce com borda irregular e escorre devagar. Em cima, títulos em Fraunces 700 gigantes onde a palavra-chave ganha uma lavagem de cor atrás; pinceladas de cerda seca riscam a tela; anotações em Caveat se escrevem sozinhas com seta ou círculo desenhados; cartões de papel rasgado com fita washi caem na tela. Pingos de tinta batem no papel e espirram. A câmera balança como uma mão sobre a mesa. Nada é liso: tudo tem borda tremida.
+
+## Como montar um vídeo com este kit
+
+1. **Leia o pedido e o roteiro.** Corte cada fala em frases curtas. Uma frase = uma cena.
+2. **Escolha as batidas** em `receita.json` (gancho → problema → virada → prova → lista → data → marca). Cada batida diz quanto dura e quais elementos servem.
+3. **Escreva o plano de cenas** (`plano.json`, mesmo formato de `exemplos/plano.json`): para cada cena, `de`/`ate` em quadros, a `entrada`, as `camadas` (elemento + props) e os `sons`. Os cortes seguem a voz (se houver) ou a batida da trilha: 1 batida = 16.667 quadros.
+4. **Renderize** com `<Montagem plano={...} arquivos={...} />` ou escreva o TSX direto combinando `Fundo`, `Camera`, `Cena` e os elementos (tudo sai de `elementos/index.ts`).
+5. **Confira** os quadros (um por cena) contra `regras/`: área segura, nada cortado, um herói por cena, nenhum quadro parado.
+
+## Elementos
+
+| elemento | o que faz | batidas |
+|---|---|---|
+| `ManchaTinta` | manchas de tinta que florescem com borda tremida e escorrem; a base de toda cena | todas |
+| `TituloPincel` | título gigante em Fraunces, a palavra `*destaque*` ganha lavagem de cor atrás | gancho, virada, oferta |
+| `Pincelada` | traço de pincel de cerdas secas atravessando a tela (sublinhado ou fundo) | virada, prova |
+| `AnotacaoManual` | texto em Caveat que se escreve, com seta, círculo ou sublinhado desenhado | virada, prova, lista |
+| `PapelRasgado` | cartão de papel com borda rasgada e fita washi que cai e pousa; título, linhas ou foto | prova, lista, data |
+| `Pingos` | gotas de tinta que caem e espirram no papel | gancho, problema |
+| `AssinaturaMarca` | mancha + logo + nome + detalhe + endereço, sempre a última cena | marca |
+| `Fundo`, `Camera`, `Cena` | papel cru com grão e fibra, vinheta marrom e lavagens claras à deriva | todas |
+| `Efeito`, `Trilha` | sons e trilha do kit | todas |
+
+## Proibido
+
+- Fundo liso, degradê digital ou borda perfeita: toda forma passa pelo filtro de água (`aq-agua`).
+- Mais de 4 cores de tinta numa mesma cena; as 4 do `regras/cor.md` e mais nada.
+- Sombra preta, glow, brilho ou neon; a única sombra é a do papel (marrom a 28%).
+- Texto de corpo em Fraunces com menos de 56 px; texto de mão (Caveat) só para anotação de 1 a 5 palavras.
+- Cena parada: ou uma mancha cresce, ou uma pincelada anda, ou um pingo cai; a câmera sempre balança.
+- Foto com cara de banco; se houver foto real, entra só dentro de `PapelRasgado`.
+- Texto fora da área segura (168–1330 px na vertical, 80 px nas laterais).

package/kits/aquarela/assets/ASSETS.md

@@ -0,0 +1,21 @@
+# Assets do kit aquarela
+
+| arquivo | o que é | origem | licença |
+|---|---|---|---|
+| `fontes/fraunces-latin.woff2` | Fraunces (500 800), subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Fraunces`), baixado em 26/10/2026 | SIL OFL 1.1, texto em `fontes/OFL-Fraunces.txt` |
+| `fontes/caveat-latin.woff2` | Caveat (600 700), subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Caveat`), baixado em 26/10/2026 | SIL OFL 1.1, texto em `fontes/OFL-Caveat.txt` |
+| `sons/whoosh-pincel.mp3` | pincelada que atravessa a tela (−1 quadro) | sintetizado: MotionCraft `sfx make`, tipo `swoosh`, pacote `paper` | sem samples; síntese própria (CC0) |
+| `sons/pop-mancha.mp3` | mancha de tinta que floresce | sintetizado: MotionCraft `sfx make`, tipo `bubble`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/gota.mp3` | pingo que bate no papel | sintetizado: MotionCraft `sfx make`, tipo `icon_pop`, pacote `glass` | sem samples; síntese própria (CC0) |
+| `sons/papel-cai.mp3` | cartão de papel rasgado que cai | sintetizado: MotionCraft `sfx make`, tipo `whoosh_in`, pacote `paper` | sem samples; síntese própria (CC0) |
+| `sons/palavra.mp3` | palavra do título que cai | sintetizado: MotionCraft `sfx make`, tipo `word_pop`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/risco.mp3` | anotação à mão que se escreve | sintetizado: MotionCraft `sfx make`, tipo `letter_tick`, pacote `paper` | sem samples; síntese própria (CC0) |
+| `sons/impacto.mp3` | a palavra final da virada e a data | sintetizado: MotionCraft `sfx make`, tipo `impact`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/assinatura.mp3` | revelação da marca | sintetizado: MotionCraft `sfx make`, tipo `logo_sting`, pacote `glass` | sem samples; síntese própria (CC0) |
+| `trilha/calma-com-punch-108bpm.mp3` | 8,6 s a partir de 2.2222 s da trilha gerada | MotionCraft `music make` (preset `calm-punch`, 108 bpm, tom F) | sem samples; síntese própria (CC0). MotionCraft é MIT |
+
+Conteúdo de demonstração (não faz parte do estilo, fica em `exemplos/`):
+
+| arquivo | origem | licença |
+|---|---|---|
+| `exemplos/logo-mare.svg` | logo fictício desenhado para a demo | próprio |