// === Una historia real (11s · stop:true) — contexto antes del caso Backend === // El espectador viene del acto Flex (todo era Dinaup/play): este slide le saca de // ahí — esto es UNA HISTORIA de una empresa que construyó SU PROPIA app sobre // Dinaup. Texto puro pausado (patrón explainer), sin cues. El deck se DETIENE al // acabar (stop:true en app.jsx): la vida en reposo (glow, respiración del titular, // nudge de la tecla →) va en animaciones CSS, no sobre t — patrón permitido para // efectos secundarios (como slide-flex-pregunta). function SlideBackendHistoria({ t }){ // Beats pausados: 0.4 eyebrow · 0.8 titular · 1.6 hairline · 2.6/5.0/7.4 frases · 9.4 pie const eyeP = clamp((t-0.4)/0.6, 0, 1); const h2P = clamp((t-0.8)/1.0, 0, 1); const h2e = Easing.easeOutCubic(h2P); const barP = clamp((t-1.6)/0.7, 0, 1); const barE = Easing.easeOutCubic(barP); const footAt = 9.4; // último beat: 9.4 + 0.8 = 10.2 → muere 0.8s antes del dur (11) const footE = Easing.easeOutCubic(clamp((t-footAt)/0.8, 0, 1)); // Tres frases, una cada 2.4s — que respiren y se lean enteras. const lines = [ { at:2.6, icon:'person', body:( <>Una empresa de 50 empleados. Un desarrollador junior. )}, { at:5.0, icon:'layers', body:( <>Dinaup puso el backend y el backoffice:
sin base de datos que montar, sin servidores que cuidar. )}, { at:7.4, icon:'play', body:( <>El junior, con ayuda de la IA, construyó la app. Ejecutar, y a funcionar. )}, ]; // Iconos de línea que se dibujan (pathLength normalizado → dashoffset paramétrico) const drawIcon = (kind, p) => { const off = 1 - Easing.easeInOutQuad(p); const common = { fill:'none', stroke:'#62B4FF', strokeWidth:1.8, strokeLinecap:'round', strokeLinejoin:'round', pathLength:1, strokeDasharray:1, strokeDashoffset:off }; if (kind === 'person') return ( ); if (kind === 'layers') return ( ); return ( ); }; return ( {/* Glow suave de profundidad tras el bloque de texto — respira aunque t esté congelado */}
{/* Eyebrow */}
UNA HISTORIA REAL
{/* Titular grande — respiración sutil en reposo */}

Querían su propia app.

{/* Hairline corporativa — 4 tramos sólidos, entra tras el titular */}
{/* Las tres frases */}
{lines.map((ln,i)=>{ const iconP = clamp((t-ln.at)/0.8, 0, 1); const txtP = clamp((t-(ln.at+0.25))/0.7, 0, 1); const txtE = Easing.easeOutCubic(txtP); return (
{drawIcon(ln.icon, iconP)}
{ln.body}
); })}
{/* Pie — hint para el presentador, con la flecha como keycap */}
Pulsa → para ver cómo lo hicieron
); } Object.assign(window, { SlideBackendHistoria });