---
title: "Cadencia — panel de gestión de proyectos | Logic2b Lab"
description: "Demo técnica: dashboard de proyectos con fondo animado en canvas, tareas que se ejecutan, cuenta atrás de sesiones, dictado simulado y eficiencia recalculada en vivo — cero dependencias. Mira cómo lo construimos en Logic2b Lab."
lang: es-ES
source_url:
  html: https://logic2b.com/lab/cadencia/
  md: https://logic2b.com/lab/cadencia/index.md
---

# Cadencia Lab · Paneles de control

lab.logic2b.com/cadencia

Ruta: [Lab](https://logic2b.com/lab) › [Cuadros de mando y analítica](https://logic2b.com/sistemas/cuadros-de-mando)

## 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)

### Detalles

**Categoría**

Paneles de control

**Formato**

Demo interactiva, sin backend

### Stack usado

- JavaScript
- Canvas 2D
- SVG

### Categorías

[Cuadros de mando y analítica](https://logic2b.com/sistemas/cuadros-de-mando) [RR. HH. y equipos](https://logic2b.com/sistemas/rrhh-equipos) [IA y copilotos](https://logic2b.com/sistemas/ia-copilotos) Proyectos Dashboard Canvas IA simulada

### Lo ofrecemos con webs de

[SaaS, software y startups](https://logic2b.com/diseno-web/saas) [Eventos y congresos](https://logic2b.com/diseno-web/eventos)

## Labs relacionados

[Ver todos](https://logic2b.com/lab)

[**Ábaco** Paneles de control / Copiloto IA](https://logic2b.com/lab/abaco) [**Cuadrante** Paneles de control](https://logic2b.com/lab/cuadrante) [**Tiza** Cuadros de mando](https://logic2b.com/lab/tiza)

---

Logic2b S.L. · Castellón (España) · [info@logic2b.com](mailto:info@logic2b.com) · [Contacto](https://logic2b.com/contacto/) · [Auditoría gratuita](https://logic2b.com/auditoria/) · [Índice para IA](https://logic2b.com/llms.txt)