Liquid Onyx Clock

Premium glassmorphic clock experience built with React + Vite + TypeScript + Tailwind, with timer, stopwatch, fullscreen screensaver behavior, and installable PWA support.

Live URL: https://liquid-onyx-clock.vercel.app/

Highlights

• Liquid, glossy, dark visual system with animated gooey background.
• Three working modes: Clock, Timer, Stopwatch.
• Hamburger control panel includes mode switch, theme switcher, and 12h/24h clock format.
• Fullscreen support with keyboard shortcuts.
• Installable PWA support for desktop, tablet, and mobile.
• Wake Lock integration (best effort) for immersive fullscreen use.

Mode Details

Clock

• Large central digital clock.
• Date display below the clock.
• 12h/24h toggle persisted in localStorage.

Timer

• Presets: 5m, 15m, 30m, 1h.
• Custom minutes input.
• Start, Stop, Reset with contextual controls.
• Audio alert on completion.
• Display scales larger while running.

Stopwatch

• Start, Stop, Lap, Reset actions.
• Lap list with timestamps.
• Export laps to .csv or .txt.
• Display scales larger while running.

Persistence

Stored in localStorage:

• Active theme
• Clock format (12h/24h)
• Timer recent duration logic
• Stopwatch lap history

PWA Support (Desktop / Tablet / Mobile)

• vite-plugin-pwa with generated service worker + web manifest.
• Offline caching support.
• Install flow:
  • Chromium browsers: native install prompt/button.
  • iOS Safari: Share -> Add to Home Screen.
• Includes app icons, maskable icon, and Apple touch icon.

Tech Stack

• React 19
• TypeScript
• Vite 7
• Tailwind CSS
• Custom CSS animations
• vite-plugin-pwa

Keyboard and UX Notes

• F toggles fullscreen.
• Esc exits fullscreen.
• Inactivity hides controls and cursor for immersive mode.
• Browser/OS policies may still limit automatic fullscreen and wake lock behavior.

Glimpse

Found a Bug? Please Create an Issue

If you find any bug, please create an issue with these steps:

1. Open the GitHub repository issues tab.
2. Click New issue.
3. Add a clear title (example: Timer not resetting on mobile Safari).
4. Describe exact steps to reproduce.
5. Mention expected behavior and actual behavior.
6. Add screenshots/video and device details (OS, browser, version).
7. Submit the issue.

Thank you. Hope you like this project.

License

Private project.