AetherClock is not just an alarm clock — it's a personal morning DJ. Instead of a generic beep, it wakes you up with a curated AI-generated broadcast:
- 🎙️ Voice Briefing — A synthetic voice tells you the time, weather, and your day's agenda
- 📻 Smart Playlist — Thematic YouTube tracks matched to your mood, weather, and calendar
- 🎨 Immersive Visuals — 10 retro chassis themes, 3 with live WebGL backgrounds
- 📲 PWA — Install it, get push notifications, works offline
"It's like having a radio station that only plays for you, every morning."
→ https://aetherclock.pages.dev
No installation required. Open it in your browser, set an alarm, and experience your first AI-curated wake-up.
Wake up to a personalized spoken briefing synthesized via Google Gemini TTS. Choose from three voices:
Fenrir— Deep, commanding maleKore— Clear, bright femaleLeda— Warm, soothing female
The briefing covers:
- ⏰ Current time
- 🌤️ Weather conditions & temperature (via GPS + Open-Meteo)
- 📅 Your upcoming calendar appointments
- 💬 A custom greeting of your choice
Instead of one alarm tone, AetherClock builds a 1–5 track YouTube playlist in real-time, considering:
| Context | Music Adaptation |
|---|---|
| ☀️ Sunny weather | Upbeat, energetic tracks |
| 🌧️ Rainy weather | Lo-fi, ambient, acoustic |
| 💼 Morning meetings | Focus, instrumental |
| 🏋️ Workout scheduled | High-energy rock / electronic |
| 🌙 Night shift | Mellow jazz, chillhop |
| 🎚️ Genre preset | Synthwave, Classical, Rock, Jazz, Pop, Ambient, Hip-Hop |
Powered by Google Gemini with Search Grounding — finds real, embeddable YouTube tracks, not hallucinated songs.
Every theme morphs the entire UI — colors, glows, scanlines, hardware decals, and typography.
| Theme | Vibe | Background Engine |
|---|---|---|
| Obsidian Cyberpunk | Red neon, dystopian | CSS gradients + shadows |
| Sandalwood Amber | Warm, vintage wood | CSS gradients |
| Futuristic Cobalt | Blue tech, clean | CSS gradients |
| ★ Vaporwave Cyber-Luxe | Purple & magenta, retro sun | 🌴 WebGL — animated grid floor, rotating sun, post-processing bloom |
| ★ Antique Mahogany Brass | Brass screws, wood grain | CSS gradients + rivet decals |
| ★ Reactor Toxic-Green | Biohazard stripes, warning labels | CSS gradients + hazard patterns |
| ★ Space Odyssey | Deep space, orbital ring, planet | 🌌 WebGL — 3,000 star particles, rotating torus, nebula lighting |
| ★ Royal Velvet | Gold filigree, crown accents | CSS gradients + border inlays |
| ★ Sonar Marine | Green radar, depth readouts | 🛸 WebGL — sonar ping rings, rising bubbles, depth fog |
| Ivory Coast Emerald | Light mode, clean emerald | CSS gradients |
WebGL themes use Babylon.js with real-time FFT audio reactivity (when playing non-YouTube audio).
| Feature | Status |
|---|---|
| ⬇️ Installable (Android + Desktop) | ✅ |
| 🔕 Offline fallback alarm tone | ✅ |
| 🔔 Push notifications on alarm | ✅ |
| ⚡ Service Worker asset caching | ✅ |
| 📴 Works without internet after install | ✅ (fallback tone) |
┌─────────────────────────────────────────────────────────────┐
│ BROWSER │
│ ┌─────────────┐ ┌──────────────┐ ┌───────────────────┐ │
│ │ React 19 │ │ Vite Build │ │ Service Worker │ │
│ │ (App.tsx) │ │ (dist/) │ │ (Cache + Push) │ │
│ └──────┬──────┘ └──────────────┘ └───────────────────┘ │
│ │ │
│ ┌──────┴──────────────────────────────────────────────┐ │
│ │ EXTERNAL APIs (Client-Side) │ │
│ │ • Google Gemini (GenAI + TTS + Search Grounding) │ │
│ │ • Open-Meteo (Weather, no API key) │ │
│ │ • YouTube IFrame API (Playback) │ │
│ │ • Browser Geolocation (GPS) │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
No backend required. All AI calls go directly from the browser to Google's API. Your Gemini API key is injected at build time via Vite.
- Node.js ≥ 18
- A Google Gemini API key (free tier works)
git clone https://github.com/deusexlumen/AetherClock.git
cd AetherClock
npm installcp .env.example .env.local
# Edit .env.local:
# GEMINI_API_KEY=your_key_herenpm run dev→ Opens at http://localhost:3000
npm run build→ Outputs to dist/ — ready for Cloudflare Pages, Netlify, or any static host.
All preferences are persisted in localStorage and survive reloads.
| Category | Options |
|---|---|
| Voice Briefing | On/Off, voice (Fenrir/Kore/Leda), custom greeting, include weather/agenda/time |
| Playlist | On/Off, track count (1–5), shuffle, crossfade |
| Loudness | Standard · Sunrise Progressive (gentle ramp) · Max Impact Shock |
| Pre-Warm Engine | Generates content 60s before alarm time |
| Playback Source | YouTube (AI-curated real songs + verified NCS fallbacks) |
| Theme | 10 visual presets |
| Blacklist | Comma-separated artists/keywords to avoid |
| Notifications | System push notifications on alarm trigger |
| Offline Fallback | Local synthesized tone when disconnected |
- Open aetherclock.pages.dev in Chrome
- Tap "Install AetherClock" in the banner (or ⋮ → Install)
- App appears on home screen / desktop — runs standalone, no browser chrome
- Open Settings panel in the app
- Toggle Push Notifications
- Grant browser permission
- Receive system notifications even when the app is closed
- AI Studio decoupling (standalone deployment)
- YouTube-first playback engine
- Smart playlist curation (1–5 tracks)
- Voice briefing (Gemini TTS)
- PWA + Service Worker + offline fallback
- Push notifications
- Babylon.js WebGL animated themes (Vaporwave, Space, Submarine)
- 10 retro chassis presets
- Background alarm via Web Push (serverless periodic sync)
- Custom user-uploaded alarm tones
- Spotify / Apple Music integration
- Multi-alarm support
- Gamified wake-up challenges (snooze limits, dismiss puzzles)
| Layer | Technology |
|---|---|
| Framework | React 19 (Hooks + Refs) |
| Language | TypeScript 5.8 |
| Build Tool | Vite 6 |
| Styling | Tailwind CSS (CDN) + CSS Custom Properties |
| Icons | Lucide React |
| AI SDK | @google/genai |
| 3D Engine | @babylonjs/core (WebGL2, lazy-loaded) |
| Weather | Open-Meteo (free, no key) |
| Fonts | Orbitron, Share Tech Mono (Google Fonts) |
- Weather Data: Open-Meteo
- AI / Search Grounding: Google Gemini
- Music Playback: YouTube IFrame API
- 3D Engine: Babylon.js
- Fonts: Orbitron & Share Tech Mono via Google Fonts
MIT — feel free to fork, remix, and build your own wake-up experience.
Built with insomnia, synthwave, and too much coffee.