// === Slide Motor (11s) — la tesis: el dato se teclea UNA vez ===
// "María López" se teclea UNA única vez en la ficha central. De ella brotan
// enlaces hacia cuatro ventanas (Factura, Ticket TPV, Oportunidad, Tarea) y el
// MISMO dato aparece en cada una con el pulso del enlace — sin re-teclearse.
// Cierre: un anillo rodea la ficha única con el sello "Un solo lugar · sin copias".
// Sincronía con CAPTIONS.slide_motor: 0.5-3.0 la idea · 3.0-5.8 se teclea UNA vez
// · 5.8-8.4 queda enlazado · 8.4-10.8 calidad en un solo lugar.
function SlideMotor({ t }){
// ---------- Geometría ----------
const CX = 960, CY = 550; // centro de la ficha única
const CARD_W = 440, CARD_H = 158;
const RING_R = 270; // anillo final alrededor de la ficha
// ---------- Timeline ----------
const NAME = 'María López';
const typeStart = 3.25, CPS = 8.5;
const typeDone = typeStart + NAME.length / CPS; // ≈ 4.54
const checkAt = 4.75; // check verde dentro del campo
const chipAt = 4.95; // píldora "TECLEADO UNA VEZ"
const ringAt = 8.55; // se dibuja el anillo
const sealAt = 9.1; // sello "Un solo lugar · sin copias"
// Módulos alrededor: cada uno con su enlace (sx,sy → ex,ey, con comba "bow")
const mods = [
{ n:'Factura', k:'receipt', ref:'F-2026-0311', sub:'148,50 € · 12 mar', x:390, y:375, sx:740, sy:495, ex:540, ey:383, bow: 34 },
{ n:'Ticket TPV', k:'tpv', ref:'T-0412', sub:'4,80 € · mesa 3', x:1530, y:375, sx:1180, sy:495, ex:1380, ey:383, bow: 34 },
{ n:'Oportunidad', k:'target', ref:'OP-208', sub:'Reforma cafetería · 3.400 €', x:390, y:765, sx:740, sy:605, ex:540, ey:757, bow:-34 },
{ n:'Tarea', k:'task', ref:'TA-1108', sub:'Llamada de seguimiento · jue 14:00', x:1530, y:765, sx:1180, sy:605, ex:1380, ey:757, bow:-34 },
];
const linkAt = (i) => 5.9 + i*0.55; // el enlace se dibuja
const arriveAt = (i) => linkAt(i) + 0.7; // el dato "aterriza" en el módulo
const qualityAt = (i) => 9.45 + i*0.12; // check de calidad por módulo
const headerP = clamp(t/0.5, 0, 1);
const cardP = clamp((t-0.9)/0.7, 0, 1);
const cardE = Easing.easeOutCubic(cardP);
const ringE = Easing.easeInOutCubic(clamp((t-ringAt)/0.65, 0, 1));
const typing = t >= 3.0 && t < typeDone;
const saved = t >= checkAt;
// Punto sobre la bezier cuadrática del enlace (para el pulso que viaja)
const bez = (m, u) => {
const cx = (m.sx+m.ex)/2, cy = (m.sy+m.ey)/2 + m.bow;
const w = 1-u;
return { x: w*w*m.sx + 2*w*u*cx + u*u*m.ex, y: w*w*m.sy + 2*w*u*cy + u*u*m.ey };
};
// 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 = {
person: <>,
receipt: <>,
tpv: <>,
target: <>,
task: <>,
keyboard: <>,
link: <>,
shield: <>,
checkCircle: <>,
};
return ;
};
return (
{/* Header */}
CÓMO FUNCIONA
Un solo motor. El dato entra una vez.
{/* Glow suave tras la ficha central */}
{/* Enlaces + pulsos + anillo (capa SVG) */}
{/* Módulos alrededor */}
{mods.map((m,i)=>{
const p = clamp((t-(1.8+i*0.22))/0.55, 0, 1);
const e = Easing.easeOutCubic(p);
const aa = arriveAt(i);
const linked = t >= aa;
const flashP = clamp((t-aa)/0.5, 0, 1);
const dP = clamp((t-aa)/0.45, 0, 1);
const dE = Easing.easeOutBack(dP);
const qP = clamp((t-qualityAt(i))/0.35, 0, 1);
const qE = Easing.easeOutBack(qP);
return (
);
})}
{/* Ficha central: aquí se teclea el dato UNA vez */}
{ic('person', 18, '#8FCBFF')}
ClienteNUEVA FICHA
NOMBRE
{t < 3.0
? Nombre y apellidos
: }
{saved && (()=>{
const chP = clamp((t-checkAt)/0.4, 0, 1);
const chE = Easing.easeOutBack(chP);
return (
{ic('checkCircle', 20, '#56E16A')}
);
})()}
{/* Píldora bajo la ficha: la diferencia entre teclear y propagarse */}
{t >= chipAt && (()=>{
const p = clamp((t-chipAt)/0.5, 0, 1);
const e = Easing.easeOutBack(p);
return (
{ic('keyboard', 14, '#8FCBFF')}
TECLEADO UNA VEZ
);
})()}
{/* Sello de calidad sobre el anillo */}
{t >= sealAt && (()=>{
const p = clamp((t-sealAt)/0.55, 0, 1);
const e = Easing.easeOutBack(p);
return (
{ic('shield', 16, '#56E16A')}
Un solo lugar · sin copias