primocode 10.13.0 → 10.14.0

package/lib/estudio/dados/projetos-ae/processo-motion-100-ia/comp-a/js/p1a.js

@@ -0,0 +1,169 @@
+/* p1a.js — Parte 1, falas 01–05 + vitrine. Porte da Variação A aprovada (variacoes/A/previa-30s.mp4).
+ * 17/10 rodada C: as falas 01–02 viram uma APRESENTAÇÃO à parte (gancho): impacto de abertura com o rap (Still D.R.E.),
+ * 🤔 com "?" animados, opener premium do YouMotion com o som dele, figurinha Mega Brain ("ative a força total") e fim de
+ * trailer (golpe + cauda longa). Respiro de 1,8 s, flash de câmera e o tutorial começa só com o texto (fala 03).
+ * Tempos depois de 11,8 s sempre por F0/PF/CN (o respiro mudou em 17/10 e tudo andou +1 s). Som: comp-a/audio.py (gancho). */
+
+const T_DROP = 0.30;                                   // impacto de abertura (golpe + entrada da bateria do rap)
+const T_HIT = PF('02', 'artificial', true) + 0.03;     // fim de trailer: golpe + cauda longa; o rap corta aqui
+const T_SOME = F0('03') - 0.55;                        // a apresentação sai de cena (desfoque)
+const T_FLASH = F0('03') - 0.22;                       // flash de câmera: o clarão abre o mundo claro do tutorial
+// socos de câmera: impacto, tempos fortes do rap (92 BPM, compasso 2,61 s; a faixa volta em 4,03 s) e o fim de trailer
+golpe(T_DROP, 1.0); golpe(5.47, 0.45); golpe(8.08, 0.55); golpe(T_HIT, 1.4); flash(T_FLASH);
+VIDEOS.push({ nome: 'ask-ai-gemini', t0: 1.42, t1: 4.08, trilha: 'para', alvo: -18 });   // opener com o som dele (o rap pausa)
+
+// ═══ GANCHO (falas 01–02): uma apresentação à parte, num mundo ESCURO; tipografia cinética grande (1–3 palavras por vez,
+// centrada) e elementos grandes. O flash branco em T_FLASH abre o mundo claro do tutorial (clarão → claro). ═══
+(function () {
+  const ESC = '#0B0B0F', AZ = '#6F8BFF', OR = '#F0946F';
+  const F = 'img/filmes/';
+  const box = (pai, x, y, w, h, css = {}, html) => $('div', null, pai, Object.assign({ position: 'absolute', left: x + 'px', top: y + 'px', width: w + 'px', height: h + 'px' }, css), html);
+  // grupos de texto: [fala, 'palavras com marcas', {y, tam}] — cada grupo substitui o anterior; y = centro do bloco
+  const G = [
+    ['01', 'Como faço', { y: 1430, tam: 200 }], ['01', 'esse a|estilo', { y: 1430, tam: 190 }], ['01', 'de a|vídeo', { y: 1330, tam: 190 }], ['01', 'usando', { y: 1330, tam: 170 }],
+    ['01', [pula(3)], null], ['01', 'of|IA', { y: 1340, tam: 200 }], ['01', 'no meu f|processo?', { y: 960, tam: 190 }],
+    ['02', 'Nesse a|vídeo,', { y: 960, tam: 210 }], ['02', 'eu vou tentar', { y: 960, tam: 190 }], ['02', 'f|explicar', { y: 960, tam: 220 }], ['02', 'o meu processo', { y: 1330, tam: 160 }],
+    ['02', 'f|criativo', { y: 1330, tam: 200 }], ['02', 'para produzir', { y: 960, tam: 190 }], ['02', 'esse a|tipo', { y: 1340, tam: 190 }], ['02', 'de a|vídeo', { y: 1340, tam: 190 }],
+    ['02', 'usando 100%#3 da', { y: 960, tam: 180 }], ['02', 'of|inteligência of|artificial.', { y: 1400, tam: 150 }],
+  ];
+  const grupos = [];
+  G.forEach(([f, txt, o]) => {
+    const raw = [].concat(txt).flatMap(x => (typeof x === 'string' ? x.split(/\s+/) : [x]));
+    if (!o) { raw.forEach(x => filaDe(f).splice(0, x.pula)); return; }
+    grupos.push(Object.assign({ w: raw.map(x => tokPalavra(f, x)) }, o));
+  });
+  grupos[0].w[0].s = T_DROP - 0.02;   // "Como" chega junto do impacto
+  grupos.forEach((g, i) => { g.t0 = g.w[0].s - 0.06; });
+  grupos.forEach((g, i) => { g.t1 = grupos[i + 1] ? grupos[i + 1].t0 + 0.02 : T_SOME; });
+
+  cena('gancho', -1, T_FLASH + 0.1, (r, c) => {
+    c.fundo = box(r, 0, 0, W, H, { background: `radial-gradient(900px 700px at 20% 12%, rgba(64,96,255,.20), transparent 70%), radial-gradient(900px 800px at 85% 92%, rgba(240,120,80,.16), transparent 70%), ${ESC}` });
+    c.gr = box(r, 0, 0, W, H, { opacity: '.10', mixBlendMode: 'screen', backgroundImage: getComputedStyle(document.getElementById('grao')).backgroundImage });
+    // 🤔 enorme com "?" pulando em volta (Como faço…)
+    c.pen = box(r, 540 - 260, 660 - 260, 520, 520); c.penL = emojiLot(c.pen, 'u1f914', 520);
+    c.q = [[170, 420, AZ, -16], [860, 380, OR, 14], [880, 760, '#fff', 22], [160, 820, OR, -10]].map(([x, y, cor, r0]) => Object.assign(box(r, x - 70, y - 90, 140, 180, { font: '700 180px/1 GS', color: cor, textAlign: 'center' }, '?'), { r0 }));
+    // opener do YouMotion (Ask AI Workflow) quase em tela cheia, com o som dele
+    c.op = box(r, 40, 760 - 281, 1000, 563, { borderRadius: '40px', overflow: 'hidden', background: '#000', boxShadow: '0 0 0 1.5px rgba(255,255,255,.10), 0 60px 140px -30px rgba(64,96,255,.45)' }); c.opF = filme(c.op, 'ask-ai-gemini');
+    // 100% gigante contando + logo do Claude
+    c.cem = box(r, 0, 610, W, 340, { textAlign: 'center', font: '700 320px/1 GS', letterSpacing: '-0.06em', color: '#fff' });
+    c.cl = box(r, 540 - 110, 1000 - 30, 220, 220, {}, `<img src="${LOGO('claude-symbol.svg')}" style="width:220px;height:220px">`);
+    // os 4 passos passando rápido (processo criativo)
+    const ics = [['emoji', 'u1f50d', '#EEF1FE'], ['emoji', 'u1f3a8', '#FFF6DC'], ['emoji', 'u1f3b5', '#E8F8EE'], ['emoji', 'u2728', '#FBEDE7']];
+    c.ics = ics.map(([_, id, fundo], i) => { const q = box(r, 0, 0, 230, 230, { borderRadius: '64px', background: fundo, boxShadow: '0 30px 60px -20px rgba(0,0,0,.6)' }); q.l = emojiLot(q, id, 180); q.l.style.left = '25px'; q.l.style.top = '25px'; return q; });
+    // 2º corte de opener (AI Opener: o prompt neon digitando), sem som
+    c.op2 = box(r, 40, 760 - 281, 1000, 563, { borderRadius: '40px', overflow: 'hidden', background: '#000', boxShadow: '0 60px 140px -30px rgba(240,120,80,.35)' }); c.op2F = filme(c.op2, 'ai-neon-prompt');
+    // Mega Brain: o meme inteiro, com o texto "megabrain, ative a força total" (17/10: sem o antes × depois); brilho azul; clarão no golpe do fim de trailer
+    c.mb = box(r, 540 - 410, 700 - 402, 820, 804);
+    c.hud = box(c.mb, -60, -60, 940, 924, { borderRadius: '50%', background: 'radial-gradient(closest-side, rgba(64,190,255,.55), rgba(64,190,255,0))' });
+    c.mbB = $('img', null, c.mb, { position: 'absolute', left: '0', top: '0', width: '820px' }); c.mbB.src = '../assets/pessoas/megabrain-meme-figurinha.png';
+    // texto cinético
+    grupos.forEach(g => { g.el = box(r, 40, 0, 1000, 10, { height: 'auto', textAlign: 'center', font: `600 ${g.tam}px/${(g.tam * 1.02).toFixed(0)}px GS`, letterSpacing: '-0.045em', color: '#F7F6F2' });
+      g.w.forEach(w => { w.el = $('span', null, g.el, { display: 'inline-block', marginRight: '0.22em', color: w.c === 'az' ? AZ : w.c === 'or' ? OR : '' }, w.txt); }); });
+    c.tPen = T_DROP; c.tOp = 1.38; c.tCem = PF('01', 'cem') - 0.05; c.tIA = PF('01', 'ia'); c.tProc = PF('01', 'no') + 0.05;   // opener e 100% saem antes de "no meu processo?"
+    c.tIcs = PF('02', 'processo'); c.tOp2 = PF('02', 'tipo') - 0.12; c.tMB = PF('02', 'inteligencia') - 0.1; c.tVira = PF('02', 'artificial') + 0.08;
+    ev(c.tPen + 0.05, 'pop', 0, 0.35); ev(c.tOp, 'abre', 0, 0.3); ev(c.tCem, 'contador', 0, 0.35); ev(c.tIA, 'pop', 0.2, 0.3);
+    c.ics.forEach((_, i) => ev(c.tIcs + i * 0.2, 'pop', -0.4 + i * 0.27, 0.25)); ev(c.tOp2, 'troca', 0, 0.3); ev(c.tMB, 'pop', 0, 0.35); ev(c.tVira, 'flip', 0, 0.35);
+  }, (t, c) => {
+    c.fundo.style.opacity = c.gr.style.opacity = t < T_FLASH ? '1' : '0'; c.gr.style.opacity = t < T_FLASH ? '.10' : '0';
+    const fora = ILL(seg(t, T_SOME - 0.5, T_SOME));   // tudo sai no respiro (sobe e desfoca), o fundo escuro fica até o flash
+    // 🤔
+    { const n = nasce(t, c.tPen, 0.45), s = sai(t, c.tOp + 0.05, 0.3, { dy: -60, blur1: 30 }); c.penL.toca(t, c.tPen);
+      tf(c.pen, { op: n.op * s.op, s: n.s * (1 + 0.03 * Math.sin((t - c.tPen) * 4)), y: n.y + s.y, r: 5 * Math.sin((t - c.tPen) * 2.6), blur: n.blur + s.blur });
+      c.q.forEach((q, i) => { const m = nasce(t, c.tPen + 0.12 + i * 0.1, 0.35), u = t - c.tPen; tf(q, { op: m.op * s.op, s: m.s * (1 + 0.08 * Math.sin(u * 6 + i)), r: q.r0 + 10 * Math.sin(u * 3 + i * 2), y: m.y + 14 * Math.sin(u * 4 + i) + s.y, blur: m.blur + s.blur }); }); }
+    // opener: entra grande, em "100%" sobe e encolhe para o número ocupar o centro, sai em "processo?"
+    { const k = abreJanela(t, c.op, c.tOp, { d: 0.5, lado: 8 }), kc = ILL(seg(t, c.tCem - 0.1, c.tCem + 0.4)), s = sai(t, c.tProc - 0.1, 0.3, { dy: -60, blur1: 26 });
+      c.op.style.transform += ` translateY(${(-300 * kc + s.y).toFixed(1)}px) scale(${lerp(1, 0.62, kc).toFixed(3)})`; c.op.style.opacity = (parseFloat(c.op.style.opacity) * s.op).toFixed(3);
+      if (s.blur > 0.1) c.op.style.filter = `blur(${s.blur.toFixed(1)}px)`; c.opF.toca(Math.min(t, 4.08), c.tOp, false); }
+    // 100% contando + Claude
+    { const n = nasce(t, c.tCem, 0.35), s = sai(t, c.tProc - 0.1, 0.3, { dy: -50, blur1: 26 }), v = Math.round(100 * IO(seg(t, c.tCem, c.tCem + 0.55)));
+      c.cem.textContent = v + '%'; const bate = Math.exp(-Math.max(0, t - c.tCem - 0.55) * 8) * (t > c.tCem + 0.55 ? 1 : 0);
+      tf(c.cem, { op: n.op * s.op, s: lerp(0.7, 1, n.k) * (1 + 0.08 * bate), y: 60 + n.y + s.y, blur: n.blur + s.blur });
+      const nl = nasce(t, c.tIA - 0.05, 0.45); tf(c.cl, { op: nl.op * s.op, s: nl.s, r: lerp(-140, 0, nl.k) + (t - c.tIA) * 30, y: 60 + nl.y + s.y, blur: nl.blur + s.blur }); }
+    // os 4 passos: entram pela direita, um atrás do outro, ficam em fila e saem pela esquerda
+    c.ics.forEach((q, i) => { const ti = c.tIcs + i * 0.2, u = seg(t, ti - 0.05, ti + 0.4), k = ILL(u), ks = ILLIN(seg(t, PF('02', 'para') - 0.1, PF('02', 'para') + 0.3));
+      const x = lerp(1180, 30 + i * 260, k) - 1300 * ks; tf(q, { x, y: 640 + 18 * Math.sin((t - ti) * 3 + i), op: clamp(u * 3) * (1 - ks * ks), s: lerp(0.7, 1, k), r: lerp(12, 0, k) + 3 * Math.sin((t + i) * 2), blur: Math.pow(1 - k, 2) * 18 + ks * 20 }); q.l.toca(t, ti); });
+    // 2º opener curto
+    { abreJanela(t, c.op2, c.tOp2, { d: 0.4, lado: 8 }); const s = sai(t, PF('02', 'usando') + 0.05, 0.3, { dy: -60, blur1: 26 }); c.op2.style.opacity = (parseFloat(c.op2.style.opacity) * s.op).toFixed(3);
+      c.op2.style.transform += ` translateY(${s.y.toFixed(1)}px)`; if (s.blur > 0.1) c.op2.style.filter = `blur(${s.blur.toFixed(1)}px)`; c.op2F.toca(t, c.tOp2, false); }
+    // Mega Brain
+    { const n = nasce(t, c.tMB, 0.5), kv = IO(seg(t, c.tVira, c.tVira + 0.45)), kh = t >= T_HIT ? Math.exp(-(t - T_HIT) * 2.0) : 0;
+      const treme = t > c.tMB + 0.25 ? Math.exp(-(t - c.tMB - 0.25) * 7) * Math.sin((t - c.tMB - 0.25) * 55) * 4 : 0;
+      tf(c.mb, { op: n.op * (1 - fora), s: n.s * (1 + 0.12 * kh) * (1 + 0.15 * fora), r: -5 + treme + 1.5 * Math.sin(t * 2), y: n.y - 40 * fora, blur: n.blur + fora * 30 });
+      const pul = kv * (0.55 + 0.45 * Math.sin((t - c.tVira) * 9)) + 1.2 * kh;
+      c.hud.style.opacity = clamp(0.35 * n.op + 0.65 * pul).toFixed(3); c.hud.style.transform = `scale(${(0.9 + 0.15 * clamp(pul)).toFixed(3)})`;
+      c.mbB.style.filter = `brightness(${(1 + 0.35 * kh).toFixed(3)})`; }
+    // texto cinético: palavra nasce do desfoque; o grupo sai inteiro quando o próximo chega
+    grupos.forEach(g => { const vis = t >= g.t0 - 0.1 && t < g.t1 + 0.4; g.el.style.display = vis ? '' : 'none'; if (!vis) return;
+      if (!g.h) { g.h = g.el.offsetHeight; g.el.style.top = (g.y - g.h / 2).toFixed(0) + 'px'; }
+      const s = sai(t, g.t1, 0.26, { dy: -50, blur1: 26 }); tf(g.el, { op: s.op * (1 - fora), y: s.y, blur: s.blur + fora * 20 });
+      g.w.forEach(w => { const p = palavraVida(t, w.s, true); tf(w.el, { op: p.op, y: p.y * 2, s: p.s, blur: p.blur * 1.2 }); }); });
+  });
+})();
+
+// ═══ PIADA DO GANCHO (17/10): o autor fala "vídeo" 3 vezes seguidas. Um contadorzinho "vídeo ×1/×2/×3" no topo
+// conta cada um e, no 3º, entra a desculpa "dscp por falar “vídeo” dnv 😬". Sem caixa em volta do texto. ═══
+(function () {
+  const ts = [PF('01', 'video'), PF('02', 'video'), PF('02', 'video', 1)].map(x => x + 0.08);
+  const tDesc = ts[2] + 0.18, tFim = PF('02', 'inteligencia') - 0.15;
+  ts.forEach(t => ev(t, 'pop', 0.4, 0.18)); ev(tDesc, 'pop', -0.2, 0.22);
+  cena('piada-video', ts[0] - 0.3, tFim + 0.6, (r, c) => {
+    c.cont = $('div', null, r, { position: 'absolute', right: '70px', top: '150px', font: '600 46px/1 GS', letterSpacing: '-0.02em', color: 'rgba(255,255,255,.62)', textAlign: 'right', whiteSpace: 'nowrap' });
+    c.cont.innerHTML = 'vídeo <span class="n" style="color:#F0946F;display:inline-block">×1</span>';
+    c.n = c.cont.querySelector('.n');
+    c.desc = $('div', null, r, { position: 'absolute', left: '0', width: W + 'px', top: '250px', textAlign: 'center', font: '600 66px/1.05 GS', letterSpacing: '-0.03em', color: '#F7F6F2', whiteSpace: 'nowrap' });
+    c.desc.innerHTML = 'dscp por falar “vídeo” dnv <span class="em" style="display:inline-block;position:relative;width:84px;height:70px;vertical-align:-14px"></span>';
+    c.em = emojiLot(c.desc.querySelector('.em'), 'u1f62c', 84);
+  }, (t, c) => {
+    const k = ts.filter(x => t >= x).length, sai1 = sai(t, tFim, 0.35, { dy: -40, blur1: 22 });
+    const n = nasce(t, ts[0], 0.35); tf(c.cont, { op: n.op * sai1.op, y: n.y + sai1.y, blur: n.blur + sai1.blur, r: -2 });
+    if (k) c.n.textContent = '×' + k;
+    const pk = k ? Math.exp(-(t - ts[k - 1]) * 9) : 0; c.n.style.transform = `scale(${(1 + 0.6 * pk).toFixed(3)}) rotate(${(-12 * pk).toFixed(1)}deg)`;
+    const d = nasce(t, tDesc, 0.4), bal = Math.sin((t - tDesc) * 5) * 2.5 * Math.exp(-(t - tDesc) * 1.5);
+    tf(c.desc, { op: d.op * sai1.op, y: d.y + sai1.y, s: d.s, r: -3 + bal, blur: d.blur + sai1.blur }); c.em.toca(t, tDesc);
+  });
+})();
+
+// 03 · "A ferramenta que eu mais uso aqui é o Claude Code, para fazer esse estilo de vídeo de uma maneira bem rápida."
+//      o tutorial (mundo claro, letra rolando) começa depois do flash: só o texto aparecendo
+linhas('03', [
+  'A ferramenta',
+  'que eu mais uso',
+  'aqui é o',
+  [logo('claude-symbol.svg', { t: PF('03', 'claude') - 0.14 }), 'of|Claude', 'of|Code,'],
+  cardClaude({ t: PF('03', 'claude') + 0.02 }),
+  'para fazer esse',
+  'a|estilo a|de a|vídeo',
+  'de uma maneira',
+  ['bem', 'rápida.', emoji('u26a1', { t: PF('03', 'rapida', true) - 0.09 })],
+]);
+// "rápida" = flash (17/10): clarão leve + soco curto; o som (flash-pulse + whoosh) está no audio.py
+flash(PF('03', 'rapida') + 0.06, { som: false, max: 0.42, dec: 9, forca: 0.3 });
+
+// 04 · "O resultado fica totalmente diferente do que a IA faz e gera hoje em dia de forma genérica."
+linhas('04', [
+  'O resultado fica',
+  'totalmente',
+  'f|diferente',
+  duo('ai-opener-vertical', 'generico-dub', { t: PF('04', 'diferente') + 0.025, tG: PF('04', 'ia') - 0.035, tCinza: PF('04', 'generica') + 0.005 }),
+  'do que a o|IA faz',
+  'e gera hoje',
+  'em dia de forma',
+  'c|genérica.',
+]);
+
+// 05 · "Aqui eu tô falando da elite dos vídeos de motion, mais ou menos nesse estilo aqui:" + vitrine (3 s sem fala)
+const T_VIT = CN('vitrine').t0 - 0.56;   // a janela da vitrine abre em "nesse estilo aqui:"
+linhas('05', [
+  'Aqui eu tô',
+  'falando da',
+  ['f|elite', item({ w: 270, t: PF('05', 'elite') + 0.14, kind: 'pop', v: 0.32,      // figurinha do Casimiro no lugar do 💎 (17/10), estampa ao lado (some quando a vitrine abre)
+    monta(d) { const im = $('img', null, d, { position: 'absolute', left: '0', top: '-30px', width: '270px', filter: 'drop-shadow(0 12px 18px rgba(0,0,0,.28))' }); im.src = '../assets/pessoas/casimiro-figurinha.png'; },
+    seek(t, it) { const u = seg(t, it.t - 0.02, it.t + 0.22), k = ILL(u), fora = seg(t, T_VIT - 0.2, T_VIT + 0.1), d = Math.max(0, t - it.t - 0.18);
+      const treme = t > it.t + 0.18 ? Math.exp(-d * 7) * Math.sin(d * 55) * 3.5 : 0;
+      tf(it.in, { op: clamp(u * 4) * (1 - fora), s: lerp(1.55, 1, k) * (1 - 0.25 * fora), r: -9 + treme + 1.2 * Math.sin(t * 2.1), y: 3 * Math.sin(t * 1.7), blur: Math.pow(1 - k, 2) * 10 + fora * 16 }); } })],
+  'dos vídeos de',
+  'af|motion,',
+  'mais ou menos',
+  'nesse a|estilo a|aqui:',
+  janela(['illdari-upload', 'illdari-telegram'], { t: T_VIT, quadrada: true, trocas: [CN('vitrine').t0 + 1.27], ate: CN('vitrine').t1 + 0.1, som: true, alvo: -12.5 }),
+]);