Constante · Lab · Salud y clínicas

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