MeteoHealth.pro
Publicadometeohealth.pro es el sitio de la aplicación iOS MeteoHealth: Symptom Tracker. Diseño editorial sobre el sistema de diseño propio "Liquid Signal", una visualización generativa en WebGL del cambio de presión atmosférica con React Three Fiber, métricas meteorológicas en vivo de la ciudad elegida directamente en el hero, un blog SEO sobre cómo el clima afecta al bienestar y toda la infraestructura de la app: políticas, soporte y universal links. Localizado a 6 idiomas, incluido el árabe con maquetación RTL completa.
/// Funciones clave
- "Campo de presión" generativo en WebGL: el dibujo reacciona al cambio real de presión, viento y precipitaciones de la ciudad elegida
- Métricas meteorológicas en vivo en el hero: presión, humedad, viento y estimación de riesgo para personas meteosensibles
- Sistema de diseño propio "Liquid Signal": tipografía editorial y primitivas HUD
- Blog SEO sobre clima y salud en MDX con frontmatter validado con Zod
- 6 idiomas, incluido el árabe con maquetación RTL completa
- Scroll suave (Lenis) y animaciones GSAP orquestadas que respetan prefers-reduced-motion
- Búsqueda estática del blog sin backend (Pagefind)
- Infraestructura de la app: políticas, soporte, press kit, universal links
/// Capturas
Sobre el proyecto
meteohealth.pro es el sitio de marketing de la app MeteoHealth, construido como un producto por derecho propio. Sus tareas: convertir al visitante en una instalación desde el App Store, atraer tráfico orgánico con artículos sobre la relación entre el clima y el bienestar, y dar servicio a la infraestructura de la app, desde las políticas hasta los universal links.
Diseño: «Liquid Signal»
El sitio no se parece a la típica landing de una app. En su base hay un sistema de diseño propio, «Liquid Signal»: tipografía editorial serena, elementos HUD monoespaciados con etiquetas técnicas (APP_STATUS, TIME_CODE, PRESSURE_Δ24H) y mucho aire.
El centro de la composición es un «campo de presión» generativo renderizado con React Three Fiber: un dibujo ondulado gobernado en tiempo real por los datos meteorológicos de la ciudad elegida. Con clima tranquilo, el campo está tranquilo; cuando crece el salto de presión, el dibujo se condensa.
Funciones principales
Un hero vivo
Métricas reales en la primera pantalla: presión, humedad, viento, variación en 24 horas y estimación de riesgo para personas meteosensibles. La ciudad puede elegirse a mano o por geolocalización.
Blog SEO
Artículos sobre meteosensibilidad, presión y dolor de cabeza, HRV y sueño — en MDX con frontmatter validado con Zod, marcado JSON-LD y hreflang para cada idioma publicado. La búsqueda es estática, con Pagefind, sin una sola petición al servidor.
Localización
Seis idiomas, incluido el árabe: cada maqueta se verifica en RTL. El esquema de URL es /{locale}/… con prefijo obligatorio, la misma convención que este portafolio.
Aspectos técnicos
- Next.js App Router con SSG: las páginas de contenido se generan estáticamente
- La escena WebGL se degrada con elegancia: los dispositivos modestos y
prefers-reduced-motionreciben un póster - Scroll suave con Lenis, animaciones de scroll con GSAP
- Despliegue con Docker (standalone) en un Dokploy autoalojado
Marco médico
El sitio deliberadamente no da consejos médicos: cada artículo de salud es informativo, lleva un aviso y dice «puede influir», no «cura».
