MeteoHealth.pro
Publishedmeteohealth.pro is the home of the iOS app MeteoHealth: Symptom Tracker. Editorial design built on the custom "Liquid Signal" design system, a generative WebGL visualization of barometric pressure change powered by React Three Fiber, live weather metrics for a chosen city right in the hero, an SEO blog about how weather affects well-being, and the full app infrastructure — policies, support, universal links. Localized into 6 languages, including Arabic with a proper RTL layout.
/// Key features
- Generative WebGL "pressure field": the drawing reacts to the real pressure change, wind, and precipitation of a chosen city
- Live weather metrics in the hero: pressure, humidity, wind, and a risk estimate for weather-sensitive people
- Custom "Liquid Signal" design system: editorial typography and HUD primitives
- SEO blog about weather and health, written in MDX with Zod-validated frontmatter
- 6 locales, including Arabic with a fully mirrored RTL layout
- Smooth scrolling (Lenis) and orchestrated GSAP animations that respect prefers-reduced-motion
- Static, backend-free blog search (Pagefind)
- App infrastructure: policies, support, press kit, universal links
/// Screenshots
About the project
meteohealth.pro is the marketing site for the MeteoHealth app, built as a product in its own right. Its jobs: convert a visitor into an App Store install, attract organic traffic with articles about how weather affects well-being, and serve the app's infrastructure — from policies to universal links.
Design: "Liquid Signal"
The site doesn't look like a typical app landing page. At its core is a custom design system called "Liquid Signal": calm editorial typography, monospaced HUD elements with technical labels (APP_STATUS, TIME_CODE, PRESSURE_Δ24H), and plenty of whitespace.
The centerpiece is a generative "pressure field" rendered with React Three Fiber: a wavy drawing driven in real time by the weather data of a chosen city. When the weather is calm, the field is calm; as the pressure swing grows, the drawing tightens.
Key features
A living hero
Real metrics right on the first screen: pressure, humidity, wind, the 24-hour pressure change, and a risk estimate for weather-sensitive people. The city can be picked manually or by geolocation.
SEO blog
Articles about weather sensitivity, pressure and headaches, HRV, and sleep — written in MDX with Zod-validated frontmatter, JSON-LD markup, and hreflang for every published locale. Search is static, powered by Pagefind, with zero server requests.
Localization
Six languages, including Arabic: every layout is verified in RTL. The URL scheme is /{locale}/… with a mandatory prefix — the same convention as this portfolio.
Technical highlights
- Next.js App Router with SSG: content pages are statically generated
- The WebGL scene degrades gracefully: weak devices and
prefers-reduced-motionget a poster instead - Smooth scrolling on Lenis, scroll animations on GSAP
- Deployed with Docker (standalone) on self-hosted Dokploy
Medical framing
The site deliberately gives no medical advice: every health article is informational, carries a disclaimer, and says "may affect" rather than "treats".
