Weather Timeline
A day's forecast as one continuous ribbon rather than eight cards.
IntermediateWeb appData viz8–16hAI-buildable 5/5needs Open-Meteoworth shipping
Forecast data rendered as a scrubable timeline: temperature as a curve, precipitation as bars beneath it, and a draggable time cursor that reads out conditions at any point. A deliberate rejection of the row-of-cards forecast layout everyone builds.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Search for a location and load its forecast
- Temperature renders as a continuous curve across the timeline
- Precipitation probability renders as bars beneath the curve
- A draggable cursor reads out conditions at any point in time
- Day and night periods are visually distinguished
- Loading and failed-request states are handled explicitly
- The last location is remembered
The interesting part
- Smoothing a curve through hourly points without inventing false detail
- Keeping the scrub cursor responsive on touch as well as pointer
Once it works
- Add a multi-day view that keeps the ribbon metaphor
- Add sunrise and sunset markers
- Compare two locations on the same axis
Suggested stack
reacttypescripttailwindd3-shapetanstack-query
External APIs
- Open-Meteo · no key