Meridian is an interactive timezone planner built for teams spread across the globe. It lets you scrub through time on a visual clock dial, see what every teammate is up to at a glance, and coordinate meetings without the mental overhead of manual timezone math.
No build step, no install — open `index.html` in any modern browser and you're running.
What It Does
- Visual time scrubbing — drag the handle on the clock dial to move through any hour of the day
- Multi-city view — add, remove, and swap comparison cities with one click
- Live mode — a "Live" badge snaps you back to the current time after scrubbing
- AM/PM flip — tap the handle to toggle between morning and afternoon
- DST-aware — half-hour and 45-minute timezone offsets fully supported via the browser's `Intl` API
Usage
| Action | How |
|---|---|
| Change anchor city | Click the city name below the clock |
| Swap a comparison city | Click the city card |
| Remove a city | Hover the card, click × |
| Add a city | Click the dashed "+ Add city" button |
| Scrub time | Drag the handle on the clock dial |
| Flip AM/PM | Tap/click the handle |
| Return to live | Click the "Live" / "Jump to now" badge |
Tech Stack
React 18 (UMD), Framer Motion 11, Tailwind CSS (CDN), Babel standalone, OKLch color, Google Fonts (Inter, Instrument Serif, JetBrains Mono).
The entire application lives in a single `src/app.jsx` file — no bundler, no TypeScript, JSX transpiled in-browser by Babel.
Adding Cities
Cities are defined in a `TZ_LIBRARY` constant using IANA timezone identifiers:
{ id: 'America/Chicago', city: 'Chicago', country: 'USA', code: 'ORD' }
Any valid IANA timezone identifier works, including regions with non-standard offsets.
Design Philosophy
Meridian is deliberately zero-dependency at runtime — no npm, no build toolchain, no local server required. The tradeoff is CDN-dependence for React, Tailwind, and Framer Motion, but the result is a tool anyone can open and share instantly.