// === Escena 03 — «La barra de filtros» === [45.4 s · 14 beats del plan] · VALLE // // LOCUCIÓN (audio/escena-03.mp3): arriba hay un botón que pone Filtros → nueve atajos en cinco // grupos, y no se cierra al elegir → Abiertas ya viene puesto → ojo con Todas: no enseña las // cerradas, te devuelve al arranque → cada filtro deja un chip, y se quita pulsando el chip // entero → la caja de buscar, con prefijos en español y en inglés → la chuleta sale al pinchar // dentro → espera medio segundo → y si no pasa ninguna, distingue los dos vacíos. // // VALLE DE PROTECCIÓN: ni una cifra grande, un gesto por vez, nada moviéndose con amplitud. // Todo lo que se mueve aquí mide menos de 20 px. // // FIDELIDAD: // · Los tres atajos que se combinan son «Mis tareas», «Prioridad alta» y «Esta semana»: // coexisten. «Vencidas» quedaría fuera porque se apaga con «Esta semana» (:197-200). // · Color SOLO en los atajos. Los chips de usuario y de tipo van con la clase base pelada: // los dos, el mismo azul pálido, sin borde (SmartFilterBarU.razor.css:20-34). // · La zona de clic del chip es el chip ENTERO, no la equis: por eso al quitarlo se ilumina // la píldora completa. // · «Todas» NO enseña las cerradas: vuelve al arranque dejando «Abiertas» puesto. // · La chuleta y el texto tecleado NO coexisten: al escribir texto libre el modo pasa a Text // y el desplegable desaparece (SmartFilterBarU.razor:84, 330-333). // · Los dos vacíos son un if/else: van fuera del tablero y rotulados como comparación. function EscenaTV03({ t }){ const T = { boton:0.7, // "un botón que pone Filtros" -> el boton, con el cursor encima atajos:3.8, // "nueve atajos en cinco grupos" -> el desplegable entra; cabeceras primero nocierra:6.4, // "No se cierra al elegir" -> el sello de que el panel no se mueve tresclics:8.0, // "combinar tres son tres clics" -> tres clics seguidos, panel quieto abiertas:10.6, // "Abiertas ya viene puesto" -> el chip verde, que ya estaba, se realza todas:14.0, // "el que se llama Todas" -> foco en la ultima opcion cerradas:15.2, // "no enseña las cerradas" -> el aviso de lo que sigue oculto arranque:16.6, // "te devuelve al arranque" -> todo se limpia y «Abiertas» reaparece sola chips:19.6, // "deja un chip arriba" -> los chips vuelven a entrar, en cascada chipentero:22.2,// "pulsando el chip entero" -> el chip ENTERO se ilumina y desaparece caja:25.2, // "la caja de buscar" -> el panel se cierra; foco en la caja prefijos:27.6, // "prefijos en español y en inglés" -> la fila de prefijos, en cascada chuleta:30.4, // "La chuleta sale" -> la chuleta baja al pinchar dentro medio:33.6, // "medio segundo" -> se teclea texto libre: la chuleta se retira filtrar:34.3, // "antes de filtrar" -> la barra de espera y el corte de la lista ninguna:36.2, // "Y si no pasa ninguna" vacios:38.0, // "distingue los dos vacíos" -> las dos tarjetas, rotuladas «o esto, o esto» buscabas:40.3, // "Ya tienes delante lo que buscabas" -> vuelve la lista filtrada direccion:43.1, // "Ahora mira la dirección" -> la app baja, el navegador sube grupoStep:0.13, // cascada entre cabeceras de grupo del desplegable opcStep:0.05, // cascada entre opciones del desplegable prefStep:0.07, // cascada entre pastillas de prefijo filaStep:0.06, // cascada entre filas de la lista }; const WX=180, WY=150, WW=1560, CHR=76; const AY=WY+CHR, SBW=300, MX=WX+SBW, MW=WW-SBW; const HDR=AY+92, BAR=HDR+84, CHIPY=BAR; const BTN=[504,578,652,726]; const FILX=828, FILW=148, BOXX=990, BOXW=630; const veloVacios = clamp((t-T.vacios+0.9)/0.6,0,1)*clamp((T.buscabas-t+0.2)/0.5,0,1)*0.90; const bajaP = Easing.easeInOutCubic(clamp((t-T.direccion)/0.9,0,1)); const Ico = ({ n, s=24, c='#64748B', sw=2 })=>{ const Q = { lupa: <>, filtro:, filtroOff:<>, help: <>, compacta:, kanban:<>, tabla: <>, gantt: <>, check: , folder:, flecha:, }; return {Q[n]}; }; // ── Los nueve atajos, en sus cinco grupos (SmartFilterBarU.razor:193-203) ───────────────── const GRUPOS = [ { g:'ESTADO', o:[{n:'Abiertas', on:[0,99]}, {n:'En proceso'}, {n:'Pendientes'}] }, { g:'ASIGNACIÓN', o:[{n:'Mis tareas', on:[8.20,16.42], on2:[19.78,24.05]}, {n:'Sin asignar'}] }, { g:'VENCIMIENTO', o:[{n:'Vencidas'}, {n:'Esta semana', on:[9.70,16.42], on2:[20.42,22.62]}] }, { g:'PRIORIDAD', o:[{n:'Prioridad alta', on:[8.95,16.42], on2:[20.10,23.42]}] }, { g:'OTROS', o:[{n:'Todas'}] }, ]; const enc = (o)=> (o.on && t >= o.on[0] && t < o.on[1]) || (o.on2 && t >= o.on2[0] && t < o.on2[1]); // ── Los chips de la barra. Color SOLO en los atajos; usuario y tipo, azul pálido idéntico ── const CHIPS = [ { l:'Abiertas', bg:'#DCFCE7', fg:'#15803D', iv:[[0,99]] }, { l:'Mis tareas', bg:'#DBEAFE', fg:'#1D4ED8', iv:[[8.20,16.42],[19.78,24.05]] }, { l:'Prioridad alta', bg:'#FEE2E2', fg:'#B91C1C', iv:[[8.95,16.42],[20.10,23.42]] }, { l:'Esta semana', bg:'#FFEDD5', fg:'#C2410C', iv:[[9.70,16.42],[20.42,22.62]] }, { l:'Marta Ruiz', bg:'#E4F1FF', fg:'#0B4F86', iv:[[31.70,99]] }, { l:'Error', bg:'#E4F1FF', fg:'#0B4F86', iv:[[32.55,99]] }, ]; const Chip = ({ c })=>{ let ini = null, fin = null; for (let i=0;i= c.iv[i][0] && t < c.iv[i][1]+0.30){ ini = c.iv[i][0]; fin = c.iv[i][1]; } } if (ini === null) return null; const p = clamp((t-ini)/0.34,0,1), e = Easing.easeOutBack(p); const out = clamp((t-fin)/0.30,0,1); const brillo = (fin < 90 && t >= fin-0.42 && t < fin) ? 1 : 0; // el chip ENTERO reacciona al clic const realza = (c.l === 'Abiertas' && t >= T.abiertas && t < T.abiertas+1.5) ? Math.sin((t-T.abiertas)/1.5*Math.PI) : 0; return ( 0 ? `0 0 ${realza*26}px rgba(16,185,129,${realza*0.8})` : 'none'), transform:`scale(${lerp(0.7,1,e)*(1-out*0.25)*(1+brillo*0.05)})`}}> {c.l} ✕ ); }; // ── La lista. Después de filtrar solo pasan las tres de Marta, tipo Error y con «etiquetas» ─ const FILAS = [ { c:'NTO-14', ti:'Revisar etiquetas de producto', tp:'Error', tc:'#DC2626', a:'marta', v:'Hoy', pasa:true }, { c:'NTO-21', ti:'Importar catálogo del proveedor', tp:'Tarea', tc:'#0085FF', a:'javier', v:'Mañana', pasa:false }, { c:'NTO-08', ti:'Pasarela de pago en pruebas', tp:'Tarea', tc:'#0085FF', a:'nuria', v:'18 ago', pasa:false }, { c:'NTO-33', ti:'Etiquetas duplicadas en el buscador', tp:'Error', tc:'#DC2626', a:'marta', v:'Ayer', pasa:true }, { c:'NTO-05', ti:'Fotos de la portada', tp:'Mejora', tc:'#7C3AED', a:'nuria', v:'21 ago', pasa:false }, { c:'NTO-40', ti:'Aviso de cookies', tp:'Tarea', tc:'#0085FF', a:'javier', v:'', pasa:false }, { c:'NTO-27', ti:'Etiquetas con acentos rotos', tp:'Error', tc:'#DC2626', a:'marta', v:'Hoy', pasa:true }, { c:'NTO-12', ti:'Alta del transportista', tp:'Tarea', tc:'#0085FF', a:'nuria', v:'25 ago', pasa:false }, ]; const corte = T.filtrar + 0.55; const compacta = Easing.easeInOutCubic(clamp((t-corte)/0.6,0,1)); let idxPasa = -1; const filasY = FILAS.map(f=>{ if (f.pasa){ idxPasa++; return idxPasa; } return -1; }); const PREFIJOS = ['nat:','n:','nature:','naturaleza:','@usuario','tipo:','t:','type:','estado:','e:','status:','s:','abiertas','open']; const CHULETA = [ { p:'nat:', d:'naturaleza · Interna, De cliente…' }, { p:'@', d:'usuario · Marta Ruiz, Javier Sanz, Ana Costa' }, { p:'tipo:', d:'tipo · Tarea, Error, Mejora' }, { p:'estado:', d:'estado · Backlog, Pendiente, En proceso…' }, ]; return (
Nueve atajos, y una caja que entiende prefijos}/>
{/* ═════════ LA VENTANA ═════════ */}
0.1 ? 'saturate(0.5)' : 'none'}}>
{/* Menú lateral: presente, pero callado — el protagonista está a la derecha */}
{['Inicio','Mi día','Todas las tareas'].map(x=>(
{x}
))}
PROYECTOS
{[['Nueva tienda online',true],['Reforma del obrador',false],['Web corporativa',false]].map(([x,act])=>(
{x}
))}
{/* Cabecera del proyecto */}
Nueva tienda online NTO
{['marta','javier','nuria'].map((a,i)=>( ))}
{/* Barra de vistas + Filtros + caja de buscar */}
{['compacta','kanban','tabla','gantt'].map((v,i)=>( ))} = T.boton && t < T.caja ? '#0085FF' : '#E2E8F0'}`, background:t >= T.atajos && t < T.caja ? 'rgba(0,133,255,0.08)' : '#fff'}}> = T.boton && t < T.caja ? '#0085FF' : '#64748B'}/> Filtros = T.caja ? '#0085FF' : '#E2E8F0'}`, background:'#fff', boxShadow:t >= T.caja && t < T.filtrar+1 ? '0 0 0 4px rgba(0,133,255,0.12)' : 'none'}}> = T.caja ? '#0085FF' : '#94A3B8'}/> {t >= T.medio-0.30 ? : Buscar… (escribe nat: @ tipo: estado: o abiertas)} {/* El botón de limpiar solo existe cuando hay algo puesto: aquí siempre lo hay («Abiertas») */}
{/* Fila de chips */}
{CHIPS.map(c => )}
{/* La lista */}
{FILAS.map((f,i)=>{ const ent = Easing.easeOutCubic(clamp((t-0.4-i*T.filaStep)/0.45,0,1)); const fuera = !f.pasa ? compacta : 0; const y = f.pasa ? lerp(i*68, filasY[i]*68, compacta) : i*68; return (
{f.ti} {f.tp} {f.v} {f.c}
); })} {/* El remate: lo que queda delante */} {t >= T.buscabas && (
Tres tareas. Lo que buscabas.
)}
{/* ═════════ EL DESPLEGABLE DE «FILTROS» · no se cierra al elegir ═════════ */} {(()=>{ const p = clamp((t-T.atajos)/0.42,0,1), out = clamp((t-T.caja)/0.4,0,1); if (p <= 0 || out >= 1 || bajaP > 0.2) return null; const e = Easing.easeOutBack(p); let fila = 0; return (
{GRUPOS.map((G,gi)=>(
{G.g}
{G.o.map(o=>{ const y = fila++; const on = enc(o); const focoTodas = o.n === 'Todas' && t >= T.todas && t < T.arranque+0.4; return (
{on && } {o.n}
); })}
))}
{/* «No se cierra al elegir»: el propio panel lo demuestra quedándose quieto */} {t >= T.nocierra && t < T.abiertas+0.6 && (
No se cierra al elegir:
tres filtros son tres clics.
)} {/* «no enseña las cerradas» */} {t >= T.cerradas && t < T.chips-0.3 && (
Completadas y canceladas siguen ocultas.
)}
); })()} {/* ═════════ Los prefijos, en español y en inglés ═════════ */} {(()=>{ const p = clamp((t-T.prefijos)/0.4,0,1), out = clamp((t-T.chuleta+0.2)/0.4,0,1); if (p <= 0 || out >= 1) return null; return (
{PREFIJOS.map((x,i)=>( {x} ))}
); })()} {/* ═════════ La chuleta: sale al pinchar dentro, y se retira al teclear texto libre ═════ */} {(()=>{ // Se retira ANTES de que caiga el primer carácter de texto libre: la chuleta y el modo // Text no coexisten (SmartFilterBarU.razor:84). El typewriter arranca en T.medio-0.30. const p = clamp((t-T.chuleta)/0.4,0,1), out = clamp((t-T.medio+0.58)/0.26,0,1); if (p <= 0 || out >= 1) return null; const e = Easing.easeOutBack(p); return (
{CHULETA.map((c,i)=>{ const elegida = (i === 1 && t >= 31.55) || (i === 2 && t >= 32.40); return (
{c.p} {c.d}
); })}
Nunca propone tareas: solo familias de prefijo y sus valores.
); })()} {/* «Espera medio segundo antes de filtrar»: la barra de espera, real, lineal */} {t >= T.filtrar-0.35 && t < corte+0.5 && (
medio segundo
)} {/* ═════════ LOS DOS VACÍOS · son un if/else: se rotulan como comparación ═════════ */} {veloVacios > 0.01 &&
} {(()=>{ const p = clamp((t-T.vacios+0.9)/0.5,0,1), out = clamp((t-T.buscabas+0.2)/0.4,0,1); if (p <= 0 || out >= 1) return null; const VAC = [ { t1:'Ninguna tarea pasa el filtro', b:'Quitar los filtros', sub:'hay tareas, pero ninguna cumple lo que has puesto' }, { t1:'Este proyecto todavía no tiene tareas', b:null, sub:'Escribe la primera en la caja de abajo y pulsa Enter.' }, ]; return (
La lista distingue los dos vacíos
o esto, o esto — nunca las dos: son las dos ramas del mismo if
{VAC.map((v,i)=>{ const e = Easing.easeOutBack(clamp((t-T.vacios+0.9-i*0.22)/0.55,0,1)); return (
{v.t1}
{v.sub}
{v.b && ( {v.b} )}
{i === 0 ? 'rama 1' : 'rama 2'}
); })}
); })()} {/* «Ahora mira la dirección»: el navegador sube — puente al clímax */} {bajaP > 0.02 && (
play.dinaup.com/App/ToDo/8f3c1d92…/To-Do?q=etiquetas&users=…
Ahora mira la dirección.
)} ); } Object.assign(window, { EscenaTV03 });