The modern way to coordinate global time. A minimalist world clock and meeting planner designed with "Technical Glass" aesthetics, performance, and privacy in mind.
- 🧠 Smart Auto-Location: Automatically detects your city, weather, and time via IP (with GPS fallback) using
ipwho.is. - 📅 Meeting Planner: Interactive 24h grid to find overlapping business hours across timezones. Includes color-coded availability and configurable business/extended hours.
- ⏱️ Time Travel: Simulate any time up to ±12 hours with a slider. The world map updates in real time, showing both the real and simulated time on hover.
- 🌍 Global Search: Search any city in the world using the Open-Meteo Geocoding API.
- 🛡️ Backup & Restore: Export your saved cities and configuration to a JSON file and restore them on any device.
- 📱 PWA Ready: Install Offset as a native app on iOS and Android. Works fully offline.
- 🌗 Adaptive Themes: Seamlessly switch between Light and Dark modes.
- ☁️ Real-Time Weather: Live temperature and condition icons for every saved city.
- 🗺️ Interactive Map: Zoomable world map with night shadow, city pins, and time tooltips.
- 🔗 Share Dashboard: Generate a URL to share your exact clock configuration with anyone.
- 📸 Export as Image: Download your dashboard as a PNG snapshot.
- 💾 Local-First Persistence: All settings are saved instantly to
localStorage. No login required.
- Framework: Next.js (App Router & Server Components)
- Styling: Tailwind CSS (JIT Mode)
- Interactions: dnd-kit (Drag & Drop)
- State Management: Zustand
- Time Logic:
date-fns&date-fns-tz - Map Rendering:
d3-geo,topojson-client - PWA:
@ducanh2912/next-pwa - Data Sources: Open-Meteo, ipwho.is, FlagCDN
Offset is fully translated into 4 languages:
| Language | Code |
|---|---|
| Español | es |
| English | en |
| Français | fr |
| Deutsch | de |
This project is built with Next.js and requires no external backend (Local-First).
- Node.js (v18 or higher)
- npm or pnpm
- Clone the repo:
git clone https://github.com/EdvinCodes/offset.git
cd offset- Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 with your browser.
- MVP: Local clock & basic city list
- UI: Dark mode & "Glass" design system
- Search: Global city search via API
- Persistence: Save user cities via LocalStorage
- Productivity: Meeting Planner with business & extended hours
- Context: Real-time weather and dynamic flags
- Themes: Custom theme toggle (Light/Dark)
- Backup: Export/Import settings as JSON
- PWA: Install as a native app on mobile (offline support)
- Time Travel: Simulate time ±12h with live map sync
- Share: Generate shareable dashboard URL
- Export: Download dashboard as PNG image
- i18n: 4 languages (ES, EN, FR, DE)
This project is open source and available under the MIT License.
Developed with ❤️ by Edvin