Liquid Onyx Clock

Overview

A premium, glassmorphicglassmorphicA UI style built from frosted, semi-transparent panels (background blur) layered over colourful backgrounds. clock experience built around a smooth liquid-dark aesthetic — with a clock, timer, and stopwatch, fullscreen screensaver behavior, and installable PWAPWAProgressive Web App — a web app that can be installed and keep working offline, using a web app manifest and a service worker. support. Designed to look beautiful as a desk-display screensaver and work fully offline.

What I Built

Three working modes:

• Clock — large central digital clock with date, and a 12h/24h toggle persisted in localStorage
• Timer — presets (5m/15m/30m/1h) plus custom minutes, start/stop/reset, and an audio alert on completion
• Stopwatch — start/stop/lap/reset, a timestamped lap list, and export laps to .csv or .txt

Experience:

• Liquid, glossy dark visual system with an animated gooey background
• Hamburger control panel with mode switch, theme switcher, and clock format
• Fullscreen support with keyboard shortcuts, scaling the display larger while running
• Wake Lock integration for immersive, always-on fullscreen use

PWA:

• Installable on desktop, tablet, and mobile via vite-plugin-pwa (service workerservice workerA script the browser runs separately from the page. It can intercept network requests and serve cached responses, which is what makes a web app load offline. + manifest)
• Offline caching, app icons, maskable icon, and Apple touch icon

Persistence

Theme, clock format, recent timer durations, and stopwatch lap history are all saved to localStorage.

Tech Stack

Frontend: React 19, TypeScript, Vite 7, Tailwind CSS

PWA: vite-plugin-pwa (service worker, web manifest, Wake Lock API)

Use Case

A beautiful, installable clock/timer/stopwatch for a desk display or focus sessions — works offline and runs fullscreen as a screensaver.