// === CASO REAL · 50 empleados (13s) — su app delante, Dinaup detrás, cambios por chat === // Izquierda: la app del cliente ("PORTAL", paleta violeta) con su listado de pedidos. // Beat 2: la app se eleva y debajo asoma la capa "Backend: Dinaup" (datos · usuarios · // permisos · API). Derecha: una app de CHAT de código (burbujas, no terminal): el junior // teclea EN LA CASILLA "Añade un filtro por estado en pedidos", envía, el asistente // resume el cambio (chips "3 archivos · build OK") y el filtro APARECE en la app de la // izquierda con un pulso. Banda final: "Lo que construyes hoy son las bases de mañana." function SlideBackend({ t }){ // --- timeline (sincronizada con cues slide_backend) --- // cue1 0.5-3.0 'Esta es su app: su marca, su diseño' // cue2 3.0-5.8 'Detrás, todo el backend es Dinaup' // cue3 5.8-8.8 'El junior pide los cambios a la IA, en un chat' // cue4 8.8-11.0 'Y la app crece: sin base de datos propia' // cue5 11.0-12.7 'Lo que construyes hoy son las bases de mañana' const winLeftAt = 0.8; // entra la ventana PORTAL (centrada: es la protagonista) const rowsAt = 1.4; // filas de pedidos en cascada const brandAt = 2.2; // pulso en el logo PORTAL (cue "su marca") const liftAt = 3.15; // la app se eleva… const layerAt = 3.35; // …y asoma la capa backend const chipsAt = 3.9; // chips datos · usuarios · permisos · API const moveAt = 4.9; // la app se desliza a la izquierda: hace sitio al chat const winChatAt = 5.5; // entra la app de chat de código const typeAt = 6.15; // el junior teclea EN LA CASILLA const sendAt = 7.7; // envía: la casilla se vacía const userMsgAt = 7.83; // y ENTONCES aparece su burbuja const steps = [ // el asistente trabaja (estilo Claude Code, sin código) { start:8.15, done:8.60, doing:'Leyendo el proyecto…', doneTxt:'Proyecto leído' }, { start:8.65, done:9.10, doing:'Editando src/pages/Pedidos.jsx…', doneTxt:'src/pages/Pedidos.jsx · listo' }, ]; const answerAt = 9.2; // burbuja del asistente (resumen, 2 líneas) const aiChipsAt = 9.90; // chips "3 archivos" · "build OK" const pingAt = 9.95; // pulso que viaja del chat a la app const filtroAt = 10.25; // el filtro nuevo aparece en PORTAL (cue "la app crece") const datosGlowAt= 10.55; // la capa "datos" respira: sin base de datos propia const bandAt = 11.2; // banda final (muere ≥0.8s antes del dur) const promptTxt = 'Añade un filtro por estado en pedidos'; const pedidos = [ { num:'PED-2041', cliente:'Talleres Ruiz S.L.', ciudad:'Getafe', importe:'1.240,00 €', estado:'En preparación', fg:'#B45309', bg:'rgba(245,158,11,0.14)', br:'rgba(245,158,11,0.35)' }, { num:'PED-2040', cliente:'Hotel Miramar', ciudad:'Málaga', importe:'386,50 €', estado:'Enviado', fg:'#6D28D9', bg:'rgba(109,40,217,0.10)', br:'rgba(109,40,217,0.30)' }, { num:'PED-2039', cliente:'Clínica Andrade', ciudad:'Sevilla', importe:'2.118,75 €', estado:'Pendiente de pago', fg:'#BE123C', bg:'rgba(190,18,60,0.10)', br:'rgba(190,18,60,0.30)' }, ]; // Entradas const badgeP = clamp((t-0.2)/0.5, 0, 1); const badgeE = Easing.easeOutBack(badgeP); const wL = Easing.easeOutCubic(clamp((t-winLeftAt)/0.6, 0, 1)); const liftE = Easing.easeInOutCubic(clamp((t-liftAt)/0.7, 0, 1)); const moveE = Easing.easeInOutCubic(clamp((t-moveAt)/0.7, 0, 1)); const shiftX = lerp(480, 0, moveE); // 480 = centrado (560-80); 0 = posición final izquierda const wChat = Easing.easeOutCubic(clamp((t-winChatAt)/0.6, 0, 1)); const bandE = Easing.easeOutCubic(clamp((t-bandAt)/0.7, 0, 1)); // Foco por ventana mientras el caption habla de ella const glowPortal = animate({from:0,to:1,start:0.7,end:1.1,ease:Easing.easeOutCubic,t}) * animate({from:1,to:0,start:3.0,end:3.4,ease:Easing.easeInOutQuad,t}) + animate({from:0,to:1,start:10.2,end:10.6,ease:Easing.easeOutCubic,t}) * animate({from:1,to:0,start:11.6,end:12.0,ease:Easing.easeInOutQuad,t}); const glowChat = animate({from:0,to:1,start:5.9,end:6.3,ease:Easing.easeOutCubic,t}) * animate({from:1,to:0,start:9.6,end:10.0,ease:Easing.easeInOutQuad,t}); const typing = t >= typeAt && t < sendAt; // texto en la casilla const pressed = t >= sendAt && t < sendAt+0.3; // feedback del botón enviar // Asterisco de 8 puntas — icono del asistente de código const spark = (size, color='#fff') => ( ); const spinnerSvg = ( ); return ( {/* Badge CASO REAL · 50 EMPLEADOS (estilo TimeBadge, sin hora) */}
CASO REAL
50 empleados
{/* Cabecera */}
FRONTEND PROPIO · BACKEND DINAUP

Su app por fuera. Dinaup por dentro.

{/* ===== IZQUIERDA — la app del cliente "PORTAL" (paleta violeta) ===== Entra CENTRADA (beats 1-2: es la protagonista) y en moveAt se desliza a su posición final izquierda para hacer sitio a la app de chat. */}
{/* Chrome de navegador propio (no Dinaup) */}
P
Pedidos — Portal Suministros Vega ×
portal.suministrosvega.es/pedidos
{/* Cabecera de la app — su marca */}
P
{t >= brandAt && t < brandAt + 1.0 && (()=>{ const p = clamp((t-brandAt)/1.0, 0, 1); return
; })()}
PORTAL
Pedidos Clientes Envíos
LV
{/* Cuerpo — listado de pedidos */}
Pedidos
3 nuevos
{/* Filtro nuevo — aparece cuando el cambio del chat llega a la app */} {t >= filtroAt && (()=>{ const p = clamp((t-filtroAt)/0.45, 0, 1); const e = Easing.easeOutBack(p); const cyc = ((t-filtroAt)*0.9) % 1; return (
Estado · Todos ▾
{t < filtroAt + 1.5 &&
}
); })()}
Buscar pedido
Pedido
Cliente
Importe
Estado
{pedidos.map((pd,i)=>{ const p = clamp((t-(rowsAt+i*0.28))/0.45, 0, 1); const e = Easing.easeOutCubic(p); return (
{pd.num}
{pd.cliente}
{pd.ciudad}
{pd.importe}
{pd.estado}
); })}
Mostrando 3 de 128 pedidos Actualizado hace 1 min
{/* ===== Capa backend — asoma bajo la app al elevarse (rayos X) ===== */} {t >= layerAt && (()=>{ const lp = clamp((t-layerAt)/0.75, 0, 1); const le = Easing.easeOutCubic(lp); const datosGlow = animate({from:0,to:1,start:datosGlowAt,end:datosGlowAt+0.4,ease:Easing.easeOutCubic,t}) * animate({from:1,to:0,start:11.7,end:12.2,ease:Easing.easeInOutQuad,t}); const backChips = ['datos','usuarios','permisos','API']; return (
Backend: Dinaup
{backChips.map((c,i)=>{ const cp = clamp((t-(chipsAt+i*0.25))/0.4, 0, 1); const ce = Easing.easeOutBack(cp); const hot = c === 'datos' ? datosGlow : 0; return ( 0 ? '0,193,255' : '255,255,255'},${0.07+hot*0.10})`, border:`1px solid rgba(${hot>0 ? '0,193,255' : '255,255,255'},${0.16+hot*0.55})`, color: hot > 0.5 ? '#fff' : 'rgba(255,255,255,0.85)', boxShadow:`0 0 ${14*hot}px rgba(0,193,255,${0.45*hot})`, opacity:clamp(cp*1.3,0,1), transform:`scale(${lerp(0.6,1,ce)})`}}>{c} ); })}
); })()}
{/* ===== DERECHA — app de chat de código (burbujas, no terminal) ===== */}
{/* Barra de título de la app */}
{spark(12)}
Asistente de código portal-frontend
{/* Hilo de mensajes */}
{/* Chip de sesión */}
portal-frontend · rama main
{/* Estado vacío hasta que llega el primer mensaje */} {t < userMsgAt && (
Sin mensajes todavía
)} {/* Burbuja del junior — aparece DESPUÉS de enviar */} {t >= userMsgAt && (()=>{ const p = clamp((t-userMsgAt)/0.4, 0, 1); return (
Junior · Suministros Vega
J
{promptTxt}
); })()} {/* El asistente trabaja — pasos, sin volcar código */} {t >= steps[0].start && (
{steps.map((s,i)=>{ if (t < s.start) return null; const done = t >= s.done; return (
{done ? ✓ : spinnerSvg} {done ? s.doneTxt : s.doing}
); })}
)} {/* Respuesta del asistente — resumen en 2 líneas + chips */} {t >= answerAt && (()=>{ const p = clamp((t-answerAt)/0.45, 0, 1); const l1 = clamp((t-answerAt-0.15)/0.4, 0, 1); const l2 = clamp((t-answerAt-0.50)/0.4, 0, 1); return (
{spark(10)}
Asistente
Hecho: filtro por estado en el listado de pedidos.
Los datos ya viven en Dinaup: sin base de datos propia.
{[ { txt:'3 archivos', fg:'#C6CBD4', bg:'rgba(255,255,255,0.07)', br:'rgba(255,255,255,0.16)' }, { txt:'✓ build OK', fg:'#6EE7B7', bg:'rgba(16,185,129,0.12)', br:'rgba(16,185,129,0.38)' }, ].map((c,i)=>{ const cp = clamp((t-(aiChipsAt+i*0.15))/0.4, 0, 1); const ce = Easing.easeOutBack(cp); return {c.txt}; })}
); })()}
{/* Casilla de entrada — aquí teclea el junior (regla global de chats) */}
{typing ? : Pide un cambio en tu app…}
{pressed && (()=>{ const p = clamp((t-sendAt)/0.3, 0, 1); return
; })()}
{/* ===== Pulso que viaja del chat al filtro de la app (el cambio llega) ===== */} {t >= pingAt && t < filtroAt + 0.12 && (()=>{ const p = Easing.easeInOutQuad(clamp((t-pingAt)/(filtroAt+0.1-pingAt), 0, 1)); const x = (1-p)*(1-p)*995 + 2*(1-p)*p*740 + p*p*588; const y = (1-p)*(1-p)*480 + 2*(1-p)*p*240 + p*p*328; return
; })()} {/* ===== Banda final ===== */}
Lo que construyes hoy son las bases de mañana.
); } Object.assign(window, { SlideBackend });