The Clock Clock Experience

Themes

Light

Demo: link

Dark

Demo: link

Dark Gold

Demo: link

Light Gold

Demo: link

Dark Noir

Demo: link

Blue Coated

Demo: link

OLED

Demo: link

Glass

Demo: link

Desktop background

To install ClockClock as your wallpaper on Windows, you can use Wallpaper Engine. Follow these steps:

1. Download and install Wallpaper Engine from the Steam store.
2. Once installed, open Wallpaper Engine and navigate to the Workshop tab.
3. Search for "ClockClock" or go directly to the ClockClock page.
4. Subscribe to the ClockClock wallpaper and wait for it to download.
5. Once the download is complete, the ClockClock wallpaper will be available in your Wallpaper Engine library.
6. Select the ClockClock wallpaper from your library and choose "Apply" to set it as your background.

For MacOS users, you can use a tool called Plash to set ClockClock as your wallpaper. Here's how:

1. Start by installing Plash. You can find the installation instructions on its GitHub page: Plash.
2. Launch Plash and access the menu by clicking on the toolbar icon.
3. In the menu, select "Add Website" to add ClockClock as your wallpaper. You can choose any theme you like. To find different themes, refer to the Themes section for links.
4. That's it! Your wallpaper will now display ClockClock. If you wish, you can customize certain parameters. For example, you can reduce the frames per second (FPS) to minimize resource usage. Refer to the Settings section for more details.

Additionally, you can further customize the appearance of ClockClock using CSS code. For instance, if you want to center the clock with your Dock panel by moving clock higher on the screen:

1. Click Plash icon and go to the "Edit" menu.
2. In the "Edit" dialog, paste the following CSS code:

.clock-panel {
    margin-bottom: 80px !important;
}

By applying this code, the clock will be moved upward by 80 pixels.

Settings

• theme – theme configuration (one of above)
• time_format - time format 12/24 (default: 24)
• clock_size – diameter of a clock circe in px (default: 36)
• clock_margin – margin beetween each clock in px (default: 8)
• clock_hour – height of a hour arrow in px (default: <clock_size - 2>)
• clock_minute – height of a minute arrow in px (default: <clock_size>)
• clock_width – width of arrows in px (default: theme specific)
• bg – special backgroud mode. Supported values: oled, other... (default: none)
• bg-color - custom background color (any valid css color, e.g. #aaffbb), required bg=color
• bg-image - custom background image (any valid url, e.g. http://example.com/image.jpg), required bg=image
• mode – special display mode. Supported values: fullscreen (default: none)
• speed - animation speed in degrees/second (default: 60)
• fps - animation frequency in renders/second (default: 60)
• flex - flex mode (idle animation). Supported values: on, off (default: on)

Example: link