Cadencia · Lab · Paneles de control

Cómo se construyó Cadencia

Demo de panel de gestión de proyectos sobre un fondo animado generado en canvas. Cambias de proyecto y el tablero entero se recarga: métricas del sprint, tareas y comandos. Las tarjetas de tarea hacen cosas de verdad — entrar en una sesión arranca un cronómetro y la pone «en directo», el botón «Que lo haga la IA» lanza un proceso por fases con barra de progreso, y las sesiones programadas cuentan atrás segundo a segundo. La puntuación de eficiencia no es un número pintado: se recalcula con las tareas cerradas, los comandos ejecutados y las horas que edites en la tarjeta del sprint. El micrófono simula un dictado que se transcribe palabra a palabra sobre una onda reactiva y acaba convertido en un comando ejecutable. Sin backend ni dependencias: fondo, avatares y textura están generados con un RNG seedeado, y no se carga ninguna foto ni vídeo de terceros.

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

• Fondo a pantalla completa generado en canvas: seis manchas de color en movimiento dibujadas a 1/12 de resolución y desenfocadas por CSS — el bucle de vídeo del spec, sin un solo byte de vídeo
• Tres proyectos intercambiables: al elegir uno se recargan métricas, tareas y comandos, y la eficiencia vuelve a su base
• Sesiones con cuenta atrás real («empieza en 15:00») que al entrar pasan a «En directo» con cronómetro corriendo
• Botón «Que lo haga la IA»: proceso por fases con barra de progreso y texto de estado que acaba cerrando la tarea
• Puntuación de eficiencia recalculada en vivo con las tareas cerradas, los comandos ejecutados y las horas del sprint editables (+/−)
• Dictado simulado: onda de 35 barras reactiva por rAF y transcripción palabra a palabra que termina creando un comando ejecutable
• Filtros cruzados: pestañas (Espacio, Acciones, Rendimiento, IA) y conmutador Solo/Equipo que recomponen el tablero con estado vacío incluido
• Avatares procedurales en SVG a partir de un RNG seedeado (mulberry32): cero fotos de stock y cero llamadas a CDN de terceros
• Entrada escalonada con fade-up por elemento, tarjeta inclinada 2° que se endereza al pasar el ratón, y respeto de prefers-reduced-motion
• Cero dependencias: HTML + CSS + canvas + SVG a mano, sin React, Tailwind, Lucide ni Supabase (el spec original los pedía; aquí se reconstruye sin ellos)