Solace

Solace is a warm, editorial template for concierge clinics, private medical practices, and wellness groups. Twelve pages cover the homepage, a services index with detail pages carrying numbered process steps and an assigned physician, a team directory with full doctor profiles, patient stories, a health-insights blog with author lookup and reading time, an FAQ with category tabs, about, contact, and a 404. The hero is the standout: your consultation photo starts full-bleed, then clips inward to inset(40%) and dissolves while a soft sage circle emerges beneath it, scaling from 0.6 to 3 on scrub and pulsing on a four-second breathing keyframe. Four content collections, three color skins, animated trust counters, and 30 photographs ship with it.

What’s inside

• 12 pages, Home, Services, Service detail, Team, Physician profile, About, Patient Stories, Blog, Post, FAQ, Contact, 404
• The Breath hero, the photo clips to inset(40%) and dissolves while a sage radial circle scales 0.6 → 3 on scrub
• Four-second CSS breathing keyframe on the hero circle, running underneath the scroll-linked GSAP timeline
• Word-by-word headline entrance (0.06s stagger, power4.out) with blur-to-sharp subtext and CTA reveal
• Animated trust counters, 12,000+ patients, 15+ years, 98% satisfaction, 6 board-certified physicians
• Velocity-reactive specialty marquee, eight disciplines whose timeScale accelerates up to 3x with scroll speed

The signature

The hero opens on a full-bleed consultation photograph. As you scroll, a scrub 1.5 timeline clips it inward to inset(40%) while the image counter-scales to 1.3 and fades, and in the space it leaves, a soft sage radial-gradient circle emerges, scaling from 0.6 to 3. That circle is simultaneously running a four-second CSS breathing keyframe, so it expands with the scroll while quietly inhaling and exhaling on its own. The headline, which entered word by word, lifts 25% and fades out above it, with the subtext and CTA staggered behind it.

See it live

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