Solace

Solace es una plantilla editorial y cálida para clínicas concierge, consultas médicas privadas y grupos de wellness. Doce páginas cubren home, un índice de servicios con páginas de detalle que incluyen pasos de proceso numerados y médico asignado, un directorio de equipo con perfiles completos, historias de pacientes, un blog de salud con autor vinculado y tiempo de lectura, un FAQ con pestañas por categoría, nosotros, contacto y 404. El hero es lo que destaca: la foto de consulta arranca a sangre completa, luego se recorta hacia dentro hasta inset(40%) y se disuelve mientras emerge un círculo verde salvia que escala de 0.6 a 3 con scrub y late en un keyframe de respiración de cuatro segundos. Incluye cuatro colecciones de contenido, tres skins de color, contadores de confianza animados y 30 fotografías.

Qué incluye

• 12 páginas, Inicio, Servicios, Detalle de servicio, Equipo, Perfil de médico, Nosotros, Historias de pacientes, Blog, Post, FAQ, Contacto, 404
• Hero The Breath, la foto se recorta a inset(40%) y se disuelve mientras un círculo radial salvia escala de 0.6 a 3 con scrub
• Keyframe CSS de respiración de cuatro segundos en el círculo del hero, corriendo bajo el timeline de GSAP ligado al scroll
• Entrada del titular palabra por palabra (stagger 0.06s, power4.out) con subtexto de blur a nítido y aparición del CTA
• Contadores de confianza animados, 12.000+ pacientes, 15+ años, 98% de satisfacción, 6 médicos certificados
• Marquee de especialidades reactivo a la velocidad, ocho disciplinas cuyo timeScale acelera hasta 3x según el scroll

La firma

El hero abre con una fotografía de consulta a sangre completa. Al hacer scroll, un timeline con scrub 1.5 la recorta hacia dentro hasta inset(40%) mientras la imagen contraescala a 1.3 y se desvanece, y en el espacio que deja emerge un círculo de radial-gradient verde salvia que escala de 0.6 a 3. Ese círculo corre a la vez un keyframe CSS de respiración de cuatro segundos, así que se expande con el scroll mientras inhala y exhala por su cuenta. El titular, que entró palabra por palabra, sube un 25% y se desvanece por encima, con el subtexto y el CTA escalonados detrás.

Verlo en vivo

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