// === 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 reanclados al audio real (11.75s): 0.3 eyebrow · 0.9 titular · 2.0 hairline · 0.9/3.92/6.43 frases · 10.15 pie const eyeP = clamp((t-0.3)/0.6, 0, 1); const h2P = clamp((t-0.9)/1.0, 0, 1); const h2e = Easing.easeOutCubic(h2P); const barP = clamp((t-2.0)/0.7, 0, 1); const barE = Easing.easeOutCubic(barP); const footAt = 10.15; // último beat: cae en "Pues mira cómo terminó" (10.15) → settle ~10.75, ~1s antes del dur (11.75) const footE = Easing.easeOutCubic(clamp((t-footAt)/0.8, 0, 1)); // SOLO el setup del Bloque 26 (el payoff «backend Dinaup / construyó la app» se locuta // y se muestra en la escena SIGUIENTE — aquí no se adelanta): // 50 empleados (0.9) · presupuestos, una locura (3.92) · un programador junior (6.43). const lines = [ { at:0.9, icon:'person', body:( <>Una empresa de 50 empleados. )}, { at:3.92, icon:'layers', body:( <>Pidió presupuestos para su app… una locura. )}, { at:6.43, icon:'play', body:( <>Y su equipo técnico era un programador junior, recién llegado. )}, ]; // 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 });