// === 17:00 · El equipo (13s) — el plan en un Gantt: responsables, fechas y Kanban === // Coreografía honesta (sin "recálculo de cadenas" — Dinaup no lo soporta, pero SÍ // soporta arrastrar una tarjeta entre columnas del Kanban — eso es lo que se muestra): // el Gantt se puebla → hover en una tarea (responsable + fechas en tooltip) → // clic en el tab Kanban → el cursor agarra «Pruebas» en Pendiente y la suelta en // «En curso» (contadores de origen/destino se actualizan) → hint «Mi día». // El slide MUERE en Kanban: no vuelve al Gantt. // Sincronizado con CAPTIONS.slide_equipo: 0.4-2.6 el proyecto · 2.6-5.2 el Gantt · // 5.2-7.6 responsable y fechas · 7.6-10.2 «arrastras la tarjeta y listo» · 10.2-12.6 // «Mi día». dur 13. function SlideEquipo({ t }){ const show = (at, dur=0.5) => clamp((t-at)/dur, 0, 1); // Interpolador de frames {t,x,y,arc} — misma fórmula que ScriptedCursor (primitives.jsx), // reutilizada aquí para que la tarjeta arrastrada comparta trayectoria exacta con el cursor. const framePos = (frames, tt) => { if (tt <= frames[0].t) return { x:frames[0].x, y:frames[0].y }; if (tt >= frames[frames.length-1].t) return { x:frames[frames.length-1].x, y:frames[frames.length-1].y }; for (let i=0;i=frames[i].t && tt<=frames[i+1].t){ const p = (tt-frames[i].t)/(frames[i+1].t-frames[i].t); const e = Easing.easeInOutCubic(p); let x = lerp(frames[i].x, frames[i+1].x, e); let y = lerp(frames[i].y, frames[i+1].y, e); if (frames[i].arc) y -= Math.sin(p*Math.PI) * frames[i].arc; return { x, y }; } } return { x:frames[frames.length-1].x, y:frames[frames.length-1].y }; }; // ---------- Timeline ---------- const barsT = 2.7; // cue 2.6-5.2 · el plan se puebla const hoverT = 5.52; // cue 5.2-7.6 · el cursor aterriza en «Desarrollo» const hoverEnd = 7.45; // …y sale hacia el selector de vistas const clickKanban = 7.70; // cue 7.6-10.2 · clic en el tab «Kanban»… const arriveCardT = 8.20; // …crossfade al tablero y el cursor llega a «Pruebas» const pressT = 8.35; // …pausa 0.15s → PRESS: la tarjeta se levanta const dropArriveT = 9.55; // …viaje en curva hasta «En curso» const dropT = 9.70; // …pausa 0.15s → suelta: la tarjeta se asienta const midiaT = 10.4; // cue 10.2-12.6 · hint «Mi día» // Layout real del grid Kanban (3 columnas dentro del panel — coords del lienzo // 1920×1080, calibradas con getBoundingClientRect vía harness de QA): const kbColX = [457, 960, 1463]; // centro x de Pendiente / En curso / Hecho const kbCardY = 451; // y de la 1ª tarjeta de cada columna («Pruebas») const kbDropY = 547; // y de destino en «En curso» (debajo de las 2 existentes) const dragging = t >= pressT && t < dropT; const dragDone = t >= dropT; const dragFrames = [ { t:pressT, x:kbColX[0], y:kbCardY }, { t:dropArriveT, x:kbColX[1], y:kbDropY, arc:55 }, { t:dropT, x:kbColX[1], y:kbDropY }, ]; const flyPos = dragging ? framePos(dragFrames, t) : null; // ---------- Datos (proyecto "Web nueva", 12 → 23 de mayo) ---------- const days = ['L 12','M 13','X 14','J 15','V 16','L 19','M 20','X 21','J 22','V 23']; const tasks = [ { name:'Diseño', who:'Marta R.', ini:'MR', start:0, len:3, color:'#0085FF', col:2 }, { name:'Contenidos', who:'Jorge M.', ini:'JM', start:2, len:3, color:'#00C1FF', col:1 }, { name:'Desarrollo', who:'Lucía P.', ini:'LP', start:3, len:5, color:'#8B5CF6', col:1 }, { name:'Pruebas', who:'Dani S.', ini:'DS', start:7, len:2, color:'#F59E0B', col:0 }, { name:'Publicación', who:'Marta R.', ini:'MR', start:9, len:1, color:'#FF6751', col:0 }, ]; const hoverIdx = 2; // Desarrollo · Lucía P. · 15 → 21 may const hovering = t >= hoverT && t < hoverEnd; // Vista activa: Gantt → Kanban (click 7.70) y se queda: el slide muere en Kanban. const kanbanE = Easing.easeInOutQuad(clamp((t - clickKanban - 0.05)/0.4, 0, 1)); const activeView = t >= clickKanban + 0.08 ? 'Kanban' : 'Gantt'; const pressKanban = t >= clickKanban && t < clickKanban + 0.18; const vistas = ['Gantt','Kanban','Tabla','Lista']; const kanbanCols = [ { name:'Pendiente', dot:'#94A3B8' }, { name:'En curso', dot:'#0085FF' }, { name:'Hecho', dot:'#10B981' }, ]; // Cursor orgánico: entra en curva, aterriza en la barra (pausa larga = hover), // sube en arco al selector, click en Kanban, viaja a «Pruebas» (Pendiente), // pausa+PRESS, viaje en curva con la tarjeta hasta «En curso», pausa+suelta, // y aparca abajo-derecha fuera del foco. Pausa ~0.15s antes de cada click. const cursorFrames = [ { t:4.80, x:1555, y:915, arc:90 }, { t:hoverT, x:1060, y:578 }, { t:hoverEnd, x:1060, y:578, arc:70 }, { t:7.55, x:325, y:347 }, { t:clickKanban, x:325, y:347 }, { t:arriveCardT, x:kbColX[0], y:kbCardY, arc:40 }, { t:pressT, x:kbColX[0], y:kbCardY }, { t:dropArriveT, x:kbColX[1], y:kbDropY, arc:55 }, { t:dropT, x:kbColX[1], y:kbDropY }, { t:10.65, x:1620, y:975, arc:50 }, ]; const winE = Easing.easeOutCubic(show(0.5, 0.7)); return ( Todo el proyecto. Cada uno, lo suyo.}/>
{/* Selector de vistas + rango de fechas */}
{vistas.map(v => { const active = v === activeView; const pressing = v === 'Kanban' && pressKanban; return ( {v} ); })}
el mismo proyecto, cuatro vistas
12 → 23 may
{/* Panel: Gantt ⇄ Kanban */}
{/* === Vista Gantt === */}
{/* Cabecera de días */}
TAREA
{days.map(d =>
{d}
)}
{/* Filas */}
{/* Gridlines verticales sutiles */} {[1,2,3,4,5,6,7,8,9].map(k => (
))} {tasks.map((tk, i) => { const rowE = Easing.easeOutCubic(clamp((t - (1.25 + i*0.14))/0.45, 0, 1)); const growE = Easing.easeOutCubic(clamp((t - (barsT + i*0.28))/0.55, 0, 1)); const isHover = hovering && i === hoverIdx; const dim = hovering && i !== hoverIdx ? 0.62 : 1; return (
{/* Tarea + responsable */}
{tk.ini} {tk.name} {tk.who}
{/* Barra */}
0.85 ? 1 : 0,transition:'opacity 150ms'}}>{tk.who}
); })} {/* Tooltip: responsable + fechas de «Desarrollo» */} {t >= hoverT + 0.12 && t < hoverEnd + 0.22 && (()=>{ const inE = Easing.easeOutBack(clamp((t - (hoverT + 0.12))/0.4, 0, 1)); const outP = clamp((t - hoverEnd)/0.2, 0, 1); return (
LP Lucía P. 15 may → 21 may
); })()}
{/* === Vista Kanban — «Pruebas» se arrastra de Pendiente a En curso === */} {kanbanE > 0.01 && (
{kanbanCols.map((c, ci) => { const baseCount = tasks.filter(tk => tk.col === ci).length; const count = ci===0 && dragDone ? baseCount-1 : ci===1 && dragDone ? baseCount+1 : baseCount; const justDropped = ci===1 && t >= dropT && t < dropT + 0.9; return (
{c.name} {count}
{tasks.filter(tk => tk.col === ci).map((tk, ti) => { // «Pruebas»: es la tarjeta agarrada — desaparece de Pendiente en cuanto se levanta. if (tk.name === 'Pruebas' && (dragging || dragDone)) { return (ci===0 && ti===0) ? (
) : null; } return (
{tk.name} {tk.ini}
); })} {/* «Pruebas» aterrizando en En curso, tras soltar */} {ci===1 && dragDone && (()=>{ const tk = tasks.find(x => x.name==='Pruebas'); return (
{tk.name} {tk.ini}
); })()}
); })}
)}
{/* Hint «Mi día» — toast flotante */} {t >= midiaT && (()=>{ const p = clamp((t - midiaT)/0.55, 0, 1); const e = Easing.easeOutBack(p); return (
«Mi día»: cada uno del equipo ve solo lo suyo, ya filtrado.
); })()}
{/* Tarjeta volando — agarrada por el cursor, mismo trayecto exacto (coords del lienzo) */} {flyPos && (()=>{ const tk = tasks.find(x => x.name==='Pruebas'); const p = clamp((t-pressT)/(dropT-pressT), 0, 1); return (
{tk.name} {tk.ini}
); })()} {/* Cursor */} {t >= 4.8 && } ); } Object.assign(window, { SlideEquipo });