---
title: "Constante — panel de salud personal | Logic2b Lab"
description: "Demo técnica: dashboard de salud con gráfica de dos ejes animada, citas con cuenta atrás, calendario vivo, tratamiento con tomas diarias y buscador global — vanilla JS, cero dependencias. Mira cómo lo construimos en Logic2b Lab."
lang: es-ES
source_url:
  html: https://logic2b.com/lab/constante/
  md: https://logic2b.com/lab/constante/index.md
---

# Constante Lab · Salud y clínicas

lab.logic2b.com/constante

Ruta: [Lab](https://logic2b.com/lab) › [Salud y clínicas](https://logic2b.com/sistemas/salud-clinicas)

## Cómo se construyó Constante

Demo de panel de salud personal sobre un lienzo verde salvia. La gráfica de parámetros no es una imagen: cambia entre peso con % de grasa, tensión y pulso con una transición animada entre series, dos ejes (kg a la izquierda, % a la derecha), tooltip con lupa de valores y tres rangos temporales. Los datos salen de un generador seedeado — desde el menú de la tarjeta puedes regenerar la serie con semilla nueva o repetir la misma y obtener el mismo trazo. Las citas muestran a los doctores con retratos fotográficos generados con IA, la primera corre una cuenta atrás segundo a segundo y el botón «Nueva cita» reserva de verdad: añade la tarjeta con su animación, sube el contador del menú y pinta un punto nuevo en el calendario. En el tratamiento cada medicamento tiene sus tomas del día como círculos que se marcan al pulsar y alimentan la barra de progreso. Completan la demo un calendario mensual navegable con eventos seedeados, un buscador que filtra citas y medicación a la vez (⌘K), y un feed de avisos que hace crecer el contador de chats. Sin backend ni librerías.

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

- Gráfica de parámetros en SVG con dos ejes (peso en kg y grasa en %) y transición animada al cambiar entre peso, tensión y pulso: la serie anterior se interpola hacia la nueva
- Tres rangos temporales (año, 6 meses, 30 días) con re-muestreo de la curva y etiquetas de eje recalculadas
- Tooltip con cursor: línea vertical, puntos sobre ambas series y valores formateados según la métrica
- Generador de datos seedeado (mulberry32) con menú de tarjeta: regenerar con semilla nueva o repetir la misma semilla y obtener exactamente el mismo trazo
- Citas con retratos fotográficos de los doctores generados con Higgsfield (autoalojados, cero CDNs) y cuenta atrás en vivo hasta la próxima consulta
- «Nueva cita» reserva de verdad: tarjeta con animación de entrada, badge del menú que salta, toast de confirmación y punto nuevo en el calendario
- Calendario mensual navegable con lunes como primer día, eventos seedeados por mes y reloj que avanza en la cabecera
- Tratamiento con tomas diarias por medicamento: círculos que se marcan al pulsar y barra de progreso que se recalcula («5 de 7 tomas de hoy»)
- Buscador global (⌘K) que filtra citas y medicación a la vez, con estado vacío cuando no hay resultados
- Feed de avisos simulado: chats de los doctores y recordatorios de tomas que suben los contadores del menú lateral
- Entrada escalonada de todo el panel y respeto de prefers-reduced-motion (sin animaciones ni feed si el usuario lo pide)
- Cero dependencias: HTML + CSS + SVG + JavaScript a mano; la referencia original era un diseño React con librería de gráficas

### Detalles

**Categoría**

Salud y clínicas

**Formato**

Demo interactiva, sin backend

### Stack usado

- JavaScript
- SVG

### Categorías

[Salud y clínicas](https://logic2b.com/sistemas/salud-clinicas) [Cuadros de mando y analítica](https://logic2b.com/sistemas/cuadros-de-mando) Salud Dashboard SVG Tiempo real

### Lo ofrecemos con webs de

[Clínicas dentales](https://logic2b.com/diseno-web/clinicas-dentales) [Psicólogos y terapeutas](https://logic2b.com/diseno-web/psicologos) [Clínicas y centros médicos](https://logic2b.com/diseno-web/clinicas-medicas) [Clínicas veterinarias](https://logic2b.com/diseno-web/veterinarias) [Fisioterapia y osteopatía](https://logic2b.com/diseno-web/fisioterapia)

## Labs relacionados

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

[**Aura** Salud y clínicas](https://logic2b.com/lab/aura) [**Camilla** Salud y clínicas](https://logic2b.com/lab/camilla) [**Cartilla** Salud y clínicas](https://logic2b.com/lab/cartilla)

---

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)