Ronda · Lab · Mantenimiento y activos

Cómo se construyó Ronda

Demo de panel de mantenimiento industrial para una planta ficticia. Los partes de incidencia van llegando en vivo: cada uno aparece en la tabla, enciende un marcador en el mapa de planta, suma en los KPIs y dispara un aviso. Los técnicos «escriben» antes de contestar en el feed del equipo, las incidencias pasan de abiertas a en curso y a resueltas con su coste y su tiempo, y la gráfica del mes crece con cada cierre. Las rondas de preventivo se rellenan punto a punto en barras de píldoras y el ranking de activos se reordena solo. Puedes pausar el directo, acelerarlo ×2 o ×4, crear una incidencia a mano, filtrar la tabla desde el buscador y reiniciar el mundo con la misma semilla: el generador es determinista. Sin backend ni dependencias, con la identidad Logic2b (lienzo frío, azul de marca, halos azul→cian) aplicada a un producto de gestión.

Es una demo técnica, no una plantilla vendible tal cual: un adelanto de lo que podemos construir a medida cuando un proyecto necesita algo más que una web de catálogo. Si te interesa algo parecido para tu producto, hablamos.

Qué demuestra

• Simulación en directo con reloj propio: pausa, velocidad ×1/×2/×4 y reinicio con la misma semilla (RNG mulberry32, resultado idéntico cada vez)
• Incidencias que llegan solas: fila nueva que crece en la tabla, marcador que aparece en el mapa de planta, aviso flotante y campana que suma
• Ciclo de vida completo: abierta → en curso → resuelta, con coste, duración y técnico; cada cierre recalcula MTTR, coste del mes y cola pendiente
• Feed del equipo con indicador «está escribiendo…» antes de cada mensaje, adjuntos simulados y contador de no leídos
• Gráfica SVG regenerada al vuelo: barras de resueltas por día + línea de pendientes, con intro dibujada, tooltip al pasar y el día de hoy creciendo en vivo
• Rondas de preventivo en barras de 36 píldoras que se encienden una a una con halo en la última, y plan semanal segmentado que se mueve con ellas
• Ranking de activos con reordenación FLIP: cuando un activo suma incidencias las filas se deslizan a su nueva posición y las barras se reajustan
• Mapa de planta en matriz de puntos por zonas con marcadores latiendo por prioridad; los cierres retiran el marcador con un encogido
• Todo el movimiento con tweens propios sobre performance.now() y un único bucle rAF: sin transiciones CSS críticas, capturable por el reloj virtual del grabador
• Buscador ⌘K que filtra la tabla en vivo, guía de puesta en marcha plegable y entrada escalonada de todos los bloques (IntersectionObserver), con prefers-reduced-motion
• Identidad Logic2b: lienzo frío, acento azul #1971ff, halos azul→cian sangrando por los bordes, tarjetas planas con hairline, Inter + Poppins autoalojadas
• Cero dependencias: HTML + CSS + SVG + JavaScript a mano, sin librería de gráficos ni framework