- Zen mode: remove all the distractions (link)
- Screensaver mode: make the quotes dance around the screen! (link)
- Languages: supports English, Spanish, Portuguese, French, and Italian (by default, it will try to use the system language)
- Random language: see a quote in a different language each minute, isn't that cool? (link)
- Themes: the clock has
colour themesandspecial themesand each theme has light and dark variants, of course- Random colour theme: see a different colour theme each minute, isn't that even cooler? (link)
- Fade effect
- Font personalization: if you don't like the default font of a theme, that's perfectly fine, we won't judge you, so you can change it for another using the
fontparam! - Responsive: no matter how long a quote is, it will always look good on desktop and mobile 😎
- Static mode: get rid of all the javascript event listener an control the clock only with query parameters
- All the settings are saved in the browser's local storage and they are updated in the URL without refreshing the page, thanks to History API
The clock can be controlled using URL parameters, these parameters will overwrite the existing configuration
zen: enable/disable Zen modescreensaver: enable/disable Screensaver modelocale: set the localetheme: set the themefont: set a custom font from Google Fonts (it will be available on the font selector input!)fade: enable/disable fade effectshow-time: enable/disable the time at the top of the screenstatic: get rid of the menu and control the clock only with query parameters!
Developer settings
time: get the quotes for a particular time (link)
There is support for 15 languages (by default, it will try to use the system language).
Want to implement a new language? Sure thing, ping me and let's talk about it!
If you want to help you can:
- Raise an issue to add a new quote or a new variant for a specific time
- Raise an issue reporting a bug related to a quote (i.e. a typo)
- Contact me and share your thoughts about a quote, the project, or anything you want :D
- Show me your love in the form of coffees, cafecitos
- Be my Patreon
If you want to use this clock as a screensaver there are several ways to address this, although, it depends on the OS. I'm currently using the Mac OS solution and it worked like a charm. You can find more information here:
- Mac OS: Mac OS X Screen Saver powered by a Web View (https://github.com/liquidx/webviewscreensaver)
- Windows: Set Webpage as Screensaver in Windows 10 (https://www.youtube.com/watch?v=UovZwUlwwEs)
- Linux: Live Webpage as a Desktop Wallpaper on KDE Desktop (https://www.youtube.com/watch?v=_v1sJhBu25o)
Some nice themes, locale and font combinations!
https://clockception.netlify.app/?theme=photo-system
| Fuzzy | Fuzzy + Solid |
|---|---|
 |
 |
To run the project you need Node and NPM installed on your system.
- Clone the project
- Install NPM dependencies
- Run
npm run devand voila! The clock will be automatically opened in your favorite browser.
This project is possible thanks to the following projects:
Hi! I'm Carlos and you can find me here
