// === Escena 01 — "El correo pregunta" (contrato + dolor de soporte) === // Tres preguntas de cliente llegan por correo. Para contestarlas: dejas el correo, // entras en el programa, buscas… y vuelves → 10 min por pregunta. NO es el buzón de // facturas ("eso ya tiene su buzón"). Cierra con la Única Cosa como promesa. function EscenaBA01({ t }){ // LOCUCIÓN (audio/escena-01.mp3): un cliente escribe → 3 preguntas (stock 340 / // proyecto / bono de horas) → el bucle manual → 10 min × pregunta → aclaración // "no es de facturas" → foco en soporte → Única Cosa → puente "Con una dirección". const T = { entra:0.0, // "Un cliente te escribe" q1:2.7, // "¿queda stock de la referencia 340?" q2:7.0, // "cómo va su proyecto" q3:9.7, // "cuántas horas le quedan" loop:13.2, // "haces siempre lo mismo" s1:15.0, // "dejas el correo" s2:16.1, // "entras en el programa" s3:17.3, // "buscas" cont:20.0, // "Diez minutos" x3:21.4, // "Por cada pregunta" facturas:24.6, // "no hablamos de facturas" sello:27.0, // "Eso ya tiene su buzón" foco:31.0, // "contestar a tus clientes" calma:32.9, // "ahí va la idea" (anticipación) cosa1:34.2, // "el correo pregunta" cosa2:35.8, // "tus datos responden" salida:38.6, // "Con una dirección" }; // ---- iconos ---- const IcoSobre = ({ c='#94A3B8', s=22 })=>( ); const IcoStep = ({ kind, c='#64748B' })=>{ if (kind==='mail') return ; if (kind==='app') return ; return ; }; // ---- preguntas (columna izquierda) ---- const colLeft = 150, colW = 770; const QTOP = [230, 372, 514]; const QS = [ { at0:T.entra, atTxt:T.q1, name:'Laura, tienda', ini:'L', text:(<>¿Os queda stock de la ref. 340?) }, { at0:T.q2, atTxt:T.q2, name:'Andrés, obra', ini:'A', text:(<>¿Cómo va mi proyecto?) }, { at0:T.q3, atTxt:T.q3, name:'Cafés del Sur', ini:'C', text:(<>¿Cuántas horas me quedan del bono?) }, ]; // ---- opacidades por acto (doctrina: el acto viejo se atenúa, no desaparece) ---- const dimAll = t >= T.calma ? lerp(1, 0.06, Easing.easeOutCubic(clamp((t-T.calma)/0.6,0,1))) : 1; // velo blanco que limpia el fondo justo antes de la Única Cosa const velo = clamp((t-T.calma)/0.6,0,1) * 0.78; let qStage = 1; if (t >= T.loop) qStage = lerp(1, 0.5, clamp((t-T.loop)/0.6,0,1)); // secundario durante el bucle if (t >= T.facturas) qStage = lerp(0.5, 0.32, clamp((t-T.facturas)/0.5,0,1)); // más atrás durante la aclaración if (t >= T.foco) qStage = lerp(0.32, 1, clamp((t-T.foco)/0.6,0,1)); // protagonista otra vez const qOp = qStage * dimAll; let loopStage = 1; if (t >= T.facturas) loopStage = lerp(1, 0.28, clamp((t-T.facturas)/0.6,0,1)); const loopOp = loopStage * dimAll; let facStage = 1; if (t >= T.foco) facStage = lerp(1, 0.16, clamp((t-T.foco)/0.6,0,1)); const facOp = facStage * dimAll; // ---- bucle manual (panel derecha) ---- const panelL = 1005, panelW = 815, panelT = 210; const loopP = clamp((t-T.loop)/0.6,0,1), loopE = Easing.easeOutBack(loopP); const STEPS = [ { at:T.s1, kind:'mail', label:'Dejas el correo' }, { at:T.s2, kind:'app', label:'Entras en el programa' }, { at:T.s3, kind:'search', label:'Buscas' }, ]; const stepY = [78, 158, 238]; const retP = Easing.easeInOutCubic(clamp((t-(T.s3+0.9))/1.0,0,1)); // "…y vuelves" // ---- contador 10:00 (cronómetro que se dispara) ---- const contShow = t >= T.cont; const contP = clamp((t-T.cont)/1.0,0,1); const secs = Math.round(600 * Easing.easeOutCubic(contP)); // aterriza en 600s = 10:00 const clock = `${Math.floor(secs/60)}:${String(secs%60).padStart(2,'0')}`; const contE = Easing.easeOutBack(clamp((t-T.cont)/0.5,0,1)); const x3P = clamp((t-T.x3)/0.4,0,1), x3E = Easing.easeOutBack(x3P); // ---- tarjeta facturas (aclaración: eso ya tiene su buzón) ---- const facP = clamp((t-T.facturas)/0.55,0,1), facE = Easing.easeOutBack(facP); const strikeP = Easing.easeOutCubic(clamp((t-(T.facturas+0.7))/0.6,0,1)); const selloP = clamp((t-T.sello)/0.45,0,1), selloE = Easing.easeOutBack(selloP); const facL = 660, facW = 600, facT = 745; // ---- foco de soporte + Única Cosa ---- const focoGlow = clamp((t-T.foco)/0.5,0,1) * (1 - clamp((t-T.calma)/0.4,0,1)); const c1P = clamp((t-T.cosa1)/0.6,0,1), c1E = Easing.easeOutCubic(c1P); const c2P = clamp((t-T.cosa2)/0.6,0,1), c2E = Easing.easeOutCubic(c2P); const outP = clamp((t-T.salida)/0.6,0,1); const headOp = clamp(t/0.5,0,1) * (t >= T.calma ? lerp(1,0,clamp((t-T.calma)/0.5,0,1)) : 1); return ( {/* Contrato: quién habla + para quién */}
ATENCIÓN AL CLIENTE · POR CORREO
Tus clientes preguntan. Todos los días.
{/* Resalte suave detrás de las preguntas cuando el foco vuelve a soporte */} {focoGlow > 0 && (
)} {/* ===== ACTO A · las tres preguntas ===== */}
{QS.map((q,i)=>{ const p = clamp((t-q.at0)/0.55,0,1), e = Easing.easeOutBack(p); if (p <= 0) return null; const tp = clamp((t-q.atTxt)/0.5,0,1), te = Easing.easeOutCubic(tp); return (
{q.ini}
{q.name}
por correo
{q.text}
); })}
{/* ===== ACTO A · el bucle manual (panel derecha) ===== */} {loopP > 0 && (
PARA CONTESTAR, SIEMPRE LO MISMO
{/* flecha de retorno (el bucle) en el canalón izquierdo */} {retP > 0.6 && (
…y vuelves
)} {/* pasos */} {STEPS.map((s,i)=>{ const p = clamp((t-s.at)/0.45,0,1), e = Easing.easeOutBack(p); if (p <= 0) return null; return (
{i+1}
{s.label}
); })}
{/* contador 10 minutos × pregunta */} {contShow && (
TIEMPO POR PREGUNTA
{clock}
{x3P > 0 && (
× 3
una y otra vez
)}
)}
)} {/* ===== Aclaración: NO es el buzón de facturas ===== */} {facP > 0 && (
Facturas · Pedidos
documentos de proveedores
{/* tachón (dibujado como div, nunca textDecoration animado) */}
0?0.9:0}}/> {/* sello: ya tiene su buzón */} {selloP > 0 && (
YA TIENE SU BUZÓN
)}
)} {/* velo que apaga el fondo para que la Única Cosa quede limpia */} {velo > 0 && (
)} {/* ===== Única Cosa (promesa) ===== */} {c1P > 0 && (
El correo pregunta…
)} {c2P > 0 && (
y tus datos responden.
)} {/* ===== Puente de salida ===== */} {outP > 0 && (
¿Cómo? Con una dirección.
)} ); } Object.assign(window, { EscenaBA01 });