Aevum

Aevum is a precision-health and longevity clinic template built around live data visualisation. Seven pages cover the clinic story, a four-step assessment journey, the science behind six biomarker systems, three membership tiers with a monthly/annual toggle, the clinical team, and a complete booking flow. The hero pairs an Instrument Serif headline revealed word by word with SplitText and The Vitals: three concentric biomarker rings that draw themselves via stroke-dashoffset, a composite health score, and a biological-age count-up over a parallaxed portrait. The science page renders a longitudinal health chart built with d3-scale and d3-shape, the stroke draws across on scroll over green, amber and coral zone bands with a coral marker pinning today’s point, and an interactive SVG body map exposes six measurement sites on hover, tap or keyboard focus. Bone white, forest ink, coral accent, no grid anywhere.

What’s inside

• 7 pages, Home, How It Works, Science, Membership, Team, Book, 404
• The Vitals hero widget, three concentric biomarker rings draw via stroke-dashoffset with a composite health score counting up in the centre
• Biological-age readout, chronological 47 against a biological 38.6, animated with a decimal count-up
• SplitText word-by-word headline reveal that waits for document.fonts.ready before splitting
• Longitudinal health chart built with d3-scale + d3-shape (line, area, curveMonotoneX) whose stroke draws on scroll into view
• Meaningful zone spectrum behind the chart, optimal / watch / act bands, never decorative colour

The signature

The Vitals is the whole thesis in one widget: three concentric biomarker rings draw themselves from zero with stroke-dashoffset the moment they scroll into view, each coloured by its own health zone, while a composite score counts up in the centre and a biological age settles at 38.6 against a chronological 47. On the science page the same idea scales to a full longitudinal chart, d3-scale and d3-shape do the maths, GSAP draws the stroke across the zone bands, and a coral marker pins today’s point. Reduced motion shows every visualisation in its final drawn state.

See it live

The demo is public: https://fpsjago.github.io/Aevum/. 7 pages, built with Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis, D3.