// === F3 · Flex — El lienzo (18s) — el DESPUÉS: de serie + tu backoffice === // Ventana Dinaup con la nav premium "doble piso sobre hairline" (np3 de // Identidad Corporativa, replicada inline simplificada): piso 1 logo+buscar+avatar, // piso 2 enlaces + botón destacado Flex, hairline 2px con los 4 colores. // Arco: dashboard Ready To Go → ola de respiración → click en Flex → // lienzo punteado vacío → "+ Añadir sección" → 3 secciones construyéndose → claim. function SlideFlexLienzo({ t }){ // ---------- Geometría ---------- // Ventana: top 175 · left/right 280 → 1360 × 850 (base y=1025). // Chrome 76 + piso1 52 + piso2 46 + hairline 2 = 176 → contenido abs y=351, alto 674. const flexX = 1572, flexY = 326; // centro del pill Flex (piso 2, derecha) const btnX = 960, btnY = 680; // centro de «+ Añadir sección» // ---------- Timeline (sincronizada con cues slide_flexlienzo) ---------- const clickFlexAt = 8.4; // cue 6.2-9.0 · "Y arriba, un botón: Flex" const fadeAt = 9.0; // cue 9.0-12.0 · el lienzo const clickAddAt = 12.5; // cue 12.0-15.0 · añadir secciones const builds = [12.8, 13.45, 14.1]; // esqueleto→card, cadencia pausada const claimAt = 15.3; // cue 15.0-17.7 · reposo desde 16.0 const winP = clamp((t-0.5)/0.7, 0, 1); const winE = Easing.easeOutCubic(winP); const hairE = Easing.easeInOutCubic(clamp((t-1.4)/0.8, 0, 1)); // Pill Flex: entrada → hover (llega el cursor) → pressed → activo (sólido) const pillP = clamp((t-1.7)/0.5, 0, 1); const pillE = Easing.easeOutBack(pillP); const hovering = t >= 7.75 && t < clickFlexAt; const pressing = t >= clickFlexAt && t < clickFlexAt + 0.18; const flexOn = t >= clickFlexAt + 0.18; // Dashboard → lienzo const dashFadeE = Easing.easeInOutQuad(clamp((t-fadeAt)/0.8, 0, 1)); const dashOp = 1 - dashFadeE; const gridE = Easing.easeOutCubic(clamp((t-9.4)/0.8, 0, 1)); const msgEo = Easing.easeOutCubic(clamp((t-10.1)/0.8, 0, 1)); const btnEo = Easing.easeOutBack(clamp((t-10.7)/0.6, 0, 1)); const shiftP = clamp((t-(clickAddAt+0.1))/0.7, 0, 1); const shiftE = Easing.easeInOutCubic(shiftP); const addPressing = t >= clickAddAt && t < clickAddAt + 0.2; const links = [ { l:'Inicio', k:'home' }, { l:'Ventas', k:'receipt' }, { l:'Compras', k:'cart' }, { l:'Productos', k:'box' }, { l:'Análisis', k:'chart' }, ]; const cards = [ { n:'Ventas', k:'receipt', d:'96 tickets hoy' }, { n:'Compras', k:'cart', d:'8 pedidos en curso' }, { n:'Productos', k:'box', d:'342 referencias' }, { n:'Clientes', k:'people', d:'1.284 clientes' }, { n:'Tesorería', k:'bank', d:'2 cuentas al día' }, { n:'Análisis', k:'chart', d:'14 informes' }, ]; const nuevas = [ { n:'Flotas', k:'truck' }, { n:'Obras', k:'helmet' }, { n:'Citas', k:'calendar' }, ]; // Iconos SVG de línea (Material Symbols no está cargado en el deck) const ic = (kind, size, color) => { const s = { stroke:color, strokeWidth:1.8, strokeLinecap:'round', strokeLinejoin:'round', fill:'none' }; const g = { home: <>, receipt: <>, cart: <>, box: <>, people: <>, bank: <>, chart: <>, puzzle: , truck: <>, helmet: <>, calendar: <>, search: <>, plus: , }; return {g[kind]}; }; // Cursor: sube al pill Flex (llega 7.8, click 8.4) → baja a «+ Añadir sección» // (llega 12.05, click 12.5) → aparca abajo-derecha para no tapar las cards. const cursorFrames = [ { t:6.4, x:1610, y:1005, arc:70 }, { t:7.8, x:flexX, y:flexY }, { t:10.9, x:flexX, y:flexY, arc:46 }, { t:12.05,x:btnX, y:btnY }, { t:12.9, x:btnX, y:btnY }, { t:13.8, x:1565, y:965 }, ]; return ( De serie, todo. Lo tuyo, en un lienzo.}/> {/* ===== Ventana Dinaup ===== */}
{/* ---- Nav doble piso sobre hairline (np3 simplificada) ---- */} {/* Piso 1: logo · buscador pill · avatar */}
{ic('search',15,'#64748B')} Buscar Ctrl K
MJ
{/* Piso 2: enlaces + botón destacado Flex */}
{links.map((ln,i)=>{ const lp = clamp((t-(1.25+i*0.08))/0.4, 0, 1); const isActive = i === 0 && flexOn === false; return (
{ic(ln.k, 15, isActive ? '#0085FF' : '#8B99A8')} {ln.l}
); })}
{ic('puzzle', 15, flexOn ? '#fff' : '#0085FF')} Flex
{/* Hairline: los 4 colores corporativos, tramos sólidos de 2px */}
{['#00C1FF','#FF6751','#56E16A','#FFDC18'].map(c =>
)}
{/* ---- Contenido bajo la nav ---- */}
{/* === Fase 1: dashboard Ready To Go === */} {dashOp > 0.001 && (
Inicio
{/* Etiqueta comercial de las configuraciones de serie */} {(()=>{ const p = clamp((t-3.4)/0.5, 0, 1); const e = Easing.easeOutBack(p); return ( READY TO GO ); })()}
Tu empresa, de un vistazo
{cards.map((c,i)=>{ // Entrada escalonada 1.6→3.3 · ola de respiración 3.4→6.2 (una a una) const e = Easing.easeOutCubic(clamp((t-(1.6+i*0.24))/0.5, 0, 1)); const amp = Math.sin(clamp((t-(3.4+i*0.42))/0.8, 0, 1) * Math.PI); return (
0.03 ? `rgba(0,133,255,${0.15+0.35*amp})` : '#E2E8F0'}`, boxShadow:`0 ${8+14*amp}px ${24+18*amp}px rgba(0,133,255,${0.06+0.12*amp}), 0 2px 8px rgba(15,23,42,0.05)`, opacity:e,transform:`translateY(${(1-e)*18 - 6*amp}px) scale(${1+0.02*amp})`}}> {ic(c.k, 32, '#0085FF')}
{c.n}
{c.d}
); })}
)} {/* === Fase 2: el lienzo === */} {t >= 9.3 && (
{/* Mensaje central (tras el click sube y se hace pequeño) */}
Tu lienzo. Sin código.
{/* Botón + Añadir sección (se consume con el click) */} {t < 13.4 && (
{ic('plus',17,'#fff')} Añadir sección
)} {/* Tres secciones nuevas: esqueleto → card */} {nuevas.map((c,i)=>{ const b = builds[i]; if (t < b) return null; const skE = Easing.easeOutCubic(clamp((t-b)/0.45, 0, 1)); const fiP = clamp((t-b-0.55)/0.35, 0, 1); const fiE = Easing.easeOutBack(fiP); return (
0 ? '#fff' : '#FBFDFF', border: fiP > 0.4 ? '1px solid #E2E8F0' : '1.5px dashed rgba(0,133,255,0.35)', boxShadow:`0 ${18*fiP}px ${44*fiP}px rgba(0,133,255,${0.12*fiP})`, opacity:skE,transform:`translateY(${(1-skE)*18}px)`}}> {fiP < 1 && (
)} {fiP > 0 && (
{ic(c.k, 30, '#0085FF')}
{c.n}
Nueva sección
)}
); })} {/* Claim final */} {t >= claimAt && (()=>{ const e = Easing.easeOutCubic(clamp((t-claimAt)/0.7, 0, 1)); return (
Cualquier sección. Cualquier negocio.
); })()}
)}
{/* Pulso de atención sobre el pill Flex (cue "Y arriba, un botón: Flex") */} {[6.6, 7.3].map((k,i)=>{ if (t < k || t > k + 0.75) return null; const p = clamp((t-k)/0.75, 0, 1); return
; })} {/* Cursor */} {t >= 6.4 && } ); } Object.assign(window, { SlideFlexLienzo });