Aevum

Aevum es una plantilla de clínica de salud de precisión y longevidad construida alrededor de la visualización de datos en vivo. Siete páginas cubren la historia de la clínica, un recorrido de evaluación en cuatro pasos, la ciencia detrás de seis sistemas de biomarcadores, tres tiers de membresía con toggle mensual/anual, el equipo clínico y un flujo de reserva completo. El hero combina un titular en Instrument Serif revelado palabra por palabra con SplitText y The Vitals: tres anillos concéntricos de biomarcadores que se dibujan solos vía stroke-dashoffset, un score compuesto de salud y un count-up de edad biológica sobre un retrato con parallax. La página de ciencia renderiza una gráfica longitudinal hecha con d3-scale y d3-shape, el trazo se dibuja con el scroll sobre bandas de zona verde, ámbar y coral, con un marcador coral en el punto de hoy, y un body map SVG interactivo revela seis sitios de medición al hover, tap o foco de teclado. Blanco hueso, tinta forest, acento coral y ni una sola grilla.

Qué incluye

• 7 páginas, Inicio, Cómo Funciona, Ciencia, Membresía, Equipo, Reservar, 404
• Widget The Vitals en el hero, tres anillos concéntricos de biomarcadores se dibujan vía stroke-dashoffset con un score compuesto contando en el centro
• Lectura de edad biológica, 47 cronológicos frente a 38.6 biológicos, animada con count-up decimal
• Revelado del titular palabra por palabra con SplitText, que espera a document.fonts.ready antes de dividir
• Gráfica longitudinal de salud con d3-scale + d3-shape (line, area, curveMonotoneX) cuyo trazo se dibuja al entrar en viewport
• Espectro de zonas con significado detrás de la gráfica, bandas optimal / watch / act, nunca color decorativo

La firma

The Vitals resume toda la tesis en un solo widget: tres anillos concéntricos de biomarcadores se dibujan desde cero con stroke-dashoffset en cuanto entran en viewport, cada uno con el color de su zona de salud, mientras un score compuesto cuenta hacia arriba en el centro y la edad biológica se detiene en 38.6 frente a los 47 cronológicos. En la página de ciencia la misma idea escala a una gráfica longitudinal completa, d3-scale y d3-shape hacen las matemáticas, GSAP dibuja el trazo sobre las bandas de zona y un marcador coral fija el punto de hoy. Con reduced motion cada visualización aparece ya dibujada en su estado final.

Verlo en vivo

La demo es pública: https://fpsjago.github.io/Aevum/. 7 páginas, hecha con Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis, D3.